/* FINAL SIDE-BY-SIDE LAYOUT */
@media (min-width: 981px) {
  .page-wrap {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 40px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
  }
  #mainCol {
    width: 55% !important;
    flex: 0 0 55% !important;
  }
  .sidebar {
    width: 40% !important;
    flex: 0 0 40% !important;
    position: sticky !important;
    top: 100px !important;
    margin-bottom: 0 !important;
  }
}



/* ============================================================
   FIX: Remove white gap behind the floating navbar
   ============================================================ */
body {
    background-color: #38599b !important; /* Paints the top area Royal Blue */
    background-image: none !important;
}
main {
    background-color: #ffffff !important; /* Keeps the actual content white */
}

/* ============================================================
   FIX: Reduce the top gap / blue line thickness
   ============================================================ */
@media (min-width: 769px) {
  /* 1. Move the floating navbar up */
  nav#nav {
    top: 10px !important; 
  }
  nav#nav.scrolled {
    top: 5px !important;
  }

  /* 2. Pull the hero section up so there is less blue space above the text */
  .page-hero, .hero {
    padding-top: 100px !important; 
  }
}

/* ============================================================
   FIX: Match Top Spacing Exactly to Homepage
   ============================================================ */
@media (min-width: 769px) {
  /* 1. Navbar sits 20px from the top (matches index.php) */
  nav#nav {
    top: 20px !important; 
  }
  nav#nav.scrolled {
    top: 12px !important;
  }

  /* 2. Hero padding matches the homepage */
  .page-hero, .hero {
    padding-top: 120px !important; 
    margin-top: 0 !important;
  }
}

/* ============================================================
   FORCE: Drastically reduce the blue top strip
   ============================================================ */
@media (min-width: 769px) {
  /* Move navbar to the very top */
  nav#nav {
    top: 5px !important; 
  }
  nav#nav.scrolled {
    top: 5px !important;
  }

  /* Remove the hero's top padding and margin so it touches the navbar */
  .hero, .page-hero {
    padding-top: 60px !important; 
    margin-top: 0 !important;
  }

  /* Reduce the ticker bar padding (if it exists) */
  .hero-ticker {
    padding: 5px 0 !important;
  }
}

/* ============================================================
   MAXIMUM REDUCTION: Bring Navbar & Hero to the very top
   ============================================================ */
@media (min-width: 769px) {
  /* 1. Move navbar to the absolute top */
  nav#nav {
    top: 0px !important; 
    border-radius: 0 0 50px 50px !important; /* Flat top, round bottom */
  }
  nav#nav.scrolled {
    top: 0px !important;
  }

  /* 2. Kill the top padding completely */
  .hero, .page-hero {
    padding-top: 0px !important; 
    margin-top: 0 !important;
  }

  /* 3. Push the hero text up to clear the navbar */
  .hero-body, .ph-inner {
    padding-top: 100px !important;
  }
}

/* ============================================================
   FIX: Make the Ticker Bar Blue to match the hero
   ============================================================ */
.hero-ticker {
    background: #38599b !important; 
    border-bottom: 1px solid #4a70c4 !important;
}

.hero-ticker .ticker-item {
    color: #ffffff !important;
}

.hero-ticker .ticker-item i {
    color: #7df0c9 !important;
}

/* Ensure the top background is blue */
body {
    background-color: #38599b !important;
}

/* ============================================================
   FIX: Navbar Overlap & Spacing
   ============================================================ */
@media (min-width: 769px) {
  /* 1. Bring the navbar down to float over the ticker */
  nav#nav {
    top: 15px !important;
    z-index: 99999 !important; /* Ensure it stays on top */
  }
  
  /* 2. Push the ticker bar down so it clears the navbar */
  .hero-ticker {
    padding-top: 85px !important; 
    padding-bottom: 15px !important;
  }

  /* 3. Push the hero text down slightly to account for the ticker */
  .hero-body {
    padding-top: 40px !important; 
  }
}

/* ============================================================
   FIX: Restore Floating Pill Navbar (Matches Homepage)
   ============================================================ */
@media (min-width: 769px) {
  nav#nav {
    position: fixed !important;
    top: 20px !important; /* Restores the gap from the top */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 60px) !important;
    max-width: 1280px !important;
    height: 76px !important;
    
    /* Restore the white pill shape */
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 50px !important; 
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    
    padding: 0 32px !important;
    z-index: 99999 !important;
  }

  /* Fix the content padding so the ticker doesn't hide under the navbar */
  .hero, .page-hero {
    padding-top: 120px !important;
  }
  .hero-ticker {
    padding-top: 0px !important; 
    margin-top: 0px !important;
  }
}

/* ============================================================
   FIX: Pull Ticker Strip up and align with Navbar
   ============================================================ */
@media (min-width: 769px) {
  /* 1. Reset the hero padding so it doesn't push the ticker down */
  .hero, .page-hero {
    padding-top: 0px !important;
  }
  
  /* 2. Push the ticker up to clear the floating navbar (which is 76px high + 20px top gap) */
  .hero-ticker {
    padding-top: 110px !important; /* Moves the scrolling text up */
    padding-bottom: 15px !important;
    background: #38599b !important; /* Solid blue background */
  }

  /* 3. Ensure the hero text starts right after the ticker */
  .hero-body {
    padding-top: 30px !important;
  }
}

/* ============================================================
   FINAL FIX: Pull ticker strip up tight to the navbar
   ============================================================ */
@media (min-width: 769px) {
  /* 1. Kill all top padding on the hero wrapper */
  .hero, .page-hero {
    padding-top: 0px !important;
    margin-top: 0px !important;
  }

  /* 2. Force the ticker to sit exactly 96px from the top (navbar 76px + 20px gap) */
  .hero-ticker {
    margin-top: 0px !important;
    padding-top: 96px !important; 
    padding-bottom: 12px !important;
    background: transparent !important;
  }

  /* 3. Ensure the inner content of the hero starts right after */
  .hero-body {
    padding-top: 20px !important; 
  }
}



/* ============================================================
   REDUCE GAP BETWEEN NAVBAR AND TICKER
   ============================================================ */
@media (min-width: 769px) {
  /* 1. Reduce the top padding of the ticker itself */
  .hero-ticker {
    padding-top: 85px !important; /* Pulls the text up tight under the navbar */
    margin-top: 0 !important;
  }
  
  /* 2. Ensure the hero container has no extra padding pushing it down */
  .page-hero, .hero {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ============================================================
   GUARANTEED FIX: Pull Ticker Up under Navbar
   ============================================================ */
@media (min-width: 769px) {
  /* 1. Force the hero section to overlap the top space by 45px */
  .hero, .page-hero {
    margin-top: -45px !important; 
    padding-top: 0px !important;
  }

  /* 2. Adjust the ticker's internal spacing */
  .hero-ticker {
    padding-top: 85px !important; /* Keeps text clear of the floating pill */
    padding-bottom: 15px !important;
    margin-top: 0 !important;
  }

  /* 3. Ensure body doesn't have a hidden push-down */
  body {
    padding-top: 0 !important;
  }
}

/* ============================================================
   FINAL FIX: Pull Ticker Strip Up Tight to Navbar
   ============================================================ */
@media (min-width: 769px) {
  /* 1. Remove top padding from the hero */
  .hero, .page-hero {
    padding-top: 0px !important;
    margin-top: 0px !important;
  }
  
  /* 2. Set the exact distance for the ticker */
  .hero-ticker {
    padding-top: 90px !important; /* 76px navbar + 14px gap */
    padding-bottom: 12px !important;
    background: transparent !important;
  }

  /* 3. Ensure the text below sits correctly */
  .hero-body {
    padding-top: 20px !important;
  }
}

/* ============================================================
   FIX: Push Ticker Strip Below Navbar
   ============================================================ */
@media (min-width: 769px) {
  /* 1. Add just enough top padding to clear the floating navbar */
  .hero, .page-hero {
    padding-top: 96px !important; 
    margin-top: 0px !important;
  }
  
  /* 2. Reset the ticker's internal padding so it doesn't add extra space */
  .hero-ticker {
    padding-top: 0px !important; 
    padding-bottom: 15px !important;
  }

  /* 3. Ensure the hero content follows nicely */
  .hero-body {
    padding-top: 30px !important;
  }
}

/* ============================================================
   CONTACT PAGE: Make "Reach Us Instantly" box match premium theme
   ============================================================ */
/* 1. Main container: solid white with shadow */
.channels-card {
    background: #ffffff !important;
    border: 1px solid #dce5f4 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 20px !important;
}

/* 2. Header text colors */
.channels-card .cc-title {
    color: #38599b !important; /* Royal Blue */
    font-weight: 800 !important;
}
.channels-card .cc-live {
    color: #12a08a !important; /* Mint Green */
}

/* 3. Channel rows (Call, WhatsApp, Email, Office) */
.channels-card .channel-item {
    background: #f8faff !important; /* Very light blue/grey */
    border: 1px solid #edf2fb !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    transition: all 0.2s ease !important;
}
.channels-card .channel-item:hover {
    background: #ffffff !important;
    border-color: #6e9eff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(56, 89, 155, 0.08) !important;
}

/* 4. Text inside the channel rows */
.channels-card .ch-label {
    color: #6b7a96 !important; /* Grey label */
}
.channels-card .ch-val {
    color: #14213d !important; /* Dark navy text */
    font-weight: 700 !important;
}

/* 5. Fix the icons background colors */
.channels-card .ch-icon.b {
    background: #eef3ff !important;
    color: #38599b !important;
}
.channels-card .ch-icon.w {
    background: #e8f9ef !important;
    color: #0b7f70 !important;
}
.channels-card .ch-icon.y {
    background: #fff4dc !important;
    color: #b7791f !important;
}

/* 6. Fix the tags (Mon-Sat, Instant Reply, etc.) */
.channels-card .ch-tag.blue {
    background: #eef3ff !important;
    color: #38599b !important;
}
.channels-card .ch-tag.green {
    background: #e8f9ef !important;
    color: #0b7f70 !important;
}
.channels-card .ch-tag.gold {
    background: #fff4dc !important;
    color: #b7791f !important;
}

/* ============================================================
   CONTACT PAGE: Match "Reach Us Instantly" to About Us Box
   ============================================================ */
/* 1. The Main Card */
.channels-card {
    background: #ffffff !important;
    border: 1px solid #dce5f4 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 20px !important;
}

/* 2. The Header Area */
.channels-card .cc-header {
    border-bottom: none !important;
    margin-bottom: 15px !important;
}
.channels-card .cc-title {
    color: #38599b !important; /* Royal Blue */
    font-weight: 800 !important;
    font-family: 'Poppins', 'Montserrat', sans-serif !important;
}
.channels-card .cc-live {
    color: #12a08a !important; /* Mint Green */
    font-weight: 700 !important;
}

/* 3. The Rows (Call, WhatsApp, Email, Office) */
.channels-card .channel-item {
    background: #f8faff !important; /* Very light blue background */
    border: 1px solid #e7edf8 !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
    padding: 14px 16px !important;
    transition: all 0.2s ease !important;
}
.channels-card .channel-item:hover {
    background: #ffffff !important;
    border-color: #6e9eff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(56, 89, 155, 0.08) !important;
}

/* 4. Text inside the rows */
.channels-card .ch-label {
    color: #6b7a96 !important; /* Muted grey label */
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
}
.channels-card .ch-val {
    color: #14213d !important; /* Dark Navy text */
    font-weight: 700 !important;
    font-size: 13.5px !important;
}

/* 5. Icons (Make them solid light backgrounds) */
.channels-card .ch-icon {
    border-radius: 10px !important;
    width: 42px !important;
    height: 42px !important;
}
.channels-card .ch-icon.b {
    background: #eef3ff !important; /* Light blue */
    color: #38599b !important;
}
.channels-card .ch-icon.w {
    background: #e8f9ef !important; /* Light green */
    color: #0b7f70 !important;
}
.channels-card .ch-icon.y {
    background: #fff4dc !important; /* Light yellow */
    color: #b7791f !important;
}

/* 6. Tags (Mon-Sat, Instant Reply, etc) */
.channels-card .ch-tag {
    border: none !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
}
.channels-card .ch-tag.blue {
    background: #eef3ff !important;
    color: #38599b !important;
}
.channels-card .ch-tag.green {
    background: #e8f9ef !important;
    color: #0b7f70 !important;
}
.channels-card .ch-tag.gold {
    background: #fff4dc !important;
    color: #b7791f !important;
}

/* ============================================================
   FIX: Blog Page Navbar Layout
   ============================================================ */
@media (min-width: 769px) {
  nav#nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 60px) !important;
    max-width: 1280px !important;
    height: 76px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 50px !important;
    padding: 0 32px !important;
    z-index: 9999 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
  }
  
  /* Fix the links container so they sit in a row */
  nav#nav .nav-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Fix the right side buttons */
  nav#nav .nav-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }
}