body,
h1,
h2,
h3,
h4,
h5,
h6,
.breadcrumb-wrapper__title,
.single-product__info--tags
.carousel-item a,
.single-product a {
    font-family: 'Helios Extended';
}

:root {
    --bg-main: #0e1116;
    --bg-nav: rgba(14, 17, 22, 0.85);
    --section-heading: #e2e2e2;
    --text-color: #fff;
    --secondary-color: #1880c9;
}

@font-face {
    font-family: 'Helios Extended';
    src: url('../fonts/heliosext.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: var(--bg-main) !important;
}

.bg-home {
    background-color: var(--bg-main) !important;
}

.is-sticky {
    background-color: rgba(14, 17, 22, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    color: var(--section-heading) !important;

}

.bg-white {
    background-color: rgba(14, 17, 22, 0.85) !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    font-family: 'Helios Extended' sans-serif !important;
    font-size: 16px !important;
    /* backdrop-filter: blur(8px) !important; */
    /* color: var(--section-heading) !important; */
}

.section-title-2__title,
.product-popular-content__title,
.footer-title,
.footer-title-2,
.menu-items-list--dark>li>a,
.is-sticky .menu-items-list>li>a,
.about-title__title,
.section-title-3__title,
.contact-wrapper__title,
.breadcrumb-wrapper__title,
.our-team-item__name,
.header__main-dark .toggle-icon,
.header__main-dark .toggle-icon span,
.contact-us__title,
.contact-info-item__service--title,
.contact-info-item__direction {
    color: var(--section-heading) !important;
}

body,
.category-item__title,
.product-popular-content__description p,
.product-popular-content__btn,
.client-item__description,
.client-item__name,
.footer-link__list li a,
.footer-link__list li span,
.footer-newsletter__input button,
.footer-newsletter__social li a,
.footer-copyright P,
.header__top--items li a span,
.about-title p,
.is-sticky .header__main-2-category .category-btn,
.is-sticky .header__main--meta .toggle-icon,
.is-sticky .header__main--meta .toggle-icon span,
.testimonial-item__description,
.contact-social__social li a,
.footer-about p,
.footer-newsletter__form p,
.contact-info-item__title,
.contact-info-item p {
    color: var(--text-color) !important;
}

.is-sticky .menu-items-list>li:hover>a,
.is-sticky .menu-items-list>li>a.active,
.menu-items-list--dark>li:hover>a,
.menu-items-list--dark>li>a.active {
    color: var(--secondary-color) !important;
}

/* INPUT FIELDS */
.contact-form-style-1__input input {
    background-color: var(--bg-nav) !important;
    color: var(--section-heading) !important;
}


/* Slider Video Changes */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Send video to back */
}

.slider-item {
    position: relative;
    z-index: 1;
}

.home-2-slider-content-style-1 {
    position: relative;
    z-index: 2;
    /* Make sure text comes above */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Adjust opacity */
    z-index: 1;
}

/* Logo Changes */
.header__main--logo a img {
    width: auto !important;
    height: 17vh !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.about-section {
    position: relative;
    z-index: 0;
}

.about-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Adjust opacity here */
    z-index: 1;
}

.about-section>.container-fluid,
.about-section__year {
    position: relative;
    z-index: 2;
}

.about-section:before {
    visibility: hidden;
}


.why-choose-section {
    position: relative;
    padding: 80px 0;
    background: url(./assets/images/background-why-choose.jpg) center/cover no-repeat;
}

.why-choose-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.why-choose-section .section-title-2__title {
    color: #fff;
    font-size: 2.75rem;
    margin-bottom: 40px;
}

.features-grid {
    margin-top: 20px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: transform .3s, box-shadow .3s;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.icon-wrap {
    background: radial-gradient(circle at top left, #1e90ff, #005bb5);
}

.feature-card h4 {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
}

.feature-card h4::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 40px;
    height: 3px;
    background: #1e90ff;
    transform: translateX(-50%);
    border-radius: 2px;
}

.feature-card .icon-wrap {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    background-color: #1e90ff;
    /* or your brand accent */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-card .icon-wrap img {
    width: 32px;
    height: 32px;
    filter: invert(1);
}

.feature-card h4 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.feature-card p {
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.5;
}

.call-to-action-section {
    background-color: #000;
}

/*───────── LAYOUT SHELL ─────────*/
.cta-wrapper {
    display: flex;
    /* two columns: pictures | text      */
    background: #000;
    /* banner bg colour                  */
    padding: 40px 0;
    /* top / bottom breathing room       */
}

/* text column – style however you like */
.cta-text {
    flex: 1 1 40%;
    padding: 0 4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-text h3 {
    font-size: 2vw;
    margin: 0 0 .4em
}

.cta-text p {
    font-size: 1.4vw;
    margin: 0 0 2em
}

.cta-btn {
    background: #365643;
    color: #fff;
    padding: 1em 3em;
    font-size: 1.3vw;
    border-radius: 4px;
    text-decoration: none;
}

/*───────── IMAGE STRIP (hard‑coded) ─────────*/
.cta-img-strip {
    position: relative;
    width: 920px;
    /* 4×220 minus 3× overlap(−40) → 920 */
    height: 170px;
    flex: 0 0 920px;
    /* never grow / shrink               */
    overflow: visible;
}

.cta-img {
    position: absolute;
    top: 0;
    width: 220px;
    height: 250px;
    object-fit: cover;
    /* change to 'contain' to show whole */
    /* border: 4px solid #fff; */
    /* border-radius: 10px; */
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
    transition:
        transform .35s cubic-bezier(.25, .8, .25, 1),
        box-shadow .35s;
}

.cta-img:hover {
    transform: translateY(-8px);
    z-index: 5;
}

/* === EXACT pixel positions – adjust to taste ================ */
.img-1 {
    left: 0px;
}

/* card 1 */
.img-2 {
    left: 240px;
}

/* card 2 (no overlap here)          */
.img-3 {
    left: 480px;
}

/* card 3 overlaps previous by  -40  */
.img-4 {
    left: 720px;
}

/* card 4 overlaps previous by  -40  */
/*   maths:  cardWidth(220) − overlap(40) → 180   220+180=400, 400+80=480 … */
/* ── stagger pattern ─────────────────────────────────── */
.cta-img:nth-child(odd) {
    transform: translateY(-150px);
    /* pop upward */
    z-index: 3;
    /* sit above evens */
}

.cta-img:nth-child(even) {
    transform: translateY(-150px);
    /* sink downward */
    z-index: 2;
}

.about-item__top--image {
    width: 100%;
    height: 510px;
    /* or any consistent height you prefer */
    overflow: hidden;
    border-radius: 12px;
}

.about-item__top--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-video {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    color: #fff;
    height: 100vh;
}

.about-video .overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.about-video__content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.about-video__title {
    font-size: 3rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.about-video__description {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #ddd;
}

.about-video__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    transition: background 0.3s, transform 0.3s;
}

.about-video__play:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .about-video__title {
        font-size: 2rem;
    }

    .about-video__description {
        font-size: 1rem;
    }

    .about-video__play {
        width: 56px;
        height: 56px;
    }
}
.instagram-section {
    padding: 40px 0;
    /* optional background if you want it */
    background-color: #0a0a0a;
  }
  
  .instagram-grid {
    display: grid;
    /* three fixed 400px columns with 16px gaps */
    grid-template-columns: repeat(3, 400px);
    gap: 16px;
    /* center the grid and clip nothing */
    max-width: calc(3 * 400px + 2 * 16px);
    margin: 0 auto;
    overflow: visible;
  }
  
  .instagram-item {
    position: relative;
    width: 100%;
    /* force 1:1 square */
    aspect-ratio: 1/1;
    overflow: hidden;
  }
  
  .instagram-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .instagram-item i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  
  .instagram-item:hover i {
    opacity: 1;
  }
  .instagram-item:first-child {
    margin-top: 22px;
  }
  
  /* OPTIONAL: stack on smaller screens */
  @media (max-width: 1248px) {
    .instagram-grid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      max-width: 100%;
    }
  }
  

/* ensure the link wraps the entire card */
.our-team-item>a.glightbox {
    display: block;
    text-decoration: none;
    color: inherit;
}

.menu-items-list .mega-menu {
    background-color: var(--bg-main) !important;
}

.menu-items-list .mega-menu__content--title {
    color: var(--section-heading) !important;
}

.menu-items-list .mega-menu li a {
    color: var(--text-color) !important;
}

.mega-menu--wrapper {
    position: relative;
    /* establish a positioning context */
    overflow: hidden;
    /* clip the pseudo if needed */
}

.mega-menu--wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* adjust the opacity to taste */
    z-index: 1;
}

/* Push your content above the overlay */
.mega-menu__content,
.mega-menu__banner--caption {
    position: relative;
    z-index: 2;
    color: #fff;
    /* ensure your text contrasts */
}

/* Optional: fade in the overlay on hover of the parent */
.mega-menu--wrapper:hover::before {
    background: rgba(0, 0, 0, 0.6);
}

.single-product__thumbnail {
    background-color: var(--bg-main)
}

.single-product__info--tags a {
    font-family: 'Helios Extended', sans-serif;
    font-size: 2rem;
    color: var(--section-heading);
}

.single-product__info--title a {
    font-family: 'Helios Extended', sans-serif;
    font-size: 1rem;
    color: var(--text-color);
}

.single-product__thumbnail--holder img:hover {
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
}

.product-popular-content__title,
.section-title-2__title {
    font-family: 'Helios Extended', sans-serif;
}

.offcanvas-sidebar__close,
.offcanvas-menu-list li a,
.offcanvas-info-list li a,
.offcanvas-info-list li span,
.offcanvas-social li a,
.offcanvas-sidebar__copyright p,
.offcanvas-sidebar__copyright span,
.offcanvas-sidebar__copyright a,
.mobile-menu-items li>a,
.mobile-menu-items .mega-menu__content--title,
.mobile-menu-items .sub-menu__content--title,
.mobile-menu-items .mega-menu__content--list li a,
.mobile-menu-items .sub-menu__content--list li a,
.mobile-menu-items .mega-menu li>a,
.mobile-menu-items .sub-menu li>a {
    color: var(--text-color);
}

.offcanvas,
.mobile-menu-items .mega-menu,
.mobile-menu-items .sub-menu {
    background-color: var(--bg-main);
}

.home-2-slider-content-style-1__title,
.about-content__title {
    font-family: 'Helios Extended';
}

.product-popular-content__description p {
    font-family: sans-serif;
}

.slide-1-title {
    font-size: 70px;
}

.slide-1-title-1 {
    font-size: 1.4em;
    text-transform: uppercase;
}

.slide-1-description {
    font-size: 28px;
}


.slide-2-title {
    font-size: 70px;
}

.slide-2-title-1 {
    font-size: 1.1em;
    text-transform: uppercase;
}

.slide-2-description {
    font-size: 28px;
}


.slide-3-title {
    font-size: 70px;
}

.slide-3-title-1 {
    font-size: 1.6em;
    text-transform: uppercase;
}

.slide-3-description {
    font-size: 28px;
}


.menu-items-list > li > a span::before {
    top: 100% !important;
}

.popular-outdoor-driver {
    left: 0;
}

.toggle-icon {
    visibility: hidden;
}
.menu-items-list .sub-menu {
    padding: 10px;
}

.carousel-thumbnails {
    gap: 8px;
    flex-wrap: wrap;
  }
  .carousel-thumbnails .thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
    transition: opacity 0.2s, border-color 0.2s;
  }
  .carousel-thumbnails .thumb:hover,
  .carousel-thumbnails .thumb.active {
    opacity: 1;
    border-color: var(--secondary-color);
  }

  .table td {
    color: white;
  }

/* Responsive tweaks */
@media (max-width: 767px) {
    .slide-1-title, .slide-2-title, .slide-3-title {
        font-size: 6vh;
    }
    .slide-1-title-1  {
        font-size: 1.4em;
    }
    .slide-2-title-2 {
        font-size: 1.0em;
    }
    .slide-3-title-1 {
        font-size: 1.6em;
    }
    .popular-outdoor-driver, .popular-indoor-driver, .popular-smart-driver {
        left: 235px !important;
        top: -17px !important;
    }
    .why-choose-section {
        padding: 60px 0;
    }

    .feature-card {
        padding: 25px 15px;
    }

    .feature-card .icon-wrap {
        width: 60px;
        height: 60px;
        margin-bottom: 16px;
    }

    .feature-card .icon-wrap img {
        width: 28px;
        height: 28px;
    }
}