/* Safari Cabs – header & footer styles */

/* ============================================================
   VARIABLES
============================================================ */
:root {
  --primary:      #29ABE2;
  --primary-dark: #1a8bbf;
  --accent:       #f5c800;
  --accent-dark:  #d4ad00;
  --white:   #ffffff;
  --black:   #111111;
  --gray:    #666666;
  --light:   #f7f7f7;
  --border:  #e0e0e0;
  --font:    'Lora', serif;
  --heading: 'Playfair Display', serif;
  --tr: all 0.25s ease;
}

/* ============================================================
   RESET
============================================================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); color:var(--black); background:var(--white); overflow-x:clip; }
a    { text-decoration:none; color:inherit; }
ul   { list-style:none; }
img  { max-width:100%; display:block; }
button { cursor:pointer; border:none; outline:none; background:none; font-family:var(--font); }

.osc-container { max-width:1280px; margin:0 auto; padding:0 20px; }

/* ============================================================
   DESKTOP TOP BAR
============================================================ */
.osc-topbar {
  background:#0C4477;
  height:52px;
  display:flex;
  align-items:center;
  position:relative;
  z-index:1001;
}
.osc-topbar .osc-container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.osc-topbar-tag {
  color:var(--accent);
  font-size:13px;
  font-weight:600;
  font-family:var(--heading);
  letter-spacing:0.5px;
}
.osc-topbar-right {
  display:flex;
  align-items:stretch;
  gap:0;
  height:36px;
}
.osc-topbar-phone {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--white);
  font-size:17px;
  font-weight:400;
  font-family:'Montserrat', sans-serif;
  transition:var(--tr);
  padding:0 16px 0 0;
  border-right:1px solid rgba(255,255,255,0.3);
  margin-right:14px;
}
.osc-topbar-phone:hover { color:var(--accent); }
.osc-topbar-wa {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--white);
  font-size:13px;
  font-weight:600;
  transition:var(--tr);
  margin-right:14px;
}
.osc-topbar-wa i { color:#25d366; font-size:16px; }
.osc-topbar-wa:hover { color:#25d366; }
.osc-btn-callback {
  background:var(--accent);
  color:var(--black) !important;
  font-size:10px;
  font-weight:800;
  padding:0 18px;
  border-radius:4px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-family:var(--heading);
  transition:var(--tr);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
}
.osc-btn-callback:hover { background:var(--accent-dark); }

/* ============================================================
   DESKTOP MAIN HEADER
============================================================ */
.osc-header {
  background:#0C4477;
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
  height:82px;
  position:sticky;
  top:0;
  z-index:1000;
}
.osc-header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
}
.osc-logo {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.osc-logo-img { height:68px; width:auto; }

/* ============================================================
   DESKTOP NAV
============================================================ */
.osc-nav { display:flex; align-items:center; gap:2px; }
.osc-nav-item { position:relative; }
.osc-nav-link {
  color:var(--white);
  font-size:14px;
  font-weight:500;
  font-family:var(--heading);
  padding:8px 13px;
  border-radius:5px;
  transition:var(--tr);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.osc-nav-link:hover,
.osc-nav-link.active { color:var(--accent); }
.osc-nav-link.active::after {
  content:'';
  position:absolute;
  bottom:2px;
  left:13px;
  right:13px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}
.osc-dropdown {
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  background:var(--white);
  min-width:200px;
  border-radius:8px;
  box-shadow:0 8px 30px rgba(0,0,0,0.14);
  padding:8px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:var(--tr);
  border-top:3px solid var(--accent);
  z-index:100;
}
.osc-nav-item:hover .osc-dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.osc-dropdown a {
  display:block;
  padding:9px 18px;
  font-size:13px;
  color:var(--black);
  font-weight:500;
  font-family:var(--heading);
  transition:var(--tr);
}
.osc-dropdown a:hover { background:var(--light); color:var(--primary); padding-left:24px; }
.osc-btn-inquiry {
  background:var(--accent);
  color:var(--black) !important;
  font-size:13px;
  font-weight:800;
  padding:10px 18px;
  border-radius:5px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--heading);
  margin-left:6px;
  transition:var(--tr);
  white-space:nowrap;
}
.osc-btn-inquiry:hover {
  background:var(--accent-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 15px rgba(245,200,0,0.45);
}

/* ============================================================
   HAMBURGER
============================================================ */
.osc-hamburger {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  padding:6px;
  width:40px;
  height:40px;
  background:transparent;
  border-radius:5px;
  transition:var(--tr);
  flex-shrink:0;
}
.osc-hamburger span {
  display:block;
  height:2px;
  background:var(--accent);
  border-radius:2px;
  transition:var(--tr);
  width:100%;
}
.osc-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.osc-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.osc-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   OVERLAY
============================================================ */
.osc-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:9998;
}
.osc-overlay.show { display:block; }

/* ============================================================
   MOBILE DRAWER
============================================================ */
.osc-mobile-nav {
  position:fixed;
  top:0;
  left:0;
  width:285px;
  height:100vh;
  background:#0d1f3c;
  z-index:9999;
  overflow-y:auto;
  overflow-x:hidden;
  transform:translateX(-100%);
  transition:transform 0.32s ease;
  box-shadow:6px 0 30px rgba(0,0,0,0.3);
  display:flex;
  flex-direction:column;
  -webkit-overflow-scrolling:touch;
}
.osc-mobile-nav.open { transform:translateX(0); }

/* Drawer head */
.osc-mobile-nav-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.2);
  flex-shrink:0;
}
.osc-mobile-nav-head-logo img {
  height:48px;
  width:auto;
  border-radius:5px;
  display:block;
}
.osc-mob-close {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--accent);
  color:#000 !important;
  font-size:12px;
  font-weight:800;
  padding:8px 14px;
  border-radius:5px;
  cursor:pointer;
  transition:var(--tr);
  border:none;
  font-family:var(--heading);
  letter-spacing:0.5px;
  text-transform:uppercase;
  white-space:nowrap;
  flex-shrink:0;
}
.osc-mob-close:hover { background:var(--accent-dark); }

/* Drawer links
   FIX: Remove hover padding-left shifts — use background only for hover state.
        This prevents layout jumps across all devices. */
.osc-mobile-nav-links { flex:1; padding:4px 0; }

.osc-mobile-nav-links a {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 20px;
  color:rgba(255,255,255,0.92);
  font-size:14px;
  font-weight:500;
  font-family:var(--heading);
  border-bottom:1px solid rgba(255,255,255,0.07);
  transition:background 0.2s ease, color 0.2s ease;
  text-decoration:none;
}
.osc-mobile-nav-links a.mob-sub {
  padding-left:38px;
  font-size:13px;
  color:rgba(255,255,255,0.65);
}
.osc-mobile-nav-links a.active {
  color:#fff;
  background:rgba(255,255,255,0.06);
}
/* No padding-left shift on hover — only color+bg change */
.osc-mobile-nav-links a:hover {
  color:var(--accent);
  background:rgba(255,255,255,0.06);
}
.osc-mobile-nav-links a:last-child { border-bottom:none; }

.osc-mobile-nav-links a .nav-icon {
  width:18px;
  min-width:18px;
  text-align:center;
  color:rgba(255,255,255,0.55);
  font-size:13px;
  flex-shrink:0;
  transition:color 0.2s ease;
}
.osc-mobile-nav-links a.active .nav-icon { color:rgba(255,255,255,0.75); }
.osc-mobile-nav-links a:hover .nav-icon  { color:var(--accent); }

/* Drawer footer */
.osc-mobile-nav-footer {
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,0.1);
  display:flex;
  flex-direction:column;
  gap:10px;
  flex-shrink:0;
}
.mob-wa-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--accent);
  color:#000 !important;
  padding:13px 16px;
  border-radius:6px;
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  transition:var(--tr);
  border-bottom:none !important;
  white-space:nowrap;
}
.mob-wa-btn:hover { background:var(--accent-dark); color:#000 !important; }
.mob-wa-btn .nav-icon { color:#000 !important; font-size:17px; min-width:auto; }

/* ============================================================
   MOBILE TOP BAR ROWS — hidden on desktop
============================================================ */
.osc-topbar-mob-row1,
.osc-topbar-mob-row2 { display:none; }

/* ============================================================
   RESPONSIVE ≤ 1024px  (tablets + mobile)
============================================================ */
@media (max-width:1024px) {

  /* Hide desktop elements */
  .osc-nav          { display:none; }
  .osc-topbar-tag   { display:none; }
  .osc-topbar-right { display:none; }
  .osc-logo         { display:none; }

  /* Hamburger visible */
  .osc-hamburger { display:flex; }

  /* Topbar becomes a column container */
  .osc-topbar {
    height:auto;
    padding:0;
    flex-direction:column;
    align-items:stretch;
    background:#0C4477;
  }
  .osc-topbar .osc-container {
    flex-direction:column;
    gap:0;
    padding:0;
  }

  /* ---- ROW 1: Logo left | Phone+Button right ---- */
  .osc-topbar-mob-row1 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px 10px;
  gap:20px;              /* 12px → 20px — logo aur right group ke beech gap */
}

  /* Mobile logo */
  .mob-logo-inline {
    display:flex;
    align-items:center;
    text-decoration:none;
    flex-shrink:0;
  }
  .mob-logo-inline img {
    height:80px;
    width:auto;
    border-radius:4px;
    display:block;
  }

  /* Right column: phone number + button stacked */
  .mob-right-group {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  flex:1;
  min-width:0;
  max-width:220px;
  margin-left:16px;      /* ← yeh add karo — logo se alag karta hai */
}

  /* Phone link */
  .mob-phone-big {
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--accent);
    font-size:16px;
    font-weight:700;
    font-family:'Montserrat', sans-serif;
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.2;
  }
  .mob-phone-big img {
    flex-shrink:0;
    width:20px;
    height:20px;
    object-fit:contain;
  }

  /* Callback button */
  .osc-btn-callback-mob {
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent);
    color:var(--black) !important;
    font-size:12px;
    font-weight:800;
    padding:9px 10px;
    border-radius:6px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    font-family:var(--heading);
    white-space:nowrap;
    text-decoration:none;
    transition:var(--tr);
    width:100%;
    text-align:center;
    line-height:1.2;
  }
  .osc-btn-callback-mob:hover { background:var(--accent-dark); }

  /* ---- ROW 2: Tagline centered, single line, no justify/spread ---- */
  .osc-topbar-mob-row2 {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px 16px 8px;
    overflow:hidden;
    width:100%;
    box-sizing:border-box;
  }
  .osc-topbar-mob-row2 .osc-tagline-stretch {
    display:block;
    font-size:15px;
    font-weight:800;
    color:var(--accent);
    letter-spacing:0.4px;
    text-transform:uppercase;
    text-align:center;
    white-space:nowrap;
  }

  /* Sticky header strip — just holds hamburger */
  .osc-header {
    height:44px;
    background:#0d1f3c;
    box-shadow:none;
    position:sticky;
    top:0;
    z-index:1000;
  }
  .osc-header-inner {
    justify-content:flex-end;
    background:#0d1f3c;
    padding:0 14px;
  }
}

/* ============================================================
   SMALL PHONES ≤ 480px
============================================================ */
@media (max-width:480px) {
  .mob-logo-inline img   { height:70px; }
  .mob-phone-big         { font-size:14px; }
  .osc-btn-callback-mob  { font-size:11px; padding:8px 8px; }
  .mob-right-group       { max-width:180px; }
  .osc-topbar-mob-row2 .osc-tagline-stretch { font-size:10.5px; }
}

/* ============================================================
   VERY SMALL ≤ 360px
============================================================ */
@media (max-width:360px) {
  .osc-topbar-mob-row1  { padding:8px 10px; gap:8px; }
  .mob-logo-inline img  { height:58px; }
  .mob-phone-big        { font-size:13px; }
  .osc-btn-callback-mob { font-size:10px; padding:8px 6px; letter-spacing:0.2px; }
  .mob-right-group      { max-width:160px; }
  .osc-topbar-mob-row2  { padding:6px 12px 8px; }
  .osc-topbar-mob-row2 .osc-tagline-stretch { font-size:9.5px; letter-spacing:0.2px; }
}


/* ============================================================
   ANNOUNCEMENT BAR — scrolling ticker (top under header + home bottom under hero)
   Never pauses on hover / touch: it keeps scrolling continuously.
============================================================ */
.osc-announce{background:#F9DD0A;color:#000;overflow:hidden;white-space:nowrap;height:40px;display:flex;align-items:center;font-family:'Montserrat','Poppins',sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;position:relative;z-index:5;pointer-events:none;user-select:none;-webkit-user-select:none}
.osc-announce-track{display:inline-flex;flex-shrink:0;animation:oscAnnounce 40s linear infinite;will-change:transform}
.osc-announce:hover .osc-announce-track,.osc-announce-track:hover{animation-play-state:running !important}
/* top bar scrolls to the LEFT, bottom bar (home, under hero) scrolls to the RIGHT */
.osc-announce-bottom .osc-announce-track{animation-direction:reverse}
.osc-announce-item{display:inline-flex;align-items:center;padding:0 22px}
.osc-announce-item::after{content:"\2726";margin-left:44px;font-size:11px}
@keyframes oscAnnounce{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:768px){.osc-announce{height:34px;font-size:11.5px}.osc-announce-item{padding:0 14px}.osc-announce-item::after{margin-left:28px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.osc-announce-track{animation:none}}
/* Sticky wrapper: desktop = transparent (only nav bar sticks); mobile = whole top area sticks */
.osc-sticky-wrap{display:contents;}
@media (max-width:1024px){
  .osc-sticky-wrap{display:block;position:-webkit-sticky;position:sticky;top:0;z-index:1000;}
  .osc-sticky-wrap .osc-header{position:relative;}
}