/*============================================== main header section code css========================================= */
/* ---------- reset / base ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
}

button {
  font: inherit;
  border: none;
  cursor: pointer;
  background: none;
}

a {
  text-decoration: none;
}

/* ---------- header ---------- */
.mainheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px;
  background: transparent;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  left: 0;
  right: 0;
  position: fixed;
  top: 0;
  z-index: 100;
  overflow: visible;
}

/*======================================================
        FULL WIDTH HEADER BACKGROUND
======================================================*/

.mainheader::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
  z-index: -1;
  pointer-events: none;
}

.logoLink {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.essaricon {
  width: 154px;
  height: 44px;
  display: block;
}

/* ---------- middle nav ---------- */
.headermiddle {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}

/* .navlink {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #333333;
  white-space: nowrap;
  border-radius: 8px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
} */
.navlink {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px 24px;

  border-radius: 8px;

  color: #333;

  overflow: hidden;

  position: relative;

  white-space: nowrap;

  transition: background 0.35s ease;
}

.nav-text {
  display: flex;

  flex-direction: column;

  height: 22px;

  overflow: hidden;
}

.nav-text span {
  height: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 15px;

  font-weight: 500;

  color: #333;

  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

.navlink:hover .nav-text span {
  transform: translateY(-100%);
}

.navlink:hover,
.navlink:focus-visible {
  color: #e1251b;
}

/* ---------- right side contact ---------- */
.contactusarea {
  display: flex;
  align-items: center;
  /* gap: 8px; */
  flex-shrink: 0;
}

.contactbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 12px 24px;
  border-radius: 100px;
  background: linear-gradient(270deg, #e1251b 0%, #f37021 100%);
  white-space: nowrap;
}

.contacttext {
  display: flex;

  flex-direction: column;

  height: 22px;

  overflow: hidden;
}

.contacttext span {
  height: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

.contactbutton:hover .contacttext span {
  transform: translateY(-100%);
}

.circlebg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  padding: 12px;
  background: linear-gradient(270deg, #e1251b 0%, #f37021 100%);
  flex-shrink: 0;
}

.arrowimage {
  width: 20px;
  height: 20px;
  display: block;
}

/* ---------- hamburger toggle (hidden on desktop) ---------- */
.navToggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.navToggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #333333;
  border-radius: 2px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.navToggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navToggle.is-open span:nth-child(2) {
  opacity: 0;
}

.navToggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ================================
   NEW : Overlay
================================ */

/* NEW */

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: 0.35s;
  z-index: 1000;
}

.menu-overlay.show {
  opacity: 0;
  visibility: visible;
}

body.menu-open {
  overflow: hidden;
}

/* =====================================================
   Responsive breakpoints
   - >=1440px : design spec, full width nav
   - 1024-1439px : same layout, slightly tighter spacing
   - 768-1023px (tablet) : nav collapses behind hamburger
   - <768px (phone) : nav collapses, contact button shrinks
   ===================================================== */

/* Large desktop refinement, spec is naturally full width already above 1440 due to max-width */
@media (min-width: 1440px) {
  /* .mainheader {
    padding: 20px 40px;
  } */
}

/* 1024px - 1439px : slightly reduce nav gaps so everything still fits on one line */
@media (max-width: 1439px) {
  .headermiddle {
    gap: 4px;
  }

  .navlink {
    padding: 10px 14px;
  }
}

/* ==========================================
   MODIFIED : Mobile Drawer Menu
========================================== */

@media (max-width: 1023px) {
  .navToggle {
    display: flex;
    order: 3;
    z-index: 1002;
    /* MODIFIED */
  }

  .mainheader {
    flex-wrap: nowrap;
    /* MODIFIED */
  }

  /* ===== MODIFIED : headermiddle ===== */
  .headermiddle {
    /* keep your existing properties */

    order: 4;

    flex-basis: auto;
    /* CHANGED */

    flex-direction: column;

    align-items: flex-start;

    gap: 0;

    /* REMOVE these two effects */
    max-height: none;
    /* CHANGED */
    opacity: 1;
    /* CHANGED */

    overflow-y: auto;
    /* CHANGED */

    /* NEW */
    position: fixed;
    top: 0;
    left: -320px;
    /* Start outside screen */
    width: 300px;
    height: 100vh;
    background: #fff;
    padding: 90px 20px 20px;
    transition: left 0.35s ease;
    z-index: 1001;
  }

  /* ===== MODIFIED ===== */
  .headermiddle.is-open {
    left: 0;
    /* Slide from left */

    /* REMOVE */
    max-height: none;
    opacity: 1;
    padding-top: 90px;
  }

  .navlink {
    width: 100%;

    justify-content: flex-start;

    padding: 18px 0;

    border-bottom: 1px solid #eee;

    border-radius: 0;
  }

  /* ==============================
      MODIFIED END
  ============================== */

  .contactusarea {
    order: 2;

    margin-left: auto;

    right: auto;

    position: relative;
  }
}

/* Phone: shrink the contact button and tighten padding */
@media (max-width: 599px) {
  .mainheader {
    padding: 14px 16px;
    gap: 12px;
  }

  .essaricon {
    width: 120px;
    height: 34px;
  }

  .contactusarea {
    position: relative;
    right: 0px;
  }

  .contactbutton {
    padding: 10px 16px;
    height: 40px;
  }

  .contacttext {
    font-size: 14px;
  }

  .circlebg {
    width: 40px;
    height: 40px;
    padding: 10px;
  }
}

@media (max-width: 380px) {
  .contactbutton .contacttext {
    /* display: none; */
  }

  .contactbutton {
    width: 100px;
    height: 40px;
    padding: 0;
    border-radius: 100px;
  }

  .contactbutton::after {
    content: "Contact";
    font-weight: 500;
    font-size: 11px;
    color: #ffffff;
  }
}

/* =====================================================
   Footer
   Bootstrap's grid (.row / .col-*) handles the column
   stacking across breakpoints; this file only supplies
   brand styling Bootstrap doesn't (colors, gradient,
   type, icon sizing, fine-tuned spacing).
   ===================================================== */

:root {
  --text-grey: #666666;
  --brand-orange: #ea5b1f;
  --hairline: #e53935;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ============ FOOTER ============ */
.mainfooter {
  width: 100%;
  padding: 64px 120px 40px;
  background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
  /* border-top: 3px solid var(--hairline); */
}

.footermiddle {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  gap: 24px;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* ---- left column ---- */
.footerleft {
  display: flex;
  flex-direction: column;
  width: 260px;
  gap: 16px;
}

.footerlogo {
  width: 154px;
  height: auto;
}

.lefttext {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}

/* ---- nav links column ---- */
.footernav {
  display: flex;
  flex-direction: column;
  width: 160px;
  gap: 8px;
}

.footerroute {
  display: block;
  width: 100%;
}

.footerroute a {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--text-grey);
  transition: color 0.15s ease;
}

.footerroute a:hover {
  color: var(--brand-orange);
}

/* ---- right column ---- */
.footerright {
  display: flex;
  flex-direction: column;
  width: 260px;
  justify-content: space-between;
  gap: 24px;
}

.connectioninfo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.email,
.phone {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mailicon,
.phoneicon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--brand-orange);
}

.emailtext,
.phonetext {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--text-grey);
  word-break: break-word;
}

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

.followtext {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--brand-orange);
  color: #ffffff;
}

.social-icon svg {
  width: 14px;
  height: 14px;
}

/* ---- divider + bottom ---- */
hr {
  max-width: 1200px;
  margin: 40px auto 24px;
  border: none;
  border-top: 1px solid #e2e2e2;
}

.footerbottom {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.copyrights {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--text-grey);
}

.policydata {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.policydata a {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--text-grey);
  white-space: nowrap;
}

.policydata a:hover {
  color: var(--brand-orange);
}

/* ============ RESPONSIVE ============ */

/* Large desktop / wide screens */
@media (min-width: 1441px) {
  .mainfooter {
    padding: 64px 0;
  }

  .footermiddle,
  hr,
  .footerbottom {
    max-width: 1200px;
  }
}

/* Standard desktop (1024px - 1440px) */
@media (max-width: 1440px) {
  .mainfooter {
    padding: 64px 80px 40px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .mainfooter {
    padding: 48px 48px 32px;
  }

  .footermiddle {
    gap: 32px;
  }

  .footerleft {
    width: 100%;
    max-width: 320px;
  }

  .footernav {
    width: 160px;
  }

  .footerright {
    width: 260px;
  }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
  .mainfooter {
    padding: 40px 32px 24px;
  }

  .footermiddle {
    flex-direction: column;
    gap: 32px;
  }

  .footerleft,
  .footernav,
  .footerright {
    width: 100%;
    max-width: none;
  }

  .footerbottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .policydata {
    gap: 16px 24px;
  }
}

/* Phones */
@media (max-width: 480px) {
  .mainfooter {
    padding: 32px 20px 20px;
  }

  .footermiddle {
    gap: 28px;
  }

  .footerlogo {
    width: 130px;
  }

  .lefttext,
  .emailtext,
  .phonetext,
  .footerroute a,
  .followtext,
  .copyrights,
  .policydata a {
    font-size: 14px;
    line-height: 20px;
  }

  .policydata {
    flex-direction: column;
    gap: 12px;
  }
}

/* ---------- reset / base ---------- */

/* =====================================================
   Footer
   Bootstrap's grid (.row / .col-*) handles the column
   stacking across breakpoints; this file only supplies
   brand styling Bootstrap doesn't (colors, gradient,
   type, icon sizing, fine-tuned spacing).
   ===================================================== */

.mainfooter {
  width: 100%;
  padding: 64px 24px;
  background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
}

.mainfooter .container-xxl {
  max-width: 1440px;
}

/* ---------- left column: logo + address ---------- */
.footerlogo {
  width: 154px;
  height: 48px;
  display: block;
}

.lefttext {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #666666;
  /* max-width: 30ch; */
  min-width: 406px;
}

.footerbottomline {
  border: 1px solid #dddddd;
}
/* ---------- middle column: page links ---------- */
.footerlink {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #666666;
  width: fit-content;
  transition: color 0.2s ease;
}

.footerlink:hover,
.footerlink:focus-visible {
  color: #e1251b;
}

/* ---------- right column: contact + social ---------- */
.email,
.phone {
  color: #666666;
  transition: color 0.2s ease;
}

.email:hover,
.phone:hover {
  color: #e1251b;
}

.mailicon,
.phoneicon,
.twitter,
.linkedin {
  width: 24px;
  height: 24px;
  display: block;
}

.emailtext,
.phonetext {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: inherit;
}

.followtext {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #666666;
}

/* ---------- divider ---------- */
.footerdivider {
  margin: 40px 0 24px;
  border: none;
  border-top: 1px solid #e0e0e0;
  opacity: 1;
}

/* ---------- bottom bar ---------- */
.copyrights {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #666666;
}

.policylink {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #666666;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.policylink:hover,
.policylink:focus-visible {
  color: #e1251b;
}

/* =====================================================
   Footer responsive breakpoints
   Bootstrap's col-12 / col-md-4 / col-xl-3 classes on the
   markup already stack: 1 column on phones, 3 even columns
   on tablets, spec layout from xl (1200px) up. These rules
   fine-tune spacing at the exact 1024px / 1440px marks and
   the phone/tablet policy-link wrapping.
   ===================================================== */

@media (min-width: 1440px) {
  .mainfooter {
    padding: 64px 40px;
  }
}

/* tablet / 1024px zone: tighten vertical padding a bit */
@media (max-width: 1199px) {
  .mainfooter {
    padding: 48px 32px;
  }

  .footerright {
    align-items: flex-start;
  }
}

/* phone: full-width stack, smaller side padding, wrap policy links */
@media (max-width: 599px) {
  .mainfooter {
    padding: 40px 16px;
  }

  .lefttext {
    max-width: none;
  }

  .footerbottom {
    text-align: left;
  }

  .policydata {
    row-gap: 12px !important;
  }
}

/* =====================================================
   Hero section
   Background video with a dark overlay gradient, a static
   headline, and an auto-cycling 4-step progress indicator
   driven by hero.js. Sized with clamp()/vw so it scales
   smoothly from phones up through 1440px+ desktops.
   ===================================================== */

.herosection {
  position: relative;
  width: 100%;
  max-width: 1408px;
  height: clamp(420px, 62vw, 700px);
  /* .mainheader is position:fixed and reserves no space of its own —
     add its real measured height (kept in sync via setHeaderSpace() in
     main.js) on top of the section's own breathing room so the hero
     never renders underneath it. 84px fallback matches its default height. */
  margin: calc(var(--main-header-height, 84px) + 15px) auto 15px;
  border-radius: 48px;
  overflow: hidden;
  background: #1a1a1a;
}

.herovideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.lineargradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(75, 75, 75, 0) 0%,
    rgba(68, 68, 68, 0.114356) 17.19%,
    rgba(64, 64, 64, 0.180198) 27.08%,
    rgba(58, 58, 58, 0.277228) 41.67%,
    rgba(54, 54, 54, 0.35) 52.6%,
    rgba(47, 47, 47, 0.463021) 66.15%,
    rgba(40, 40, 40, 0.561458) 80.21%,
    rgba(32, 32, 32, 0.7) 100%
  );
}

.herocontent {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ---------- top: badge + headline ---------- */
.introtextarea {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 676px;
  top: 160px;
  position: relative;
}

.graytextbg {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 100px;
  background: #22222254;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.heroplusicon {
  width: 16px;
  height: 16px;
}

.introtext {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}

.herotitle {
  display: flex;
  flex-direction: column;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 64px);
  line-height: 1.13;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.herotitleline {
  /* transition: opacity 0.25s ease; */

  /* update code */
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* ---------- bottom: progress indicator ---------- */
.loadingstatus {
  display: flex;
  width: 100%;
  max-width: 1200px;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.progressitem {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.progresstrack {
  position: relative;
  display: block;
  width: 101.3%;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
}

.progressfill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  /* background: linear-gradient(90deg, #e1251b 0%, #f37021 100%); */
  background: #ffffff;
  transition: width linear;
}

.progressitem.is-complete .progressfill {
  width: 100%;
  transition: none;
}

.progressitem.is-active .progressfill {
  transition: width linear;
}

.progressdot {
  position: absolute;
  top: -5px;
  left: -12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.4;
  transition:
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}

.progressitem.is-complete .progressdot,
.progressitem.is-active .progressdot {
  opacity: 1;
}

.progressitem.is-active .progressdot {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

.progresslabel {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  /* color: rgba(255, 255, 255, 0.55); */
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.progressitem.is-active .progresslabel,
.progressitem.is-complete .progresslabel {
  color: #ffffff;
}

/* =====================================================
   Hero responsive breakpoints
   ===================================================== */

@media (min-width: 1440px) {
  .herocontent {
    padding: 64px 104px;
  }
	.herosection{
		margin-top: 52px;
	}
}

@media (max-width: 1199px) {
  .herocontent {
    padding: 32px 40px;
  }

  .loadingstatus {
    gap: 12px;
  }
}

@media (max-width: 1024px) {
  .herosection {
    max-width: 990px;
  }
}

@media (max-width: 768px) {
  .herosection {
    max-width: 750px;
  }
}

@media (max-width: 767px) {
  .herosection {
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    margin: calc(var(--main-header-height, 84px) + 16px) auto 16px;
  }

  .lineargradient {
    width: 100%;
  }

  .herocontent {
    padding: 24px 20px;
  }

  .introtextarea {
    gap: 16px;
  }

  .loadingstatus {
    flex-wrap: wrap;
    row-gap: 20px;
  }

  .progressitem {
    flex: 1 1 40%;
  }

  .progresslabel {
    font-size: 13px;
    white-space: normal;
  }
}

@media (max-width: 500px) {
  .herosection {
    max-width: 410px;
  }
}

/* ========================================home page brand partners section code css================================================= */
:root {
  --brand-border: #bbbbbb;
  --brand-heading: #333333;
  --brand-gap: 24px;
  --logo-w: 163px;
  --logo-h: 100px;
}

* {
  box-sizing: border-box;
}

/* ============ SECTION ============ */
.brandpartners {
  width: 100%;
  padding-top: 120px;
/*   padding-bottom: 80px; */
  background: #ffffff;
  overflow: hidden;
}

/* ---- heading ---- */
.brandtitle {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.brandtitlebox {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.brandtext {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--brand-heading);
}

.partnertext {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.02em;
  text-align: center;
  background: linear-gradient(270deg, #e1251b 0%, #f37021 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============ LOGO MARQUEE ============ */
.alllogos {
  display: flex;
  flex-direction: column;
  gap: var(--brand-gap);
  width: 100%;
}

.marquee-row {
  width: 100%;
  overflow: hidden;
  /* soft fade at the edges */
  /* -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); */
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--brand-gap);
  animation: marquee-scroll 30s linear infinite;
}

.marquee-track.reverse {
  animation-direction: reverse;
}

/* pause on hover for usability */
/* .marquee-row:hover .marquee-track {
  animation-play-state: paused;
} */

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---- individual logo card ---- */
.logo-card {
  flex: 0 0 auto;
  border-radius: 16px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px; /* old  padding: 20px 24px;*/
}

/* ================================
   Brand Logo Hover Effect
================================ */

/* Default - Grey Logo */
/* .logo-card img {
  filter: grayscale(100%);
  opacity: 0.65;
  transition:
    filter 0.4s ease,
    opacity 0.4s ease,
    transform 0.4s ease;
} */

/* Hover - Original Color */
/* .logo-card:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
} */

/* Optional - Lift the card slightly */
/* .logo-card {
  transition: transform 0.4s ease;
}

.logo-card:hover {
  transform: translateY(-5px);
} */
/* =====================================================
                LOGO HOVER / PAUSE
===================================================== */

/* Individual logo card */
.logo-card {
  flex: 0 0 auto;

  border-radius: 16px;
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px 10px; /* old  padding: 20px 24px;*/

  transition: transform 0.4s ease;
}

/* Default logo state */
.logo-card img {
  filter: grayscale(100%);
  opacity: 0.65;

  transition:
    filter 0.4s ease,
    opacity 0.4s ease,
    transform 0.4s ease;

  pointer-events: none;
}

/* =====================================================
                DESKTOP HOVER
===================================================== */

.logo-card:hover img,
.logo-card.is-hovered img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

.logo-card:hover,
.logo-card.is-hovered {
  transform: translateY(-5px);
}

/* =====================================================
        PAUSE MARQUEE WHEN LOGO IS HOVERED
===================================================== */

/* CSS hover */
.marquee-row:has(.logo-card:hover) .marquee-track {
  animation-play-state: paused;
}

/* JS controlled hover */
.marquee-row.is-hovering .marquee-track {
  animation-play-state: paused;
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }

  .marquee-row {
    overflow-x: auto;
  }
}

/* ============ RESPONSIVE ============ */

/* Large desktop / wide screens */
@media (min-width: 1441px) {
  /* .brandpartners {
    padding: 100px calc((100% - 1200px) / 2);
  } */
}

/* Standard desktop (1024px - 1440px) */
@media (max-width: 1440px) {
  /* .brandpartners {
    padding: 90px 80px;
  } */
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --logo-w: 140px;
    --logo-h: 90px;
    --brand-gap: 20px;
  }

  .brandpartners {
    padding: 72px 0px;
  }

  .brandtext,
  .partnertext {
    font-size: 30px;
    line-height: 38px;
  }

  .brandtitle {
    margin-bottom: 36px;
  }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
  :root {
    --logo-w: 130px;
    --logo-h: 84px;
    --brand-gap: 16px;
  }

  .brandpartners {
    padding: 56px 0px;
  }

  .brandtext,
  .partnertext {
    font-size: 26px;
    line-height: 32px;
  }

  .brandtitle {
    margin-bottom: 28px;
  }

  /* .marquee-row {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 32px,
      #000 calc(100% - 32px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 32px,
      #000 calc(100% - 32px),
      transparent 100%
    );
  } */
}

/* Phones */
@media (max-width: 480px) {
  :root {
    --logo-w: 108px;
    --logo-h: 72px;
    --brand-gap: 12px;
  }

  .brandpartners {
    /* padding: 40px 16px; */
    padding: 40px;
    padding-left: 0;
    padding-right: 0;
  }

  .brandtext,
  .partnertext {
    font-size: 22px;
    line-height: 28px;
  }

  .logo-card {
    padding: 14px 16px;
    border-radius: 12px;
  }

  .marquee-track {
    animation-duration: 20s;
  }
}

/* great choice section code css */
:root {
  --brand-gradient: linear-gradient(270deg, #e1251b 0%, #f37021 100%);
  --card-gradient: linear-gradient(180deg, #f37021 0%, #e1251b 100%);
  --text-grey: #666666;
  --card-h: 600px;
}

* {
  box-sizing: border-box;
}

/* ============ SECTION ============ */
.greatchoice {
  width: 100%;
  padding: 80px 120px 100px;
  background: #ffffff;
}

/* ---- heading ---- */
.greatchoicetitle {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.greatchoicetext {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.02em;
  text-align: center;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.everydaytext {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.02em;
  text-align: center;
  color: #333333;
}

/* ---- tab pills ---- */
.selectionrow {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 48px;
  gap: 8px;
  border-radius: 100px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #dddddd;
  flex-wrap: wrap;
  justify-content: center;
}

.tab-btn {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text-grey);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 100px;
  padding: 12px 24px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.tab-btn:hover {
  color: #333333;
}

.tab-btn.active {
  background: var(--brand-gradient);
  color: #ffffff;
}

/* ============ CARD STAGE ============ */
.allcards {
  position: relative;
  width: 100%;
  height: var(--card-h);
  border-radius: 32px;
  overflow: hidden;
  background: #111;
}

.card-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.card-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mainmiddleimage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
}

/* ---- orange info card, overlapping the photo on the left ---- */
.orangecards {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 46%;
  max-width: 610px;
  min-height: 62%;
  border-radius: 0px 32px 32px 0px;
  background: var(--card-gradient);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* decorative diagonal logo mark */
.pathlogo {
  position: absolute;
  top: 0;
  right: 270px;
  height: 100%;
  width: auto;
  opacity: 0.9;
  pointer-events: none;
  opacity: 30%;
}

.pathcube4,
.pathrectangle4 {
  position: absolute;
  opacity: 0.15;
  pointer-events: none;
}

.pathcube4 {
  width: 125%;
  height: auto;
  bottom: -146%;
  right: 0%;
}

.pathrectangle4 {
  width: 34%;
  height: auto;
  bottom: -20%;
  right: 5%;
}

.orangeinnerpart {
  position: relative;
  z-index: 2;
  padding: 32px 40px 32px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}

.orangelocationtext {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.orangedescription {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: #ffffff;
}

/* .greatchoice {
  position: relative;
}

.greatchoice.pin-active {
  position: relative;
}

.greatchoice.pin-active .allcards {
  position: sticky;
  top: 80px;
} */
.greatchoice .card-panel {
  /* we now animate visibility/position with GSAP (xPercent),
     so the CSS opacity crossfade transition needs to step aside */
  transition: none !important;
  opacity: 1 !important;
  overflow: hidden;
  /* clips the sliding panel to the rounded stage */
}

.greatchoice .card-panel:not(.active) {
  /* visibility: hidden; */
  visibility: visible;
  pointer-events: none;
}

.greatchoice .card-panel.active {
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

/* keep the rounded corners of the stage while a panel is mid-slide */
.greatchoice .allcards {
  overflow: hidden;
}

/* ============ RESPONSIVE ============ */

/* Large desktop / wide screens */
@media (min-width: 1441px) {
  .greatchoice {
    width: 100%;
    padding: 90px 120px 110px;
    /* height: 600px; */
  }

  .greatchoicetitle {
    margin-bottom: 28px;
  }

  .greatchoicetext,
  .everydaytext {
    font-size: 36px;
    line-height: 44px;
  }

  .selectionrow {
    margin-bottom: 48px;
  }

  .allcards {
    width: 100%;
    max-width: 1200px;
    height: 450px;
    margin: 0 auto;
    border-radius: 32px;
  }

  .card-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .mainmiddleimage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .orangecards {
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 46%;
    max-width: 610px;
    min-height: 62%;
  }

  .orangeinnerpart {
    padding: 32px 40px 32px 56px;
    left: 104px;
  }
  .greatchoice .allcards {
    width: 1408px;
    height: 600px;
    max-width: 1408px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1025px) and (max-width: 1440px) {
  .greatchoice {
    width: 100%;
    padding: 80px 20px 100px;
  }

  .allcards {
    width: 100%;
    height: 420px;
    border-radius: 32px;
  }

  .card-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .mainmiddleimage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .orangecards {
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 46%;
    max-width: 560px;
    min-height: 62%;
  }

  .orangeinnerpart {
    padding: 28px 36px 28px 48px;
    max-width: 450px;
    left: 104px;
  }

  .orangelocationtext {
    font-size: 30px;
  }

  .orangedescription {
    font-size: 16px;
    line-height: 1.5;
  }
  .greatchoice .allcards {
    width: 1408px;
    height: 600px;
    max-width: 1408px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .greatchoice {
    width: 100%;
    padding: 64px 40px 80px;
  }

  .greatchoicetitle {
    margin-bottom: 24px;
  }

  .greatchoicetext,
  .everydaytext {
    font-size: 30px;
    line-height: 38px;
  }

  .selectionrow {
    margin-bottom: 32px;
  }

  .tab-btn {
    font-size: 13px;
    padding: 10px 18px;
  }

  .allcards {
    width: 100%;
    height: 360px;
    border-radius: 28px;
    overflow: hidden;
  }

  .card-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .mainmiddleimage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 28px;
  }

  .orangecards {
    left: 0px;
    top: 50%;
    width: 52%;
    max-width: 480px;
    min-height: 58%;
    transform: translateY(-50%);
    border-radius: 0px 26px 26px 0px;
  }

  .orangeinnerpart {
    padding: 24px 28px 24px 36px;
    max-width: 100%;
    gap: 12px;
  }

  .orangelocationtext {
    font-size: 25px;
    line-height: 1.2;
  }

  .orangedescription {
    font-size: 14px;
    line-height: 1.5;
  }

  .pathlogo {
    right: 160px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .greatchoice {
    width: 100%;
    padding: 50px 24px 64px;
  }

  .greatchoicetitle {
    gap: 6px;
    margin-bottom: 22px;
  }

  .greatchoicetext,
  .everydaytext {
    font-size: 26px;
    line-height: 32px;
  }

  .selectionrow {
    width: fit-content;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 4px;
    margin-bottom: 30px;
  }

  .tab-btn {
    font-size: 12px;
    line-height: 18px;
    padding: 9px 14px;
  }

  .allcards {
    position: relative;
    width: 100%;
    height: 320px;
    border-radius: 24px;
    overflow: hidden;
    background: #111;
  }

  .card-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    flex-direction: unset;
  }

  .mainmiddleimage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    margin-top: 0;
    order: unset;
  }

  .orangecards {
    position: absolute;
    left: 0px;
    top: 50%;
    width: 46%;
    max-width: 350px;
    min-height: 60%;
    transform: translateY(-50%);
    border-radius: 0px 22px 22px 0px;
    order: unset;
  }

  .orangeinnerpart {
    padding: 22px 20px 22px 28px;
    max-width: 100%;
    gap: 10px;
  }

  .orangelocationtext {
    font-size: 23px;
    line-height: 1.2;
  }

  .orangedescription {
    font-size: 13px;
    line-height: 1.45;
  }

  .pathlogo {
    right: 100px;
    opacity: 0.35;
  }

  .pathcube4,
  .pathrectangle4 {
    display: block;
  }
}

@media (min-width: 481px) and (max-width: 576px) {
  .greatchoice {
    width: 100%;
    padding: 38px 16px 48px;
  }

  .greatchoicetitle {
    gap: 4px;
    margin-bottom: 18px;
    flex-wrap: nowrap;
  }

  .greatchoicetext,
  .everydaytext {
    font-size: 21px;
    line-height: 27px;
  }

  .selectionrow {
    width: 100%;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 4px;
    margin-bottom: 24px;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .selectionrow::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    flex: 0 0 auto;
    font-size: 10px;
    line-height: 16px;
    padding: 8px 13px;
  }

  .allcards {
    width: 100%;
    height: 255px;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
  }

  .card-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }

  .mainmiddleimage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    margin: 0;
  }

  .orangecards {
    position: absolute;
    left: 0px;
    top: 50%;
    width: 43%;
    min-height: 52%;
    transform: translateY(-50%);
    border-radius: 0px 20px 20px 0px;
  }

  .orangeinnerpart {
    padding: 18px 16px 18px 26px;
    gap: 8px;
  }

  .orangelocationtext {
    font-size: 18px;
    line-height: 1.15;
  }

  .orangedescription {
    font-size: 11px;
    line-height: 1.4;
  }

  .pathlogo {
    right: 60px;
    opacity: 0.3;
  }

  .pathcube4,
  .pathrectangle4 {
    display: none;
  }
}

@media (min-width: 376px) and (max-width: 480px) {
  .greatchoice {
    padding: 32px 12px 42px;
  }

  .greatchoicetitle {
    gap: 4px;
    margin-bottom: 18px;
    flex-wrap: nowrap;
  }

  .greatchoicetext,
  .everydaytext {
    font-size: 19px;
    line-height: 25px;
  }

  .selectionrow {
    /* width: 100%; */
    flex-wrap: nowrap;
    /* gap: 2px; */
    padding: 4px;
    margin-bottom: 20px;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .selectionrow::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    flex: 0 0 auto;
    font-size: 9px;
    line-height: 14px;
    padding: 7px 11px;
  }

  .allcards {
    width: 100%;
    height: 245px;
    border-radius: 18px;
    overflow: hidden;
  }

  .card-panel {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .mainmiddleimage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    margin: 0;
  }

  .orangecards {
    position: absolute;
    left: 0px;
    top: 50%;
    width: 44%;
    min-height: 52%;
    transform: translateY(-50%);
    border-radius: 0px 18px 18px 0px;
  }

  .orangeinnerpart {
    padding: 17px 14px 17px 23px;
    gap: 7px;
  }

  .orangelocationtext {
    font-size: 17px;
    line-height: 1.15;
  }

  .orangedescription {
    font-size: 10px;
    line-height: 1.4;
  }

  .pathlogo {
    right: 45px;
    opacity: 0.25;
  }

  .pathcube4,
  .pathrectangle4 {
    display: none;
  }
}

@media (max-width: 375px) {
  .greatchoice {
    padding: 28px 10px 38px;
  }

  .greatchoicetitle {
    gap: 3px;
    margin-bottom: 16px;
    flex-wrap: nowrap;
  }

  .greatchoicetext,
  .everydaytext {
    font-size: 17px;
    line-height: 23px;
  }

  .selectionrow {
    width: 100%;
    flex-wrap: nowrap;
    gap: 1px;
    padding: 3px;
    margin-bottom: 18px;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .selectionrow::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    flex: 0 0 auto;
    font-size: 8px;
    line-height: 13px;
    padding: 6px 9px;
  }

  .allcards {
    width: 100%;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
  }

  .card-panel {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .mainmiddleimage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    margin: 0;
  }

  .orangecards {
    position: absolute;
    left: 4px;
    top: 50%;
    width: 46%;
    min-height: 53%;
    transform: translateY(-50%);
    border-radius: 16px;
  }

  .orangeinnerpart {
    padding: 15px 12px 15px 20px;
    gap: 6px;
  }

  .orangelocationtext {
    font-size: 15px;
    line-height: 1.15;
  }

  .orangedescription {
    font-size: 9px;
    line-height: 1.35;
  }

  .pathlogo {
    right: 30px;
    opacity: 0.2;
  }

  .pathcube4,
  .pathrectangle4 {
    display: none;
  }
}

.greatchoice,
.greatchoice .allcards {
  max-width: 100%;
}

.greatchoice {
  overflow: hidden;
}

@media (max-width: 768px) {
  .greatchoice .card-panel {
    visibility: hidden;
    opacity: 1 !important;
  }

  .greatchoice .card-panel.active {
    visibility: visible;
    opacity: 1 !important;
    z-index: 1;
  }
}

/* =====================================fleet fueiling=============================================== */
/*==================================================
                FLEET SECTION
==================================================*/
.fleet-section {
  width: 100%;
  background: #ffffff;
  overflow: hidden;
  /* padding: 96px 0; */
/*   padding-top: 96px; */
  padding-bottom: 20px;
}

.fleet-section .container {
  max-width: 1320px;
}

/* ============================================================
                    HEADING
============================================================ */

.fleet-heading {
  font-family: "Inter", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

.dark-text {
  color: #333333;
}

.gradient-text {
  background: linear-gradient(270deg, #e1251b 0%, #f37021 100%);

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fleet-desc {
  max-width: 985px;
  margin: 0 auto;

  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;

  color: #666666;
}

/* ============================================================
                    FLEET WRAPPER
============================================================ */

.fleet-wrapper {
  width: 100%;

  margin-top: 70px;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  gap: 18px;

  min-height: 360px;

  /* Space for the active card to grow equally above and below its centre. */
  padding-top: 35px;

  flex-wrap: nowrap;
}

/* ============================================================
                    FLEET CARD
============================================================ */

.fleet-card {
  position: relative;

  flex: 0 0 auto;

  width: 260px;

  cursor: pointer;

  opacity: 0.85;

  transform: translateY(0);

  z-index: 1;

  transition:
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s ease,
    opacity 0.45s ease;
}

/* ============================================================
                    IMAGE
============================================================ */

.fleet-image {
  position: relative;

  width: 100%;
  height: 160px;

  overflow: hidden;

  border-radius: 18px;

  background: #ffffff;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  transition:
    height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s ease,
    box-shadow 0.45s ease;
}

/* ============================================================
                    IMAGE
============================================================ */

.fleet-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  transform: scale(1.08);

  transition:
    transform 0.7s ease,
    filter 0.7s ease;
}

/* ============================================================
                    IMAGE OVERLAY
============================================================ */

.fleet-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 45%,
    rgba(0, 0, 0, 0.28) 100%
  );

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.45s ease;
}

/* ============================================================
                    ACTIVE CARD
============================================================ */

.fleet-card.active {
  width: 370px;

  opacity: 1;

  z-index: 10;

  /* 230px - 160px = 70px; lift by half to keep growth centred. */
  transform: translateY(-35px);
}

/* ============================================================
                    ACTIVE IMAGE
============================================================ */

.fleet-card.active .fleet-image {
  height: 230px;

  transform: translateY(0);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.12),
    0 35px 60px rgba(0, 0, 0, 0.1);
}

.fleet-card.active img {
  transform: scale(1);
}

/* ============================================================
                    ACTIVE OVERLAY
============================================================ */

.fleet-card.active .fleet-image::after {
  opacity: 1;
}

/* ============================================================
                    CARD CONTENT
============================================================ */

.fleet-content {
  width: 100%;

  opacity: 0;

  max-height: 0;

  overflow: hidden;

  margin-top: 0;

  transform: translateY(30px);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    max-height 0.45s ease,
    margin 0.45s ease;
}

/* ============================================================
                    CONTENT TITLE
============================================================ */

.fleet-content h3 {
  font-family: "Inter", sans-serif;

  font-size: 20px;

  font-weight: 700;

  line-height: 1.3;

  color: #333333;

  margin: 0 0 10px;

  position: relative;

  left: 135px;
}

/* ============================================================
                    CONTENT DESCRIPTION
============================================================ */

.fleet-content p {
  font-family: "Inter", sans-serif;

  font-size: 15px;

  line-height: 24px;

  font-weight: 400;

  color: #666666;

  margin: 0;

  min-width: 379px;
}

/* ============================================================
                    ACTIVE CONTENT
============================================================ */

.fleet-card.active .fleet-content {
  opacity: 1;

  max-height: 250px;

  margin-top: 22px;

  transform: translateY(0);
}

/* ============================================================
                    HOVER
============================================================ */

.fleet-card:hover {
  transform: translateY(-8px);
}

.fleet-card.active:hover {
  transform: translateY(-39px);
}

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

.fleet-card.active:hover .fleet-image {
  transform: translateY(0);
}

/* ============================================================
       ADDED/UPDATED: LARGE DESKTOP — 1201px TO 1440px
============================================================ */

/* ADDED: screens wider than 1440px retain the reference proportions. */
@media (min-width: 1441px) {
  .fleet-section {
    /* padding: 110px 0; */
    /* padding-top: 90px; */
    padding-bottom: 20px;
  }

  .fleet-section .container {
    max-width: 1400px;
  }

  .fleet-card {
    width: 260px;
  }

  .fleet-card.active {
    width: 370px;
  }
  .fleet-wrapper {
    max-height: 360px;
  }
}

@media (min-width: 1201px) and (max-width: 1440px) {
  .fleet-heading {
    font-size: 42px;
  }

  .fleet-wrapper {
    gap: 16px;
    max-height: 360px;
  }

  .fleet-card {
    width: 260px;
  }

  .fleet-card.active {
    width: 390px;
  }
}

/* ============================================================
       ADDED/UPDATED: SMALL DESKTOP — 1025px TO 1200px
============================================================ */

@media (min-width: 1025px) and (max-width: 1200px) {
  .fleet-wrapper {
    gap: 14px;
  }

  .fleet-card {
    width: 200px;
  }

  .fleet-card.active {
    width: 300px;

    /* ADDED: half of the responsive image-height increase. */
    transform: translateY(-32px);
  }

  .fleet-card.active:hover {
    transform: translateY(-36px);
  }

  .fleet-content p {
    min-width: 320px;
  }
}

/* ============================================================
       ADDED/UPDATED: TABLET / SMALL LAPTOP — 769px TO 1024px
============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  .fleet-heading {
    font-size: 38px;
  }

  .fleet-desc {
    font-size: 15px;
    line-height: 25px;
  }

  .fleet-wrapper {
    gap: 12px;
  }

  .fleet-card {
    /* ADDED: proportional widths keep all four cards inside the viewport. */
    width: calc((100% - 36px) / 4.5);
  }

  .fleet-card.active {
    width: calc((100% - 36px) / 3);

    /* ADDED: responsive centered lift across the 769-1024px range. */
    transform: translateY(clamp(-33px, -3.2vw, -24px));
  }

  .fleet-card.active:hover {
    transform: translateY(clamp(-37px, calc(-3.2vw - 4px), -28px));
  }

  .fleet-image {
    height: 150px;
  }

  .fleet-card.active .fleet-image {
    height: 200px;
  }

  .fleet-content h3 {
    font-size: 19px;
  }

  .fleet-content p {
    font-size: 14px;
    line-height: 22px;

    min-width: 270px;
  }
}

/* ============================================================
       ADDED/UPDATED: TABLET / LARGE MOBILE — UP TO 768px
============================================================ */

@media (max-width: 768px) {
  .fleet-section {
    padding: 70px 0;
  }

  .fleet-heading {
    font-size: 32px;
  }

  .fleet-desc {
    font-size: 14px;
    line-height: 24px;
  }

  .fleet-wrapper {
    width: 100%;

    margin-top: 50px;

    justify-content: flex-start;

    gap: 14px;

    overflow-x: auto;

    padding-bottom: 10px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    /* ADDED: natural card-by-card stopping for touch scrolling. */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 24px;
  }

  .fleet-wrapper::-webkit-scrollbar {
    display: none;
  }

  .fleet-card {
    flex: 0 0 auto;

    width: 210px;

    /* ADDED: center the card after a manual horizontal swipe. */
    scroll-snap-align: center;
  }

  .fleet-card.active {
    width: 270px;

    transform: translateY(-20px);
  }

  .fleet-card.active:hover {
    transform: translateY(-24px);
  }

  .fleet-image {
    height: 150px;
  }

  .fleet-card.active .fleet-image {
    height: 200px;
  }

  .fleet-content h3 {
    font-size: 19px;

    left: 0;
  }

  .fleet-content p {
    font-size: 14px;

    line-height: 22px;

    min-width: 0;

    width: 100%;
  }
}

/* ============================================================
       ADDED/UPDATED: MOBILE — UP TO 576px
============================================================ */

@media (max-width: 576px) {
  .fleet-section {
    padding: 60px 0;
  }

  /* ADDED: prevent content touching the viewport edges. */
  .fleet-section .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .fleet-heading {
    font-size: 28px;

    line-height: 1.3;
  }

  .fleet-desc {
    font-size: 14px;

    line-height: 22px;
  }

  .fleet-wrapper {
    margin-top: 40px;

    gap: 12px;

    padding-left: 10px;
    padding-right: 10px;
  }

  .fleet-card {
    width: 180px;
  }

  .fleet-card.active {
    width: 240px;

    transform: translateY(-19px);
  }

  .fleet-card.active:hover {
    transform: translateY(-23px);
  }

  .fleet-image {
    height: 130px;

    border-radius: 16px;
  }

  .fleet-card.active .fleet-image {
    height: 180px;
  }

  .fleet-content {
    margin-top: 0;
  }

  .fleet-card.active .fleet-content {
    margin-top: 18px;
  }

  .fleet-content h3 {
    font-size: 22px;

    line-height: 1.25;

    margin-bottom: 10px;

    left: 0;
  }

  .fleet-content p {
    font-size: 14px;

    line-height: 22px;

    min-width: 0;

    width: 100%;
  }
}

/* ============================================================
       ADDED/UPDATED: SMALL MOBILE — UP TO 375px
============================================================ */

@media (max-width: 375px) {
  .fleet-heading {
    font-size: 25px;
  }

  .fleet-card {
    width: 170px;
  }

  .fleet-card.active {
    width: 225px;

    transform: translateY(-17.5px);
  }

  .fleet-card.active:hover {
    transform: translateY(-21.5px);
  }

  .fleet-image {
    height: 125px;
  }

  .fleet-card.active .fleet-image {
    height: 170px;
  }

  .fleet-content h3 {
    font-size: 20px;
  }

  .fleet-content p {
    font-size: 13px;

    line-height: 21px;
  }
}

/* ============================================================
   ADDED: RESPONSIVE IMAGE GEOMETRY FOR EVERY SCREEN SIZE
   Height follows width, preventing distortion between breakpoints.
============================================================ */

.fleet-image {
  height: auto;
  aspect-ratio: 13 / 8;
}

.fleet-card.active .fleet-image {
  height: auto;
  aspect-ratio: 37 / 23;
}

/*============================================================= fastfuel section code css========================================================================== */
.fastfuel {
  background: #fff;
	padding-bottom: 100px !important;
}

/* LEFT CARD */

.left-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  height: 400px;
  /* max-width: 588px; */
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* transition: transform 0.5s ease; */
  transform: scale(1.1);

  transition: transform 0.6s ease;
}

.left-card:hover .card-image {
  transform: scale(1);
}

.overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.card-content {
  position: absolute;
  left: 48px;
  bottom: 40px;
  right: 48px;
  color: white;
}

.card-content h2 {
  font-family: Inter;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 12px;
}

.card-content p {
  font-family: Inter;
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

/* RIGHT CARD */

.right-card {
  position: relative;
  height: 400px;
  border-radius: 32px;
  overflow: hidden;
  background: linear-gradient(180deg, #f37021 0%, #e1251b 100%);
  display: flex;
  align-items: center;
  /* max-width: 588px; */
}

.plus-icon {
  position: absolute;
  right: 1px;
  top: -29px;
  width: 240px;
  opacity: 0.25;
  width: 400px;
  height: 400px;
}

.right-content {
  position: relative;
  z-index: 2;
  padding: 48px;
  color: white;
  top: 79px;
}

.right-content h2 {
  font-family: Inter;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.right-content p {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0%;
  max-width: 463px;
}

/* ==================== */
/* 1440px */
/* ==================== */
@media (max-width: 2560px) {
  .fastfuel .row {
    justify-content: center;
    column-gap: 15px;
  }

  .fastfuel .row > .col-12.col-lg-6 {
    flex: 0 0 588px;
    width: 588px;
    max-width: 588px;

    padding-left: 0;
    padding-right: 0;
  }

  .fastfuel .left-card,
  .fastfuel .right-card {
    width: 588px;
    max-width: 588px;
  }
}

@media (max-width: 1440px) {
  .card-content h2,
  .right-content h2 {
    font-size: 36px;
  }

  .card-content p,
  .right-content p {
    font-size: 17px;
  }

  .fastfuel .row {
    justify-content: center;
    column-gap: 15px;
  }

  .fastfuel .row > .col-12.col-lg-6 {
    flex: 0 0 588px;
    width: 588px;
    max-width: 588px;

    padding-left: 0;
    padding-right: 0;
  }

  .fastfuel .left-card,
  .fastfuel .right-card {
    width: 588px;
    max-width: 588px;
  }
}

/* ==================== */
/* 1024px */
/* ==================== */

@media (max-width: 1024px) {
  .left-card,
  .right-card {
    height: 360px;
  }

  .card-content {
    left: 32px;
    right: 32px;
    bottom: 32px;
  }

  .right-content {
    padding: 36px;
    top: 35px;
  }

  .card-content h2,
  .right-content h2 {
    font-size: 32px;
  }
  .fastfuel .row > .col-12.col-lg-6 {
    display: flex;
    justify-content: center;
  }

  .fastfuel .left-card,
  .fastfuel .right-card {
    width: 100%;
    max-width: 588px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==================== */
/* Tablet */
/* ==================== */
@media (max-width: 768px) {
  .left-card,
  .right-card {
    height: 320px;
  }

  .card-content {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }

  .right-content {
    padding: 24px;
    top: 0;
  }

  .card-content h2,
  .right-content h2 {
    font-size: 28px;
  }

  .card-content p,
  .right-content p {
    font-size: 16px;
    line-height: 1.7;
  }

  .plus-icon {
    width: 240px;
    right: -60px;
  }
}

/* @media (max-width: 576px) {
  .left-card,
  .right-card {
    height: 270px;
    border-radius: 24px;
  }

  .card-content {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .right-content {
    padding: 20px;
    top: 0;
  }

  .card-content h2,
  .right-content h2 {
    font-size: 22px;
    line-height: 1.3;
  }

  .card-content p,
  .right-content p {
    font-size: 14px;
    line-height: 1.6;
  }

  .plus-icon {
    width: 140px;
    right: -20px;
    top: -70px;
  }
} */
@media (max-width: 576px) {
  .fastfuel .row > .col-12.col-lg-6 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  .left-card,
  .right-card {
    height: 270px;
    border-radius: 24px;
  }

  .card-content {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .right-content {
    padding: 20px;
    top: 0;
  }

  .card-content h2,
  .right-content h2 {
    font-size: 22px;
    line-height: 1.3;
  }

  .card-content p,
  .right-content p {
    font-size: 14px;
    line-height: 1.6;
  }

  .plus-icon {
    width: 140px;
    right: -20px;
    top: -70px;
  }
}

/*====================================================== latest news section code csss============================================================== */
/* .latestnews {
  width: 1440;
  height: 606;
  gap: 24px;
  padding-right: 120px;
  padding-bottom: 80px;
  padding-left: 120px;
  background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
}
.newstitlebox {
  width: 1200;
  height: 44;
  gap: 12px;
}
.newstitle {
  display: flex;
  width: 481;
  height: 44;
  gap: 6px;
}
.latestnewstext {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-style: Bold;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -2%;
  text-align: center;
  color: linear-gradient(270deg, #e1251b 0%, #f37021 100%);
}
.promotionstext {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-style: Bold;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -2%;
  text-align: center;
  color: #333333;
}
.blogscardsbox {
  display: flex;
  width: 1200;
  height: 378;
  gap: 16px;
}
.blogcard1 {
  width: 390;
  height: 378;
  gap: 24px;
}
.blogcard1img {
  width: 390;
  height: 240;
  border-radius: 16px;
}
.newsbutton {
  width: 44;
  height: 44;
  border-radius: 100px;
  padding: 12px;
  background: linear-gradient(270deg, #e1251b 0%, #f37021 100%);
}
.newsarrow {
  width: 24;
  height: 24;
}
.blogcardbottom {
  width: 390;
  height: 114;
  gap: 8px;
}
.blogdate {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 20%;
  text-transform: uppercase;
  color: #333333;
}
.blogdetail {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -2%;
  color: #333333;
}

.blogcard2 {
  width: 390;
  height: 348;
  gap: 24px;
}
.blogcard2img {
  width: 390;
  height: 240;
  border-radius: 16px;
}
.blogcardbottom2 {
  width: 390;
  height: 84;
  gap: 8px;
}
.blogdate2 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 20%;
  text-transform: uppercase;
  color: #333333;
}
.blogdetail2 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -2%;
  color: #333333;
}

.blogcard3 {
  width: 390;
  height: 348;
  gap: 24px;
}
.blogcard3img {
  width: 390;
  height: 240;
  border-radius: 16px;
}
.blogcardbottom3 {
  width: 390;
  height: 84;
  gap: 8px;
}
.blogdate3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 20%;
  text-transform: uppercase;
  color: #333333;
}
.blogdetail3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 22px;
  line-height: 30px;
  letter-spacing: -2%;
  color: #333333;
} */
/* =========================================
LATEST NEWS
========================================= */

.latest-news {
  padding: 80px 0;

  background: linear-gradient(180deg, #f7f7f7 0%, #ffffff 100%);
}

/* Heading */

.news-heading {
  text-align: center;

  margin-bottom: 60px;
}

.news-heading h2 {
  font-size: 48px;

  font-weight: 700;

  font-family: Inter, sans-serif;
}

.gradient-text {
  background: linear-gradient(270deg, #e1251b, #f37021);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}

.dark-text {
  color: #333;
}

/* Card */

/* .news-card {
  cursor: pointer;

  transition: 0.35s;
}

.news-card:hover {
  transform: translateY(-8px);
} */

/* Image */

.news-image {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.news-image img {
  width: 100%;

  height: 240px;

  object-fit: cover;

  display: block;

  /* transition:.5s; */
}

/* .news-card:hover img{

    transform:scale(1.08);

} */

/* Button */

.news-btn {
  position: absolute;
  left: 200px;
  transform: translateX(-50%);
  bottom: -70px;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(270deg, #e1251b, #f37021);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.45s ease;
  z-index: 2;
  cursor: pointer;
}

.news-btn img {
  width: 20px;

  height: 20px;
}

.news-card:hover .news-btn {
  bottom: 100px;

  opacity: 1;
}

/* Content */

.news-content {
  padding-top: 22px;
}

.news-date {
  font-size: 12px;

  font-weight: 600;

  letter-spacing: 4px;

  text-transform: uppercase;

  color: #555;

  margin-bottom: 10px;
}

.news-content h3 {
  font-size: 24px;

  font-weight: 600;

  line-height: 34px;

  color: #333;

  font-family: Inter, sans-serif;
}

@media (max-width: 2560px) {
  .news-card {
    width: 390px;
    height: 378px;
    margin-left: auto;
    margin-right: auto;
  }
  .news-content h3 {
    font-size: 22px;
  }
  .latestnewscards {
    padding: 0px;
  }
}
/* =========================================
1440
========================================= */

@media (max-width: 1440px) {
  .news-heading h2 {
    font-size: 42px;
  }

  .news-content h3 {
    font-size: 22px;
  }
  .news-card {
    width: 390px;
    height: 378px;
    margin-left: auto;
    margin-right: auto;
  }
  .latestnewscards {
    padding: 0px;
  }
}

/* =========================================================
   FIX ONLY: 768px - 1024px
   Does NOT affect desktop or mobile
========================================================= */

/* @media (min-width: 768px) and (max-width: 1024px) {
  .latest-news .container {
    width: 100%;
    max-width: 960px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .latest-news .row.g-4 {
    justify-content: center;
  }

  .latestnewscards {
    width: 50%;
    flex: 0 0 50%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .latest-news .row.g-4 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;

    justify-content: flex-start;

    gap: 20px;

    padding: 0 0 20px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
  }

  .latest-news .row.g-4::-webkit-scrollbar {
    display: none;
  }

  .news-card {
    width: 100%;
    max-width: 420px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .news-image {
    width: 100%;
  }

  .news-image img {
    object-fit: cover;
  }

  .news-content {
    padding-top: 18px;
  }

  .news-content h3 {
    font-size: 21px;
    line-height: 30px;
  }
  .latestnewscards:nth-child(3) {
    margin-left: 25%;
  }
} */
/* =========================================================
   LATEST NEWS
   768px - 1024px ONLY
   Horizontal card slider
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  .latest-news {
    overflow: hidden;
  }

  .latest-news > .container {
    width: 100%;
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* =========================================
     CARD ROW / SCROLLER
  ========================================= */

  .latest-news .row.g-4 {
    display: flex;
    flex-wrap: nowrap;

    width: 100%;

    /* Remove Bootstrap gutter behavior */
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;

    column-gap: 16px;
    row-gap: 0;

    overflow-x: auto;
    overflow-y: hidden;

    justify-content: flex-start;

    padding: 0;

    margin: 0;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
  }

  .latest-news .row.g-4::-webkit-scrollbar {
    display: none;
  }

  /* =========================================
     CARD COLUMNS
     IMPORTANT:
     Override Bootstrap col-md-6
  ========================================= */

  .latest-news .latestnewscards {
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }

  /* =========================================
     CARD
  ========================================= */

  .latest-news .news-card {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
  }

  /* =========================================
     IMAGE
  ========================================= */

  .latest-news .news-image {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
  }

  .latest-news .news-image img {
    display: block;
    object-fit: cover;
  }

  /* =========================================
     CONTENT
  ========================================= */

  .latest-news .news-content {
    padding-top: 18px;
  }

  .latest-news .news-content h3 {
    font-size: 21px;
    line-height: 30px;
    margin: 0;
  }
}

/* =========================================
Mobile
========================================= */

@media (max-width: 576px) {
  .latest-news {
    padding: 50px 0;
  }

  .news-heading {
    margin-bottom: 35px;
  }

  .news-heading h2 {
    font-size: 28px;
  }

  .news-btn {
    width: 46px;
    height: 46px;
  }

  .news-card:hover .news-btn {
    bottom: 80px;
  }

  .news-content h3 {
    font-size: 18px;
    line-height: 28px;
  }
  .latest-news .row.g-4 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    gap: 20px;
    padding: 0 0 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .latest-news .row.g-4::-webkit-scrollbar {
    display: none;
  }
}

/*==================================================== contact us section code css=================================== */
.contactus {
  position: relative;
  width: 100%;
  min-height: 254px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background Image */
.contact-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Orange Gradient Overlay */
.contact-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(243, 112, 33, 0.88) 0%,
    rgba(225, 37, 27, 0.88) 100%
  );
  z-index: 2;
  opacity: 50%;
}

/* Content */
.contactus .container {
  position: relative;
  z-index: 3;
}

.contact-content {
  max-width: 560px;
  margin: auto;
  text-align: center;
}

.contact-title {
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.contact-desc {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 28px;
}

.contact-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 10px; */
}

/* .contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  height: 44px;
  border: 1.5px solid #fff;
  border-radius: 100px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
} */
.contact-btn {
  width: 125px;
  height: 44px;
  border: 1.5px solid #fff;
  border-radius: 100px;
  color: #fff;
  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  position: relative;

  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.btn-text {
  position: relative;
  height: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.btn-text span {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-btn:hover .btn-text span {
  transform: translateY(-22px);
}

.arrow-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-btn img {
  width: 20px;
  height: 20px;
}

/* Responsive */

@media (max-width: 768px) {
  .contactus {
    min-height: 220px;
    padding: 40px 20px;
  }

  .contact-title {
    font-size: 28px;
  }

  .contact-desc {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .contactus {
    min-height: 200px;
    padding: 35px 15px;
  }

  .contact-title {
    font-size: 24px;
  }

  .contact-desc {
    font-size: 13px;
  }

  .contact-buttons {
    flex-direction: row;
  }
}

/*============================================================================= Forecourt locator header section css============================================================================== */
/* header 2 */
/* .mainheader2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 40px;
  z-index: 9999;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
} */
/*======================================================
                    MAIN HEADER 2
======================================================*/

.mainheader2 {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  z-index: 9999;
  background: transparent;
  /* Full-bleed on purpose: this is the layer .header-white's background
     paints on, and it needs to span edge-to-edge on scroll, not just the
     1440px content column. .header-container (below) is what caps and
     pads the actual logo/nav/contact-button content at 1440px+24px,
     the same way .mainheader does — that's what keeps both headers'
     content position identical at any width without also clipping the
     white background to that same 1440px box. */
  /* display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none; */

  transition:
    background-color 0.45s ease,
    box-shadow 0.45s ease;
  will-change: transform, background-color;
}

/* .mainheader2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ffffff;
  z-index: -1;
  pointer-events: none;
} */

.mainheader2.header-white {
  background: #ffffff;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}

/* =========================================================
   NAV TEXT
========================================================= */

.mainheader2 .nav-text2 span {
  color: #ffffff;

  transition:
    color 0.4s ease,
    transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

/* White background state */
.mainheader2.header-white .nav-text2 span {
  color: #333333;
}

/* =========================================================
   CONTACT BUTTON
========================================================= */

.mainheader2 .contactbutton2,
.mainheader2 .circlebg2 {
  transition:
    background 0.4s ease,
    border-color 0.4s ease;
}

/* Transparent state */
.mainheader2 .contactbutton2,
.mainheader2 .circlebg2 {
  background: transparent;
  border-color: #ffffff;
}

/* White state */
.mainheader2.header-white .contactbutton2,
.mainheader2.header-white .circlebg2 {
  background: linear-gradient(270deg, #e1251b 0%, #f37021 100%);

  border-color: transparent;
}

/* =========================================================
   CONTACT TEXT
========================================================= */

.mainheader2 .contacttext2 span {
  color: #ffffff;

  transition:
    color 0.4s ease,
    transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

/* =========================================================
   ARROW
========================================================= */

.mainheader2 .arrowimage2 {
  transition: filter 0.4s ease;
}

/* =========================================================
   MOBILE HAMBURGER
========================================================= */

.mainheader2 .navToggle2 span {
  background: #ffffff;

  transition:
    background-color 0.4s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

.mainheader2.header-white .navToggle2 span {
  background: #333333;
}
.mainheader2 .essaricon2 {
  transition: filter 0.4s ease;
}
/* ==================== */
.header-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logoLink2 {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.essaricon2 {
  width: 154px;
  height: 44px;
  display: block;
}

/* essarlogo2.svg is solid white — perfect over the transparent/orange
   header, invisible once .header-white gives the header a white
   background. Swap to the dark multi-colour logo (same file used by the
   main header everywhere else) in that state instead. */
.essaricon2.logo-dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.essaricon2.logo-light {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.mainheader2.header-white .essaricon2.logo-light {
  opacity: 0;
}

.mainheader2.header-white .essaricon2.logo-dark {
  opacity: 1;
}

/* ---------- middle nav ---------- */
.headermiddle2 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}

/* .navlink {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #333333;
  white-space: nowrap;
  border-radius: 8px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
} */
.navlink2 {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px 24px;

  border-radius: 8px;

  color: #333;

  overflow: hidden;

  position: relative;

  white-space: nowrap;

  transition: background 0.35s ease;
}

.nav-text2 {
  display: flex;

  flex-direction: column;

  height: 22px;

  overflow: hidden;
}

.nav-text2 span {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

.navlink2:hover .nav-text2 span {
  transform: translateY(-100%);
}

.navlink2:hover,
.navlink2:focus-visible {
  color: #e1251b;
  /* background-color: #f7f7f7; */
}

/* ---------- right side contact ---------- */
.contactusarea2 {
  display: flex;
  align-items: center;
  /* gap: 8px; */
  flex-shrink: 0;
}

.contactbutton2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 12px 24px;
  border-radius: 100px;
  /* background: linear-gradient(270deg, #e1251b 0%, #f37021 100%); */
  border: 1.5px solid #ffffff;
  white-space: nowrap;
}

/* .contacttext {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #ffffff;
} */
.contacttext2 {
  display: flex;
  flex-direction: column;
  height: 22px;
  overflow: hidden;
}

.contacttext2 span {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

.contactbutton2:hover .contacttext2 span {
  transform: translateY(-100%);
}

.circlebg2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  padding: 12px;
  border: 1.5px solid #ffffff;
  flex-shrink: 0;
}

.arrowimage2 {
  width: 20px;
  height: 20px;
  display: block;
}

/* ---------- hamburger toggle (hidden on desktop) ---------- */
.navToggle2 {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.navToggle2 span {
  display: block;
  width: 22px;
  height: 2px;
  background: #333333;
  border-radius: 2px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.navToggle2.is-open2 span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navToggle2.is-open2 span:nth-child(2) {
  opacity: 0;
}

.navToggle2.is-open2 span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu-overlay2 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: 0.35s;
  z-index: 1000;
}

.menu-overlay2.show2 {
  opacity: 0;
  visibility: visible;
}

body.menu-open2 {
  overflow: hidden;
}

/* =====================================================
   Responsive breakpoints
   - >=1440px : design spec, full width nav
   - 1024-1439px : same layout, slightly tighter spacing
   - 768-1023px (tablet) : nav collapses behind hamburger
   - <768px (phone) : nav collapses, contact button shrinks
   ===================================================== */

/* .mainheader2 is full-bleed (see base rule above) — .header-container's
   own max-width:1440px + padding:20px 24px is what centers and insets
   the logo/nav/contact-button group identically to .mainheader at any
   width, so no per-breakpoint padding override is needed on the header
   itself here any more. */
@media (max-width: 2560px) {
  .mainheader2 {
    position: fixed;
  }
	.header-container{
		padding: 20px 108px
	}
}
@media (max-width: 1440px) {
  .mainheader2 {
    position: fixed;
	  padding: 16px 105px;
  }
}

/* 1024px - 1439px : slightly reduce nav gaps so everything still fits on one line */
@media (max-width: 1439px) {
  .headermiddle2 {
    gap: 4px;
  }

  .navlink2 {
    padding: 10px 14px;
  }
}

/* =====================================================
   1024px ONLY - HEADER FIX
   Do not affect other responsive breakpoints
===================================================== */

@media (min-width: 1024px) and (max-width: 1024px) {
  .mainheader2 {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
	 padding: 16px 10px;
  }

  .header-container {
    width: 100%;
    max-width: 1440px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .essaricon2 {
    width: 140px;
    height: auto;
  }

  .headermiddle2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: nowrap;
    flex: 1;
    margin: 0 20px;
  }

  .navlink2 {
    padding: 10px 10px;
    white-space: nowrap;
  }

  .nav-text2 span {
    font-size: 14px;
  }

  .contactusarea2 {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: static;
  }

  .contactbutton2 {
    height: 42px;
    padding: 10px 16px;
  }

  .circlebg2 {
    width: 42px;
    height: 42px;
    padding: 10px;
  }

  /* Keep hamburger hidden at exactly 1024px */
  .navToggle2 {
    display: none;
  }
}

/* Tablet and below: collapse nav into a dropdown behind the hamburger */
@media (max-width: 1023px) {
  .navToggle2 {
    display: flex;
    order: 3;
    z-index: 1002;
  }

  .mainheader2 {
    flex-wrap: nowrap;
	  padding: 16px 10px;
  }

  /* Same off-canvas slide-in drawer as the main header's .headermiddle,
     instead of the in-place dropdown this used to be — matches
     .mainheader's mobile nav pattern exactly. (Also fixes the open state
     never actually working here: main.js toggles the "is-open2" class,
     but this rule previously only matched a plain "is-open" class.) */
  .headermiddle2 {
    order: 4;
    flex-basis: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: none;
    opacity: 1;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background: #fff;
    padding: 90px 20px 20px;
    transition: left 0.35s ease;
    z-index: 1001;
  }

  .headermiddle2.is-open2 {
    left: 0;
    max-height: none;
    opacity: 1;
    padding-top: 90px;
  }

  .navlink2 {
    width: 100%;
    justify-content: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid #eee;
    border-radius: 0;
  }

  /* nav-text2 defaults to white for contrast over the transparent/orange
     desktop header — invisible on this drawer's white background, so
     force dark text here regardless of the header's own scroll state. */
  .headermiddle2 .nav-text2 span {
    color: #333333;
  }

  .contactusarea2 {
    order: 2;
    margin-left: auto;
    right: auto;
    position: relative;
  }
}

/* Phone: shrink the contact button and tighten padding */
@media (max-width: 599px) {
  .mainheader2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

  .header-container {
    padding: 14px 16px;
    gap: 12px;
  }

  .essaricon2 {
    width: 120px;
    height: 34px;
  }

  .contactbutton2 {
    padding: 10px 16px;
    height: 40px;
  }

  .contacttext2 {
    font-size: 14px;
  }

  .circlebg2 {
    width: 40px;
    height: 40px;
    padding: 10px;
  }
}

@media (max-width: 380px) {
  .contactbutton2 .contacttext2 {
    display: none;
  }

  .contactbutton2 {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 100px;
  }

  .contactbutton2::after {
    content: "Contact";
    font-weight: 500;
    font-size: 11px;
    color: #ffffff;
  }
}

/*========================================================= gradient======================================================== */
/* ==========================================
          FORECOURTS HERO SECTION
========================================== */

.forecourt-hero {
  /* position: relative; */
  overflow: hidden;
  width: 100%;
  min-height: 144px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 20px 50px;
}

.forecourt-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 140px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
  pointer-events: none;
}

/* ==========================================
        Left Decorative Shape
========================================== */

.hero-shape {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
}

.plusicon2 {
  width: 240px;
  height: auto;
  opacity: 0.28;
  object-fit: contain;
}

/* ==========================================
            Content
========================================== */

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 940px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ==========================================
            Small Heading
========================================== */

.headingbg {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 100px;
  margin-bottom: 32px;
}

.headingtext {
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ==========================================
            Main Description
========================================== */

.headingdesc {
  max-width: 795px;
  margin: 0;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
}

.headingdesc strong {
  font-weight: 700;
}

@media (max-width: 2560px) {
  .plusicon2 {
    width: 765.7px;
    height: 770px;
    top: 80px;
    left: -95px;
    position: relative;
  }

  /* .hero-content {
    top: -135px;
  } */

  .network-container {
    top: 20px;
  }
}

@media (max-width: 1200px) {
  .headingdesc {
    font-size: 40px;
    max-width: 820px;
  }

  .plusicon2 {
    width: 210px;
  }
}

@media (max-width: 1024px) {
  .forecourt-hero {
    min-height: 460px;
    padding: 90px 30px 100px;
  }

  .headingdesc {
    font-size: 34px;
    line-height: 1.35;
  }

  .plusicon2 {
    width: 180px;
  }
}

@media (max-width: 768px) {
  .forecourt-hero {
    min-height: 420px;
    padding: 80px 24px 90px;
  }

  .headingbg {
    margin-bottom: 24px;
  }

  .headingdesc {
    font-size: 28px;
    line-height: 1.45;
    max-width: 650px;
  }

  .plusicon2 {
    width: 140px;
    opacity: 0.2;
  }
}

@media (max-width: 576px) {
  .forecourt-hero {
    padding: 70px 18px 80px;
    min-height: 380px;
  }

  .headingbg {
    padding: 7px 14px;
  }

  .headingtext {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .headingdesc {
    font-size: 22px;
    line-height: 1.5;
    max-width: 100%;
  }

  .plusicon2 {
    width: 95px;
    opacity: 0.18;
  }
}

/* map whole box */
/* ==========================================================
                NETWORK SECTION
========================================================== */
:root {
  --brand-gradient: linear-gradient(270deg, #e1251b 0%, #f37021 100%);
  --text-dark: #333333;
  --text-mid: #666666;
  --border-light: #dddddd;
  --chip-bg: #ebebeb;
}

/* neutralise the browser's default 8px body margin so the 1440px spec
   widths below add up exactly — remove this block if your site already
   ships a global reset */
body {
  margin: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- section shell ---------- */
.mainmapnetwork {
  display: flex;
  width: 1440px;
  max-width: 100%;
  height: 600px;
  gap: 16px;
  padding-right: 120px;
  padding-left: 120px;
  margin: 0 auto; /* keeps it centered on screens above 1440px */
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}
.mainmapnetwork * {
  box-sizing: border-box;
}

/* ==========================================================================
   LEFT PANEL SHELL — list / filters / pin-detail all share this footprint
   ========================================================================== */
.leftinfocontent {
  position: relative;
  width: 384px;
  flex: 0 0 384px;
  height: 600px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid var(--border-light);
  overflow: hidden;
}

/* shared full-size panel positioning so we can crossfade them */
/* .leftinfotop,
.mapfilterbg,
.pindetailinfo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; } */
/* ============================================================
   LEFT PANEL VIEW ANIMATION
   LIST = FIXED
   FILTER + DETAIL = SLIDE OVER LIST
   ============================================================ */

.leftinfocontent {
  position: relative;
  overflow: hidden;
}

/* ============================================================
   LIST
   ============================================================ */

.leftinfotop {
  position: relative;

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  z-index: 1;
}

/* ============================================================
   FILTER + DETAIL CARDS
   ============================================================ */

.mapfilterbg,
.pindetailinfo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  z-index: 20;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.55s;
}

/* ============================================================
   OPEN POSITION
   ============================================================ */

.mapfilterbg.panel-open,
.pindetailinfo.panel-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
[hidden] {
  display: none !important;
}

/* ---------- 1) list view ---------- */
.leftinfotop-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
.exploretext {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}
.searchfilterbox {
  display: flex;
  width: 100%;
  height: 46px;
  gap: 12px;
}
.searchbar {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 100px;
  border: 1px solid var(--border-light);
  background: #fff;
}
.searchbar button {
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  cursor: pointer;
}
.searchbar .search-icon {
  width: 18px;
  height: 18px;
}
.searchbar input {
  border: 0;
  outline: none;
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-dark);
  background: transparent;
}
.searchbar input::placeholder {
  color: var(--text-mid);
}

.mapfilterbtn,
.closeiconbtn {
  width: 46px;
  height: 45px;
  flex: 0 0 auto;
  border-radius: 100px;
  padding: 3px;
  background: var(--chip-bg);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.closeiconbtn {
  width: 32px;
  height: 32px;
  padding: 3px;
}
.mapfilterbtn img,
.closeiconbtn img {
  width: 20px;
  height: 20px;
}
.mapfilterbtn.is-active {
  background: linear-gradient(270deg, #ffe4e0 0%, #ffe9d9 100%);
}

.listoflocation {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
  margin: 0;
  padding: 0 0 16px;
}

.listoflocation::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.maplocationbox {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 12px;
  padding: 16px 24px;
  cursor: pointer;
  border: 0;
  background: none;
  text-align: left;
  font-family: inherit;
}
.maplocationbox:hover,
.maplocationbox:focus-visible,
.maplocationbox.is-active {
  background: #f7f7f7;
}
.maplocationbox .pinicon {
  width: 24px;
  height: 30px;
  flex: 0 0 auto;
  margin-top: 2px;
}
.locationtextbox {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.maplocationtext1 {
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-dark);
}
.maplocationtext2,
.maplocationtext3 {
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-mid);
}
.mapdirectionbg {
  width: 46px;
  height: 45px;
  flex: 0 0 auto;
  border-radius: 100px;
  padding: 3px;
  background: var(--chip-bg);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mapdirectionbg img {
  width: 20px;
  height: 20px;
}

.noresults {
  padding: 8px 24px 24px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-mid);
}

/* ---------- 2) filters view ---------- */
.mapfiltertop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  flex: 0 0 auto;
  padding: 16px 24px;
}
.mapfiltertext {
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-dark);
}

.mapfiltermiddle {
  flex: 1 1 auto;
  overflow-y: auto;
  border: 0;
  margin: 0;
  padding: 0;
}
.filterlistbox {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 20px;
  padding: 16px 24px;
  cursor: pointer;
}
.filterlistbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: #e1251b;
  cursor: pointer;
}
.filtercheckbox {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-block;
}
.filtercheckbox-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.checkboxbg,
.checkboxarrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.checkboxarrow {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.filtercheckbox-input:checked ~ .checkboxarrow {
  opacity: 1;
}
.filtercheckbox-input:focus-visible ~ .checkboxbg {
  outline: 2px solid #f37021;
  outline-offset: 2px;
  border-radius: 5px;
}
.filterlistinner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.filterlistinner img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.filterlisttext {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-dark);
}

.filterlistbottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: 16px 24px;
  border-top: 1px solid var(--border-light);
}
.restbuttonbg,
.applybuttonbg {
  flex: 1 1 0;
  height: 40px;
  border: 0;
  border-radius: 30px;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
}
.restbuttonbg {
  background: var(--chip-bg);
  color: var(--text-mid);
}
.applybuttonbg {
  background: var(--brand-gradient);
  color: #fff;
}

/* ---------- 3) pin detail view ---------- */
.pindetailtopbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  flex: 0 0 auto;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light);
}
.pindetailtoptext {
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-dark);
}

.pindetailmiddle {
  flex: 1 1 auto;
  overflow-y: auto;
}

.pinaddress,
.pinphonenumber,
.pintiming {
  display: flex;
  gap: 16px;
  padding: 12px 24px;
}
.detailicon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
}
.addresstextbox {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pindetailaddress1,
.pindetailaddress2 {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-mid);
}

.phonenumbertext {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-mid);
  text-decoration: none;
}
.phonenumbertext:hover {
  text-decoration: underline;
}

.timingbox {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.timing-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.timing-row span {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-mid);
}
.timing-row .day {
  color: var(--text-mid);
}

.pinfacility {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
  padding: 12px 24px 4px;
}
.facility-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.facility-item img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.facility-item span {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-dark);
}

.pindetailbottom {
  padding: 16px 24px 24px;
  flex: 0 0 auto;
}
.pindirectionbutton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 30px;
  background: var(--brand-gradient);
  cursor: pointer;
}
.pindirectionbutton img {
  width: 16px;
  height: 16px;
}
.pindirectiontext {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: #fff;
}

/* ==========================================================================
   RIGHT PANEL — the map
   ========================================================================== */
/* .rightinfocontent {
  position: relative;
  width: 800px;
  flex: 1 1 auto;
  height: 600px;
  border-radius: 24px;
  overflow: hidden;
  background: #BFE3F0;
} */

/* .map-stage {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transform: scale(var(--zoom, 1));
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.mapimage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.map-pins { position: absolute; inset: 0; }

.map-pin { position: absolute; transform: translate(-50%, -100%); } */

/* .map-stage {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transform:
    translate3d(var(--map-x, 0px), var(--map-y, 0px), 0)
    scale(var(--zoom, 1));

  transition:
    transform .6s cubic-bezier(.4, 0, .2, 1);

  will-change: transform;
  cursor: grab;

  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.map-stage.is-dragging {
  cursor: grabbing;
  transition: none;
}

.mapimage {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  pointer-events: none;

  user-select: none;
  -webkit-user-drag: none;
}

.map-pins {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

.map-pin {
  position: absolute;

  transform: translate(-50%, -100%);
  pointer-events: auto;
}
.pin-btn {
  display: block;
  border: 0; background: none; padding: 0; cursor: pointer;
  transform: scale(calc(1 / var(--zoom, 1)));
  transform-origin: bottom center;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.pin-btn img { width: 32px; height: 40px; display: block; }
.map-pin.is-active .pin-btn { transform: scale(calc(1.6 / var(--zoom, 1))); }

.map-pin.is-decor { pointer-events: none; }
.map-pin.is-decor .pin-btn { cursor: default; }
.map-pin.is-decor .pin-btn img { width: 22px; height: 27px; opacity: .85; } */
/* ============================================================
   FORECOURT MAP
   ============================================================ */

.rightinfocontent {
  position: relative;
  width: 800px;
  flex: 1 1 auto;
  height: 600px;

  border-radius: 24px;
  overflow: hidden;

  background: #bfe3f0;

  /*
   * Important:
   * The viewport itself receives no page scrolling.
   */
  touch-action: none;
}

/* ============================================================
   MAP CANVAS
   ============================================================ */

.map-stage {
  position: absolute;

  /*
   * The stage is intentionally larger than the viewport
   * when zoomed/panned.
   */
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  /** Default map position.*/

  /* --zoom: 1.4;
  --map-x: -40.999999999999986px;
  --map-y: 47.000000000000014px; */
  --zoom: 1.44;
  --map-x: -103px;
  /* --map-y: 7px; */
  --map-y: 0px;

  transform-origin: 50% 50%;

  transform: translate3d(var(--map-x), var(--map-y), 0) scale(var(--zoom));

  /*
   * Smooth animation when selecting/resetting a forecourt.
   */
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;

  /*
   * This is the important part for the reference behaviour.
   */
  cursor: grab;

  user-select: none;
  -webkit-user-select: none;

  touch-action: none;
}

/*
 * While the user is physically dragging the map,
 * remove the animation.
 */
.map-stage.is-dragging {
  cursor: grabbing;
  transition: none;
}

/* ============================================================
   SVG MAP
   ============================================================ */

.mapimage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================================
   PINS
   ============================================================ */

.map-pins {
  position: absolute;

  inset: 0;

  pointer-events: none;
}

.map-pin {
  position: absolute;

  transform: translate(-50%, -100%);

  pointer-events: auto;
}

.pin-btn {
  display: block;

  border: 0;
  background: none;

  padding: 0;

  cursor: pointer;

  transform: scale(calc(1 / var(--zoom, 1)));

  transform-origin: bottom center;

  transition: transform 0.35s ease;
}

.pin-btn img {
  width: 32px;
  height: 40px;

  display: block;

  user-select: none;
  -webkit-user-drag: none;
}

.map-pin.is-active .pin-btn {
  transform: scale(calc(1.6 / var(--zoom, 1)));
}

/* Decorative pins */
.map-pin.is-decor {
  pointer-events: none;
}

.map-pin.is-decor .pin-btn {
  cursor: default;
}

.map-pin.is-decor .pin-btn img {
  width: 22px;
  height: 27px;

  opacity: 0.85;
}

.map-reset-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 0;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.map-reset-btn img {
  width: 16px;
  height: 16px;
}

.pin-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 44px));
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 300px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border-light);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  z-index: 6;
  white-space: nowrap;
}
.pin-tooltip img {
  width: 24px;
  height: 30px;
  flex: 0 0 auto;
}
.pin-tooltip-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pin-tooltip-name {
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pin-tooltip-postcode {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-mid);
}

/* ==========================================================================
   RESPONSIVE OVERRIDES
   (base rules above stay exactly as specified for 1440px and up)
   ========================================================================== */
@media (max-width: 2560px) {
  .mainmapnetwork {
    margin-bottom: 80px;
  }
}
/* ---- 1024px – 1439px : shrink side padding, let the two panels flex ---- */
@media (max-width: 1439.98px) {
  .mainmapnetwork {
    width: 100%;
    height: auto;
    padding-left: 48px;
    padding-right: 48px;
  }
  .leftinfocontent {
    width: 340px;
    flex: 0 0 340px;
  }
  .rightinfocontent {
    width: auto;
    flex: 1 1 auto;
  }
  .leftinfocontent,
  .rightinfocontent {
    height: 560px;
  }
}

@media (max-width: 1199.98px) {
  .mainmapnetwork {
    padding-left: 32px;
    padding-right: 32px;
  }
  .leftinfocontent {
    width: 300px;
    flex-basis: 300px;
  }
}

/* ---- tablets (≤1023px): stack the map under the list ---- */
@media (max-width: 1023.98px) {
  .mainmapnetwork {
    flex-direction: column;
    height: auto;
    padding-left: 32px;
    padding-right: 32px;
    gap: 20px;
  }
  .leftinfocontent {
    width: 100%;
    flex-basis: auto;
    height: 460px;
  }
  .rightinfocontent {
    width: 100%;
    height: 420px;
  }
}

/* ---- mobile (≤767px) ---- */
@media (max-width: 767.98px) {
  .mainmapnetwork {
    padding-left: 16px;
    padding-right: 16px;
    gap: 16px;
  }
  .leftinfocontent {
    height: 420px;
    border-radius: 18px;
  }
  .rightinfocontent {
    height: 320px;
    border-radius: 18px;
  }

  .exploretext {
    font-size: 20px;
    line-height: 26px;
  }
  .leftinfotop-header {
    padding: 18px;
    gap: 12px;
  }
  .maplocationbox {
    padding: 12px 18px;
    gap: 10px;
  }
  .mapdirectionbg,
  .mapfilterbtn {
    width: 40px;
    height: 40px;
  }

  .mapfiltertop,
  .pindetailtopbox {
    padding: 14px 18px;
    height: auto;
  }
  .filterlistbox {
    padding: 12px 18px;
  }
  .filterlistbottom {
    padding: 14px 18px;
  }

  .pinaddress,
  .pinphonenumber,
  .pintiming,
  .pinfacility {
    padding-left: 18px;
    padding-right: 18px;
  }
  .pinfacility {
    grid-template-columns: 1fr;
  }
  .pindetailbottom {
    padding: 14px 18px 18px;
  }

  .pin-btn img {
    width: 26px;
    height: 32px;
  }
  .map-pin.is-decor .pin-btn img {
    width: 18px;
    height: 22px;
  }
  .map-reset-btn {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
  }

  .pin-tooltip {
    max-width: 220px;
    padding: 6px 10px;
    gap: 8px;
  }
  .pin-tooltip img {
    width: 20px;
    height: 24px;
  }
}

@media (max-width: 399.98px) {
  .leftinfocontent {
    height: 400px;
  }
  .rightinfocontent {
    height: 260px;
  }
}

/*============================================================ Contact page code css================================================================== */
:root {
  --brand-orange: #f37021;
  --brand-red: #e1251b;
  --field-border: #dddddd;
  --field-text: #999999;
}

body {
  font-family: "Inter", sans-serif;
  margin: 0;
}

/* ===== Page background ===== */
.contact-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  /* Replace the URL below with your own truck image path */
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.05) 100%),
    url("Images/contactpage/contactpagetruckimage.svg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 48px 0;
}

/* ===== Form card ===== */
.contact-form-card {
  width: 100%;
  max-width: 450px;
  border-radius: 32px;
  padding: 32px;
  background: linear-gradient(
    180deg,
    var(--brand-orange) 0%,
    var(--brand-red) 100%
  );
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.contact-form-title {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}

.form-middle-part {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Icon + field wrapper */
.field-wrap {
  position: relative;
  width: 100%;
}

.field-wrap .field-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  color: var(--field-text);
  font-size: 16px;
  pointer-events: none;
  z-index: 2;
}

.field-input,
.field-select {
  width: 100%;
  min-height: 46px;
  padding: 12px 18px 12px 44px;
  border-radius: 100px;
  border: 1px solid var(--field-border);
  background: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--field-text);
  appearance: none;
  -webkit-appearance: none;
}

.field-select {
  padding-right: 40px;
  cursor: pointer;
}

/* =====================================================
   CUSTOM ENQUIRY DROPDOWN
   Figma-style dropdown
===================================================== */

.enquiry-dropdown {
  position: relative;
  width: 100%;
}

/* =====================================================
   SELECT FIELD
===================================================== */

.custom-select {
  position: relative;

  width: 100%;
  min-height: 46px;

  padding: 12px 48px 12px 44px;

  border-radius: 100px;
  border: 1px solid var(--field-border);

  background: #ffffff;

  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;

  color: var(--field-text);

  display: flex;
  align-items: center;

  cursor: pointer;

  user-select: none;

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Selected value */

.custom-select-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron */

.custom-select-chevron {
  position: absolute;

  right: 18px;
  top: 50%;

  width: 14px;
  height: 14px;

  transform: translateY(-50%);

  transition: transform 0.3s ease;

  pointer-events: none;
}

/* Open state */

.enquiry-dropdown.open .custom-select {
  border-color: #cccccc;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.enquiry-dropdown.open .custom-select-chevron {
  transform: translateY(-50%) rotate(180deg);
}

/* =====================================================
   DROPDOWN MENU
===================================================== */

.custom-select-menu {
  position: absolute;

  left: 0;
  right: 0;

  top: calc(100% + 10px);

  background: #ffffff;

  border: 1px solid #d5d5d5;

  border-radius: 40px;

  padding: 24px 0;

  box-sizing: border-box;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04);

  z-index: 100;

  opacity: 0;
  visibility: hidden;

  transform: translateY(-8px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;

  overflow: hidden;
}

/* Open */

.enquiry-dropdown.open .custom-select-menu {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}

/* =====================================================
   OPTIONS
===================================================== */

.custom-option {
  width: 100%;

  padding: 12px 36px;

  min-height: 53px;

  box-sizing: border-box;

  display: flex;
  align-items: center;

  font-family: "Inter", sans-serif;

  font-size: 15px;
  font-weight: 400;

  line-height: 22px;

  color: #666666;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* Hover */

.custom-option:hover {
  background: #f5f5f5;
  color: #333333;
}

/* Selected */

.custom-option.selected {
  color: #333333;
  font-weight: 500;
}

.field-wrap .chevron-icon {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  color: var(--field-text);
  font-size: 14px;
  pointer-events: none;
}

.field-input::placeholder {
  color: var(--field-text);
}

.field-input:focus,
.field-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.message-field {
  border-radius: 24px;
  min-height: 100px;
  resize: none;
}
/* =====================================================
   CUSTOM CHECKBOX
===================================================== */

.consent-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

/* =====================================================
   REAL CHECKBOX
   -----------------------------------------------
   We hide the browser's default checkbox visually.
   It is still present for accessibility/form handling.
===================================================== */

.custom-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* =====================================================
   CUSTOM CHECKBOX WRAPPER
===================================================== */

.custom-checkbox {
  position: relative;

  /* Size of the checkbox on your form */
  width: 24px;
  height: 24px;

  min-width: 24px;
  min-height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  margin-top: 1px;

  overflow: hidden;
}

/* =====================================================
   BEFORE CLICK
   -----------------------------------------------
   checkboxbg.svg = outer checkbox box
===================================================== */

.checkbox-bg {
  position: absolute;

  width: 24px;
  height: 24px;

  inset: 0;

  display: block;

  object-fit: contain;
}

/* =====================================================
   BEFORE CLICK
   -----------------------------------------------
   checkboxarrow.svg = tick

   Hidden initially.
===================================================== */

.checkbox-arrow {
  position: absolute;

  width: 14px;
  height: 14px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%) scale(0);

  opacity: 0;

  object-fit: contain;

  pointer-events: none;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* =====================================================
   AFTER CLICK
   -----------------------------------------------
   Show the tick when checkbox is checked.
===================================================== */

.custom-checkbox-input:checked + .custom-checkbox .checkbox-arrow {
  opacity: 1;

  transform: translate(-50%, -50%) scale(1);
}

/* =====================================================
   ACCESSIBILITY / KEYBOARD FOCUS
===================================================== */

.custom-checkbox-input:focus-visible + .custom-checkbox {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* =====================================================
   CONSENT TEXT
===================================================== */

.consent-text {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: #ffffff;

  cursor: pointer;
}

/* =====================================================
   LINKS
===================================================== */

.consent-text a {
  font-weight: 700;
  text-decoration: underline;
  color: #ffffff;
}

.consent-text {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.consent-text a {
  font-weight: 700;
  text-decoration: underline;
  color: #ffffff;
}

/* Buttons */
.form-actions {
  display: flex;
  align-items: center;
  /* gap: 12px; */
  flex-wrap: wrap;
}

.btn-send {
  position: relative;
  overflow: hidden;
  min-width: 151px;
  height: 44px;
  padding: 0 24px;
  border-radius: 100px;
  border: 1.5px solid #ffffff;
  background: transparent;
  color: #ffffff;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-send .flip-text {
  position: relative;
  display: inline-block;
  height: 22px;
  overflow: hidden;
}

.btn-send .flip-text span {
  display: block;
  transition: transform 0.3s ease;
}

.btn-send:hover .flip-text span {
  transform: translateY(-22px);
}

.btn-round {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  border: 1.5px solid #ffffff;
  background: transparent;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

/* .btn-round:hover {
  background: #ffffff;
  color: var(--brand-red);
} */

/* ===== Responsive breakpoints ===== */

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
  .contact-page {
    padding: 24px 16px;
    background-position: center;
  }

  .contact-form-card {
    border-radius: 24px;
    padding: 24px;
    gap: 18px;
    max-width: 100%;
  }

  .contact-form-title {
    font-size: 26px;
  }
}

/* Small tablets (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .contact-form-card {
    max-width: 480px;
  }
  .custom-select-menu {
    border-radius: 24px;

    padding: 12px 0;
  }

  .custom-option {
    min-height: 48px;

    padding-left: 24px;
    padding-right: 24px;

    font-size: 14px;
  }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .contact-page {
    padding: 40px 32px;
  }

  .contact-form-card {
    max-width: 420px;
  }
}

/* Small desktops / 1024px */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .contact-page {
    padding: 56px 64px;
  }

  .contact-form-card {
    max-width: 440px;
  }
  .custom-select-menu {
    padding: 24px 0;

    border-radius: 40px;
  }

  .custom-option {
    padding-left: 36px;
    padding-right: 36px;

    min-height: 53px;

    font-size: 15px;
  }
}

/* 1440px and above */
@media (min-width: 1440px) {
  .contact-page {
    padding: 88px 70px;
  }

  .contact-form-card {
    max-width: 450px;
  }
  .custom-select-menu {
    border-radius: 40px;
    padding: 24px 0;
  }

  .custom-option {
    min-height: 53px;

    padding-left: 36px;
    padding-right: 36px;

    font-size: 15px;
  }
}

/* =======================================================Retail page section code css========================================== */
/* =========================================================
   Essar Retail — Navigation Tabs
   Sticky + selective (active state) + smooth scroll-to-section
   Breakpoints: <576 mobile | 576-767 lg-mobile | 768-1023 tablet
                | 1024-1439 desktop | 1440+ large desktop
   ========================================================= */
:root {
  --nav-gradient: linear-gradient(270deg, #e1251b 0%, #f37021 100%);
  --nav-border: #dddddd;
  --nav-text-inactive: #666666;
  --nav-text-active: #ffffff;
  --nav-bg: #ffffff;
  --nav-radius-outer: 50px;
  --nav-radius-inner: 30px;
  --nav-height: 68px;
  /* used as scroll-offset for anchor jumps */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: #222;
  /* padding-top: 0px !important; */
}

/* ---------- Sticky wrapper ---------- */
/* This is what keeps the bar visible ("not invisible") while
   scrolling: position: sticky pins it to the top of the viewport
   instead of scrolling away with the page. */

/* .retailnavigation {
  position: sticky;
  top: 0;
  z-index: 99999;
  width: 100%;
  background: var(--nav-bg);
  display: flex;
  justify-content: center;
  padding: 8px clamp(16px, 4vw, 120px);
  will-change: transform;
  background-color: transparent;
} */

.retailnavigation {
  position: sticky;
  top: 0;
  z-index: 999999;
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  padding: 8px clamp(16px, 4vw, 120px);
  will-change: top, transform;
  transition: none;
}

/* ---------- Pill container ---------- */
.navigatebox {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 753px;
  border-radius: var(--nav-radius-outer);
  border: 1px solid var(--nav-border);
  background: var(--nav-bg);
  padding: 6px;
  gap: 4px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.navigatebox::-webkit-scrollbar {
  display: none;
}

.navtab-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 0;
  /* set by JS */
  border-radius: var(--nav-radius-inner);
  background: var(--nav-gradient);
  transition:
    left 0.35s cubic-bezier(0.65, 0.05, 0.36, 1),
    width 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
  z-index: 0;
  pointer-events: none;
}

/* Skip the slide animation for the very first paint so it doesn't
   fly in from the left edge before JS has measured the real tab. */
.navigatebox.no-indicator-transition .navtab-indicator {
  transition: none;
}

/* ---------- Individual tab ---------- */
.navtab {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 40px;
  padding: 0 clamp(14px, 2.5vw, 48px);
  border: none;
  border-radius: var(--nav-radius-inner);
  background: transparent;
  cursor: pointer;
  transition:
    background 0.3s ease,
    transform 0.15s ease;
}

.navtab:hover {
  background: rgba(225, 37, 27, 0.08);
}

.navtab.active {
  background: var(--nav-gradient);
}

.navtab.active:hover {
  transform: none;
  background: transparent;
}

.navtabtext {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1.6vw, 15px);
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--nav-text-inactive);
  transition: color 0.3s ease;
}

.navtab.active .navtabtext {
  color: var(--nav-text-active);
}

/* ---------- Demo section content (replace with real sections) ---------- */
.page-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px 120px;
}

.retail-section {
  scroll-margin-top: calc(var(--nav-height) + 16px);
  /* keeps heading visible below sticky nav on jump */
  padding: 60px 0;
  border-bottom: 1px solid #eee;
}

.retail-section h2 {
  font-size: clamp(22px, 3vw, 32px);
  margin-bottom: 16px;
}

.demo-card {
  background: var(--nav-gradient);
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  font-size: 15px;
  line-height: 1.6;
}

/* =========================================================
   Breakpoints
   ========================================================= */

/* Mobile: <576px — tighter padding, smaller pill, allow scroll */
@media (max-width: 575px) {
  .retailnavigation {
    padding: 8px 12px;
  }

  .navigatebox {
    padding: 4px;
    border-radius: 40px;
  }

  .navtab {
    height: 36px;
    padding: 0 16px;
    border-radius: 24px;
  }

  .navtabtext {
    font-size: 12px;
  }
}

/* Large mobile / small tablet: 576–767px */
@media (min-width: 576px) and (max-width: 767px) {
  .navtab {
    height: 38px;
    padding: 0 20px;
  }
}

/* Tablet: 768–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .retailnavigation {
    padding: 8px 40px;
  }

  .navigatebox {
    max-width: 620px;
  }
}

/* Desktop: 1024–1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .retailnavigation {
    padding: 8px 80px;
  }

  .navigatebox {
    max-width: 700px;
  }
}

/* Large desktop: 1440px and above — matches the original spec exactly */
@media (min-width: 1440px) {
  .retailnavigation {
    padding: 8px 120px;
	padding-top: 30px;
  }

  .navigatebox {
    /* max-width: 753px; */
    max-width: 780px;
  }

  .navtab {
    padding: 0 48px;
  }

  .navtabtext {
    font-size: 15px;
  }
}

/*====================================================================== Great Location section code css ================================= */
/* =====================================================
                GREAT LOCATIONS
===================================================== */
.greatlocationbg {
  width: 100%;
  background: #fff;
  padding: 80px 0;
}

.greatlocationbg .container {
  max-width: 1440px;
  margin: auto;
  padding: 0 100px;
}

/* =====================================================
                    TITLE
===================================================== */

.greatlocationtext {
  display: block;
  text-align: center;

  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #333;

  margin-bottom: 20px;
}

/* =====================================================
                SLIDER
===================================================== */

.location-slider {
  position: relative;

  width: 100%;
  height: 600px;

  overflow: hidden;

  border-radius: 32px;
}

/* =====================================================
                IMAGE
===================================================== */

.location-image-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 32px;
  position: relative;
}

.location-image-wrapper img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}

/* =====================================================
                ORANGE CARD
===================================================== */

.location-card {
  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 500px;

  min-height: 360px;

  padding: 48px;

  border-radius: 0 32px 32px 0;

  background: linear-gradient(180deg, #f37021 0%, #e1251b 100%);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: center;

  color: #fff;

  z-index: 5;
}

/* =====================================================
                PLUS ICON
===================================================== */

.locationplusicon {
  position: absolute;
  width: 620px;
  left: -180px;
  top: -140px;
  opacity: 0.12;
  pointer-events: none;
}

/* =====================================================
                CONTENT
===================================================== */

.location-content {
  position: relative;

  z-index: 2;
}

.location-content h3 {
  font-family: "Inter", sans-serif;

  font-size: 36px;

  font-weight: 700;

  line-height: 1.15;

  margin-bottom: 24px;

  color: #fff;
}

.location-content p {
  font-family: "Inter", sans-serif;

  font-size: 15px;

  line-height: 1.75;

  color: rgba(255, 255, 255, 0.96);
}

/* =====================================================
                PAGINATION
===================================================== */

.locationpagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.locationpagination button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #777;
  background: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.35s;
}

/* .locationpagination button:hover {
  background: #e1251b;

  border-color: #e1251b;
} */

.locationpagination button img {
  width: 18px;

  transition: 0.35s;
}

#locationNext img {
  transform: rotate(180deg);
}

/* .locationpagination button:hover img {
  filter: brightness(0) invert(1);
} */

#locationCounter {
  font-family: "Inter";

  font-size: 15px;

  font-weight: 600;

  color: #666;
}

/* =====================================================
                IMAGE ANIMATION
===================================================== */

/* =====================================================
          GSAP SMOOTH SLIDE ANIMATION
===================================================== */

/* Main image */
.location-image-wrapper > img {
  position: relative;
  z-index: 1;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  will-change: transform, opacity;
}

/* Incoming image created by GSAP */
.location-image-incoming {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  z-index: 3;

  will-change: transform, opacity;
}

/* =====================================================
              CONTENT PERFORMANCE
===================================================== */

.location-content h3,
.location-content p,
.locationpagination {
  will-change: transform, opacity;
}

/* =====================================================
                COUNTER
===================================================== */

#locationCounter {
  will-change: transform, opacity;
}

/* .locationpagination button {
  position: relative;

  overflow: hidden;
}

.locationpagination button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e1251b;
  border-radius: 50%;
  transform: scale(0);
  transition: 0.35s;
}

.locationpagination button:hover::before {
  transform: scale(1);
}

.locationpagination button img {
  position: relative;
  z-index: 2;
} */
.location-image-incoming {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
}

@media (max-width: 2560px) {
  .greatlocationbg .conatainer {
    min-width: 1600px;
  }
}

/* ==========================================
   1400px
========================================== */

@media (max-width: 1400px) {
  .greatlocationbg .container {
    padding: 0 60px;
  }

  .location-slider {
    height: 560px;
  }

  .location-card {
    width: 460px;
    min-height: 340px;
    padding: 40px;
  }

  .location-content h3 {
    font-size: 36px;
  }
}

/* ==========================================
   1200px
========================================== */

@media (max-width: 1200px) {
  .greatlocationbg {
    padding: 70px 0;
  }

  .greatlocationbg .container {
    padding: 0 40px;
  }

  .location-slider {
    height: 520px;
  }

  .location-card {
    width: 420px;
    min-height: 320px;
    padding: 34px;
  }

  .location-content h3 {
    font-size: 34px;
  }

  .location-content p {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* ==========================================
   992px
========================================== */

@media (max-width: 992px) {
  .greatlocationbg .container {
    padding: 0 24px;
  }

  .location-slider {
    height: 460px;
  }

  .location-card {
    width: 360px;

    min-height: 280px;

    padding: 28px;
  }

  .location-content h3 {
    font-size: 30px;

    margin-bottom: 18px;
  }

  .location-content p {
    font-size: 15px;
  }
}

/* ==========================================
   768px
========================================== */

@media (max-width: 768px) {
  .greatlocationbg {
    padding: 60px 0;
  }

  .greatlocationtext {
    font-size: 38px;

    margin-bottom: 36px;
  }

  .greatlocationbg .container {
    padding: 0 18px;
  }

  .location-slider {
    height: auto;

    display: flex;

    flex-direction: column;

    border-radius: 24px;
  }

  .location-image-wrapper {
    height: 320px;

    border-radius: 24px 24px 0 0;
  }

  .location-card {
    position: relative;

    top: auto;

    left: auto;

    transform: none;

    width: 100%;

    min-height: auto;

    border-radius: 0 0 24px 24px;

    padding: 30px 24px;
  }

  .locationplusicon {
    width: 420px;

    left: -110px;

    top: -80px;
  }

  .location-content h3 {
    font-size: 28px;
  }

  .location-content p {
    font-size: 15px;

    line-height: 1.7;
  }

  .locationpagination {
    margin-top: 24px;
  }
}

/* ==========================================
   576px
========================================== */

@media (max-width: 576px) {
  .greatlocationbg {
    padding: 48px 0;
  }

  .greatlocationtext {
    font-size: 30px;

    margin-bottom: 28px;
  }

  .greatlocationbg .container {
    padding: 0 16px;
  }

  .location-image-wrapper {
    height: 240px;
  }

  .location-card {
    padding: 24px 20px;

    border-radius: 0 0 20px 20px;
  }

  .location-slider {
    border-radius: 20px;
  }

  .location-image-wrapper {
    border-radius: 20px 20px 0 0;
  }

  .location-content h3 {
    font-size: 24px;

    line-height: 1.25;

    margin-bottom: 16px;
  }

  .location-content p {
    font-size: 14px;

    line-height: 1.6;
  }

  .locationplusicon {
    width: 320px;

    left: -90px;

    top: -60px;
  }

  .locationpagination {
    gap: 10px;
  }

  .locationpagination button {
    width: 42px;

    height: 42px;
  }
}

/*================================================================= Great Brands section code css============================================================== */
/* ======================================================
                GREAT BRANDS
====================================================== */

.greatbrandsbg {
  max-width: 1440px;
  width: 100%;
  /* margin: auto; */
  padding: 80px 120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
  background: #fff;
}

.greatbrandscolumns1,
.greatbrandscolumns2,
.greatbrandscolumns3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.retailbrandstext {
  display: block;
  margin-bottom: 8px;
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #333;
}

.leftlondisbox,
.leftcostabox,
.leftConveniencebox,
.middlebudgensbox,
.middlefifobox,
.middlebrandimage6,
.rightadbluebox,
.rightairservbox,
.rightmorrisonsbox {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: #ddd;
}

.brandimage1,
.brandimage2,
.brandimage3,
.brandimage4,
.brandimage5,
.brandimage6,
.brandimage7,
.brandimage8,
.brandimage9 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: 0.45s;
}

.leftlondisbox:hover img,
.leftcostabox:hover img,
.leftConveniencebox:hover img,
.middlebudgensbox:hover img,
.middlefifobox:hover img,
.middlebrandimage6:hover img,
.rightadbluebox:hover img,
.rightairservbox:hover img,
.rightmorrisonsbox:hover img {
  transform: scale(1.05);
}

.leftlondisbox {
  height: 360px;
}

.leftcostabox {
  height: 290px;
}

.leftConveniencebox {
  height: 330px;
}

.middlebudgensbox {
  height: 390px;
}

.middlefifobox {
  height: 300px;
}

.middlebrandimage6 {
  height: 350px;
}

.rightadbluebox {
  height: 390px;
}

.rightairservbox {
  height: 300px;
}

.rightmorrisonsbox {
  height: 330px;
}

.retaillondisicon,
.retailcostaicon,
.retailconvenienceicon,
.retailbudgensicon,
.retailfifoicon,
.retailadblueicon,
.retailairservicon,
.retailmorrisonsicon {
  /* position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  max-width: 70%;
  z-index: 3; */

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  max-width: 65%;
  z-index: 5;
  transition: 0.35s ease;
}

/* =====================================================
                IMAGE CARDS
===================================================== */

.leftlondisbox,
.leftcostabox,
.leftConveniencebox,
.middlebudgensbox,
.middlefifobox,
.middlebrandimage6,
.rightadbluebox,
.rightairservbox,
.rightmorrisonsbox {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: #f4f4f4;
  cursor: pointer;
  transition: 0.35s ease;
}

/* Hover */

.leftlondisbox:hover,
.leftcostabox:hover,
.leftConveniencebox:hover,
.middlebudgensbox:hover,
.middlefifobox:hover,
.middlebrandimage6:hover,
.rightadbluebox:hover,
.rightairservbox:hover,
.rightmorrisonsbox:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

.leftlondisbox {
  height: 390px;
}

.leftcostabox {
  height: 260px;
}

.leftConveniencebox {
  height: 300px;
}

.middlebudgensbox {
  height: 380px;
}

.middlefifobox {
  height: 290px;
}

.middlebrandimage6 {
  height: 360px;
}

.rightadbluebox {
  height: 380px;
}

.rightairservbox {
  height: 290px;
}

.rightmorrisonsbox {
  height: 360px;
}

.brandimage1,
.brandimage2,
.brandimage3,
.brandimage4,
.brandimage5,
.brandimage6,
.brandimage7,
.brandimage8,
.brandimage9 {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.leftlondisbox:hover .brandimage1,
.leftcostabox:hover .brandimage2,
.leftConveniencebox:hover .brandimage3,
.middlebudgensbox:hover .brandimage4,
.middlefifobox:hover .brandimage5,
.middlebrandimage6:hover .brandimage6,
.rightadbluebox:hover .brandimage7,
.rightairservbox:hover .brandimage8,
.rightmorrisonsbox:hover .brandimage9 {
  transform: scale(1.08);
}

.leftlondisbox:hover .retaillondisicon,
.leftcostabox:hover .retailcostaicon,
.leftConveniencebox:hover .retailconvenienceicon,
.middlebudgensbox:hover .retailbudgensicon,
.middlefifobox:hover .retailfifoicon,
.rightadbluebox:hover .retailadblueicon,
.rightairservbox:hover .retailairservicon,
.rightmorrisonsbox:hover .retailmorrisonsicon {
  transform: translate(-50%, -50%) scale(1.05);
}

.leftlondisbox::after,
.leftcostabox::after,
.leftConveniencebox::after,
.middlebudgensbox::after,
.middlefifobox::after,
.middlebrandimage6::after,
.rightadbluebox::after,
.rightairservbox::after,
.rightmorrisonsbox::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* =====================================================
                ORANGE CONTENT CARDS
===================================================== */

.journeybox,
.forecourtsbox,
.quickstopbox,
.handytechbox,
.washmebox,
.topadbluebox,
.tyrecarebox,
.growingfoodbox,
.aboutcoffee,
.carcarebox {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, #f37021 0%, #e1251b 100%);
  color: #fff;
  display: flex;
  align-items: flex-start;
  transition: 0.35s ease;
}

.forecourtsbox {
  min-height: 220px;
}

.quickstopbox {
  min-height: 180px;
}

.washmebox {
  min-height: 190px;
}

.topadbluebox {
  min-height: 260px;
}

.journeybox {
  min-height: 280px;
}

.aboutcoffee {
  min-height: 300px;
}

.carcarebox {
  min-height: 300px;
}

.handytechbox {
  min-height: 330px;
}

.tyrecarebox {
  min-height: 310px;
}

.growingfoodbox {
  min-height: 360px;
}

.journeyinfo,
.forecourtsinfo,
.quickstopinfo,
.handytechinfo,
.washmeinfo,
.topadblueinfo,
.tyrecareinfo,
.growingfoodinfo,
.aboutcoffeeinfo,
.carcareinfo {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px;
  width: 100%;
}

.journeytitle,
.forecourtstitle,
.quickstoptitle,
.handytechtitle,
.washmetitle,
.topadbluetitle,
.tyrecaretitle,
.growingfoodtitle,
.aboutcoffeetitle,
.carcaretitle {
  font-family: "Inter", sans-serif;

  font-size: 28px;

  font-weight: 700;

  line-height: 1.25;

  color: #fff;
}

.journeydesc,
.forecourtsdesc,
.quickstopdesc,
.handytechdesc,
.washmedesc,
.topadbluedesc,
.tyrecaredesc,
.growingfooddesc,
.aboutcoffeedesc,
.carcaredesc {
  font-family: "Inter", sans-serif;

  font-size: 15px;

  line-height: 1.7;

  font-weight: 400;

  color: rgba(255, 255, 255, 0.95);
}

.bubbleimage {
  position: absolute;

  right: -80px;

  bottom: -80px;

  width: 260px;

  opacity: 0.1;

  pointer-events: none;

  z-index: 1;
}

.journeyboxbg,
.forecourtsbg,
.quickstopbg,
.handytechbg,
.washmebg,
.topadbluebg,
.tyrecarebg,
.growingfoodbg,
.aboutcoffeebg,
.carcarebg {
  display: none;
}

.journeybox:hover .journeytitle,
.forecourtsbox:hover .forecourtstitle,
.quickstopbox:hover .quickstoptitle,
.handytechbox:hover .handytechtitle,
.washmebox:hover .washmetitle,
.topadbluebox:hover .topadbluetitle,
.tyrecarebox:hover .tyrecaretitle,
.growingfoodbox:hover .growingfoodtitle,
.aboutcoffee:hover .aboutcoffeetitle,
.carcarebox:hover .carcaretitle {
  transform: translateY(-2px);
  transition: 0.3s;
}

/* =====================================================
                SHINE HOVER EFFECT
===================================================== */

.leftlondisbox::before,
.leftcostabox::before,
.leftConveniencebox::before,
.middlebudgensbox::before,
.middlefifobox::before,
.middlebrandimage6::before,
.rightadbluebox::before,
.rightairservbox::before,
.rightmorrisonsbox::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;

  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );

  transform: skewX(-20deg);
  z-index: 4;
  pointer-events: none;
}

.leftlondisbox:hover::before,
.leftcostabox:hover::before,
.leftConveniencebox:hover::before,
.middlebudgensbox:hover::before,
.middlefifobox:hover::before,
.middlebrandimage6:hover::before,
.rightadbluebox:hover::before,
.rightairservbox:hover::before,
.rightmorrisonsbox:hover::before {
  animation: shineSweep 0.9s ease;
}

@keyframes shineSweep {
  from {
    left: -150%;
  }

  to {
    left: 150%;
  }
}

/* =====================================================
   FIX: REMOVE EXTRA WHITE SPACE BELOW GREAT BRANDS
   ===================================================== */

.greatbrandsbg {
  height: auto;
  min-height: 0;
  box-sizing: border-box;
}

/* ============================================
            LARGE DESKTOP
============================================ */

/* =========================================================
   LARGE DESKTOP — 1600px+
   ========================================================= */

/* @media (min-width: 1600px) {
  .greatbrandsbg {
    width: 100%;
    max-width: 1600px;
    box-sizing: border-box;

    gap: 32px;
    min-height: 2634px;
  }

  .greatbrandscolumns1,
  .greatbrandscolumns2,
  .greatbrandscolumns3 {
    width: 100%;
    min-width: 0;
  }

  .leftlondisbox,
  .leftcostabox,
  .leftConveniencebox,
  .middlebudgensbox,
  .middlefifobox,
  .middlebrandimage6,
  .rightadbluebox,
  .rightairservbox,
  .rightmorrisonsbox,
  .journeybox,
  .forecourtsbox,
  .quickstopbox,
  .handytechbox,
  .washmebox,
  .topadbluebox,
  .tyrecarebox,
  .growingfoodbox,
  .aboutcoffee,
  .carcarebox {
    width: 100%;
    box-sizing: border-box;
  }

  .leftlondisbox,
  .leftcostabox,
  .middlefifobox,
  .rightairservbox {
    height: 400px;
  }

  .journeyinfo,
  .carcareinfo,
  .tyrecarebox {
    height: 338px;
  }

  .aboutcoffeeinfo {
    height: 352px;
  }

  .leftConveniencebox,
  .middlebudgensbox,
  .rightadbluebox,
  .middlebrandimage6,
  .rightmorrisonsbox {
    height: 500px;
  }

  .forecourtsinfo {
    height: 272px;
  }

  .quickstopinfo {
    height: 260px;
  }

  .handytechinfo {
    height: 374px;
  }

  .washmebox {
    height: 232px;
  }

  .topadbluebox {
    height: 316px;
  }

  .growingfoodbox {
    height: 393px;
  }
} */
/* =====================================================
   LARGE DESKTOP - 1441px AND ABOVE
   FIX: Keep exact 389px column/card width
===================================================== */

@media (min-width: 1441px) {
  .greatbrandsbg {
    /*
         * FIX 1:
         * Allow the section to use the available viewport width.
         * box-sizing prevents padding from increasing the actual
         * width beyond the viewport.
         */
    width: 100%;
    max-width: 1600px;
    box-sizing: border-box;

    /*
         * FIX 2:
         * IMPORTANT:
         * Do NOT use 1fr here.
         * We want exactly 389px for each column.
         */
    grid-template-columns: repeat(3, 389px);
    /* gap: 32px; */
    justify-content: center;
    padding: 100px 0;
    min-height: auto;
  }

  /* =================================================
       COLUMN WIDTH
    ================================================= */

  .greatbrandscolumns1,
  .greatbrandscolumns2,
  .greatbrandscolumns3 {
    width: 389px;
    min-width: 389px;
    max-width: 389px;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  /* =================================================
       ALL IMAGE CARDS
    ================================================= */

  .leftlondisbox,
  .leftcostabox,
  .leftConveniencebox,
  .middlebudgensbox,
  .middlefifobox,
  .middlebrandimage6,
  .rightadbluebox,
  .rightairservbox,
  .rightmorrisonsbox {
    /*
         * FIX 6:
         * Every image card stays exactly 389px wide.
         */
    width: 389px;
    min-width: 389px;
    max-width: 389px;

    box-sizing: border-box;
  }

  /* =================================================
       ALL ORANGE CONTENT CARDS
    ================================================= */

  .journeybox,
  .forecourtsbox,
  .quickstopbox,
  .handytechbox,
  .washmebox,
  .topadbluebox,
  .tyrecarebox,
  .growingfoodbox,
  .aboutcoffee,
  .carcarebox {
    /*
         * FIX 7:
         * Keep orange cards aligned with image cards.
         */
    width: 389px;
    min-width: 389px;
    max-width: 389px;

    box-sizing: border-box;
  }

  /* =================================================
       KEEP YOUR ORIGINAL HEIGHTS
    ================================================= */

  .leftlondisbox,
  .leftcostabox,
  .middlefifobox,
  .rightairservbox {
    height: 400px;
  }

  .journeyinfo,
  .carcareinfo,
  .tyrecarebox {
    height: 338px;
  }

  .aboutcoffeeinfo {
    height: 352px;
  }

  .leftConveniencebox,
  .middlebudgensbox,
  .rightadbluebox,
  .middlebrandimage6,
  .rightmorrisonsbox {
    height: 500px;
  }

  .forecourtsinfo {
    height: 272px;
  }

  .quickstopinfo {
    height: 260px;
  }

  .handytechinfo {
    height: 374px;
  }

  .washmebox {
    height: 232px;
  }

  .topadbluebox {
    height: 316px;
  }

  .growingfoodbox {
    height: 393px;
  }

  /* =================================================
       THIRD COLUMN OFFSET
    ================================================= */

  .greatbrandscolumns3 {
    position: relative;
    top: 60px;
  }
}

/* ============================================
                1440px
============================================ */

@media (max-width: 1440px) {
  .greatbrandsbg {
    padding: 80px 120px;
    min-height: 2634px;
  }

  .journeytitle,
  .forecourtstitle,
  .quickstoptitle,
  .handytechtitle,
  .washmetitle,
  .topadbluetitle,
  .tyrecaretitle,
  .growingfoodtitle,
  .aboutcoffeetitle,
  .carcaretitle {
    font-size: 28px;
  }

  .leftlondisbox,
  .journeyinfo,
  .leftcostabox,
  .aboutcoffeeinfo,
  .leftConveniencebox,
  .carcareinfo,
  .forecourtsinfo,
  .middlebudgensbox,
  .quickstopinfo,
  .middlefifobox,
  .handytechinfo,
  .middlebrandimage6,
  .washmebox,
  .rightadbluebox,
  .topadbluebox,
  .rightairservbox,
  .tyrecarebox,
  .rightmorrisonsbox,
  .growingfoodbox {
    width: 389px;
  }

  .leftlondisbox,
  .leftcostabox,
  .middlefifobox,
  .rightairservbox {
    height: 400px;
  }

  .journeyinfo,
  .carcareinfo,
  .tyrecarebox {
    height: 338px;
  }

  .aboutcoffeeinfo {
    height: 352px;
  }

  .leftConveniencebox,
  .middlebudgensbox,
  .rightadbluebox,
  .middlebrandimage6,
  .rightmorrisonsbox {
    height: 500px;
  }

  .forecourtsinfo {
    height: 272px;
  }

  .quickstopinfo {
    height: 260px;
  }

  .handytechinfo {
    height: 374px;
  }

  .washmebox {
    height: 232px;
  }

  .topadbluebox {
    height: 316px;
  }

  .growingfoodbox {
    height: 393px;
  }

  /* This one was originally 390px, so it remains unchanged */
  .leftcostabox {
    width: 390px;
  }
}

/* ============================================
                1200px
============================================ */

@media (max-width: 1200px) {
  .greatbrandsbg {
    padding: 70px 40px;

    gap: 18px;
  }

  .greatbrandscolumns1,
  .greatbrandscolumns2,
  .greatbrandscolumns3 {
    gap: 18px;
  }

  .retailbrandstext {
    font-size: 32px;
  }

  .journeyinfo,
  .forecourtsinfo,
  .quickstopinfo,
  .handytechinfo,
  .washmeinfo,
  .topadblueinfo,
  .tyrecareinfo,
  .growingfoodinfo,
  .aboutcoffeeinfo,
  .carcareinfo {
    padding: 28px;
  }
}

/* ============================================
                1024px
============================================ */

/* @media (max-width: 1024px) {
  .greatbrandsbg {
    grid-template-columns: repeat(3, 1fr);

    padding: 60px 30px;
  }

  .greatbrandscolumns3 {
    padding-top: 0;
  }
} */
/* =====================================================
   1024px ONLY
   FIX: 3 columns fitting correctly
   Does NOT affect 1440px or 1441px+
===================================================== */

@media (min-width: 1024px) and (max-width: 1199px) {
  .greatbrandsbg {
    width: 100%;
    box-sizing: border-box;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    padding-left: 30px;
    padding-right: 30px;

    overflow: hidden;
  }

  .greatbrandscolumns1,
  .greatbrandscolumns2,
  .greatbrandscolumns3 {
    width: 100%;
    min-width: 0;
    max-width: none;

    box-sizing: border-box;
  }

  .leftlondisbox,
  .leftcostabox,
  .leftConveniencebox,
  .middlebudgensbox,
  .middlefifobox,
  .middlebrandimage6,
  .rightadbluebox,
  .rightairservbox,
  .rightmorrisonsbox {
    width: 100%;
    min-width: 0;
    max-width: none;

    box-sizing: border-box;
  }

  .journeybox,
  .forecourtsbox,
  .quickstopbox,
  .handytechbox,
  .washmebox,
  .topadbluebox,
  .tyrecarebox,
  .growingfoodbox,
  .aboutcoffee,
  .carcarebox {
    width: 100%;
    min-width: 0;
    max-width: none;

    box-sizing: border-box;
  }

  .greatbrandscolumns3 {
    top: 0 !important;
  }
}

/* ============================================
                TABLET
============================================ */

/* @media (max-width: 768px) {
  .greatbrandsbg {
    grid-template-columns: 1fr;

    padding: 50px 24px;

    gap: 24px;
  }

  .greatbrandscolumns1,
  .greatbrandscolumns2,
  .greatbrandscolumns3 {
    gap: 24px;
  }

  .retailbrandstext {
    font-size: 30px;

    text-align: center;
  }

  .journeytitle,
  .forecourtstitle,
  .quickstoptitle,
  .handytechtitle,
  .washmetitle,
  .topadbluetitle,
  .tyrecaretitle,
  .growingfoodtitle,
  .aboutcoffeetitle,
  .carcaretitle {
    font-size: 24px;
  }

  .journeydesc,
  .forecourtsdesc,
  .quickstopdesc,
  .handytechdesc,
  .washmedesc,
  .topadbluedesc,
  .tyrecaredesc,
  .growingfooddesc,
  .aboutcoffeedesc,
  .carcaredesc {
    font-size: 15px;
  }

  .retaillondisicon,
  .retailcostaicon,
  .retailconvenienceicon,
  .retailbudgensicon,
  .retailfifoicon,
  .retailadblueicon,
  .retailairservicon,
  .retailmorrisonsicon {
    width: 150px;
  }
} */
/* =====================================================
   TABLET FIX
   768px - 1023px ONLY

   Does NOT affect:
   - 1024px
   - 1440px
   - 1441px+
===================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* ================================================
       MAIN GRID
    ================================================ */

  .greatbrandsbg {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    /*
         * Keep 3 columns but make them responsive.
         */
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;

    padding: 50px 24px;

    overflow: hidden;
  }

  /* ================================================
       COLUMNS
    ================================================ */

  .greatbrandscolumns1,
  .greatbrandscolumns2,
  .greatbrandscolumns3 {
    width: 100%;
    min-width: 0;
    max-width: none;

    gap: 14px;

    box-sizing: border-box;
  }

  /* ================================================
       REMOVE DESKTOP THIRD COLUMN OFFSET
    ================================================ */

  .greatbrandscolumns3 {
    top: 0 !important;
  }

  /* ================================================
       IMAGE CARDS
    ================================================ */

  .leftlondisbox,
  .leftcostabox,
  .leftConveniencebox,
  .middlebudgensbox,
  .middlefifobox,
  .middlebrandimage6,
  .rightadbluebox,
  .rightairservbox,
  .rightmorrisonsbox {
    width: 100%;
    min-width: 0;
    max-width: none;

    box-sizing: border-box;

    /*
         * Don't allow the desktop fixed widths
         * to break the tablet grid.
         */
    flex-shrink: 1;
  }

  /* ================================================
       ORANGE CARDS
    ================================================ */

  .journeybox,
  .forecourtsbox,
  .quickstopbox,
  .handytechbox,
  .washmebox,
  .topadbluebox,
  .tyrecarebox,
  .growingfoodbox,
  .aboutcoffee,
  .carcarebox {
    width: 100%;
    min-width: 0;
    max-width: none;

    box-sizing: border-box;

    flex-shrink: 1;
  }

  /* ================================================
       CARD HEIGHTS
       Reduced slightly so the tablet doesn't become
       unnecessarily tall.
    ================================================ */

  .leftlondisbox {
    height: 300px;
  }

  .leftcostabox {
    height: 220px;
  }

  .leftConveniencebox {
    height: 260px;
  }

  .middlebudgensbox {
    height: 300px;
  }

  .middlefifobox {
    height: 220px;
  }

  .middlebrandimage6 {
    height: 280px;
  }

  .rightadbluebox {
    height: 300px;
  }

  .rightairservbox {
    height: 220px;
  }

  .rightmorrisonsbox {
    height: 280px;
  }

  /* ================================================
       ORANGE CONTENT CARD HEIGHTS
    ================================================ */

  .journeybox {
    min-height: 220px;
  }

  .forecourtsbox {
    min-height: 180px;
  }

  .quickstopbox {
    min-height: 160px;
  }

  .handytechbox {
    min-height: 260px;
  }

  .washmebox {
    min-height: 170px;
  }

  .topadbluebox {
    min-height: 220px;
  }

  .tyrecarebox {
    min-height: 250px;
  }

  .growingfoodbox {
    min-height: 280px;
  }

  .aboutcoffee {
    min-height: 230px;
  }

  .carcarebox {
    min-height: 230px;
  }

  /* ================================================
       CONTENT PADDING
    ================================================ */

  .journeyinfo,
  .forecourtsinfo,
  .quickstopinfo,
  .handytechinfo,
  .washmeinfo,
  .topadblueinfo,
  .tyrecareinfo,
  .growingfoodinfo,
  .aboutcoffeeinfo,
  .carcareinfo {
    padding: 20px;

    gap: 12px;

    box-sizing: border-box;
  }

  /* ================================================
       TITLES
    ================================================ */

  .journeytitle,
  .forecourtstitle,
  .quickstoptitle,
  .handytechtitle,
  .washmetitle,
  .topadbluetitle,
  .tyrecaretitle,
  .growingfoodtitle,
  .aboutcoffeetitle,
  .carcaretitle {
    font-size: 18px;

    line-height: 1.25;
  }

  /* ================================================
       DESCRIPTION
    ================================================ */

  .journeydesc,
  .forecourtsdesc,
  .quickstopdesc,
  .handytechdesc,
  .washmedesc,
  .topadbluedesc,
  .tyrecaredesc,
  .growingfooddesc,
  .aboutcoffeedesc,
  .carcaredesc {
    font-size: 12px;

    line-height: 1.5;
  }

  /* ================================================
       BRAND ICONS
    ================================================ */

  .retaillondisicon,
  .retailcostaicon,
  .retailconvenienceicon,
  .retailbudgensicon,
  .retailfifoicon,
  .retailadblueicon,
  .retailairservicon,
  .retailmorrisonsicon {
    width: 110px;
    max-width: 65%;
  }

  /* ================================================
       SECTION TITLE
    ================================================ */

  .retailbrandstext {
    font-size: 26px;
    margin-bottom: 4px;
  }

  /* ================================================
       BUBBLE
    ================================================ */

  .bubbleimage {
    width: 180px;
    right: -60px;
    bottom: -60px;
  }

  .greatbrandsbg {
    height: auto;
    min-height: 0;
    box-sizing: border-box;
  }

  .journeydesc,
  .forecourtsdesc,
  .quickstopdesc,
  .handytechdesc,
  .washmedesc,
  .topadbluedesc,
  .tyrecaredesc,
  .growingfooddesc,
  .aboutcoffeedesc,
  .carcaredesc {
    font-size: 13px;
    line-height: 1.5;
  }

  .journeytitle,
  .forecourtstitle,
  .quickstoptitle,
  .handytechtitle,
  .washmetitle,
  .topadbluetitle,
  .tyrecaretitle,
  .growingfoodtitle,
  .aboutcoffeetitle,
  .carcaretitle {
    font-size: 19px;
    line-height: 1.25;
  }
}

/* ============================================
                MOBILE
============================================ */

/* @media (max-width: 576px) {
  .greatbrandsbg {
    padding: 40px 16px;
  }

  .retailbrandstext {
    font-size: 28px;
  }

  .leftlondisbox,
  .leftcostabox,
  .leftConveniencebox,
  .middlebudgensbox,
  .middlefifobox,
  .middlebrandimage6,
  .rightadbluebox,
  .rightairservbox,
  .rightmorrisonsbox {
    height: 260px;
  }

  .journeyinfo,
  .forecourtsinfo,
  .quickstopinfo,
  .handytechinfo,
  .washmeinfo,
  .topadblueinfo,
  .tyrecareinfo,
  .growingfoodinfo,
  .aboutcoffeeinfo,
  .carcareinfo {
    padding: 24px;
  }

  .journeytitle,
  .forecourtstitle,
  .quickstoptitle,
  .handytechtitle,
  .washmetitle,
  .topadbluetitle,
  .tyrecaretitle,
  .growingfoodtitle,
  .aboutcoffeetitle,
  .carcaretitle {
    font-size: 22px;
  }

  .journeydesc,
  .forecourtsdesc,
  .quickstopdesc,
  .handytechdesc,
  .washmedesc,
  .topadbluedesc,
  .tyrecaredesc,
  .growingfooddesc,
  .aboutcoffeedesc,
  .carcaredesc {
    font-size: 14px;

    line-height: 1.6;
  }

  .retaillondisicon,
  .retailcostaicon,
  .retailconvenienceicon,
  .retailbudgensicon,
  .retailfifoicon,
  .retailadblueicon,
  .retailairservicon,
  .retailmorrisonsicon {
    width: 130px;
  }

  .bubbleimage {
    width: 180px;

    right: -60px;

    bottom: -60px;
  }
}

@media (max-width: 375px) {
  .greatbrandsbg {
    padding: 32px 12px;
  }

  .retailbrandstext {
    font-size: 24px;
  }

  .journeytitle,
  .forecourtstitle,
  .quickstoptitle,
  .handytechtitle,
  .washmetitle,
  .topadbluetitle,
  .tyrecaretitle,
  .growingfoodtitle,
  .aboutcoffeetitle,
  .carcaretitle {
    font-size: 20px;
  }

  .journeyinfo,
  .forecourtsinfo,
  .quickstopinfo,
  .handytechinfo,
  .washmeinfo,
  .topadblueinfo,
  .tyrecareinfo,
  .growingfoodinfo,
  .aboutcoffeeinfo,
  .carcareinfo {
    padding: 20px;
  }

  .leftlondisbox,
  .leftcostabox,
  .leftConveniencebox,
  .middlebudgensbox,
  .middlefifobox,
  .middlebrandimage6,
  .rightadbluebox,
  .rightairservbox,
  .rightmorrisonsbox {
    height: 220px;
  }
} */
/* =========================================================
   GREAT BRANDS - MOBILE FIX
   ========================================================= */

@media (max-width: 768px) {
  /* -----------------------------------------------------
       MAIN CONTAINER
       FIX: Remove desktop width/height restrictions
    ----------------------------------------------------- */

  .greatbrandsbg {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;

    padding: 40px 16px;

    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;

    box-sizing: border-box;
  }

  /* -----------------------------------------------------
       COLUMNS
       FIX: All 3 desktop columns become normal full-width
       mobile sections
    ----------------------------------------------------- */

  .greatbrandscolumns1,
  .greatbrandscolumns2,
  .greatbrandscolumns3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;

    /* FIX: Remove desktop positioning */
    position: static !important;
    top: auto !important;
  }

  /* -----------------------------------------------------
       HEADING
    ----------------------------------------------------- */

  .retailbrandstext {
    display: block;
    width: 100%;

    margin-bottom: 4px;

    font-size: 26px;
    line-height: 1.2;
    text-align: left;
  }

  /* -----------------------------------------------------
       IMAGE CARDS
       FIX: No more 389px desktop width
    ----------------------------------------------------- */

  .leftlondisbox,
  .leftcostabox,
  .leftConveniencebox,
  .middlebudgensbox,
  .middlefifobox,
  .middlebrandimage6,
  .rightadbluebox,
  .rightairservbox,
  .rightmorrisonsbox {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    /* FIX: Override desktop fixed heights */
    height: 280px;
    min-height: 0;
  }

  /* -----------------------------------------------------
       INDIVIDUAL IMAGE CARD HEIGHTS
       FIX: Keep the masonry feeling on mobile
    ----------------------------------------------------- */

  .leftlondisbox,
  .middlebudgensbox,
  .rightadbluebox {
    height: 280px;
  }

  .leftcostabox,
  .middlefifobox,
  .rightairservbox {
    height: 260px;
  }

  .leftConveniencebox,
  .middlebrandimage6,
  .rightmorrisonsbox {
    height: 280px;
  }

  /* -----------------------------------------------------
       IMAGE
    ----------------------------------------------------- */

  .brandimage1,
  .brandimage2,
  .brandimage3,
  .brandimage4,
  .brandimage5,
  .brandimage6,
  .brandimage7,
  .brandimage8,
  .brandimage9 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* -----------------------------------------------------
       BRAND LOGOS
    ----------------------------------------------------- */

  .retaillondisicon,
  .retailcostaicon,
  .retailconvenienceicon,
  .retailbudgensicon,
  .retailfifoicon,
  .retailadblueicon,
  .retailairservicon,
  .retailmorrisonsicon {
    width: 130px;
    max-width: 60%;
  }

  /* -----------------------------------------------------
       ORANGE CONTENT CARDS
       FIX: Remove desktop fixed widths/heights
    ----------------------------------------------------- */

  .journeybox,
  .forecourtsbox,
  .quickstopbox,
  .handytechbox,
  .washmebox,
  .topadbluebox,
  .tyrecarebox,
  .growingfoodbox,
  .aboutcoffee,
  .carcarebox {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    min-height: 0;
    height: auto;
  }

  /* -----------------------------------------------------
       CONTENT CARD HEIGHTS
    ----------------------------------------------------- */

  .journeybox {
    min-height: 280px;
  }

  .forecourtsbox {
    min-height: 220px;
  }

  .quickstopbox {
    min-height: 210px;
  }

  .handytechbox {
    min-height: 280px;
  }

  .washmebox {
    min-height: 210px;
  }

  .topadbluebox {
    min-height: 280px;
  }

  .tyrecarebox {
    min-height: 280px;
  }

  .growingfoodbox {
    min-height: 300px;
  }

  .aboutcoffee {
    min-height: 280px;
  }

  .carcarebox {
    min-height: 280px;
  }

  /* -----------------------------------------------------
       CONTENT PADDING
    ----------------------------------------------------- */

  .journeyinfo,
  .forecourtsinfo,
  .quickstopinfo,
  .handytechinfo,
  .washmeinfo,
  .topadblueinfo,
  .tyrecareinfo,
  .growingfoodinfo,
  .aboutcoffeeinfo,
  .carcareinfo {
    width: 100%;
    box-sizing: border-box;

    padding: 24px;

    gap: 12px;
  }

  /* -----------------------------------------------------
       TITLES
    ----------------------------------------------------- */

  .journeytitle,
  .forecourtstitle,
  .quickstoptitle,
  .handytechtitle,
  .washmetitle,
  .topadbluetitle,
  .tyrecaretitle,
  .growingfoodtitle,
  .aboutcoffeetitle,
  .carcaretitle {
    font-size: 22px;
    line-height: 1.25;
  }

  /* -----------------------------------------------------
       DESCRIPTION
    ----------------------------------------------------- */

  .journeydesc,
  .forecourtsdesc,
  .quickstopdesc,
  .handytechdesc,
  .washmedesc,
  .topadbluedesc,
  .tyrecaredesc,
  .growingfooddesc,
  .aboutcoffeedesc,
  .carcaredesc {
    font-size: 14px;
    line-height: 1.55;
  }

  /* -----------------------------------------------------
       BUBBLE
    ----------------------------------------------------- */

  .bubbleimage {
    width: 180px;
    right: -60px;
    bottom: -60px;
  }
}

/* =========================================================
   SMALL MOBILE
   <= 576px
   ========================================================= */

@media (max-width: 576px) {
  .greatbrandsbg {
    width: 100%;
    padding: 32px 16px;

    grid-template-columns: 1fr;
    gap: 20px;
  }

  .greatbrandscolumns1,
  .greatbrandscolumns2,
  .greatbrandscolumns3 {
    width: 100%;
    gap: 20px;
  }

  /* -----------------------------------------------------
       HEADING
    ----------------------------------------------------- */

  .retailbrandstext {
    font-size: 24px;
    margin-bottom: 2px;
  }

  /* -----------------------------------------------------
       IMAGE CARDS
    ----------------------------------------------------- */

  .leftlondisbox,
  .leftcostabox,
  .leftConveniencebox,
  .middlebudgensbox,
  .middlefifobox,
  .middlebrandimage6,
  .rightadbluebox,
  .rightairservbox,
  .rightmorrisonsbox {
    width: 100%;
    height: 240px;
    min-height: 0;
  }

  /* Slightly taller cards */
  .leftlondisbox,
  .middlebudgensbox,
  .rightadbluebox {
    height: 250px;
  }

  /* -----------------------------------------------------
       LOGOS
    ----------------------------------------------------- */

  .retaillondisicon,
  .retailcostaicon,
  .retailconvenienceicon,
  .retailbudgensicon,
  .retailfifoicon,
  .retailadblueicon,
  .retailairservicon,
  .retailmorrisonsicon {
    width: 115px;
    max-width: 58%;
  }

  /* -----------------------------------------------------
       ORANGE CARDS
    ----------------------------------------------------- */

  .journeybox,
  .aboutcoffee,
  .carcarebox {
    min-height: 260px;
  }

  .forecourtsbox,
  .quickstopbox,
  .washmebox {
    min-height: 210px;
  }

  .handytechbox,
  .topadbluebox,
  .tyrecarebox {
    min-height: 260px;
  }

  .growingfoodbox {
    min-height: 280px;
  }

  /* -----------------------------------------------------
       CONTENT
    ----------------------------------------------------- */

  .journeyinfo,
  .forecourtsinfo,
  .quickstopinfo,
  .handytechinfo,
  .washmeinfo,
  .topadblueinfo,
  .tyrecareinfo,
  .growingfoodinfo,
  .aboutcoffeeinfo,
  .carcareinfo {
    padding: 22px;
    gap: 10px;
  }

  .journeytitle,
  .forecourtstitle,
  .quickstoptitle,
  .handytechtitle,
  .washmetitle,
  .topadbluetitle,
  .tyrecaretitle,
  .growingfoodtitle,
  .aboutcoffeetitle,
  .carcaretitle {
    font-size: 24px;
    line-height: 1.25;
  }

  .journeydesc,
  .forecourtsdesc,
  .quickstopdesc,
  .handytechdesc,
  .washmedesc,
  .topadbluedesc,
  .tyrecaredesc,
  .growingfooddesc,
  .aboutcoffeedesc,
  .carcaredesc {
    font-size: 16px;
    line-height: 1.55;
  }

  .bubbleimage {
    width: 160px;
    right: -55px;
    bottom: -55px;
  }
}

/* =========================================================
   EXTRA SMALL MOBILE
   <= 375px
   ========================================================= */

@media (max-width: 375px) {
  .greatbrandsbg {
    padding: 28px 12px;
    gap: 18px;
  }

  .greatbrandscolumns1,
  .greatbrandscolumns2,
  .greatbrandscolumns3 {
    gap: 18px;
  }

  .retailbrandstext {
    font-size: 22px;
  }

  .leftlondisbox,
  .leftcostabox,
  .leftConveniencebox,
  .middlebudgensbox,
  .middlefifobox,
  .middlebrandimage6,
  .rightadbluebox,
  .rightairservbox,
  .rightmorrisonsbox {
    height: 220px;
  }

  .journeybox,
  .aboutcoffee,
  .carcarebox,
  .handytechbox,
  .topadbluebox,
  .tyrecarebox {
    min-height: 240px;
  }

  .forecourtsbox,
  .quickstopbox,
  .washmebox {
    min-height: 190px;
  }

  .growingfoodbox {
    min-height: 250px;
  }

  .journeyinfo,
  .forecourtsinfo,
  .quickstopinfo,
  .handytechinfo,
  .washmeinfo,
  .topadblueinfo,
  .tyrecareinfo,
  .growingfoodinfo,
  .aboutcoffeeinfo,
  .carcareinfo {
    padding: 20px;
  }

  .journeytitle,
  .forecourtstitle,
  .quickstoptitle,
  .handytechtitle,
  .washmetitle,
  .topadbluetitle,
  .tyrecaretitle,
  .growingfoodtitle,
  .aboutcoffeetitle,
  .carcaretitle {
    font-size: 19px;
  }

  .journeydesc,
  .forecourtsdesc,
  .quickstopdesc,
  .handytechdesc,
  .washmedesc,
  .topadbluedesc,
  .tyrecaredesc,
  .growingfooddesc,
  .aboutcoffeedesc,
  .carcaredesc {
    font-size: 12.5px;
    line-height: 1.5;
  }
}

/* ========================================================== great price section code css ================================================================================== */
/* ==========================================================
                    GREAT PRICES SECTION
========================================================== */

.great-prices {
  width: 100%;
  background: #ffffff;
}

.great-prices .container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ==========================================================
                    TITLE
========================================================== */

.great-prices-title {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #333333;
  text-align: center;
  margin-bottom: 50px;
}

/* ==========================================================
                    SLIDER
========================================================== */

.price-slider {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  /* border-radius: 32px; */
}

/* ==========================================================
                    SLIDES
========================================================== */

.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ==========================================
            SLIDE ANIMATION
========================================== */

.slide {
  position: absolute;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  transform: translateX(120px) scale(1.05);

  transition:
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.8s ease,
    visibility 0.8s;

  z-index: 1;
}

.slide.active {
  opacity: 1;

  visibility: visible;

  transform: translateX(0) scale(1);

  z-index: 5;
}

.slide.prev {
  opacity: 0;

  visibility: hidden;

  transform: translateX(-120px) scale(1.05);
}

/* .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
} */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transition: transform 6s linear; */
  transform: scale(1);
  transition: none;
}

.slide.active img {
  /* transform: scale(1.08); */
  transform: scale(1);
}

/* ==========================================================
                    ORANGE CARD
========================================================== */

.price-card {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  width: 510px;
  min-height: 420px;
  padding: 48px;
  border-radius: 32px;
  background: linear-gradient(180deg, #f37021 0%, #e1251b 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
  z-index: 10;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}

/* ==========================================================
                    PATTERN IMAGE
========================================================== */

.price-pattern {
  position: absolute;

  width: 320px;

  right: -90px;

  top: -30px;

  opacity: 0.12;

  pointer-events: none;
}

/* ==========================================================
                    CONTENT
========================================================== */

.price-content {
  position: relative;

  z-index: 2;
}

.price-content h3 {
  font-family: "Inter", sans-serif;

  font-size: 54px;

  font-weight: 700;

  line-height: 1.1;

  margin-bottom: 24px;
}

.price-content p {
  font-family: "Inter", sans-serif;

  font-size: 18px;

  line-height: 1.8;

  color: rgba(255, 255, 255, 0.95);
}

/* ==========================================================
                    ORANGE CARD CONTENT
========================================================== */

.price-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.price-content h3 {
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 24px;
  letter-spacing: -1.5px;
}

.price-content p {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  max-width: 410px;
}

/* ==========================================================
                    PAGINATION
========================================================== */

.price-pagination {
  display: flex;

  align-items: center;

  gap: 16px;

  margin-top: 40px;

  position: relative;

  z-index: 5;
}

.price-pagination button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.35s;
}

.price-pagination button img {
  width: 18px;

  transition: 0.35s;
}

#prevSlide img {
  transform: rotate(180deg);
}

.price-pagination button {
  overflow: hidden;

  position: relative;
}

.price-pagination button:hover::before {
  transform: scale(1);
}

.price-pagination button img {
  position: relative;

  z-index: 2;
}

.price-pagination button:hover img {
  filter: brightness(0);
}

.price-pagination button:active {
  transform: scale(0.92);
}

#slideCounter {
  min-width: 55px;

  text-align: center;

  font-family: "Inter", sans-serif;

  font-size: 18px;

  font-weight: 600;

  color: #ffffff;
}

/* ==========================================================
                    CARD PATTERN
========================================================== */

.price-pattern {
  position: absolute;

  right: -80px;

  top: -40px;

  width: 330px;

  opacity: 0.12;

  pointer-events: none;
}

/* ==========================================================
                    CARD ANIMATION
========================================================== */

/* .price-card {
  animation: cardFloat 6s ease-in-out infinite;
}

@keyframes cardFloat {
  0% {
    transform: translateY(-50%);
  }

  50% {
    transform: translateY(calc(-50% - 8px));
  }

  100% {
    transform: translateY(-50%);
  }
} */
.price-card {
  /* animation: floatCard 5s ease-in-out infinite; */
  animation: none;
}

.card-enter {
  /* animation: cardEnter 0.65s cubic-bezier(0.22, 0.61, 0.36, 1); */
  animation: cardEnter 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes cardEnter {
  from {
    opacity: 0;

    transform: translateY(-50%) translateX(80px);
  }

  to {
    opacity: 1;

    transform: translateY(-50%) translateX(0);
  }
}

@keyframes floatCard {
  0% {
    transform: translateY(-50%);
  }

  50% {
    transform: translateY(calc(-50% - 8px));
  }

  100% {
    transform: translateY(-50%);
  }
}

/* ==========================================================
                    CONTENT FADE
========================================================== */

.price-content h3,
.price-content p {
  transition: 0.45s;
}

/* .content-hide {
  opacity: 0;

  transform: translateY(20px);
}

.content-show {
  opacity: 1;

  transform: translateY(0);
} */
/* ==========================================
            TEXT ANIMATION
========================================== */

#fuelTitle1,
#fuelTitle2,
#fuelDescription {
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.content-show {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.content-hide {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* ==========================================================
                    COUNTER ANIMATION
========================================================== */

.counter-change {
  animation: counterFade 0.45s;
}

@keyframes counterFade {
  from {
    opacity: 0;

    transform: translateY(10px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* ==========================================================
                    BUTTON RIPPLE
========================================================== */

.price-pagination button {
  overflow: hidden;

  position: relative;
}

.price-pagination button::before {
  content: "";

  position: absolute;

  inset: 0;

  /* background: #ffffff; */

  border-radius: 50%;

  transform: scale(0);

  transition: 0.35s;
}

.price-pagination button:hover::before {
  transform: scale(1);
}

.price-pagination button img {
  position: relative;

  z-index: 2;
}

.counter-change {
  animation: counterFade 0.45s;
}

@keyframes counterFade {
  from {
    opacity: 0;

    transform: translateY(10px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* ==========================================================
        GREAT PRICES - SCROLL CAROUSEL
========================================================== */

/*
   Gives ScrollTrigger enough room while the section is pinned.
   Do not change your existing slider styles.
*/

.great-prices {
  position: relative;
}

/*
   Prevents the pinned section from looking like it jumps
   when ScrollTrigger takes control.
*/

.great-prices.is-scroll-controlled {
  z-index: 20;
}

/*
   Optional: prevent accidental horizontal movement
*/

body {
  overflow-x: hidden;
}

/* ==========================================================
                    1440px
========================================================== */
@media (max-width: 2560) {
  .great-prices .container {
    max-width: 1600px;
  }
  /* Keep all cards exactly 510 x 420 */
  .price-card {
    width: 510px;
    height: 420px;
    min-height: 420px;
    box-sizing: border-box;
  }

  /* Card 1 and Card 2 */
  .price-card.price-title-large .price-content h3 {
    font-size: 36px;
  }

  /* Card 3 and Card 4 */
  .price-card.price-title-small .price-content h3 {
    font-size: 28px;
  }
}

@media (max-width: 1440px) {
  .great-prices .container {
    max-width: 1440px;
    /* padding: 0 32px; */
    padding: 0px;
    border-radius: 0px;
  }

  .price-slider {
    height: 560px;
  }

  .price-card {
    right: 40px;
    width: 480px;
    min-height: 390px;
    padding: 40px;
  }

  .price-content h3 {
    font-size: 46px;
  }
  /* Keep all cards exactly 510 x 420 */
  .price-card {
    width: 510px;
    /* height: 420px; */
    min-height: 420px;
    box-sizing: border-box;
  }

  /* Card 1 and Card 2 */
  .price-card.price-title-large .price-content h3 {
    font-size: 36px;
  }

  /* Card 3 and Card 4 */
  .price-card.price-title-small .price-content h3 {
    font-size: 28px;
  }
}

/* ==========================================================
                    1200px
========================================================== */

@media (max-width: 1200px) {
  .great-prices {
    padding: 70px 0;
  }

  .great-prices-title {
    font-size: 42px;
  }

  .price-slider {
    height: 520px;
  }

  .price-card {
    width: 430px;
    min-height: 360px;
    padding: 36px;
    right: 24px;
  }

  .price-content h3 {
    font-size: 40px;
  }

  .price-content p {
    font-size: 16px;
  }
}

/* ==========================================================
                    1024px
========================================================== */

@media (max-width: 1024px) {
  .great-prices {
    padding: 60px 0;
  }

  .great-prices .container {
    padding: 0 24px;
  }

  .price-slider {
    height: auto;
    overflow: visible;
  }

  .slide {
    position: relative;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .slide.active {
    display: block;
  }

  .slide img {
    height: 450px;
    /* border-radius: 28px 28px 0 0; */
  }

  .price-card {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    min-height: auto;
    border-radius: 0 0 28px 28px;
    margin-top: -6px;
    animation: none;
  }
}

/* ==========================================================
                    TABLETS
========================================================== */

@media (max-width: 768px) {
  .great-prices {
    padding: 50px 0;
  }

  .great-prices-title {
    font-size: 34px;
    margin-bottom: 32px;
  }

  .great-prices .container {
    padding: 0 18px;
  }

  .slide img {
    height: 340px;
  }

  .price-card {
    padding: 28px;
    /* border-radius: 0 0 24px 24px; */
  }

  .price-content h3 {
    font-size: 30px;
    margin-bottom: 18px;
  }

  .price-content p {
    font-size: 15px;
    line-height: 1.7;
    max-width: 100%;
  }

  .price-pattern {
    width: 220px;
    right: -50px;
    top: -10px;
  }

  .price-pagination {
    justify-content: center;
    margin-top: 30px;
  }
}

/* ==========================================================
                    MOBILE
========================================================== */

@media (max-width: 576px) {
  .great-prices {
    padding: 40px 0;
  }

  .great-prices .container {
    padding: 0 15px;
  }

  .great-prices-title {
    font-size: 28px;
    margin-bottom: 24px;
  }

  .slide img {
    height: 240px;
    /* border-radius: 20px 20px 0 0; */
  }

  .price-card {
    padding: 22px;
    /* border-radius: 0 0 20px 20px; */
  }

  .price-content h3 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 14px;
  }

  .price-content p {
    font-size: 14px;
    line-height: 1.6;
  }

  .price-pagination {
    gap: 12px;
    margin-top: 22px;
  }

  .price-pagination button {
    width: 40px;
    height: 40px;
  }

  .price-pagination button img {
    width: 15px;
  }

  #slideCounter {
    font-size: 16px;
  }

  .price-pattern {
    width: 170px;
    right: -45px;
    top: -10px;
  }
}

/* ==========================================================
                    SMALL MOBILE
========================================================== */

@media (max-width: 375px) {
  .slide img {
    height: 210px;
  }

  .price-card {
    padding: 18px;
  }

  .price-content h3 {
    font-size: 21px;
  }

  .price-content p {
    font-size: 13px;
  }
}

/* ==============================================retail page great fuel section code css====================================== */
/*=====================================================
                GREAT FUELS SECTION
=====================================================*/

.maingreatfuels {
  width: 100%;
  background: #fff;
  padding: 90px 0;
  padding-top: 70px;
}

.maingreatfuels .container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  /* padding: 0 120px; */
}

/*=====================================================
                    MAIN GRID
=====================================================*/

.greatfuel-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 80px;
}

/*=====================================================
                    LEFT SIDE
=====================================================*/

.leftsidegreatfuel {
  width: 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 560px;
  /* padding-bottom: 108px; */
  min-width: 516px;
}

.retailgreatfueltext {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 48px;
}

/*=====================================================
                    RIGHT SIDE
=====================================================*/

.rightsidegreatfuel {
  width: 58%;
  display: grid;
  grid-template-columns: 330px 270px;
  grid-template-rows: 160px 325px;
  gap: 20px;
  align-items: start;
  justify-content: center;
}

/*=====================================================
                LARGE IMAGE
=====================================================*/

.largeimage {
  grid-row: 1 / span 2;
  width: 330px;
  height: 400px;
}

.largeimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/*=====================================================
                SMALL IMAGE
=====================================================*/

.smallimage {
  width: 225px;
  height: 160px;
}

.smallimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/*=====================================================
                MEDIUM IMAGE
=====================================================*/

.mediumimage {
  width: 270px;
  height: 325px;
}

.mediumimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/*=====================================================
                    CONTENT BOX
=====================================================*/

.fuelleftinfobox {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/*=====================================================
                    TITLE
=====================================================*/

.fueltitlebox {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* min-height: 172px; */
}

.fueltitletext1 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  /* background: linear-gradient(90deg, #f37021, #e1251b); */
  background: linear-gradient(270deg, #e1251b 0%, #f37021 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fuelsubtitletext1 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: #333;
}

/* =====================================================
   ORANGE GRADIENT SUBTITLE
   Cards: 4, 6, 7
===================================================== */

.fuelsubtitletext1.orange-subtitle {
  background: linear-gradient(90deg, #f37021 0%, #e1251b 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  color: transparent;
}

/* =====================================================
   CARDS 4, 6, 7 - DARK TITLE
===================================================== */

.fueltitletext1.dark-title {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: #333;
  background-clip: initial;
  color: #333;
}

/*=====================================================
                DESCRIPTION
=====================================================*/

.fueldesc {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 30px;
  color: #666;
  max-width: 500px;
  min-height: 90px;
}

/*=====================================================
                PAGINATION
=====================================================*/

.fuelpaginationbox {
  position: absolute;
  /* NEW */
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 60px;
}

.fuelleftbutton,
.fuelrightbutton {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.35s;
}

.fuelleftbutton img {
  transform: rotate(359deg);
}

.fuelleftbutton img,
.fuelrightbutton img {
  width: 16px;
  transition: 0.35s;
}

.fuelrightbutton img {
  transform: rotate(180deg);
}

.fuelleftbutton:hover,
.fuelrightbutton:hover {
  background: linear-gradient(180deg, #f37021 0%, #e1251b 100%);
  border-color: linear-gradient(180deg, #f37021 0%, #e1251b 100%);
}

.fuelleftbutton:hover img,
.fuelrightbutton:hover img {
  filter: brightness(0) invert(1);
}

.fuelpagecounter {
  min-width: 50px;

  text-align: center;

  font-family: "Inter", sans-serif;

  font-size: 16px;

  font-weight: 600;

  color: #555;
}

/*=====================================================
                IMAGE ANIMATION
=====================================================*/

.largeimage,
.smallimage,
.mediumimage {
  overflow: hidden;
  border-radius: 12.1px;
}

.largeimage img,
.smallimage img,
.mediumimage img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;

  border-radius: 20px;

  /* subtle lift, matching the reference file's .fuel-photo */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  /* smoother GPU-accelerated fades when the JS toggles opacity */
  will-change: opacity, transform;

  /* transition:
    opacity 0.45s ease,
    transform 0.45s ease; */
}

/*=====================================================
                BUTTON EFFECT
=====================================================*/

.fuelleftbutton,
.fuelrightbutton {
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    transform 0.25s ease;
}

.fuelleftbutton:hover,
.fuelrightbutton:hover {
  transform: scale(1.08);
}

.fuelleftbutton:active,
.fuelrightbutton:active {
  transform: scale(0.92);
}

#fuelCounter {
  transition: 0.4s;
}

.counter-change {
  animation: counterFade 0.45s ease;
}

@keyframes counterFade {
  from {
    opacity: 0;

    transform: translateY(12px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/*=====================================================
                    1440px
=====================================================*/
@media (max-width: 2560px) {
  .largeimage {
    position: relative;
    top: 50px;
  }
}

@media (max-width: 1440px) {
  .maingreatfuels .container {
    padding: 0 60px;
  }

  .greatfuel-wrapper {
    gap: 60px;
  }
}

/*=====================================================
                    1200px
=====================================================*/

@media (max-width: 1200px) {
  .greatfuel-wrapper {
    gap: 50px;
  }

  .rightsidegreatfuel {
    grid-template-columns: 280px 230px;

    grid-template-rows: 150px 300px;

    gap: 18px;
  }

  .largeimage {
    width: 280px;

    height: 468px;
  }

  .smallimage {
    width: 230px;

    height: 150px;
  }

  .mediumimage {
    width: 230px;

    height: 300px;
  }

  .fueltitletext1,
  .fuelsubtitletext1 {
    font-size: 44px;
  }

  .fueltitlebox {
    min-height: 140px;
  }

  .fueldesc {
    min-height: 85px;
  }
}

/* =====================================================
              TABLET ONLY
          768px - 1024px
===================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  /* ===============================
              MAIN SECTION
    =============================== */

  .maingreatfuels {
    width: 100%;
    padding: 70px 0;
    overflow: hidden;
  }

  /* ===============================
              CONTAINER
    =============================== */

  .maingreatfuels .container {
    width: 100%;
    max-width: 100%;
    padding: 0 40px;
  }

  /* ===============================
              MAIN WRAPPER
    =============================== */

  .greatfuel-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
  }

  /* ===============================
              LEFT SIDE
    =============================== */

  .leftsidegreatfuel {
    width: 46%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    min-height: 480px;
    padding-bottom: 85px;
  }

  /* ===============================
              SMALL HEADING
    =============================== */

  .retailgreatfueltext {
    font-size: 22px;
    line-height: 1.2;

    margin-bottom: 32px;
  }

  /* ===============================
              CONTENT
    =============================== */

  .fuelleftinfobox {
    width: 100%;
    max-width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 18px;
  }

  /* ===============================
              TITLE
    =============================== */

  .fueltitlebox {
    width: 100%;

    min-height: 145px;

    display: flex;
    flex-direction: column;

    gap: 3px;
  }

  .fueltitletext1,
  .fuelsubtitletext1 {
    font-size: 38px;
    line-height: 1.08;

    letter-spacing: -0.02em;
  }

  /* ===============================
              DESCRIPTION
    =============================== */

  .fueldesc {
    width: 100%;
    max-width: 470px;

    min-height: 85px;

    margin: 0;

    font-size: 15px;
    line-height: 26px;
  }

  /* ===============================
              PAGINATION
    =============================== */

  .fuelpaginationbox {
    position: absolute;

    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 0;
  }

  .fuelleftbutton,
  .fuelrightbutton {
    width: 44px;
    height: 44px;
  }

  .fuelpagecounter {
    min-width: 48px;
    font-size: 15px;
  }

  /* ===============================
              RIGHT IMAGE AREA
    =============================== */

  .rightsidegreatfuel {
    width: 54%;
    min-width: 0;

    display: grid;

    grid-template-columns: minmax(170px, 220px) minmax(140px, 180px);
    grid-template-rows: 120px 250px;

    gap: 14px;

    align-items: start;
    justify-content: center;

    position: relative;
  }

  /* ===============================
              LARGE IMAGE
    =============================== */

  .largeimage {
    grid-row: 1 / span 2;

    width: 100%;
    height: 370px;

    position: relative;
    top: 20px;
  }

  /* ===============================
              SMALL IMAGE
    =============================== */

  .smallimage {
    width: 100%;
    height: 120px;
  }

  /* ===============================
              MEDIUM IMAGE
    =============================== */

  .mediumimage {
    width: 100%;
    height: 250px;
  }

  /* ===============================
              IMAGE
    =============================== */

  .largeimage img,
  .smallimage img,
  .mediumimage img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 16px;
  }
}

@media (min-width: 577px) and (max-width: 767px) {
  .maingreatfuels {
    padding: 65px 0;
    overflow: hidden;
  }

  .maingreatfuels .container {
    width: 100%;
    padding: 0 30px;
  }

  /* MAIN */
  .greatfuel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 45px;
  }

  /* LEFT CONTENT */
  .leftsidegreatfuel {
    width: 100%;
    min-height: auto;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    text-align: center;
  }

  .retailgreatfueltext {
    font-size: 23px;
    margin-bottom: 25px;
  }

  .fuelleftinfobox {
    width: 100%;
    max-width: 620px;
    align-items: center;
    gap: 18px;
  }

  .fueltitlebox {
    width: 100%;
    min-height: auto;
    align-items: center;
    gap: 2px;
  }

  .fueltitletext1,
  .fuelsubtitletext1 {
    font-size: 40px;
    line-height: 1.08;
  }

  .fueldesc {
    width: 100%;
    max-width: 560px;
    min-height: auto;
    font-size: 16px;
    line-height: 27px;
    text-align: center;
  }

  /* PAGINATION */

  .fuelpaginationbox {
    position: static;
    margin-top: 28px;
    justify-content: center;
    gap: 15px;
  }

  .fuelleftbutton,
  .fuelrightbutton {
    width: 44px;
    height: 44px;
  }

  /* IMAGE AREA */

  .rightsidegreatfuel {
    width: 100%;
    display: grid;
    grid-template-columns:
      minmax(210px, 1fr)
      minmax(170px, 0.8fr);
    grid-template-rows:
      125px
      260px;

    gap: 15px;
    justify-content: center;
  }

  .largeimage {
    grid-row: 1 / span 2;
    width: 100%;
    height: 400px;
    top: 0;
  }

  .smallimage {
    width: 100%;
    height: 125px;
  }

  .mediumimage {
    width: 100%;
    height: 260px;
  }

  .largeimage img,
  .smallimage img,
  .mediumimage img {
    border-radius: 16px;
  }
}

/* =====================================================
                      MOBILE
                   481px - 576px
===================================================== */

@media (min-width: 481px) and (max-width: 576px) {
  .maingreatfuels {
    padding: 55px 0;
    overflow: hidden;
  }

  .maingreatfuels .container {
    width: 100%;
    padding: 0 22px;
  }

  /* MAIN */

  .greatfuel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }

  /* LEFT */

  .leftsidegreatfuel {
    width: 100%;
    min-height: auto;
    padding-bottom: 0;
    align-items: center;
    text-align: center;
  }

  .retailgreatfueltext {
    font-size: 21px;
    margin-bottom: 20px;
  }

  .fuelleftinfobox {
    width: 100%;
    align-items: center;
    gap: 15px;
  }

  .fueltitlebox {
    width: 100%;
    min-height: auto;
    align-items: center;
  }

  .fueltitletext1,
  .fuelsubtitletext1 {
    font-size: 32px;
    line-height: 1.1;
  }

  .fueldesc {
    width: 100%;
    max-width: 480px;
    min-height: auto;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
  }

  /* PAGINATION */

  .fuelpaginationbox {
    position: static;
    margin-top: 20px;
    justify-content: center;
    gap: 13px;
  }

  .fuelleftbutton,
  .fuelrightbutton {
    width: 42px;
    height: 42px;
  }

  .fuelpagecounter {
    min-width: 45px;
    font-size: 15px;
  }

  /* IMAGES */

  .rightsidegreatfuel {
    width: 100%;
    display: grid;
    grid-template-columns: 1.05fr 0.85fr;
    grid-template-rows: 105px 210px;
    gap: 12px;
  }

  .largeimage {
    grid-row: 1 / span 2;
    width: 100%;
    height: 325px;
    top: 0;
  }

  .smallimage {
    width: 100%;
    height: 105px;
  }

  .mediumimage {
    width: 100%;
    height: 210px;
  }

  .largeimage img,
  .smallimage img,
  .mediumimage img {
    border-radius: 14px;
  }
}

/* =====================================================
                    SMALL MOBILE
                    320px - 480px
===================================================== */

@media (max-width: 480px) {
  .maingreatfuels {
    padding: 50px 0;
    overflow: hidden;
  }

  .maingreatfuels .container {
    width: 100%;
    padding: 0 18px;
  }

  /* MAIN */

  .greatfuel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  /* LEFT CONTENT */

  .leftsidegreatfuel {
    width: 100%;
    min-height: auto;
    padding-bottom: 0;
    align-items: center;
    text-align: center;
  }

  .retailgreatfueltext {
    font-size: 19px;
    line-height: 1.2;
    margin-bottom: 18px;
  }

  .fuelleftinfobox {
    width: 100%;
    align-items: center;
    gap: 13px;
  }

  .fueltitlebox {
    width: 100%;
    min-height: auto;
    align-items: center;
    gap: 1px;
  }

  .fueltitletext1,
  .fuelsubtitletext1 {
    font-size: 27px;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .fueldesc {
    width: 100%;
    min-height: auto;
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
  }

  /* PAGINATION */

  .fuelpaginationbox {
    position: static;
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
  }

  .fuelleftbutton,
  .fuelrightbutton {
    width: 38px;
    height: 38px;
  }

  .fuelleftbutton img,
  .fuelrightbutton img {
    width: 14px;
  }

  .fuelpagecounter {
    min-width: 42px;
    font-size: 14px;
  }

  /* IMAGE GRID */
  .rightsidegreatfuel {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 0.82fr;
    grid-template-rows:
      90px
      180px;
    gap: 10px;
  }

  .largeimage {
    grid-row: 1 / span 2;
    width: 100%;
    height: 280px;

    top: 0;
  }

  .smallimage {
    width: 100%;
    height: 90px;
  }

  .mediumimage {
    width: 100%;
    height: 180px;
  }

  .largeimage img,
  .smallimage img,
  .mediumimage img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 13px;
  }
}

/* =====================================================
                  VERY SMALL MOBILE
                     ≤ 380px
===================================================== */

@media (max-width: 380px) {
  .maingreatfuels {
    padding: 45px 0;
  }

  .maingreatfuels .container {
    padding: 0 15px;
  }

  .greatfuel-wrapper {
    gap: 26px;
  }

  .retailgreatfueltext {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .fueltitletext1,
  .fuelsubtitletext1 {
    font-size: 24px;
  }

  .fueldesc {
    font-size: 13px;
    line-height: 21px;
  }

  .fuelpaginationbox {
    margin-top: 15px;
  }

  .fuelleftbutton,
  .fuelrightbutton {
    width: 36px;
    height: 36px;
  }

  .rightsidegreatfuel {
    grid-template-columns: 1fr 0.8fr;
    grid-template-rows: 80px 160px;
    gap: 8px;
  }

  .largeimage {
    height: 248px;
  }

  .smallimage {
    height: 80px;
  }

  .mediumimage {
    height: 160px;
  }
}

/* ======================================================work with us page===================================== */
/* work with us page main header navigation code section css */
/* .worknavigationbg {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 18px 20px;
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 999;
  transition: box-shadow 0.3s ease;
} */

/* .worknavigationbg {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 18px 20px;
  background: transparent;
  position: sticky;
  top: var(--main-header-height, 84px);
  z-index: 90;
  transition: box-shadow 0.3s ease;
} */
.worknavigationbg {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 18px 20px;
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 90;
  transition: box-shadow 0.3s ease;
}

.innernavigationbox {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 535px;
  height: 54px;
  padding: 4px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dddddd;
  overflow: hidden;
}

.navigation-indicator {
  position: absolute;
  left: 4px;
  top: 4px;
  width: calc(50% - 4px);
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(270deg, #e1251b, #f37021);
  transition: 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-btn {
  position: relative;
  z-index: 2;
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #666;
  transition: 0.35s;
}

.nav-btn.active {
  color: #fff;
}

@media (max-width: 1024px) {
  .innernavigationbox {
    max-width: 480px;
  }

  .nav-btn {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .worknavigationbg {
    padding: 16px;
  }

  .innernavigationbox {
    max-width: 100%;
    height: 52px;
  }

  .nav-btn {
    font-size: 13px;
    padding: 0 8px;
  }
}

@media (max-width: 480px) {
  .innernavigationbox {
    height: 48px;
  }

  .navigation-indicator {
    height: 40px;
  }

  .nav-btn {
    font-size: 12px;
  }
}

/* ================================================ middle top section description code css===================== */
/*==================================================
            WORK WITH US
==================================================*/
#dealerSection {
  display: block;
}

#leaseSection {
  display: none;
}

.topworkdescbox {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 110px 24px 90px;

  background: #fff;
}

/*=========================
        Badge
=========================*/

.workwithustitle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 14px;

  border: 1px solid #7d7d7d;

  border-radius: 999px;
  margin-top: 40px;
  margin-bottom: 30px;
}

.worktext {
  font-family: "Inter", sans-serif;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: #666666;
}

/*=========================
        Description
=========================*/

.detaildesc {
  width: 100%;
  max-width: 980px;

  margin: 0;

  font-family: "Inter", sans-serif;

  font-size: clamp(24px, 2.2vw, 30px);

  font-weight: 400;

  line-height: 1.3;

  letter-spacing: -0.03em;

  text-align: center;

  color: #666666;
}

.detaildesc strong {
  font-weight: 700;

  color: #f15a22;
}

/*==================================================
                1440+
==================================================*/

@media (min-width: 1440px) {
  .topworkdescbox {
    padding: 80px 24px 95px;
  }

  .detaildesc {
    max-width: 1024px;
    font-size: 28px;
  }
}

/*==================================================
                Laptop
==================================================*/

@media (max-width: 1439px) {
  .topworkdescbox {
    padding: 80px 40px 80px;
  }

  .detaildesc {
    max-width: 900px;

    font-size: 28px;
  }
}

/*==================================================
                Tablet
==================================================*/

@media (max-width: 1023px) {
  .topworkdescbox {
    padding: 80px 32px 70px;
  }

  .workwithustitle {
    margin-bottom: 24px;
  }

  .detaildesc {
    max-width: 720px;

    font-size: 24px;

    line-height: 1.4;
  }
}

/*==================================================
                Mobile
==================================================*/

@media (max-width: 767px) {
  .topworkdescbox {
    padding: 60px 20px 60px;
  }

  .workwithustitle {
    margin-bottom: 20px;

    padding: 6px 12px;
  }

  .worktext {
    font-size: 11px;
  }

  .detaildesc {
    font-size: 20px;

    line-height: 1.45;
  }
}

/*==================================================
            Small Mobile
==================================================*/

@media (max-width: 480px) {
  .topworkdescbox {
    padding: 50px 18px 55px;
  }

  .detaildesc {
    font-size: 18px;

    line-height: 1.5;
  }
}

/* =============================================== middle all cards images section code css ==================== */
/* ==========================================
        WHAT WE OFFER SLIDER
========================================== */

.work-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease; */
}

/* .work-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
} */

/* ==========================================
                IMAGE
========================================== */

.work-slide-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  /* transform: scale(1); */
}

/* ==========================================
              DARK OVERLAY
========================================== */

.work-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0.1) 28%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0.55) 72%,
    rgba(0, 0, 0, 0.78) 100%
  );
}

/* ==========================================
            CONTENT
========================================== */

.work-content {
  position: absolute;

  left: 50%;
  bottom: 48px;

  transform: translateX(-50%);

  width: min(90%, 620px);

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  z-index: 5;
}

/* ==========================================
            SMALL TITLE
========================================== */

.work-small-title {
  display: inline-block;
  margin-bottom: 14px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
}

/* ==========================================
                HEADING
========================================== */

.work-title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
}

.work-title span {
  display: inline-block;

  color: #ffffff;
}

/* ==========================================
            DESCRIPTION
========================================== */

.work-description {
  max-width: 560px;
  margin-top: 15px;
  margin-bottom: 32px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}

/* ==========================================
            PAGINATION
========================================== */

.work-pagination {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 18px;
}

.work-counter {
  min-width: 60px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

/* ==========================================
            ARROWS
========================================== */

.work-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.35s ease,
    transform 0.35s ease,
    border-color 0.35s ease;
}

.work-arrow img {
  width: 20px;
  height: 20px;

  transition: transform 0.35s ease;
}

.work-arrow.prev img {
  transform: rotate(180deg);
}

.work-arrow:hover {
  background: rgba(255, 255, 255, 0.18);

  border-color: #fff;
}

.work-arrow:hover img {
  transform: scale(1.08);
}

.work-arrow.prev:hover img {
  transform: rotate(180deg) scale(1.08);
}

/*======================================================
            SMALL TITLE
======================================================*/

.work-slide.active .work-small-title {
  animation: workFadeUp 0.7s ease forwards;

  animation-delay: 0.25s;
}

/*======================================================
            TITLE
======================================================*/

.work-slide.active .work-title {
  animation: workFadeUp 0.8s ease forwards;

  animation-delay: 0.45s;
}

/*======================================================
            DESCRIPTION
======================================================*/

.work-slide.active .work-description {
  animation: workFadeUp 0.8s ease forwards;

  animation-delay: 0.65s;
}

/*======================================================
            PAGINATION
======================================================*/

.work-slide.active .work-pagination {
  animation: workFadeUp 0.8s ease forwards;

  animation-delay: 0.85s;
}
/*======================================================
        TEXT EXIT
======================================================*/

.work-slide.exit .work-content {
  animation: contentExit 0.45s ease forwards;
}

@keyframes contentExit {
  from {
    opacity: 1;

    transform: translateY(0);
  }

  to {
    opacity: 0;

    transform: translateY(-35px);
  }
}

/*======================================================
        ARROW HOVER
======================================================*/

.work-arrow:hover {
  transform: scale(1.08);
}

.work-arrow:active {
  transform: scale(0.95);
}

/*======================================================
        COUNTER ANIMATION
======================================================*/

.work-counter {
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.work-counter.change {
  opacity: 0;

  transform: translateY(15px);
}

/*=====================================================
                1440px+
=====================================================*/

@media (min-width: 1440px) {
  .work-slider-wrapper {
    height: 600px;
  }

  .work-content {
    bottom: 48px;
    max-width: 758px;
  }

  .work-title {
    font-size: 36px;
    min-width: 666px;
  }

  .work-description {
    font-size: 15px;
    max-width: 850px;
  }
}

/*=====================================================
                1024px - 1439px
=====================================================*/

@media (max-width: 1439px) {
  .work-slider-wrapper {
    height: 560px;
  }

  .work-content {
    width: min(90%, 560px);

    bottom: 40px;
  }

  .work-title {
    font-size: 48px;
  }

  .work-description {
    font-size: 17px;

    max-width: 520px;

    margin-bottom: 28px;
  }

  .work-pagination {
    gap: 16px;
  }
}

/*=====================================================
                TABLET
=====================================================*/

@media (max-width: 1023px) {
  .work-slider-wrapper {
    height: 500px;
  }

  .work-content {
    width: 90%;

    bottom: 36px;
  }

  .work-small-title {
    font-size: 12px;

    letter-spacing: 0.18em;
  }

  .work-title {
    font-size: 40px;
  }

  .work-description {
    font-size: 16px;

    line-height: 1.6;

    max-width: 500px;

    margin-top: 16px;

    margin-bottom: 26px;
  }

  .work-arrow {
    width: 46px;

    height: 46px;
  }
}

/*=====================================================
                LARGE MOBILE
=====================================================*/

@media (max-width: 767px) {
  .work-slider-wrapper {
    height: 430px;
  }

  .work-content {
    width: 90%;

    bottom: 28px;
  }

  .work-small-title {
    font-size: 11px;

    margin-bottom: 10px;
  }

  .work-title {
    font-size: 32px;

    line-height: 1.15;
  }

  .work-description {
    font-size: 15px;

    line-height: 1.5;

    margin-top: 14px;

    margin-bottom: 22px;
  }

  .work-pagination {
    gap: 14px;
  }

  .work-arrow {
    width: 42px;

    height: 42px;
  }

  .work-arrow img {
    width: 18px;

    height: 18px;
  }

  .work-counter {
    font-size: 16px;
  }
}

/*=====================================================
                SMALL MOBILE
=====================================================*/

@media (max-width: 575px) {
  .work-slider-wrapper {
    height: 380px;
  }

  .work-content {
    width: 92%;

    bottom: 22px;
  }

  .work-small-title {
    font-size: 10px;

    margin-bottom: 8px;
  }

  .work-title {
    font-size: 28px;

    line-height: 1.15;
  }

  .work-title span {
    display: block;
  }

  .work-description {
    font-size: 14px;

    line-height: 1.45;

    margin-top: 12px;

    margin-bottom: 20px;
  }

  .work-pagination {
    gap: 12px;
  }

  .work-arrow {
    width: 40px;

    height: 40px;
  }

  .work-arrow img {
    width: 16px;

    height: 16px;
  }

  .work-counter {
    font-size: 15px;
  }
}

/*=====================================================
            EXTRA SMALL DEVICES
=====================================================*/

@media (max-width: 390px) {
  .work-slider-wrapper {
    height: 350px;
  }

  .work-content {
    bottom: 18px;
  }

  .work-title {
    font-size: 24px;
  }

  .work-description {
    font-size: 13px;

    margin-bottom: 18px;
  }

  .work-arrow {
    width: 38px;

    height: 38px;
  }
}

/* Keep the pinned ScrollTrigger section flush with the viewport. */
html,
body {
  margin: 0;
}

.work-slider {
  height: 100vh !important;
  height: 100svh !important;
  min-height: 100vh;
  overflow: hidden;
}

.work-slider > .work-slider-wrapper {
  height: 100% !important;
  min-height: 100%;
}

/* ============================ Work with us page elevate section code some css =================================== */
.elevatewholetext {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-style: Light;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -3%;
  text-align: center;
  color: #ffffff;
}

.restelevatetext {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-style: Bold;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -2%;
  text-align: center;
  color: #ffffff;
}

.elevatebottomdesc {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: Medium;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -2%;
  text-align: center;
  color: #ffffff;
}

@media (min-width: 1440px) and (max-width: 2560px) {
  .elevatebottomdesc {
    min-width: 1000px;
    position: relative;
    left: -235px;
  }
}

@media (max-width: 768px) {
  .elevatewholetext {
    font-size: 28px;
  }

  .restelevatetext {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .elevatewholetext {
    font-size: 24px;
  }

  .restelevatetext {
    font-size: 24px;
  }
}

/* =======================================work with us page number second ========================================== */
/* work with us page top infomation section css code */
.topinfobox {
  width: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 110px 24px 90px;
}

.topinfo-content {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

/*==================================================
                DESCRIPTION
==================================================*/

.pagedesc2 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: clamp(24px, 2.1vw, 28px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.03em;
  text-align: center;
  color: #666666;
}

.pagedesc2 strong {
  font-weight: 700;
  color: #e84e1b;
}

/*==================================================
                Large Desktop
==================================================*/

@media (min-width: 1440px) {
  .topinfobox {
    padding: 150px 24px 95px;
  }

  .topinfo-content {
    max-width: 980px;
  }
}

/*==================================================
                Laptop
==================================================*/

@media (max-width: 1439px) {
  .topinfobox {
    padding: 100px 40px 80px;
  }

  .topinfo-content {
    max-width: 900px;
  }
}

/*==================================================
                Tablet
==================================================*/

@media (max-width: 1023px) {
  .topinfobox {
    padding: 80px 32px 70px;
  }

  .topinfo-content {
    max-width: 720px;
  }

  .pagedesc2 {
    font-size: 24px;
    line-height: 1.4;
  }
}

/*==================================================
                Mobile
==================================================*/

@media (max-width: 767px) {
  .topinfobox {
    padding: 65px 20px 55px;
  }

  .topinfo-content {
    max-width: 100%;
  }

  .pagedesc2 {
    font-size: 20px;
    line-height: 1.45;
  }
}

/*==================================================
            Small Mobile
==================================================*/

@media (max-width: 480px) {
  .topinfobox {
    padding: 55px 18px 45px;
  }

  .pagedesc2 {
    font-size: 18px;
    line-height: 1.5;
  }
}

/* =========================================== work with us page2 all the middle cards section css code==================================== */
/*======================================================
                    LEASE SLIDER
======================================================*/

.lease-slider {
  width: 100%;

  background: #ffffff;
}

.lease-slider-wrapper {
  position: relative;

  width: 100%;

  height: 600px;

  overflow: hidden;
}

/*======================================================
                    SLIDES
======================================================*/

/* .lease-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
} */
.lease-slide {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  z-index: 0;
  will-change: transform, opacity;
}

.lease-slide:first-child {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* .lease-slide.active {
  opacity: 1;

  visibility: visible;

  z-index: 2;
} */

/*======================================================
                    IMAGE
======================================================*/

.lease-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
  /* transform: scale(1.05); */
}

/*======================================================
                    OVERLAY
======================================================*/

.lease-overlay {
  position: absolute;

  inset: 0;

  /* background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.18) 40%,
    rgba(0, 0, 0, 0.55) 100%
  ); */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0.1) 28%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0.55) 72%,
    rgba(0, 0, 0, 0.78) 100%
  );

  z-index: 1;
}

/*======================================================
                    CONTENT
======================================================*/

.lease-content {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  /* width: min(90%, 760px); */
  width: min(90%, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 5;
  will-change: transform;
}

/*======================================================
                    SMALL TITLE
======================================================*/

.lease-tag {
  display: inline-block;
  margin-bottom: 14px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
}

/*======================================================
                    HEADING
======================================================*/

.lease-heading {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.lease-heading span {
  /* display: inline; */
  display: inline-block;
  color: #ffffff;
}

/*======================================================
                    DESCRIPTION
======================================================*/

.lease-desc {
  margin: 20px 0 32px;
  max-width: 620px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #ffffff;
}

/*======================================================
                    PAGINATION
======================================================*/

.lease-controls {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 18px;
}

.lease-count {
  min-width: 56px;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
}

/*======================================================
                    BUTTONS
======================================================*/

.lease-btn {
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.35s ease;
}

.lease-btn img {
  width: 20px;
  height: 20px;

  transition: 0.35s ease;
}

.lease-btn.prev img {
  transform: rotate(180deg);
}

.lease-btn:hover {
  background: #ffffff;
}

.lease-btn:hover img {
  filter: brightness(0);
}

.lease-btn.prev:hover img {
  transform: rotate(180deg) translateX(-2px);
}

.lease-btn.next:hover img {
  transform: translateX(2px);
}

/*======================================================
                SMALL TITLE
======================================================*/
.lease-slide.exit .lease-content {
  animation: contentExit 0.45s ease forwards;
}
/*======================================================
                TEXT KEYFRAME
======================================================*/

/* @keyframes leaseText {
  from {
    opacity: 1;

    transform: translateY(0px);
  }

  to {
    opacity: 0;

    transform: translateY(-35px);
  }
} */

/*======================================================
                OVERLAY
======================================================*/

/* .lease-overlay {
  opacity: 0;
}

.lease-slide.active .lease-overlay {
  animation: leaseOverlay 0.8s ease forwards;
} */

/* @keyframes leaseOverlay {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
} */
/*======================================================
                    1600px+
======================================================*/

@media (min-width: 1600px) {
  .lease-slider-wrapper {
    height: 680px;
  }

  .lease-content {
    max-width: 780px;

    bottom: 60px;
  }

  .lease-heading {
    font-size: 36px;
  }

  .lease-desc {
    max-width: 680px;

    font-size: 15px;
  }
}

/*======================================================
                    1440px
======================================================*/

@media (max-width: 1599px) {
  .lease-slider-wrapper {
    height: 600px;
  }

  .lease-content {
    bottom: 50px;
    max-width: 758px;
  }

  .lease-heading {
    font-size: 36px;
  }
}

/*======================================================
                    Laptop
======================================================*/

@media (max-width: 1280px) {
  .lease-slider-wrapper {
    height: 540px;
  }

  .lease-content {
    width: min(90%, 640px);

    bottom: 42px;
  }

  .lease-heading {
    font-size: 46px;
  }

  .lease-desc {
    font-size: 17px;
  }
}

/*======================================================
                    Tablet
======================================================*/

@media (max-width: 1023px) {
  .lease-slider-wrapper {
    height: 480px;
  }

  .lease-content {
    width: 90%;

    bottom: 36px;
  }

  .lease-tag {
    font-size: 11px;

    margin-bottom: 14px;
  }

  .lease-heading {
    font-size: 40px;

    line-height: 1.15;
  }

  .lease-desc {
    font-size: 16px;

    line-height: 1.6;

    margin: 18px 0 28px;
  }

  .lease-btn {
    width: 44px;

    height: 44px;
  }
}

/*======================================================
                    Mobile
======================================================*/

@media (max-width: 767px) {
  .lease-slider-wrapper {
    height: 400px;
  }

  .lease-content {
    width: 92%;

    bottom: 24px;
  }

  .lease-tag {
    font-size: 10px;

    margin-bottom: 10px;
  }

  .lease-heading {
    font-size: 30px;

    line-height: 1.15;
  }

  .lease-heading span {
    display: block;
  }

  .lease-desc {
    margin: 14px 0 22px;

    font-size: 15px;

    line-height: 1.5;
  }

  .lease-controls {
    gap: 14px;
  }

  .lease-btn {
    width: 40px;

    height: 40px;
  }

  .lease-btn img {
    width: 16px;

    height: 16px;
  }

  .lease-count {
    font-size: 15px;
  }
}

/*======================================================
                Small Mobile
======================================================*/

@media (max-width: 480px) {
  .lease-slider-wrapper {
    height: 360px;
  }

  .lease-content {
    bottom: 18px;
  }

  .lease-heading {
    font-size: 24px;
  }

  .lease-desc {
    font-size: 14px;

    margin: 12px 0 18px;
  }

  .lease-btn {
    width: 38px;

    height: 38px;
  }
}

html,
body {
  margin: 0;
}

/* .lease-slider {
  height: 100vh !important;
  height: 100svh !important;
  min-height: 100vh;
  overflow: hidden;
}
 
.lease-slider > .lease-slider-wrapper {
  height: 100% !important;
  min-height: 100%;
} */
.lease-slider {
  position: relative;

  width: 100%;
  height: 100vh;
  height: 100svh;

  min-height: 100vh;

  overflow: hidden;

  background: #000;
}

.lease-slider-wrapper {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 100%;

  overflow: hidden;
}

/* ========================================================== ready to lease bottom section code css==================================================================================== */
.readytoleasetext {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-style: Light;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -3%;
  text-align: center;
  color: #ffffff;
}

.onlyleasetext {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-style: Bold;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -2%;
  text-align: center;
  color: #ffffff;
}

.readyleasebottomdesc {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: Medium;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -2%;
  text-align: center;
  color: #ffffff;
}

@media (min-width: 1440px) and (max-width: 2560px) {
  .readyleasebottomdesc {
    min-width: 735px;
    position: relative;
    left: -80px;
  }
}

@media (max-width: 768px) {
  .readytoleasetext {
    font-size: 28px;
  }

  .onlyleasetext {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .readytoleasetext {
    font-size: 24px;
  }

  .onlyleasetext {
    font-size: 24px;
  }
}

/* =============================================== the news and resources page code all css ================================= */
/* the title name section css */
/* .thenewstitle {
  font-family: Inter;
  font-weight: 700;
  font-style: Bold;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -2%;
  color: #ffffff;
} */
/*=====================================
        PAGE TITLE SECTION
=====================================*/
.page-title-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Header-two is position:fixed, so it doesn't reserve its own space —
     add its real measured height (see initHeader2HeightVar in main.js)
     on top of the section's own breathing room so the title never
     renders underneath it. 76px fallback matches its default height. */
  padding-top: calc(var(--main-header-two-height, 76px) + 32px);
  padding-bottom: 28px;
  position: relative;
  z-index: 2;
}

.thenewstitle {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  color: #ffffff;
}

@media (max-width: 1440px) {
  .page-title-section {
    padding-top: calc(var(--main-header-two-height, 76px) + 28px);
    padding-bottom: 24px;
  }

  .thenewstitle {
    font-size: 36px;
  }
}

@media (max-width: 1024px) {
  .page-title-section {
    padding-top: calc(var(--main-header-two-height, 76px) + 26px);
    padding-bottom: 22px;
  }

  .thenewstitle {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .page-title-section {
    padding-top: calc(var(--main-header-two-height, 76px) + 24px);
    padding-bottom: 20px;
  }

  .thenewstitle {
    font-size: 34px;
    line-height: 42px;
  }
}

@media (max-width: 480px) {
  .page-title-section {
    padding-top: calc(var(--main-header-two-height, 76px) + 20px);
    padding-bottom: 18px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .thenewstitle {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 360px) {
  .thenewstitle {
    font-size: 24px;
    line-height: 32px;
  }
}

/*============================================ the navigation for news and all the other resoucres ===================================*/
/* .thenewsnavigationbg {
  width: 1440;
  height: 60;
  padding-right: 120px;
  padding-bottom: 8px;
  padding-left: 120px;
  gap: 16px;
}
.innerbodynewsnav {
  display: flex;
  width: 604;
  height: 52;
  border-radius: 50px;
  border-width: 1px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #dddddd;
}
.newsbuttonbox {
  display: flex;
  width: 136;
  height: 40;
  padding-right: 48px;
  padding-left: 48px;
  gap: 10px;
  border-radius: 30px;
  background: linear-gradient(270deg, #e1251b 0%, #f37021 100%);
}
.newsbuttontext {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: Medium;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -2%;
  text-align: right;
  vertical-align: middle;
  color: #ffffff;
}
.videosbuttonbox {
  display: flex;
  width: 145;
  height: 40;
  padding-right: 48px;
  padding-left: 48px;
  gap: 10px;
  border-radius: 30px;
}
.videosbuttontext {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: Medium;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -2%;
  text-align: right;
  vertical-align: middle;
  color: #666666;
}
.blogsbuttonbox {
  display: flex;
  width: 135;
  height: 40;
  padding-right: 48px;
  padding-left: 48px;
  gap: 10px;
  border-radius: 30px;
}
.blogsbuttontext {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: Medium;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -2%;
  text-align: right;
  vertical-align: middle;
  color: #666666;
}
.promotionbuttonbox {
  display: flex;
  width: 176;
  height: 40;
  padding-right: 48px;
  padding-left: 48px;
  gap: 10px;
  border-radius: 30px;
}
.promotionbuttontext {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: Medium;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -2%;
  text-align: right;
  vertical-align: middle;
  color: #666666;
} */
/*==================================================
            NEWS NAVIGATION
==================================================*/

.thenewsnavigationbg {
  display: flex;
  justify-content: center;
  padding: 8px 20px 32px;
}

.innerbodynewsnav {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 604px;
  height: 52px;
  padding: 6px;
  background: #fff;
  border: 1px solid #dddddd;
  border-radius: 999px;
  overflow: hidden;
}

/* Sliding Orange Pill */

.newsnav-indicator {
  position: absolute;
  left: 6px;
  top: 6px;
  width: calc(25% - 3px);
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(270deg, #e1251b 0%, #f37021 100%);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 1;
}

/* Buttons */

.news-nav-btn {
  flex: 1;
  position: relative;
  z-index: 2;
  border: none;
  background: none;
  cursor: pointer;
  height: 40px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #666;

  transition:
    color 0.35s,
    transform 0.35s;
}

.news-nav-btn.active {
  color: #fff;
}

.news-nav-btn:hover {
  transform: translateY(-1px);
}

/*=========================================
        PAGE TRANSITION
=========================================*/

.news-page {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: translateY(40px);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    visibility 0.45s;

  height: 0;

  overflow: hidden;
}

.news-page.active-page {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  height: auto;
  overflow: visible;
  margin-bottom: 80px;
}

/*=============================
            Tablet
=============================*/

@media (max-width: 768px) {
  .innerbodynewsnav {
    max-width: 100%;
  }

  .news-nav-btn {
    font-size: 13px;
  }
}

/*=============================
            Mobile
=============================*/

@media (max-width: 480px) {
  .thenewsnavigationbg {
    padding: 8px 16px 24px;
  }

  .innerbodynewsnav {
    height: 48px;
    padding: 4px;
  }

  .newsnav-indicator {
    top: 4px;
    left: 4px;
    height: 40px;
  }

  .news-nav-btn {
    font-size: 11px;
  }
}

/* =========================================================== all the news card section css =================================================================================== */
.newsbox {
  width: min(1200px, 100%);
  /* margin: 0 auto; */
  padding: 0 20px;
}

.newsrow1box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.news1 {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  cursor: pointer;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.45s ease;
}

.news1:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.news1infobox {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 24px;
  min-width: 390px;
}

.newsimage1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.news1:hover .newsimage1 {
  transform: scale(1.08);
}

.newsbottomgradient {
  position: absolute;
  left: 0;
  right: 0px;
  bottom: 0px;
  height: 250px;
  z-index: 1;
  transition: 0.55s ease;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.82) 58%,
    #ffffff 100%
  );
}

.news1:hover .newsbottomgradient {
  background: linear-gradient(
    180deg,
    rgba(243, 112, 33, 0) 0%,
    #f37021 70.19%,
    #e1251b 100%
  );
}

.newsbottomcontent {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
}

.newsdates1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.65);
  margin-bottom: 16px;
}

.datetext1 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #666;
}

.newsbottomdesc1 {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: #333;
  transition:
    color 0.45s ease,
    transform 0.45s ease;
}

.news1:hover .newsbottomdesc1 {
  color: #fff;
  transform: translateY(-4px);
}
@media (min-width: 1440px) and (max-width: 2560px) {
  .newsbottomdesc1 {
    width: 348px;
    left: -15px;
    position: relative;
  }
}
/* 1024px */

@media (max-width: 1199px) {
  .newsrow1box {
    grid-template-columns: repeat(3, 1fr);
  }
  .newsbottomdesc1 {
    font-size: 18px;
    max-width: 262px;
  }
}

/* Tablet */

@media (max-width: 768px) {
  .newsrow1box {
    grid-template-columns: 1fr;
  }

  .news1infobox {
    height: 360px;
  }

  .newsbottomdesc1 {
    font-size: 20px;
  }
}

/* Mobile */

@media (max-width: 480px) {
  .newsbox {
    padding: 0 16px;
  }

  .news1infobox {
    height: 320px;
  }

  .newsbottomcontent {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .newsbottomdesc1 {
    font-size: 18px;
    line-height: 1.4;
  }
}

@media (hover: none) {
  .news1:hover {
    transform: none;
    box-shadow: none;
  }

  .news1:hover .newsimage1 {
    transform: none;
  }

  .news1:hover .newsbottomgradient {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.82) 58%,
      #fff 100%
    );
  }

  .news1:hover .newsbottomdesc1 {
    color: #333;
    transform: none;
  }
}

/* ========================================================= the news pagr video section code css ========================================================================= */
/* .allvideosbox {
  width: 1200;
  height: 1264;
  gap: 32px;
}
.videoimagerow1 {
  display: flex;
  width: 1200;
  height: 400;
  gap: 16px;
}
.videocard1 {
  width: 390;
  height: 400;
  border-radius: 24px;
}
.playbuttonbg {
  width: 64;
  height: 64;
  top: 120px;
  left: 163px;
  box-shadow: 0px 6.96px 10.43px 0px #0000001a;
  background: #33333380;
}
.middletextinfo {
  width: 329.7584533691406;
  height: 339.21453857421875;
  top: 30.41px;
  left: 30.41px;
  gap: 292.65px;
}
.videoallbottombox {
  width: 329.7584533691406;
  height: 120;
  gap: 22.8px;
}
.videodatesbg {
  display: flex;
  width: 137;
  height: 24;
  gap: 7.6px;
  padding-top: 4px;
  padding-right: 12px;
  padding-bottom: 4px;
  padding-left: 12px;
  border-radius: 95.02px;
  background: #ffffff99;
  backdrop-filter: blur(20px);
}
.videodatestext {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 20%;
  text-transform: uppercase;
  color: #666666;
}
.bottomvideodesc {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-style: Semi Bold;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -2%;
  color: #333333;
}
.videocardsgrediant {
  width: 390;
  height: 250;
  top: 150px;
  border-bottom-right-radius: 22.8px;
  border-bottom-left-radius: 22.8px;
  background: linear-gradient(
    0deg,
    #ffffff 29.97%,
    rgba(255, 255, 255, 0) 100%
  );
}
.videoimage {
  width: 390;
  height: 400;
} */
/*==================================================
                VIDEO GRID
==================================================*/

.allvideosbox {
  width: min(1200px, 100%);

  margin: 0 auto;

  padding: 0 20px;
}

.videoimagerow1 {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 24px;

  margin-bottom: 32px;
}

.videocard1 {
  position: relative;

  height: 400px;

  border-radius: 24px;

  overflow: hidden;

  cursor: pointer;

  transition:
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.45s ease;
}

.videocard1:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.videoimage {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.videocard1:hover .videoimage {
  transform: scale(1.08);
}

.videocardsgrediant {
  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 250px;

  z-index: 1;

  transition: 0.55s ease;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,

    rgba(255, 255, 255, 0.82) 58%,

    #fff 100%
  );
}

.videocard1:hover .videocardsgrediant {
  background: linear-gradient(
    180deg,
    rgba(243, 112, 33, 0) 0%,

    #f37021 70.19%,

    #e1251b 100%
  );
}

.playbuttonbg {
  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 64px;

  height: 64px;

  border: none;

  border-radius: 50%;

  background: rgba(51, 51, 51, 0.45);

  backdrop-filter: blur(12px);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 3;

  transition:
    background 0.4s,
    transform 0.4s,
    box-shadow 0.4s;
}

.playbuttonbg img {
  width: 44px;
  height: 44px;
  transition: 0.35s;
}

.videocard1:hover .playbuttonbg {
  background: #f37021;
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 15px 35px rgba(243, 112, 33, 0.45);
}

.videocard1:hover .playbuttonbg img {
  transform: scale(1);
  filter: brightness(0) invert(1);
}

.middletextinfo {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
}

.videoallbottombox {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.videodatesbg {
  width: max-content;
  /* padding: 4px 12px; */
  padding-right: 12px;
  padding-left: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
}

.videodatestext {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #666;
}

.bottomvideodesc {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #333;
  transition:
    color 0.4s,
    transform 0.4s;
}

.videocard1:hover .bottomvideodesc {
  color: #fff;
  transform: translateY(-4px);
}

/*=============================
        1024
==============================*/
@media (max-width: 1199px) {
  .videoimagerow1 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*=============================
        Tablet
==============================*/

@media (max-width: 768px) {
  .videoimagerow1 {
    grid-template-columns: 1fr;
  }

  .videocard1 {
    height: 360px;
  }

  .bottomvideodesc {
    font-size: 20px;
  }
}

/*=============================
        Mobile
==============================*/

@media (max-width: 480px) {
  .allvideosbox {
    padding: 0 16px;
  }

  .videocard1 {
    height: 320px;
  }

  .middletextinfo {
    left: 20px;

    right: 20px;

    bottom: 20px;
  }

  .bottomvideodesc {
    font-size: 18px;

    line-height: 1.4;
  }

  .playbuttonbg {
    width: 56px;

    height: 56px;
  }

  .playbuttonbg img {
    width: 20px;
  }
}

@media (hover: none) {
  .videocard1:hover {
    transform: none;

    box-shadow: none;
  }

  .videocard1:hover .videoimage {
    transform: none;
  }

  .videocard1:hover .bottomvideodesc {
    color: #333;

    transform: none;
  }

  .videocard1:hover .playbuttonbg {
    background: rgba(51, 51, 51, 0.45);

    transform: translate(-50%, -50%);

    box-shadow: none;
  }

  .videocard1:hover .videocardsgrediant {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,

      rgba(255, 255, 255, 0.82) 58%,

      #fff 100%
    );
  }
}

/* ===================================================================== the unique grediant bg at the header section code css======================================== */
/*=====================================
        COMMON GRADIENT
=====================================*/

.common-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.gradient-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #e1251b 0%,
    #f37021 42%,
    rgba(255, 255, 255, 0.82) 78%,
    #ffffff 100%
  );

}

.gradient-pattern {
  position: absolute;
  left: -150px;
  top: 18px;
  width: 560px;
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (max-width: 2560px) {
  .gradient-pattern {
    /* left: -30px; */
    left: 110px;
    width: 665px;
    height: 670px;
    /* top: 60px; */
    top: 50px;
  }
}

@media (max-width: 1440px) {
  .gradient-pattern {
    /* left: -90px; */
    left: -133px;
    /* width: 765px;
    height: 770px; */
    top: 63px;
  }
}

@media (max-width: 1200px) {
  .common-gradient {
    height: 460px;
  }

  .gradient-pattern {
    width: 500px;
    left: -170px;
  }
}

@media (max-width: 991px) {
  .common-gradient {
    height: 420px;
  }

  .gradient-pattern {
    width: 420px;
    left: -170px;
    top: 30px;
  }
}

@media (max-width: 768px) {
  .common-gradient {
    height: 360px;
  }

  .gradient-pattern {
    width: 300px;
    left: -120px;
    top: 40px;
    opacity: 0.1;
  }
}

@media (max-width: 480px) {
  .common-gradient {
    height: 300px;
  }

  .gradient-pattern {
    width: 230px;
    left: -90px;
    top: 55px;
  }
}