/* =========================================================
   MOBILE APP STYLE RESPONSIVE
   GODAVARI COMMODITIES LTD.
   ========================================================= */

/* ---------- GLOBAL MOBILE ---------- */

@media (max-width: 768px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background: #f5f7f8;
    -webkit-tap-highlight-color: transparent;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
  }


  /* =====================================================
     TOP BAR
     ===================================================== */

  .topbar {
    width: 100%;
    height: 48px;
  }

  .topbar-inner {
    height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }

  .top-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
  }

  .top-links a {
    font-size: 12px;
    white-space: nowrap;
  }

  .top-icons {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .top-icons a {
    font-size: 17px;
  }


  /* =====================================================
     MOBILE HEADER
     ===================================================== */

  .header {
    position: sticky;
    top: 0;
    z-index: 9999;

    width: 100%;
    height: 94px;

    margin: 0;
    padding: 0 5px;

    border-radius: 0 0 18px 18px;

    background: #ffffff;

    box-shadow:
      0 5px 20px rgba(0, 0, 0, 0.08);
  }

  .navbar {
    height: 94px;
    padding: 0;

    margin: 0 !important;

    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 5px;

    min-width: 0;
  }

  .logo-box {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    border-radius: 7px;
  }

  .logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .logo-text {
    min-width: 0;
  }

  .logo-text h2 {
    font-size: 18px;
    line-height: 0.98;

    font-weight: 800;

    white-space: nowrap;
  }

  .logo-text span {
    display: none;
  }

  /* hamburger */

  .mobile-toggle {
    display: flex !important;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    font-size: 0 !important;

    color: #111;

    cursor: pointer;

    border-radius: 12px;

    background: #f5f7f8;

    transition: 0.25s ease;
  }

  .mobile-toggle::before {
    content: "\f0c9";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    font-size: 25px;
  }

  .mobile-toggle:active {
    transform: scale(0.92);
  }


  /* =====================================================
     MOBILE MENU / APP DRAWER
     ===================================================== */
  .nova-layer{
      backdrop-filter:unset;
  }
  .nav-right {
    position: fixed;

    top: 0;
    right: -100%;

    width: min(88vw, 360px);
    height: 100dvh;

    padding: 90px 20px 30px;

    background: #ffffff;

    box-shadow:
      -15px 0 45px rgba(0, 0, 0, 0.12);

    border-radius: 25px 0 0 25px;

    transition: right 0.35s cubic-bezier(.4, 0, .2, 1);

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

    display: block;
  }

  .nav-right.active {
    right: 0;
  }

  .menu {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 5px;
  }

  .menu > li {
    width: 100%;
  }

  .menu > li > a {
    min-height: 54px;

    width: 100%;

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

    padding: 15px 12px;

    border-bottom: 1px solid #eeeeee;

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

    border-radius: 10px;
  }

  .menu > li > a:active {
    background: #f1f7f3;
  }

  .dropdown {
    position: relative;

    top: auto;
    left: auto;

    width: 100%;

    padding: 5px 0 8px 10px;

    border-radius: 0;

    box-shadow: none;

    background: transparent;

    opacity: 1;
    visibility: visible;
    transform: none;

    display: none;
  }

  .menu li.active .dropdown {
    display: block;
  }

  .dropdown a {
    padding: 12px 14px;

    font-size: 14px;

    border-radius: 9px;
  }

  .nav-btns {
    width: 100%;

    margin-top: 25px;

    display: flex;
    flex-direction: column;

    gap: 10px;
  }

  .btn {
    width: 100%;
    min-height: 50px;

    justify-content: center;

    border-radius: 12px;
  }


  /* =====================================================
     HERO - APP STYLE
     ===================================================== */

  .hero {
    position: relative;

    width: 100%;

    height: calc(100svh - 94px);

    min-height: 570px;
    max-height: 760px;

    margin: 0;

    overflow: hidden;

    background: #111;
  }

  .heroSwiper,
  .heroSwiper .swiper-wrapper,
  .heroSwiper .swiper-slide {
    width: 100%;
    height: 100%;
  }

  .heroSwiper .swiper-slide {
    position: relative;

    overflow: hidden;

    transform: none;

    opacity: 0;

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

  .heroSwiper .swiper-slide-active {
    opacity: 1;

    transform: none;

    z-index: 5;
  }

  .heroSwiper video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: 58% center;

    transform: scale(1.01);
  }

  /* dark overlay */

  .hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.38) 35%,
        rgba(0, 0, 0, 0.78) 100%
      );
  }


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

  .hero-content {
    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    align-items: flex-end;

    padding-bottom: 55px;
  }

  .hero-content .container {
    width: 100%;

    max-width: 100%;

    padding: 0 20px;

    margin: 0;
  }

  .hero-grid {
    width: 100%;

    display: block;
  }

  .hero-left {
    width: 100%;
    max-width: 100%;

    color: #ffffff;
  }

  .hero-left small {
    display: inline-block;

    margin-bottom: 14px;

    padding-left: 16px;

    font-size: 11px;
    line-height: 1.4;

    letter-spacing: 2.5px;

    color: rgba(255, 255, 255, 0.88);
  }

  .hero-left small::before {
    width: 9px;
    height: 2px;
  }


  /* heading */

  .hero-left h1 {
    margin: 0 0 18px;

    font-size: clamp(38px, 11vw, 52px);

    line-height: 1.02;

    letter-spacing: -1.2px;

    font-weight: 800;

    color: #ffffff;
  }

  .hero-left h1 span {
    color: #c38f41;
  }


  /* description */

  .hero-left p {
    width: 100%;
    max-width: 355px;

    margin: 0;

    font-size: 15px;

    line-height: 1.65;

    color: rgba(255, 255, 255, 0.84);
  }


  /* hide buttons if later enabled */

  .hero-btns {
    margin-top: 24px;

    flex-direction: column;

    gap: 10px;

    align-items: stretch;
  }

  .hero-btn {
    width: 100%;

    min-height: 52px;

    padding: 14px 22px;

    border-radius: 14px;
  }


  /* =====================================================
     HERO NAVIGATION
     ===================================================== */

  .hero-nav {
    position: absolute;

    right: 18px;
    bottom: 22px;

    z-index: 20;

    display: flex;

    gap: 8px;
  }

  .hero-prev,
  .hero-next {
    width: 40px;
    height: 40px;

    border-radius: 50%;

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

    border: 1px solid rgba(255,255,255,0.3);

    background: rgba(255,255,255,0.12);

    color: #ffffff;

    backdrop-filter: blur(10px);
  }

  .hero-pagination {
    position: absolute;

    left: 20px;
    bottom: 25px;

    z-index: 20;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
  }

  .hero-progress {
    position: absolute;

    left: 20px;
    right: 20px;

    bottom: 10px;

    z-index: 20;

    height: 2px;

    background: rgba(255,255,255,0.25);
  }


  /* =====================================================
     GQX CARDS
     ===================================================== */

  .gqx-section {
    padding: 35px 0;

    overflow: hidden;
  }

  .gqx-container {
    width: 100%;

    padding: 0 15px;
  }

  .gqx-card-carousel {
    width: 100%;
  }

  .gqx-card {
    min-height: 245px;

    padding: 25px 22px;

    border-radius: 20px;
  }

  .gqx-card h3 {
    font-size: 17px;

    line-height: 1.25;
  }

  .gqx-card p {
    font-size: 13px;

    line-height: 1.65;
  }


  /* =====================================================
     BUSINESS SHOWCASE
     ===================================================== */

  .gx-showcase-section {
    padding: 55px 15px;

    overflow: hidden;
  }

  .business-heading {
    padding: 0 3px;

    margin-bottom: 25px;
  }

  .business-heading h2 {
    font-size: 30px;

    line-height: 1.15;
  }

  .business-heading p {
    font-size: 14px;

    line-height: 1.7;
  }

  .gx-showcase-track {
    display: flex;

    gap: 16px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    padding: 5px 2px 20px;

    scrollbar-width: none;
  }

  .gx-showcase-track::-webkit-scrollbar {
    display: none;
  }

  .gx-showcase-card {
    min-width: calc(100vw - 40px);

    width: calc(100vw - 40px);

    flex: 0 0 calc(100vw - 40px);

    scroll-snap-align: center;

    border-radius: 22px;

    overflow: hidden;
  }

  .gx-image {
    height: 240px;
  }

  .gx-content {
    padding: 24px 20px;
  }

  .gx-content h3 {
    font-size: 24px;
  }

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

    line-height: 1.7;
  }

  .gx-btn {
    width: 100%;

    min-height: 48px;

    justify-content: center;

    border-radius: 12px;
  }


  /* =====================================================
     ABOUT SECTION
     ===================================================== */

  .about-section {
    padding: 65px 0;

    overflow: hidden;
  }

  .about-wrapper {
    display: flex;

    flex-direction: column;

    gap: 40px;
  }

  .about-image-side {
    width: 100%;
  }

  .about-image-main {
    width: 100%;

    border-radius: 22px;
  }

  .about-image-main img {
    width: 100%;

    height: 430px;

    object-fit: cover;
  }

  .floating-card {
    right: 12px;

    top: auto;
    bottom: 18px;

    min-width: 0;

    width: calc(100% - 35px);

    padding: 14px 16px;

    border-radius: 16px;

    gap: 12px;
  }

  .floating-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

    font-size: 20px;
  }

  .floating-card h4 {
    font-size: 16px;

    margin-bottom: 3px;
  }

  .floating-card span {
    font-size: 12px;
  }

  .about-content {
    width: 100%;
  }

  .section-tag {
    font-size: 12px;

    letter-spacing: 1px;

    margin-bottom: 12px;
  }

  .about-content h2 {
    font-size: 30px;

    line-height: 1.15;

    margin-bottom: 18px;
  }

  .about-text {
    font-size: 14px;

    line-height: 1.75;

    margin-bottom: 25px;
  }

  .about-features {
    display: flex;

    flex-direction: column;

    gap: 20px;
  }

  .about-feature-item {
    gap: 12px;
  }

  .feature-check {
    width: 42px;
    height: 42px;

    min-width: 42px;

    border-radius: 11px;

    font-size: 14px;
  }

  .about-feature-item h4 {
    font-size: 15px;

    margin-bottom: 5px;
  }

  .about-feature-item p {
    font-size: 13px;

    line-height: 1.6;
  }

  .about-btns {
    margin-top: 28px;

    display: flex;

    flex-direction: column;

    gap: 10px;
  }

  .about-btn {
    width: 100%;

    height: 52px;

    justify-content: center;

    border-radius: 13px;
  }


  /* =====================================================
     NOVA / INFRASTRUCTURE
     ===================================================== */

  .nova-block {
    padding: 65px 0;
  }

  .nova-wrap {
    padding-left: 15px;
    padding-right: 15px;
  }

  .nova-block h2 {
    font-size: 30px !important;

    line-height: 1.15;
  }

  .nova-block .text-light {
    font-size: 14px;

    line-height: 1.7;
  }

  .nova-box {
    border-radius: 20px;

    overflow: hidden;
  }

  .nova-media {
    height: 390px;
  }

  .nova-info {
    padding: 20px;
  }

  .nova-content h3 {
    font-size: 23px;

    line-height: 1.2;
  }

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

    line-height: 1.65;
  }

  .nova-link {
    min-height: 45px;

    padding: 10px 18px;

    border-radius: 10px;
  }


  /* =====================================================
     NETWORK SECTION
     ===================================================== */

  .network-section {
    padding: 65px 0;

    overflow: hidden;
  }

  .network-container {
    width: 100%;

    padding: 0 18px;

    display: flex;

    flex-direction: column;

    gap: 45px;
  }

  .network-left {
    width: 100%;
  }

  .network-subtitle {
    font-size: 12px;

    letter-spacing: 2px;
  }

  .network-title {
    font-size: 34px;

    line-height: 1.08;
  }

  .network-description {
    font-size: 14px;

    line-height: 1.7;
  }

  .counter-wrapper {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
  }

  .counter-card {
    min-width: 0;

    padding: 18px 12px;

    border-radius: 16px;
  }

  .counter-content h3 {
    font-size: 25px;
  }

  .counter-content span {
    font-size: 11px;
  }

  .network-right {
    width: 100%;

    min-height: 350px;
  }

  .globe-wrapper {
    transform: scale(0.78);

    transform-origin: center center;
  }


  /* =====================================================
     LIFE AT GODAVARI
     ===================================================== */

  .life-section {
    width: 100%;

    min-height: 480px;

    overflow: hidden;
  }

  .life-video,
  .life-overlay,
  .life-overlay img {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }

  .life-content h5 {
    font-size: 16px;
  }

  .life-content h1 {
    font-size: 48px;
  }

  .play-btn {
    width: 62px;
    height: 62px;
  }


  /* =====================================================
     PROJECTS
     ===================================================== */

  .projects-section {
    overflow: hidden;
  }


  /* =====================================================
     FOOTER
     ===================================================== */

  .footer {
    padding: 55px 0 35px;
  }

  .footer-grid {
    display: flex;

    flex-direction: column;

    gap: 30px;
  }

  .footer h3 {
    font-size: 21px;

    margin-bottom: 15px;
  }

  .footer p {
    font-size: 14px;

    line-height: 1.7;
  }

  .footer ul {
    gap: 10px;
  }

  .footer ul a {
    font-size: 14px;
  }

  .news-box {
    padding: 15px;

    border-radius: 15px;
  }

  .subscribe input {
    min-width: 0;

    padding: 14px;
  }

  .subscribe button {
    padding: 0 17px;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

  .header {
    height: 86px;
  }

  .navbar {
    height: 86px;
  }

  .logo-box {
    width: 52px;
    height: 52px;

    flex-basis: 52px;
  }

  .logo-text h2 {
    font-size: 16px;
  }

  .mobile-toggle {
    width: 42px;
    height: 42px;

    flex-basis: 42px;
  }

  .hero {
    height: calc(100svh - 86px);

    min-height: 530px;
  }

  .hero-content {
    padding-bottom: 50px;
  }

  .hero-left h1 {
    font-size: 37px;

    letter-spacing: -1px;
  }

  .hero-left p {
    font-size: 14px;

    max-width: 330px;
  }

  .hero-nav {
    right: 15px;
  }

  .about-content h2,
  .business-heading h2,
  .nova-block h2 {
    font-size: 27px !important;
  }

  .network-title {
    font-size: 30px;
  }

  .counter-wrapper {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 350px) {

  .logo-text h2 {
    font-size: 14px;
  }

  .logo-box {
    width: 48px;
    height: 48px;

    flex-basis: 48px;
  }

  .hero-left h1 {
    font-size: 34px;
  }

  .hero-left p {
    font-size: 13px;
  }
}



/* =========================================================
   OUR STORY / JOURNEY
   MOBILE APP STYLE RESPONSIVE
   GSAP SAFE VERSION
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .enterprise-section {
        padding: 80px 30px;
    }

    .enterprise-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .enterprise-left {
        max-width: 800px;
    }

    .enterprise-right {
        width: 100%;
    }

    .hero-image {
        width: 100%;
    }

    .hero-image img {
        width: 100%;
        height: 520px;
        object-fit: cover;
    }

    .bottom-gallery {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .journey-section {
        padding-top: 90px;
    }

    .journey-header {
        padding: 0 30px;
        margin-bottom: 50px;
    }

    .journey-header h2 {
        font-size: 52px;
    }

    .journey-header p {
        font-size: 17px;
    }

    .timeline-nav {
        gap: 45px;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0 30px;
        scrollbar-width: none;
    }

    .timeline-nav::-webkit-scrollbar {
        display: none;
    }

    /*
       Keep horizontal journey for tablet.
       Mobile will change it completely.
    */

    .journey-slide {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 0 5%;
    }

    .journey-image img {
        height: 390px;
    }

    .journey-content {
        max-width: 100%;
    }

    .journey-content h2 {
        font-size: 34px;
    }

    .journey-content p {
        font-size: 17px;
        line-height: 1.8;
    }
}


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

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        -webkit-overflow-scrolling: touch;
    }


    /* =====================================================
       ENTERPRISE / INTRO SECTION
       ===================================================== */

    .enterprise-section {
        width: 100%;

        padding: 55px 18px 45px;

        overflow: hidden;

        background: #f7f7f4;
    }

    .enterprise-wrapper {
        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 35px;
    }

    .enterprise-left {
        width: 100%;
        max-width: 100%;
    }

    .enterprise-tag {
        display: inline-block;

        margin-bottom: 12px;

        font-size: 11px;

        line-height: 1.4;

        letter-spacing: 2.5px;
    }

    .enterprise-title {
        margin: 0;

        font-size: clamp(40px, 12vw, 56px);

        line-height: 0.98;

        letter-spacing: -1.5px;
    }

    .enterprise-divider {
        width: 55px;

        height: 3px;

        margin: 20px 0;
    }

    .enterprise-quote {
        margin: 0 0 20px;

        padding-left: 16px;

        font-size: 18px;

        line-height: 1.45;
    }

    .enterprise-description {
        margin: 0;

        font-size: 14px;

        line-height: 1.8;

        color: #666;
    }


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

    .enterprise-right {
        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 14px;
    }

    .hero-image {
        width: 100%;

        border-radius: 20px;

        overflow: hidden;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.12);
    }

    .hero-image img {
        width: 100%;

        height: 360px;

        display: block;

        object-fit: cover;
    }


    /* =====================================================
       BOTTOM GALLERY
       ===================================================== */

    .bottom-gallery {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }

    .gallery-item {
        position: relative;

        height: 145px;

        border-radius: 14px;

        overflow: hidden;

        background: #111;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;

        transition: transform 0.5s ease;
    }

    .gallery-item span {
        position: absolute;

        left: 10px;
        bottom: 10px;

        z-index: 2;

        padding: 6px 9px;

        border-radius: 7px;

        background: rgba(0, 0, 0, 0.55);

        color: #fff;

        font-size: 11px;

        font-weight: 600;

        backdrop-filter: blur(8px);
    }

    .gallery-item:active img {
        transform: scale(1.04);
    }


    /* =====================================================
       OMC SECTION
       ===================================================== */

    .omc-section {
        position: relative;

        width: 100%;

        padding: 65px 18px;

        overflow: hidden;
    }

    .omc-container {
        width: 100%;

        max-width: 100%;

        margin: 0 auto;

        display: flex;

        flex-direction: column;

        gap: 35px;
    }

    .omc-content {
        width: 100%;
    }

    .omc-text {
        margin: 0;

        font-size: 14px;

        line-height: 1.8;
    }


    /* =====================================================
       OMC CARDS
       ===================================================== */

    .omc-cards {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .omc-card {
        width: 100% !important;

        min-height: auto;

        padding: 20px;

        border-radius: 16px;
    }

    .omc-card-heading {
        display: flex;

        align-items: center;

        gap: 12px;

        margin-bottom: 12px;
    }

    .omc-icon {
        width: 42px;
        height: 42px;

        min-width: 42px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;
    }

    .omc-icon-title {
        font-size: 16px;

        font-weight: 700;
    }

    .omc-card-text {
        font-size: 13px;

        line-height: 1.65;
    }


    /* =====================================================
       JOURNEY SECTION
       ===================================================== */

    .journey-section {
        width: 100%;

        padding: 60px 0 0;

        overflow: hidden;

        background: #f7f7f4;
    }


    /* =====================================================
       JOURNEY HEADER
       ===================================================== */

    .journey-header {
        width: 100%;

        max-width: 100%;

        margin: 0;

        padding: 0 18px 35px;

        text-align: left;
    }

    .journey-subtitle {
        margin-bottom: 12px;

        font-size: 11px;

        letter-spacing: 2.5px;
    }

    .journey-header h2 {
        margin-bottom: 16px;

        font-size: clamp(34px, 10vw, 45px);

        line-height: 1.05;

        letter-spacing: -1px;
    }

    .journey-header p {
        width: 100%;

        max-width: 100%;

        margin: 0;

        font-size: 14px;

        line-height: 1.75;
    }


    /* =====================================================
       TIMELINE NAVIGATION
       ===================================================== */

    .timeline-nav-wrapper {
        position: sticky;

        top: 0;

        z-index: 100;

        width: 100%;

        background: rgba(255, 255, 255, 0.96);

        backdrop-filter: blur(15px);

        -webkit-backdrop-filter: blur(15px);

        border-top: 1px solid #eeeeee;

        border-bottom: 1px solid #eeeeee;
    }

    .timeline-nav {
        width: 100%;

        height: 65px;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        gap: 25px;

        padding: 0 18px;

        overflow-x: auto;

        overflow-y: hidden;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .timeline-nav::-webkit-scrollbar {
        display: none;
    }

    .timeline-year {
        flex: 0 0 auto;

        min-width: max-content;

        padding: 8px 0;

        font-size: 13px;

        font-weight: 700;

        white-space: nowrap;

        color: #888;
    }

    .timeline-year::after {
        width: 7px;
        height: 7px;

        bottom: -9px;
    }

    .timeline-year.active {
        color: #0b6b43;

        transform: scale(1.05);
    }

    .timeline-progress {
        height: 2px;

        bottom: 0;

        transform-origin: left center;
    }


    /* =====================================================
       IMPORTANT:
       DISABLE DESKTOP HORIZONTAL GSAP STRUCTURE
       ON MOBILE
       ===================================================== */

    .journey-pin {
        width: 100%;

        height: auto !important;

        min-height: 0 !important;

        overflow: visible !important;

        position: relative !important;
    }

    .journey-track {
        width: 100%;

        height: auto !important;

        display: flex !important;

        flex-direction: column !important;

        transform: none !important;

        position: relative !important;
    }


    /* =====================================================
       STORY SLIDE
       ===================================================== */

    .journey-slide {
        width: 100% !important;

        min-width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch;

        gap: 0;

        padding: 35px 18px 65px;

        text-align: left;

        transform: none !important;

        position: relative;

        opacity: 1 !important;

        visibility: visible !important;
    }


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

    .journey-image {
        width: 100%;

        margin: 0 0 25px;

        border-radius: 20px;

        overflow: hidden;

        box-shadow:
            0 18px 45px rgba(0, 0, 0, 0.13);
    }

    .journey-image img {
        width: 100%;

        height: 300px;

        display: block;

        object-fit: cover;

        transform: none !important;

        transition: transform 0.5s ease;
    }

    .journey-slide:active .journey-image img {
        transform: scale(1.02) !important;
    }


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

    .journey-content {
        width: 100%;

        max-width: 100%;

        margin: 0;

        text-align: left;
    }

    .journey-year {
        display: inline-block;

        margin-bottom: 10px;

        font-size: 13px;

        letter-spacing: 2px;

        font-weight: 800;

        color: #0b6b43;
    }

    .journey-content h2 {
        margin: 0 0 15px;

        font-size: clamp(28px, 8vw, 36px);

        line-height: 1.08;

        letter-spacing: -0.5px;

        color: #111;
    }

    .journey-content p {
        width: 100%;

        margin: 0;

        font-size: 14px;

        line-height: 1.8;

        color: #666;
    }


    /* =====================================================
       STORY CARD SEPARATOR
       ===================================================== */

    .journey-slide + .journey-slide {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }


    /* =====================================================
       MOBILE GSAP SAFETY
       ===================================================== */

    /*
       If GSAP adds inline transform/opacity to slides,
       force the mobile layout to remain visible.
    */

    .journey-track,
    .journey-slide,
    .journey-image,
    .journey-content {
        will-change: auto;
    }

    .journey-slide[style] {
        opacity: 1;
    }


    /* =====================================================
       FOOTER SPACING
       ===================================================== */

    .journey-section + footer,
    .journey-section + .footer {
        margin-top: 0;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .enterprise-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .enterprise-title {
        font-size: 40px;
    }

    .enterprise-quote {
        font-size: 17px;
    }

    .enterprise-description {
        font-size: 13px;
        line-height: 1.75;
    }

    .hero-image img {
        height: 300px;
    }

    .gallery-item {
        height: 125px;
    }

    .journey-section {
        padding-top: 50px;
    }

    .journey-header {
        padding-left: 15px;
        padding-right: 15px;
    }

    .journey-header h2 {
        font-size: 34px;
    }

    .journey-header p {
        font-size: 13px;
    }

    .timeline-nav {
        height: 60px;

        gap: 22px;

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

    .timeline-year {
        font-size: 12px;
    }

    .journey-slide {
        padding-left: 15px;
        padding-right: 15px;

        padding-top: 30px;
        padding-bottom: 55px;
    }

    .journey-image {
        border-radius: 17px;
    }

    .journey-image img {
        height: 255px;
    }

    .journey-content h2 {
        font-size: 28px;
    }

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

        line-height: 1.75;
    }

    .omc-section {
        padding-left: 15px;
        padding-right: 15px;
    }

}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 360px) {

    .enterprise-title {
        font-size: 36px;
    }

    .hero-image img {
        height: 270px;
    }

    .journey-header h2 {
        font-size: 31px;
    }

    .journey-image img {
        height: 230px;
    }

    .journey-content h2 {
        font-size: 26px;
    }
}

/* =========================================================
   OMC CARDS - FINAL MOBILE FIX
   ========================================================= */

@media (max-width: 600px) {

    .omc-section {
        width: 100%;
        min-height: auto !important;

        padding: 40px 0 50px;

        overflow: hidden;
    }

    .omc-container {
        width: calc(100% - 30px) !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: block !important;
    }


    /* ==============================================
       CARDS GRID
       ============================================== */

    .omc-cards {
        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;

        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;

        grid-template-rows: auto auto auto !important;

        column-gap: 12px !important;
        row-gap: 12px !important;

        margin: 0 !important;

        overflow: visible !important;
    }


    /* ==============================================
       ALL CARDS
       ============================================== */

    .omc-card {
        width: 100% !important;
        min-width: 0 !important;

        height: 195px !important;

        padding: 18px 14px !important;

        box-sizing: border-box !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: flex-start !important;
    }


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

    .omc-card-heading {
        width: 100%;

        display: flex !important;

        align-items: center !important;

        gap: 0px !important;

        min-height: 42px !important;

        margin-bottom: 3px !important;

        overflow: hidden;
    }


    /* ==============================================
       ICON
       ============================================== */

    .omc-icon {
        width: 32px !important;
        height: 32px !important;

        min-width: 32px !important;
        flex: 0 0 32px !important;

        font-size: 21px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;
    }


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

    .omc-icon-title {
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}


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

    .omc-card-text {
        width: 100% !important;

        max-width: 100% !important;

        font-size: 13px !important;

        line-height: 1.65 !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;

        white-space: normal !important;

        overflow: hidden !important;
    }


    /* ==============================================
       TRUST
       ============================================== */

    .omc-card:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }


    /* ==============================================
       INTEGRATION
       ============================================== */

    .omc-card:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }


    /* ==============================================
       GROWTH
       ============================================== */

    .omc-card:nth-child(3) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }


    /* ==============================================
       RESPONSIBILITY
       ============================================== */

    .omc-card:nth-child(4) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }


    /* ==============================================
       VISION
       ============================================== */

    .omc-card.vision-card {
        grid-column: 1 / 3 !important;

        grid-row: 3 !important;

        width: 100% !important;

        min-width: 0 !important;

        height: 170px !important;

        padding: 20px 18px !important;
    }

    .omc-card.vision-card .omc-card-text {
        font-size: 13px !important;

        line-height: 1.65 !important;
    }

}



/* =========================================================
   OUR STORY - DESKTOP / MOBILE SWITCH
   ========================================================= */

/* MOBILE VERSION HIDDEN ON DESKTOP */
.story-mobile-section {
    display: none;
}


/* DESKTOP VERSION */
.story-desktop-only {
    display: block;
}


/* =========================================================
   MOBILE STORY
   ========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------
       HIDE DESKTOP STORY
    ----------------------------------------- */

    .story-desktop-only {
        display: none !important;
    }


    /* -----------------------------------------
       SHOW MOBILE STORY
    ----------------------------------------- */

    .story-mobile-section {
        display: block !important;

        width: 100%;

        background: #ffffff;

        padding: 55px 0 65px;

        overflow: hidden;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       CONTAINER
    ----------------------------------------- */

    .story-mobile-container {

        width: calc(100% - 30px);

        max-width: 500px;

        margin: 0 auto;

        box-sizing: border-box;
    }


    /* -----------------------------------------
       HEADING
    ----------------------------------------- */

    .story-mobile-heading {

        text-align: center;

        margin-bottom: 35px;
    }


    .story-mobile-tag {

        display: inline-block;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 12px;

        font-weight: 700;

        letter-spacing: 2.5px;

        color: #c18d55;

        margin-bottom: 12px;
    }


    .story-mobile-heading h2 {

        margin: 0;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 30px;

        line-height: 1.18;

        font-weight: 700;

        color: #171717;
    }


    .story-mobile-line {

        width: 55px;

        height: 3px;

        background: #187b4e;

        margin: 18px auto 0;

        border-radius: 10px;
    }


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

    .story-mobile-card {

        width: 100%;

        margin-bottom: 28px;

        background: #ffffff;

        border-radius: 22px;

        overflow: hidden;

        border: 1px solid #eeeeee;

        box-shadow:
            0 10px 35px rgba(0, 0, 0, 0.07);

        box-sizing: border-box;
    }


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

    .story-mobile-image {

        width: 100%;

        height: 230px;

        overflow: hidden;

        background: #f1f1f1;
    }


    .story-mobile-image img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center;

    }


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

    .story-mobile-content {

        padding: 23px 20px 26px;

        box-sizing: border-box;
    }


    /* YEAR */

    .story-mobile-year {

        display: inline-block;

        margin-bottom: 9px;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 13px;

        line-height: 1;

        font-weight: 700;

        letter-spacing: 1.5px;

        color: #187b4e;

        text-transform: uppercase;
    }


    /* TITLE */

    .story-mobile-content h3 {

        margin: 0 0 16px;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 24px;

        line-height: 1.25;

        font-weight: 700;

        color: #171717;
    }


    /* DESCRIPTION */

    .story-mobile-content p {

        margin: 0;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 14px;

        line-height: 1.75;

        font-weight: 400;

        color: #555555;

        word-break: normal;

        overflow-wrap: break-word;
    }


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

    .story-mobile-future {

        background: #187b4e;

        border: none;
    }


    .story-mobile-future .story-mobile-content {

        color: #ffffff;
    }


    .story-mobile-future .story-mobile-year {

        color: #dcb47b;
    }


    .story-mobile-future .story-mobile-content h3 {

        color: #ffffff;
    }


    .story-mobile-future .story-mobile-content p {

        color: rgba(255, 255, 255, 0.94);
    }


    /* =================================================
       SMALL MOBILE
       ================================================= */

    @media (max-width: 380px) {

        .story-mobile-section {
            padding-top: 45px;
            padding-bottom: 50px;
        }


        .story-mobile-container {
            width: calc(100% - 24px);
        }


        .story-mobile-heading h2 {
            font-size: 27px;
        }


        .story-mobile-image {
            height: 205px;
        }


        .story-mobile-content {
            padding: 20px 17px 23px;
        }


        .story-mobile-content h3 {
            font-size: 22px;
        }


        .story-mobile-content p {
            font-size: 13px;
            line-height: 1.7;
        }

    }

}


/* =========================================================
   CHAIRMAN EMERITUS
   MOBILE APP STYLE RESPONSIVE
   DESKTOP VERSION UNTOUCHED
   ========================================================= */


/* =========================================================
   GLOBAL MOBILE SAFETY
   ========================================================= */

@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .chairman-area,
    .chairman-area * {
        box-sizing: border-box;
    }


    /* =====================================================
       MAIN SECTION
       ===================================================== */

    .chairman-area {
        width: 100%;

        padding: 45px 0 55px !important;

        overflow: hidden;

        background: #f7f7f4;
    }


    /* =====================================================
       CONTAINER
       ===================================================== */

    .chairman-area .container {
        width: 100% !important;

        max-width: 100% !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        margin: 0 auto;
    }


    /* =====================================================
       MAIN WRAPPER
       ===================================================== */

    .chairman-wrapper {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 35px !important;

        margin: 0 !important;
    }


    /* =====================================================
       CHAIRMAN IMAGE AREA
       ===================================================== */

    .chairman-left {
        position: relative;

        width: 100% !important;

        max-width: 100% !important;

        height: 380px !important;

        margin: 0 !important;

        padding: 0 !important;

        display: block !important;
    }


    /* Decorative background */

    .chairman-bg-box {
        position: absolute !important;

        top: 12px !important;
        left: 12px !important;

        width: calc(100% - 24px) !important;

        height: calc(100% - 24px) !important;

        border-radius: 24px !important;

        transform: none !important;

        opacity: 1;

        z-index: 1;
    }


    /* =====================================================
       PHOTO
       ===================================================== */

    .chairman-photo {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        width: calc(100% - 22px) !important;

        height: 350px !important;

        margin: 0 !important;

        border-radius: 24px !important;

        overflow: hidden !important;

        z-index: 3;

        box-shadow:
            0 18px 45px rgba(0, 0, 0, 0.14);
    }


    .chairman-photo img {
        display: block !important;

        width: 100% !important;

        height: 100% !important;

        object-fit: cover !important;

        object-position: center center !important;

        transform: none !important;
    }


    /* =====================================================
       DECORATIVE BORDER
       ===================================================== */

    .chairman-border {
        position: absolute !important;

        right: 0 !important;
        bottom: 0 !important;

        width: 75% !important;

        height: 75% !important;

        border-radius: 24px !important;

        z-index: 2;

        pointer-events: none;
    }


    /* =====================================================
       DOTS
       ===================================================== */

    .chairman-dots {
        position: absolute !important;

        right: 5px !important;
        bottom: 18px !important;

        width: 65px !important;
        height: 65px !important;

        z-index: 4;

        opacity: .8;
    }


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

    .chairman-right {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;
    }


    /* =====================================================
       SUBTITLE
       ===================================================== */

    .chairman-subtitle {
        display: block !important;

        width: 100%;

        margin: 0 0 10px !important;

        font-size: 10px !important;

        line-height: 1.5 !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;

        color: #b9854b;

        text-align: left;
    }


    .chairman-small-line {
        display: block !important;

        width: 42px !important;

        height: 3px !important;

        margin: 0 0 15px !important;

        border-radius: 10px;

        background: #187b4e;
    }


    /* =====================================================
       MAIN TITLE
       ===================================================== */

    .chairman-title {
        width: 100% !important;

        margin: 0 !important;

        font-size: 32px !important;

        line-height: 1.1 !important;

        letter-spacing: -0.7px !important;

        font-weight: 700 !important;

        color: #171717;
    }


    .chairman-title span {
        display: block;

        color: #187b4e;
    }


    /* =====================================================
       DIVIDER
       ===================================================== */

    .chairman-divider {
        width: 100% !important;

        height: 1px !important;

        margin: 20px 0 22px !important;

        background: rgba(0, 0, 0, 0.10);
    }


    /* =====================================================
       MESSAGE ITEMS
       ===================================================== */

    .chairman-item {
        width: 100% !important;

        max-width: 100% !important;

        display: flex !important;

        align-items: flex-start !important;

        gap: 14px !important;

        margin: 0 0 14px !important;

        padding: 18px 15px !important;

        background: #ffffff;

        border: 1px solid rgba(0, 0, 0, 0.06);

        border-radius: 18px !important;

        box-shadow:
            0 8px 25px rgba(0, 0, 0, 0.055);

        overflow: hidden;
    }


    /* =====================================================
       MESSAGE ICON
       ===================================================== */

    .chairman-icon {
        width: 38px !important;

        min-width: 38px !important;

        height: 38px !important;

        flex: 0 0 38px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        margin: 0 !important;

        border-radius: 12px !important;

        background: #187b4e;

        color: #ffffff;

        font-size: 16px !important;

        box-shadow: none !important;
    }


    .chairman-icon.gold {
        background: #c18d55 !important;

        color: #ffffff !important;
    }


    /* =====================================================
       MESSAGE TEXT
       ===================================================== */

    .chairman-text {
        width: auto !important;

        min-width: 0 !important;

        flex: 1 1 auto !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .chairman-text p {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: 13px !important;

        line-height: 1.75 !important;

        color: #555555;

        word-break: normal !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       SIGNATURE
       ===================================================== */

    .chairman-sign {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;

        gap: 14px !important;

        margin: 12px 0 0 !important;

        padding: 18px 16px !important;

        background: #187b4e;

        border-radius: 18px !important;

        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.12);

        overflow: hidden;
    }


    /* =====================================================
       SIGNATURE ICON
       ===================================================== */

    .quote-icon {
        width: 42px !important;

        min-width: 42px !important;

        height: 42px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 50% !important;

        background: rgba(255, 255, 255, 0.14);

        color: #ffffff;

        font-size: 18px !important;
    }


    /* =====================================================
       CHAIRMAN NAME
       ===================================================== */

    .chairman-name {
        min-width: 0 !important;

        flex: 1;
    }


    .chairman-name h4 {
        margin: 0 0 5px !important;

        font-size: 15px !important;

        line-height: 1.3 !important;

        font-weight: 700 !important;

        color: #ffffff;

        white-space: normal !important;
    }


    .chairman-name span {
        display: block !important;

        font-size: 11px !important;

        line-height: 1.4 !important;

        color: rgba(255, 255, 255, 0.78);

        letter-spacing: 0.5px;
    }


    /* =====================================================
       DISABLE DESKTOP DECORATIVE OVERFLOW
       ===================================================== */

    .chairman-left::before,
    .chairman-left::after,
    .chairman-right::before,
    .chairman-right::after {
        max-width: 100%;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .chairman-area {
        padding-top: 38px !important;

        padding-bottom: 48px !important;
    }


    .chairman-area .container {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }


    /* IMAGE */

    .chairman-left {
        height: 335px !important;
    }


    .chairman-photo {
        width: calc(100% - 18px) !important;

        height: 310px !important;

        border-radius: 21px !important;
    }


    .chairman-bg-box {
        top: 10px !important;
        left: 10px !important;

        width: calc(100% - 20px) !important;

        height: calc(100% - 20px) !important;

        border-radius: 21px !important;
    }


    .chairman-border {
        border-radius: 21px !important;

        width: 72% !important;

        height: 72% !important;
    }


    .chairman-dots {
        width: 55px !important;
        height: 55px !important;

        right: 2px !important;
        bottom: 15px !important;
    }


    /* TITLE */

    .chairman-subtitle {
        font-size: 9px !important;

        letter-spacing: 1.7px !important;
    }


    .chairman-title {
        font-size: 29px !important;

        line-height: 1.1 !important;
    }


    /* MESSAGE CARD */

    .chairman-item {
        gap: 11px !important;

        padding: 16px 13px !important;

        border-radius: 16px !important;
    }


    .chairman-icon {
        width: 35px !important;

        min-width: 35px !important;

        height: 35px !important;

        flex-basis: 35px !important;

        border-radius: 10px !important;

        font-size: 14px !important;
    }


    .chairman-text p {
        font-size: 12.5px !important;

        line-height: 1.72 !important;
    }


    /* SIGNATURE */

    .chairman-sign {
        padding: 16px 13px !important;

        border-radius: 16px !important;
    }


    .quote-icon {
        width: 38px !important;

        min-width: 38px !important;

        height: 38px !important;

        font-size: 16px !important;
    }


    .chairman-name h4 {
        font-size: 14px !important;
    }


    .chairman-name span {
        font-size: 10px !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .chairman-area .container {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }


    .chairman-left {
        height: 305px !important;
    }


    .chairman-photo {
        height: 280px !important;
    }


    .chairman-title {
        font-size: 27px !important;
    }


    .chairman-item {
        padding: 14px 11px !important;
    }


    .chairman-icon {
        width: 32px !important;

        min-width: 32px !important;

        height: 32px !important;

        flex-basis: 32px !important;
    }


    .chairman-text p {
        font-size: 12px !important;

        line-height: 1.68 !important;
    }

}


/* =========================================================
   DOMESTIC TRADE
   MOBILE APP STYLE RESPONSIVE
   DESKTOP VERSION UNTOUCHED
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL MOBILE SAFETY
       ===================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .trade-hero,
    .trade-intro,
    .trade-about,
    .gvr-engine-section,
    .gvr-commodity-section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .trade-hero *,
    .trade-intro *,
    .trade-about *,
    .gvr-engine-section *,
    .gvr-commodity-section * {
        box-sizing: border-box;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .trade-hero {
        position: relative;

        width: 100%;

        height: calc(100svh - 94px);

        min-height: 540px;
        max-height: 760px;

        margin: 0;

        overflow: hidden;

        background: #111;
    }


    .trade-hero > img {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center center;

        display: block;
    }


    .trade-overlay {
        position: absolute;

        inset: 0;

        z-index: 1;

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.20) 0%,
                rgba(0, 0, 0, 0.38) 40%,
                rgba(0, 0, 0, 0.82) 100%
            );
    }


    .trade-hero .container {
        position: relative;

        z-index: 2;

        width: 100%;
        max-width: 100%;

        height: 100%;

        padding-left: 18px !important;
        padding-right: 18px !important;

        display: flex;
        align-items: flex-end;
    }


    .trade-content {
        width: 100%;

        padding-bottom: 48px;
    }


    .trade-content small {
        display: block;

        margin-bottom: 13px;

        font-size: 11px;

        letter-spacing: 2.5px;

        line-height: 1.4;

        color: rgba(255,255,255,.88);
    }


    .trade-content h1 {
        margin: 0 0 18px;

        font-size: clamp(44px, 13vw, 60px);

        line-height: .98;

        letter-spacing: -1.5px;

        font-weight: 800;

        color: #fff;
    }


    .trade-content p {
        width: 100%;
        max-width: 340px;

        margin: 0;

        font-size: 15px;

        line-height: 1.65;

        color: rgba(255,255,255,.88);
    }


    /* =====================================================
       INTRO SECTION
       ===================================================== */

    .trade-intro {
        padding: 60px 0;

        background: #f7f7f4;
    }


    .trade-intro .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    .intro-grid {
        width: 100%;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;
    }


    .intro-left,
    .intro-right {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }


    .intro-left .section-tag {
        display: inline-block;

        margin-bottom: 12px;

        font-size: 10px;

        letter-spacing: 2px;
    }


    .intro-left h2 {
        margin: 0;

        font-size: clamp(31px, 9vw, 42px);

        line-height: 1.08;

        letter-spacing: -.8px;
    }


    .trade-quote {
        margin: 0 0 20px;

        padding: 18px 0 18px 17px;

        border-left: 3px solid #c28d4f;

        font-size: 18px;

        line-height: 1.45;

        color: #222;
    }


    .intro-right p {
        margin: 0 0 16px;

        font-size: 14px;

        line-height: 1.8;

        color: #666;
    }


    .intro-right strong {
        color: #222;
    }


    /* =====================================================
       ABOUT DOMESTIC TRADE
       ===================================================== */

    .trade-about {
        padding: 60px 0;

        background: #fff;
    }


    .trade-about .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    .trade-about-grid {
        width: 100%;

        display: flex !important;

        flex-direction: column !important;

        gap: 35px !important;
    }


    .trade-about-image,
    .trade-about-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }


    /* image */

    .trade-about-image {
        position: relative;

        padding-bottom: 35px;
    }


    .trade-about-image .main-image {
        width: 100%;

        height: 360px;

        border-radius: 22px;

        overflow: hidden;

        box-shadow:
            0 15px 40px rgba(0,0,0,.12);
    }


    .trade-about-image .main-image video,
    .trade-about-image .main-image img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center;
    }


    /* experience card */

    .experience-card {
        position: absolute;

        left: 15px;
        bottom: 0;

        width: calc(100% - 30px);

        min-height: 105px;

        padding: 17px 20px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        border-radius: 18px;

        background: #187b4e;

        box-shadow:
            0 12px 30px rgba(0,0,0,.15);
    }


    .experience-card h2 {
        margin: 0 0 3px;

        font-size: 30px;

        line-height: 1;

        color: #fff;
    }


    .experience-card span {
        font-size: 12px;

        line-height: 1.4;

        color: rgba(255,255,255,.9);
    }


    /* content */

    .trade-about-content .section-tag {
        display: inline-block;

        margin-bottom: 12px;

        font-size: 10px;

        letter-spacing: 2px;
    }


    .trade-about-content h2 {
        margin: 0 0 17px;

        font-size: clamp(29px, 8.5vw, 40px);

        line-height: 1.08;

        letter-spacing: -.7px;
    }


    .trade-about-content > p {
        margin: 0 0 25px;

        font-size: 14px;

        line-height: 1.8;

        color: #666;
    }


    /* =====================================================
       FEATURES
       ===================================================== */

    .trade-feature-grid {
        width: 100%;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 10px !important;
    }


    .trade-feature {
        min-width: 0;

        min-height: 58px;

        padding: 13px 10px;

        display: flex;

        align-items: center;

        gap: 8px;

        border-radius: 12px;

        background: #f5f6f4;

        border: 1px solid rgba(0,0,0,.05);
    }


    .trade-feature i {
        width: 25px;

        min-width: 25px;

        height: 25px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        background: #187b4e;

        color: #fff;

        font-size: 10px;
    }


    .trade-feature span {
        min-width: 0;

        font-size: 11px;

        line-height: 1.35;

        font-weight: 600;

        color: #333;
    }


    /* =====================================================
       GVR DELIVERY ENGINE
       ===================================================== */

    .gvr-engine-section {
        width: 100%;

        padding: 65px 0;

        background: #f7f7f4;
    }


    .gvr-engine-container {
        width: calc(100% - 30px) !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;
    }


    /* header */

    .gvr-engine-header {
        width: 100%;

        margin-bottom: 35px;

        text-align: left;
    }


    .gvr-engine-eyebrow {
        font-size: 10px;

        letter-spacing: 2px;

        line-height: 1.4;
    }


    .gvr-engine-heading-line {
        width: 48px;

        height: 3px;

        margin: 14px 0 16px;

        border-radius: 5px;

        background: #c28d4f;
    }


    .gvr-engine-title {
        margin: 0 0 16px;

        font-size: clamp(30px, 9vw, 43px) !important;

        line-height: 1.08;

        letter-spacing: -.8px;
    }


    .gvr-engine-description {
        width: 100%;

        max-width: 100%;

        margin: 0;

        font-size: 14px;

        line-height: 1.75;
    }


    /* =====================================================
       ENGINE SYSTEM
       ===================================================== */

    .gvr-engine-system {
        position: relative !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 12px !important;

        transform: none !important;

        overflow: visible !important;
    }


    /* hide desktop central orbit */

    .gvr-engine-orbit {
        position: relative !important;

        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;

        height: 145px !important;

        margin: 0 0 12px !important;

        transform: none !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                circle,
                rgba(24,123,78,.12),
                rgba(24,123,78,.03) 55%,
                transparent 70%
            );

        opacity: 1 !important;
    }


    .gvr-engine-orbit-inner,
    .gvr-engine-connector {
        display: none !important;
    }


    .gvr-engine-center-ring {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        width: 120px !important;
        height: 120px !important;

        transform: none !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50%;
    }


    .gvr-engine-center {
        width: 96px !important;
        height: 96px !important;

        border-radius: 50%;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;
    }


    .gvr-engine-center-small {
        font-size: 7px !important;

        letter-spacing: 1px;
    }


    .gvr-engine-center-title {
        font-size: 18px !important;

        line-height: 1.1;
    }


    .gvr-engine-center-line {
        margin-top: 5px;

        font-size: 6px !important;

        letter-spacing: .8px;
    }


    .gvr-engine-center-trust {
        margin-top: 5px;

        font-size: 6px !important;
    }


    /* =====================================================
       ENGINE CARDS
       ===================================================== */

    .gvr-engine-card {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;

        min-width: 0 !important;

        min-height: 150px;

        height: auto !important;

        padding: 20px !important;

        display: flex !important;

        align-items: flex-start !important;

        gap: 15px !important;

        border-radius: 18px !important;

        transform: none !important;

        overflow: hidden;
    }


    .gvr-engine-card-icon {
        width: 42px !important;

        min-width: 42px !important;

        height: 42px !important;

        flex: 0 0 42px !important;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 12px;
    }


    .gvr-engine-card-icon svg {
        width: 23px;

        height: 23px;
    }


    .gvr-engine-card-content {
        min-width: 0;

        flex: 1;
    }


    .gvr-engine-card-label {
        margin-bottom: 7px;

        font-size: 9px !important;

        letter-spacing: 1.5px;
    }


    .gvr-engine-card-title {
        margin: 0 0 9px;

        font-size: 20px !important;

        line-height: 1.2;
    }


    .gvr-engine-card-text {
        margin: 0;

        font-size: 12.5px !important;

        line-height: 1.65;
    }


    /* reset desktop positioning */

    .gvr-engine-card-1,
    .gvr-engine-card-2,
    .gvr-engine-card-3,
    .gvr-engine-card-4 {
        position: relative !important;

        transform: none !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }


    .gvr-engine-bottom-text {
        margin-top: 25px;

        text-align: center;

        font-size: 11px;

        line-height: 1.5;
    }


    /* =====================================================
       CORE COMMODITIES
       ===================================================== */

    .gvr-commodity-section {
        width: 100%;

        padding: 65px 0;

        background: #fff;
    }


    .gvr-commodity-container {
        width: calc(100% - 30px) !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 35px !important;
    }


    .gvr-commodity-intro,
    .gvr-commodity-flow {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }


    .gvr-commodity-eyebrow {
        font-size: 10px;

        letter-spacing: 2px;
    }


    .gvr-commodity-orange-line {
        width: 48px;

        height: 3px;

        margin: 14px 0 17px;

        border-radius: 5px;
    }


    .gvr-commodity-title {
        margin: 0 0 17px;

        font-size: clamp(31px, 9vw, 43px) !important;

        line-height: 1.05;

        letter-spacing: -.8px;
    }


    .gvr-commodity-description {
        margin: 0;

        font-size: 14px;

        line-height: 1.75;
    }


    .gvr-commodity-divider {
        margin: 25px 0;
    }


    .gvr-commodity-subtitle {
        font-size: 10px;

        letter-spacing: 1.8px;
    }


    .gvr-commodity-subtext {
        margin-top: 7px;

        font-size: 13px;

        line-height: 1.6;
    }


    /* =====================================================
       INDUSTRIAL FLOW
       ===================================================== */

    .gvr-commodity-flow {
        overflow: visible !important;
    }


    .gvr-commodity-flow-header {
        margin-bottom: 20px;
    }


    .gvr-commodity-flow-title {
        font-size: 11px;

        letter-spacing: 1.8px;
    }


    /* hide complex desktop curve */

    .gvr-impact-journey-line {
        display: none !important;
    }


    /* =====================================================
       COMMODITY CARDS
       ===================================================== */

    .gvr-commodity-cards {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 14px !important;
    }


    .gvr-commodity-card {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        transform: none !important;
    }


    .gvr-commodity-image {
        width: 100% !important;

        height: 205px !important;

        flex: 0 0 205px !important;

        overflow: hidden;
    }


    .gvr-commodity-image img {
        width: 100% !important;

        height: 100% !important;

        display: block;

        object-fit: cover;
    }


    .gvr-commodity-card-content {
        width: 100% !important;

        padding: 20px !important;
    }


    .gvr-commodity-card-label {
        margin-bottom: 7px;

        font-size: 9px !important;

        letter-spacing: 1.5px;
    }


    .gvr-commodity-card-title {
        margin: 0 0 9px;

        font-size: 24px !important;

        line-height: 1.15;
    }


    .gvr-commodity-card-text {
        margin: 0 0 15px;

        font-size: 13px !important;

        line-height: 1.65;
    }


    .gvr-commodity-tag {
        display: inline-flex;

        align-items: center;

        min-height: 28px;

        padding: 6px 10px;

        border-radius: 7px;

        font-size: 9px !important;

        letter-spacing: 1px;
    }


    /* =====================================================
       FLOW FOOTER
       ===================================================== */

    .gvr-commodity-flow-footer {
        margin-top: 25px;

        width: 100%;

        text-align: center;
    }


    .gvr-commodity-flow-caption {
        font-size: 12px;

        line-height: 1.6;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .trade-hero {
        min-height: 530px;

        height: calc(100svh - 86px);
    }


    .trade-content {
        padding-bottom: 42px;
    }


    .trade-content h1 {
        font-size: 43px;

        letter-spacing: -1px;
    }


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

        max-width: 320px;
    }


    .trade-intro,
    .trade-about,
    .gvr-engine-section,
    .gvr-commodity-section {
        padding-top: 50px;

        padding-bottom: 50px;
    }


    .trade-about-image .main-image {
        height: 315px;

        border-radius: 19px;
    }


    .experience-card {
        min-height: 95px;

        left: 10px;

        width: calc(100% - 20px);

        padding: 14px 17px;

        border-radius: 16px;
    }


    .experience-card h2 {
        font-size: 27px;
    }


    .trade-feature-grid {
        gap: 8px !important;
    }


    .trade-feature {
        min-height: 54px;

        padding: 11px 8px;

        gap: 6px;

        border-radius: 10px;
    }


    .trade-feature i {
        width: 23px;

        min-width: 23px;

        height: 23px;
    }


    .trade-feature span {
        font-size: 10.5px;
    }


    .gvr-engine-card {
        padding: 17px !important;

        gap: 12px !important;

        border-radius: 16px !important;
    }


    .gvr-engine-card-icon {
        width: 37px !important;

        min-width: 37px !important;

        height: 37px !important;

        flex-basis: 37px !important;

        border-radius: 10px;
    }


    .gvr-engine-card-title {
        font-size: 18px !important;
    }


    .gvr-engine-card-text {
        font-size: 12px !important;
    }


    .gvr-commodity-image {
        height: 185px !important;

        flex-basis: 185px !important;
    }


    .gvr-commodity-card-content {
        padding: 18px !important;
    }


    .gvr-commodity-card-title {
        font-size: 22px !important;
    }


    .gvr-commodity-card-text {
        font-size: 12.5px !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .trade-content h1 {
        font-size: 39px;
    }


    .trade-content p {
        font-size: 13px;
    }


    .intro-left h2,
    .trade-about-content h2,
    .gvr-engine-title,
    .gvr-commodity-title {
        font-size: 28px !important;
    }


    .trade-quote {
        font-size: 16px;
    }


    .trade-feature span {
        font-size: 9.5px;
    }


    .gvr-engine-orbit {
        height: 125px !important;
    }


    .gvr-engine-center-ring {
        width: 105px !important;

        height: 105px !important;
    }


    .gvr-engine-center {
        width: 84px !important;

        height: 84px !important;
    }


    .gvr-engine-center-title {
        font-size: 16px !important;
    }


    .gvr-commodity-image {
        height: 170px !important;

        flex-basis: 170px !important;
    }

}

/* =========================================================
   MOBILE FIX
   EXPERIENCE CARD MUST NOT COVER VIDEO
   ========================================================= */

@media (max-width: 767px) {

    .trade-about-image {
        position: relative !important;

        width: 100% !important;

        height: auto !important;

        padding-bottom: 75px !important;

        overflow: visible !important;
    }


    /* ==============================
       VIDEO CONTAINER
    ============================== */

    .trade-about-image .main-image {
        position: relative !important;

        width: 100% !important;

        height: 330px !important;

        min-height: 330px !important;

        max-height: 330px !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        z-index: 1 !important;

        background: #111 !important;
    }


    /* ==============================
       VIDEO
    ============================== */

    .trade-about-image .main-image video {
        position: absolute !important;

        inset: 0 !important;

        display: block !important;

        width: 100% !important;

        height: 100% !important;

        min-width: 100% !important;

        min-height: 100% !important;

        max-width: none !important;

        max-height: none !important;

        object-fit: cover !important;

        object-position: center center !important;

        opacity: 1 !important;

        visibility: visible !important;

        z-index: 1 !important;
    }


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

    .trade-about-image .experience-card {

        position: absolute !important;

        left: 15px !important;

        right: 15px !important;

        bottom: 0 !important;

        top: auto !important;

        width: auto !important;

        height: auto !important;

        min-height: 100px !important;

        max-height: 115px !important;

        margin: 0 !important;

        padding: 17px 20px !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        align-items: flex-start !important;

        border-radius: 20px !important;

        z-index: 5 !important;

        overflow: hidden !important;

        background: #187b4e !important;

        box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.16) !important;
    }


    .trade-about-image .experience-card h2 {
        margin: 0 0 5px !important;

        font-size: 32px !important;

        line-height: 1 !important;

        color: #fff !important;
    }


    .trade-about-image .experience-card span {
        display: block !important;

        font-size: 13px !important;

        line-height: 1.35 !important;

        color: rgba(255,255,255,.92) !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .trade-about-image {
        padding-bottom: 68px !important;
    }


    .trade-about-image .main-image {
        height: 290px !important;

        min-height: 290px !important;

        max-height: 290px !important;

        border-radius: 18px !important;
    }


    .trade-about-image .experience-card {
        left: 10px !important;

        right: 10px !important;

        min-height: 92px !important;

        max-height: 100px !important;

        padding: 14px 17px !important;

        border-radius: 17px !important;
    }


    .trade-about-image .experience-card h2 {
        font-size: 28px !important;
    }


    .trade-about-image .experience-card span {
        font-size: 12px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .trade-about-image {
        padding-bottom: 63px !important;
    }


    .trade-about-image .main-image {
        height: 270px !important;

        min-height: 270px !important;

        max-height: 270px !important;
    }


    .trade-about-image .experience-card {
        min-height: 88px !important;

        max-height: 94px !important;

        padding: 12px 15px !important;
    }


    .trade-about-image .experience-card h2 {
        font-size: 26px !important;
    }


    .trade-about-image .experience-card span {
        font-size: 11px !important;
    }

}


/* =========================================================
   MINING PAGE
   MOBILE APP STYLE RESPONSIVE
   DESKTOP VERSION UNTOUCHED
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL MOBILE RESET
       ===================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    .trade-hero,
    .mining-section,
    .gv-mining-section,
    .gvr-impact-section,
    .mdo-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .trade-hero *,
    .mining-section *,
    .gv-mining-section *,
    .gvr-impact-section *,
    .mdo-section * {
        box-sizing: border-box;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .trade-hero {
        position: relative !important;

        width: 100% !important;

        height: calc(100svh - 94px) !important;

        min-height: 540px !important;
        max-height: 760px !important;

        margin: 0 !important;

        overflow: hidden !important;

        background: #111;
    }

    .trade-hero > img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }

    .trade-overlay {
        position: absolute !important;

        inset: 0 !important;

        z-index: 2 !important;

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .20) 0%,
                rgba(0, 0, 0, .35) 40%,
                rgba(0, 0, 0, .82) 100%
            ) !important;
    }

    .trade-hero .container {
        position: relative !important;

        z-index: 5 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        display: flex !important;

        align-items: flex-end !important;
    }

    .trade-content {
        width: 100% !important;

        max-width: 100% !important;

        padding-bottom: 48px !important;

        margin: 0 !important;
    }

    .trade-content small {
        display: block !important;

        margin-bottom: 12px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2.5px !important;

        color: rgba(255,255,255,.88) !important;
    }

    .trade-content h1 {
        margin: 0 0 16px !important;

        font-size: clamp(45px, 14vw, 62px) !important;

        line-height: .98 !important;

        letter-spacing: -1.5px !important;

        font-weight: 800 !important;

        color: #fff !important;
    }

    .trade-content p {
        width: 100% !important;

        max-width: 340px !important;

        margin: 0 !important;

        font-size: 14px !important;

        line-height: 1.65 !important;

        color: rgba(255,255,255,.88) !important;
    }


    /* =====================================================
       MAIN MINING INTRO
       ===================================================== */

    .mining-section {
        width: 100% !important;

        padding: 55px 0 60px !important;

        background: #f7f7f4;
    }

    .mining-section > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        margin: 0 auto !important;
    }

    .mining-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 35px !important;

        margin: 0 !important;
    }


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

    .mining-grid .left-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 1;
    }

    .left-content .section-tag {
        display: inline-flex !important;

        align-items: center !important;

        gap: 8px !important;

        margin-bottom: 12px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 1.8px !important;
    }

    .left-content .section-tag .dot {
        width: 7px !important;
        height: 7px !important;

        min-width: 7px !important;

        border-radius: 50% !important;
    }

    .left-content h1 {
        margin: 0 0 15px !important;

        font-size: clamp(36px, 10vw, 48px) !important;

        line-height: 1 !important;

        letter-spacing: -1px !important;
    }

    .heading-line {
        width: 48px !important;

        height: 3px !important;

        margin: 0 0 18px !important;

        border-radius: 5px !important;
    }

    .intro-text {
        margin: 0 0 18px !important;

        font-size: 18px !important;

        line-height: 1.5 !important;
    }

    .description {
        width: 100% !important;

        margin: 0 !important;

        font-size: 14px !important;

        line-height: 1.8 !important;

        color: #666;
    }


    /* =====================================================
       RESPONSIBLE MINING BADGE
       ===================================================== */

    .info-badge {
        position: relative !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;

        width: 100% !important;

        max-width: 100% !important;

        margin-top: 24px !important;

        padding: 15px 16px !important;

        display: flex !important;

        align-items: center !important;

        gap: 12px !important;

        border-radius: 16px !important;

        box-shadow:
            0 8px 25px rgba(0,0,0,.08) !important;

        transform: none !important;
    }

    .badge-icon {
        width: 42px !important;

        min-width: 42px !important;

        height: 42px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;
    }

    .info-badge h5 {
        margin: 0 0 4px !important;

        font-size: 14px !important;
    }

    .info-badge span {
        font-size: 11px !important;
    }


    /* =====================================================
       MINING VIDEO
       ===================================================== */

    .mining-grid .hero-video {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 2;
    }

    .video-wrapper {
        position: relative !important;

        width: 100% !important;

        height: 280px !important;

        min-height: 280px !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        background: #111 !important;

        box-shadow:
            0 15px 40px rgba(0,0,0,.12) !important;
    }

    .video-wrapper video {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center !important;
    }


    /* =====================================================
       MINING CARDS + GALLERY
       ===================================================== */

    .gv-mining-section {
        width: 100% !important;

        max-width: 100% !important;

        padding: 55px 15px !important;

        margin: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 35px !important;

        background: #fff;
    }

    .gv-mining-left,
    .gv-mining-right {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }


    /* cards */

    .gv-mining-left {
        display: flex !important;

        flex-direction: column !important;

        gap: 12px !important;
    }

    .gv-mining-card {
        position: relative !important;

        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 125px !important;

        margin: 0 !important;

        padding: 18px !important;

        display: flex !important;

        align-items: flex-start !important;

        gap: 13px !important;

        border-radius: 18px !important;

        transform: none !important;

        overflow: hidden !important;
    }

    .gv-mining-card-icon {
        width: 42px !important;

        min-width: 42px !important;

        height: 42px !important;

        flex: 0 0 42px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;
    }

    .gv-mining-card-content {
        min-width: 0 !important;

        flex: 1 1 auto !important;
    }

    .gv-mining-card-title {
        margin: 0 0 7px !important;

        font-size: 18px !important;

        line-height: 1.25 !important;
    }

    .gv-mining-card-text {
        margin: 0 !important;

        font-size: 12.5px !important;

        line-height: 1.65 !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       MINING GALLERY
       ===================================================== */

    .gv-mining-gallery {
        width: 100% !important;

        max-width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 10px !important;
    }

    .gv-mining-gallery-main {
        width: 100% !important;

        height: 255px !important;

        border-radius: 20px !important;

        overflow: hidden !important;
    }

    .gv-mining-gallery-main img {
        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;
    }

    .gv-mining-gallery-bottom {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 10px !important;
    }

    .gv-mining-gallery-item {
        width: 100% !important;

        height: 145px !important;

        border-radius: 15px !important;

        overflow: hidden !important;
    }

    .gv-mining-gallery-item img {
        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;
    }


    /* =====================================================
       IMPACT SECTION
       ===================================================== */

    .gvr-impact-section {
        position: relative !important;

        width: 100% !important;

        padding: 65px 0 55px !important;

        overflow: hidden !important;
    }

    .gvr-impact-container {
        width: calc(100% - 30px) !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;
    }

    .gvr-impact-header {
        width: 100% !important;

        max-width: 100% !important;

        margin-bottom: 35px !important;

        text-align: left !important;
    }

    .gvr-impact-eyebrow {
        font-size: 10px !important;

        letter-spacing: 2px !important;
    }

    .gvr-impact-title {
        margin: 12px 0 16px !important;

        font-size: clamp(32px, 9vw, 44px) !important;

        line-height: 1.05 !important;

        letter-spacing: -.8px !important;
    }

    .gvr-impact-description {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        font-size: 14px !important;

        line-height: 1.75 !important;
    }


    /* =====================================================
       IMPACT JOURNEY
       Desktop line/orbit removed on mobile
       ===================================================== */

    .gvr-impact-journey {
        position: relative !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        padding: 0 !important;

        margin: 0 !important;
    }

    .gvr-impact-journey-line {
        display: none !important;
    }

    .gvr-impact-straight-line {
        display: none !important;
    }

    .gvr-impact-point {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        transform: none !important;
    }


    /* =====================================================
       IMPACT POINTS
       ===================================================== */

    .gvr-impact-point-build,
    .gvr-impact-point-power,
    .gvr-impact-point-restore {
        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        width: 100% !important;

        margin-bottom: 10px !important;
    }

    .gvr-impact-point-label {
        font-size: 11px !important;

        letter-spacing: 1.5px !important;
    }

    .gvr-impact-point-circle {
        width: 25px !important;

        min-width: 25px !important;

        height: 25px !important;
    }


    /* =====================================================
       IMPACT CARDS
       ===================================================== */

    .gvr-impact-cards {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 13px !important;

        margin-top: 20px !important;
    }

    .gvr-impact-card {
        position: relative !important;

        width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 175px !important;

        margin: 0 !important;

        padding: 20px !important;

        border-radius: 19px !important;

        transform: none !important;

        overflow: hidden !important;
    }

    .gvr-impact-card-number {
        font-size: 11px !important;

        letter-spacing: 1px !important;
    }

    .gvr-impact-card-icon {
        width: 42px !important;

        height: 42px !important;

        margin: 10px 0 14px !important;
    }

    .gvr-impact-card-icon svg {
        width: 24px !important;

        height: 24px !important;
    }

    .gvr-impact-card-content {
        width: 100% !important;

        max-width: 100% !important;
    }

    .gvr-impact-card-label {
        font-size: 9px !important;

        letter-spacing: 1.5px !important;

        margin-bottom: 7px !important;
    }

    .gvr-impact-card-title {
        margin: 0 0 9px !important;

        font-size: 21px !important;

        line-height: 1.2 !important;
    }

    .gvr-impact-card-text {
        margin: 0 !important;

        font-size: 12.5px !important;

        line-height: 1.65 !important;
    }

    .gvr-impact-card-line {
        margin-top: 16px !important;
    }

    .gvr-impact-active {
        position: absolute !important;

        top: 15px !important;

        right: 15px !important;

        font-size: 8px !important;

        letter-spacing: 1px !important;
    }


    /* =====================================================
       IMPACT FOOTER
       ===================================================== */

    .gvr-impact-footer {
        width: 100% !important;

        margin-top: 30px !important;

        text-align: center !important;
    }

    .gvr-impact-footer-title {
        font-size: 11px !important;

        letter-spacing: 1.5px !important;
    }

    .gvr-impact-footer-text {
        margin-top: 8px !important;

        font-size: 12px !important;

        line-height: 1.6 !important;
    }


    /* =====================================================
       MDO SECTION
       ===================================================== */

    .mdo-section {
        position: relative !important;

        width: 100% !important;

        padding: 60px 0 !important;

        overflow: hidden !important;
    }

    .mdo-container {
        width: calc(100% - 30px) !important;

        max-width: 100% !important;

        margin: 0 auto !important;

        padding: 0 !important;
    }

    .mdo-top {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 32px !important;

        margin: 0 0 35px !important;
    }


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

    .mdo-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 1;
    }

    .mdo-content .section-label {
        font-size: 10px !important;

        letter-spacing: 2px !important;
    }

    .mdo-content .label-line {
        width: 48px !important;

        height: 3px !important;

        margin: 14px 0 17px !important;
    }

    .mdo-content h1 {
        margin: 0 0 18px !important;

        font-size: clamp(30px, 9vw, 43px) !important;

        line-height: 1.05 !important;

        letter-spacing: -.8px !important;
    }

    .mdo-content .intro-text {
        margin: 0 0 18px !important;

        font-size: 15px !important;

        line-height: 1.65 !important;
    }

    .mdo-content .content-divider {
        width: 100% !important;

        height: 1px !important;

        margin: 20px 0 !important;
    }

    .mdo-content .description {
        margin: 0 !important;

        font-size: 13.5px !important;

        line-height: 1.75 !important;
    }


    /* =====================================================
       MDO VIDEO
       ===================================================== */

    .mdo-media {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 2;
    }

    .media-image {
        position: relative !important;

        width: 100% !important;

        height: 285px !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        background: #111 !important;
    }

    .media-image video {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;
    }

    .media-bottom {
        position: absolute !important;

        left: 12px !important;

        right: 12px !important;

        bottom: 12px !important;

        min-height: 45px !important;

        padding: 12px 14px !important;

        display: flex !important;

        align-items: center !important;

        border-radius: 11px !important;

        background: rgba(0,0,0,.58) !important;

        backdrop-filter: blur(10px);
    }

    .media-bottom strong {
        font-size: 12px !important;

        color: #fff !important;
    }


    /* =====================================================
       FULL CYCLE
       ===================================================== */

    .cycle-box {
        width: 100% !important;

        margin: 0 !important;

        padding: 22px 17px 20px !important;

        border-radius: 20px !important;

        overflow: hidden !important;
    }

    .cycle-header {
        width: 100% !important;

        display: block !important;
    }

    .cycle-label {
        font-size: 10px !important;

        letter-spacing: 1.8px !important;

        margin-bottom: 10px !important;
    }

    .cycle-title {
        width: 100% !important;

        max-width: 100% !important;

        font-size: 19px !important;

        line-height: 1.45 !important;
    }

    .cycle-divider {
        width: 100% !important;

        height: 1px !important;

        margin: 20px 0 !important;
    }


    /* =====================================================
       CYCLE ITEMS
       ===================================================== */

    .cycle-items {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 10px !important;
    }

    .cycle-item {
        position: relative !important;

        width: 100% !important;

        min-width: 0 !important;

        min-height: 115px !important;

        margin: 0 !important;

        padding: 16px !important;

        border-radius: 15px !important;

        transform: none !important;

        overflow: hidden !important;
    }

    .item-heading {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        margin-bottom: 9px !important;
    }

    .item-heading .number {
        width: 30px !important;

        min-width: 30px !important;

        height: 30px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 9px !important;

        font-size: 10px !important;
    }

    .item-heading h3 {
        min-width: 0 !important;

        margin: 0 !important;

        font-size: 17px !important;

        line-height: 1.2 !important;
    }

    .cycle-item p {
        width: 100% !important;

        margin: 0 !important;

        padding-left: 40px !important;

        font-size: 12px !important;

        line-height: 1.65 !important;

        overflow-wrap: break-word !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .trade-hero {
        height: calc(100svh - 86px) !important;

        min-height: 520px !important;
    }

    .trade-content {
        padding-bottom: 40px !important;
    }

    .trade-content h1 {
        font-size: 44px !important;
    }

    .trade-content p {
        font-size: 13px !important;
    }


    .mining-section {
        padding-top: 48px !important;

        padding-bottom: 50px !important;
    }

    .intro-text {
        font-size: 17px !important;
    }

    .description {
        font-size: 13px !important;
    }


    .video-wrapper {
        height: 255px !important;

        min-height: 255px !important;
    }


    .gv-mining-section {
        padding: 50px 13px !important;
    }

    .gv-mining-card {
        padding: 16px !important;

        min-height: 120px !important;

        border-radius: 16px !important;
    }

    .gv-mining-card-icon {
        width: 38px !important;

        min-width: 38px !important;

        height: 38px !important;

        flex-basis: 38px !important;

        border-radius: 10px !important;
    }

    .gv-mining-card-title {
        font-size: 17px !important;
    }

    .gv-mining-card-text {
        font-size: 12px !important;
    }


    .gv-mining-gallery-main {
        height: 230px !important;
    }

    .gv-mining-gallery-item {
        height: 125px !important;
    }


    .gvr-impact-section {
        padding-top: 50px !important;

        padding-bottom: 45px !important;
    }

    .gvr-impact-container {
        width: calc(100% - 26px) !important;
    }

    .gvr-impact-card {
        padding: 17px !important;

        min-height: 160px !important;

        border-radius: 16px !important;
    }

    .gvr-impact-card-title {
        font-size: 19px !important;
    }

    .gvr-impact-card-text {
        font-size: 12px !important;
    }


    .mdo-section {
        padding-top: 50px !important;

        padding-bottom: 50px !important;
    }

    .mdo-container {
        width: calc(100% - 26px) !important;
    }

    .mdo-content h1 {
        font-size: 29px !important;
    }

    .mdo-content .intro-text {
        font-size: 14px !important;
    }

    .mdo-content .description {
        font-size: 13px !important;
    }

    .media-image {
        height: 255px !important;

        border-radius: 17px !important;
    }


    .cycle-box {
        padding: 19px 14px !important;

        border-radius: 17px !important;
    }

    .cycle-title {
        font-size: 17px !important;
    }

    .cycle-item {
        min-height: 105px !important;

        padding: 14px !important;
    }

    .item-heading .number {
        width: 28px !important;

        min-width: 28px !important;

        height: 28px !important;
    }

    .item-heading h3 {
        font-size: 16px !important;
    }

    .cycle-item p {
        padding-left: 38px !important;

        font-size: 11.5px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .trade-content h1 {
        font-size: 40px !important;
    }

    .trade-content p {
        font-size: 12.5px !important;
    }


    .video-wrapper {
        height: 230px !important;

        min-height: 230px !important;
    }


    .gv-mining-gallery-main {
        height: 210px !important;
    }

    .gv-mining-gallery-item {
        height: 110px !important;
    }


    .gvr-impact-title {
        font-size: 29px !important;
    }

    .gvr-impact-card-title {
        font-size: 18px !important;
    }


    .media-image {
        height: 230px !important;
    }


    .cycle-title {
        font-size: 16px !important;
    }

}


/* =========================================================
   LOGISTICS SOLUTIONS
   MOBILE APP STYLE RESPONSIVE
   DESKTOP VERSION UNTOUCHED
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL MOBILE SAFETY
       ===================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    .civil-hero,
    .civil-intro,
    .civil-about,
    .civil-process,
    .civil-highlight,
    .civil-future {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .civil-hero *,
    .civil-intro *,
    .civil-about *,
    .civil-process *,
    .civil-highlight *,
    .civil-future * {
        box-sizing: border-box;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .civil-hero {
        position: relative !important;

        width: 100% !important;

        height: calc(100svh - 94px) !important;

        min-height: 520px !important;
        max-height: 720px !important;

        margin: 0 !important;

        overflow: hidden !important;

        background: #111;
    }


    .civil-hero > img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    .civil-overlay {
        position: absolute !important;

        inset: 0 !important;

        z-index: 2 !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.18) 0%,
                rgba(0,0,0,.38) 45%,
                rgba(0,0,0,.84) 100%
            ) !important;
    }


    .civil-hero .container {
        position: relative !important;

        z-index: 5 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        display: flex !important;

        align-items: flex-end !important;
    }


    .civil-content {
        width: 100% !important;

        max-width: 100% !important;

        padding-bottom: 45px !important;

        margin: 0 !important;
    }


    .civil-content h1 {
        width: 100% !important;

        margin: 0 !important;

        font-size: clamp(38px, 11vw, 55px) !important;

        line-height: 1.02 !important;

        letter-spacing: -1.2px !important;

        font-weight: 800 !important;

        color: #fff !important;
    }


    /* =====================================================
       INTRO
       ===================================================== */

    .civil-intro {
        width: 100% !important;

        padding: 55px 0 !important;

        background: #f7f7f4;
    }


    .civil-intro > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        margin: 0 auto !important;
    }


    .civil-intro .intro-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 25px !important;

        margin: 0 !important;
    }


    .civil-intro .intro-left,
    .civil-intro .intro-right {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }


    .civil-intro .intro-left h2 {
        margin: 0 !important;

        font-size: clamp(31px, 9vw, 43px) !important;

        line-height: 1.06 !important;

        letter-spacing: -.8px !important;

        font-weight: 700 !important;

        color: #171717;
    }


    .civil-intro .intro-right {
        padding: 0 !important;
    }


    .civil-intro .intro-right p {
        margin: 0 0 15px !important;

        font-size: 14px !important;

        line-height: 1.8 !important;

        color: #666;
    }


    .civil-intro .intro-right p:last-child {
        margin-bottom: 0 !important;
    }


    .civil-intro .intro-right strong {
        color: #222;
    }


    /* =====================================================
       ABOUT
       ===================================================== */

    .civil-about {
        width: 100% !important;

        padding: 55px 0 !important;

        background: #fff;
    }


    .civil-about > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        margin: 0 auto !important;
    }


    .civil-about-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        margin: 0 !important;
    }


    /* video */

    .civil-image {
        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        height: 275px !important;

        min-height: 275px !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        background: #111 !important;

        order: 1;
    }


    .civil-image video {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    /* about content */

    .civil-about-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 2;
    }


    .civil-about-content .section-tag {
        display: inline-block !important;

        margin-bottom: 11px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;
    }


    .civil-about-content h2 {
        margin: 0 0 15px !important;

        font-size: clamp(30px, 9vw, 42px) !important;

        line-height: 1.06 !important;

        letter-spacing: -.8px !important;
    }


    .civil-about-content p {
        margin: 0 !important;

        font-size: 14px !important;

        line-height: 1.8 !important;

        color: #666;
    }


    /* =====================================================
       PROCESS
       ===================================================== */

    .civil-process {
        width: 100% !important;

        padding: 55px 0 !important;

        background: #f7f7f4;
    }


    .civil-process > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        margin: 0 auto !important;
    }


    .civil-process-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        margin: 0 !important;
    }


    /* image first */

    .civil-process-image {
        width: 100% !important;

        max-width: 100% !important;

        height: 275px !important;

        min-height: 275px !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        order: 1;
    }


    .civil-process-image img {
        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    /* process content */

    .civil-process-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 2;
    }


    .civil-process-content .section-tag {
        display: inline-block !important;

        margin-bottom: 11px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;
    }


    .civil-process-content h2 {
        margin: 0 0 17px !important;

        font-size: clamp(29px, 8.5vw, 41px) !important;

        line-height: 1.07 !important;

        letter-spacing: -.8px !important;
    }


    .civil-process-content p {
        margin: 0 0 15px !important;

        font-size: 13.5px !important;

        line-height: 1.8 !important;

        color: #666;
    }


    .civil-process-content p:last-child {
        margin-bottom: 0 !important;
    }


    .civil-process-content strong {
        color: #222;
    }


    /* =====================================================
       SUPPLY CHAIN HIGHLIGHT
       ===================================================== */

    .civil-highlight {
        width: 100% !important;

        padding: 55px 0 !important;

        background: #fff;
    }


    .civil-highlight > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        margin: 0 auto !important;
    }


    .civil-highlight-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        margin: 0 !important;
    }


    /* content first */

    .civil-highlight-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 1;
    }


    .civil-highlight-content .section-tag {
        display: inline-block !important;

        margin-bottom: 11px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;
    }


    .civil-highlight-content h2 {
        margin: 0 0 17px !important;

        font-size: clamp(29px, 8.5vw, 41px) !important;

        line-height: 1.07 !important;

        letter-spacing: -.8px !important;
    }


    .civil-highlight-content p {
        margin: 0 0 15px !important;

        font-size: 13.5px !important;

        line-height: 1.8 !important;

        color: #666;
    }


    .civil-highlight-content p:last-child {
        margin-bottom: 0 !important;
    }


    /* image */

    .civil-highlight-image {
        width: 100% !important;

        max-width: 100% !important;

        height: 275px !important;

        min-height: 275px !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        order: 2;
    }


    .civil-highlight-image img {
        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    /* =====================================================
       FUTURE VISION
       ===================================================== */

    .civil-future {
        position: relative !important;

        width: 100% !important;

        padding: 65px 0 !important;

        background: #187b4e;

        color: #fff;

        overflow: hidden !important;
    }


    .civil-future > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        margin: 0 auto !important;
    }


    .future-wrapper {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        text-align: left !important;
    }


    .future-wrapper .section-tag {
        display: inline-block !important;

        margin-bottom: 12px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;

        color: #dcb47b !important;
    }


    .future-wrapper h2 {
        width: 100% !important;

        margin: 0 0 19px !important;

        font-size: clamp(32px, 9.5vw, 45px) !important;

        line-height: 1.05 !important;

        letter-spacing: -.8px !important;

        color: #fff !important;
    }


    .future-wrapper p {
        width: 100% !important;

        margin: 0 0 17px !important;

        font-size: 14px !important;

        line-height: 1.8 !important;

        color: rgba(255,255,255,.9) !important;
    }


    .future-wrapper p:last-child {
        margin-bottom: 0 !important;
    }


    /* =====================================================
       REMOVE POSSIBLE DESKTOP DECORATIONS / POSITIONING
       ===================================================== */

    .civil-hero::before,
    .civil-hero::after,
    .civil-intro::before,
    .civil-intro::after,
    .civil-about::before,
    .civil-about::after,
    .civil-process::before,
    .civil-process::after,
    .civil-highlight::before,
    .civil-highlight::after,
    .civil-future::before,
    .civil-future::after {
        max-width: 100% !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .civil-hero {
        height: calc(100svh - 86px) !important;

        min-height: 500px !important;
    }


    .civil-content {
        padding-bottom: 38px !important;
    }


    .civil-content h1 {
        font-size: 41px !important;

        letter-spacing: -1px !important;
    }


    .civil-intro,
    .civil-about,
    .civil-process,
    .civil-highlight {
        padding-top: 48px !important;

        padding-bottom: 48px !important;
    }


    .civil-intro > .container,
    .civil-process > .container,
    .civil-highlight > .container {
        padding-left: 13px !important;

        padding-right: 13px !important;
    }


    .civil-intro .intro-grid {
        gap: 22px !important;
    }


    .civil-intro .intro-left h2 {
        font-size: 31px !important;
    }


    .civil-intro .intro-right p {
        font-size: 13px !important;

        line-height: 1.75 !important;
    }


    .civil-image {
        height: 250px !important;

        min-height: 250px !important;

        border-radius: 17px !important;
    }


    .civil-about-content h2 {
        font-size: 30px !important;
    }


    .civil-about-content p {
        font-size: 13px !important;
    }


    .civil-process-image,
    .civil-highlight-image {
        height: 245px !important;

        min-height: 245px !important;

        border-radius: 17px !important;
    }


    .civil-process-content h2,
    .civil-highlight-content h2 {
        font-size: 29px !important;
    }


    .civil-process-content p,
    .civil-highlight-content p {
        font-size: 13px !important;

        line-height: 1.75 !important;
    }


    .civil-future {
        padding-top: 52px !important;

        padding-bottom: 52px !important;
    }


    .future-wrapper h2 {
        font-size: 32px !important;
    }


    .future-wrapper p {
        font-size: 13px !important;

        line-height: 1.75 !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .civil-content h1 {
        font-size: 38px !important;
    }


    .civil-intro .intro-left h2 {
        font-size: 28px !important;
    }


    .civil-image {
        height: 225px !important;

        min-height: 225px !important;
    }


    .civil-about-content h2,
    .civil-process-content h2,
    .civil-highlight-content h2 {
        font-size: 27px !important;
    }


    .civil-process-image,
    .civil-highlight-image {
        height: 220px !important;

        min-height: 220px !important;
    }


    .future-wrapper h2 {
        font-size: 29px !important;
    }

}

/* =========================================================
   LOGISTICS PARK PAGE
   MOBILE APP STYLE RESPONSIVE
   DESKTOP VERSION UNTOUCHED
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL
       ===================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    .trade-hero,
    .trade-intro,
    .trade-about,
    .logistics-section,
    .process-section,
    .why-section,
    .trade-cta {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .trade-hero *,
    .trade-intro *,
    .trade-about *,
    .logistics-section *,
    .process-section *,
    .why-section *,
    .trade-cta * {
        box-sizing: border-box;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .trade-hero {
        position: relative !important;

        width: 100% !important;

        height: calc(100svh - 94px) !important;

        min-height: 520px !important;
        max-height: 720px !important;

        margin: 0 !important;

        overflow: hidden !important;

        background: #111;
    }

    .trade-hero > img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }

    .trade-overlay {
        position: absolute !important;

        inset: 0 !important;

        z-index: 2 !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.16) 0%,
                rgba(0,0,0,.35) 45%,
                rgba(0,0,0,.84) 100%
            ) !important;
    }

    .trade-hero .container {
        position: relative !important;

        z-index: 5 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        display: flex !important;

        align-items: flex-end !important;
    }

    .trade-content {
        width: 100% !important;

        max-width: 100% !important;

        padding-bottom: 42px !important;

        margin: 0 !important;
    }

    .trade-content small {
        display: block !important;

        margin-bottom: 12px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2.5px !important;

        color: rgba(255,255,255,.9) !important;
    }

    .trade-content h1 {
        width: 100% !important;

        margin: 0 0 17px !important;

        font-size: clamp(45px, 13vw, 60px) !important;

        line-height: .98 !important;

        letter-spacing: -1.4px !important;

        font-weight: 800 !important;

        color: #fff !important;
    }

    .trade-content p {
        width: 100% !important;

        max-width: 340px !important;

        margin: 0 !important;

        font-size: 14px !important;

        line-height: 1.65 !important;

        color: rgba(255,255,255,.9) !important;
    }


    /* =====================================================
       INTRO
       ===================================================== */

    .trade-intro {
        padding: 55px 0 !important;

        background: #f7f7f4 !important;
    }

    .trade-intro > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding-left: 17px !important;
        padding-right: 17px !important;

        margin: 0 auto !important;
    }

    .trade-intro .intro-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 25px !important;

        margin: 0 !important;
    }

    .trade-intro .intro-left,
    .trade-intro .intro-right {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }

    .trade-intro .section-tag {
        display: inline-block !important;

        margin-bottom: 12px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;
    }

    .trade-intro .intro-left h2 {
        margin: 0 !important;

        font-size: clamp(31px, 9vw, 43px) !important;

        line-height: 1.08 !important;

        letter-spacing: -.8px !important;

        color: #171717 !important;
    }

    .trade-intro .intro-right {
        padding: 0 !important;
    }

    .trade-intro .intro-right p {
        width: 100% !important;

        margin: 0 !important;

        font-size: 14px !important;

        line-height: 1.8 !important;

        color: #666 !important;
    }


    /* =====================================================
       ABOUT / VIDEO
       ===================================================== */

    .trade-about {
        padding: 55px 0 !important;

        background: #fff !important;
    }

    .trade-about > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        margin: 0 auto !important;
    }

    .trade-about-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 32px !important;

        margin: 0 !important;
    }

    .trade-about-image,
    .trade-about-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }


    /* VIDEO */

    .trade-about-image {
        position: relative !important;

        width: 100% !important;

        height: auto !important;

        padding-bottom: 72px !important;

        overflow: visible !important;
    }

    .trade-about-image .main-image {
        position: relative !important;

        width: 100% !important;

        height: 285px !important;

        min-height: 285px !important;

        max-height: 285px !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        background: #111 !important;

        z-index: 1 !important;
    }

    .trade-about-image .main-image video {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    /* EXPERIENCE */

    .trade-about-image .experience-card {
        position: absolute !important;

        left: 14px !important;

        right: 14px !important;

        bottom: 0 !important;

        top: auto !important;

        width: auto !important;

        min-height: 100px !important;

        max-height: 110px !important;

        margin: 0 !important;

        padding: 16px 18px !important;

        display: flex !important;

        flex-direction: column !important;

        justify-content: center !important;

        align-items: flex-start !important;

        border-radius: 19px !important;

        z-index: 5 !important;

        background: #187b4e !important;

        box-shadow:
            0 14px 35px rgba(0,0,0,.15) !important;

        overflow: hidden !important;
    }

    .experience-card h2 {
        margin: 0 0 4px !important;

        font-size: 30px !important;

        line-height: 1 !important;

        color: #fff !important;
    }

    .experience-card span {
        font-size: 12px !important;

        line-height: 1.4 !important;

        color: rgba(255,255,255,.92) !important;
    }


    /* CONTENT */

    .trade-about-content {
        order: 2;
    }

    .trade-about-content .section-tag {
        display: inline-block !important;

        margin-bottom: 11px !important;

        font-size: 10px !important;

        letter-spacing: 2px !important;
    }

    .trade-about-content h2 {
        margin: 0 0 17px !important;

        font-size: clamp(29px, 8.5vw, 41px) !important;

        line-height: 1.06 !important;

        letter-spacing: -.8px !important;
    }

    .trade-about-content p {
        width: 100% !important;

        margin: 0 0 15px !important;

        font-size: 13.5px !important;

        line-height: 1.8 !important;

        color: #666 !important;
    }


    /* FEATURES */

    .trade-feature-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 9px !important;

        margin-top: 20px !important;
    }

    .trade-feature {
        min-width: 0 !important;

        min-height: 58px !important;

        padding: 11px 9px !important;

        display: flex !important;

        align-items: center !important;

        gap: 7px !important;

        border-radius: 11px !important;

        background: #f5f6f4 !important;
    }

    .trade-feature i {
        width: 24px !important;

        min-width: 24px !important;

        height: 24px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 50% !important;

        background: #187b4e !important;

        color: #fff !important;

        font-size: 9px !important;
    }

    .trade-feature span {
        min-width: 0 !important;

        font-size: 10.5px !important;

        line-height: 1.35 !important;

        color: #333 !important;
    }


    /* =====================================================
       LOGISTICS NETWORK
       ===================================================== */

    .logistics-section {
        padding: 60px 15px !important;

        background: #f7f7f4 !important;
    }

    .logistics-section > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding: 0 !important;

        margin: 0 auto !important;
    }

    .service-heading {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 30px !important;

        text-align: left !important;
    }

    .service-heading .section-tag {
        display: inline-block !important;

        margin-bottom: 11px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;
    }

    .service-heading h2 {
        width: 100% !important;

        margin: 0 0 15px !important;

        font-size: clamp(30px, 9vw, 42px) !important;

        line-height: 1.07 !important;

        letter-spacing: -.8px !important;
    }

    .service-heading p {
        width: 100% !important;

        margin: 0 !important;

        font-size: 13.5px !important;

        line-height: 1.75 !important;

        color: #666 !important;
    }


    /* =====================================================
       LOGISTICS CARDS
       ===================================================== */

    .logistics-card {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        margin: 0 0 18px !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        transform: none !important;

        background: #fff !important;

        box-shadow:
            0 10px 30px rgba(0,0,0,.07) !important;
    }

    .logistics-card.reverse {
        flex-direction: column !important;
    }

    .logistics-image {
        width: 100% !important;

        height: 210px !important;

        min-height: 210px !important;

        flex: 0 0 210px !important;

        overflow: hidden !important;
    }

    .logistics-image img {
        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center !important;
    }

    .logistics-content {
        width: 100% !important;

        min-width: 0 !important;

        padding: 21px 18px 23px !important;
    }

    .logistics-icon {
        width: 42px !important;

        height: 42px !important;

        min-width: 42px !important;

        margin: 0 0 13px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 12px !important;
    }

    .logistics-content h3 {
        margin: 0 0 11px !important;

        font-size: 22px !important;

        line-height: 1.2 !important;
    }

    .logistics-content p {
        width: 100% !important;

        margin: 0 0 15px !important;

        font-size: 13px !important;

        line-height: 1.7 !important;

        color: #666 !important;

        overflow-wrap: break-word !important;
    }

    .logistics-content ul {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        list-style: none !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 8px !important;
    }

    .logistics-content li {
        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        font-size: 11px !important;

        line-height: 1.4 !important;
    }

    .logistics-content li i {
        width: 20px !important;

        min-width: 20px !important;

        height: 20px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 50% !important;

        font-size: 8px !important;
    }


    /* =====================================================
       PROCESS
       ===================================================== */

    .process-section {
        padding: 60px 15px !important;

        background: #fff !important;
    }

    .process-section > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding: 0 !important;

        margin: 0 auto !important;
    }

    .process-section .service-heading {
        margin-bottom: 30px !important;
    }

    .process-wrapper {
        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 0 !important;

        flex-wrap: nowrap !important;
    }

    .process-item {
        width: 100% !important;

        min-height: 72px !important;

        padding: 13px 15px !important;

        display: flex !important;

        align-items: center !important;

        gap: 14px !important;

        border-radius: 15px !important;

        background: #f7f7f4 !important;

        transform: none !important;
    }

    .process-icon {
        width: 43px !important;

        min-width: 43px !important;

        height: 43px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 12px !important;
    }

    .process-icon i {
        font-size: 15px !important;
    }

    .process-item h4 {
        margin: 0 !important;

        font-size: 16px !important;

        line-height: 1.25 !important;

        font-weight: 700 !important;
    }

    /* vertical connector */

    .process-line {
        display: block !important;

        width: 2px !important;

        height: 18px !important;

        min-height: 18px !important;

        margin: 0 0 0 36px !important;

        background: #c18d55 !important;
    }


    /* =====================================================
       WHY CHOOSE US
       ===================================================== */

    .why-section {
        padding: 60px 15px !important;

        background: #f7f7f4 !important;
    }

    .why-section > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding: 0 !important;

        margin: 0 auto !important;
    }

    .why-section .service-heading {
        margin-bottom: 28px !important;
    }

    .why-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 12px !important;
    }

    .why-card {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 130px !important;

        padding: 19px !important;

        border-radius: 17px !important;

        display: block !important;

        transform: none !important;

        background: #fff !important;

        box-shadow:
            0 8px 25px rgba(0,0,0,.055) !important;
    }

    .why-card > i {
        width: 39px !important;

        height: 39px !important;

        margin-bottom: 11px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 11px !important;

        font-size: 15px !important;
    }

    .why-card h3 {
        margin: 0 0 7px !important;

        font-size: 17px !important;

        line-height: 1.25 !important;
    }

    .why-card p {
        margin: 0 !important;

        font-size: 12px !important;

        line-height: 1.65 !important;

        color: #666 !important;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .trade-cta {
        padding: 60px 0 !important;

        background: #187b4e !important;

        color: #fff !important;
    }

    .trade-cta > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        margin: 0 auto !important;
    }

    .cta-wrapper {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        text-align: left !important;
    }

    .cta-wrapper small {
        display: inline-block !important;

        margin-bottom: 12px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;

        color: #dcb47b !important;
    }

    .cta-wrapper h2 {
        width: 100% !important;

        margin: 0 0 17px !important;

        font-size: clamp(30px, 9vw, 43px) !important;

        line-height: 1.07 !important;

        letter-spacing: -.8px !important;

        color: #fff !important;
    }

    .cta-wrapper p {
        width: 100% !important;

        margin: 0 0 23px !important;

        font-size: 13.5px !important;

        line-height: 1.75 !important;

        color: rgba(255,255,255,.9) !important;
    }

    .trade-btns {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 10px !important;
    }

    .trade-btns .hero-btn {
        width: 100% !important;

        min-height: 48px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 13px 18px !important;

        border-radius: 10px !important;

        text-align: center !important;

        font-size: 13px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .trade-hero {
        height: calc(100svh - 86px) !important;

        min-height: 500px !important;
    }

    .trade-content h1 {
        font-size: 42px !important;
    }

    .trade-content p {
        font-size: 13px !important;
    }


    .trade-intro,
    .trade-about,
    .logistics-section,
    .process-section,
    .why-section,
    .trade-cta {
        padding-top: 48px !important;

        padding-bottom: 48px !important;
    }


    .trade-about-image .main-image {
        height: 255px !important;

        min-height: 255px !important;

        max-height: 255px !important;

        border-radius: 18px !important;
    }


    .trade-about-image .experience-card {
        left: 10px !important;

        right: 10px !important;

        min-height: 90px !important;

        max-height: 98px !important;

        padding: 13px 16px !important;

        border-radius: 17px !important;
    }


    .experience-card h2 {
        font-size: 27px !important;
    }


    .experience-card span {
        font-size: 11px !important;
    }


    .trade-feature {
        min-height: 54px !important;

        padding: 10px 8px !important;
    }


    .trade-feature span {
        font-size: 10px !important;
    }


    .logistics-image {
        height: 190px !important;

        min-height: 190px !important;

        flex-basis: 190px !important;
    }


    .logistics-content {
        padding: 18px 16px 20px !important;
    }


    .logistics-content h3 {
        font-size: 20px !important;
    }


    .logistics-content p {
        font-size: 12.5px !important;
    }


    .process-item {
        min-height: 66px !important;

        padding: 11px 13px !important;
    }


    .process-icon {
        width: 39px !important;

        min-width: 39px !important;

        height: 39px !important;

        border-radius: 10px !important;
    }


    .process-item h4 {
        font-size: 15px !important;
    }


    .process-line {
        margin-left: 32px !important;

        height: 15px !important;
    }


    .why-card {
        min-height: 120px !important;

        padding: 16px !important;
    }


    .why-card h3 {
        font-size: 16px !important;
    }


    .why-card p {
        font-size: 11.5px !important;
    }


    .cta-wrapper h2 {
        font-size: 31px !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .trade-content h1 {
        font-size: 39px !important;
    }


    .trade-content p {
        font-size: 12.5px !important;
    }


    .trade-intro .intro-left h2 {
        font-size: 28px !important;
    }


    .trade-about-content h2 {
        font-size: 28px !important;
    }


    .trade-about-image .main-image {
        height: 230px !important;

        min-height: 230px !important;

        max-height: 230px !important;
    }


    .logistics-image {
        height: 175px !important;

        min-height: 175px !important;

        flex-basis: 175px !important;
    }


    .service-heading h2 {
        font-size: 28px !important;
    }


    .why-card {
        padding: 14px !important;
    }


    .cta-wrapper h2 {
        font-size: 28px !important;
    }

}

/* =========================================================
   MOBILE PROCESS
   PREMIUM TIMELINE DESIGN
   ========================================================= */

@media (max-width: 767px) {

    .process-section {
        width: 100% !important;

        padding: 55px 15px 60px !important;

        background: #f7f8f5 !important;

        overflow: hidden !important;
    }


    .process-section > .container {
        width: 100% !important;

        max-width: 100% !important;

        padding: 0 !important;

        margin: 0 !important;
    }


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

    .process-section .service-heading {
        width: 100% !important;

        margin-bottom: 28px !important;

        text-align: left !important;
    }


    .process-section .service-heading .section-tag {
        display: inline-block !important;

        margin-bottom: 10px !important;

        font-size: 10px !important;

        letter-spacing: 2px !important;

        line-height: 1.4 !important;
    }


    .process-section .service-heading h2 {
        width: 100% !important;

        margin: 0 0 14px !important;

        font-size: 34px !important;

        line-height: 1.05 !important;

        letter-spacing: -1px !important;

        font-weight: 800 !important;

        color: #111 !important;
    }


    .process-section .service-heading p {
        width: 100% !important;

        margin: 0 !important;

        font-size: 13.5px !important;

        line-height: 1.75 !important;

        color: #6c6c6c !important;
    }


    /* =====================================================
       PROCESS WRAPPER
       ===================================================== */

    .process-wrapper {
        position: relative !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 12px !important;

        flex-wrap: nowrap !important;
    }


    /* =====================================================
       REMOVE OLD CONNECTORS
       ===================================================== */

    .process-line {
        display: none !important;
    }


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

    .process-item {
        position: relative !important;

        width: 100% !important;

        min-width: 0 !important;

        min-height: 92px !important;

        margin: 0 !important;

        padding: 14px 15px !important;

        display: grid !important;

        grid-template-columns:
            34px
            46px
            minmax(0, 1fr) !important;

        align-items: center !important;

        column-gap: 11px !important;

        border: 1px solid rgba(0,0,0,.055) !important;

        border-radius: 17px !important;

        background: #fff !important;

        box-shadow:
            0 6px 20px rgba(0,0,0,.045) !important;

        transform: none !important;

        overflow: hidden !important;
    }


    /* =====================================================
       NUMBER
       ===================================================== */

    .process-number {
        width: 34px !important;

        height: 34px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 10px !important;

        background: #f0f4f1 !important;

        color: #14784c !important;

        font-size: 10px !important;

        line-height: 1 !important;

        font-weight: 800 !important;

        letter-spacing: .3px !important;
    }


    /* =====================================================
       ICON
       ===================================================== */

    .process-icon {
        width: 46px !important;

        min-width: 46px !important;

        height: 46px !important;

        margin: 0 !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 13px !important;

        background: #087a4d !important;

        color: #fff !important;

        box-shadow:
            0 5px 14px rgba(8,122,77,.18) !important;
    }


    .process-icon i {
        margin: 0 !important;

        font-size: 16px !important;

        color: #fff !important;
    }


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

    .process-info {
        min-width: 0 !important;

        padding: 0 !important;
    }


    .process-info span {
        display: block !important;

        margin-bottom: 4px !important;

        font-size: 8px !important;

        line-height: 1 !important;

        letter-spacing: 1.5px !important;

        font-weight: 700 !important;

        color: #b3834e !important;
    }


    .process-info h4 {
        margin: 0 0 4px !important;

        font-size: 17px !important;

        line-height: 1.15 !important;

        font-weight: 750 !important;

        color: #111 !important;
    }


    .process-info p {
        margin: 0 !important;

        font-size: 10.5px !important;

        line-height: 1.4 !important;

        color: #777 !important;
    }


    /* =====================================================
       VERTICAL TIMELINE CONNECTOR
       ===================================================== */

    .process-item:not(:last-child)::after {
        content: "" !important;

        position: absolute !important;

        left: 30px !important;

        bottom: -13px !important;

        width: 2px !important;

        height: 13px !important;

        background: #d5b78f !important;

        z-index: 5 !important;
    }


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

    .process-item:first-child {
        border-color: rgba(8,122,77,.15) !important;
    }


    .process-item:first-child .process-number {
    

        color: #fff !important;
    }


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

    .process-item:active {
        transform: scale(.985) !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .process-section {
        padding: 48px 13px 52px !important;
    }


    .process-section .service-heading {
        margin-bottom: 24px !important;
    }


    .process-section .service-heading h2 {
        font-size: 30px !important;

        line-height: 1.07 !important;
    }


    .process-section .service-heading p {
        font-size: 12.5px !important;
    }


    .process-wrapper {
        gap: 11px !important;
    }


    .process-item {
        min-height: 86px !important;

        padding: 12px !important;

        grid-template-columns:
            30px
            42px
            minmax(0, 1fr) !important;

        column-gap: 19px !important;

        border-radius: 15px !important;
    }


    .process-number {
        width: 30px !important;

        height: 30px !important;

        border-radius: 9px !important;

        font-size: 9px !important;
    }


    .process-icon {
        width: 42px !important;

        min-width: 42px !important;

        height: 42px !important;

        border-radius: 11px !important;
    }


    .process-icon i {
        font-size: 14px !important;
    }


    .process-info span {
        font-size: 7.5px !important;

        margin-bottom: 3px !important;
    }


    .process-info h4 {
        font-size: 16px !important;

        margin-bottom: 3px !important;
    }


    .process-info p {
        font-size: 10px !important;

        line-height: 1.35 !important;
    }


    .process-item:not(:last-child)::after {
        left: 25px !important;

        bottom: -12px !important;

        height: 12px !important;
    }

}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width: 360px) {

    .process-section {
        padding-left: 11px !important;

        padding-right: 11px !important;
    }


    .process-section .service-heading h2 {
        font-size: 28px !important;
    }


    .process-item {
        grid-template-columns:
            28px
            39px
            minmax(0, 1fr) !important;

        column-gap: 18px !important;

        min-height: 82px !important;

        padding: 11px !important;
    }


    .process-number {
        width: 28px !important;

        height: 28px !important;

        font-size: 8px !important;
    }


    .process-icon {
        width: 39px !important;

        min-width: 39px !important;

        height: 39px !important;
    }


    .process-info h4 {
        font-size: 15px !important;
    }


    .process-info p {
        font-size: 9px !important;
    }

}


/* =========================================================
   CTA SECTION - MOBILE COMPLETE FIX
   ========================================================= */

@media (max-width: 767px) {

    /* ---------- SECTION ---------- */

    .trade-cta {
        position: relative !important;

        width: 100vw !important;
        max-width: 100vw !important;

        min-width: 100vw !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 55px 0 !important;

        display: block !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

        transform: none !important;

        left: auto !important;
        right: auto !important;

        background: #087a4d !important;

        color: #fff !important;
    }


    /* ---------- CONTAINER ---------- */

    .trade-cta > .container {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        display: block !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* ---------- WRAPPER ---------- */

    .trade-cta .cta-wrapper {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        display: block !important;

        text-align: left !important;

        transform: none !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* ---------- LABEL ---------- */

    .trade-cta .cta-wrapper small {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        margin: 0 0 12px !important;

        padding: 0 !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;

        color: #dcb47b !important;

        transform: none !important;
    }


    /* ---------- HEADING ---------- */

    .trade-cta .cta-wrapper h2 {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        margin: 0 0 18px !important;

        padding: 0 !important;

        font-size: clamp(31px, 10vw, 45px) !important;

        line-height: 1.05 !important;

        letter-spacing: -1px !important;

        font-weight: 800 !important;

        color: #fff !important;

        white-space: normal !important;

        overflow: visible !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;

        transform: none !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }


    /* ---------- PARAGRAPH ---------- */

    .trade-cta .cta-wrapper p {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        margin: 0 0 24px !important;

        padding: 0 !important;

        font-size: 13.5px !important;

        line-height: 1.75 !important;

        color: rgba(255,255,255,.9) !important;

        white-space: normal !important;

        word-break: normal !important;

        overflow-wrap: break-word !important;

        transform: none !important;
    }


    /* ---------- BUTTON AREA ---------- */

    .trade-cta .trade-btns {
        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        gap: 10px !important;

        transform: none !important;
    }


    /* ---------- BUTTON ---------- */

    .trade-cta .trade-btns .hero-btn {
        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        min-height: 48px !important;

        height: auto !important;

        margin: 0 !important;

        padding: 13px 18px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 10px !important;

        font-size: 13px !important;

        line-height: 1.3 !important;

        text-align: center !important;

        white-space: normal !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* ---------- REMOVE DESKTOP DECORATIONS ---------- */

    .trade-cta::before,
    .trade-cta::after,
    .trade-cta .cta-wrapper::before,
    .trade-cta .cta-wrapper::after {
        max-width: 100% !important;

        transform: none !important;
    }


    /* ---------- PREVENT GSAP / INLINE POSITIONING ---------- */

    .trade-cta [style*="transform"],
    .trade-cta [style*="translate"],
    .trade-cta [style*="position"] {
        max-width: 100% !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .trade-cta {
        width: 100vw !important;

        min-width: 100vw !important;

        padding: 48px 0 !important;
    }


    .trade-cta > .container {
        padding-left: 15px !important;

        padding-right: 15px !important;
    }


    .trade-cta .cta-wrapper small {
        font-size: 9px !important;

        letter-spacing: 1.8px !important;
    }


    .trade-cta .cta-wrapper h2 {
        font-size: 32px !important;

        line-height: 1.06 !important;

        letter-spacing: -.8px !important;

        margin-bottom: 16px !important;
    }


    .trade-cta .cta-wrapper p {
        font-size: 12.5px !important;

        line-height: 1.7 !important;

        margin-bottom: 21px !important;
    }


    .trade-cta .trade-btns {
        gap: 9px !important;
    }


    .trade-cta .trade-btns .hero-btn {
        min-height: 46px !important;

        padding: 12px 15px !important;

        font-size: 12px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .trade-cta > .container {
        padding-left: 13px !important;

        padding-right: 13px !important;
    }


    .trade-cta .cta-wrapper h2 {
        font-size: 29px !important;
    }


    .trade-cta .cta-wrapper p {
        font-size: 12px !important;
    }

}


/* =========================================================
   PROJECTS PAGE
   MOBILE APP STYLE RESPONSIVE
   DESKTOP VERSION UNTOUCHED
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL MOBILE FIX
       ===================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    .civil-hero,
    .csr-intro-section,
    .csr-gallery-section,
    .irrigation-overview {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .civil-hero {
        position: relative !important;

        width: 100% !important;

        height: calc(100svh - 94px) !important;

        min-height: 500px !important;
        max-height: 720px !important;

        margin: 0 !important;

        overflow: hidden !important;

        background: #111 !important;
    }


    .civil-hero > img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    .civil-overlay {
        position: absolute !important;

        inset: 0 !important;

        z-index: 2 !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.15) 0%,
                rgba(0,0,0,.32) 45%,
                rgba(0,0,0,.84) 100%
            ) !important;
    }


    .civil-hero .container {
        position: relative !important;

        z-index: 5 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;

        margin: 0 !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        display: flex !important;

        align-items: flex-end !important;
    }


    .civil-content {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding-bottom: 42px !important;

        transform: none !important;
    }


    .civil-content h1 {
        width: 100% !important;

        margin: 0 !important;

        font-size: clamp(42px, 12vw, 58px) !important;

        line-height: 1 !important;

        letter-spacing: -1.4px !important;

        font-weight: 800 !important;

        color: #fff !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       PROJECT INTRO
       ===================================================== */

    .csr-intro-section {
        width: 100% !important;

        padding: 58px 0 !important;

        background: #f7f8f5 !important;
    }


    .csr-intro-container {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 15px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 32px !important;

        box-sizing: border-box !important;
    }


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

    .csr-intro-left {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 1 !important;

        margin: 0 !important;

        padding: 0 !important;

        transform: none !important;

        opacity: 1 !important;
    }


    .csr-subtitle {
        display: inline-block !important;

        margin: 0 0 14px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;

        color: #087a4d !important;
    }


    .csr-intro-left > p {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 17px !important;

        padding: 0 !important;

        font-size: 13.5px !important;

        line-height: 1.8 !important;

        color: #626262 !important;

        transform: none !important;
    }


    .csr-intro-left > p:last-of-type {
        margin-bottom: 0 !important;
    }


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

    .csr-intro-right {
        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: 275px !important;

        min-height: 275px !important;

        order: 2 !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        border-radius: 20px !important;

        transform: none !important;

        opacity: 1 !important;
    }


    .csr-intro-right img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    /* =====================================================
       POINTS
       ===================================================== */

    .csr-points {
        width: 100% !important;

        margin-top: 24px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 9px !important;
    }


    .csr-point {
        width: 100% !important;

        min-width: 0 !important;

        min-height: 62px !important;

        padding: 11px 10px !important;

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        border-radius: 12px !important;

        background: #fff !important;

        border: 1px solid rgba(0,0,0,.05) !important;

        box-shadow:
            0 5px 18px rgba(0,0,0,.04) !important;

        transform: none !important;
    }


    .csr-point i {
        width: 27px !important;

        min-width: 27px !important;

        height: 27px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 8px !important;

        background: #087a4d !important;

        color: #fff !important;

        font-size: 10px !important;
    }


    .csr-point span {
        min-width: 0 !important;

        font-size: 10px !important;

        line-height: 1.35 !important;

        font-weight: 600 !important;

        color: #333 !important;
    }


    /* =====================================================
       GALLERY
       ===================================================== */

    .csr-gallery-section {
        width: 100% !important;

        padding: 58px 15px !important;

        background: #fff !important;
    }


    .csr-gallery-heading {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 0 27px !important;

        padding: 0 !important;

        text-align: left !important;

        transform: none !important;

        opacity: 1 !important;
    }


    .csr-gallery-heading h2 {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        font-size: clamp(30px, 9vw, 42px) !important;

        line-height: 1.06 !important;

        letter-spacing: -.8px !important;

        font-weight: 800 !important;

        color: #111 !important;
    }


    /* =====================================================
       GALLERY GRID
       ===================================================== */

    .csr-gallery-grid {
        width: 100% !important;

        max-width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        grid-auto-rows: 145px !important;

        gap: 9px !important;

        margin: 0 !important;

        padding: 0 !important;

        transform: none !important;
    }


    .csr-gallery-item {
        position: relative !important;

        width: 100% !important;

        height: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        border-radius: 15px !important;

        overflow: hidden !important;

        transform: none !important;

        opacity: 1 !important;
    }


    /* first image large */

    .csr-gallery-item.large {
        grid-column: 1 / -1 !important;

        grid-row: auto !important;

        height: 220px !important;
    }


    .csr-gallery-item a {
        display: block !important;

        width: 100% !important;

        height: 100% !important;
    }


    .csr-gallery-item img {
        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center !important;

        transition: transform .4s ease !important;
    }


    /* =====================================================
       IRRIGATION SECTION
       ===================================================== */

    .irrigation-overview {
        position: relative !important;

        width: 100% !important;

        padding: 60px 0 !important;

        margin: 0 !important;

        background: #f7f8f5 !important;

        transform: none !important;

        translate: none !important;

        rotate: none !important;

        scale: none !important;

        opacity: 1 !important;
    }


    .irrigation-overview > .container {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 15px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       IRRIGATION GRID
       ===================================================== */

    .overview-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .overview-left {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 1 !important;

        margin: 0 !important;

        padding: 0 !important;

        transform: none !important;
    }


    .overview-left h2 {
        margin: 0 0 15px !important;

        font-size: clamp(32px, 9vw, 44px) !important;

        line-height: 1.05 !important;

        letter-spacing: -.8px !important;

        font-weight: 800 !important;

        color: #111 !important;
    }


    .overview-left p {
        width: 100% !important;

        margin: 0 0 16px !important;

        font-size: 13.5px !important;

        line-height: 1.8 !important;

        color: #666 !important;
    }


    /* =====================================================
       IRRIGATION BADGE
       ===================================================== */

    .badge {
        width: 100% !important;

        min-height: 52px !important;

        margin-top: 22px !important;

        padding: 11px 14px !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;

        border-radius: 13px !important;

        background: #fff !important;

        border: 1px solid rgba(8,122,77,.10) !important;

        box-shadow:
            0 6px 20px rgba(0,0,0,.05) !important;

        font-size: 11px !important;

        line-height: 1.4 !important;

        font-weight: 600 !important;

        color: #333 !important;
    }


    .badge i {
        width: 30px !important;

        min-width: 30px !important;

        height: 30px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        border-radius: 9px !important;

        background: #087a4d !important;

        color: #fff !important;

        font-size: 12px !important;
    }


    /* =====================================================
       IRRIGATION VIDEO
       ===================================================== */

    .overview-video {
        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        height: 270px !important;

        min-height: 270px !important;

        order: 2 !important;

        margin: 0 !important;

        padding: 0 !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        background: #111 !important;

        transform: none !important;
    }


    .overview-video video {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    /* =====================================================
       IRRIGATION GALLERY
       ===================================================== */

    .gallery-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 9px !important;

        margin-top: 30px !important;

        padding: 0 !important;
    }


    .gallery-grid img {
        width: 100% !important;

        height: 135px !important;

        min-width: 0 !important;

        display: block !important;

        object-fit: cover !important;

        border-radius: 14px !important;

        margin: 0 !important;
    }


    /* =====================================================
       AOS / GSAP MOBILE RESET
       ===================================================== */

    .aos-init,
    .aos-animate {
        transform: none !important;

        opacity: 1 !important;
    }


    [data-aos] {
        transform: none !important;

        opacity: 1 !important;
    }


    [data-aos="fade-up"],
    [data-aos="fade-down"],
    [data-aos="fade-left"],
    [data-aos="fade-right"],
    [data-aos="zoom-in"],
    [data-aos="zoom-out"] {
        transform: none !important;

        opacity: 1 !important;
    }


    /* inline GSAP transform reset */

    .irrigation-overview[style] {
        transform: none !important;

        translate: none !important;

        rotate: none !important;

        scale: none !important;

        opacity: 1 !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .civil-hero {
        height: calc(100svh - 86px) !important;

        min-height: 490px !important;
    }


    .civil-content {
        padding-bottom: 37px !important;
    }


    .civil-content h1 {
        font-size: 41px !important;
    }


    .csr-intro-section {
        padding: 48px 0 !important;
    }


    .csr-intro-container {
        padding-left: 13px !important;

        padding-right: 13px !important;

        gap: 27px !important;
    }


    .csr-intro-left > p {
        font-size: 13px !important;

        line-height: 1.75 !important;
    }


    .csr-intro-right {
        height: 245px !important;

        min-height: 245px !important;

        border-radius: 17px !important;
    }


    .csr-points {
        gap: 8px !important;

        margin-top: 20px !important;
    }


    .csr-point {
        min-height: 57px !important;

        padding: 9px 8px !important;

        border-radius: 10px !important;

        gap: 6px !important;
    }


    .csr-point i {
        width: 24px !important;

        min-width: 24px !important;

        height: 24px !important;

        border-radius: 7px !important;

        font-size: 9px !important;
    }


    .csr-point span {
        font-size: 9.5px !important;
    }


    .csr-gallery-section {
        padding: 48px 13px !important;
    }


    .csr-gallery-heading {
        margin-bottom: 22px !important;
    }


    .csr-gallery-heading h2 {
        font-size: 30px !important;
    }


    .csr-gallery-grid {
        grid-auto-rows: 125px !important;

        gap: 8px !important;
    }


    .csr-gallery-item {
        border-radius: 13px !important;
    }


    .csr-gallery-item.large {
        height: 190px !important;
    }


    .irrigation-overview {
        padding: 50px 0 !important;
    }


    .irrigation-overview > .container {
        padding-left: 13px !important;

        padding-right: 13px !important;
    }


    .overview-grid {
        gap: 25px !important;
    }


    .overview-left h2 {
        font-size: 31px !important;
    }


    .overview-left p {
        font-size: 12.5px !important;

        line-height: 1.75 !important;
    }


    .overview-video {
        height: 245px !important;

        min-height: 245px !important;

        border-radius: 17px !important;
    }


    .gallery-grid {
        gap: 8px !important;

        margin-top: 25px !important;
    }


    .gallery-grid img {
        height: 115px !important;

        border-radius: 12px !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .civil-content h1 {
        font-size: 38px !important;
    }


    .csr-subtitle {
        font-size: 9px !important;
    }


    .csr-intro-left > p {
        font-size: 12px !important;
    }


    .csr-intro-right {
        height: 220px !important;

        min-height: 220px !important;
    }


    .csr-point span {
        font-size: 9px !important;
    }


    .csr-gallery-heading h2 {
        font-size: 28px !important;
    }


    .csr-gallery-item.large {
        height: 175px !important;
    }


    .overview-left h2 {
        font-size: 29px !important;
    }


    .overview-video {
        height: 220px !important;

        min-height: 220px !important;
    }


    .gallery-grid img {
        height: 100px !important;
    }

}

/* =========================================================
   MINERAL TRANSFORMATION PAGE
   MOBILE APP STYLE RESPONSIVE
   DESKTOP VERSION UNTOUCHED
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL MOBILE FIX
       ===================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    .mineral-hero,
    .mineral-intro,
    .mineral-about,
    .beneficiation-process,
    .mineral-highlight {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .mineral-hero {
        position: relative !important;

        width: 100% !important;

        height: calc(100svh - 94px) !important;

        min-height: 500px !important;
        max-height: 720px !important;

        margin: 0 !important;

        overflow: hidden !important;

        background: #111 !important;
    }


    .mineral-hero > img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    .mineral-overlay {
        position: absolute !important;

        inset: 0 !important;

        z-index: 2 !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.12) 0%,
                rgba(0,0,0,.32) 45%,
                rgba(0,0,0,.86) 100%
            ) !important;
    }


    .mineral-hero .container {
        position: relative !important;

        z-index: 5 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;

        margin: 0 !important;

        padding-left: 18px !important;
        padding-right: 18px !important;

        display: flex !important;

        align-items: flex-end !important;
    }


    .mineral-content {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding-bottom: 42px !important;

        transform: none !important;
    }


    .mineral-content small {
        display: block !important;

        width: 100% !important;

        margin: 0 0 12px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2.5px !important;

        font-weight: 700 !important;

        color: rgba(255,255,255,.9) !important;
    }


    .mineral-content h1 {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        font-size: clamp(40px, 12vw, 58px) !important;

        line-height: 1 !important;

        letter-spacing: -1.4px !important;

        font-weight: 800 !important;

        color: #fff !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       INTRO / OVERVIEW
       ===================================================== */

    .mineral-intro {
        width: 100% !important;

        padding: 55px 0 !important;

        background: #f7f8f5 !important;
    }


    .mineral-intro > .container {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding-left: 17px !important;
        padding-right: 17px !important;
    }


    .mineral-intro .intro-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 24px !important;

        margin: 0 !important;
    }


    .mineral-intro .intro-left,
    .mineral-intro .intro-right {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .mineral-intro .intro-left {
        order: 1 !important;
    }


    .mineral-intro .intro-right {
        order: 2 !important;
    }


    .mineral-intro .intro-left h2 {
        width: 100% !important;

        margin: 0 !important;

        font-size: 34px !important;

        line-height: 1.05 !important;

        letter-spacing: -.8px !important;

        font-weight: 800 !important;

        color: #111 !important;
    }


    .mineral-intro .intro-right p {
        width: 100% !important;

        margin: 0 0 16px !important;

        padding: 0 !important;

        font-size: 13.5px !important;

        line-height: 1.8 !important;

        color: #666 !important;
    }


    .mineral-intro .intro-right p:last-child {
        margin-bottom: 0 !important;
    }


    /* =====================================================
       ABOUT
       ===================================================== */

    .mineral-about {
        width: 100% !important;

        padding: 55px 0 !important;

        background: #fff !important;
    }


    .mineral-about > .container {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    .mineral-about-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* IMAGE */

    .mineral-image {
        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        height: 275px !important;

        min-height: 275px !important;

        order: 1 !important;

        margin: 0 !important;

        padding: 0 !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        background: #111 !important;
    }


    .mineral-image img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    /* CONTENT */

    .mineral-about-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 2 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .mineral-about-content .section-tag {
        display: inline-block !important;

        margin: 0 0 11px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;
    }


    .mineral-about-content h2 {
        width: 100% !important;

        margin: 0 0 17px !important;

        font-size: clamp(30px, 9vw, 43px) !important;

        line-height: 1.06 !important;

        letter-spacing: -.8px !important;

        font-weight: 800 !important;

        color: #111 !important;
    }


    .mineral-about-content p {
        width: 100% !important;

        margin: 0 0 16px !important;

        font-size: 13.5px !important;

        line-height: 1.8 !important;

        color: #666 !important;
    }


    .mineral-about-content p:last-child {
        margin-bottom: 0 !important;
    }


    /* =====================================================
       BENEFICIATION PROCESS
       ===================================================== */

    .beneficiation-process {
        width: 100% !important;

        padding: 55px 0 !important;

        background: #f7f8f5 !important;
    }


    .beneficiation-process > .container {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    .beneficiation-process .process-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* IMAGE FIRST */

    .beneficiation-process .process-image {
        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        height: 270px !important;

        min-height: 270px !important;

        order: 1 !important;

        margin: 0 !important;

        padding: 0 !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        background: #111 !important;
    }


    .beneficiation-process .process-image img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    /* CONTENT */

    .beneficiation-process .process-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 2 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .beneficiation-process .process-content .section-tag {
        display: inline-block !important;

        margin: 0 0 11px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;
    }


    .beneficiation-process .process-content h2 {
        width: 100% !important;

        margin: 0 0 17px !important;

        font-size: clamp(29px, 8.5vw, 41px) !important;

        line-height: 1.06 !important;

        letter-spacing: -.8px !important;

        font-weight: 800 !important;

        color: #111 !important;
    }


    .beneficiation-process .process-content p {
        width: 100% !important;

        margin: 0 0 16px !important;

        font-size: 13px !important;

        line-height: 1.8 !important;

        color: #666 !important;
    }


    .beneficiation-process .process-content p:last-child {
        margin-bottom: 0 !important;
    }


    /* =====================================================
       HIGHLIGHT
       ===================================================== */

    .mineral-highlight {
        width: 100% !important;

        padding: 55px 0 !important;

        background: #fff !important;
    }


    .mineral-highlight > .container {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    .highlight-wrapper {
        width: 100% !important;

        max-width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* CONTENT FIRST */

    .highlight-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        order: 1 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .highlight-content .section-tag {
        display: inline-block !important;

        margin: 0 0 11px !important;

        font-size: 10px !important;

        line-height: 1.4 !important;

        letter-spacing: 2px !important;
    }


    .highlight-content h2 {
        width: 100% !important;

        margin: 0 0 17px !important;

        font-size: clamp(30px, 9vw, 42px) !important;

        line-height: 1.06 !important;

        letter-spacing: -.8px !important;

        font-weight: 800 !important;

        color: #111 !important;
    }


    .highlight-content p {
        width: 100% !important;

        margin: 0 0 16px !important;

        font-size: 13.5px !important;

        line-height: 1.8 !important;

        color: #666 !important;
    }


    .highlight-content p:last-child {
        margin-bottom: 0 !important;
    }


    /* IMAGE */

    .highlight-image {
        position: relative !important;

        width: 100% !important;

        max-width: 100% !important;

        height: 270px !important;

        min-height: 270px !important;

        order: 2 !important;

        margin: 0 !important;

        padding: 0 !important;

        border-radius: 20px !important;

        overflow: hidden !important;

        background: #111 !important;
    }


    .highlight-image img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        display: block !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    /* =====================================================
       REMOVE DESKTOP POSITIONING
       ===================================================== */

    .mineral-hero *,
    .mineral-intro *,
    .mineral-about *,
    .beneficiation-process *,
    .mineral-highlight * {
        box-sizing: border-box !important;
    }


    .mineral-hero [style*="transform"],
    .mineral-intro [style*="transform"],
    .mineral-about [style*="transform"],
    .beneficiation-process [style*="transform"],
    .mineral-highlight [style*="transform"] {
        transform: none !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .mineral-hero {
        height: calc(100svh - 86px) !important;

        min-height: 490px !important;
    }


    .mineral-content {
        padding-bottom: 37px !important;
    }


    .mineral-content small {
        font-size: 9px !important;

        letter-spacing: 2px !important;
    }


    .mineral-content h1 {
        font-size: 41px !important;

        line-height: 1 !important;
    }


    .mineral-intro,
    .mineral-about,
    .beneficiation-process,
    .mineral-highlight {
        padding-top: 48px !important;

        padding-bottom: 48px !important;
    }


    .mineral-intro > .container,
    .mineral-about > .container,
    .beneficiation-process > .container,
    .mineral-highlight > .container {
        padding-left: 13px !important;

        padding-right: 13px !important;
    }


    .mineral-intro .intro-left h2 {
        font-size: 31px !important;
    }


    .mineral-intro .intro-right p {
        font-size: 12.5px !important;

        line-height: 1.75 !important;
    }


    .mineral-image {
        height: 245px !important;

        min-height: 245px !important;

        border-radius: 17px !important;
    }


    .mineral-about-content h2 {
        font-size: 30px !important;
    }


    .mineral-about-content p {
        font-size: 12.5px !important;

        line-height: 1.75 !important;
    }


    .beneficiation-process .process-image {
        height: 240px !important;

        min-height: 240px !important;

        border-radius: 17px !important;
    }


    .beneficiation-process .process-content h2 {
        font-size: 29px !important;
    }


    .beneficiation-process .process-content p {
        font-size: 12.5px !important;

        line-height: 1.75 !important;
    }


    .highlight-content h2 {
        font-size: 30px !important;
    }


    .highlight-content p {
        font-size: 12.5px !important;

        line-height: 1.75 !important;
    }


    .highlight-image {
        height: 240px !important;

        min-height: 240px !important;

        border-radius: 17px !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .mineral-content h1 {
        font-size: 38px !important;
    }


    .mineral-intro .intro-left h2 {
        font-size: 28px !important;
    }


    .mineral-image {
        height: 220px !important;

        min-height: 220px !important;
    }


    .mineral-about-content h2 {
        font-size: 28px !important;
    }


    .beneficiation-process .process-image {
        height: 220px !important;

        min-height: 220px !important;
    }


    .beneficiation-process .process-content h2 {
        font-size: 27px !important;
    }


    .highlight-content h2 {
        font-size: 28px !important;
    }


    .highlight-image {
        height: 220px !important;

        min-height: 220px !important;
    }

}


/* =========================================================
   WATER / DREDGING PAGE
   MOBILE APP STYLE
   DESKTOP DESIGN UNTOUCHED
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL
       ===================================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    body {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    .water-page {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .water-page *,
    .water-page *::before,
    .water-page *::after {
        box-sizing: border-box !important;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .water-hero {
        position: relative !important;

        width: 100% !important;
        height: calc(100svh - 86px) !important;

        min-height: 520px !important;
        max-height: 720px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        background-size: cover !important;
        background-position: center center !important;
    }


    .hero-overlay {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background:
            linear-gradient(
                180deg,
                rgba(2, 43, 47, 0.20) 0%,
                rgba(2, 43, 47, 0.35) 38%,
                rgba(2, 43, 47, 0.90) 100%
            ) !important;
    }


    .hero-container {
        position: relative !important;

        z-index: 3 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 100% !important;
        min-height: 100% !important;

        margin: 0 !important;
        padding: 0 16px !important;

        display: flex !important;
        flex-direction: column !important;

        justify-content: flex-end !important;
        align-items: stretch !important;

        gap: 0 !important;
    }


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

   


    .hero-content .eyebrow {
        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        margin: 0 0 13px !important;

        font-size: 9px !important;

        line-height: 1.3 !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;

        color: #83c5aa !important;
    }


    .hero-content .eyebrow span {
        width: 24px !important;
        min-width: 24px !important;

        height: 2px !important;
    }


    .hero-content h1 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 15px !important;
        padding: 0 !important;

        font-size: clamp(38px, 11.5vw, 55px) !important;

        line-height: .98 !important;

        letter-spacing: -1.5px !important;

        font-weight: 700 !important;

        color: #fff !important;
    }


   


    .hero-content p {
        width: 100% !important;
        max-width: 390px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;

        line-height: 1.65 !important;

        color: rgba(255,255,255,.82) !important;
    }


    /* =====================================================
       HERO INFO CARD
       ===================================================== */

    .hero-info-card {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: auto !important;

        margin: 0 0 18px !important;
        padding: 17px 17px !important;

        border-radius: 17px !important;

        transform: none !important;

        background:
            linear-gradient(
                145deg,
                rgba(3,64,66,.94),
                rgba(3,45,49,.92)
            ) !important;

        border: 1px solid rgba(123,195,169,.42) !important;

        box-shadow:
            0 14px 35px rgba(0,25,27,.22) !important;

        backdrop-filter: blur(8px) !important;
    }


    .card-small-title {
        margin: 0 0 8px !important;

        font-size: 9px !important;

        line-height: 1.2 !important;

        letter-spacing: 1.7px !important;
    }


    .hero-info-card h3 {
        margin: 0 0 13px !important;

        font-size: 17px !important;

        line-height: 1.15 !important;

        letter-spacing: -.2px !important;
    }


    .info-points {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 7px !important;

        margin: 0 0 11px !important;
    }


    .info-points div {
        min-width: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 5px !important;
    }


    .info-points span {
        font-size: 10px !important;

        line-height: 1.2 !important;
    }


    .info-points i {
        width: 5px !important;
        height: 5px !important;
    }


    .hero-info-card p {
        width: 100% !important;

        margin: 0 !important;

        font-size: 10px !important;

        line-height: 1.4 !important;
    }


    /* Hide desktop scroll indicator */

    .scroll-indicator {
        display: none !important;
    }


    /* =====================================================
       SECTION LABEL
       ===================================================== */

    .section-label {
        display: flex !important;

        align-items: center !important;

        gap: 7px !important;

        margin: 0 0 11px !important;

        font-size: 9px !important;

        line-height: 1.2 !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;
    }


    /* =====================================================
       VISION
       ===================================================== */

    .vision-section {
        position: relative !important;

        width: 100% !important;

        min-height: auto !important;

        padding: 52px 0 !important;

        overflow: hidden !important;
    }


    .vision-container {
        position: relative !important;

        z-index: 2 !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: auto !important;

        margin: 0 !important;

        padding: 0 15px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 25px !important;
    }


    .vision-content {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .vision-content h2 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 14px !important;

        font-size: clamp(29px, 9vw, 42px) !important;

        line-height: 1.05 !important;

        letter-spacing: -.8px !important;

        font-weight: 700 !important;

        color: #173f43 !important;
    }


    .vision-content p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 13px !important;

        line-height: 1.75 !important;

        color: #718487 !important;
    }


    /* =====================================================
       VISION CARDS
       ===================================================== */

    .vision-cards {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap: 10px !important;

        margin: 0 !important;
    }


    .vision-card {
        width: 100% !important;

        min-height: 105px !important;

        padding: 15px !important;

        border-radius: 15px !important;

        background: rgba(255,255,255,.96) !important;

        box-shadow:
            0 7px 22px rgba(23,65,62,.07) !important;

        transform: none !important;
    }


    .vision-icon {
        width: 29px !important;
        height: 29px !important;

        margin: 0 0 9px !important;

        font-size: 13px !important;
    }


    .vision-card h3 {
        margin: 0 0 5px !important;

        font-size: 15px !important;

        line-height: 1.15 !important;
    }


    .vision-card p {
        margin: 0 !important;

        font-size: 11.5px !important;

        line-height: 1.5 !important;
    }


    .vision-circle {
        width: 180px !important;
        height: 180px !important;

        right: -95px !important;
        top: 5px !important;

        opacity: .65 !important;
    }


    /* =====================================================
       PROCESS
       ===================================================== */

    .process-section {
        position: relative !important;

        width: 100% !important;

        min-height: auto !important;

        padding: 52px 0 55px !important;

        overflow: hidden !important;
    }


    .process-container {
        position: relative !important;

        z-index: 2 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 15px !important;
    }


    .process-section h2 {
        width: 100% !important;

        margin: 0 0 28px !important;

        font-size: clamp(23px, 7vw, 31px) !important;

        line-height: 1.12 !important;

        letter-spacing: -.4px !important;
    }


    /* =====================================================
       PROCESS FLOW
       ===================================================== */

    .process-line {
        position: relative !important;

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 0 !important;

        margin: 0 !important;

        padding: 0 0 0 7px !important;

        opacity: 1 !important;
    }


    .process-line::before {
        display: block !important;

        position: absolute !important;

        content: "" !important;

        top: 8px !important;
        bottom: 8px !important;

        left: 10px !important;
        right: auto !important;

        width: 1px !important;
        height: auto !important;

        background:
            linear-gradient(
                180deg,
                rgba(119,194,165,.8),
                rgba(119,194,165,.18)
            ) !important;
    }


    .process-item {
        position: relative !important;

        width: 100% !important;

        min-height: 125px !important;

        margin: 0 !important;

        padding: 4px 0 28px 31px !important;
    }


    .process-item:last-child {
        padding-bottom: 0 !important;
    }


    .process-dot {
        position: absolute !important;

        top: 7px !important;
        left: 3px !important;

        width: 15px !important;
        height: 15px !important;

        z-index: 4 !important;

        border: 3px solid #075355 !important;

        box-shadow:
            0 0 0 2px rgba(255,255,255,.04) !important;
    }


    .process-number {
        margin: 0 0 7px !important;

        font-size: 8px !important;

        line-height: 1.2 !important;

        letter-spacing: 1.5px !important;
    }


    .process-item h3 {
        margin: 0 0 7px !important;

        font-size: 16px !important;

        line-height: 1.15 !important;
    }


    .process-item p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 11.5px !important;

        line-height: 1.55 !important;
    }


    /* =====================================================
       IMPACT
       ===================================================== */

    .impact-section {
        width: 100% !important;

        min-height: auto !important;

        padding: 52px 0 !important;

        background: #fff !important;
    }


    .impact-container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 15px !important;
    }


    .impact-section h2 {
        width: 100% !important;

        margin: 0 0 12px !important;

        font-size: clamp(27px, 8.5vw, 40px) !important;

        line-height: 1.05 !important;

        letter-spacing: -.8px !important;

        font-weight: 700 !important;

        color: #21474a !important;
    }


    .impact-description {
        width: 100% !important;

        margin: 0 0 23px !important;

        font-size: 13px !important;

        line-height: 1.7 !important;

        color: #829192 !important;
    }


    /* =====================================================
       IMPACT CARDS
       ===================================================== */

    .impact-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 9px !important;

        margin: 0 !important;
    }


    .impact-card {
        width: 100% !important;

        min-height: 60px !important;

        padding: 10px 11px !important;

        display: flex !important;

        align-items: center !important;

        gap: 8px !important;

        border-radius: 13px !important;

        font-size: 10.5px !important;

        line-height: 1.3 !important;

        background: #f0f6f3 !important;

        transform: none !important;
    }


    .impact-icon {
        width: 27px !important;
        min-width: 27px !important;

        height: 27px !important;

        font-size: 10px !important;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .bottom-cta {
        width: 100% !important;

        min-height: auto !important;

        padding: 25px 0 !important;
    }


    .cta-container {
        width: 100% !important;
        max-width: 100% !important;

        min-height: auto !important;

        margin: 0 !important;

        padding: 0 15px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: flex-start !important;

        gap: 17px !important;
    }


    .cta-content {
        width: 100% !important;
    }


    .cta-content h3 {
        margin: 0 0 6px !important;

        font-size: 14px !important;

        line-height: 1.3 !important;
    }


    .cta-content p {
        margin: 0 !important;

        font-size: 9px !important;

        line-height: 1.5 !important;
    }


    .cta-button {
        width: 100% !important;

        min-height: 43px !important;

        padding: 0 20px !important;

        border-radius: 12px !important;

        font-size: 10px !important;

        letter-spacing: 1px !important;
    }


    /* =====================================================
       REMOVE DESKTOP ANIMATION POSITIONING
       ===================================================== */

    .water-page [style*="transform"],
    .water-page [style*="translate"],
    .water-page [style*="rotate"],
    .water-page [style*="scale"] {
        transform: none !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .water-hero {
        height: calc(100svh - 86px) !important;

        min-height: 500px !important;
    }


    .hero-container {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }


    .hero-info-card {
        padding: 15px !important;

        border-radius: 15px !important;

        margin-bottom: 15px !important;
    }


    .hero-info-card h3 {
        font-size: 16px !important;
    }


    .hero-content {
        padding-bottom: 22px !important;
    }


    .hero-content h1 {
        font-size: 39px !important;
    }


    .hero-content h1 span {
        font-size: 22px !important;
    }


    .hero-content p {
        font-size: 11px !important;

        line-height: 1.6 !important;
    }


    .vision-section,
    .process-section,
    .impact-section {
        padding-top: 46px !important;

        padding-bottom: 46px !important;
    }


    .vision-container,
    .process-container,
    .impact-container {
        padding-left: 13px !important;

        padding-right: 13px !important;
    }


    .vision-content h2 {
        font-size: 30px !important;
    }


    .vision-content p {
        font-size: 12px !important;
    }


    .vision-card {
        min-height: 100px !important;

        padding: 14px !important;
    }


    .vision-card h3 {
        font-size: 14px !important;
    }


    .vision-card p {
        font-size: 11px !important;
    }


    .process-section h2 {
        font-size: 23px !important;
    }


    .process-item {
        min-height: 120px !important;

        padding-left: 29px !important;
    }


    .process-item h3 {
        font-size: 15px !important;
    }


    .process-item p {
        font-size: 11px !important;
    }


    .impact-section h2 {
        font-size: 29px !important;
    }


    .impact-description {
        font-size: 12px !important;
    }


    .impact-card {
        min-height: 57px !important;

        font-size: 10px !important;
    }


    .cta-container {
        padding-left: 13px !important;

        padding-right: 13px !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .hero-content h1 {
        font-size: 36px !important;
    }


    .hero-content h1 span {
        font-size: 20px !important;
    }


    .hero-content p {
        font-size: 10px !important;
    }


    .hero-info-card h3 {
        font-size: 15px !important;
    }


    .info-points span {
        font-size: 9px !important;
    }


    .vision-content h2 {
        font-size: 27px !important;
    }


    .vision-card {
        min-height: 95px !important;
    }


    .process-section h2 {
        font-size: 21px !important;
    }


    .process-item {
        min-height: 115px !important;
    }


    .impact-section h2 {
        font-size: 27px !important;
    }


    .impact-grid {
        gap: 7px !important;
    }


    .impact-card {
        min-height: 54px !important;

        padding: 8px !important;

        font-size: 9px !important;
    }


    .impact-icon {
        width: 24px !important;
        min-width: 24px !important;

        height: 24px !important;
    }

}

/* =========================================================
   WATER PAGE
   FINAL PROCESS MOBILE DESIGN
   ========================================================= */

@media (max-width: 767px) {

    /* ================================
       PROCESS SECTION
       ================================ */

    .water-page .process-section {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        padding: 48px 0 52px !important;

        overflow: hidden !important;

        background: #07595a !important;

        color: #fff !important;

        transform: none !important;
        opacity: 1 !important;
    }


    /* ================================
       CONTAINER
       ================================ */

    .water-page .process-section .process-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 0 !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* ================================
       LABEL
       ================================ */

    .water-page .process-section .section-label {
        display: block !important;

        width: 100% !important;

        margin: 0 0 9px !important;

        color: #82c6aa !important;

        font-size: 9px !important;

        line-height: 1.3 !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    /* ================================
       MAIN TITLE
       ================================ */

    .water-page .process-section .process-container > h2 {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 0 26px !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 24px !important;

        line-height: 1.12 !important;

        font-weight: 700 !important;

        letter-spacing: -.4px !important;

        white-space: normal !important;

        overflow: visible !important;

        transform: none !important;

        opacity: 1 !important;
    }


    /* ================================
       PROCESS LINE
       ================================ */

    .water-page .process-section .process-line {
        position: relative !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        justify-content: flex-start !important;

        gap: 12px !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        padding: 0 0 0 10px !important;

        overflow: visible !important;

        transform: none !important;

        opacity: 1 !important;
    }


    /* ================================
       VERTICAL LINE
       ================================ */

    .water-page .process-section .process-line::before {
        content: "" !important;

        position: absolute !important;

        top: 17px !important;
        bottom: 17px !important;

        left: 15px !important;

        width: 2px !important;

        height: auto !important;

        background: rgba(126, 199, 170, .55) !important;

        display: block !important;

        z-index: 1 !important;

        transform: none !important;
    }


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

    .water-page .process-section .process-item,
    .water-page .process-section .process-item:nth-child(1),
    .water-page .process-section .process-item:nth-child(2),
    .water-page .process-section .process-item:nth-child(3),
    .water-page .process-section .process-item:nth-child(4) {

        position: relative !important;

        display: block !important;

        flex: none !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        height: auto !important;

        min-height: 105px !important;
        max-height: none !important;

        margin: 0 !important;

        padding: 15px 15px 15px 46px !important;

        border-radius: 13px !important;

        background: #f7f9f7 !important;

        border: 1px solid rgba(255,255,255,.12) !important;

        box-shadow:
            0 5px 15px rgba(0,0,0,.10) !important;

        overflow: visible !important;

        float: none !important;

        clear: both !important;

        color: #183f42 !important;

        text-align: left !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        translate: none !important;

        rotate: none !important;

        scale: none !important;

        box-sizing: border-box !important;
    }


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

    .water-page .process-section .process-item .process-dot {
        position: absolute !important;

        top: 17px !important;

        left: -3px !important;

        width: 17px !important;
        height: 17px !important;

        min-width: 17px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 10 !important;

        border-radius: 50% !important;

        border: 3px solid #07595a !important;

        box-sizing: border-box !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;
    }


    /* DOT COLORS */

    .water-page .process-section .process-dot.yellow {
        background: #f0b94f !important;
    }

    .water-page .process-section .process-dot.green-dot {
        background: #76c3a5 !important;
    }

    .water-page .process-section .process-dot.blue-dot {
        background: #a4d2db !important;
    }


    /* ================================
       NUMBER
       ================================ */

    .water-page .process-section .process-item .process-number {
        display: block !important;

        width: auto !important;

        height: auto !important;

        margin: 0 0 6px !important;

        padding: 0 !important;

        color: #087a75 !important;

        font-size: 8px !important;

        line-height: 1.2 !important;

        letter-spacing: 1.5px !important;

        font-weight: 800 !important;

        white-space: nowrap !important;

        overflow: visible !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;
    }


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

    .water-page .process-section .process-item h3 {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 0 6px !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 16px !important;

        line-height: 1.2 !important;

        font-weight: 700 !important;

        letter-spacing: -.2px !important;

        text-align: left !important;

        white-space: normal !important;

        overflow: visible !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;
    }


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

    .water-page .process-section .process-item p {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        color: #718184 !important;

        font-size: 11px !important;

        line-height: 1.55 !important;

        font-weight: 400 !important;

        text-align: left !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;

        overflow: visible !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;
    }


    /* ================================
       REMOVE OLD CARD BACKGROUND
       ================================ */

    .water-page .process-section .process-item::before,
    .water-page .process-section .process-item::after {
        display: none !important;
    }


    /* ================================
       FORCE ALL CONTENT VISIBLE
       ================================ */

    .water-page .process-section .process-item *,
    .water-page .process-section .process-item:nth-child(1) *,
    .water-page .process-section .process-item:nth-child(2) *,
    .water-page .process-section .process-item:nth-child(3) *,
    .water-page .process-section .process-item:nth-child(4) * {

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        translate: none !important;

        rotate: none !important;

        scale: none !important;
    }


    /* =====================================================
       480px
       ===================================================== */

    @media (max-width: 480px) {

        .water-page .process-section {
            padding: 44px 0 48px !important;
        }


        .water-page .process-section .process-container {
            padding-left: 12px !important;
            padding-right: 12px !important;
        }


        .water-page .process-section .section-label {
            font-size: 8.5px !important;

            letter-spacing: 1.8px !important;
        }


        .water-page .process-section .process-container > h2 {
            font-size: 22px !important;

            line-height: 1.12 !important;

            margin-bottom: 24px !important;
        }


        .water-page .process-section .process-line {
            gap: 10px !important;

            padding-left: 9px !important;
        }


        .water-page .process-section .process-line::before {
            left: 14px !important;

            top: 16px !important;

            bottom: 16px !important;
        }


        .water-page .process-section .process-item,
        .water-page .process-section .process-item:nth-child(1),
        .water-page .process-section .process-item:nth-child(2),
        .water-page .process-section .process-item:nth-child(3),
        .water-page .process-section .process-item:nth-child(4) {

            min-height: 102px !important;

            padding:
                14px
                13px
                14px
                42px !important;

            border-radius: 12px !important;
        }


        .water-page .process-section .process-item .process-dot {
            top: 15px !important;

            left: -3px !important;

            width: 16px !important;

            height: 16px !important;

            min-width: 16px !important;
        }


        .water-page .process-section .process-item h3 {
            font-size: 15px !important;

            margin-bottom: 5px !important;
        }


        .water-page .process-section .process-item p {
            font-size: 10.5px !important;

            line-height: 1.55 !important;
        }
    }


    /* =====================================================
       360px
       ===================================================== */

    @media (max-width: 360px) {

        .water-page .process-section .process-item,
        .water-page .process-section .process-item:nth-child(1),
        .water-page .process-section .process-item:nth-child(2),
        .water-page .process-section .process-item:nth-child(3),
        .water-page .process-section .process-item:nth-child(4) {

            min-height: 98px !important;

            padding-left: 40px !important;
        }


        .water-page .process-section .process-item h3 {
            font-size: 14px !important;
        }


        .water-page .process-section .process-item p {
            font-size: 10px !important;
        }
    }

}



/* =========================================================
   CAREER PAGE
   MOBILE APP STYLE RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL MOBILE FIX
       ===================================================== */

    html,
    body {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }

    .career-hero,
    .career-about,
    .career-values,
    .work-culture,
    .career-job-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .career-hero {
        position: relative !important;

        width: 100vw !important;
        height: 72vh !important;
        min-height: 500px !important;
        max-height: 680px !important;

        margin: 0 !important;

        display: flex !important;
        align-items: flex-end !important;

        overflow: hidden !important;
    }


    .career-video {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 100% !important;
        min-height: 100% !important;

        object-fit: cover !important;

        object-position: center center !important;

        display: block !important;

        opacity: 1 !important;

        transform: none !important;
    }


    .career-overlay {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.10) 0%,
                rgba(0,0,0,.25) 45%,
                rgba(0,0,0,.82) 100%
            ) !important;

        z-index: 2 !important;

        pointer-events: none !important;
    }


    .career-container {
        position: relative !important;

        z-index: 5 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0 16px 42px !important;

        box-sizing: border-box !important;
    }


    .career-container h1 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 14px !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 36px !important;
        line-height: 1.03 !important;

        font-weight: 700 !important;

        letter-spacing: -.8px !important;

        text-align: left !important;

        white-space: normal !important;

        text-shadow:
            0 3px 15px rgba(0,0,0,.35) !important;
    }


    .career-container p {
        width: 100% !important;
        max-width: 350px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: rgba(255,255,255,.88) !important;

        font-size: 13px !important;

        line-height: 1.65 !important;

        font-weight: 400 !important;

        text-align: left !important;
    }


    /* =====================================================
       CAREER ABOUT
       ===================================================== */

    .career-about {
        padding: 55px 0 !important;

        background: #ffffff !important;
    }


    .career-about .container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0 15px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        box-sizing: border-box !important;
    }


    .career-about-left {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .career-about-left .section-tag {
        display: block !important;

        margin: 0 0 11px !important;

        color: #087a75 !important;

        font-size: 9px !important;

        line-height: 1.3 !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;
    }


    .career-about-left h2 {
        width: 100% !important;

        margin: 0 0 18px !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 30px !important;

        line-height: 1.08 !important;

        letter-spacing: -.7px !important;

        font-weight: 700 !important;
    }


    .career-about-left h2 span {
        color: #b9894d !important;
    }


    .career-about-left p {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        color: #687c7e !important;

        font-size: 12px !important;

        line-height: 1.75 !important;

        font-weight: 400 !important;
    }


    /* =========================
       APPLY BUTTON
       ========================= */

    .career-btn {
        width: 100% !important;
        max-width: 210px !important;

        min-height: 46px !important;

        margin: 25px 0 0 !important;

        padding: 12px 20px !important;

        border: 0 !important;

        border-radius: 24px !important;

        background: #087a58 !important;

        color: #ffffff !important;

        font-size: 12px !important;

        font-weight: 700 !important;

        line-height: 1 !important;

        cursor: pointer !important;

        box-shadow:
            0 7px 18px rgba(8,122,88,.20) !important;
    }


    .career-about-right {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        display: block !important;
    }


    .career-about-right img {
        display: block !important;

        width: 100% !important;
        height: 280px !important;

        object-fit: cover !important;

        object-position: center !important;

        border-radius: 18px !important;

        margin: 0 !important;
    }


    /* =====================================================
       VALUES
       ===================================================== */

    .career-values {
        padding: 55px 0 !important;

        background: #f5f8f6 !important;
    }


    .career-values .container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0 15px !important;

        box-sizing: border-box !important;
    }


    .career-values .section-title {
        width: 100% !important;

        margin: 0 0 27px !important;

        padding: 0 !important;
    }


    .career-values .section-title > span {
        display: block !important;

        margin-bottom: 9px !important;

        color: #087a75 !important;

        font-size: 9px !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;
    }


    .career-values .section-title h2 {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 28px !important;

        line-height: 1.1 !important;

        letter-spacing: -.6px !important;

        font-weight: 600 !important;
    }


    .career-values .section-title h2 strong {
        display: inline !important;

        color: #b9894d !important;

        font-weight: 700 !important;
    }


    /* =========================
       VALUE GRID
       ========================= */

    .value-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 10px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .value-card {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 170px !important;

        margin: 0 !important;

        padding: 18px 14px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;

        justify-content: flex-start !important;

        border-radius: 15px !important;

        background: #ffffff !important;

        border: 1px solid #e4ece8 !important;

        box-shadow:
            0 4px 14px rgba(20,60,60,.05) !important;

        box-sizing: border-box !important;

        transition: none !important;

        transform: none !important;
    }


    .value-card.active {
        background: #087a58 !important;

        border-color: #087a58 !important;
    }


    .value-card i {
        width: 37px !important;
        height: 37px !important;

        min-width: 37px !important;

        margin: 0 0 15px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        background: #e3f2ed !important;

        color: #087a58 !important;

        font-size: 15px !important;
    }


    .value-card.active i {
        background: rgba(255,255,255,.16) !important;

        color: #ffffff !important;
    }


    .value-card h3 {
        margin: 0 0 7px !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 15px !important;

        line-height: 1.2 !important;

        font-weight: 700 !important;
    }


    .value-card.active h3 {
        color: #ffffff !important;
    }


    .value-card p {
        margin: 0 !important;

        padding: 0 !important;

        color: #738284 !important;

        font-size: 10.5px !important;

        line-height: 1.55 !important;
    }


    .value-card.active p {
        color: rgba(255,255,255,.82) !important;
    }


    /* =====================================================
       WORK CULTURE
       ===================================================== */

    .work-culture {
        padding: 55px 0 !important;

        background: #ffffff !important;
    }


    .work-culture .container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0 15px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        box-sizing: border-box !important;
    }


    .culture-left {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .culture-left .section-tag {
        display: block !important;

        margin: 0 0 10px !important;

        color: #087a75 !important;

        font-size: 9px !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;
    }


    .culture-left h2 {
        width: 100% !important;

        margin: 0 0 25px !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 28px !important;

        line-height: 1.1 !important;

        letter-spacing: -.6px !important;

        font-weight: 700 !important;
    }


    /* =========================
       CULTURE ITEM
       ========================= */

    .culture-item {
        width: 100% !important;

        min-height: 65px !important;

        margin: 0 0 11px !important;

        padding: 11px 13px !important;

        display: flex !important;

        align-items: center !important;

        gap: 12px !important;

        border-radius: 13px !important;

        background: #f4f8f6 !important;

        border: 1px solid #e3ece8 !important;

        box-sizing: border-box !important;
    }


    .culture-item:last-child {
        margin-bottom: 0 !important;
    }


    .culture-item > i {
        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        background: #dcefe8 !important;

        color: #087a58 !important;

        font-size: 14px !important;
    }


    .culture-item h4 {
        margin: 0 0 3px !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 13px !important;

        line-height: 1.2 !important;

        font-weight: 700 !important;
    }


    .culture-item p {
        margin: 0 !important;

        padding: 0 !important;

        color: #748487 !important;

        font-size: 10.5px !important;

        line-height: 1.4 !important;
    }


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

    .culture-right {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .culture-right img {
        display: block !important;

        width: 100% !important;

        height: 260px !important;

        object-fit: cover !important;

        object-position: center !important;

        border-radius: 18px !important;

        margin: 0 !important;
    }


    /* =====================================================
       JOB SECTION
       ===================================================== */

    .career-job-section {
        padding: 55px 0 !important;

        background: #f5f8f6 !important;
    }


    .career-job-container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0 15px !important;

        box-sizing: border-box !important;
    }


    .career-job-heading {
        width: 100% !important;

        margin: 0 0 25px !important;

        padding: 0 !important;
    }


    .career-job-heading > span {
        display: block !important;

        margin-bottom: 9px !important;

        color: #087a75 !important;

        font-size: 9px !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;
    }


    .career-job-heading h2 {
        margin: 0 0 11px !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 29px !important;

        line-height: 1.08 !important;

        letter-spacing: -.7px !important;

        font-weight: 700 !important;
    }


    .career-job-heading p {
        margin: 0 !important;

        padding: 0 !important;

        color: #738385 !important;

        font-size: 11.5px !important;

        line-height: 1.6 !important;
    }


    .career-job-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 12px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       CAREER MODAL
       ===================================================== */

    .career-modal {
        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100vh !important;

        padding: 12px !important;

        display: none;

        align-items: flex-end !important;
        justify-content: center !important;

        background: rgba(0,0,0,.55) !important;

        z-index: 99999 !important;

        box-sizing: border-box !important;
    }


    .career-modal.active {
        display: flex !important;
    }


    .career-modal-box {
        position: relative !important;

        width: 100% !important;
        max-width: 430px !important;

        max-height: 91vh !important;

        margin: 0 !important;

        padding: 20px 16px 22px !important;

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

        border-radius: 22px 22px 0 0 !important;

        background: #ffffff !important;

        box-shadow:
            0 -8px 30px rgba(0,0,0,.18) !important;

        box-sizing: border-box !important;
    }


    .career-modal-header {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        margin: 0 0 20px !important;

        padding: 0 0 14px !important;

        border-bottom: 1px solid #e7ece9 !important;
    }


    .career-modal-header h3 {
        margin: 0 !important;

        color: #123f43 !important;

        font-size: 21px !important;

        line-height: 1.2 !important;

        font-weight: 700 !important;
    }


    .career-close {
        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 50% !important;

        background: #edf4f1 !important;

        color: #123f43 !important;

        font-size: 22px !important;

        line-height: 1 !important;
    }


    /* =========================
       SEARCH FIELDS
       ========================= */

    .career-search-group {
        width: 100% !important;

        margin: 0 0 14px !important;

        padding: 0 !important;
    }


    .career-search-group label {
        display: block !important;

        margin: 0 0 6px !important;

        color: #31575a !important;

        font-size: 10px !important;

        line-height: 1.3 !important;

        font-weight: 700 !important;
    }


    .career-input,
    .career-select {
        width: 100% !important;

        height: 43px !important;

        margin: 0 !important;

        padding: 0 12px !important;

        border: 1px solid #dce7e3 !important;

        border-radius: 10px !important;

        background: #f8faf9 !important;

        color: #294d50 !important;

        font-size: 11px !important;

        outline: none !important;

        box-sizing: border-box !important;
    }


    .career-input:focus,
    .career-select:focus {
        border-color: #087a58 !important;

        background: #ffffff !important;
    }


    /* =========================
       SEARCH BUTTON
       ========================= */

    .career-search-btn {
        width: 100% !important;

        height: 45px !important;

        margin: 8px 0 20px !important;

        padding: 0 15px !important;

        border: 0 !important;

        border-radius: 11px !important;

        background: #087a58 !important;

        color: #ffffff !important;

        font-size: 12px !important;

        font-weight: 700 !important;

        box-shadow:
            0 6px 16px rgba(8,122,88,.18) !important;
    }


    /* =========================
       MODAL DIVIDER
       ========================= */

    .career-divider {
        width: 100% !important;

        height: 1px !important;

        margin: 18px 0 !important;

        background: #e7ece9 !important;
    }


    .career-heading {
        margin: 0 0 11px !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 14px !important;

        line-height: 1.3 !important;

        font-weight: 700 !important;
    }


    /* =========================
       POPULAR TAGS
       ========================= */

    .career-tags {
        width: 100% !important;

        display: flex !important;

        flex-wrap: wrap !important;

        gap: 7px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .career-tags span {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        min-height: 30px !important;

        padding: 6px 11px !important;

        border-radius: 20px !important;

        background: #edf5f2 !important;

        color: #087a58 !important;

        font-size: 9px !important;

        line-height: 1 !important;

        font-weight: 600 !important;
    }


    /* =========================
       RECENT OPENINGS
       ========================= */

    .career-opening-list {
        margin: 0 !important;

        padding: 0 !important;

        list-style: none !important;
    }


    .career-opening-list li {
        position: relative !important;

        margin: 0 0 8px !important;

        padding: 9px 10px 9px 24px !important;

        border-radius: 9px !important;

        background: #f5f8f6 !important;

        color: #38595c !important;

        font-size: 10.5px !important;

        line-height: 1.4 !important;
    }


    .career-opening-list li::before {
        content: "" !important;

        position: absolute !important;

        top: 50% !important;
        left: 10px !important;

        width: 6px !important;
        height: 6px !important;

        border-radius: 50% !important;

        background: #087a58 !important;

        transform: translateY(-50%) !important;
    }


    /* =====================================================
       REMOVE ANIMATION / TRANSFORM PROBLEMS
       ===================================================== */

    .career-hero *,
    .career-about *,
    .career-values *,
    .work-culture *,
    .career-job-section * {
        box-sizing: border-box !important;
    }


    /* =====================================================
       480px
       ===================================================== */

    @media (max-width: 480px) {

        .career-hero {
            height: 68vh !important;
            min-height: 480px !important;
        }


        .career-container {
            padding:
                0 13px 35px !important;
        }


        .career-container h1 {
            font-size: 33px !important;
        }


        .career-container p {
            font-size: 12px !important;

            line-height: 1.6 !important;
        }


        .career-about,
        .career-values,
        .work-culture,
        .career-job-section {
            padding-top: 48px !important;
            padding-bottom: 48px !important;
        }


        .career-about .container,
        .career-values .container,
        .work-culture .container,
        .career-job-container {
            padding-left: 13px !important;
            padding-right: 13px !important;
        }


        .career-about-left h2 {
            font-size: 28px !important;
        }


        .career-about-right img {
            height: 245px !important;

            border-radius: 16px !important;
        }


        .career-values .section-title h2 {
            font-size: 26px !important;
        }


        .value-card {
            min-height: 155px !important;

            padding: 15px 12px !important;
        }


        .value-card i {
            width: 34px !important;
            height: 34px !important;

            min-width: 34px !important;

            font-size: 14px !important;
        }


        .value-card h3 {
            font-size: 14px !important;
        }


        .value-card p {
            font-size: 10px !important;
        }


        .culture-left h2 {
            font-size: 26px !important;
        }


        .culture-right img {
            height: 230px !important;

            border-radius: 16px !important;
        }


        .career-job-heading h2 {
            font-size: 27px !important;
        }


        .career-modal {
            padding: 0 !important;
        }


        .career-modal-box {
            max-height: 94vh !important;

            padding:
                18px 14px 20px !important;
        }
    }


    /* =====================================================
       360px
       ===================================================== */

    @media (max-width: 360px) {

        .career-hero {
            min-height: 450px !important;
        }


        .career-container h1 {
            font-size: 30px !important;
        }


        .career-about-left h2 {
            font-size: 26px !important;
        }


        .value-grid {
            gap: 8px !important;
        }


        .value-card {
            min-height: 150px !important;

            padding: 13px 10px !important;
        }


        .value-card h3 {
            font-size: 13px !important;
        }


        .value-card p {
            font-size: 9.5px !important;
        }


        .culture-left h2 {
            font-size: 24px !important;
        }


        .career-job-heading h2 {
            font-size: 25px !important;
        }
    }

}


/* =========================================================
   CSR PAGE
   MOBILE APP STYLE RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL MOBILE FIX
       ===================================================== */

    html,
    body {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }


    .trade-hero,
    .csr-intro-section,
    .csr-gallery-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .trade-hero {
        position: relative !important;

        width: 100vw !important;

        height: 58vh !important;

        min-height: 420px !important;
        max-height: 570px !important;

        margin: 0 !important;

        display: flex !important;

        align-items: flex-end !important;

        overflow: hidden !important;

        background: #123f43 !important;
    }


    .trade-hero > img {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 100% !important;
        min-height: 100% !important;

        object-fit: cover !important;

        object-position: center center !important;

        display: block !important;

        margin: 0 !important;

        transform: none !important;

        opacity: 1 !important;
    }


    .trade-overlay {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.08) 0%,
                rgba(0,0,0,.22) 45%,
                rgba(0,0,0,.82) 100%
            ) !important;

        z-index: 2 !important;

        pointer-events: none !important;
    }


    .trade-hero .container {
        position: relative !important;

        z-index: 5 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0 15px 38px !important;

        box-sizing: border-box !important;
    }


    .trade-content {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .trade-content small {
        display: block !important;

        margin: 0 0 10px !important;

        color: #d4aa65 !important;

        font-size: 9px !important;

        line-height: 1.3 !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;
    }


    .trade-content h1 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 34px !important;

        line-height: 1.04 !important;

        letter-spacing: -.7px !important;

        font-weight: 700 !important;

        white-space: normal !important;

        text-align: left !important;

        text-shadow:
            0 3px 15px rgba(0,0,0,.35) !important;
    }


    .trade-content h1 span {
        color: #d2a15b !important;
    }


    /* =====================================================
       CSR INTRO SECTION
       ===================================================== */

    .csr-intro-section {
        position: relative !important;

        width: 100vw !important;

        margin: 0 !important;

        padding: 52px 0 55px !important;

        background: #ffffff !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    .csr-intro-container {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding:
            0 15px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       INTRO LEFT
       ===================================================== */

    .csr-intro-left {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;
    }


    .csr-subtitle {
        display: block !important;

        width: 100% !important;

        margin: 0 0 11px !important;

        color: #087a75 !important;

        font-size: 9px !important;

        line-height: 1.3 !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;

        text-transform: uppercase !important;
    }


    .csr-intro-left h2 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 18px !important;
        padding: 0 !important;

        color: #123f43 !important;

        font-size: 29px !important;

        line-height: 1.08 !important;

        letter-spacing: -.7px !important;

        font-weight: 700 !important;

        white-space: normal !important;

        overflow: visible !important;
    }


    .csr-intro-left h2 span {
        display: inline !important;

        color: #b8894d !important;
    }


    /* =====================================================
       INTRO PARAGRAPHS
       ===================================================== */

    .csr-intro-left p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 15px !important;
        padding: 0 !important;

        color: #6f8183 !important;

        font-size: 11.5px !important;

        line-height: 1.75 !important;

        font-weight: 400 !important;

        text-align: left !important;

        overflow-wrap: break-word !important;
    }


    .csr-intro-left p:last-of-type {
        margin-bottom: 0 !important;
    }


    /* =====================================================
       CSR POINTS
       ===================================================== */

    .csr-points {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 9px !important;

        margin: 24px 0 0 !important;

        padding: 0 !important;
    }


    .csr-point {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 66px !important;

        margin: 0 !important;

        padding: 10px 10px !important;

        display: flex !important;

        align-items: center !important;

        gap: 9px !important;

        border-radius: 13px !important;

        background: #f2f7f5 !important;

        border: 1px solid #e1ebe7 !important;

        box-sizing: border-box !important;

        color: #214b4f !important;
    }


    .csr-point i {
        width: 31px !important;
        height: 31px !important;

        min-width: 31px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        background: #dcefe8 !important;

        color: #087a58 !important;

        font-size: 12px !important;
    }


    .csr-point span {
        display: block !important;

        width: auto !important;

        color: #31575a !important;

        font-size: 9.5px !important;

        line-height: 1.35 !important;

        font-weight: 600 !important;
    }


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

    .csr-intro-right {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;
    }


    .csr-intro-right > img {
        display: block !important;

        width: 100% !important;

        height: 285px !important;

        margin: 0 !important;

        padding: 0 !important;

        object-fit: cover !important;

        object-position: center center !important;

        border-radius: 18px !important;

        transform: none !important;
    }


    /* =====================================================
       CSR BADGE
       ===================================================== */

    .csr-badge {
        position: absolute !important;

        right: 12px !important;
        bottom: 12px !important;

        min-width: 125px !important;

        padding: 11px 13px !important;

        border-radius: 12px !important;

        background: rgba(8,122,88,.94) !important;

        color: #ffffff !important;

        box-shadow:
            0 7px 20px rgba(0,0,0,.18) !important;

        backdrop-filter: blur(5px) !important;

        -webkit-backdrop-filter: blur(5px) !important;
    }


    .csr-badge h3 {
        margin: 0 0 2px !important;

        padding: 0 !important;

        color: #ffffff !important;

        font-size: 21px !important;

        line-height: 1 !important;

        font-weight: 700 !important;
    }


    .csr-badge p {
        margin: 0 !important;

        padding: 0 !important;

        color: rgba(255,255,255,.85) !important;

        font-size: 8px !important;

        line-height: 1.35 !important;
    }


    /* =====================================================
       GALLERY SECTION
       ===================================================== */

    .csr-gallery-section {
        width: 100vw !important;

        margin: 0 !important;

        padding: 52px 0 55px !important;

        background: #f5f8f6 !important;

        box-sizing: border-box !important;
    }


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

    .csr-gallery-heading {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0 15px 25px !important;

        box-sizing: border-box !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;
    }


    .csr-gallery-heading h2 {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #123f43 !important;

        font-size: 27px !important;

        line-height: 1.1 !important;

        letter-spacing: -.5px !important;

        font-weight: 700 !important;

        text-align: left !important;

        white-space: normal !important;
    }


    /* =====================================================
       GALLERY GRID
       ===================================================== */

    .csr-gallery-grid {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0 15px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        grid-auto-rows: 145px !important;

        gap: 9px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       GALLERY ITEM
       ===================================================== */

    .csr-gallery-item {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        border-radius: 13px !important;

        background: #dfe8e4 !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;
    }


    .csr-gallery-item.large {
        grid-column: 1 / -1 !important;

        grid-row: auto !important;

        height: 210px !important;
    }


    .csr-gallery-item a {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .csr-gallery-item img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: cover !important;

        object-position: center !important;

        border: 0 !important;

        transform: none !important;

        transition: none !important;
    }


    /* =====================================================
       AOS / ANIMATION FIX
       ===================================================== */

    .csr-intro-left,
    .csr-intro-right,
    .csr-gallery-heading,
    .csr-gallery-item {

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        translate: none !important;

        rotate: none !important;

        scale: none !important;
    }


    /* =====================================================
       REMOVE POSSIBLE DESKTOP WIDTHS
       ===================================================== */

    .csr-intro-container,
    .csr-intro-left,
    .csr-intro-right,
    .csr-gallery-heading,
    .csr-gallery-grid,
    .csr-gallery-item {

        box-sizing: border-box !important;

        max-width: 100% !important;
    }


    /* =====================================================
       480px
       ===================================================== */

    @media (max-width: 480px) {

        .trade-hero {
            height: 56vh !important;

            min-height: 400px !important;
        }


        .trade-hero .container {
            padding:
                0 13px 33px !important;
        }


        .trade-content h1 {
            font-size: 31px !important;
        }


        .csr-intro-section,
        .csr-gallery-section {
            padding-top: 47px !important;

            padding-bottom: 48px !important;
        }


        .csr-intro-container {
            padding:
                0 13px !important;

            gap: 27px !important;
        }


        .csr-intro-left h2 {
            font-size: 27px !important;
        }


        .csr-intro-left p {
            font-size: 11px !important;

            line-height: 1.72 !important;
        }


        .csr-points {
            gap: 8px !important;

            margin-top: 21px !important;
        }


        .csr-point {
            min-height: 62px !important;

            padding:
                9px 8px !important;

            gap: 7px !important;

            border-radius: 12px !important;
        }


        .csr-point i {
            width: 29px !important;
            height: 29px !important;

            min-width: 29px !important;

            font-size: 11px !important;
        }


        .csr-point span {
            font-size: 9px !important;
        }


        .csr-intro-right > img {
            height: 255px !important;

            border-radius: 16px !important;
        }


        .csr-badge {
            right: 10px !important;

            bottom: 10px !important;

            min-width: 115px !important;

            padding:
                10px 11px !important;
        }


        .csr-badge h3 {
            font-size: 19px !important;
        }


        .csr-badge p {
            font-size: 7.5px !important;
        }


        .csr-gallery-heading {
            padding:
                0 13px 22px !important;
        }


        .csr-gallery-heading h2 {
            font-size: 25px !important;
        }


        .csr-gallery-grid {
            padding:
                0 13px !important;

            gap: 8px !important;

            grid-auto-rows: 135px !important;
        }


        .csr-gallery-item {
            border-radius: 11px !important;
        }


        .csr-gallery-item.large {
            height: 190px !important;
        }
    }


    /* =====================================================
       360px
       ===================================================== */

    @media (max-width: 360px) {

        .trade-content h1 {
            font-size: 28px !important;
        }


        .csr-intro-left h2 {
            font-size: 25px !important;
        }


        .csr-intro-left p {
            font-size: 10.5px !important;
        }


        .csr-point span {
            font-size: 8.5px !important;
        }


        .csr-gallery-heading h2 {
            font-size: 23px !important;
        }


        .csr-gallery-grid {
            grid-auto-rows: 120px !important;
        }


        .csr-gallery-item.large {
            height: 175px !important;
        }
    }

}



/* =========================================================
   CONTACT PAGE
   MOBILE APP STYLE RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL
       ===================================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: hidden !important;
    }


    .contact-hero,
    .contact-section,
    .office-section,
    .contact-map,
    .faq-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* =====================================================
       CONTACT HERO
       ===================================================== */

    .contact-hero {
        position: relative !important;

        width: 100vw !important;

        height: 68vh !important;

        min-height: 470px !important;
        max-height: 650px !important;

        margin: 0 !important;

        display: flex !important;

        align-items: flex-end !important;

        overflow: hidden !important;

        background: #123f43 !important;
    }


    .contact-video {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        min-width: 100% !important;
        min-height: 100% !important;

        object-fit: cover !important;

        object-position: center center !important;

        display: block !important;

        opacity: 1 !important;

        transform: none !important;
    }


    .contact-overlay {
        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.08) 0%,
                rgba(0,0,0,.20) 42%,
                rgba(0,0,0,.84) 100%
            ) !important;

        z-index: 2 !important;

        pointer-events: none !important;
    }


    .contact-container {
        position: relative !important;

        z-index: 5 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0 15px 38px !important;

        box-sizing: border-box !important;
    }


    .contact-subtitle {
        display: block !important;

        margin: 0 0 10px !important;

        color: #d1a05a !important;

        font-size: 9px !important;

        line-height: 1.3 !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;
    }


    .contact-container h1 {
        width: 100% !important;

        margin: 0 0 15px !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 35px !important;

        line-height: 1.04 !important;

        letter-spacing: -.8px !important;

        font-weight: 700 !important;

        text-align: left !important;

        white-space: normal !important;

        text-shadow:
            0 3px 16px rgba(0,0,0,.35) !important;
    }


    .contact-container p {
        width: 100% !important;
        max-width: 350px !important;

        margin: 0 0 21px !important;
        padding: 0 !important;

        color: rgba(255,255,255,.88) !important;

        font-size: 12px !important;

        line-height: 1.65 !important;

        font-weight: 400 !important;
    }


    /* =====================================================
       HERO BUTTON
       ===================================================== */

    .contact-btn {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        min-width: 135px !important;

        min-height: 43px !important;

        margin: 0 !important;
        padding: 11px 18px !important;

        border-radius: 23px !important;

        background: #087a58 !important;

        color: #ffffff !important;

        font-size: 11px !important;

        line-height: 1 !important;

        font-weight: 700 !important;

        text-decoration: none !important;

        box-shadow:
            0 7px 18px rgba(0,0,0,.20) !important;
    }


    /* =====================================================
       CONTACT SECTION
       ===================================================== */

    .contact-section {
        padding: 52px 0 55px !important;

        background: #ffffff !important;
    }


    .contact-wrapper {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0 15px !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       CONTACT INFO
       ===================================================== */

    .contact-info {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .contact-info .section-tag {
        display: block !important;

        margin: 0 0 10px !important;

        color: #087a75 !important;

        font-size: 9px !important;

        line-height: 1.3 !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;
    }


    .contact-info h2 {
        width: 100% !important;

        margin: 0 0 17px !important;
        padding: 0 !important;

        color: #123f43 !important;

        font-size: 29px !important;

        line-height: 1.08 !important;

        letter-spacing: -.6px !important;

        font-weight: 700 !important;
    }


    .contact-info > p {
        width: 100% !important;

        margin: 0 0 22px !important;
        padding: 0 !important;

        color: #718285 !important;

        font-size: 11.5px !important;

        line-height: 1.7 !important;
    }


    /* =====================================================
       CONTACT CARDS
       ===================================================== */

    .contact-card {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 75px !important;

        margin: 0 0 10px !important;

        padding: 12px !important;

        display: flex !important;

        align-items: center !important;

        gap: 12px !important;

        border-radius: 14px !important;

        background: #f3f8f5 !important;

        border: 1px solid #e2ece8 !important;

        box-sizing: border-box !important;

        box-shadow:
            0 4px 13px rgba(20,60,60,.04) !important;
    }


    .contact-card:last-child {
        margin-bottom: 0 !important;
    }


    .contact-icon {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        background: #dcefe8 !important;

        color: #087a58 !important;

        font-size: 14px !important;
    }


    .contact-card h4 {
        margin: 0 0 4px !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 13px !important;

        line-height: 1.2 !important;

        font-weight: 700 !important;
    }


    .contact-card p {
        margin: 0 !important;

        padding: 0 !important;

        color: #718285 !important;

        font-size: 10px !important;

        line-height: 1.45 !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       CONTACT FORM
       ===================================================== */

    .contact-form-box {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 21px 15px !important;

        border-radius: 17px !important;

        background: #f5f8f6 !important;

        border: 1px solid #e2ebe7 !important;

        box-shadow:
            0 6px 20px rgba(20,60,60,.06) !important;

        box-sizing: border-box !important;
    }


    .contact-form-box h3 {
        margin: 0 0 20px !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 21px !important;

        line-height: 1.2 !important;

        font-weight: 700 !important;
    }


    .form-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 0 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .form-group {
        width: 100% !important;

        margin: 0 0 11px !important;

        padding: 0 !important;
    }


    .form-group input,
    .form-group textarea {
        width: 100% !important;

        max-width: 100% !important;

        margin: 0 !important;

        padding: 12px !important;

        border: 1px solid #dce7e3 !important;

        border-radius: 10px !important;

        background: #ffffff !important;

        color: #234b4e !important;

        font-family: inherit !important;

        font-size: 11px !important;

        line-height: 1.4 !important;

        outline: none !important;

        box-sizing: border-box !important;
    }


    .form-group input {
        height: 43px !important;
    }


    .form-group textarea {
        min-height: 125px !important;

        resize: vertical !important;
    }


    .form-group input::placeholder,
    .form-group textarea::placeholder {
        color: #9aa8a9 !important;

        opacity: 1 !important;
    }


    .form-group input:focus,
    .form-group textarea:focus {
        border-color: #087a58 !important;

        background: #ffffff !important;
    }


    .contact-submit {
        width: 100% !important;

        height: 45px !important;

        margin: 5px 0 0 !important;

        padding: 0 15px !important;

        border: 0 !important;

        border-radius: 11px !important;

        background: #087a58 !important;

        color: #ffffff !important;

        font-size: 11px !important;

        font-weight: 700 !important;

        cursor: pointer !important;

        box-shadow:
            0 6px 15px rgba(8,122,88,.18) !important;
    }


    /* =====================================================
       OFFICES
       ===================================================== */

    .office-section {
        width: 100vw !important;

        padding: 52px 15px 55px !important;

        background: #f5f8f6 !important;

        box-sizing: border-box !important;
    }


    .office-section .section-heading {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 25px !important;

        padding: 0 !important;

        text-align: left !important;
    }


    .office-section .section-heading span {
        display: block !important;

        margin: 0 0 9px !important;

        color: #087a75 !important;

        font-size: 9px !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;
    }


    .office-section .section-heading h2 {
        margin: 0 0 11px !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 27px !important;

        line-height: 1.1 !important;

        letter-spacing: -.5px !important;

        font-weight: 700 !important;
    }


    .office-section .section-heading p {
        margin: 0 !important;

        padding: 0 !important;

        color: #738486 !important;

        font-size: 11px !important;

        line-height: 1.6 !important;
    }


    .office-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 11px !important;

        margin: 0 !important;

        padding: 0 !important;
    }


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

    .office-card {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 165px !important;

        margin: 0 !important;

        padding: 17px !important;

        border-radius: 15px !important;

        background: #ffffff !important;

        border: 1px solid #e1ebe7 !important;

        box-shadow:
            0 5px 16px rgba(20,60,60,.05) !important;

        box-sizing: border-box !important;
    }


    .office-icon {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;

        margin: 0 0 13px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 10px !important;

        background: #e0f0ea !important;

        color: #087a58 !important;

        font-size: 14px !important;
    }


    .office-card h3 {
        margin: 0 0 7px !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 16px !important;

        line-height: 1.2 !important;

        font-weight: 700 !important;
    }


    .office-card p {
        margin: 0 0 11px !important;

        padding: 0 !important;

        color: #718285 !important;

        font-size: 10px !important;

        line-height: 1.5 !important;
    }


    .office-card a {
        display: inline-flex !important;

        align-items: center !important;

        gap: 6px !important;

        margin: 0 !important;

        padding: 0 !important;

        color: #087a58 !important;

        font-size: 10px !important;

        line-height: 1.3 !important;

        font-weight: 700 !important;

        text-decoration: none !important;
    }


    .office-card a i {
        font-size: 9px !important;
    }


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

    .contact-map {
        padding: 52px 15px 55px !important;

        background: #ffffff !important;
    }


    .contact-map .section-heading {
        width: 100% !important;

        margin: 0 0 22px !important;

        padding: 0 !important;

        text-align: left !important;
    }


    .contact-map .section-heading span {
        display: block !important;

        margin: 0 0 9px !important;

        color: #087a75 !important;

        font-size: 9px !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;
    }


    .contact-map .section-heading h2 {
        margin: 0 !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 26px !important;

        line-height: 1.1 !important;

        letter-spacing: -.5px !important;

        font-weight: 700 !important;
    }


    .map-wrapper {
        position: relative !important;

        width: 100% !important;

        height: 300px !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        border-radius: 17px !important;

        border: 1px solid #dfe9e5 !important;

        box-shadow:
            0 5px 17px rgba(20,60,60,.07) !important;

        box-sizing: border-box !important;
    }


    .map-wrapper iframe {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }


    /* =====================================================
       FAQ
       ===================================================== */

    .faq-section {
        padding: 52px 15px 58px !important;

        background: #f5f8f6 !important;

        box-sizing: border-box !important;
    }


    .faq-section .section-heading {
        width: 100% !important;

        margin: 0 0 23px !important;

        padding: 0 !important;

        text-align: left !important;
    }


    .faq-section .section-heading span {
        display: block !important;

        margin: 0 0 9px !important;

        color: #087a75 !important;

        font-size: 9px !important;

        letter-spacing: 2px !important;

        font-weight: 700 !important;
    }


    .faq-section .section-heading h2 {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 27px !important;

        line-height: 1.1 !important;

        letter-spacing: -.5px !important;

        font-weight: 700 !important;
    }


    .faq-wrapper {
        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 9px !important;
    }


    .faq-item {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        border-radius: 13px !important;

        background: #ffffff !important;

        border: 1px solid #e1ebe7 !important;

        box-shadow:
            0 4px 13px rgba(20,60,60,.04) !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    .faq-question {
        width: 100% !important;

        min-height: 57px !important;

        margin: 0 !important;

        padding:
            12px 13px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 10px !important;

        cursor: pointer !important;

        box-sizing: border-box !important;
    }


    .faq-question h3 {
        flex: 1 !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 11.5px !important;

        line-height: 1.4 !important;

        font-weight: 700 !important;
    }


    .faq-question i {
        width: 27px !important;
        height: 27px !important;

        min-width: 27px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        background: #e3f1eb !important;

        color: #087a58 !important;

        font-size: 10px !important;
    }


    .faq-answer {
        width: 100% !important;

        margin: 0 !important;

        padding:
            0 13px 14px !important;

        box-sizing: border-box !important;
    }


    .faq-answer p {
        margin: 0 !important;

        padding: 0 !important;

        color: #718285 !important;

        font-size: 10.5px !important;

        line-height: 1.6 !important;
    }


    /* =====================================================
       FORCE CONTENT VISIBLE
       ===================================================== */

    .contact-hero *,
    .contact-section *,
    .office-section *,
    .contact-map *,
    .faq-section * {
        box-sizing: border-box !important;
    }


    /* =====================================================
       480px
       ===================================================== */

    @media (max-width: 480px) {

        .contact-hero {
            height: 64vh !important;

            min-height: 440px !important;
        }


        .contact-container {
            padding:
                0 13px 33px !important;
        }


        .contact-container h1 {
            font-size: 32px !important;
        }


        .contact-container p {
            font-size: 11.5px !important;
        }


        .contact-section,
        .office-section,
        .contact-map,
        .faq-section {
            padding-top: 47px !important;

            padding-bottom: 48px !important;
        }


        .contact-wrapper {
            padding:
                0 13px !important;

            gap: 27px !important;
        }


        .contact-info h2 {
            font-size: 27px !important;
        }


        .contact-form-box {
            padding:
                19px 13px !important;

            border-radius: 15px !important;
        }


        .office-section,
        .contact-map,
        .faq-section {
            padding-left: 13px !important;
            padding-right: 13px !important;
        }


        .office-section .section-heading h2,
        .contact-map .section-heading h2,
        .faq-section .section-heading h2 {
            font-size: 25px !important;
        }


        .map-wrapper {
            height: 270px !important;

            border-radius: 15px !important;
        }
    }


    /* =====================================================
       360px
       ===================================================== */

    @media (max-width: 360px) {

        .contact-container h1 {
            font-size: 29px !important;
        }


        .contact-container p {
            font-size: 11px !important;
        }


        .contact-info h2 {
            font-size: 25px !important;
        }


        .contact-card {
            min-height: 70px !important;

            padding: 10px !important;
        }


        .contact-icon {
            width: 37px !important;
            height: 37px !important;

            min-width: 37px !important;
        }


        .office-card {
            min-height: 155px !important;

            padding: 15px !important;
        }


        .map-wrapper {
            height: 250px !important;
        }


        .faq-question h3 {
            font-size: 11px !important;
        }
    }

}


/* =========================================================
   FAQ MOBILE ACCORDION FIX
   ONLY ACTIVE ITEM WILL SHOW ANSWER
   ========================================================= */

@media (max-width: 767px) {

    .faq-section .faq-item {
        overflow: hidden !important;
    }


    /* ---------------------------------
       ALL ANSWERS HIDDEN BY DEFAULT
       --------------------------------- */

    .faq-section .faq-item .faq-answer {
        display: none !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        max-height: 0 !important;

        overflow: hidden !important;

        opacity: 0 !important;

        visibility: hidden !important;
    }


    /* ---------------------------------
       ACTIVE ANSWER ONLY
       --------------------------------- */

    .faq-section .faq-item.active .faq-answer {
        display: block !important;

        width: 100% !important;

        max-height: 300px !important;

        margin: 0 !important;

        padding:
            0 13px 15px !important;

        overflow: visible !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    /* ---------------------------------
       ANSWER TEXT
       --------------------------------- */

    .faq-section .faq-item .faq-answer p {
        display: block !important;

        margin: 0 !important;

        padding: 0 !important;

        color: #718285 !important;

        font-size: 10.5px !important;

        line-height: 1.6 !important;

        font-weight: 400 !important;

        opacity: 1 !important;

        visibility: visible !important;
    }


    /* ---------------------------------
       QUESTION
       --------------------------------- */

    .faq-section .faq-question {
        min-height: 57px !important;

        padding:
            12px 13px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 10px !important;

        cursor: pointer !important;
    }


    .faq-section .faq-question h3 {
        flex: 1 !important;

        margin: 0 !important;

        padding: 0 !important;

        color: #123f43 !important;

        font-size: 11.5px !important;

        line-height: 1.4 !important;

        font-weight: 700 !important;
    }


    /* ---------------------------------
       PLUS / CLOSE ICON
       --------------------------------- */

    .faq-section .faq-question i {
        width: 27px !important;
        height: 27px !important;

        min-width: 27px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        background: #e3f1eb !important;

        color: #087a58 !important;

        font-size: 10px !important;
    }


    /* ---------------------------------
       ACTIVE QUESTION
       --------------------------------- */

    .faq-section .faq-item.active .faq-question i {
        background: #dcefe8 !important;

        color: #087a58 !important;
    }


    /* ---------------------------------
       IMPORTANT:
       DON'T FORCE ALL FAQ CONTENT VISIBLE
       --------------------------------- */

    .faq-section .faq-item .faq-answer *,
    .faq-section .faq-item:not(.active) .faq-answer * {
        transform: none !important;
    }


    /* ---------------------------------
       480px
       --------------------------------- */

    @media (max-width: 480px) {

        .faq-section .faq-item.active .faq-answer {
            padding:
                0 12px 14px !important;
        }


        .faq-section .faq-question {
            min-height: 55px !important;

            padding:
                11px 12px !important;
        }


        .faq-section .faq-question h3 {
            font-size: 11px !important;
        }


        .faq-section .faq-question i {
            width: 26px !important;
            height: 26px !important;

            min-width: 26px !important;
        }


        .faq-section .faq-item .faq-answer p {
            font-size: 10px !important;

            line-height: 1.55 !important;
        }
    }

}


/* =========================================================
   FOOTER MOBILE - CENTERED APP STYLE
   QUICK LINKS + BUSINESS SIDE BY SIDE
   ========================================================= */

@media (max-width: 767px) {

    .footer {
        width: 100% !important;
        background: #04382c !important;
        text-align: center !important;
    }

    .footer > .container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding: 0 14px !important;

        text-align: center !important;
    }


    /* =========================================
       FOOTER GRID
       ========================================= */

    .footer-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr 1fr !important;

        column-gap: 22px !important;
        row-gap: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }


    /* =========================================
       ABOUT / LOGO
       FULL WIDTH
       ========================================= */

    .footer-grid > div:first-child {
        grid-column: 1 / -1 !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 0 5px !important;

        border: 0 !important;

        text-align: center !important;
    }


    /* =========================================
       LOGO
       ========================================= */

    .footer-logo {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        margin: 0 0 12px !important;
        padding: 15px !important;

        text-align: center !important;
    }


    .footer-logo img {
        width: 48px !important;
        height: 48px !important;
                background: #fff;

        max-width: 48px !important;

        object-fit: contain !important;

        margin: 0 auto !important;

        display: block !important;
    }


    .footer-logo h2 {
        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 16px !important;

        line-height: 1.2 !important;

        font-weight: 700 !important;

        text-transform: uppercase !important;

        text-align: center !important;
    }


    /* =========================================
       ADDRESS
       ========================================= */

    .footer-about {
        width: 100% !important;

        margin: 0 auto 14px !important;
        padding: 0 !important;

        color: rgba(255,255,255,.70) !important;

        font-size: 10px !important;

        line-height: 1.6 !important;

        text-align: center !important;
    }


    /* =========================================
       SOCIAL
       ========================================= */

    .footer-social {
        width: 100% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 9px !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }


    .footer-social a {
        width: 35px !important;
        height: 35px !important;

        min-width: 35px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        background: rgba(255,255,255,.10) !important;

        color: #ffffff !important;

        font-size: 12px !important;

        margin: 0 !important;
    }


    /* =========================================
       QUICK LINKS + BUSINESS
       SIDE BY SIDE
       ========================================= */

    .footer-grid > div:nth-child(2),
    .footer-grid > div:nth-child(3) {

        width: 100% !important;

        margin: 0 !important;

        padding: 20px 0 0 !important;

        border-top: 1px solid rgba(255,255,255,.10) !important;

        text-align: center !important;
    }


    .footer-grid > div:nth-child(2) {
        grid-column: 1 !important;
    }


    .footer-grid > div:nth-child(3) {
        grid-column: 2 !important;
    }


    .footer-grid > div:nth-child(2) h3,
    .footer-grid > div:nth-child(3) h3 {

        margin: 0 0 13px !important;
        padding: 0 !important;

        color: #ffffff !important;

        font-size: 13px !important;

        line-height: 1.3 !important;

        font-weight: 700 !important;

        text-align: center !important;
    }


    .footer-grid > div:nth-child(2) ul,
    .footer-grid > div:nth-child(3) ul {

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }


    .footer-grid > div:nth-child(2) li,
    .footer-grid > div:nth-child(3) li {

        margin: 0 !important;
        padding: 0 !important;

        width: 100% !important;

        text-align: center !important;
    }


    .footer-grid > div:nth-child(2) a,
    .footer-grid > div:nth-child(3) a {

        display: inline-block !important;

        color: rgba(255,255,255,.68) !important;

        font-size: 10px !important;

        line-height: 1.5 !important;

        text-decoration: none !important;

        text-align: center !important;

        padding: 0 !important;
    }


    /* =========================================
       STAY CONNECTED
       FULL WIDTH
       ========================================= */

    .footer-grid > div:nth-child(4) {

        grid-column: 1 / -1 !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 22px 0 24px !important;

        border-top: 1px solid rgba(255,255,255,.10) !important;

        text-align: center !important;
    }


    .footer-grid > div:nth-child(4) h3 {
        margin: 0 0 10px !important;

        color: #ffffff !important;

        font-size: 14px !important;

        text-align: center !important;
    }


    .footer-grid > div:nth-child(4) > p {
        width: 100% !important;

        max-width: 320px !important;

        margin: 0 auto 13px !important;
        padding: 0 !important;

        color: rgba(255,255,255,.68) !important;

        font-size: 10px !important;

        line-height: 1.6 !important;

        text-align: center !important;
    }


    /* =========================================
       SUBSCRIBE
       ========================================= */

    .subscribe {
        width: 100% !important;
        max-width: 330px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;

        align-items: center !important;

        gap: 6px !important;
    }


    .subscribe input {
        flex: 1 !important;

        min-width: 0 !important;

        height: 40px !important;

        margin: 0 !important;

        padding: 8px 13px !important;

        border: 1px solid rgba(255,255,255,.15) !important;

        border-radius: 8px !important;

        background: rgba(255,255,255,.08) !important;

        color: #ffffff !important;

        font-size: 10px !important;

        outline: none !important;

        text-align: left !important;
    }


    .subscribe button {
        height: 40px !important;

        min-width: 82px !important;

        margin: 0 !important;

        padding: 0 10px !important;

        border: 0 !important;

        border-radius: 8px !important;

        background: #d29b4c !important;

        color: #ffffff !important;

        font-size: 10px !important;

        font-weight: 700 !important;

        white-space: nowrap !important;
    }


    /* =========================================
       COPYRIGHT
       ========================================= */

    .footer-bottom {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        margin: 0 !important;

        padding: 18px 0 20px !important;

        border-top: 1px solid rgba(255,255,255,.12) !important;

        text-align: center !important;
    }


    .footer-bottom p {
        margin: 0 !important;
        padding: 0 !important;

        color: rgba(255,255,255,.55) !important;

        font-size: 9px !important;

        line-height: 1.5 !important;

        text-align: center !important;
    }


    .footer-bottom-links {
        width: 100% !important;

        display: flex !important;

        flex-wrap: wrap !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 7px 13px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .footer-bottom-links a {
        margin: 0 !important;
        padding: 0 !important;

        color: rgba(255,255,255,.55) !important;

        font-size: 9px !important;

        text-align: center !important;

        text-decoration: none !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .footer > .container {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }


    .footer-grid {
        column-gap: 15px !important;
    }


    .footer-logo img {
        width: 44px !important;
        height: 44px !important;
    }


    .footer-logo h2 {
        font-size: 14px !important;
    }


    .footer-grid > div:nth-child(2) h3,
    .footer-grid > div:nth-child(3) h3 {
        font-size: 12px !important;
    }


    .footer-grid > div:nth-child(2) a,
    .footer-grid > div:nth-child(3) a {
        font-size: 9px !important;
    }


    .subscribe {
        max-width: 100% !important;
    }


    .subscribe button {
        min-width: 76px !important;
        font-size: 9px !important;
    }

}

/* =========================================================
   MOBILE MENU - CLOSE BUTTON + OVERLAY
   ========================================================= */

@media (max-width: 991px) {

  /* MENU DRAWER */
  .nav-right {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;

    width: min(88vw, 360px) !important;
    height: 100dvh !important;

    padding: 0 20px 30px !important;

    background: #ffffff !important;

    border-radius: 25px 0 0 25px !important;

    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.15) !important;

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

    transition: right 0.35s cubic-bezier(.4, 0, .2, 1) !important;

    z-index: 10001 !important;
  }


  /* OPEN */
  .nav-right.active {
    right: 0 !important;
  }


  /* =====================================================
     MOBILE MENU HEADER
     ===================================================== */

  .mobile-menu-header {
    position: sticky;

    top: 0;

    width: 100%;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #ffffff;

    z-index: 10;

    border-bottom: 1px solid #eeeeee;
  }


  .mobile-menu-header span {
    font-size: 18px;

    font-weight: 800;

    color: #111;
  }


  /* CLOSE BUTTON */

  .mobile-menu-close {
    width: 42px;
    height: 42px;

    border: none;

    border-radius: 12px;

    background: #f1f7f3;

    color: #0b6b43;

    display: flex;

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

    font-size: 20px;

    cursor: pointer;

    transition: all 0.25s ease;
  }


  .mobile-menu-close:active {
    transform: scale(0.90);
  }


  .mobile-menu-close:hover {
    background: #0b6b43;
    color: #ffffff;
  }


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

  .mobile-menu-overlay {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100dvh;

    background: rgba(0, 0, 0, 0.45);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }


  .mobile-menu-overlay.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
  }


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

  .mobile-toggle {
    position: relative;


    display: flex !important;

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

    cursor: pointer;

    transition: 0.25s ease;
  }


  .mobile-toggle.active {
    background: #f1f7f3;

    color: #0b6b43;
  }


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

  .nav-right .menu {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 5px;

    padding-top: 15px;
  }


  .nav-right .menu > li {
    width: 100%;
  }


  .nav-right .menu > li > a {
    width: 100%;

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 12px;

    border-bottom: 1px solid #eeeeee;

    border-radius: 10px;

    font-size: 15px;

    font-weight: 700;

    color: #111;
  }


  .nav-right .menu > li > a:active {
    background: #f1f7f3;
  }


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

  .nav-right .dropdown {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    width: 100% !important;

    padding: 5px 0 8px 10px !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    background: transparent !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    display: none;
  }


  .nav-right .menu li.active .dropdown {
    display: block !important;
  }


  .nav-right .dropdown a {
    display: block;

    padding: 12px 14px;

    font-size: 14px;

    border-radius: 9px;
  }


  /* TEAM LOGIN */

  .nav-right .nav-btns {
    width: 100%;

    margin-top: 25px;

    display: flex;

    flex-direction: column;

    gap: 10px;
  }


  .nav-right .btn {
    width: 100%;

    min-height: 50px;

    justify-content: center;

    border-radius: 12px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  .mobile-menu-header {
    height: 68px;
  }


  .mobile-menu-header span {
    font-size: 17px;
  }


  .mobile-menu-close {
    width: 40px;
    height: 40px;

    font-size: 18px;
    margin-top:18px;
  }

}