/* ========================================
   Lampron Static Site - Main Stylesheet
   ======================================== */

/* CSS Variables */
:root {
    --bg-main: #061D5B;
    --bg-secondary: #3155E7;
    --black: #32323b;
    --gray: #717077;
    --lime: #f6f6ff;
    --yellow: #f3a13c;
    --bg-gray: #dedddd;
    --bg-green: #14af5c;
    --light-gray: #313131;
    --light-heading: #404040;
}

/* Font Faces */
@font-face {
    font-family: "Stem";
    src: url("../fonts/Stem-Bold.otf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Stem";
    src: url("../fonts/Stem-Medium.otf") format("truetype");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Stem";
    src: url("../fonts/Stem-Regular.otf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Stem";
    src: url("../fonts/Stem-Light.otf") format("truetype");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Stem";
    src: url("../fonts/stem-extra-light.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
}

/* Global Styles */
* {
    font-family: "Stem", sans-serif !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* FontAwesome icons need their own font-family. The global `* !important`
   above otherwise wipes FA's declaration and renders every <i> as an empty
   glyph in Stem. Restore the FA fonts + weights here so icons show up. */
.fa,
.fas,
.fa-solid,
.far,
.fa-regular,
.fal,
.fa-light,
.fat,
.fa-thin,
.fad,
.fa-duotone {
    font-family: "Font Awesome 6 Free" !important;
}
.fab,
.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
}
.fas,
.fa-solid {
    font-weight: 900 !important;
}
.far,
.fa-regular {
    font-weight: 400 !important;
}
.fab,
.fa-brands {
    font-weight: 400 !important;
}

html {
    overflow-x: hidden;
}

body {
    color: var(--black);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

p {
    text-align: justify;
}

a {
    text-decoration: none;
    color: rgb(35 38 59 / var(--tw-text-opacity, 1));
    font-size: 18px;
    font-weight: 400;
}

img {
    max-width: 100%;
    height: auto;
}

/* Container — mobile-first, no max-width until tablet */
.container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 768px) {
    .container {
        padding-left: 4%;
        padding-right: 4%;
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1440px;
    }
}
@media (min-width: 1660px) {
    .container {
        max-width: 1660px;
    }
}

/* Utility Classes */
.bg-main {
    background-color: var(--bg-main);
}
.bg-secondary {
    background-color: var(--bg-secondary);
}
.bg-lime {
    background-color: var(--lime);
}
.text-blue {
    color: var(--bg-main);
}
.yellow {
    color: var(--yellow);
}
.text-black {
    color: var(--black);
}
.sub-heading {
    color: var(--light-heading);
}
.box-shadow {
    box-shadow: 0px 4px 18px 0px #00000040;
}
.dropdown-shadow {
    box-shadow: 0px 4px 56px 0px #00000012;
}

/* Header/Topbar */
.topbar-container {
    padding: 0;
}

@media (min-width: 768px) {
    .topbar-container {
        padding-left: 4%;
        padding-right: 4%;
    }
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    background-color: var(--bg-main);
    transition: background-color 0.5s;
}

header .topbar-inner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    height: 96px;
    min-width: 0;
    padding: 0 20px;
}

header nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

header nav .nav-item {
    font-size: 18px;
    font-weight: 500;
    list-style: none;
    color: #fff;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

header nav .nav-item::before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #0066cc;
    transition: none;
}

header nav .nav-item:hover::before {
    width: 100%;
    transition: width 0.5s ease;
}

/* Profile dropdown lives in .header-right, not inside `header nav`, so it
   doesn't inherit `header nav .nav-item { position: relative }`. Pinning
   it here ensures the absolutely-positioned panel + bridge anchor to the
   trigger instead of the <header>. */
.nav-item-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    background-color: #f6f6f6;
    top: calc(100% + 12px);
    left: 0;
    width: 220px;
    border-radius: 12px;
    padding: 12px 0;
    z-index: 1000;
    box-shadow: 0 12px 32px rgba(6, 29, 91, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
    pointer-events: none;
}

/* Invisible bridge that extends the parent's hover hit-area down over
   the 12px gap between the trigger and the dropdown panel. Lives on the
   parent itself (not the panel) so it stays live even while the panel
   flips back to pointer-events:none during a transient hover-out. */
.nav-item-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-item-dropdown .nav-dropdown-icon {
    transition: transform 0.2s ease;
}

.nav-item-dropdown:hover .nav-dropdown-icon,
.nav-item-dropdown:focus-within .nav-dropdown-icon {
    transform: rotate(180deg);
}

.dropdown-menu a {
    display: block;
    padding: 8px 24px;
    color: var(--bg-main);
    font-size: 18px;
}

.dropdown-menu a:hover {
    background-color: #d1d5db;
}

/* Primary Button */
.btn-primary {
    background-color: var(--bg-secondary);
    color: #fff;
    padding: 12px 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: var(--bg-secondary,#2944C6);
}

/* Hero/Banner Section */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: 0.45;
}

.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
    padding: 100px 24px;
    max-width: 75rem;
    margin: 0 auto;
}

.hero-content h1 {
    font-size: 100px;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 101px;
}

.hero-content p {
    font-size: 35px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    padding-bottom: 48px;
}

/* Online Support Section */
.online-support {
    padding: 25px;
    display: flex;
    align-items: flex-end;
    min-height: 511px;
    background-color: var(--brand-navy2,#1E3A8A);
    background-size: cover;
    /* background-position: center; */
    background-repeat: no-repeat;
}

.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(16px, 4vw, 74px);
    align-items: center;
    min-height: 480px;
}

.info-card {
    background: #fff;
    margin-top: 48px;
    border-radius: 12px;
    box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px 24px;
    position: relative;
    min-width: 0;
    height: 226px;
    cursor: pointer;
    transition: transform 0.3s;
}

.info-card:hover {
    transform: translateY(-5px);
}

.info-card-icon {
    position: absolute;
    top: -30%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.25);
    padding: 32px;
    height: 114px;
    width: 121px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-card-icon img {
    width: 60px;
    object-fit: contain;
}

.info-card-label {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-top: 16px;
    color: var(--black);
    padding: 45px;
}

/* Service Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.service-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: block;
}

.service-card img {
    width: 100%;
    height: 286px;
    object-fit: cover;
    transition: transform 0.3s;
}

.service-card:hover img {
    transform: scale(1.05);
}

.service-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0.4), transparent);
}

.service-card .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 16px;
    width: 100%;
    transition: all 0.3s;
}

.service-card .card-content h3 {
    color: #fff;
    font-size: 1.875rem;
    font-weight: 700;
    text-transform: capitalize;
    transition: transform 0.3s;
}

.service-card:hover .card-content h3 {
    transform: translateY(-8px);
}

.service-card .hover-line {
    display: none;
    height: 4px;
    background-color: #60a5fa;
    border-radius: 4px;
    width: 0;
    margin-top: 8px;
    transition: width 0.3s;
}

.service-card:hover .hover-line {
    display: block;
    width: 38%;
}

.service-card .hover-desc {
    display: none;
    color: #fff;
    font-size: 14px;
    margin-top: 16px;
    width: 90%;
}

.service-card:hover .hover-desc {
    display: block;
}

/* Blog Section */
.blog-section--alt{
background: #fff;
}
.blog-slide {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 675px;
    background-size: cover;
    background-position: top;
    border-radius: 24px;
}

.blog-slide .blog-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
}

.blog-slide-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 24px;
}

.blog-slide-content h2 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center;
}

.blog-slide-content p {
    color: #fff;
    font-size: 16px;
    margin-bottom: 24px;
    text-align: center;
    max-width: 36rem;
    font-weight: 300;
}

/* Company Highlights */
.highlights-box {
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    border-radius: 20px;
    position: relative;
    margin-top: 7.5%;
    padding:0 1.5rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}

.highlights-inner {
    display: flex;
    padding: 7.2% 0;
}

.highlights-logos {
    display: flex;
    flex-direction: column;
    width: 28%;
    align-items: center;
    /* Vertically center the three logos within the column. The parent
       (.highlights-inner) is row-flex with default align-items:stretch,
       so this column gets the full height of the text column next to
       it; without justify-content the logos would clump at the top. */
    justify-content: center;
    gap: 24px;
}

.highlights-text {
    width: 78%;
    padding-left: 48px;
    border-left: 4px solid var(--black);
}

.highlights-text h2 {
    font-size: 38px;
    color: var(--black);
    font-weight: 700;
    line-height: 53px;
}

.highlights-text p {
    font-size: 18px;
    color: var(--black);
    font-weight: 300;
    margin-top: 16px;
    line-height: 30px;
}

/* Trusted Partners */
.trusted-section {
    margin-top: 7.5%;
}

.trusted-section h2 {
    font-size: 46px;
    font-weight: 700;
    text-align: center;
    color: var(--black);
}

.trusted-section .subtitle {
    font-size: 16px;
    color: var(--gray);
    text-align: center;
    margin-top: 16px;
}

/* Trusted partners — one-logo-at-a-time smooth auto-slider.
   JS sets the translate position; CSS handles the smooth transition. */
/* Trusted partners slider — 5 logos visible on desktop, 1 on mobile */
.trusted-logos {
    /* --slide-w set per breakpoint. --gap is the space between slides.
       Viewport shows --visible logos at once. */
    --slide-w: 220px;
    --gap: 20px;
    --visible: 5;
    overflow: hidden;
    margin: 4.5% auto;
    position: relative;
    max-width: calc(
        var(--slide-w) * var(--visible) + var(--gap) * (var(--visible) - 1)
    );
}

.trusted-logos-track {
    display: flex;
    align-items: center;
    gap: var(--gap);
    width: max-content;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.trusted-logo-card {
    background: #fdfdfd;
    border-radius: 10px;
    padding: 16px;
    height: 129px;
    width: var(--slide-w);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.trusted-logo-card img {
    max-height: 72px;
    max-width: 100%;
    object-fit: contain;
}

/* ---- Mobile: show 1 logo at a time ---- */
@media (max-width: 768px) {
    .trusted-logos {
        --slide-w: 240px;
        --gap: 16px;
        --visible: 1;
    }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .trusted-logos-track {
        transition: none;
    }
}

/* Quote/CTA Section */
.quote-section {
    background-color: #f4f4f4;
    border-radius: 20px;
    display: flex;
    align-items: center;
    position: relative;
    margin: 50px 0 -10% 0;
    padding: 4% 4%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    z-index: 9;
}

.moving-quote-section{
     background-color: #f4f4f4;
    border-radius: 20px;
    display: flex;
    align-items: center;
    position: relative;
    margin: 50px 0 -15% 0;
    padding: 4% 4%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    z-index: 9;
}

.quote-inner {
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 24px;
}

.quote-image {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-text {
    width: 85%;
    display: flex;
    align-items: center;
}

.quote-text span {
    font-size: 46px;
    color: var(--black);
    line-height: 60px;
}

/* Footer */
.footer {
    /* padding-top: 14rem; */
    padding-bottom: 24px;
    color: #fff;
    display: flex;
    align-items: flex-end;
    background-size: cover !important;
    background-position: right !important;
}

.footer-content {
    margin-top: 9%;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4%;
    margin-top: 10px;
}

.footer-desc {
    width: 60%;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    line-height: 28px;
    text-align: justify;
    padding: 0px 0px 0px 8px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 28px;
    font-size: 18px;
}

.footer-links a {
    color: #fff;
    font-weight: 500;
    cursor: pointer;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 32px;
    border-top: 1px solid #d4d2e3;
    margin: 2% 0;
}

.footer-copyright {
    font-size: 16px;
    font-weight: 200;
    color: #fff;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-social a {
    color: #fff;
    font-size: 20px;
    transition: color 0.3s;
}

.footer-social a:hover {
    color: var(--bg-secondary);
}

/* Scroll to Top Button */
.scroll-top-btn {
    position: fixed;
    bottom: 125px;
    right: 4%;
    background-color: var(--bg-secondary);
    color: #fff;
    border-radius: 50%;
    width: 51px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border: none;
    font-size: 20px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

/* Arrow Section */
.arrow-section-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow-section {
    background-color: var(--bg-main);
    width: 100%;
    height: 312px;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(
        0% 30%,
        92% 30%,
        92% 0%,
        100% 50%,
        92% 100%,
        92% 70%,
        0% 70%
    );
}

.arrow-section span {
    color: #fff;
    width: 83%;
    font-weight: 700;
    text-align: center;
    font-size: 40px;
    padding-left: 24px;
    padding-right: 12.5%;
    line-height: 40px;
}

/* Service Page Banners — mirrors source (lg:100vh, md:85vh, default 75vh) */
.service-banner {
    position: relative;
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
    .service-banner {
        min-height: 60vh !important;
    }
}
@media (min-width: 768px) {
    .service-banner {
        min-height: 85vh;
    }
}
@media (min-width: 1024px) {
    .service-banner {
        min-height: 100vh;
    }
}

.service-banner .banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

.service-banner .about-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
}

.service-banner .about-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
}

.service-banner .moving-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service-banner .delivery-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.service-banner .banner-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.5;
}
/*test*/
.new-service-banner {
    position: relative;
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
    .new-service-banner {
        min-height: 80vh !important;
    }
}
@media (min-width: 768px) {
    .new-service-banner {
        min-height: 85vh;
    }
}
@media (min-width: 1024px) {
    .new-service-banner {
        min-height: 100vh;
    }
}

.new-service-banner .banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

.new-service-banner .about-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
}

.new-service-banner .about-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
}

.new-service-banner .moving-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.new-service-banner .delivery-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.new-service-banner .banner-overlay{
   position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
}

/* Banner title + subtitle overlay */
.banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 0 24px;
    max-width: 800px;
}

.banner-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.banner-content p {
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    opacity: 0.9;
    line-height: 1.6;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Breadcrumb */
.breadcrumb-wrapper {
    width: 100%;
    padding: 12px 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray);
    flex-wrap: wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    width: 100%;
}

.breadcrumb a {
    color: rgb(35 38 59 / var(--tw-text-opacity, 1));
    white-space: nowrap;
    font-size: 26px;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    white-space: nowrap;
    color: rgb(35 38 59 / var(--tw-text-opacity, 1));
    font-size: 26px;
    font-weight: 400;
}

/* Offer Tabs */
.offer-tabs {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.offer-tab {
    background-color: #f4f4f4;
    color: #404040;
    border-radius: 10px;
    padding: 30px;
    font-weight: 400;
    font-size: 24px;
    width: 390px;
    max-width: 100%;
    height: 139px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: none;
    line-height: 31px;
    transition: all 0.3s;
}

.offer-tab.active,
.offer-tab:hover {
    background-color: var(--bg-main);
    color: #fff;
    font-size: 30px;
    font-weight: 700;
}

.offer-content {
    margin-top: 1%;
    background-color: #f4f4f4;
    border-radius: 16px;
    padding: 25px;
}

/* Contact Box */
.contact-container {
    border-radius: 10px;
    background: linear-gradient(90.23deg, #e0e0e0 0.17%, #ffffff 99.78%);
}

/* Blog Card */
.blogs-card{
    background: #f6f6ff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.blogs-card img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 0.5rem;
}
.blog-card {
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    background: #fff;
    transition: transform 0.3s;
}

.blog-card.home-blog-slide p {
    text-align: center;
}

.blog-card:hover {
    transform: translateY(-4px);
}

.blog-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

.blog-card-content {
    padding: 16px;
}

.blog-card-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 8px;
}

.blog-card-content p {
    font-size: 14px;
    color: var(--gray);
    margin-bottom: 12px;
}

/* Career Page */
.career-banner {
    height: calc(100vh - 96px);
}

/* Responsive */
@media screen and (max-width: 1440px) {
    .scroll-top-btn {
        width: 40px !important;
        height: 40px !important;
    }
    .hero-content h1 {
        font-size: 100px;
        line-height: 101px;
    }
}

@media screen and (max-width: 1024px) {
    .info-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    header nav {
        display: none;
    }
    .highlights-inner {
        flex-direction: column;
    }
    .highlights-logos {
        width: 100%;
        flex-direction: row;
        justify-content: center;
    }
    .highlights-text {
        border-left: none;
        padding-left: 0;
        margin-top: 24px;
    }
}

@media screen and (max-width: 768px) {
    /* No extra top margin — the layout's .header-spacer (64px) already clears
       the fixed header. The Moving banner sits flush this way; these used to
       add a second 64px/60px gap, leaving a blank strip above the banner. */
    .delivery-service-banner {
        margin-top: 0 !important;
    }
    .delivery-child-service-banner {
        margin-top: 0 !important;
    }
    .hero-content {
        padding: 80px 24px 0px 24px;
    }
    .hero-content h1 {
        font-size: 32px;
        line-height: 38px;
    }
    .hero-content p {
        font-size: 22px;
    }
    .hero-section {
        min-height: 458px;
    }
    .info-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .arrow-section {
        height: 160px;
    }
    .arrow-section span {
        font-size: 14px;
        width: 70%;
    }
    .breadcrumb a {
        font-size: 16px;
    }

    .breadcrumb span {
        font-size: 16px;
    }
    .footer {
        padding-top: 224px;
        background-image: url("../images/mobile_footer.svg") !important;
        background-repeat: no-repeat;
        height: auto !important;
    }
    .footer-main {
        flex-direction: column;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .footer-desc {
        width: 100%;
        margin-bottom: 0px;
        padding: 8px 0px 0px 8px;
    }
    .blog-slide {
        height: 400px;
    }
    .blog-slide-content h2 {
        font-size: 26px;
    }
    .highlights-text h2 {
        font-size: 20px;
        line-height: 30px;
    }
    .offer-tab {
        width: 100%;
        min-width: 160px;
        max-width: 200px;
        height: 71px;
        font-size: 16px;
        padding: 30px 10px;
    }
    .quote-inner {
        flex-direction: column;
    }
    .quote-image,
    .quote-text {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .quote-text span {
        font-size: 24px;
        line-height: 36px;
    }
    .service-card img {
        height: 128px;
    }
    .service-card .card-content {
        position: absolute;
        bottom: 0;
        width: 100%;
        transition: all 0.3s;
        padding: 16px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .service-card .card-content h3 {
        font-size: 18px;
    }
    .online-support {
        min-height: 480px;
    }
}

@media screen and (max-width: 480px) {
    p {
        line-height: 25px !important;
        font-size: 16px !important;
        width: 100% !important;
    }
    .info-cards-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer {
        background-position: top !important;
    }
}

/* Mobile sidebar */
.mobile-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: none;
}

.mobile-sidebar-overlay.open {
    display: flex;
    justify-content: flex-end;
}

.mobile-sidebar {
    width: 82%;
    max-width: 320px;
    height: 100%;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-main);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

/* ---- Sidebar header (user info + close) ---- */
.mobile-sidebar .sidebar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

/* ---- Sidebar menu list ---- */
.mobile-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 12px 12px 24px;
    flex: 1;
    overflow-y: auto;
}

.mobile-sidebar ul li {
    margin-bottom: 2px;
}

.mobile-sidebar ul li a,
.mobile-sidebar ul li > span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 600;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    min-height: 44px;
    line-height: 1.4;
    transition: background 0.15s ease;
}

.mobile-sidebar ul li a:hover,
.mobile-sidebar ul li > span:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.mobile-sidebar ul li a i,
.mobile-sidebar ul li > span i {
    width: 20px;
    text-align: center;
    font-size: 14px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ---- Toggle icon (▼) for dropdowns ---- */
.mobile-sidebar .sidebar-toggle-flex {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.mobile-sidebar .sidebar-toggle-flex .toggle-icon {
    font-size: 10px;
    opacity: 0.5;
    transition: transform 0.2s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.mobile-sidebar .sidebar-toggle-flex .toggle-icon.open {
    transform: rotate(180deg);
    opacity: 0.8;
}

/* ---- Sub-menus ---- */
.mobile-sidebar .sub-menu {
    padding: 4px 0 4px 20px;
    margin: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-left: 26px;
}

.mobile-sidebar .sub-menu a {
    font-size: 14px;
    font-weight: 400;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
}

.mobile-sidebar .sub-menu a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Hamburger button */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .hamburger-btn {
        display: block;
    }
    .desktop-nav {
        display: none !important;
    }

    /* Phone button — show icon-only version */
    .desktop-phone-btn {
        display: none !important;
    }
    .desktop-phone-btn-hidden {
        display: inline-flex !important;
    }

    /* Profile dropdown / Login button — the hamburger sidebar already
       lists Dashboard / My Bookings / My Profile / Logout (or Login) so
       the topbar widget is redundant on mobile and was crowding the row.
       `.header-right > .nav-item-dropdown` only matches the auth dropdown
       since the desktop services / company dropdowns live inside
       `.desktop-nav` (already hidden above). */
    .header-right > .nav-item-dropdown,
    .header-right > .btn-login {
        display: none !important;
    }

    /* Header right: tighter spacing */
    .header-right {
        gap: 4px;
    }

    /* Footer responsive */
    .footer-main {
        flex-direction: column;
        gap: 24px;
    }
    .footer-desc {
        width: 100%;
    }
    .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* Services grid — 2 cols */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-heading {
        font-size: 26px !important;
        margin-bottom: 32px !important;
    }

    /* Info cards — 3 cols on tablet */
    .info-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    /* Highlights */
    .highlights-inner {
        flex-direction: column;
    }
    .highlights-logos {
        width: 100%;
        flex-direction: row;
        justify-content: center;
    }
    .highlights-text {
        border-left: none;
        padding-left: 0;
        margin-top: 24px;
        width: 100%;
    }
}

/* ---- ≤768 px — Mobile ---- */
@media (max-width: 768px) {
    .arrow-section {
        clip-path: polygon(
            0% 25%,
            82% 25%,
            82% 0%,
            100% 50%,
            82% 100%,
            82% 73%,
            0% 73%
        );
    }
    /* Header spacer */
    .header-spacer {
        height: 64px;
    }
    header .topbar-inner {
        height: 64px;
    }
    .service-banner .moving-banner-bg {
        margin-top: 30px;
    }
    /* Logo smaller on mobile — same max-width/max-height containment as
       the desktop rule in custom.css, just sized for the 64px mobile header. */
    .logo-img {
        max-width: 110px;
        max-height: 44px;
    }

    /* Hide BOTH phone buttons on mobile — phone is in hamburger menu */
    .desktop-phone-btn-hidden,
    .desktop-phone-btn {
        display: none !important;
    }

    /* Tighter header-right */
    .header-right {
        gap: 2px;
    }

    /* Service page banners — font sizes only; height handled by main rule */
    .banner-content h1 {
        font-size: 28px;
    }
    .banner-content p {
        font-size: 15px;
    }

    /* Smaller profile image */
    .profile-img {
        width: 32px;
        height: 32px;
    }
    .profile-link {
        padding: 4px 6px;
        gap: 4px;
    }

    /* Compact lang switcher */
    .lang-btn-style {
        font-size: 12px;
        padding: 4px 8px;
    }

    /* Compact hamburger */
    .hamburger-icon {
        width: 24px;
    }
    .hamburger-btn {
        padding: 6px;
    }

    /* Hero */
    .hero-content h1 {
        font-size: 32px;
        line-height: 38px;
    }
    .hero-content p {
        font-size: 22px;
        padding-bottom: 32px;
    }
    .hero-section {
        min-height: 540px;
    }
    .hero-btn {
        width: 100% !important;
        max-width: 100%;
        font-size: 16px;
        min-height: 42px !important;
        height: auto;
        padding: 12px 16px;
        line-height: 1.35;
    }

    /* Info cards — horizontal scroll slider on mobile */
    .info-cards-grid {
        display: flex;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-padding: 16px;
        padding: 48px 16px 16px;
        margin: 0 -16px;
        min-height: 0;
        align-items: stretch;
        scrollbar-width: none;
    }
    .info-cards-grid::-webkit-scrollbar {
        display: none;
    }
    .info-card {
        flex: 0 0 60%;
        max-width: 260px;
        scroll-snap-align: start;
        height: auto;
        min-height: 220px;
        margin-top: 0;
        padding: 24px 32px;
    }
    .info-card-icon {
        top: -20%;
        padding: 24px;
        height: 121px;
        width: 121px;
    }
    .info-card-icon img {
        width: 48px;
    }
    .info-card-label {
        font-size: 24px;
        padding: 0px;
    }

    /* Services */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    /* Touch devices have no hover, so the description never appeared (and when
       a tap forced :hover it was clipped by the short card). On mobile, always
       show the accent line + full description, anchored to the bottom so the
       text wraps fully instead of being centered + cut off. */
    .service-card img {
        height: 180px;
    }
    .service-card .card-content {
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        text-align: center;
    }
    .service-card .card-content h3 {
        font-size: 18px;
        text-align: center;
    }
    .service-card:hover .card-content h3 {
        transform: none;
    }
    .service-card .hover-line {
        display: block;
        width: 40%;
        margin: 8px auto 0;
    }
    /* Mobile: show only the service title + accent line — no description.
       Also override the desktop :hover rule (higher specificity) so the
       subtitle never reappears via sticky touch-hover after tapping a card. */
    .service-card .hover-desc,
    .service-card:hover .hover-desc {
        display: none;
    }

    /* Online support — keep `cover` so the pattern looks zoomed-in (matches
       desktop look) instead of stretched flat. The default `min-height: auto`
       from the parent stylesheet collapses the section and hides the image;
       restore a taller min-height so cover has vertical room to render. */
    .online-support {
        min-height: 322px;
        align-items: center;
        padding: 16px 30px 16px 30px;
    }

    /* Arrow section */
    .arrow-section {
        height: 140px;
    }
    .arrow-section span {
        font-size: 14px;
        width: 96%;
        line-height: 21px;
        padding-left: 0px;
    }

    /* Quote */
    .quote-inner {
        flex-direction: column;
    }
    .quote-image,
    .quote-text {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .quote-text span {
        font-size: 24px;
        line-height: 32px;
    }
    .quote-section {
        padding: 20% 7%;
        margin: 50px 0 -30% 0;
    }
    .moving-quote-section {
        padding: 20% 7%;
        margin: 50px 0 -30% 0;
    }

    /* Blog slide */
    .blog-slide {
        height: 400px;
    }
    .blog-slide-content h2 {
        font-size: 26px;
    }
    .blogs-heading {
        font-size: 26px !important;
    }

    /* Footer links — vertical list with divider between each item */
    .footer-links {
        flex-direction: column !important;
        align-items: stretch;
        gap: 0;
        font-size: 15px;
        width: 100%;
    }
    .footer-links a {
        padding: 0px 0px 28px 8px;
        /* border-bottom: 1px solid rgba(255,255,255,0.15); */
        font-weight: 500;
    }
    .footer-links a:last-child {
        border-bottom: none;
        padding-bottom: 0px;
    }

    /* Highlights — stack logos vertically, centered */
    .highlights-logos {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 8px;
    }
    .highlights-quebec-img,
    .highlights-quebec2-img,
    .highlights-intact-img {
        max-width: 200px;
        width: auto;
        height: auto;
    }
    .highlights-text h2 {
        font-size: 20px;
        line-height: 30px;
    }

    /* Trusted section */
    .trusted-section h2 {
        font-size: 28px;
    }
    .trusted-logo-card {
        height: 110px;
        padding: 14px;
    }
    .trusted-logo-card img {
        max-height: 60px;
    }

    /* Offer tabs */
    .offer-tab {
        width: 100%;
        min-width: 120px;
        max-width: 160px;
        height: 60px;
        font-size: 14px;
        padding: 20px 8px;
    }
    .offer-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Footer — additional mobile rules (base rules in original 768px block above) */
    .footer-desc {
        font-size: 16px;
        line-height: 25px;
        font-weight: 400;
        text-align: justify;
    }
    .footer-copyright {
        font-size: 14px;
    }

    /* Dropdown menu on mobile — wider touch targets */
    .dropdown-menu a {
        padding: 12px 24px;
        font-size: 16px;
    }

    /* Profile image */
    .profile-img {
        width: 36px;
        height: 36px;
    }
}

/* ---- ≤480 px — Small mobile ---- */
@media (max-width: 480px) {
    /* Info cards keep slider layout — show ~1.5 cards at a time */
    .info-cards-grid {
        gap: 28px;
    }
    .info-card {
        flex: 0 0 72%;
        max-width: 220px;
    }
    /* Services keep 2×2 grid on small screens */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .service-card img {
        height: 120px;
    }
    .footer {
        background-position: top !important;
    }
     .quote-section {
        padding: 20% 7%;
        margin: 50px 0 -60% 0;
    }
     .moving-quote-section {
        padding: 20% 7%;
        margin: 50px 0 -80% 0;
    }

    /* Login text hidden */
    .login-text {
        display: none;
    }

    /* Lang switcher compact */
    .lang-btn-style {
        font-size: 14px;
    }
}