/* =====================================================================
   SHINING STAR INSURANCE SERVICES — STYLESHEET
   Organized section-wise (matches index.html order). Each section
   contains its own base styles followed by its own responsive rules.
   Breakpoints used across the file: 1440, 1366, 1280, 1024, 991.98,
   768, 575, 480, 360 (covers 360/480/481/575/768/991/1024/1025/
   1280/1366/1440 requested widths with no gaps).

   NOTE ON 991.98px: Bootstrap 5's own grid/nav breakpoints switch at
   exactly 992px (`min-width: 992px`). Custom overrides used a plain
   "max-width: 991px" before, which left a fractional dead-zone
   (~991.01px–991.99px, easily hit via browser zoom / OS display
   scaling / devtools) where NEITHER Bootstrap's 992px rules NOR our
   991px rules matched — e.g. the header nav toggler stayed hidden
   while the desktop menu markup was also still collapsed, so no
   menu showed at all. Using 991.98px (Bootstrap's own convent
   
   ion)
   closes that gap everywhere it's used (header/nav, banner, trust
   strip, about, services, who-we-serve, process, contact, faqs,
   footer) so every custom breakpoint interlocks cleanly with
   Bootstrap's 992px switch with zero gap and zero overlap.
   ===================================================================== */

/* ============ 1. RESET ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
ul, p, h1, h2, h3, h4, h5, h6 { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }

/* ============ 2. ROOT VARIABLES & BASE TYPE ============ */
:root {
    --prime-font: 'Poppins', sans-serif;
    --dark-blue: #1d0e2c;
    --primary-blue: #2D2C5E;
    --secondary-blue: #4E69C3;
    --light-blue: #5E87F5;
    --off-blue: #E1E8FD;
    --white: #fff;
    --black: #000;
    --gray: #666;
}
body, h1, h2, h3, h4, h5, h6, p, span, div { font-family: var(--prime-font); }
body { overflow-x: hidden; }
html { scroll-behavior: smooth; }

/* ============ 3. UTILITIES (container, section, buttons, section-head) ============ */
.container { width: 100%; max-width: 1280px; padding: 0 30px; margin: 0 auto; position: relative; z-index: 4; }
.container-fluid { width: 100%; padding: 0 30px; margin: 0 auto; }
section { padding: 120px 0; }
.row, .col-6, .col-12, .col-lg-6, .col-md-3, .col-md-6, .col-md-12, .col-sm-4, .col-sm-8, .col-sm-12, .col-xl-2, .col-xl-3, .col-xl-5, .col-xl-6, .col-xl-8 { margin: 0; padding: 0; }
.text-center { text-align: center; }
.btn-area { margin-top: 20px; }
.primary-btn, .secondary-btn { position: relative; font-family: var(--prime-font); font-size: 14px; font-weight: 500; padding: 10px 30px; border-radius: 100px; white-space: nowrap; border: initial; outline: initial; text-transform: uppercase; transition: all 0.35s ease; display: inline-block; letter-spacing: 0.4px; }
.primary-btn { background: linear-gradient(135deg, var(--secondary-blue), var(--light-blue)); color: var(--white); box-shadow: 0 10px 24px -8px rgba(78, 105, 195, 0.55); }
.primary-btn:hover { background: var(--white); color: var(--primary-blue); transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(78, 105, 195, 0.45); }
.secondary-btn { background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)); color: var(--white); box-shadow: 0 10px 24px -8px rgba(29, 14, 44, 0.45); }
.secondary-btn:hover { background: linear-gradient(135deg, var(--secondary-blue), var(--light-blue)); transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(78, 105, 195, 0.5); }
.secondary-btn span { font-size: 13px; padding-left: 10px; transition: transform 0.3s ease; display: inline-block; }
.secondary-btn:hover span { transform: translateX(4px); }

.section-eyebrow { width: 100%; max-width: fit-content; padding: 4px 24px 4px 18px; font-size: 14px; letter-spacing: 1.2px; line-height: 1.4em; font-weight: 500; background: #4e69c345; border-radius: 100px; border: 1px solid var(--secondary-blue); display: flex; align-items: center; gap: 8px; }
.section-eyebrow:before { content: ''; width: 7px; height: 7px; border-radius: 50%; background-color: var(--secondary-blue); flex-shrink: 0; }
.section-eyebrow.light { background: #ffffff1a; border-color: var(--light-blue); color: var(--white); }
.section-eyebrow.light:before { background-color: var(--light-blue); }

.section-head h2 { font-size: 46px; line-height: 1.2em; font-weight: 600; color: var(--primary-blue); margin-top: 16px; position: relative; }
.section-head h2:before { content: ''; display: block; width: 100px; height: 3px; background-color: var(--secondary-blue); position: absolute; bottom: -10px; left: 0; }
.section-head.text-center { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.section-head.text-center h2:before { left: 50%; transform: translateX(-50%); }
.head-description { font-size: 24px; font-weight: 500; line-height: 32px; color: #061B50; padding-top: 20px; }
.sub-description { font-size: 18px; font-weight: normal; line-height: 28px; color: var(--gray); padding-top: 20px; margin: 0; }
.sub-description span { font-size: 18px; font-weight: 500; line-height: 1.5em; color: var(--primary-blue); }

/* Scroll-reveal: elements fade + rise into place as they enter the viewport
   (JS toggles .in-view via IntersectionObserver in script.js). Degrades
   gracefully to fully visible if JS doesn't run. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view .reveal-item { opacity: 1; transform: translateY(0); }
.reveal-item { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-item { opacity: 1; transform: none; transition: none; }
}

@media screen and (max-width: 1366px) {
    section { padding: 100px 0; }
    .section-head h2 { font-size: 40px; }
}
@media screen and (max-width: 1280px) {
    section { padding: 90px 0; }
}
@media screen and (max-width: 1024px) {
    section { padding: 70px 0; }
    .section-head h2 { font-size: 34px; line-height: 1.3em; }
}
@media screen and (max-width: 991.98px) {
    .container, .container-fluid { padding: 0 20px; }
    section { padding: 50px 0; }
    .section-head h2 { font-size: 28px; line-height: 36px; }
    .section-head h2:before { width: 72px; }
    .head-description { font-size: 20px; line-height: 28px; }
    .sub-description { font-size: 16px; line-height: 26px; }
}
@media screen and (max-width: 575px) {
    section { padding: 40px 0; }
    .section-head h2 { font-size: 24px; line-height: 32px; }
    .sub-description { font-size: 15px; line-height: 24px; }
    .primary-btn, .secondary-btn { padding: 9px 22px; font-size: 13px; }
    .section-eyebrow { font-size: 11px; padding: 4px 20px 4px 18px; }
}
@media screen and (max-width: 480px) {
    .container, .container-fluid { padding: 0 16px; }
    .section-head h2 { font-size: 22px; line-height: 30px; }
}
@media screen and (max-width: 360px) {
    .primary-btn, .secondary-btn { padding: 8px 18px; font-size: 12px; }
    .section-head h2 { font-size: 20px; line-height: 28px; }
}

/* ============ 4. HEADER & NAVIGATION ============ */
.header-wrapper { position: sticky; top: 0; z-index: 99; width: 100%; background-color: var(--white); transition: box-shadow 0.3s ease; }
.header-wrapper.is-scrolled { box-shadow: 0 8px 30px -14px rgba(29, 14, 44, 0.25); }
.header.navbar { padding: 8px 0; }

/* Top Info Bar : phone, license, address, nationwide service */
.top-info-bar { background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)); }
.top-info-bar .container-fluid { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; padding-top: 8px; padding-bottom: 8px; }
.top-info-left, .top-info-right { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 24px; }
.top-info-bar span, .top-info-bar a { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-size: 13px; font-weight: 500; text-decoration: none; letter-spacing: 0.2px; white-space: nowrap; }
.top-info-bar i { color: var(--light-blue); font-size: 13px; }
.top-info-right a { font-weight: 600; transition: color 0.3s ease; }
.top-info-right a:hover { color: var(--light-blue); }

/* Header phone number : visible alongside sticky nav */
.header-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; white-space: nowrap;}
.secondary-btn:hover i { color: var(--white); }
.header-phone i { color: var(--light-blue); font-size: 15px; }
.nav-booking { gap: 20px; }
.nav-logo { width: 100%; max-width: 280px; }
.nav-logo img { width: 100%; max-width: 280px; height: auto; }

.nav-wrapper { display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
.nav-wrapper h4 { display: none; }
.nav-wrapper .navbar-nav { display: flex; gap: 10px; align-items: center; }
.nav-item { padding: 6px 12px; }
.nav-wrapper .navbar-nav .nav-item .nav-link { position: relative; display: flex; color: var(--secondary-blue); font-size: 16px; padding: 0; font-family: var(--prime-font); text-decoration: initial; font-weight: 600; text-transform: uppercase; }
.nav-item .nav-link:after { content: ""; position: absolute; bottom: -7px; left: 0; margin: 0 auto; width: 100%; height: 2px; background-color: var(--primary-blue); transform-origin: right; transform: scaleX(0); transition: transform 0.3s ease-in-out; }
.nav-wrapper .navbar-nav .nav-item .nav-link.active { position: relative; color: var(--primary-blue); }
.nav-item .nav-link.active:after { color: var(--primary-blue); transform: scaleX(1); transform-origin: left; }
.nav-wrapper .navbar-nav .nav-item:hover .nav-link { color: var(--primary-blue); }
.nav-item:hover .nav-link:after { transform: scaleX(1); transform-origin: left; }

.nav-booking { display: flex; }
.nav-booking .secondary-btn { padding: 10px 20px; }

.navbar-toggler { display: none; }
.navbar-toggler-cross { border: initial; background: initial; color: var(--white); font-size: 18px; position: absolute; right: 20px; top: 18px; visibility: hidden; opacity: 0; width: 100%; max-width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; }
.navbar-toggler-cross[aria-expanded="true"] { visibility: visible; opacity: 1; z-index: 2; }

@media screen and (min-width: 992px) {
    .nav-wrapper h4 { display: none; }
}

@media screen and (max-width: 1280px) {
    .header-wrapper .container-fluid { gap: 10px; }
    .nav-logo { max-width: 210px;}
    .nav-logo img { max-width: 210px; }
}
@media (max-width: 1119px) and (min-width: 992px) {
    .header-wrapper .container-fluid { flex-direction: column; padding-bottom: 10px; }
}
@media screen and (max-width: 991.98px) {
    .top-info-bar { display: none; }
}
@media screen and (max-width: 991.98px) {
    .navbar-expand-lg .navbar-toggler { display: inline-flex !important; }
    body.hidden { overflow: hidden; }
    .header-wrapper .container-fluid { align-items: flex-start; }
    .header-wrapper { position: fixed; top: 0; left: 0; width: 100%; transition: all 0.3s ease; }
    .header.navbar { margin: 0; padding: 12px 0; background-color: var(--white); }
    .navbar-toggler { display: flex; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); flex-direction: column; gap: 5px; padding: 6px 8px; color: var(--secondary-blue); border: 1px solid var(--secondary-blue); border-radius: 6px; outline: initial; box-shadow: initial; z-index: 999; }
    .nav-btn-icon { width: 22px; display: block; color: var(--secondary-blue); border-bottom: 2px solid var(--secondary-blue); }
    .nav-wrapper { position: fixed; top: 0; left: -100%; width: 100%; max-width: 400px; height: 100vh; opacity: 0; z-index: 999; background-color: var(--white); display: initial; transition: all 0.5s ease; }
    .nav-wrapper::before { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgb(0 0 0 / 70%); z-index: -1; }
    .nav-wrapper.show { left: 0; opacity: 1; flex-direction: column; transition: all 0.5s ease; }
    .nav-wrapper h4 { display: block; color: var(--white); font-size: 18px; font-weight: 500; width: 100%; padding: 16px 20px; background-color: var(--primary-blue); }
    .nav-wrapper .navbar-nav { gap: 10px; background: var(--white); height: calc(100vh - 124px); z-index: 2; position: relative; overflow: auto; width: 100%; align-items: flex-start; padding-top: 16px; flex-direction: column; }
    .nav-item { width: 100%; padding: 12px 20px; }
    .nav-wrapper .navbar-nav .nav-item .nav-link { padding: 0; width: 100%; }
    .nav-item:not(:last-child) { border-bottom: 1px solid #d3d3d3; }
    .nav-item .nav-link:after { content: initial; }
    .nav-booking { background-color: var(--white); padding: 16px 20px; width: 100%; }
    .navbar-toggler:focus { outline: 0 !important; box-shadow: initial; }
    .header-phone { font-size: 15px; }
}
@media screen and (max-width: 575px) {
    .header-wrapper .container-fluid { padding: 0px 12px 0px 12px; }
    .nav-logo { max-width: 160px; }
    .nav-logo img { max-width: 160px; }
}
@media screen and (max-width: 480px) {
    .nav-logo { max-width: 180px; }
    .nav-logo img { max-width: 180px; }
}

/* ============ 5. BANNER SLIDER ============ */
.banner-wrapper { overflow: hidden; position: relative; }
.banner-slider { position: relative; }
.banner-content-area { position: relative; overflow: hidden; }
.banner-image { position: relative; }
.banner-image:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(90deg, #2d2c5e 8% 12%, #2d2c5e52 100%); z-index: 1; }
.owl-item .banner-image img { width: 100%; height: 100%; transform: scale(1); object-fit: cover; transition: all 6.5s ease-in-out; aspect-ratio: 21 / 9; }
.owl-item.active .banner-image img { transform: scale(1.2); }

.banner-content { position: absolute; width: 100%; max-width: 1280px; padding: 0 30px; top: 50%; left: 0; right: 0; transform: translateY(-50%); overflow: hidden; margin: 0 auto; z-index: 2; display: flex; align-items: center; justify-content: flex-start; }
.banner-details { max-width: 63%; padding-right: 30px; }
.banner-title { font-size: 68px; color: var(--white); font-weight: 700; font-family: var(--prime-font); line-height: 1.2em; padding: 16px 0; margin: 0; }
.sub-title, .banner-description { color: var(--white); font-weight: 400; font-size: 18px; font-family: var(--prime-font); }
.sub-title { font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 1.8px; background: #e1e8fd0d; max-width: fit-content; padding: 4px 16px; border-radius: 100px; border: 1px solid #e1e8fd3d; backdrop-filter: blur(4px); }
.banner-description { margin-bottom: 30px; padding-right: 150px; }
.banner-quick-info { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.banner-quick-info span { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-size: 14px; font-weight: 600; background: #ffffff1a; padding: 9px 20px; border-radius: 100px; border: 1px solid #ffffff33; backdrop-filter: blur(4px); white-space: nowrap; }
.banner-quick-info i { color: var(--light-blue); }

.banner-slider .owl-dots { position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; align-items: center; justify-content: center; }
.banner-slider .owl-dots .owl-dot { width: 100%; min-width: 150px; height: 6px; background-color: var(--white); border-radius: 50px; transition: all 0.3s ease; }
.banner-slider .owl-dots .owl-dot.active { height: 7px; background-color: var(--secondary-blue); }

@media screen and (max-width: 1440px) {
    .banner-title { font-size: 62px; }
}
@media screen and (max-width: 1366px) {
    .banner-details { max-width: 58%; }
    .banner-title { font-size: 56px; line-height: 1.15em; }
}
@media screen and (max-width: 1280px) {
    .banner-details { max-width: 55%; padding-right: 0; }
    .banner-title { font-size: 48px; line-height: 1.15em; padding: 16px 0; }
}
@media screen and (max-width: 1024px) {
    .banner-title { font-size: 42px; line-height: 1.2em; padding: 12px 0; }
    .sub-title { margin: 0; }
    .banner-description { margin-bottom: 16px; }
}
/* Fixed header kicks in below 992px — push the banner down by the real header
   height (set via JS in script.js) so the top of the slide is never hidden
   underneath it. The px fallback covers the case before JS runs. */
@media screen and (max-width: 991.98px) {
    .banner-wrapper { padding-top: var(--header-height, 116px); }
    .banner-details { max-width: 68%; padding-right: 20px; }
    .banner-title { font-size: 34px; line-height: 1.2em; padding: 12px 0; }
    .banner-slider .owl-dots .owl-dot { min-width: 100px; }
    /* Transitional aspect ratio so the image doesn't jump straight
       from a short 21:9 crop to a tall 4:5 crop at the 768 breakpoint;
       this step gives the overlaid text a bit more vertical room on
       tablets while keeping the change gradual. */
    .owl-item .banner-image img { aspect-ratio: 16 / 9; }
    /* Safety net: keep the overlaid description from clipping past the
       image edge on any tablet/mid-size screen, regardless of how the
       browser wraps this particular copy length. */
    .banner-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
}
@media screen and (max-width: 768px) {
    .banner-title { font-size: 28px; line-height: 1.25em; }
    .sub-title { font-size: 14px; }
    .banner-description { padding-right: 0; }
    .banner-details { max-width: 100%; }
    .owl-item .banner-image img { aspect-ratio: 4 / 5; }
    .banner-description { -webkit-line-clamp: 5; }
}
/* Below this point the overlay-on-image layout can't reliably fit the
   headline + description + button without clipping, so the slide switches
   to a stacked layout: a shorter image on top, content in normal flow
   underneath (own background, height grows with the text — nothing gets
   cut off, on any phone). */
@media screen and (max-width: 575px) {
    .banner-wrapper { padding-top: var(--header-height, 84px); }
    .banner-content-area { display: flex; flex-direction: column; overflow: visible; }
    .banner-image { height: 220px; order: 1; overflow: hidden; }
    .banner-image:before { background-image: linear-gradient(180deg, #2d2c5e00 55%, var(--dark-blue) 100%); }
    .owl-item .banner-image img { height: 100%; aspect-ratio: initial; }
    .banner-content { position: static; order: 2; width: 100%; max-width: 100%; padding: 40px 20px 114px; transform: none; overflow: visible; display: block; background: linear-gradient(180deg, var(--primary-blue), var(--dark-blue)); }
    .banner-details { max-width: 100%; padding-right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;}
    /* Stacked layout has room to grow, so let the description flow in
       full instead of clamping it like the overlay layout above. */
    .banner-details .sub-title { font-size: 12px; text-align: center; letter-spacing: 1.8px; }
    .banner-description { display: block; -webkit-line-clamp: initial; overflow: visible; text-align: center; font-size: 16px; }
    .banner-title { font-size: 24px; line-height: 1.3em; padding: 10px 0; text-align: center; }
    .banner-details .primary-btn { padding: 10px 20px; font-size: 13px; }
    .banner-quick-info { justify-content: center; gap: 8px; }
    .banner-quick-info span { font-size: 12px; padding: 7px 14px; }
    .banner-slider .owl-dots { bottom: 60px; }
    .banner-slider .owl-dots .owl-dot { min-width: 40px; }
    
}
@media screen and (max-width: 480px) {
    .banner-image { height: 190px; }
    .banner-title { font-size: 28px; }
    .sub-title { font-size: 11px; }
    .banner-description { font-size: 14px; }
    .banner-quick-info span:nth-child(3) { display: none; }
}
@media screen and (max-width: 360px) {
    .banner-image { height: 170px; }
    .banner-title { font-size: 18px; line-height: 1.3em; }
    .banner-slider .owl-dots .owl-dot { min-width: 30px; }
}

/* ============ 6. TRUST STRIP ============ */
/* Contact & Credentials Highlight Section : phone, USA coverage, license, address */
.info-highlight-wrapper { position: relative; z-index: 6; margin-top: -55px; padding: 0 0 80px; }
.info-highlight-card { position: relative; background: linear-gradient(120deg, var(--primary-blue) 0%, var(--dark-blue) 100%); border-radius: 20px; padding: 40px 30px; box-shadow: 0 30px 60px -22px rgba(29, 14, 44, 0.55), 0 0 0 1px #ffffff14; overflow: hidden; }
.info-highlight-card:before { content: ''; position: absolute; top: -60%; right: -10%; width: 380px; height: 380px; background: radial-gradient(circle, #5e87f533, transparent 70%); pointer-events: none; }
.info-highlight-items { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 26px 40px; }
.info-highlight-item { flex: 1 1 240px; display: flex; align-items: center; gap: 16px; position: relative; padding: 6px; border-radius: 14px; transition: transform 0.35s ease, background-color 0.35s ease; }
.info-highlight-item:hover { transform: translateY(-4px); background-color: #ffffff0d; }
.info-highlight-icon { flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary-blue), var(--light-blue)); box-shadow: 0 10px 22px -8px rgba(78, 105, 195, 0.65); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--white); transition: transform 0.35s ease; }
.info-highlight-item:hover .info-highlight-icon { transform: scale(1.08) rotate(-4deg); }
.info-highlight-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.info-highlight-label { font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #b9c3ec; font-weight: 600; }
.info-highlight-value { font-size: 18px; font-weight: 500; color: var(--white); text-decoration: none; line-height: 1.35em; transition: color 0.3s ease; }
a.info-highlight-value:hover { color: var(--light-blue); }

@media screen and (min-width: 992px) {
    .info-highlight-item:not(:last-child):after { content: ''; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 1px; height: 42px; background: linear-gradient(180deg, transparent, #ffffff3d, transparent); }
    .banner-image { height:780px; }
}
@media screen and (max-width: 991.98px) {
    .info-highlight-wrapper { margin-top: -40px; }
    .info-highlight-card { padding: 28px 26px; border-radius: 18px; }
    .info-highlight-items { justify-content: flex-start; }
    .info-highlight-item { flex: 1 1 45%; }
}

@media screen and (max-width: 575px) {
    .info-highlight-wrapper { margin-top: -28px; padding-bottom: 40px; }
    .info-highlight-card { padding: 24px 20px; border-radius: 16px; }
    .info-highlight-items { flex-direction: column; align-items: stretch; gap: 6px; }
    .info-highlight-item { flex: 1 1 auto; padding: 14px 6px; flex-direction: column;
        text-align: center; }
    .info-highlight-item:not(:last-child) { border-bottom: 1px solid #ffffff1f; }
}

.trust-strip-wrapper { background-color: #e1e8fd69; padding: 40px 0; border-bottom: 1px solid var(--secondary-blue); border-top: 1px solid var(--secondary-blue); }
.trust-strip-items { display: flex; justify-content: space-between; gap: 20px; }
.trust-strip-item { flex: 1; text-align: center; padding: 14px 20px; position: relative; border-radius: 14px; transition: all 0.35s ease; }
.trust-strip-item:hover { background-color: var(--white); box-shadow: 0 14px 30px -18px rgba(45, 44, 94, 0.35); transform: translateY(-3px); }
.trust-strip-item:not(:last-child):after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 40px; background-color: var(--light-blue); opacity: 0.4; }
.trust-strip-code { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; color: var(--secondary-blue); margin-bottom: 8px; }
.trust-strip-item h4 { font-size: 18px; font-weight: 600; color: var(--primary-blue); margin-bottom: 6px; }
.trust-strip-item p { font-size: 14px; color: var(--gray); line-height: 20px; }

@media screen and (max-width: 1024px) {
    .trust-strip-item p { font-size: 13px; }
}
@media screen and (max-width: 991.98px) {
    .trust-strip-wrapper { padding: 30px 0; }
    /* 5 items wrapped 2-per-row leaves the 5th item alone on the last
       row; center the row group so that leftover item isn't stranded
       on the left with empty space beside it. */
    .trust-strip-items { flex-wrap: wrap; justify-content: center; }
    .trust-strip-item { flex: 1 1 45%; padding: 10px; }
    .trust-strip-item:after { display: none; }
}
@media screen and (max-width: 575px) {
    .trust-strip-item { flex: 1 1 100%; padding: 14px 0; border-bottom: 1px solid #4e69c333; }
    .trust-strip-item:last-child { border-bottom: none; }
}
@media screen and (max-width: 360px) {
    .trust-strip-item h4 { font-size: 16px; }
    .trust-strip-item p { font-size: 13px; }
}

/* ============ 7. ABOUT US ============ */
.about-us-wrapper { padding-bottom: 0; }
.about-us-wrapper .section-head { text-align: start; }
.about-us-wrapper .section-head h2:before { content: initial;}
.about-us-wrapper .btn-area { margin-top: 50px; }
.about-us-content { display: flex; gap: 50px; align-items: center; padding: 0; }
.about-img-box { width: 50%; display: flex; flex-direction: column; gap: 30px; }
.about-img-box img { width: 100%; height: 100%; border-radius: 24px; object-fit: cover; }
.about-content-box { width: 50%; }
.sub-description.our-goal { border-left: 2px solid var(--secondary-blue); font-size: 14px; padding: 16px 24px; margin-top: 24px; line-height: 1.6em; box-shadow: 0 20px 50px -20px rgba(8, 19, 31, 0.35); }
.sub-description.our-goal span { font-size: 14px; }

@media screen and (max-width: 1280px) {
    .about-us-content { gap: 35px; }
}
@media screen and (max-width: 1024px) {
    .about-us-content { gap: 25px; }
    .about-us-wrapper .btn-area { margin-top: 30px; }
}
@media screen and (max-width: 991.98px) {
    .about-us-wrapper { padding-bottom: 30px; position: relative; }
}
@media screen and (max-width: 768px) {
    .about-us-content { gap: 30px; flex-direction: column-reverse; }
    .about-img-box, .about-content-box { width: 100%; }
    .about-us-wrapper .section-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
    .about-us-wrapper .section-head h2 { padding-left: 0; }
    .about-us-wrapper .section-head h2:before { width: 72px; height: 3px; left: 50%; bottom: -10px; transform: translateX(-50%); }
    .about-us-wrapper .btn-area { max-width: fit-content; margin: 20px auto 0; position: absolute; bottom: -70px; left: 0; right: 0; }
    .about-us-wrapper { padding-bottom: 0px; }
}
@media screen and (max-width: 575px) {
    .about-img-box { gap: 20px; }
    .about-us-wrapper .btn-area { bottom: -75px; }
}
@media screen and (max-width: 480px) {
    .sub-description.our-goal { padding: 14px 18px; }
}

/* ============ 8. SERVICES ============ */
.services-wrapper { background-color: var(--white); }
.services-items { margin-top: 50px; display: flex; flex-direction: column; gap: 20px; }
.service-row { display: grid; grid-template-columns: 140px 1fr 300px; gap: 30px; align-items: start; background-color: var(--off-blue); border-radius: 20px; padding: 40px; transition: all 0.4s ease; border: 1px solid transparent; }
.service-row:hover { border-color: var(--secondary-blue); box-shadow: 0 20px 45px -24px rgba(45, 44, 94, 0.3); transform: translateY(-4px); }
.service-badge { display: inline-flex; align-items: center; gap: 8px; background-color: var(--white); color: var(--secondary-blue); font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 100px; border: 1px solid var(--secondary-blue); transition: all 0.3s ease; }
.service-row:hover .service-badge { background: linear-gradient(135deg, var(--secondary-blue), var(--light-blue)); color: var(--white); border-color: transparent; }
.service-copy h3 { font-size: 26px; font-weight: 600; color: var(--primary-blue); margin-bottom: 14px; }
.service-copy p { font-size: 16px; line-height: 26px; color: var(--gray); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tag { font-size: 13px; font-weight: 500; color: var(--secondary-blue); background-color: var(--white); border: 1px solid var(--secondary-blue); padding: 5px 14px; border-radius: 100px; }
.service-aside { background-color: var(--white); border-radius: 14px; padding: 24px; }
.service-aside h4 { font-size: 18px; font-weight: 600; color: var(--primary-blue); margin-bottom: 10px; }
.service-aside p { font-size: 14px; color: var(--gray); line-height: 22px; margin-bottom: 18px; }
.service-aside .primary-btn { display: inline-block; font-size: 13px; padding: 10px 22px; }
.service-aside .primary-btn:hover { background: var(--primary-blue); color: var(--white); }

@media screen and (max-width: 1280px) {
    .service-row { grid-template-columns: 120px 1fr 260px; gap: 24px; padding: 32px; }
}
@media screen and (max-width: 1024px) {
    .service-row { grid-template-columns: 1fr; padding: 30px; gap: 20px; }
    .service-mm { order: -1; }
    .service-copy h3 { font-size: 22px; }
}
@media screen and (max-width: 991.98px) {
    .services-items { margin-top: 30px; gap: 16px; }
}
@media screen and (max-width: 575px) {
    .service-row { padding: 24px 20px; }
    .service-copy h3 { font-size: 20px; }
    .service-copy p { font-size: 14px; line-height: 22px; }
    .service-aside { padding: 18px; }
}
@media screen and (max-width: 360px) {
    .service-row { padding: 18px 16px; }
    .service-badge { font-size: 12px; padding: 6px 12px; }
}

/* ============ 9. WHO WE SERVE ============ */
.serve-wrapper { background-color: var(--primary-blue); position: relative; overflow: hidden; }
.serve-wrapper:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/truck23.jpg"); background-size: cover; background-position: center; opacity: 0.16; z-index: 0; }
.serve-wrapper:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(120deg, var(--primary-blue) 20%, #2d2c5edd 60%, var(--primary-blue) 100%); z-index: 1; }
.serve-wrapper .container { position: relative; z-index: 2; }
.serve-wrapper .section-head h2 { color: var(--white); }
.serve-wrapper .section-head h2:before { background-color: var(--light-blue); }
.serve-wrapper .sub-description { color: var(--off-blue); }
.serve-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.serve-card { background-color: #ffffff0d; border: 1px solid #ffffff26; border-radius: 16px; padding: 34px 28px; transition: all 0.4s ease; }
.serve-card:hover { background-color: #ffffff1a; transform: translateY(-6px); }
.serve-icon { width: 56px; height: 56px; border-radius: 14px; background-color: var(--light-blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 20px; }
.serve-card h4 { font-size: 19px; font-weight: 600; color: var(--white); margin-bottom: 12px; }
.serve-card p { font-size: 15px; line-height: 24px; color: var(--off-blue); }

@media screen and (max-width: 1024px) {
    .serve-grid { gap: 20px; }
    .serve-card { padding: 28px 22px; }
}
@media screen and (max-width: 991.98px) {
    .serve-grid { grid-template-columns: repeat(2, 1fr); margin-top: 30px; }
}
@media screen and (max-width: 575px) {
    .serve-grid { grid-template-columns: 1fr; gap: 16px; }
    .serve-card { padding: 24px 20px; }
    .serve-icon { width: 48px; height: 48px; font-size: 20px; }
}

/* ============ 10. PROCESS ============ */
.process-wrapper { background-color: var(--white); position: relative; overflow: hidden; }
.process-wrapper:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/truck4.jpg"); background-size: cover; background-position: center 70%; opacity: 0.08; z-index: 0; }
.process-wrapper .container { position: relative; z-index: 2; }
.process-steps { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position: relative; }
.process-steps:before { content: ''; position: absolute; top: 34px; left: 16.5%; right: 16.5%; height: 2px; background-image: linear-gradient(90deg, var(--secondary-blue) 0%, var(--light-blue) 50%, var(--secondary-blue) 100%); background-size: 16px 2px; opacity: 0.35; z-index: 0; }
.process-step { position: relative; text-align: center; padding: 40px 30px; border-radius: 16px; background-color: var(--off-blue); transition: all 0.4s ease; }
.process-step:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(29, 14, 44, 0.2); }
.step-num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue)); color: var(--white); font-size: 20px; font-weight: 700; margin-bottom: 18px; box-shadow: 0 10px 22px -8px rgba(78, 105, 195, 0.55); }
.process-step h4 { font-size: 19px; font-weight: 600; color: var(--primary-blue); margin-bottom: 12px; }
.process-step p { font-size: 15px; line-height: 24px; color: var(--gray); }
.needs-list { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.needs-list span { font-size: 14px; font-weight: 500; color: var(--secondary-blue); border: 1px solid var(--secondary-blue); padding: 8px 18px; border-radius: 100px; transition: all 0.3s ease; }
.needs-list span:hover { background-color: var(--secondary-blue); color: var(--white); transform: translateY(-2px); }

@media screen and (max-width: 1024px) {
    .process-steps { gap: 20px; }
    .process-step { padding: 30px 24px; }
}
@media screen and (max-width: 991.98px) {
    .process-steps { grid-template-columns: 1fr; margin-top: 30px; }
    .process-steps:before { display: none; }
}
@media screen and (max-width: 575px) {
    .process-step { padding: 26px 20px; }
    .step-num { width: 48px; height: 48px; font-size: 17px; }
    .needs-list { margin-top: 26px; gap: 8px; }
    .needs-list span { font-size: 13px; padding: 7px 14px; }
}
@media screen and (max-width: 360px) {
    .needs-list span { font-size: 12px; padding: 6px 12px; }
}

/* ============ 11. WHY CHOOSE US ============ */
.why-us-wrapper { background-color: var(--off-blue); }
.why-us-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.why-us-card { position: relative; background-color: var(--white); border-radius: 16px; padding: 34px 24px 30px; text-align: center; overflow: hidden; transition: all 0.4s ease; }
.why-us-card:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--secondary-blue), var(--light-blue)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.why-us-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(29, 14, 44, 0.25); }
.why-us-card:hover:before { transform: scaleX(1); }
.why-us-star { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue)); color: var(--white); font-size: 22px; margin-bottom: 20px; transition: all 0.4s ease; }
.why-us-card:hover .why-us-star { transform: scale(1.08) rotate(-6deg); }
.why-us-card h4 { font-size: 17px; font-weight: 600; color: var(--primary-blue); margin-bottom: 10px; }
.why-us-card p { font-size: 14px; line-height: 22px; color: var(--gray); }

@media screen and (max-width: 1280px) {
    .why-us-grid { grid-template-columns: repeat(4, 1fr); }
}
/* 5 cards in a 4-column grid leave the 5th card alone on its own row;
   center it under the middle of the grid instead of pinning it left. */
@media screen and (max-width: 1280px) and (min-width: 1025px) {
    .why-us-card:last-child { grid-column: 2 / 4; max-width: 340px; margin: 0 auto; }
}
@media screen and (max-width: 1024px) {
    .why-us-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media screen and (max-width: 768px) {
    .why-us-grid { grid-template-columns: repeat(2, 1fr); margin-top: 30px; }
}
/* Same orphan-card issue in the 2-column layout: the 5th card sits
   alone in the last row. Span it across both columns and cap its
   width so it reads as a centered, intentional closer instead of a
   stray left-aligned card. */
@media screen and (max-width: 768px) and (min-width: 481px) {
    .why-us-card:last-child { grid-column: 1 / -1; max-width: 320px; margin: 0 auto; }
}
@media screen and (max-width: 575px) {
    .why-us-card { padding: 26px 20px; }
}
@media screen and (max-width: 480px) {
    .why-us-grid { grid-template-columns: 1fr; }
    .why-us-card:last-child { max-width: 100%; }
}

/* ============ 12. COVERAGE TABLE ============ */
.coverage-table-wrapper { background-color: var(--dark-blue); position: relative; overflow: hidden; }
.coverage-table-wrapper:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/truck2.jpg"); background-size: cover; background-position: center; opacity: 0.2; z-index: 0; }
.coverage-table-wrapper:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(180deg, var(--dark-blue) 10%, #1d0e2cd9 55%, var(--dark-blue) 100%); z-index: 1; }
.coverage-table-wrapper .container { position: relative; z-index: 2; }
.coverage-table-wrapper .section-head h2 { color: var(--white); }
.coverage-table { width: 100%; margin-top: 50px; border-collapse: collapse; background-color: #ffffff0d; border-radius: 16px; overflow: hidden; }
.coverage-table th { text-align: left; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--light-blue); padding: 18px 30px; border-bottom: 1px solid #ffffff26; background-color: #ffffff08; }
.coverage-table td { font-size: 16px; color: var(--off-blue); padding: 18px 30px; border-bottom: 1px solid #ffffff1a; transition: background-color 0.3s ease; }
.coverage-table tr:nth-child(even) td { background-color: #ffffff05; }
.coverage-table tbody tr:hover td { background-color: #ffffff14; }
.coverage-table tr:last-child td { border-bottom: none; }
.coverage-table td:first-child { font-weight: 600; color: var(--white); white-space: nowrap; }
.coverage-cta { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background-color: #ffffff0d; border: 1px solid #ffffff1f; border-radius: 16px; padding: 30px 40px; transition: all 0.4s ease; }
.coverage-cta:hover { background-color: #ffffff16; transform: translateY(-4px); }
.coverage-cta h4 { font-size: 19px; font-weight: 600; color: var(--white); margin-bottom: 8px; }
.coverage-cta p { font-size: 14px; color: var(--off-blue); }

@media screen and (max-width: 991.98px) {
    .coverage-table { margin-top: 35px; }
    .coverage-cta { padding: 24px; }
}
@media screen and (max-width: 768px) {
    .coverage-table th, .coverage-table td { padding: 14px 18px; font-size: 14px; }
    .coverage-cta { flex-direction: column; align-items: center; }
    .coverage-cta div { text-align: center; }
}
@media screen and (max-width: 575px) {
    .coverage-table th, .coverage-table td { padding: 12px 14px; font-size: 13px; }
    .coverage-cta h4 { font-size: 17px; }
}
@media screen and (max-width: 360px) {
    .coverage-table th, .coverage-table td { padding: 10px; font-size: 12px; }
    .coverage-table td:first-child { white-space: normal; }
}

/* ============ 13. CONTACT US ============ */
.contact-us-wrapper { position: relative; }
.contact-us-content-area { position: relative; }
.contact-us-content-area:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/truck1.jpg"); background-position: 100% 100%; background-size: cover; background-repeat: no-repeat; opacity: 0.1; z-index: -1; }
.contact-us-content { display: flex; flex-direction: column; justify-content: center; gap: 10px; max-width: 775px; margin-left: auto; padding: 80px 40px; height: 100%; z-index: 2; }
.contact-us-wrapper .section-head h2:before { left: 0; }
.contact-us-wrapper .head-description { display: flex; flex-direction: column; max-width: fit-content; }
.contact-us-wrapper .head-description a { color: var(--secondary-blue); max-width: fit-content; }
.contact-us-wrapper .head-description a:hover { color: var(--primary-blue); text-decoration: underline; }

.detail-wrapper { padding-top: 24px; }
.contact-detail { display: flex; flex-direction: column; gap: 18px; }
.contact-detail li { display: flex; align-items: center; gap: 18px; background-color: var(--white); border: 1px solid #E7EAF5; border-radius: 14px; padding: 18px 22px; color: var(--gray); font-size: 16px; line-height: 24px; font-weight: 400; box-shadow: 0 6px 20px rgba(45, 44, 94, 0.06); transition: all 0.3s ease; }
.contact-detail li:hover { border-color: var(--secondary-blue); box-shadow: 0 10px 26px rgba(45, 44, 94, 0.12); transform: translateY(-3px); }
.contact-icon { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--off-blue); color: var(--primary-blue); font-size: 18px; transition: all 0.3s ease; }
.contact-detail li:hover .contact-icon { background-color: var(--primary-blue); color: var(--white); }
.contact-text { display: flex; flex-direction: column; gap: 3px; }
.contact-label { font-size: 16px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--primary-blue); }
.contact-detail li a { font-weight: 500; color: var(--gray); }
.contact-detail li a:hover { color: var(--secondary-blue); }

.location-wrapper { width: 100%; height: 100%; min-height: 400px; }
.location-wrapper iframe { width: 100%; height: 100%; border: 0; }

@media screen and (max-width: 1024px) {
    .contact-us-content { padding: 60px 30px; }
}
@media screen and (max-width: 991.98px) {
    .contact-us-content { max-width: 100%; padding: 40px 20px; }
    .location-wrapper { min-height: 350px; }
}
@media screen and (max-width: 575px) {
    .contact-detail li { padding: 14px 16px; gap: 14px; }
    .contact-icon { width: 44px; height: 44px; font-size: 16px; }
    .location-wrapper { min-height: 320px; }
}
@media screen and (max-width: 360px) {
    .contact-us-content { padding: 30px 16px; }
    .contact-detail li { flex-wrap: wrap; }
}

/* ============ 14. FAQS / ACCORDION ============ */
.faqs-wrapper { position: relative; }
.faqs-content { position: relative; z-index: 4; }
.faqs-content .row { align-items: center; justify-content: center; }
.faqs-content .section-head { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.faqs-wrapper .section-head h2:before { left: 50%; transform: translateX(-50%); }

.accordion-wrapper { width: 100%; max-width: 1024px; padding-right: 40px; margin: 50px auto 0; }
.accordion-wrapper .accordion-item { background-color: var(--primary-blue); border: 2px solid var(--primary-blue); color: var(--white); cursor: pointer; border-radius: 12px; overflow: hidden; transition: all 0.4s ease; }
.accordion-item:not(:last-child) { margin-bottom: 15px; }
.accordion-item:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(29, 14, 44, 0.4); }
.accordion-item.selected { border-color: var(--primary-blue); filter: drop-shadow(0px 0px 3px var(--primary-blue)); transition: all 0.5s ease; }
.accordion-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 30px; transition: all 0.5s ease; }
.accordion-head.toggle { background-color: var(--primary-blue); transition: all 0.5s ease; }
.accordion-head h4 { font-size: 20px; font-weight: 500; line-height: 28px; }
.accordion-head-icon { width: 100%; max-width: 18px; height: 18px; position: relative; flex-shrink: 0; transition: transform 0.4s ease; }
.accordion-head-icon:before, .accordion-head-icon:after { content: ''; position: absolute; top: 50%; right: 0; width: 100%; height: 2px; background-color: var(--white); transform: translateY(-50%); transition: all 0.4s ease; border-radius: 2px; }
.accordion-head-icon:after { transform: translateY(-50%) rotateZ(90deg); transition: all 0.4s ease; }
.accordion-head.toggle .accordion-head-icon { transform: rotate(180deg); }
.accordion-head.toggle .accordion-head-icon::after { transform: rotate(0deg); height: 0; transition: all 0.4s ease; }
.accordion-content { background-color: var(--off-blue); color: var(--gray); font-size: 16px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; display: none; cursor: initial; }
.accordion-content.collapsed .accordion-head { border-bottom-right-radius: initial; border-bottom-left-radius: initial; }
.accordion-content p { padding: 30px; font-size: 18px; font-weight: normal; line-height: 24px; color: var(--gray); margin: 0; }

@media screen and (max-width: 1024px) {
    .faqs-wrapper .section-head { text-align: center; }
    .accordion-wrapper { padding-right: 0; }
}
@media screen and (max-width: 991.98px) {
    .accordion-wrapper { margin-top: 30px; }
}
@media screen and (max-width: 575px) {
    .accordion-head { padding: 12px 20px; }
    .accordion-head h4 { font-size: 16px; line-height: 22px; }
    .accordion-head-icon { max-width: 16px; height: 16px; }
    .accordion-content p { padding: 20px; font-size: 15px; line-height: 22px; }
}
@media screen and (max-width: 360px) {
    .accordion-head { padding: 10px 16px; gap: 12px; }
    .accordion-head h4 { font-size: 14px; line-height: 20px; }
    .accordion-content p { padding: 16px; font-size: 14px; }
}

/* ============ 15. FOOTER ============ */
.footer-wrapper { position: relative; padding-top: 80px; }
.footer-wrapper:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/truck22.jpeg"); background-size: cover; background-position: 100% top; background-repeat: no-repeat; }
.footer-wrapper:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(#2d2c5e82 6%, #2d2c5eed 50%, var(--primary-blue) 85%); z-index: 0; }
.footer-wrapper .container { position: relative; z-index: 4; }

.footer-hero-section { padding-bottom: 80px; position: relative; }
.footer-hero-section:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; height: 700px; max-width: 90vw; background: radial-gradient(circle, #4e69c333 0%, transparent 70%); z-index: 0; pointer-events: none; }
.footer-hero-section, .footer-main { border-bottom: 1px solid var(--white); position: relative; z-index: 3; }
.footer-hero { width: 100%; max-width: 1000px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; position: relative; z-index: 9; }
.footer-head span { font-size: 24px; font-weight: 500; line-height: 32px; color: var(--white); }
.footer-head h2 { font-size: 62px; line-height: 72px; color: var(--white); font-weight: 600; padding: 16px 0; }
.footer-head p { color: var(--white); font-size: 18px; font-weight: 400; padding-bottom: 32px; }
.footer-wrapper .btn-area { margin-top: 6px; }

.footer-main { padding: 60px 0; }
.footer-logo { width: 100%; max-width: 300px; margin-top: -10px; }
.footer-logo img { width: 100%; height: auto; }
.footer-description { color: var(--white); font-size: 16px; font-weight: normal; line-height: 26px; padding-top: 24px; padding-right: 70px; max-width: 600px; }
.footer-main h5 { font-size: 18px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
.footer-items { display: flex; flex-direction: column; gap: 5px; }
.footer-item { padding: 6px 12px 6px 0; }
.footer-item .footer-link { position: relative; display: flex; color: var(--white); font-size: 16px; font-family: var(--prime-font); text-decoration: initial; font-weight: 400; max-width: fit-content; }
.footer-item .footer-link:after { content: ""; position: absolute; bottom: -6px; left: 0; right: 0; margin: 0 auto; width: 100%; height: 2px; background-color: var(--light-blue); transform-origin: right; transform: scaleX(0); transition: transform 0.3s ease-in-out; }
.footer-item .footer-link.active { position: relative; color: var(--off-blue); font-weight: 500; }
.footer-item .footer-link.active:after { color: var(--light-blue); transform: scaleX(1); transform-origin: left; }
.footer-item:hover .footer-link { color: var(--off-blue); }
.footer-item:hover .footer-link:after { transform: scaleX(1); transform-origin: left; }
.footer-item p { display: flex; gap: 6px; justify-content: flex-start; flex-direction: column; color: var(--white); font-size: 16px; line-height: 26px; }
.footer-icon { position: relative; padding-left: 26px; }
.footer-icon:before { content: '\f0e0'; font-family: 'Font Awesome 5 Free'; position: absolute; left: 0; top: 0px; font-size: 16px; font-weight: 700; }
.footer-icon.tel:before { content: '\f095'; }
.footer-icon.address:before { content: '\f3c5'; }
.footer-icon:hover i { color: var(--white); }

.footer-disclaimer { margin-top: 26px; padding: 20px 24px; background: rgba(255, 255, 255, 0.03); border-left: 2px solid var(--light-blue); font-size: 12px; color: var(--white); line-height: 1.7; }

.copyright-wrapper { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; }
.copyright-wrapper p { color: var(--white); font-size: 16px; font-weight: normal; line-height: 26px; padding: 0; }

@media screen and (max-width: 1366px) {
    .footer-head h2 { font-size: 54px; line-height: 62px; }
}
@media screen and (max-width: 1280px) {
    .footer-head h2 { font-size: 48px; line-height: 56px; }
}
@media screen and (max-width: 1024px) {
    .footer-head h2 { font-size: 40px; line-height: 48px; }
    .footer-main { padding: 40px 0; }
    .footer-main .row { row-gap: 20px; }
    .footer-items { gap: 0; }
}
@media screen and (max-width: 991.98px) {
    .footer-wrapper { padding-top: 50px; }
    .footer-hero-section { padding-bottom: 50px; }
    .footer-description { padding-right: 0; }
}
@media screen and (max-width: 768px) {
    .footer-wrapper:after { background-image: initial; background-color: var(--primary-blue); }
    .footer-wrapper { padding-top: 40px; }
    .footer-hero-section { padding: 0 20px 40px 20px; }
    .footer-head h2 { font-size: 32px; line-height: 40px; }
    .footer-head span { font-size: 18px; line-height: 24px; }
    .footer-branding, .gap-wrapper { padding-right: 20px; }
}
@media screen and (max-width: 575px) {
    .footer-head h2 { font-size: 28px; line-height: 36px; }
    .footer-description { padding: 16px 0 10px 0; }
    .copyright-wrapper { gap: 15px; flex-direction: column; text-align: center; }
    .footer-logo { max-width: 210px; }
}
@media screen and (max-width: 480px) {
    .footer-head p { font-size: 16px; }
    .footer-head h2 { font-size: 24px; line-height: 32px; }
    .footer-main h5 { font-size: 16px; }
    .footer-item .footer-link, .footer-item p { font-size: 14px; }
}