/*==================================
        TYPOGRAPHY UNIFORMITY
==================================*/
.home-page li {
    text-align: left !important;
}

.home-page .hero-content p,
.home-page .counter-card p,
.home-page .about-content p,
.home-page .service-card p,
.home-page .solution-card p,
.home-page .card-text,
.home-page .about-highlight p,
.home-page .testimonial-card p,
.home-page .blog-card p {
    text-align: left !important;
}

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

.hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fffb 0%, #eefaf3 100%);
    padding-top: 110px;
}

#heroSlider {
    position: relative;
    min-height: 760px;
    overflow: hidden;
}

#heroSlider .carousel-inner {
    overflow: hidden;
}

#heroSlider .carousel-item {
    min-height: 700px;
    position: relative;
    transition: transform .8s ease-in-out;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    overflow: hidden;
}

#heroSlider .carousel-item .container,
#heroSlider .carousel-item .hero-content,
#heroSlider .carousel-item .hero-image {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

#heroSlider .carousel-item.hero-slide-active .container,
#heroSlider .carousel-item.hero-slide-active .hero-content,
#heroSlider .carousel-item.hero-slide-active .hero-image {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Fallback while Bootstrap changes carousel state. */
#heroSlider .carousel-item.active .container,
#heroSlider .carousel-item.active .hero-content,
#heroSlider .carousel-item.active .hero-image {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#heroSlider .container {
    min-height: 620px;
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.hero-content {
    max-width: 600px;
    position: relative;
    z-index: 2;
    transform: none;
}

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

.hero-tag {
    display: inline-block;
    background: rgba(25, 135, 84, .12);
    color: #198754;
    padding: 10px 22px;
    border-radius: 50px;
    margin-bottom: 22px;
    transition: all .6s ease;
}

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

.hero-content h1 {
    color: #000000;
    margin-bottom: 14px;
}

.hero-content h1 span {
    color: #198754;
}

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

.hero-content p {
    color: #000;
    margin-bottom: 20px;
}

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

.hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-bottom: 24px;
}

.hero-highlight-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(25, 135, 84, .08);
    border: 1px solid rgba(25, 135, 84, .12);
    border-radius: 999px;
    color: #000000;

}



.hero-highlight-item i {
    color: #198754;
}

/* Keep the longer feature pills on slides 2 and 3 aligned in one desktop row. */
.hero-highlights-inline {
    flex-wrap: nowrap;
    gap: 10px;
}

.hero-highlights-inline .hero-highlight-item {
    flex: 0 1 auto;
    padding: 8px 10px;
    font-size: 13px;
    white-space: nowrap;
}

.hero-highlights-inline .hero-highlight-item span {
    font-size: 13px;
}

@media (max-width: 767px) {
    .hero-highlights-inline {
        flex-wrap: wrap;
    }

    .hero-highlights-inline .hero-highlight-item {
        white-space: normal;
    }
}

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

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.hero-buttons .btn {
    padding: 14px 34px;
    border-radius: 50px;
    transition: all .35s ease;
}

.hero-buttons .btn-success {
    background: #198754;
    border-color: #198754;
}

.hero-buttons .btn-success:hover {
    background: #157347;
    border-color: #157347;
    transform: translateY(-4px);
}

.hero-buttons .btn-outline-success:hover {
    transform: translateY(-4px);
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 0;
    margin-top: 28px;
}

.hero-proof>div {
    display: grid;
    gap: 2px;
    min-width: 135px;
    padding: 0 16px;
    border-left: 1px solid rgba(25, 135, 84, .24);
}

.hero-proof>div:first-child {
    padding-left: 0;
    border-left: 0;
}

.hero-proof strong {
    color: #198754;
}

.hero-proof span {
    color: #000;
}

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

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform: none;
}

.hero-image img {
    width: 120%;
    max-width: 980px;
    height: auto;
    max-height: 1000px;
    object-fit: contain;
    object-position: right center;
    margin-right: -80px;
    transform: .8s ease,
        opacity .8s ease;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform;
}

/* Add separation from the hero copy without narrowing the text column. */
@media (min-width: 992px) {
    .hero-image {
        justify-content: flex-end;
        margin-left: 28px;
    }
}

@media (max-width: 991px) {
    .hero-image img {
        width: 100%;
        margin-right: 0;
        max-width: 600px;
    }

    .hero-proof {
        justify-content: center;
        margin-top: 24px;
    }

    .hero-proof>div {
        flex: 1 1 30%;
        min-width: 0;
    }
}

@media (max-width: 575px) {
    .hero-proof {
        gap: 12px;
    }

    .hero-proof>div {
        flex-basis: calc(50% - 6px);
        padding: 0 10px;
    }

    .hero-proof>div:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
}

/*==================================
        INDICATORS
==================================*/

.carousel-indicators {
    bottom: 25px;
}

.carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    margin: 0 6px;
    opacity: .4;
    transition: .3s;
}

.carousel-indicators .active {
    background: #198754;
    opacity: 1;
}

/*==================================
        CONTROLS
==================================*/

.carousel-control-prev,
.carousel-control-next {
    width: 6%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(25, 135, 84, .85);
    background-size: 55%;
    transition: .3s;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: #198754;
}

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

/* Hardware Acceleration */

.carousel,
.carousel-inner,
.carousel-item,
.hero-content,
.hero-image,
.hero-image img {

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform: translate3d(0, 0, 0);

    will-change: transform, opacity;

}

/* Smooth Bootstrap Transition */

.carousel-item {
    transition: transform .8s ease-in-out;
}

.carousel-item.active {
    z-index: 2;
}

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

.hero-tag,
.hero-content h1,
.hero-content p,
.hero-buttons {
    opacity: 1;
    transform: none;
}

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

.hero-image {

    opacity: 0;

    transform: translateX(70px);

    transition:
        opacity .2s ease,
        transform .2s ease;

}

.carousel-item.active .hero-image {

    opacity: 1;

    transform: translateX(0);

    transition-delay: .5s;

}

/* Floating Image */

/* #heroSlider .carousel-item.hero-slide-active .hero-image img {
    animation: heroFloat 5s ease-in-out infinite;
}

@keyframes heroFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

} */

/*===============================
        PERFORMANCE
================================*/

.hero-tag,
.hero-content h1,
.hero-content p,
.hero-buttons,
.hero-image,
.hero-image img {

    transform-style: preserve-3d;

}

/*===============================
        PREVENT FLICKER
================================*/

.carousel-item img {

    image-rendering: auto;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

}

.carousel-item {

    overflow: clip;

}

/*==================================
        RESPONSIVE - LARGE TABLET
==================================*/

@media (max-width:1199px) {

    #heroSlider,
    #heroSlider .carousel-item,
    #heroSlider .container {
        min-height: 650px;
    }



    .hero-image img {
        max-width: 520px;
    }

}


/*==================================
        RESPONSIVE - TABLET
==================================*/

@media (max-width:991px) {

    .hero-section {
        padding: 100px 0 70px;
        text-align: center;
    }

    #heroSlider,
    #heroSlider .carousel-item,
    #heroSlider .container {
        min-height: auto;
    }

    #heroSlider .container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .hero-content {
        max-width: 100%;
        margin: auto;
    }



    .hero-buttons {
        justify-content: center;
    }

    .hero-image {
        margin-bottom: 40px;
    }

    .hero-image img {
        max-width: 420px;
    }

    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }

}


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

@media (max-width:991px) {

    .hero-section {

        padding: 70px 0;

    }

    .carousel-item {

        min-height: auto;

    }

    .carousel-item .container {

        min-height: 100vh;

        display: flex;

        align-items: center;

    }

    .hero-content {

        text-align: center;

        margin-bottom: 40px;

    }

    .hero-tag {

        margin: 0 auto 18px;

    }

    .hero-content h1 {


        margin-bottom: 20px;

    }

    .hero-content p {

        max-width: 650px;

        margin: 0 auto 35px;

    }

    .hero-buttons {

        justify-content: center;

        gap: 18px;

    }

    .hero-image {

        text-align: center;

    }

    .hero-image img {

        max-width: 500px;

        width: 100%;

    }

}

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

@media (max-width:767px) {

    .hero-section {

        padding: 50px 0;

    }

    .carousel-item {

        min-height: auto;

    }

    .carousel-item .container {

        min-height: 100vh;

        display: flex;

        align-items: center;

    }

    .carousel-item .row {

        flex-direction: column-reverse;

        text-align: center;

    }

    .hero-image {

        margin-bottom: 35px;

    }

    .hero-image img {

        width: 100%;

        max-width: 420px;

        max-height: 340px;

        object-fit: contain;

    }

    .hero-tag {

        margin: 0 auto 15px;

    }

    .hero-content h1 {


        margin-bottom: 18px;

    }

    .hero-content p {


        margin-bottom: 30px;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

        gap: 15px;

    }

    .hero-buttons .btn {

        min-width: 170px;

        padding: 14px 24px;

    }

    .carousel-control-prev,

    .carousel-control-next {

        display: none;

    }

}

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

@media (max-width:576px) {

    .hero-section {

        padding: 35px 0;

    }

    .carousel-item .container {

        min-height: 92vh;

    }

    .hero-image {

        margin-bottom: 25px;

    }

    .hero-image img {

        max-width: 320px;

        max-height: 260px;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

    .hero-buttons .btn {

        width: 100%;

        max-width: 280px;

    }

    .carousel-indicators {

        bottom: 10px;

    }

}

/*==================================
        EXTRA SMALL
==================================*/

@media (max-width:375px) {

    .hero-section {

        padding: 25px 0;

    }

    .hero-image img {

        max-width: 260px;

    }


    .hero-buttons .btn {

        padding: 12px 18px;

    }

}

/*==================================
        PERFORMANCE
==================================*/

.hero-image img,

.hero-content,

.carousel-item {

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    transform: translateZ(0);

    will-change: transform, opacity;

}

.hero-image img {

    display: block;

    margin: auto;

    user-select: none;

    pointer-events: none;

}

/*==================================
        SMOOTH SCROLL
==================================*/

html {

    scroll-behavior: smooth;

}

/*==================================
        ACCESSIBILITY
==================================*/

@media (prefers-reduced-motion:reduce) {

    * {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}

/*==================================
        COUNTER SECTION
==================================*/

.counter-section {

    position: relative;

    padding: 35px 0;

    background: #f8fbfd;

    overflow: hidden;

}

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

.section-title {

    text-align: center;

    margin-bottom: 70px;

}

.section-title span {

    display: inline-block;



    background: rgba(25, 135, 84, .12);

    color: #198754;

    border-radius: 50px;



    text-transform: uppercase;



}

.section-title h2 {



    color: #000;



}

.section-title p {

    max-width: 720px;

    margin: auto;

    color: #000;



}

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

.counter-card {

    background: #fff;

    border-radius: 18px;

    padding: 40px 30px;

    text-align: center;

    transition: .4s;

    height: 94%;

    border: 1px solid #ececec;

    position: relative;

    overflow: hidden;

}

.counter-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: #198754;

    transform: scaleX(0);

    transition: .4s;

}

.counter-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);

}

.counter-card:hover::before {

    transform: scaleX(1);

}

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

.counter-icon {

    width: 80px;

    height: 80px;

    margin: auto;

    margin-bottom: 25px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .10);

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .35s;

}

.counter-card:hover .counter-icon {

    background: #198754;

}

.counter-icon i {

    color: #198754;

    transition: .35s;

}

.counter-card:hover .counter-icon i {

    color: #fff;

}

/*==================================
        COUNTER NUMBER
==================================*/

.counter-card h3 {

    font-weight: 700;
    color: #198754;

    margin-bottom: 10px;

}

.counter-card h5 {


    color: #000000;

    margin-bottom: 7px;

}

body.home-page .counter-card p {

    color: #000;

    margin: 0;

    text-align: center !important;

}

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

@media(max-width:991px) {

    .section-title {

        margin-bottom: 50px;

    }



    .counter-card {

        padding: 35px 25px;

    }



}

@media(max-width:767px) {

    .counter-section {

        padding: 70px 0;

    }



    .counter-card {

        margin-bottom: 15px;

    }

    .counter-icon {

        width: 70px;

        height: 70px;

    }



}

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

.about-section {

    position: relative;

    padding: 35px 0;

    background: #ffffff;

    overflow: hidden;

}

.about-section::before {

    content: "";

    position: absolute;

    top: -250px;

    right: -200px;

    width: 500px;

    height: 500px;

    background: rgba(25, 135, 84, .05);

    border-radius: 50%;

}

/* .about-section::after { */
/* 
    content: "";

    position: absolute;

    bottom: -220px;

    left: -180px;

    width: 420px;

    height: 420px;

    background: #f6fbf8;

    border-radius: 50%;

} */

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

.about-image-wrapper {

    position: relative;

    z-index: 2;

}

.about-image-wrapper img {

    width: 100%;

    border-radius: 24px;

    box-shadow: 0 30px 70px rgba(0, 0, 0, .08);

    transition: .5s;

}

.about-image-wrapper:hover img {

    transform: scale(1.03);

}

/*==================================
        FLOATING BADGE
==================================*/

.floating-badge {

    position: absolute;

    left: -20px;

    bottom: 40px;

    display: flex;

    align-items: center;

    gap: 15px;

    background: #fff;

    padding: 18px 22px;

    border-radius: 18px;

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

    min-width: 250px;

}

.floating-badge i {

    width: 65px;

    height: 65px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: #198754;

    color: #fff;

}

.floating-badge h4 {

    margin: 0;

    color: #000;
    font-weight: 700;

}

.floating-badge span {

    color: #000;

}

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

.about-content {

    position: relative;

    z-index: 2;

    padding-left: 35px;

}

.section-tag {

    display: inline-block;

    padding: 10px 22px;

    background: #eaf8ed;

    color: #198754;

    border-radius: 50px;


    margin-bottom: 25px;

}

.about-content h2 {



    color: #000;

    margin-bottom: 10px;

}

.about-home {
    color: #000;
}

.about-content p {



    color: #000;


    margin-bottom: 20px;

}

/*==================================
        COUNTERS
==================================*/

.about-progress {

    display: flex;

    gap: 35px;

    margin-bottom: 20px;

}

.progress-item {

    position: relative;

}

.progress-item::after {

    content: "";

    position: absolute;

    right: -18px;

    top: 10px;

    width: 1px;

    height: 55px;

    background: #e5e5e5;

}

.progress-item:last-child::after {

    display: none;

}

.progress-item h3 {

    color: #198754;
    font-weight: 700;

    margin-bottom: 8px;

}

.progress-item p {

    margin: 0;

    color: #000;

}

/*==================================
        HIGHLIGHT BOX
==================================*/

.about-highlight {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    background: #f8fbfd;

    border-left: 5px solid #198754;

    padding: 25px;

    border-radius: 14px;

    margin-bottom: 20px;

}

.about-highlight i {

    color: #198754;

}

.about-highlight h5 {


    margin-bottom: 10px;

}

.about-highlight p {

    margin: 0;

}

/*==================================
        BUTTONS
==================================*/

.about-buttons {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

.about-buttons .btn {

    padding: 15px 34px;

    border-radius: 8px;

}

.about-buttons .btn-success {

    background: #198754;

    border: none;

}

.about-buttons .btn-success:hover {

    background: #198754;

}

.about-buttons .btn-outline-success {

    border: 2px solid #198754;

}

.about-buttons .btn-outline-success:hover {

    background: #198754;

    color: #fff;

}

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

@media(max-width:991px) {

    .about-section {

        padding: 65px 0;

    }

    .about-content {

        padding-left: 0;

        text-align: center;

        margin-top: 50px;

    }

    .section-tag {

        margin: auto auto 20px;

    }



    .about-progress {

        justify-content: center;

        flex-wrap: wrap;

        gap: 25px;

    }

    .progress-item::after {

        display: none;

    }

    .about-highlight {

        text-align: left;

    }

    .about-buttons {

        justify-content: center;

    }

    .floating-badge {

        position: relative;

        left: 0;

        bottom: 0;

        margin: 25px auto 0;

    }

}

@media(max-width:576px) {

    .about-section {

        padding: 60px 0;

    }



    .about-progress {

        flex-direction: column;

        gap: 20px;

    }

    .floating-badge {

        width: 100%;

        min-width: auto;

    }

    .about-highlight {

        flex-direction: column;

        text-align: center;

    }

    .about-buttons {

        flex-direction: column;

    }

    .about-buttons .btn {

        width: 100%;

    }

}

/*==================================
        OUR CORE SOLUTIONS
==================================*/

.solutions-section {

    position: relative;

    padding: 35px 0;

    background: #f8fbfd;

    overflow: hidden;

}

/* .solutions-section::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .05);

    top: -180px;

    right: -120px;

} */

/* .solutions-section::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    background: #ffffff;

    bottom: -120px;

    left: -120px;

} */

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

.solutions-section .section-title {

    text-align: center;

    margin-bottom: 70px;

    position: relative;

    z-index: 2;

}

.solutions-section .section-title span {

    display: inline-block;

    padding: 10px 24px;

    background: #eaf8ed;

    color: #198754;

    border-radius: 40px;


    margin-bottom: 20px;

}

.solutions-section .section-title h2 {


    color: #000;

    margin-bottom: 20px;

}

.solutions-section .section-title p {

    max-width: 760px;

    margin: auto;

    color: #000;


}

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

.solution-card {

    position: relative;

    height: 95%;

    background: #fff;

    border-radius: 24px;

    padding: 40px 35px;

    overflow: hidden;

    transition: .4s;

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

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

}

.solution-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 6px;

    height: 100%;

    background: #198754;

    transform: scaleY(0);

    transition: .4s;

}

.solution-card:hover {

    transform: translateY(-12px);

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

}

.solution-card:hover::before {

    transform: scaleY(1);

}

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

.solution-icon {

    width: 90px;

    height: 90px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #eaf8ed;

    border-radius: 22px;

    margin-bottom: 30px;

    transition: .4s;

}

.solution-icon i {

    color: #198754;

    transition: .4s;

}

.solution-card:hover .solution-icon {

    background: #198754;

    transform: rotate(-8deg);

}

.solution-card:hover .solution-icon i {

    color: #fff;

}

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

.solution-card h4 {


    color: #000;

    margin-bottom: 10px;

}

.solution-card p {

    color: #000;

    margin-bottom: 10px;

}

/*==================================
        LINK
==================================*/

.solution-card a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: #198754;

    transition: .3s;

}

.solution-card a i {

    transition: .3s;

}

.solution-card:hover a i {

    transform: translateX(8px);

}

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

.solution-card::after {

    content: attr(data-number);

    position: absolute;

    top: 18px;

    right: 25px;


    color: rgba(25, 135, 84, .06);

}

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

@media (max-width:991px) {

    .solutions-section {

        padding: 70px 0;

    }

    .solutions-section .section-title {

        margin-bottom: 50px;

    }



    .solutions-section .section-title p {

        max-width: 650px;

    }

    .solution-card {

        padding: 35px 30px;

        border-radius: 20px;

    }

    .solution-icon {

        width: 80px;

        height: 80px;

        margin-bottom: 25px;

    }


}

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

@media (max-width:767px) {

    .solutions-section {

        padding: 70px 0;

    }

    .solutions-section::before,

    .solutions-section::after {

        display: none;

    }

    .solutions-section .section-title {

        margin-bottom: 40px;

        padding: 0 10px;

    }

    .solutions-section .section-title span {

        padding: 8px 18px;

    }

    .solutions-section .section-title h2 {


        margin-bottom: 15px;

    }



    .solution-card {

        padding: 28px 24px;

        border-radius: 18px;

    }

    .solution-card::after {

        right: 18px;

        top: 15px;

    }

    .solution-icon {

        width: 72px;

        height: 72px;

        border-radius: 18px;

        margin-bottom: 20px;

    }



    .solution-card h4 {


        margin-bottom: 15px;

    }

    .solution-card p {


        margin-bottom: 25px;

    }



}


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

@media (max-width:576px) {

    .solutions-section {

        padding: 60px 0;

    }

    .solutions-section .container {

        padding-left: 18px;

        padding-right: 18px;

    }

    .solution-card {

        padding: 24px 20px;

    }

    .solution-card::after {

        top: 12px;

        right: 15px;

    }

    .solution-icon {

        width: 65px;

        height: 65px;

    }



    .solution-card a {

        width: 100%;

        justify-content: space-between;

        padding-top: 10px;

        border-top: 1px solid #ececec;

    }

}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width:375px) {

    .solutions-section {

        padding: 50px 0;

    }



    .solution-card {

        padding: 20px 18px;

    }

    .solution-icon {

        width: 60px;

        height: 60px;

    }


}

/*==================================
        WHY CHOOSE ECOGENN
==================================*/

.why-section {

    position: relative;

    padding: 35px 0;

    background: #ffffff;

    overflow: hidden;

}

.why-section::before {

    content: "";

    position: absolute;

    top: -180px;

    right: -180px;

    width: 450px;

    height: 450px;

    background: rgba(25, 135, 84, .05);

    border-radius: 50%;

}

.why-section::after {

    content: "";

    position: absolute;

    bottom: -180px;

    left: -180px;

    width: 380px;

    height: 380px;

    background: #f7fbf8;

    border-radius: 50%;

}

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

.why-image {

    position: relative;

    z-index: 2;

}

.why-image img {

    width: 100%;

    border-radius: 25px;

    box-shadow: 0 30px 70px rgba(0, 0, 0, .08);

    transition: .45s;

}

.why-image:hover img {

    transform: scale(1.03);

}

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

.why-content {

    position: relative;

    z-index: 2;

    padding-left: 40px;

}

.why-content .section-tag {

    display: inline-block;

    padding: 10px 22px;

    background: #eaf8ed;

    color: #198754;

    border-radius: 50px;


    margin-bottom: 20px;

}

.why-content h2 {


    color: #000;

    margin-bottom: 25px;

}

.why-section-intro {
    max-width: 900px;
    margin: 16px auto 0;
    color: #000;
    text-align: center !important;
}

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

.why-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.why-item {

    display: flex;

    gap: 20px;

    align-items: flex-start;

    background: #fff;

    border-radius: 18px;

    padding: 20px;

    border: 1px solid #ececec;

    transition: .35s;

}

.why-item:hover {

    transform: translateX(10px);

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

}

.why-icon {

    width: 58px;

    height: 58px;

    min-width: 58px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #198754;

}

.why-icon i {

    color: #fff;

}

.why-item h5 {


    margin-bottom: 8px;

    color: #000;

}

.why-item p {

    margin: 0;

    color: #000;


}

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

.why-content .btn {

    border-radius: 8px;

    padding: 15px 38px;


    background: #198754;

    border: none;

    transition: .35s;

}

.why-content .btn:hover {

    background: #198754;

    transform: translateY(-3px);

}

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

@media(max-width:991px) {

    .why-section {

        padding: 70px 0;

    }

    .why-content {

        padding-left: 0;

        text-align: center;

        margin-top: 50px;

    }

    .why-content .section-tag {

        margin: auto auto 20px;

    }



    .why-content>p {

        max-width: 700px;

        margin: 0 auto 40px;

    }

    .why-list {

        gap: 18px;

    }

    .why-item {

        text-align: left;

    }

}

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

@media(max-width:767px) {

    .why-section {

        padding: 70px 0;

    }

    .why-section::before,

    .why-section::after {

        display: none;

    }

    .why-content {

        margin-top: 40px;

    }



    .why-item {

        padding: 18px;

        gap: 15px;

        border-radius: 15px;

    }

    .why-icon {

        width: 50px;

        height: 50px;

        min-width: 50px;

    }



    .why-content .btn {

        width: 100%;

    }

}

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

@media(max-width:576px) {

    .why-section {

        padding: 60px 0;

    }

    .why-section .container {

        padding-left: 18px;

        padding-right: 18px;

    }

    .why-image img {

        border-radius: 18px;

    }



    .why-item {

        flex-direction: column;

        align-items: center;

        text-align: center;

        padding: 22px 18px;

    }

    .why-icon {

        margin-bottom: 5px;

    }

    .why-item:hover {

        transform: translateY(-6px);

    }

}

/*==================================
        EXTRA SMALL
==================================*/

@media(max-width:375px) {



    .why-item {

        padding: 18px 15px;

    }

}

/*==================================
        OUR TECHNOLOGY
==================================*/

.technology-section {

    position: relative;

    padding: 35px 0;

    background: #ffffff;

    overflow: hidden;

}

/* .technology-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .05);

    top: -220px;

    right: -180px;

} */

/* .technology-section::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: #f8fbf8;

    bottom: -200px;

    left: -150px;

} */

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

.technology-section .section-title {

    margin-bottom: 70px;

    position: relative;

    z-index: 2;

}

.technology-section .section-tag {

    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background: #eaf8ed;

    color: #198754;


    margin-bottom: 20px;

}

.technology-section h2 {


    color: #000000;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 35px;


}

.technology-section .section-title p {

    max-width: 760px;

    margin: auto;

    color: #000;


}

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

.technology-image {

    position: relative;

    z-index: 2;

}

.technology-image img {

    width: 100%;

    border-radius: 24px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .08);

    transition: .45s;

}

.technology-image:hover img {

    transform: scale(1.03);

}

/* Ensure technology image remains visible (override JS inline styles) */
.technology-image,
.technology-image img {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

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

.technology-content {

    position: relative;

    padding-left: 70px;

}

.technology-content::before {

    content: "";

    position: absolute;

    left: 24px;

    top: 0;

    width: 2px;

    height: 100%;

    background: #d9e9dc;

}

/*==================================
        STEP
==================================*/

.tech-step {

    position: relative;

    display: flex;

    gap: 25px;

    margin-bottom: 30px;

    background: #fff;

    border: 1px solid #ececec;

    border-radius: 18px;

    padding: 12px;

    transition: .35s;

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

}

.tech-step:last-child {

    margin-bottom: 0;

}

.tech-step:hover {

    transform: translateX(10px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .10);

}

/*==================================
        STEP NUMBER
==================================*/

.step-number {

    position: absolute;

    left: -70px;

    top: 50%;

    transform: translateY(-50%);

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: #198754;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;


    box-shadow: 0 10px 25px rgba(25, 135, 84, .30);

}

.tech-step h5 {


    color: #000;

    margin-bottom: 10px;

}

.tech-step p {

    margin: 0;

    color: #000;


}

/*==================================
        BENEFITS
==================================*/

.technology-benefits {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    margin-top: 30px;
    color: #000;

}

.benefit-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 12px;

    background: #fff;

    border: 1px solid #ececec;

    border-radius: 18px;

    transition: .35s;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .04);

}

.benefit-item:hover {

    background: #198754;

    color: #fff;

    transform: translateY(-8px);

}

.benefit-item i {

    color: #198754;

    transition: .35s;

}

.benefit-item:hover i {

    color: #fff;

}

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

@media(max-width:991px) {

    .technology-section {

        padding: 70px 0;

    }



    .technology-image {

        margin-bottom: 40px;

    }

    .technology-content {

        padding-left: 60px;

    }

    .technology-benefits {

        grid-template-columns: repeat(2, 1fr);

    }

}

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

@media(max-width:767px) {

    .technology-section {

        padding: 70px 0;

    }

    .technology-section::before,

    .technology-section::after {

        display: none;

    }

    .technology-section .section-title {

        margin-bottom: 45px;

    }



    .technology-content {

        padding-left: 45px;

    }

    .technology-content::before {

        left: 18px;

    }

    .step-number {

        width: 42px;

        height: 42px;

        left: -38px;

    }

    .tech-step {

        padding: 20px;

    }



    .technology-benefits {

        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 50px;

    }

}

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

@media(max-width:576px) {

    .technology-section {

        padding: 60px 0;

    }

    .technology-section .container {

        padding-left: 18px;

        padding-right: 18px;

    }


    .technology-content {

        padding-left: 35px;

    }

    .technology-content::before {

        left: 15px;

    }

    .step-number {

        width: 36px;

        height: 36px;

        left: -30px;

    }

    .tech-step {

        padding: 18px;

        border-radius: 15px;

    }

    .benefit-item {

        justify-content: flex-start;

        padding: 18px;

    }

}

/*==================================
        EXTRA SMALL
==================================*/


/*==================================
        BLOG SECTION
==================================*/

.blog-section {

    position: relative;

    padding: 35px 0;

    background: #f8fbfd;

    overflow: hidden;

}

.blog-section::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .05);

    top: -180px;

    right: -180px;

}

.blog-section::after {

    content: "";

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background: #ffffff;

    bottom: -212px;

    left: -180px;

}

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

.blog-section .section-title {

    margin-bottom: 70px;

    position: relative;

    z-index: 2;

}

.blog-section .section-tag {

    display: inline-block;

    padding: 10px 22px;

    background: #eaf8ed;

    color: #198754;

    border-radius: 50px;


    margin-bottom: 18px;

}

.blog-section h2 {


    color: #000;

    margin-bottom: 18px;

}

.blog-section .section-title p {

    max-width: 760px;

    margin: auto;

    color: #000;


}

/*==================================
        FEATURED BLOG
==================================*/

.featured-blog {

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);

    transition: .4s;

    height: 98%;

}

.featured-blog:hover {

    transform: translateY(-10px);

    box-shadow: 0 35px 70px rgba(0, 0, 0, .12);

}

.blog-image {

    overflow: hidden;

}

.blog-image img {

    width: 100%;

    height: 360px;

    object-fit: cover;

    transition: .6s;

}

.featured-blog:hover .blog-image img {
    filter: brightness(1.06) saturate(1.08);

}

.blog-content {

    padding: 35px;

}

.blog-meta {

    display: flex;

    gap: 25px;

    flex-wrap: wrap;

    margin-bottom: 20px;

}

.blog-meta span {

    color: #000;

    display: flex;

    align-items: center;

    gap: 8px;

}

.blog-meta i {

    color: #198754;

}

.blog-content h3 {


    color: #000;

    margin-bottom: 18px;

}

.blog-content p {

    color: #000;

    margin-bottom: 30px;

}

.read-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #198754;

    text-decoration: none;

}

.read-btn i {

    transition: .3s;

}

.read-btn:hover i {

    transform: translateX(8px);

}

/*==================================
        SMALL BLOG
==================================*/

.small-blog {

    display: flex;

    gap: 20px;

    align-items: center;

    background: #fff;

    border-radius: 20px;

    padding: 20px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);

    transition: .35s;

}

.small-blog:hover {

    transform: translateX(8px);

    box-shadow: 0 25px 45px rgba(0, 0, 0, .10);

}

.small-blog img {

    width: 170px;

    height: 150px;

    object-fit: cover;

    border-radius: 15px;

    transition: .5s;

}

.small-blog:hover img {
    filter: brightness(1.06) saturate(1.08);

}

.small-blog span {

    display: inline-block;

    margin-bottom: 10px;

    color: #198754;


}

.small-blog h3 {


    color: #000;

    margin-bottom: 15px;

}

.small-blog a {

    text-decoration: none;

    color: #198754;

}

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

.blog-section .btn {

    padding: 15px 40px;

    border-radius: 8px;

    background: #198754;

    border: none;

    transition: .35s;

}

.blog-section .btn:hover {

    background: #198754;

    transform: translateY(-3px);

}

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

@media(max-width:991px) {

    .blog-section {

        padding: 70px 0;

    }



    .featured-blog {

        margin-bottom: 30px;

    }

    .blog-image img {

        height: 320px;

    }

}

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

@media(max-width:767px) {

    .blog-section {

        padding: 70px 0;

    }

    .blog-section::before,

    .blog-section::after {

        display: none;

    }

    .blog-section .section-title {

        margin-bottom: 45px;

    }



    .blog-content {

        padding: 25px;

    }


    .blog-image img {

        height: 260px;

    }

    .small-blog {

        flex-direction: column;

        align-items: flex-start;

    }

    .small-blog img {

        width: 100%;

        height: 220px;

    }

}

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

@media(max-width:576px) {

    .blog-section {

        padding: 60px 0;

    }

    .blog-section .container {

        padding-left: 18px;

        padding-right: 18px;

    }



    .blog-content {

        padding: 20px;

    }



    .blog-meta {

        gap: 15px;

    }

    .small-blog {

        padding: 18px;

    }

    .small-blog img {

        height: 200px;

    }



    .blog-section .btn {

        width: 100%;

    }

}

/*==================================
        EXTRA SMALL
==================================*/

@media(max-width:375px) {


    .blog-image img {

        height: 220px;

    }



    .small-blog img {

        height: 170px;

    }

}

























/*==================================
        CALL TO ACTION
==================================*/

.cta-section {

    position: relative;

    padding: 35px 0;

    overflow: hidden;

    background: linear-gradient(135deg, #198754 0%, #198754 55%, #198754 100%);

}

.cta-section::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .05);

    top: -220px;

    left: -180px;

}

.cta-section::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .05);

    bottom: -180px;

    right: -120px;

}

/*==================================
        CTA BOX
==================================*/

.cta-box {

    position: relative;

    z-index: 2;

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(16px);

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

    border: 1px solid rgba(255, 255, 255, .15);

    border-radius: 28px;

    padding: 23px;

    overflow: hidden;

    box-shadow: 0 25px 70px rgba(0, 0, 0, .18);

}

.cta-box::before {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .08);

    right: -80px;

    top: -80px;

}

.cta-box::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .05);

    left: -60px;

    bottom: -60px;

}

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

.cta-tag {

    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background: rgba(255, 255, 255, .15);

    color: #fff;


    margin-bottom: 20px;

}

.cta-box h2 {


    color: #fff;

    margin-bottom: 12px;

}

.cta-box p {

    color: rgba(255, 255, 255);


    max-width: 720px;

    margin-bottom: 0;

}

/*==================================
        BUTTONS
==================================*/

.cta-buttons {

    display: flex;

    flex-direction: column;

    gap: 18px;

    justify-content: center;

    height: 100%;

}

.cta-buttons .btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 50px;

    padding: 10px 35px;

    font-size: 18px;
    transition: .35s;

}

.ph-mar {
    margin: 10px;
}

/* Primary */

.cta-buttons .btn-light {

    background: #fff;

    color: #198754;

    border: none;

}

.cta-buttons .btn-light:hover {

    background: #f2f2f2;

    color: #198754;

    transform: translateY(-5px);

}

/* Outline */

.cta-buttons .btn-outline-light {

    border: 2px solid rgba(255, 255, 255, .7);

    color: #fff;

}

.cta-buttons .btn-outline-light:hover {

    background: #fff;

    color: #198754;

    border-color: #fff;

    transform: translateY(-5px);

}

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

@media(max-width:991px) {

    .cta-section {

        padding: 70px 0;

    }

    .cta-box {

        padding: 50px;

        text-align: center;

    }



    .cta-box p {

        margin-bottom: 40px;

    }

    .cta-buttons {

        margin-top: 10px;

        align-items: center;

    }

    .cta-buttons .btn {

        width: 360px;

        max-width: 100%;

    }

}

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

@media(max-width:767px) {

    .cta-section {

        padding: 70px 0;

    }

    .cta-section::before,

    .cta-section::after {

        display: none;

    }

    .cta-box {

        padding: 35px 28px;

        border-radius: 20px;

    }

    .cta-tag {

        padding: 8px 18px;

    }



    .cta-box p {


        margin-bottom: 30px;

    }

    .cta-buttons {

        gap: 15px;

    }

    .cta-buttons .btn {

        width: 100%;

        padding: 16px 20px;

    }

}

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

@media(max-width:576px) {

    .cta-section {

        padding: 60px 0;

    }

    .cta-section .container {

        padding-left: 18px;

        padding-right: 18px;

    }

    .cta-box {

        padding: 30px 22px;

    }



    .cta-buttons .btn {

        padding: 15px 18px;

    }

}

/*==================================
        EXTRA SMALL
==================================*/

@media(max-width:375px) {

    .cta-box {

        padding: 25px 18px;

    }



}

/*==================================
        TESTIMONIAL SECTION
==================================*/

.testimonial-section {
    padding: 35px 0;
    /* background: #f4f8f5; */
}

.testimonial-section-heading {
    margin-bottom: 10px;
}

.testimonial-section-heading span {

    margin-bottom: 10px;

    background: #eaf8ed;
    color: #198754;
    padding: 7px 24px;
    border-radius: 40px;
}

.testimonial-section-heading h2 {
    margin: 0;
    color: #000;
}

.testimonial-showcase {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.5fr);
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(18, 63, 40, .1);
}

.testimonial-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 510px;
    padding: 64px 52px;
    color: #fff;
    background: linear-gradient(145deg, #198754, #198754);
}

.testimonial-tag {
    width: fit-content;
    margin-bottom: 22px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    color: #ffffff;
}

.testimonial-intro h3 {
    margin-bottom: 20px;
    color: #fff;
}

.testimonial-intro>p {
    max-width: 330px;
    margin: 0;
    color: rgba(255, 255, 255);
    text-align: justify;
    text-justify: inter-word;
}

.testimonial-stat {
    display: grid;
    gap: 3px;
    margin-top: 15px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .24);
}



.testimonial-stat span {
    color: rgb(255, 255, 255);
}

.testimonial-stories {
    padding: 38px;
}

.testimonial-card {
    border: 1px solid #e1ebe4;
    background: #fff;
}

.featured-review-rotator {
    display: grid;
    isolation: isolate;
}

.testimonial-featured {
    grid-area: 1 / 1;
    position: relative;
    padding: 18px;
    border-radius: 20px;
    background: #f5faf6;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(24px, 0, 0) scale(.985);
    transition: opacity .62s cubic-bezier(.22, 1, .36, 1), transform .62s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .62s;
    will-change: opacity, transform;
}

.testimonial-featured.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s;
    z-index: 2;
}

.testimonial-featured.is-leaving {
    visibility: visible;
    transform: translate3d(-24px, 0, 0) scale(.985);
    z-index: 1;
}

.featured-review-rotator[data-direction="previous"] .testimonial-featured {
    transform: translate3d(-24px, 0, 0) scale(.985);
}

.featured-review-rotator[data-direction="previous"] .testimonial-featured.is-active {
    transform: translate3d(0, 0, 0) scale(1);
}

.featured-review-rotator[data-direction="previous"] .testimonial-featured.is-leaving {
    transform: translate3d(24px, 0, 0) scale(.985);
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-featured {
        transition-duration: .01ms;
    }
}

.testimonial-rotator-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 16px 4px 0;
}

.testimonial-rotator-controls span {
    margin: 0 4px;
    color: #000000;
}

.testimonial-rotator-button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #d6e5da;
    border-radius: 50%;
    color: #198754;
    background: #fff;
    transition: background .2s ease, color .2s ease;
}

.testimonial-rotator-button:hover {
    color: #fff;
    background: #198754;
}

.testimonial-mark {
    display: block;
    margin-bottom: -10px;
    color: #198754;
    font-size: 47px;
}

.testimonial-featured>p {
    margin: 0 0 10px;
    color: #000;
}

.testimonial-client {
    display: flex;
    align-items: center;
    gap: 12px;
}

.client-initials {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #198754;
}

.testimonial-client div {
    display: grid;
    gap: 2px;
}

.testimonial-client strong {
    color: #000;
}

.testimonial-client small {
    color: #000;
    font-size: 16px;
}

.testimonial-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
    text-align: left;
}

.testimonial-mini {
    min-height: 166px;
    padding: 12px;
    border-radius: 16px;
}

.mini-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #198754;
    font-size: 30px;
}

.mini-number {
    color: #000000;
}



.testimonial-mini p {
    margin: 0 0 10px;
    color: #000000;
}

.testimonial-mini>strong {
    color: #000;
}

.testimonial-accent {
    border-color: #198754;
    color: #fff;
    background: #198754;
}

.testimonial-accent .mini-card-top,
.testimonial-accent .mini-number,
.testimonial-accent .testimonial-mini>strong,
.testimonial-accent>strong {
    color: #fff;
}

.testimonial-accent p {
    color: #ffffff;
    ;
}

@media (max-width: 991px) {
    .testimonial-showcase {
        grid-template-columns: 1fr;
    }

    .testimonial-intro {
        min-height: auto;
    }
}

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

    .testimonial-intro {
        padding: 46px 30px;
    }

    .testimonial-stories {
        padding: 20px;
    }

    .testimonial-featured {
        padding: 28px;
    }


    .testimonial-mini-grid {
        grid-template-columns: 1fr;
    }
}


/*==================================
        HOME PAGE TYPOGRAPHY OVERRIDE
==================================*/





/*==================================
        RESPONSIVE - ALL DEVICES
==================================*/



@media (max-width: 1199px) {

    /* .home-page .hero-section {
        padding-top: 80px;
    } */

    .home-page #heroSlider,
    .home-page #heroSlider .carousel-item,
    .home-page #heroSlider .container {
        min-height: 640px;
    }

    .home-page .hero-content {
        max-width: 560px;
    }



    .home-page .hero-image img {
        max-width: 720px;
    }


}

@media (max-width: 991px) {

    .home-page .hero-section {
        /* padding: 90px 0 70px; */
        text-align: center;
    }

    .home-page #heroSlider,
    .home-page #heroSlider .carousel-item,
    .home-page #heroSlider .container {
        min-height: auto;
    }

    .home-page #heroSlider .container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .home-page .hero-content {
        max-width: 100%;
        margin: auto;
    }



    .home-page .hero-buttons,
    .home-page .about-buttons {
        justify-content: center;
    }

    .home-page .hero-image {
        margin: 0 0 35px;
    }

    .home-page .hero-image img {
        max-width: 600px;
    }

    .home-page .section-title {
        margin-bottom: 45px;
    }

    .home-page .counter-card,
    .home-page .solution-card {
        margin-bottom: 20px;
    }

    .home-page .about-content {
        padding-left: 0;
        margin-top: 40px;
        text-align: center;
    }

    .home-page .about-highlight {
        text-align: left;
    }

}

@media (max-width: 767px) {

    /* .home-page .hero-section {
        padding: 80px 0 60px;
    } */

    .home-page .hero-tag {
        padding: 8px 16px;
    }


    .home-page .hero-buttons,
    .home-page .about-buttons {
        flex-direction: column;
        align-items: center;
    }

    .home-page .hero-buttons .btn,
    .home-page .about-buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    .home-page .hero-image img {
        max-width: 420px;
    }

    .home-page .counter-card {
        padding: 28px 22px;
    }

    .home-page .about-highlight {
        flex-direction: column;
        text-align: center;
    }

    .home-page .floating-badge {
        width: 100%;
        min-width: auto;
    }

    .home-page .carousel-control-prev,
    .home-page .carousel-control-next {
        display: none;
    }

}

@media (max-width: 575px) {

    .home-page {
        --home-main-heading-size: 24px;
        --home-subheading-size: 16px;
        --home-content-size: 14px;
    }




    .home-page .hero-image img {
        max-width: 260px;
    }

    .home-page .section-title span {
        padding: 8px 14px;
    }


    .home-page .about-progress {
        flex-direction: column;
        gap: 16px;
    }

}

@media (max-width: 375px) {



    .home-page .hero-buttons .btn,
    .home-page .about-buttons .btn {
        padding: 12px 18px;
    }

}



/*==================================
        PROJECT GALLERY
==================================*/

.gallery-section {
    padding: 35px 0 25px;
    background: #f7faf8;
    overflow: hidden;
}

/*==================================
        GALLERY HEADER
==================================*/

.gallery-heading {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    margin-bottom: 28px;
    text-align: center;
}

.gallery-tag {
    position: relative;

    align-items: center;
    gap: 9px;
    margin-bottom: 10px;

    text-transform: uppercase;
    background: #eaf8ed;
    color: #198754;
    padding: 7px 24px;

    border-radius: 40px;
}

.gallery-tag::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 20px;
    background: #198754;
}

.gallery-heading h2 {
    max-width: 700px;
    margin: 0 auto;
    color: #000;
}

/*==================================
        GALLERY GRID
==================================*/

.gallery-grid {
    display: grid;
    grid-template-columns: 1.25fr .85fr .85fr 1.25fr;
    grid-template-rows: 220px 180px 220px;
    gap: 14px;
}

/*==================================
        GALLERY ITEM
==================================*/

.gallery-item {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(25, 135, 84, .10);
    border-radius: 20px;
    background: #dfeae3;
    cursor: zoom-in;

    opacity: 0;
    transform: translateY(25px);
    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.2, .75, .25, 1),
        box-shadow .35s ease,
        border-color .35s ease;
}

/* Reveal */
.gallery-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fallback */
.gallery-item,
.gallery-item img {
    visibility: visible;
}

/*==================================
        DIFFERENT TILE SIZES
==================================*/

.gallery-item--feature {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.gallery-item--tall {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.gallery-item--wide {
    grid-column: 4;
    grid-row: 1;
}

/* Specific positioning */
.gallery-item:nth-child(5) {
    grid-column: 4;
    grid-row: 2;
}

.gallery-item:nth-child(6) {
    grid-column: 1;
    grid-row: 3;
}

.gallery-item:nth-child(7) {
    grid-column: 2 / span 2;
    grid-row: 3;
}

.gallery-item:nth-child(8) {
    grid-column: 4;
    grid-row: 3;
}

.gallery-item:nth-child(9) {
    grid-column: 1 / span 4;
    grid-row: 4;
}

.gallery-item:nth-child(10) {
    grid-column: 2 / span 3;
    grid-row: 4;
}

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

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;

    transform: none;
    transition:
        transform .7s cubic-bezier(.2, .75, .25, 1),
        filter .5s ease;
}

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

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 45%,
            rgba(7, 30, 17, .22) 100%);

    opacity: .7;
    transition: opacity .4s ease;
}

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

.gallery-item:hover {
    border-color: rgba(25, 135, 84, .35);
    box-shadow:
        0 20px 45px rgba(18, 65, 39, .14);
}

.gallery-item:hover img {
    transform: none;
    filter: brightness(1.06) saturate(1.05);
}

.gallery-item:hover::after {
    opacity: 1;
}

/*==================================
        FOCUS
==================================*/

.gallery-item:focus-visible {
    outline: 3px solid #198754;
    outline-offset: 4px;
}

/*==================================
        LIGHTBOX
==================================*/

.gallery-lightbox {
    position: fixed;
    z-index: 10000;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 45px;

    background: rgba(4, 18, 10, .94);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.gallery-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.gallery-lightbox img {
    display: block;

    width: auto;
    max-width: min(100%, 1200px);
    max-height: calc(100vh - 90px);

    border-radius: 16px;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .5);

    opacity: 0;
    transform: scale(.94);

    transition:
        opacity .35s ease,
        transform .4s cubic-bezier(.2, .75, .25, 1);
}

.gallery-lightbox.is-open img {
    opacity: 1;
    transform: scale(1);
}

/*==================================
        CLOSE BUTTON
==================================*/

.gallery-lightbox-close {
    position: fixed;
    top: 22px;
    right: 25px;

    z-index: 2;

    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;

    color: #fff;
    background: rgba(255, 255, 255, .08);

    cursor: pointer;

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.gallery-lightbox-close:hover {
    background: #198754;
    border-color: #198754;
    transform: rotate(90deg);
}

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

@media (max-width: 1199px) {

    .gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: 190px 160px 190px 190px;
    }

    .gallery-item--feature {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }

    .gallery-item--tall {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .gallery-item--wide {
        grid-column: 4;
        grid-row: 1;
    }

    .gallery-item:nth-child(5) {
        grid-column: 4;
        grid-row: 2;
    }

    .gallery-item:nth-child(6) {
        grid-column: 1;
        grid-row: 3;
    }

    .gallery-item:nth-child(7) {
        grid-column: 2 / span 2;
        grid-row: 3;
    }

    .gallery-item:nth-child(8) {
        grid-column: 4;
        grid-row: 3;
    }

    .gallery-item:nth-child(9) {
        grid-column: 1 / span 4;
        grid-row: 4;
    }

    .gallery-item:nth-child(10) {
        grid-column: 2 / span 3;
        grid-row: 4;
    }
}

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

@media (max-width: 991px) {

    .gallery-heading {
        display: block;
        margin-bottom: 24px;
    }

    .gallery-heading h2 {
        max-width: 650px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(6, 190px);
        gap: 12px;
    }

    .gallery-item--feature {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }

    .gallery-item--tall {
        grid-column: 1;
        grid-row: 3 / span 2;
    }

    .gallery-item--wide {
        grid-column: 2;
        grid-row: 3;
    }

    .gallery-item:nth-child(5) {
        grid-column: 2;
        grid-row: 4;
    }

    .gallery-item:nth-child(6) {
        grid-column: 1;
        grid-row: 5;
    }

    .gallery-item:nth-child(7) {
        grid-column: 2;
        grid-row: 5;
    }

    .gallery-item:nth-child(8) {
        grid-column: 1;
        grid-row: 6;
    }

    .gallery-item:nth-child(9) {
        grid-column: 2;
        grid-row: 6;
    }

    .gallery-item:nth-child(10) {
        grid-column: 1 / span 2;
        grid-row: 7;
    }
}

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

@media (max-width: 575px) {

    .gallery-section {
        padding: 30px 0 25px;
    }

    .gallery-heading {
        margin-bottom: 20px;
    }

    .gallery-tag {
        margin-bottom: 9px;
    }

    .gallery-tag::before {
        width: 22px;
    }



    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(8, 135px);
        gap: 9px;
    }

    .gallery-item {
        border-radius: 13px;
    }

    /* Featured */
    .gallery-item--feature {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }

    /* Tall */
    .gallery-item--tall {
        grid-column: 1;
        grid-row: 3 / span 2;
    }

    /* Wide */
    .gallery-item--wide {
        grid-column: 2;
        grid-row: 3;
    }

    .gallery-item:nth-child(5) {
        grid-column: 2;
        grid-row: 4;
    }

    .gallery-item:nth-child(6) {
        grid-column: 1;
        grid-row: 5;
    }

    .gallery-item:nth-child(7) {
        grid-column: 2;
        grid-row: 5;
    }

    .gallery-item:nth-child(8) {
        grid-column: 1 / span 2;
        grid-row: 6;
    }

    .gallery-item:nth-child(9) {
        grid-column: 1 / span 2;
        grid-row: 7;
    }

    .gallery-item:nth-child(10) {
        grid-column: 2;
        grid-row: 7;
    }

    .gallery-item img {
        transform: none;
    }

    .gallery-item:hover img {
        transform: none;
    }

    /* Lightbox */
    .gallery-lightbox {
        padding: 15px;
    }

    .gallery-lightbox img {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 30px);
        border-radius: 11px;
    }

    .gallery-lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
}

/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .gallery-item,
    .gallery-item img,
    .gallery-item::after,
    .gallery-lightbox,
    .gallery-lightbox img,
    .gallery-lightbox-close {
        transition: none !important;
    }

    .gallery-item {
        opacity: 1;
        transform: none;
    }
}

/* Refined 3D milestone presentation. */
@media (min-width: 768px) {
    .journey-section {
        background: radial-gradient(circle at 50% 46%, #ffffff 0 16%, #f4faf6 56%, #edf6ef 100%);
    }

    .journey-heading {
        margin-bottom: 26px;
    }


    .journey-timeline {
        width: min(720px, 100%);
        height: 390px;
        perspective: 1600px;
    }

    .journey-line {
        top: 68px;
        left: 18%;
        right: 18%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #cfe1d3 12%, #cfe1d3 88%, transparent);
    }

    .journey-item {
        transform: translateY(42px) rotateX(-16deg) rotateY(8deg) scale(.92) !important;
        transition: opacity .6s ease, transform .7s cubic-bezier(.16, 1, .3, 1), visibility .6s ease;
    }

    .journey-item.active {
        transform: translateY(0) rotateX(0) rotateY(0) scale(1) !important;
    }

    .journey-year {
        height: 38px;
        color: #198754;
    }

    .journey-dot {
        width: 58px;
        height: 58px;
        margin: 10px 0 20px;
        border-color: rgba(25, 135, 84, .28);
        box-shadow: 0 12px 28px rgba(20, 87, 43, .12), inset 0 1px 0 #fff;
    }

    .journey-card {
        display: grid;
        grid-template-columns: 86px 1fr;
        column-gap: 24px;
        align-items: center;
        width: min(610px, 100%);
        min-height: 210px;
        padding: 30px 42px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .85);
        border-radius: 24px;
        background: linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(237, 248, 239, .92));
        box-shadow: 0 28px 65px rgba(26, 90, 46, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
        text-align: left;
        transform-style: preserve-3d;
    }

    .journey-card::before {
        content: "";
        position: absolute;
        top: -85px;
        right: -60px;
        width: 205px;
        height: 205px;
        border-radius: 50%;
        background: rgba(25, 135, 84, .09);
        pointer-events: none;
    }

    .journey-icon {
        grid-row: span 2;
        width: 72px;
        height: 72px;
        margin: 0;
        border-radius: 20px;
        background: linear-gradient(135deg, #198754, #198754);
        color: #fff;
        box-shadow: 0 13px 25px rgba(25, 135, 84, .28);
    }



    .journey-number {
        top: 20px;
        right: 25px;
        color: rgba(22, 129, 63, .35);
    }

    .journey-card h3,
    .journey-card p {
        position: relative;
        z-index: 1;
        grid-column: 2;
    }

    .journey-card h3 {
        margin: 0 0 7px;
    }



    .journey-item.active .journey-card {
        animation: journeyCardReveal .72s cubic-bezier(.16, 1, .3, 1);
    }

    .journey-item.active .journey-icon {
        animation: journeyIconReveal .75s cubic-bezier(.16, 1, .3, 1) .08s both;
    }
}

@keyframes journeyCardReveal {
    from {
        opacity: 0;
        transform: translateY(18px) translateZ(-150px) rotateX(-12deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateZ(0) rotateX(0);
    }
}

@keyframes journeyIconReveal {
    from {
        opacity: 0;
        transform: translateZ(60px) rotate(-12deg) scale(.72);
    }

    to {
        opacity: 1;
        transform: translateZ(0) rotate(0) scale(1);
    }
}

/*==================================
        JOURNEY SCROLL EXPERIENCE
==================================*/

@media (min-width: 768px) {
    .journey-section {
        height: 500vh;
        min-height: 0;
        padding: 0;
        overflow: clip;
    }

    .journey-sticky {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100vh;
        min-height: 620px;
    }

    .journey-sticky .container {
        width: 100%;
    }

    .journey-heading {
        margin-bottom: 32px;
    }

    .journey-timeline {
        display: block;
        width: min(680px, 100%);
        height: 370px;
        margin: 0 auto;
    }

    .journey-line {
        top: 72px;
        left: 20%;
        right: 20%;
    }

    .journey-item {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 0 !important;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(22px) !important;
        transition: opacity .45s ease, transform .45s ease, visibility .45s ease;
    }

    .journey-item.active {
        opacity: 1 !important;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) !important;
    }

    .journey-year {
        height: 42px;
    }

    .journey-dot {
        width: 62px;
        height: 62px;
        margin: 12px 0 18px;
    }

    .journey-card {
        width: min(560px, 100%);
        min-height: 205px;
        padding: 24px 30px;
    }
}

@media (max-width: 767px) {
    .journey-section {
        height: auto;
        padding: 64px 0;
    }

    .journey-sticky {
        position: relative;
        height: auto;
        min-height: 0;
    }

    .journey-heading {
        margin-bottom: 36px;
    }
}

/*==================================
        CROSS-DEVICE RESPONSIVE PASS
==================================*/

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

.hero-section img,
.counter-section img,
.about-section img,
.solutions-section img,
.why-section img,
.technology-section img,
.gallery-section img,
.blog-section img,
.cta-section img,
.testimonial-section img {
    max-width: 100%;
}

@media (min-width: 992px) and (max-width: 1199px) {


    .hero-image {
        margin-left: 16px;
    }

    .counter-card {
        padding: 30px 20px;
    }

    .solution-card {
        padding: 28px 22px;
    }

    .cta-box {
        padding: 48px;
    }
}

@media (max-width: 991px) {

    .counter-section .row,
    .about-section .row,
    .solutions-section .row,
    .why-section .row,
    .technology-section .row,
    .blog-section .row,
    .cta-section .row {
        row-gap: 30px;
    }

    .section-title {
        margin-bottom: 38px;
    }

    .counter-card {
        padding: 28px 20px;
    }

    .solution-card {
        padding: 26px 20px;
    }

    .cta-box {
        padding: 42px;
    }

    .cta-buttons {
        margin-top: 28px;
    }
}

@media (max-width: 767px) {
    .hero-section {
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-image {
        margin-left: 0;
    }

    .counter-card,
    .solution-card,
    .why-item,
    .tech-step,
    .small-blog {
        border-radius: 14px;
    }

    .technology-benefits {
        gap: 10px;
    }

    .cta-box {
        padding: 34px 26px;
    }

    .testimonial-rotator-controls {
        justify-content: center;
    }
}

@media (max-width: 575px) {

    .hero-buttons,
    .cta-buttons {
        width: 100%;
    }

    .hero-buttons .btn,
    .cta-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .section-title {
        margin-bottom: 30px;
    }

    .counter-card {
        padding: 24px 18px;
    }

    .solution-card {
        padding: 24px 18px;
    }

    .cta-box {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .testimonial-intro {
        padding: 38px 24px;
    }

    .testimonial-stories {
        padding: 16px;
    }

    .gallery-lightbox-close {
        width: 40px;
        height: 40px;
    }
}

/*==================================
        FULL-BLEED HERO LAYOUT
==================================*/

@media (min-width: 992px) {
    .hero-section {
        padding-top: 16px;
    }

    #heroSlider,
    #heroSlider .carousel-item {
        min-height: 500px;
    }

    #heroSlider .carousel-item {
        background: #effbf4;
    }

    #heroSlider .carousel-item::before {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        background:
            radial-gradient(circle at 83% 30%, rgba(255, 255, 255, .85) 0 5%, transparent 5.2%),
            radial-gradient(circle at 70% 78%, rgba(25, 135, 84, .11) 0 18%, transparent 18.3%);
        pointer-events: none;
    }

    #heroSlider .container {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: none;
        min-height: 500px;
        padding: 24px clamp(36px, 8vw, 150px);
    }

    #heroSlider .container>.row {
        width: 100%;
    }

    .hero-image {
        height: 553px;
        margin-left: 0;
        justify-content: flex-end;
    }

    .hero-image img {
        width: min(120%, 900px);
        max-width: none;
        max-height: 100%;
        object-fit: contain;
        transform: scale(1.12);
        transform-origin: right center;
    }
}

@media (max-width: 991px) {
    .hero-section {
        padding-top: 12px;
    }

    #heroSlider,
    #heroSlider .carousel-item,
    #heroSlider .carousel-item .container {
        min-height: auto;
    }

    #heroSlider .carousel-item .container {
        padding-top: 32px;
        padding-bottom: 42px;
    }
}

/* Keep the plant visual inside its column on compact desktop screens. */
@media (min-width: 992px) and (max-width: 1399px) {
    #heroSlider .container {
        padding-right: clamp(32px, 5vw, 72px);
        padding-left: clamp(32px, 5vw, 72px);
    }

    .hero-image {
        height: auto;
        margin-left: 16px;
        justify-content: center;
    }

    .hero-image img {
        width: 100%;
        max-width: 680px;
        max-height: none;
        transform: none;
    }

    #heroSlider .row>.col-lg-6.order-2 {
        flex: 0 0 44%;
        width: 44%;
    }

    #heroSlider .row>.col-lg-6.text-center.order-1 {
        flex: 0 0 56%;
        width: 56%;
    }
}

/* Wide desktop: reserve more column space for the plant image instead of scaling it over the copy. */
@media (min-width: 1400px) {
    #heroSlider .row>.col-lg-6.order-2 {
        flex: 0 0 42%;
        width: 42%;
    }

    #heroSlider .row>.col-lg-6.text-center.order-1 {
        flex: 0 0 58%;
        width: 58%;
    }

    .hero-image img {
        width: 100%;
        max-width: 920px;
        transform: none;
    }
}

@media (max-width: 575px) {
    #heroSlider .carousel-item .container {
        padding-top: 24px;
        padding-bottom: 32px;
    }

    #heroSlider .container,
    #heroSlider .row,
    #heroSlider .row>[class*="col-"] {
        width: 100%;
        max-width: 100%;
    }

    #heroSlider .row {
        margin-right: 0;
        margin-left: 0;
    }

    #heroSlider .row>[class*="col-"] {
        padding-right: 12px;
        padding-left: 12px;
    }

    .hero-content {
        width: calc(100vw - 32px);
        max-width: 360px;
        margin-right: auto;
        margin-left: auto;
    }

    .hero-content h1,
    .hero-content p,
    .hero-highlights,
    .hero-proof,
    .hero-buttons {
        width: 100%;
        max-width: 100%;
    }

    .hero-image,
    .hero-image img {
        width: calc(100vw - 32px);
        max-width: 360px;
        margin-right: auto;
        margin-left: auto;
    }

    .hero-content h1,
    .hero-content p,
    .hero-highlight-item,
    .hero-proof span {
        overflow-wrap: anywhere;
    }

    .hero-section,
    .hero-section .container,
    .hero-section .row,
    .hero-section [class*="col-"],
    .counter-section,
    .about-section,
    .solutions-section,
    .why-section,
    .technology-section,
    .gallery-section,
    .blog-section,
    .cta-section,
    .testimonial-section,
    .footer-section {
        min-width: 0;
        max-width: 100%;
    }

    .hero-section .row,
    .about-section .row,
    .why-section .row,
    .technology-section .row,
    .blog-section .row,
    .cta-section .row {
        margin-right: 0;
        margin-left: 0;
    }

    .testimonial-showcase,
    .gallery-grid,
    .cta-box,
    .footer-bottom {
        min-width: 0;
    }
}






























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

.about-hero {

    position: relative;

    min-height: 650px;

    height: calc(100vh - 95px);

    max-height: 850px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #ffffff;

}


/*==================================
        BACKGROUND
==================================*/

.about-hero-bg {

    position: absolute;

    inset: 0;

    background-image:
        url("../home-img/about-page.png");

    background-size: cover;

    background-position: center;

    transform: scale(1.03);

    transition: transform 1.5s ease;

    z-index: 0;

}


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

.about-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(7, 35, 20, .92) 0%,
            rgba(7, 35, 20, .78) 38%,
            rgba(7, 35, 20, .42) 70%,
            rgba(7, 35, 20, .25) 100%);

    z-index: 1;

}


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

.about-hero .container {

    position: relative;

    z-index: 3;

}


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

.about-hero-content {

    max-width: 760px;

    padding-top: 30px;

}


/*==================================
        BREADCRUMB
==================================*/

.about-breadcrumb {

    margin-bottom: 28px;

}

.about-breadcrumb .breadcrumb {

    margin: 0;

    padding: 0;

    background: transparent;

}

.about-breadcrumb .breadcrumb-item {


    color: rgba(255, 255, 255);

}

.about-breadcrumb .breadcrumb-item a {

    color: rgba(255, 255, 255);

    text-decoration: none;

    transition: .3s ease;

}

.about-breadcrumb .breadcrumb-item a:hover {

    color: #ffffff;

}

.about-breadcrumb .breadcrumb-item.active {

    color: #ffffff;

}

.about-breadcrumb .breadcrumb-item+.breadcrumb-item::before {

    color: rgba(255, 255, 255);

    content: "->";

}


/*==================================
        TAG
==================================*/

.about-hero-tag {

    display: inline-flex;

    align-items: center;

    padding: 9px 18px;

    margin-bottom: 22px;

    border: 1px solid rgba(255, 255, 255, .25);

    border-radius: 50px;

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(10px);

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

    color: #ffffff;


}


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

.about-hero h1 {

    margin: 0 0 25px;

    max-width: 750px;



    color: #ffffff;

}

.about-hero h1 span {

    display: block;

    color: #198754;

}


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

.about-hero-content>p {

    max-width: 680px;

    margin: 0 0 35px;

    color: rgba(255, 255, 255, .84);


}


/*==================================
        BUTTONS
==================================*/

.about-hero-buttons {

    display: flex;

    align-items: center;

    gap: 28px;

    flex-wrap: wrap;

}

.about-hero-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 25px;

    border-radius: 8px;

    background: #198754;

    color: #ffffff;

    text-decoration: none;


    transition: .35s ease;

}

.about-hero-btn:hover {

    background: #ffffff;

    color: #198754;

    transform: translateY(-3px);

}

.about-hero-btn i {

    transition: .35s ease;

}

.about-hero-btn:hover i {

    transform: translateY(3px);

}


.about-hero-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #ffffff;

    text-decoration: none;


    transition: .35s ease;

}

.about-hero-link i {

    transition: .35s ease;

}

.about-hero-link:hover {

    color: #198754;

}

.about-hero-link:hover i {

    transform: translateX(6px);

}


/*==================================
        SCROLL INDICATOR
==================================*/

.about-scroll-indicator {

    position: absolute;

    z-index: 4;

    bottom: 35px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 12px;

    color: rgba(255, 255, 255, .75);

    text-decoration: none;


    text-transform: uppercase;

}

.about-scroll-indicator span {

    position: relative;

    width: 24px;

    height: 38px;

    border: 1px solid rgba(255, 255, 255, .55);

    border-radius: 20px;

}

.about-scroll-indicator span::before {

    content: "";

    position: absolute;

    top: 7px;

    left: 50%;

    width: 4px;

    height: 7px;

    border-radius: 10px;

    background: #ffffff;

    transform: translateX(-50%);

    animation: aboutScroll 1.8s infinite;

}

@keyframes aboutScroll {

    0% {

        opacity: 0;

        transform: translate(-50%, 0);

    }

    30% {

        opacity: 1;

    }

    70% {

        opacity: 1;

    }

    100% {

        opacity: 0;

        transform: translate(-50%, 15px);

    }

}


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

@media (max-width: 991px) {

    .about-hero {

        min-height: 600px;

        height: auto;

        padding: 120px 0 130px;

    }

    .about-hero-content {

        max-width: 680px;

    }



}


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

@media (max-width: 767px) {

    .about-hero {

        min-height: 620px;

        padding: 100px 0 110px;

        align-items: center;

    }

    .about-hero-bg {

        background-position: 62% center;

    }

    .about-hero-overlay {

        background:
            linear-gradient(90deg,
                rgba(7, 35, 20, .91),
                rgba(7, 35, 20, .72));

    }

    .about-hero-content {

        padding-top: 10px;

    }

    .about-breadcrumb {

        margin-bottom: 22px;

    }


    .about-hero-tag {

        padding: 8px 15px;

    }

    .about-hero h1 {


        margin-bottom: 20px;

    }

    .about-hero-content>p {


        margin-bottom: 28px;

    }

    .about-hero-buttons {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }

    .about-hero-btn {

        width: auto;

        padding: 14px 21px;

    }


    .about-scroll-indicator {

        bottom: 20px;

    }

}


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

@media (max-width: 576px) {

    .about-hero {

        min-height: 590px;

        padding: 90px 0 100px;

    }

    .about-hero .container {

        padding-left: 20px;

        padding-right: 20px;

    }



    .about-hero-buttons {

        width: 100%;

    }

    .about-hero-btn {

        width: 100%;

        justify-content: center;

    }

}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {

    .about-hero {

        min-height: 560px;

    }



    .about-scroll-indicator {

        display: none;

    }

}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .about-hero-bg {

        transition: none;

    }

    .about-scroll-indicator span::before {

        animation: none;

    }

}



/*==================================
        COMPANY OVERVIEW
==================================*/

.company-overview {

    position: relative;

    padding: 120px 0;

    background: #ffffff;

    overflow: hidden;

}


/*==================================
        BACKGROUND DETAILS
==================================*/

.company-overview::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .045);

    top: -200px;

    right: -180px;

    pointer-events: none;

}

.company-overview::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: rgba(67, 118, 235, .035);

    bottom: -150px;

    left: -130px;

    pointer-events: none;

}


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

.company-image-wrapper {

    position: relative;

    min-height: 620px;

    padding-right: 55px;

}


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

.company-main-image {

    position: relative;

    width: 100%;

    height: 580px;

    overflow: hidden;

    border-radius: 24px;

    z-index: 2;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .12);

}

.company-main-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform .8s ease;

}

.company-main-image:hover img {

    transform: scale(1.05);

}


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

.company-image-accent {

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 22px;

    background: #198754;

    right: 5px;

    top: 35px;

    z-index: 1;

    opacity: .12;

}

.company-image-wrapper::before {

    content: "";

    position: absolute;

    width: 90px;

    height: 90px;

    border: 2px solid rgba(25, 135, 84, .35);

    border-radius: 50%;

    left: -35px;

    bottom: 90px;

    z-index: 1;

}


/*==================================
        STATISTICS
==================================*/

.company-statistics {

    position: absolute;

    left: -25px;

    bottom: 0;

    z-index: 5;

    display: flex;

    flex-direction: column;

    gap: 12px;

}


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

.company-stat-card {

    min-width: 225px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px 20px;

    background: rgba(255, 255, 255, .96);

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

    border-radius: 14px;

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

    backdrop-filter: blur(12px);

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

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.company-stat-card:hover {

    transform: translateX(8px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .14);

}


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

.stat-icon {

    width: 46px;

    height: 46px;

    min-width: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #eaf8ed;

    color: #198754;

}




/*==================================
        STAT TEXT
==================================*/

.company-stat-card strong {

    display: block;

    color: #000;


}

.company-stat-card span {

    display: block;

    margin-top: 4px;

    color: #777;


}


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

.company-content {

    position: relative;

    z-index: 2;

    padding-left: 20px;


}


/*==================================
        SECTION TAG
==================================*/

.company-section-tag {

    position: relative;
    align-items: center;
    gap: 10px;
    color: #198754;
    background: rgba(25, 135, 84, .12);
    border-radius: 50px;
    padding: 7px 16px;
}

.company-section-tag::before {

    content: "";

    width: 32px;

    height: 2px;

    background: #198754;

}


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

.company-content h2 {

    max-width: 650px;

    margin: 0 0 25px;

    color: #1d1d1d;



}

.company-content h2 span {

    color: #198754;

}


/*==================================
        INTRODUCTION
==================================*/

.company-intro {

    max-width: 650px;

    margin-bottom: 17px;

    color: #666;

    /* text-align: justify; */

}


/*==================================
        PILLARS
==================================*/

.company-pillars {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 30px;

    padding-top: 30px;

    border-top: 1px solid #eeeeee;

}

.company-pillars p {
    text-align: left;
}


/*==================================
        PILLAR
==================================*/

.company-pillar {

    display: flex;

    align-items: flex-start;

    gap: 14px;

}

.pillar-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #f0f9f1;

    color: #198754;

    transition: .35s ease;

}

.company-pillar:hover .pillar-icon {

    background: #198754;

    color: #ffffff;

    transform: translateY(-4px);

}



.company-pillar h4 {

    margin: 0 0 7px;

    color: #000;


}

.company-pillar p {

    margin: 0;

    color: #707070;


}


/*==================================
        CORE VALUES
==================================*/

.company-values {

    margin-top: 32px;

}

.company-values h4 {

    margin-bottom: 15px;

    color: #000;


}

.value-list {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

}

.value-list span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 13px;

    border: 1px solid #e5eee6;

    border-radius: 50px;

    color: #000;

    background: #fbfdfb;


    transition: .3s ease;

}

.value-list span i {

    color: #198754;

}

.value-list span:hover {

    color: #198754;

    border-color: #bce6c1;

    background: #f3fbf4;

}


/*==================================
        READ MORE
==================================*/

.company-read-more {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-top: 32px;

    padding: 14px 22px;

    border-radius: 8px;

    background: #198754;

    color: #ffffff;

    text-decoration: none;


    transition: .35s ease;

}

.company-read-more i {

    transition: .35s ease;

}

.company-read-more:hover {

    background: #198754;

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(25, 135, 84, .22);

}

.company-read-more:hover i {

    transform: translateX(6px);

}


/* Desktop scroll journey: one milestone per scroll stage. */
@media (min-width: 768px) {
    .journey-section {
        height: 500vh;
        min-height: 0;
        padding: 0 !important;
        overflow: clip;
    }

    .journey-sticky {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100vh;
        min-height: 620px;
    }

    .journey-sticky .container {
        width: 100%;
    }

    .journey-heading {
        margin-bottom: 32px;
    }

    .journey-timeline {
        display: block;
        width: min(680px, 100%);
        max-width: none;
        height: 370px;
        margin: 0 auto;
    }

    .journey-line {
        top: 72px;
        left: 20%;
        right: 20%;
    }

    .journey-item {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 0 !important;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(22px) !important;
        transition: opacity .45s ease, transform .45s ease, visibility .45s ease;
    }

    .journey-item.active {
        opacity: 1 !important;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) !important;
    }

    .journey-dot {
        width: 62px;
        height: 62px;
        margin: 12px 0 18px;
    }

    .journey-card {
        width: min(560px, 100%);
        min-height: 205px;
        padding: 24px 30px;
    }
}

/*==================================
        LARGE DESKTOP
==================================*/

@media (max-width: 1199px) {

    .company-overview {

        padding: 100px 0;

    }

    .company-image-wrapper {

        padding-right: 35px;

    }

    .company-main-image {

        height: 540px;

    }

    .company-statistics {

        left: -15px;

    }

    .company-content {

        padding-left: 5px;

    }



}


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

@media (max-width: 991px) {

    .company-overview {

        padding: 85px 0;

    }

    .company-image-wrapper {

        min-height: auto;

        padding-right: 35px;

        margin-bottom: 55px;

    }

    .company-main-image {

        height: 500px;

    }

    .company-statistics {

        left: 15px;

        bottom: -35px;

        flex-direction: row;

        flex-wrap: wrap;

    }

    .company-stat-card {

        min-width: 190px;

    }

    .company-content {

        padding-left: 0;

    }



    .company-intro {

        max-width: 100%;

    }

}


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

@media (max-width: 767px) {

    .company-overview {

        padding: 70px 0;

    }

    .company-overview::before,
    .company-overview::after {

        display: none;

    }

    .company-image-wrapper {

        padding-right: 0;

        margin-bottom: 75px;

    }

    .company-main-image {

        height: 420px;

        border-radius: 20px;

    }

    .company-image-accent {

        width: 120px;

        height: 120px;

        right: -10px;

        top: 20px;

        border-radius: 16px;

    }

    .company-statistics {

        left: 15px;

        right: 15px;

        bottom: -60px;

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 8px;

    }

    .company-stat-card {

        min-width: 0;

        width: 100%;

        padding: 12px 8px;

        flex-direction: column;

        justify-content: center;

        text-align: center;

        gap: 7px;

        border-radius: 12px;

    }

    .stat-icon {

        width: 38px;

        height: 38px;

        min-width: 38px;

    }



    .company-pillars {

        grid-template-columns: 1fr;

        gap: 22px;

        margin-top: 25px;

        padding-top: 25px;

    }

    .company-values {

        margin-top: 28px;

    }

}


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

@media (max-width: 576px) {

    .company-overview {

        padding: 60px 0;

    }

    .company-overview .container {

        padding-left: 18px;

        padding-right: 18px;

    }

    .company-main-image {

        height: 350px;

        border-radius: 17px;

    }

    .company-statistics {

        left: 5px;

        right: 5px;

        bottom: -58px;

        gap: 6px;

    }

    .company-stat-card {

        padding: 10px 5px;

    }


    .stat-icon {

        width: 34px;

        height: 34px;

        min-width: 34px;

    }



    .value-list {

        gap: 7px;

    }

    .value-list span {

        padding: 7px 10px;

    }

    .company-read-more {

        width: 100%;

        justify-content: center;

    }

}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {

    .company-main-image {

        height: 310px;

    }

    .company-statistics {

        bottom: -55px;

    }

    .company-pillar {

        gap: 10px;

    }

    .pillar-icon {

        width: 42px;

        height: 42px;

        min-width: 42px;

    }

}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .company-main-image img,
    .company-stat-card,
    .pillar-icon,
    .company-read-more {

        transition: none;

    }

}




































/*==================================
        OUR JOURNEY
==================================*/

.journey-section {

    position: relative;

    padding: 120px 0;

    background: #f8fbf9;

    overflow: hidden;

}


/*==================================
        BACKGROUND DECORATION
==================================*/

.journey-section::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .045);

    top: -220px;

    right: -160px;

    pointer-events: none;

}

.journey-section::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    background: rgba(67, 118, 235, .035);

    bottom: -180px;

    left: -160px;

    pointer-events: none;

}


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

.journey-heading {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: 0 auto 80px;

}

.journey-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #198754;


    padding: 15px;

}

.journey-tag::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #198754;

}

.journey-tag::after {

    content: "";

    width: 30px;

    height: 2px;

    background: #198754;

}

.journey-heading h2 {

    margin: 0 0 20px;

    color: #1d1d1d;



}

.journey-heading h2 span {

    color: #198754;

    display: block;

}

.journey-heading p {

    max-width: 680px;

    margin: 0 auto;

    color: #6b6b6b;

    text-align: center;

}


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

.journey-timeline {

    position: relative;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 20px;

    z-index: 2;

}


/*==================================
        TIMELINE LINE
==================================*/

.journey-line {

    position: absolute;

    top: 83px;

    left: 8%;

    right: 8%;

    height: 3px;

    background: #dce9df;

    z-index: 0;

    overflow: hidden;

    border-radius: 10px;

}

.journey-line::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #198754;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 1.8s ease;

}


/*==================================
        TIMELINE ITEM
==================================*/

.journey-item {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 2;

}


/*==================================
        YEAR
==================================*/

.journey-year {

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #198754;


}


/*==================================
        DOT
==================================*/

.journey-dot {

    position: relative;

    width: 84px;

    height: 84px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 18px 0 28px;

    border: 2px solid #d7e8da;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:

        0 8px 25px rgba(0, 0, 0, .06);

    transition:

        border-color .35s ease,

        transform .35s ease,

        box-shadow .35s ease;

}

.journey-dot::before {

    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    background: #eef9f0;

}

.journey-dot span {

    position: relative;

    width: 17px;

    height: 17px;

    border-radius: 50%;

    background: #198754;

    box-shadow:

        0 0 0 7px rgba(25, 135, 84, .12);

}

.journey-item:hover .journey-dot {

    border-color: #198754;

    transform: scale(1.08);

    box-shadow:

        0 15px 35px rgba(25, 135, 84, .18);

}


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

.journey-card {

    position: relative;

    width: 100%;

    min-height: 260px;

    padding: 30px 24px;

    background: #ffffff;

    border: 1px solid #e8eee9;

    border-radius: 18px;

    box-shadow:

        0 15px 40px rgba(0, 0, 0, .055);

    text-align: center;

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        border-color .4s ease;

}

.journey-card:hover {

    transform: translateY(-10px);

    border-color: rgba(25, 135, 84, .25);

    box-shadow:

        0 25px 55px rgba(0, 0, 0, .10);

}


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

.journey-icon {

    width: 52px;

    height: 52px;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #edf8ef;

    color: #198754;

    transition: .35s ease;

}



.journey-card:hover .journey-icon {

    background: #198754;

    color: #ffffff;

    transform: translateY(-3px);

}


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

.journey-number {

    position: absolute;

    top: 18px;

    right: 18px;

    color: #c9d7cc;


}


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

.journey-card h3 {

    margin: 0 0 12px;

    color: #000000;


}


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

.journey-card p {

    margin: 0;

    color: #737373;

    text-align: left;

}


/*==================================
        LARGE DESKTOP
==================================*/

@media (max-width: 1199px) {

    .journey-section {

        padding: 100px 0;

    }

    .journey-timeline {

        gap: 12px;

    }

    .journey-line {

        left: 7%;

        right: 7%;

    }

    .journey-dot {

        width: 72px;

        height: 72px;

    }

    .journey-card {

        min-height: 275px;

        padding: 27px 18px;

    }



}


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

@media (max-width: 991px) {

    .journey-section {

        padding: 85px 0;

    }

    .journey-heading {

        margin-bottom: 60px;

    }

    .journey-timeline {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

    }

    .journey-line {

        display: none;

    }

    .journey-item {

        align-items: stretch;

    }

    .journey-year {

        justify-content: flex-start;

        padding-left: 20px;

    }

    .journey-dot {

        display: none;

    }

    .journey-card {

        min-height: 240px;

        text-align: left;

    }

    .journey-icon {

        margin-left: 0;

    }

}


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

@media (max-width: 767px) {

    .journey-section {

        padding: 70px 0;

    }

    .journey-section::before,
    .journey-section::after {

        display: none;

    }

    .journey-heading {

        margin-bottom: 50px;

    }



    .journey-timeline {

        display: block;

        padding-left: 42px;

    }

    /* Vertical line */

    .journey-line {

        display: block;

        top: 0;

        bottom: 0;

        left: 17px;

        right: auto;

        width: 2px;

        height: auto;

        background: #dce9df;

    }

    .journey-line::before {

        width: 100%;

        height: 100%;

        transform: scaleY(0);

        transform-origin: top;

    }

    .journey-item {

        position: relative;

        display: block;

        margin-bottom: 35px;

    }

    .journey-item:last-child {

        margin-bottom: 0;

    }

    .journey-year {

        height: auto;

        justify-content: flex-start;

        padding: 0;

        margin-bottom: 12px;

    }

    .journey-dot {

        position: absolute;

        display: flex;

        top: 1px;

        left: -42px;

        width: 36px;

        height: 36px;

        margin: 0;

        border-width: 2px;

    }

    .journey-dot::before {

        inset: 5px;

    }

    .journey-dot span {

        width: 9px;

        height: 9px;

        box-shadow:

            0 0 0 4px rgba(25, 135, 84, .12);

    }

    .journey-card {

        width: 100%;

        min-height: auto;

        padding: 24px 20px;

        border-radius: 16px;

        text-align: left;

    }

    .journey-icon {

        margin-left: 0;

        margin-bottom: 15px;

        width: 46px;

        height: 46px;

    }



}


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

@media (max-width: 576px) {

    .journey-section {

        padding: 60px 0;

    }

    .journey-section .container {

        padding-left: 18px;

        padding-right: 18px;

    }



    .journey-timeline {

        padding-left: 36px;

    }

    .journey-line {

        left: 14px;

    }

    .journey-dot {

        left: -36px;

        width: 32px;

        height: 32px;

    }

    .journey-card {

        padding: 22px 18px;

    }


}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {

    .journey-card {

        padding: 20px 16px;

    }



}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .journey-line::before,
    .journey-dot,
    .journey-card,
    .journey-icon {

        transition: none;

    }

}

/* Keep desktop journey milestones in the responsive grid, not scroll stages. */
@media (min-width: 768px) {

    .journey-section {
        height: auto;
        min-height: 0;
        padding: 120px 0;
        overflow: hidden;
    }

    .journey-timeline {
        display: grid;
        width: auto;
        max-width: none;
        height: auto;
        margin: 0;
        padding: 20px;
    }

    .journey-item,
    .journey-item.active {
        position: relative;
        inset: auto;
        display: flex;
        opacity: 1 !important;
        visibility: visible;
        pointer-events: auto;
        transform: none !important;
    }

    .journey-card {
        display: block;
        grid-template-columns: none;
        width: 100%;
    }

}


























/*==================================
        DRDO TECHNOLOGY
==================================*/

.drdo-section {

    position: relative;

    padding: 120px 0;

    background: #ffffff;

    overflow: hidden;

}


/*==================================
        BACKGROUND DETAILS
==================================*/

.drdo-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .045);

    top: -260px;

    right: -180px;

    pointer-events: none;

}

.drdo-section::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .025);

    bottom: -180px;

    left: -160px;

    pointer-events: none;

}


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

.drdo-image-wrapper {

    position: relative;

    min-height: 570px;

    padding: 20px 35px 35px 0;

}


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

.drdo-image {

    position: relative;

    width: 100%;

    height: 520px;

    overflow: hidden;

    border-radius: 26px;

    z-index: 2;

    background: #edf3ee;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .11);

}

.drdo-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition: transform .8s ease;

}

.drdo-image:hover img {

    transform: scale(1.04);

}


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

.drdo-image-shape {

    position: absolute;

    width: 210px;

    height: 210px;

    right: 0;

    top: 0;

    border-radius: 28px;

    background: #198754;

    opacity: .10;

    z-index: 1;

}

.drdo-image-wrapper::before {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    left: -35px;

    bottom: 65px;

    border: 2px solid rgba(25, 135, 84, .25);

    border-radius: 50%;

    z-index: 1;

}


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

.drdo-image-badge {

    position: absolute;

    z-index: 5;

    left: -20px;

    bottom: 15px;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 245px;

    padding: 17px 20px;

    background: rgba(255, 255, 255, .96);

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

    border-radius: 15px;

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

    backdrop-filter: blur(12px);

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

}

.drdo-badge-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: #edf8ef;

    color: #198754;

}



.drdo-image-badge strong {

    display: block;

    margin-bottom: 3px;

    color: #000;


}

.drdo-image-badge span {

    display: block;

    color: #777;


}


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

.drdo-content {

    position: relative;

    z-index: 3;

    padding-left: 20px;

}


/*==================================
        SECTION BADGE
==================================*/

.drdo-section-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 19px;

    padding: 8px 13px;

    border: 1px solid #dcecdf;

    border-radius: 50px;

    background: #f5fbf6;

    color: #198754;


}




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

.drdo-content h2 {

    max-width: 650px;

    margin: 0 0 24px;

    color: #1d1d1d;



}

.drdo-content h2 span {

    display: block;

    color: #198754;

}


/*==================================
        INTRODUCTION
==================================*/

.drdo-intro {

    max-width: 650px;

    margin: 0 0 15px;

    color: #6d6d6d;


}


/*==================================
        TECHNOLOGY BOX
==================================*/

.drdo-technology-box {

    display: flex;

    align-items: center;

    gap: 15px;

    max-width: 520px;

    margin-top: 28px;

    padding: 17px 19px;

    border: 1px solid #dfece1;

    border-radius: 15px;

    background: linear-gradient(135deg,
            #f5fbf6,
            #ffffff);

}

.drdo-tech-icon {

    width: 50px;

    height: 50px;

    min-width: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: #198754;

    color: #ffffff;

}



.drdo-technology-box span {

    display: block;

    margin-bottom: 3px;

    color: #8a8a8a;


}

.drdo-technology-box h3 {

    margin: 0;

    color: #000;


}


/*==================================
        BENEFITS
==================================*/

.drdo-benefits {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    max-width: 650px;

    margin-top: 20px;

}


/*==================================
        BENEFIT
==================================*/

.drdo-benefit {

    padding: 18px 15px;

    border: 1px solid #e8eee9;

    border-radius: 14px;

    background: #ffffff;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.drdo-benefit:hover {

    transform: translateY(-5px);

    border-color: rgba(25, 135, 84, .25);

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

}


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

.drdo-benefit-icon {

    width: 40px;

    height: 40px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: #edf8ef;

    color: #198754;

}


/*==================================
        BENEFIT TEXT
==================================*/

.drdo-benefit h4 {

    margin: 0 0 6px;

    color: #252525;


}

.drdo-benefit p {

    margin: 0;

    color: #777;


}


/*==================================
        CTA
==================================*/

.drdo-cta {

    margin-top: 28px;

}

.drdo-button {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 14px 23px;

    border-radius: 8px;

    background: #198754;

    color: #ffffff;

    text-decoration: none;


    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.drdo-button i {

    transition: transform .35s ease;

}

.drdo-button:hover {

    color: #ffffff;

    background: #198754;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(25, 135, 84, .22);

}

.drdo-button:hover i {

    transform: translateX(6px);

}


/*==================================
        LARGE DESKTOP
==================================*/

@media (max-width:1199px) {

    .drdo-section {

        padding: 100px 0;

    }

    .drdo-image-wrapper {

        padding-right: 25px;

    }

    .drdo-image {

        height: 500px;

    }

    .drdo-content {

        padding-left: 5px;

    }

    .drdo-benefit {

        padding: 16px 12px;

    }

}


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

@media (max-width:991px) {

    .drdo-section {

        padding: 85px 0;

    }

    .drdo-image-wrapper {

        min-height: 520px;

        margin-bottom: 35px;

    }

    .drdo-image {

        height: 470px;

    }

    .drdo-image-badge {

        left: 10px;

        bottom: 0;

    }

    .drdo-content {

        padding-left: 0;

    }



    .drdo-intro {

        max-width: 100%;

    }

    .drdo-benefits {

        max-width: 100%;

    }

}


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

@media (max-width:767px) {

    .drdo-section {

        padding: 70px 0;

    }

    .drdo-section::before,
    .drdo-section::after {

        display: none;

    }

    .drdo-image-wrapper {

        min-height: 390px;

        padding: 10px 20px 30px 0;

        margin-bottom: 30px;

    }

    .drdo-image {

        height: 370px;

        border-radius: 20px;

    }

    .drdo-image-shape {

        width: 130px;

        height: 130px;

        right: 0;

        top: 0;

        border-radius: 18px;

    }

    .drdo-image-badge {

        left: 5px;

        bottom: 0;

        min-width: 215px;

        padding: 13px 15px;

        border-radius: 13px;

    }

    .drdo-badge-icon {

        width: 42px;

        height: 42px;

        min-width: 42px;

    }


    .drdo-technology-box {

        margin-top: 24px;

    }

    .drdo-benefits {

        grid-template-columns: 1fr;

        gap: 10px;

    }

    .drdo-benefit {

        display: flex;

        align-items: flex-start;

        gap: 13px;

        padding: 14px;

    }

    .drdo-benefit-icon {

        width: 42px;

        height: 42px;

        min-width: 42px;

        margin: 0;

    }


    .drdo-cta {

        margin-top: 24px;

    }

}


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

@media (max-width:576px) {

    .drdo-section {

        padding: 60px 0;

    }

    .drdo-section .container {

        padding-left: 18px;

        padding-right: 18px;

    }

    .drdo-image-wrapper {

        min-height: 350px;

        padding-right: 12px;

    }

    .drdo-image {

        height: 330px;

        border-radius: 17px;

    }

    .drdo-image-badge {

        left: 0;

        min-width: 200px;

    }


    .drdo-technology-box {

        padding: 14px;

    }

    .drdo-tech-icon {

        width: 44px;

        height: 44px;

        min-width: 44px;

    }


    .drdo-button {

        width: 100%;

        justify-content: center;

    }

}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width:375px) {

    .drdo-image-wrapper {

        min-height: 315px;

    }

    .drdo-image {

        height: 295px;

    }

    .drdo-image-badge {

        min-width: 185px;

        padding: 11px 12px;

    }

    .drdo-badge-icon {

        width: 38px;

        height: 38px;

        min-width: 38px;

    }



}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion:reduce) {

    .drdo-image img,
    .drdo-benefit,
    .drdo-button,
    .drdo-button i {

        transition: none;

    }

}









/*==================================
        OUR CORE VALUES
==================================*/

.values-section {

    position: relative;

    padding: 120px 0;

    background: #f7faf8;

    overflow: hidden;

}


/*==================================
        BACKGROUND DECORATION
==================================*/

.values-section::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    top: -300px;

    right: -180px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .045);

    pointer-events: none;

}

.values-section::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    bottom: -220px;

    left: -180px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .025);

    pointer-events: none;

}


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

.values-heading {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 60px;

}

.values-heading-left {

    max-width: 600px;

}

.values-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    color: #198754;


}

.values-tag::before {

    content: "";

    width: 32px;

    height: 2px;

    background: #198754;

}

.values-heading h2 {

    margin: 0;

    color: #1d1d1d;



    white-space: nowrap;

}

.values-heading h2 span {

    display: inline;

    color: #198754;

}

.values-heading-right {

    max-width: 430px;

    padding-bottom: 5px;

}

.values-heading-right p {

    margin: 0;

    color: #6f6f6f;


}


/*==================================
        VALUES GRID
==================================*/

.values-grid {

    position: relative;

    z-index: 2;

}


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

.value-card {

    position: relative;

    height: 100%;

    min-height: 315px;

    padding: 28px 28px 30px;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e3ebe5;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .04);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;

}


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

.value-card:hover {

    transform: translateY(-9px);

    border-color: rgba(25, 135, 84, .28);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .085);

}


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

.value-card-top {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


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

.value-icon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #edf8ef;

    color: #198754;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;

}


.value-card:hover .value-icon {

    background: #198754;

    color: #ffffff;

    transform:
        translateY(-3px) rotate(-3deg);

}


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

.value-number {

    color: #cbd7ce;


    transition: color .4s ease;

}

.value-card:hover .value-number {

    color: #198754;

}


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

.value-content {

    position: relative;

    z-index: 3;

    margin-top: auto;

    padding-top: 35px;

}

.value-content h3 {

    margin: 0 0 12px;

    color: #000;


    transition: color .35s ease;

}

.value-card:hover .value-content h3 {

    color: #198754;

}

.value-content p {

    max-width: 330px;

    margin: 0;

    color: #777777;



}


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

.value-arrow {

    position: absolute;

    right: 26px;

    bottom: 28px;

    z-index: 4;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #e4ebe6;

    border-radius: 50%;

    color: #9ca69f;

    opacity: .8;

    transition:
        color .35s ease,
        background .35s ease,
        border-color .35s ease,
        transform .4s ease;

}

.value-card:hover .value-arrow {

    color: #ffffff;

    background: #198754;

    border-color: #198754;

    transform:
        translate(3px, -3px);

}


/*==================================
        ACCENT
==================================*/

.value-accent {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 4px;

    background: #198754;

    border-radius: 0 10px 0 0;

    transition: width .45s ease;

}

.value-card:hover .value-accent {

    width: 100%;

}


/*==================================
        DECORATIVE NUMBER
==================================*/

.value-card::before {

    content: "";

    position: absolute;

    right: -45px;

    top: 90px;

    width: 150px;

    height: 150px;

    border-radius: 50%;

    border: 1px solid rgba(25, 135, 84, .06);

    transition:
        transform .6s ease,
        border-color .5s ease;

}

.value-card:hover::before {

    transform: scale(1.35);

    border-color: rgba(25, 135, 84, .12);

}


/*==================================
        SECOND DECORATION
==================================*/

.value-card::after {

    content: "";

    position: absolute;

    right: 20px;

    top: 115px;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .18);

    box-shadow:

        15px 15px 0 rgba(25, 135, 84, .10),

        30px 0 0 rgba(25, 135, 84, .07),

        45px 15px 0 rgba(25, 135, 84, .05);

}


/*==================================
        LARGE DESKTOP
==================================*/

@media (max-width:1199px) {

    .values-section {

        padding: 100px 0;

    }

    .values-heading {

        margin-bottom: 50px;

    }

    .value-card {

        min-height: 300px;

        padding: 25px;

    }

}


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

@media (max-width:991px) {

    .values-section {

        padding: 85px 0;

    }

    .values-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        margin-bottom: 45px;

    }

    .values-heading-left {

        max-width: 100%;

    }

    .values-heading-right {

        max-width: 650px;

        padding: 0;

    }


    .value-card {

        min-height: 285px;

    }

}


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

@media (max-width:767px) {

    .values-section {

        padding: 70px 0;

    }

    .values-section::before,
    .values-section::after {

        display: none;

    }

    .values-heading {

        margin-bottom: 35px;

        gap: 16px;

    }


    .value-card {

        min-height: 260px;

        padding: 22px;

        border-radius: 17px;

    }

    .value-icon {

        width: 46px;

        height: 46px;

        border-radius: 12px;

    }


    .value-content {

        padding-right: 40px;

        padding-top: 25px;

    }

    .value-content h3 {

        margin-bottom: 9px;

    }



    .value-arrow {

        right: 20px;

        bottom: 22px;

        width: 34px;

        height: 34px;

    }

}


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

@media (max-width:576px) {

    .values-section {

        padding: 60px 0;

    }

    .values-section .container {

        padding-left: 16px;

        padding-right: 16px;

    }



    .value-card {

        min-height: 235px;

        padding: 18px;

        border-radius: 15px;

    }

    .value-icon {

        width: 41px;

        height: 41px;

    }



    .value-content {

        padding-top: 20px;

        padding-right: 35px;

    }


    .value-arrow {

        right: 16px;

        bottom: 17px;

        width: 30px;

        height: 30px;

    }

    .value-accent {

        height: 3px;

    }

}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width:375px) {

    .values-section {

        padding: 50px 0;

    }


    .value-card {

        min-height: 215px;

        padding: 15px;

    }


}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .value-card,
    .value-card::before,
    .value-icon,
    .value-arrow,
    .value-accent {

        transition: none;

    }

}





























/*==================================
        ABOUT PAGE UNIFORMITY
==================================*/

/* The About page uses a sub-banner, not a full-screen homepage hero. */
.about-page .about-hero {
    min-height: 480px;
    height: 520px;
    max-height: 520px;
}

.about-page .about-hero-content {
    max-width: 680px;
}

.about-page .about-hero h1 {
    max-width: 640px;
    margin-bottom: 18px;
}

.about-page .about-hero-content>p {
    max-width: 600px;
    margin-bottom: 26px;
}

.about-page .about-hero-buttons {
    gap: 18px;
}

/* Bootstrap's g-5 adds a 48px top gutter to both columns.  Keep its
   horizontal separation but remove that extra vertical gap below the banner. */
.about-page .company-overview>.container>.row {
    --bs-gutter-y: 0;
}

/* Show DRDO copy first and the supporting technology image second on desktop. */
@media (min-width: 992px) {
    .about-page .drdo-section>.container>.row>.col-lg-6:first-child {
        order: 2;
    }

    .about-page .drdo-section>.container>.row>.col-lg-6:last-child {
        order: 1;
    }

    .about-page .drdo-content {
        padding-left: 0;
        padding-right: 20px;
    }

    .about-page .drdo-image-wrapper {
        padding: 20px 0 35px 35px;
    }

    .about-page .drdo-image-shape {
        right: auto;
        left: 0;
    }

    .about-page .drdo-image-wrapper::before {
        left: auto;
        right: -35px;
    }

    .about-page .drdo-image-badge {
        left: auto;
        right: -20px;
    }
}

/* Match the home page's readable content scale on every About-page section. */
.about-page .company-overview :is(h1, h2, h3, h4, h5, h6),
.about-page .journey-section :is(h1, h2, h3, h4, h5, h6),
.about-page .drdo-section :is(h1, h2, h3, h4, h5, h6),
.about-page .values-section :is(h1, h2, h3, h4, h5, h6),
.about-page .purpose-section :is(h1, h2, h3, h4, h5, h6) {
    color: #000 !important;
}

.about-page .company-overview :is(p, li),
.about-page .journey-section :is(p, li),
.about-page .drdo-section :is(p, li),
.about-page .values-section :is(p, li),
.about-page .purpose-section :is(p, li) {
    color: #000 !important;
}

/* Use the same, tighter vertical rhythm for all About-page sections. */
.about-page .company-overview,
.about-page .journey-section,
.about-page .drdo-section,
.about-page .values-section,
.about-page .purpose-section {
    padding: 35px 0 !important;
}

.about-page .purpose-header {
    margin-bottom: 56px;
}

.about-page .commitment-section {
    margin-top: 56px;
}

/* Keep Vision and Mission visually connected without the large empty gap. */
.about-page .purpose-block {
    min-height: 220px;
    padding: 28px 0;
}

.about-page .purpose-connector {
    height: 44px;
}

@media (max-width: 991px) {
    .about-page .about-hero {
        min-height: 0;
        height: auto;
        max-height: none;
        padding: 90px 0;
    }


    .about-page .company-overview,
    .about-page .journey-section,
    .about-page .drdo-section,
    .about-page .values-section,
    .about-page .purpose-section {
        padding: 48px 0 !important;
    }

    .about-page .purpose-block {
        min-height: 0;
        padding: 24px 0;
    }

    .about-page .purpose-connector {
        height: 36px;
    }
}

@media (max-width: 767px) {
    .about-page .about-hero {
        padding: 82px 0 68px;
    }

    .about-page .about-hero-content {
        padding-top: 0;
    }



    .about-page .about-hero-content>p {
        margin-bottom: 22px;
    }

    .about-page .about-hero-buttons {
        gap: 14px;
    }

    .about-page .company-overview,
    .about-page .journey-section,
    .about-page .drdo-section,
    .about-page .values-section,
    .about-page .purpose-section {
        padding: 40px 0 !important;
    }



    .about-page .purpose-header {
        margin: 0 auto 40px;
    }

    .about-page .commitment-section {
        margin: 40px 0 0;
    }
}

@media (max-width: 576px) {

    .about-page .company-overview,
    .about-page .journey-section,
    .about-page .drdo-section,
    .about-page .values-section,
    .about-page .purpose-section {
        padding: 36px 0 !important;
    }

    .about-page .about-hero {
        padding: 76px 0 60px;
    }


}

/*==================================
        DRDO TECHNOLOGY SHOWCASE
==================================*/

.about-page .drdo-section {
    background:
        radial-gradient(circle at 92% 8%, rgba(25, 135, 84, .14), transparent 22%),
        linear-gradient(135deg, #f7fcf8 0%, #edf7ef 100%);
}

.about-page .drdo-section::before {
    width: 360px;
    height: 360px;
    top: -170px;
    right: -110px;
    background: rgba(25, 135, 84, .11);
}

.about-page .drdo-section>.container {
    position: relative;
    z-index: 1;
}

.about-page .drdo-content {
    padding: 46px !important;
    border: 1px solid rgba(25, 135, 84, .16);
    border-radius: 28px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 22px 54px rgba(26, 70, 40, .10);
}

.about-page .drdo-section-badge {
    padding: 9px 14px;
    border-color: rgba(25, 135, 84, .25);
    background: #e8f8eb;
}

.about-page .drdo-content h2 {
    margin-bottom: 18px;
}

.about-page .drdo-intro {
    max-width: none;
    margin-bottom: 13px;
}

.about-page .drdo-technology-box {
    max-width: none;
    margin-top: 24px;
    padding: 18px 20px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(100deg, #198754 0%, #198754 100%);
    box-shadow: 0 12px 24px rgba(25, 135, 84, .18);
}

.about-page .drdo-tech-icon {
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}

.about-page .drdo-technology-box span {
    color: rgba(255, 255, 255, .78);
}

.about-page .drdo-technology-box h3 {
    color: #fff !important;
}

.about-page .drdo-benefits {
    max-width: none;
    gap: 10px;
    margin-top: 14px;
}

.about-page .drdo-benefit {
    position: relative;
    min-height: 164px;
    padding: 20px 15px 16px;
    overflow: hidden;
    border: 1px solid #e0ece3;
    border-radius: 16px;
    background: #fff;
}

.about-page .drdo-benefit::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: #198754;
}

.about-page .drdo-benefit:nth-child(2)::before {
    background: #1696a7;
}

.about-page .drdo-benefit:nth-child(3)::before {
    background: #198754;
}

.about-page .drdo-benefit-icon {
    margin-bottom: 10px;
}

.about-page .drdo-benefit h4 {
    margin-bottom: 5px;
}

.about-page .drdo-cta {
    margin-top: 22px;
}

.about-page .drdo-button {
    padding: 14px 22px;
    border-radius: 50px;
}

.about-page .drdo-image {
    border-radius: 28px;
    box-shadow: 0 26px 60px rgba(21, 77, 39, .18);
}

@media (max-width: 991px) {
    .about-page .drdo-content {
        padding: 34px !important;
    }
}

@media (max-width: 767px) {
    .about-page .drdo-content {
        padding: 26px 20px !important;
        border-radius: 22px;
    }

    .about-page .drdo-benefits {
        grid-template-columns: 1fr;
    }

    .about-page .drdo-benefit {
        min-height: 0;
        display: grid;
        grid-template-columns: 42px 1fr;
        column-gap: 12px;
    }

    .about-page .drdo-benefit-icon {
        grid-row: span 2;
        margin: 0;
    }

    .about-page .drdo-benefit h4,
    .about-page .drdo-benefit p {
        grid-column: 2;
    }
}

/* Journey is intentionally a text-led timeline, not a collection of cards. */
.about-page .journey-card {
    min-height: 0;
    padding: 0 8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.about-page .journey-card::before {
    display: none;
}

.about-page .journey-card:hover {
    transform: none;
    box-shadow: none;
}

.about-page .journey-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(25, 135, 84, .42);
}



.about-page .journey-card:hover .journey-icon {
    color: #198754;
    background: transparent;
    transform: none;
}

.about-page .journey-card h3 {
    margin-bottom: 7px;
}

.about-page .journey-card p {
    max-width: 190px;
    margin: 0 auto;
}

.about-page .journey-number {
    position: static;
    display: block;
    margin-top: 12px;
    color: #198754;
}

/* Core Values: open, editorial columns instead of raised cards. */
.about-page .values-section {
    padding: 64px 0 !important;
    background: #fbfdfb;
}

.about-page .values-heading {
    align-items: center;
    margin-bottom: 36px;
}

.about-page .values-tag {
    margin-bottom: 10px;
    padding: 7px 13px;
    border: 1px solid rgba(25, 135, 84, .24);
    border-radius: 50px;
    background: #fff;
}

.about-page .values-heading h2 {
    margin: 0;
}

.about-page .values-grid {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    border-top: 1px solid #dce9df;
    border-left: 1px solid #dce9df;
}

.about-page .values-grid>div {
    border-right: 1px solid #dce9df;
    border-bottom: 1px solid #dce9df;
}

.about-page .value-card {
    min-height: 205px;
    padding: 24px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.about-page .value-card::before,
.about-page .value-card::after,
.about-page .value-accent,
.about-page .value-arrow {
    display: none;
}

.about-page .value-card:hover {
    transform: none;
    border: 0;
    box-shadow: none;
}

.about-page .value-card-top {
    align-items: flex-start;
}

.about-page .value-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(25, 135, 84, .4);
}

.about-page .value-card:hover .value-icon {
    color: #198754;
    background: transparent;
    transform: none;
}

.about-page .value-number {
    color: #198754;
}

.about-page .value-content {
    margin-top: 0;
    padding-top: 20px;
}

.about-page .value-content h3,
.about-page .value-card:hover .value-content h3 {
    color: #198754 !important;
}

@media (max-width: 991px) {
    .about-page .values-section {
        padding: 52px 0 !important;
    }

    .about-page .values-grid>div:nth-child(2n) {
        border-right: 0;
    }
}

@media (min-width: 992px) {
    .about-page .values-grid>div:nth-child(3n) {
        border-right: 0;
    }
}

@media (max-width: 767px) {
    .about-page .journey-card {
        padding: 2px 0 0;
        text-align: left;
    }

    .about-page .journey-icon {
        margin: 0 0 9px;
    }

    .about-page .journey-card p {
        max-width: none;
        margin: 0;
    }

    .about-page .values-section {
        padding: 42px 0 !important;
    }

    .about-page .values-grid {
        border-left: 0;
    }

    .about-page .values-grid>div {
        border-right: 0;
    }

    .about-page .value-card {
        min-height: 0;
        padding: 20px 0;
    }
}

/*==================================
        HOME PAGE COMPACT SPACING
==================================*/
/* Keep all home sections visually consistent and avoid oversized gaps. */
.home-page {
    --main-heading-size: 36px;
    --subheading-size: 22px;
    --content-size: 16px;
}

.home-page .counter-section,
.home-page .about-section,
.home-page .solutions-section,
.home-page .why-section,
.home-page .technology-section,
.home-page .gallery-section,
.home-page .blog-section,
.home-page .cta-section,
.home-page .testimonial-section {
    padding-top: 24px;
    padding-bottom: 24px;
}

.home-page .section-title,
.home-page .solutions-section .section-title,
.home-page .technology-section .section-title {
    margin-bottom: 30px;
}

.home-page .section-title span,
.home-page .solutions-section .section-title span,
.home-page .technology-section .section-tag {
    margin-bottom: 8px;
    padding: 7px 16px;
}

.home-page .section-title h2,
.home-page .solutions-section .section-title h2,
.home-page .technology-section h2 {
    margin-bottom: 8px;
}

/* .home-page .hero-section {
    padding-top: 90px;
} */

.home-page #heroSlider {
    min-height: 580px;
}

.home-page #heroSlider .carousel-item {
    min-height: 560px;
}

.home-page #heroSlider .container {
    min-height: 520px;
}

@media (max-width: 991px) {

    .home-page .counter-section,
    .home-page .about-section,
    .home-page .solutions-section,
    .home-page .why-section,
    .home-page .technology-section,
    .home-page .gallery-section,
    .home-page .blog-section,
    .home-page .cta-section,
    .home-page .testimonial-section {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .home-page .section-title,
    .home-page .solutions-section .section-title,
    .home-page .technology-section .section-title {
        margin-bottom: 28px;
    }

    .home-page #heroSlider,
    .home-page #heroSlider .carousel-item,
    .home-page #heroSlider .container {
        min-height: auto;
    }
}



/*==================================
        ABOUT PAGE: JOURNEY & PURPOSE REDESIGN
==================================*/
.about-page .journey-section {
    padding: 64px 0 !important;
    background: linear-gradient(145deg, #f4faf5 0%, #ffffff 58%, #eef8f0 100%);
}

.about-page .journey-heading {
    max-width: 640px;
    margin-bottom: 42px;
}

.about-page .journey-tag {
    margin-bottom: 10px;
    padding: 7px 13px;
    background: rgba(25, 135, 84, .12);
    border-radius: 50px;
    background: #fff;
}

.about-page .journey-tag::before,
.about-page .journey-tag::after {
    width: 16px;
}

.about-page .journey-heading h2 {
    margin-bottom: 10px;
}

.about-page .journey-timeline {
    gap: 14px;
}

.about-page .journey-line {
    top: 55px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(25, 135, 84, .18);
}

.about-page .journey-year {
    z-index: 1;
    width: fit-content;
    height: auto;
    padding: 5px 10px;
    border-radius: 50px;
    background: #198754;
    color: #fff;
}

.about-page .journey-dot {
    width: 28px;
    height: 28px;
    margin: 13px 0 18px;
    border-color: #b9dfc0;
    box-shadow: 0 0 0 6px rgba(25, 135, 84, .08);
}

.about-page .journey-dot::before {
    inset: 5px;
}

.about-page .journey-dot span {
    width: 8px;
    height: 8px;
    box-shadow: none;
}

.about-page .journey-card {
    min-height: 220px;
    padding: 24px 18px 20px;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(24, 77, 42, .08);
    text-align: left;
}

.about-page .journey-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #198754, #198754);
}

.about-page .journey-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(24, 77, 42, .14);
}

.about-page .journey-icon {
    width: 44px;
    height: 44px;
    margin: 0 0 15px;
    border-radius: 12px;
}

.about-page .journey-number {
    top: 17px;
    right: 16px;
    color: #a6b8a9;
}

.about-page .purpose-section {
    padding: 68px 0 !important;
    background: #198754;
}

.about-page .purpose-orb-one {
    background: rgba(119, 219, 130, .16);
}

.about-page .purpose-orb-two {
    background: rgba(255, 255, 255, .06);
}

.about-page .purpose-header {
    max-width: 680px;
    margin-bottom: 40px;
}

.about-page .purpose-eyebrow,
.about-page .purpose-header h2 span,
.about-page .purpose-block-label {
    color: #198754;
}

.about-page .purpose-eyebrow::before,
.about-page .purpose-eyebrow::after {
    background: #198754;
}

.about-page .purpose-header h2,
.about-page .purpose-header p,
.about-page .purpose-block-content h3,
.about-page .purpose-block-content p {
    color: #fff !important;
}

.about-page .purpose-header p,
.about-page .purpose-block-content p {
    color: rgba(255, 255, 255, .76) !important;
}

.about-page .purpose-story {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 100%;
}

.about-page .purpose-block {
    min-height: 250px;
    padding: 28px;
    align-items: flex-start;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(8px);
}

.about-page .purpose-number {
    width: 64px;
    color: rgba(124, 227, 138, .5);
}

.about-page .purpose-symbol {
    width: 54px;
    height: 54px;
    color: #198754;
    background: #198754;
}

.about-page .purpose-connector {
    display: none;
}

.about-page .commitment-section {
    margin-top: 34px;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 20px;
    background: rgba(0, 0, 0, .14);
}

.about-page .commitment-header {
    margin-bottom: 22px;
}

.about-page .commitment-header span {
    color: #198754;
}

.about-page .commitment-header h3,
.about-page .commitment-item h4 {
    color: #fff !important;
}

.about-page .commitment-item {
    min-height: 0;
    padding: 8px 18px;
    border-color: rgba(255, 255, 255, .16);
}

.about-page .commitment-number {
    color: #198754;
}

.about-page .commitment-icon {
    color: #198754;
    background: #198754;
}

.about-page .commitment-item p {
    color: rgba(255, 255, 255, .7) !important;
}

@media (max-width: 991px) {

    .about-page .journey-section,
    .about-page .purpose-section {
        padding: 52px 0 !important;
    }

    .about-page .purpose-story {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .about-page .journey-timeline {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about-page .journey-line {
        display: none;
    }

    .about-page .journey-item {
        display: grid;
        grid-template-columns: 64px 1fr;
        align-items: start;
        gap: 10px;
    }

    .about-page .journey-year {
        grid-column: 1;
        grid-row: 1;
    }

    .about-page .journey-dot {
        display: none;
    }

    .about-page .journey-card {
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
    }

    .about-page .purpose-block,
    .about-page .commitment-section {
        padding: 22px;
    }

    .about-page .commitment-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about-page .commitment-item,
    .about-page .commitment-item:first-child {
        padding: 0;
        border: 0;
    }
}

/* Keep every Journey milestone panel exactly the same size. */
@media (min-width: 768px) {
    .about-page .journey-timeline {
        align-items: stretch;
    }

    .about-page .journey-item {
        height: 100%;
    }

    .about-page .journey-card {
        width: 100%;
        min-height: 290px;
        height: 290px;
        display: flex;
        flex-direction: column;
    }

    .about-page .journey-card p {
        margin-top: 0;
    }
}

/*==================================
        ABOUT PAGE RESPONSIVE PASS
==================================*/
@media (max-width: 991px) {
    .about-page .about-hero {
        min-height: 0;
        padding: 120px 0 76px;
    }

    .about-page .company-overview>.container>.row,
    .about-page .drdo-section .row {
        row-gap: 34px !important;
    }

    .about-page .about-image-wrapper,
    .about-page .drdo-image-wrapper {
        max-width: 560px;
        margin-right: auto;
        margin-left: auto;
    }

    .about-page .journey-heading,
    .about-page .values-heading,
    .about-page .purpose-header {
        margin-bottom: 30px;
    }

    .about-page .journey-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 18px;
    }

    .about-page .journey-line {
        display: none;
    }

    .about-page .journey-card {
        height: 250px;
        min-height: 250px;
    }

    .about-page .drdo-content {
        padding-left: 24px !important;
    }

    .about-page .values-heading {
        gap: 12px;
    }

    .about-page .purpose-story {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .about-page .about-hero {
        padding: 104px 0 54px;
    }

    .about-page .about-hero-content,
    .about-page .about-hero-buttons {
        text-align: center;
        justify-content: center;
    }

    .about-page .about-hero-tag {
        margin-right: auto;
        margin-left: auto;
    }

    .about-page .company-overview,
    .about-page .journey-section,
    .about-page .drdo-section,
    .about-page .values-section,
    .about-page .purpose-section {
        padding: 42px 0 !important;
    }

    .about-page .company-overview>.container>.row,
    .about-page .drdo-section .row {
        row-gap: 26px !important;
    }

    .about-page .journey-heading,
    .about-page .values-heading,
    .about-page .purpose-header {
        margin-bottom: 26px;
    }

    .about-page .journey-timeline {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .about-page .journey-item {
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
    }

    .about-page .journey-year {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .about-page .journey-dot {
        display: none;
    }

    .about-page .journey-card {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        height: auto;
        min-height: 0;
        padding: 4px 0 16px 14px;
        border-left: 1px solid #cce5d1;
        border-radius: 0;
        box-shadow: none;
        text-align: left;
    }

    .about-page .journey-card::before {
        display: none;
    }

    .about-page .journey-icon {
        margin: 0 0 8px;
    }

    .about-page .journey-card p {
        max-width: none;
        margin: 0;
    }

    .about-page .journey-number {
        position: static;
        margin-top: 9px;
    }

    .about-page .drdo-image-badge {
        max-width: calc(100% - 18px);
    }

    .about-page .drdo-content {
        padding-left: 16px !important;
    }

    .about-page .drdo-technology-box {
        align-items: center;
    }

    .about-page .values-heading {
        display: block;
    }

    .about-page .values-heading-right {
        margin-top: 10px;
    }

    .about-page .values-grid,
    .about-page .values-grid>div {
        border-right: 0;
        border-left: 0;
    }

    .about-page .value-card {
        min-height: 0;
        padding: 20px 0;
    }

    .about-page .purpose-block {
        min-height: 0;
        padding: 20px;
        gap: 12px;
    }

    .about-page .purpose-number {
        width: 42px;
    }

    .about-page .purpose-symbol {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .about-page .commitment-section {
        margin-top: 22px;
        padding: 20px;
    }

    .about-page .commitment-header {
        display: block;
        margin-bottom: 18px;
    }

    .about-page .commitment-header h3 {
        margin-top: 8px;
    }

    .about-page .commitment-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 420px) {
    .about-page .about-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .about-page .about-hero-btn,
    .about-page .about-hero-link {
        justify-content: center;
    }

    .about-page .journey-item {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 8px;
    }

    .about-page .journey-year {
        padding: 4px 7px;
    }
}

/* Consistent vertical rhythm between every About-page section.
   Matches the compact spacing shown in the reference layout. */
.about-page {
    --about-section-space: 35px;
}

.about-page .company-overview,
.about-page .journey-section,
.about-page .drdo-section,
.about-page .values-section,
.about-page .purpose-section {
    padding-top: var(--about-section-space) !important;
    padding-bottom: var(--about-section-space) !important;
}

@media (max-width: 991px) {
    .about-page {
        --about-section-space: 32px;
    }
}

@media (max-width: 767px) {
    .about-page {
        --about-section-space: 28px;
    }
}

/* Keep the Our Commitment items static. */
.about-page .commitment-item,
.about-page .commitment-icon {
    transition: none;
}





















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

.process-section {

    position: relative;

    /* padding: 120px 0; */

    background: #f7faf8;

    overflow: hidden;
    padding-top: var(--about-section-space) !important;
    padding-bottom: var(--about-section-space) !important;

}


/*==================================
        BACKGROUND
==================================*/

.process-bg-circle {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}

.process-bg-one {

    width: 500px;

    height: 500px;

    top: -300px;

    right: -180px;

    background: rgba(25, 135, 84, .045);

}

.process-bg-two {

    width: 350px;

    height: 350px;

    bottom: -220px;

    left: -180px;

    background: rgba(25, 135, 84, .025);

}


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

.process-heading {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: 0 auto 80px;

}

.process-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #198754;


}

.process-tag::before,
.process-tag::after {

    content: "";

    width: 30px;

    height: 2px;

    background: #198754;

}

.process-heading h2 {

    margin: 0 0 18px;

    color: #1c1c1c;



}

.process-heading h2 span {

    display: block;

    color: #198754;

}

.process-heading p {

    max-width: 650px;

    margin: auto;

    color: black;




}


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

.process-timeline {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    max-width: 1450px;

    margin: 0 auto;

    padding-top: 12px;

}


/*==================================
        CONNECTING LINE
==================================*/

.process-line {

    position: absolute;

    top: 48px;

    left: 5%;

    right: 5%;

    height: 2px;

    background: #dce8df;

    z-index: 1;

    overflow: hidden;

}

.process-line-progress {

    width: 0;

    height: 100%;

    background: #198754;

    border-radius: 20px;

    transition: width 1.2s ease;

}


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

.process-step {

    position: relative;

    z-index: 3;

    min-width: 0;

    padding: 0 8px;

    text-align: center;

    outline: none;

}


/*==================================
        STEP NUMBER
==================================*/

.process-step-number {

    position: absolute;

    top: -24px;

    left: 50%;

    transform: translateX(-50%);

    color: #cbd8cf;


    opacity: 0;

    transition:
        opacity .4s ease,
        color .4s ease;

}

.process-step.active .process-step-number {

    opacity: 1;

    color: #198754;

}


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

.process-icon {

    position: relative;

    width: 74px;

    height: 74px;

    margin: 0 auto 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #d8e4db;

    border-radius: 50%;

    background: #ffffff;

    color: #99a69d;

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

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        color .4s ease,
        box-shadow .4s ease;

}

.process-icon::before {

    content: "";

    position: absolute;

    inset: 6px;

    border: 1px dashed #dce7df;

    border-radius: 50%;

    transition:
        border-color .4s ease,
        transform .5s ease;

}

.process-step.active .process-icon {

    background: #198754;

    border-color: #198754;

    color: #ffffff;

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(25, 135, 84, .20);

}

.process-step.active .process-icon::before {

    border-color: rgba(255, 255, 255, .5);

    transform: rotate(180deg);

}


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

.process-content {

    padding: 0 5px;

}

.process-content>span {

    display: block;

    margin-bottom: 8px;

    color: #a2ada5;


    transition: color .3s ease;

}

.process-step.active .process-content>span {

    color: #198754;

}

.process-content h3 {

    margin: 0 0 9px;

    color: #242424;


    transition: color .3s ease;

}

.process-step.active .process-content h3 {

    color: #198754;

}

.process-content p {

    max-width: 145px;

    margin: 0 auto;

    color: #7a7a7a;


    opacity: .75;

    transition: opacity .3s ease;

}

.process-step.active .process-content p {

    opacity: 1;

}





/*==================================
        LARGE DESKTOP
==================================*/

@media (max-width: 1399px) {

    .process-timeline {

        padding-left: 10px;

        padding-right: 10px;

    }

    .process-icon {

        width: 68px;

        height: 68px;

    }

    .process-line {

        top: 45px;

        left: 5.5%;

        right: 5.5%;

    }



}


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

@media (max-width: 991px) {

    .process-section {

        padding: 90px 0;

    }

    .process-heading {

        margin-bottom: 60px;

    }


    /*
        Horizontal scrolling timeline.
        Prevents 8 stages from becoming
        too small on tablets.
    */

    .process-timeline {

        display: flex;

        width: max-content;

        max-width: none;

        gap: 45px;

        padding:
            32px 35px 35px;

        margin: 0;

        overflow-x: auto;

        scroll-behavior: smooth;

        scroll-snap-type: x proximity;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

    }

    .process-timeline::-webkit-scrollbar {

        display: none;

    }


    .process-step {

        flex: 0 0 150px;

        width: 150px;

        scroll-snap-align: center;

    }


    .process-line {

        top: 68px;

        left: 110px;

        right: 110px;

    }


    .process-icon {

        width: 68px;

        height: 68px;

        margin-bottom: 28px;

    }


    .process-content p {

        max-width: 145px;

    }

}


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

@media (max-width: 767px) {

    .process-section {

        padding: 75px 0;

    }

    .process-bg-circle {

        display: none;

    }


    .process-heading {

        padding: 0 18px;

        margin-bottom: 42px;

    }



    .process-tag::before,
    .process-tag::after {

        width: 22px;

    }




    /* Timeline */

    .process-timeline {

        gap: 28px;

        width: calc(100vw + 1px);

        padding: 32px 25px 35px;

        margin-left: calc((100% - 100vw) / 2);

        scroll-padding-left: 25px;

    }


    /* Individual step */

    .process-step {

        flex: 0 0 145px;

        width: 145px;

        padding: 0;

    }


    /* Connecting line */

    .process-line {

        top: 66px;

        left: 98px;

        right: 98px;

    }


    /* Icon */

    .process-icon {

        width: 62px;

        height: 62px;

        margin-bottom: 26px;

    }

    .process-icon::before {

        inset: 5px;

    }


    /* Number */

    .process-step-number {

        top: -22px;

    }


    /* Text */



    .process-content h3 {

        margin-bottom: 8px;

    }

    .process-content p {

        max-width: 135px;


    }

}


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

@media (max-width: 576px) {

    .process-section {

        padding: 65px 0;

    }

    .process-heading {

        padding: 0 16px;

        margin-bottom: 38px;

    }



    .process-timeline {

        gap: 22px;

        padding:
            30px 20px 30px;

        scroll-padding-left: 20px;

    }


    .process-step {

        flex: 0 0 132px;

        width: 132px;

    }


    .process-line {

        top: 62px;

        left: 86px;

        right: 86px;

    }


    .process-icon {

        width: 56px;

        height: 56px;

        margin-bottom: 24px;

    }


    .process-step-number {

        top: -21px;

    }




    .process-content p {

        max-width: 125px;


    }

}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {

    .process-section {

        padding: 55px 0;

    }



    .process-timeline {

        gap: 18px;

        padding:
            28px 18px 28px;

    }


    .process-step {

        flex: 0 0 122px;

        width: 122px;

    }


    .process-line {

        top: 60px;

        left: 78px;

        right: 78px;

    }


    .process-icon {

        width: 52px;

        height: 52px;

    }




    .process-content p {

        max-width: 115px;

    }

}


/*==================================
        TOUCH DEVICES
==================================*/

@media (hover: none) {

    .process-step:hover .process-icon {

        transform: none;

    }

}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .process-timeline {

        scroll-behavior: auto;

    }

    .process-line-progress,
    .process-icon,
    .process-icon::before,
    .process-step-number,
    .process-content>span,
    .process-content h3,
    .process-content p {

        transition: none !important;

    }

}

/*==================================
        ABOUT PAGE: PROCESS SECTION ALIGNMENT
   Keep the final section aligned with the spacing and readable type scale
   used by the rest of the About page.
==================================*/
.about-page .process-section {
    padding: var(--about-section-space) 0;
}

.about-page .process-heading {
    margin-bottom: 32px;
}



@media (max-width: 991px) {
    .about-page .process-heading {
        margin-bottom: 28px;
    }


}

@media (max-width: 767px) {
    .about-page .process-heading {
        margin-bottom: 24px;
        padding: 0 16px;
    }

}

/* Tablets have enough room for four steps per row, which keeps all eight
   stages visible without requiring a horizontal swipe. */
@media (min-width: 768px) and (max-width: 991px) {
    .about-page .process-timeline {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 30px 16px;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 12px 20px 0;
        overflow: visible;
    }

    .about-page .process-line {
        display: none;
    }

    .about-page .process-step {
        width: auto;
        min-width: 0;
        padding: 0;
    }

    .about-page .process-step-number {
        position: static;
        display: block;
        margin-bottom: 8px;
        transform: none;
        opacity: 1;
        color: #198754;
    }

    .about-page .process-icon {
        margin-bottom: 16px;
    }

    .about-page .process-content p {
        max-width: 150px;
    }
}

@media (max-width: 375px) {}

/* The hero title must be able to wrap inside narrow mobile viewports. */
@media (max-width: 576px) {

    .about-page .about-hero h1,
    .about-page .about-hero h1 span {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .about-page .about-hero h1 {
        text-wrap: balance;
    }
}

/* The desktop process is a single timeline.  On phones, show every step in
   the page flow instead of leaving most of the process off-screen. */
@media (max-width: 767px) {
    .about-page .process-timeline {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 14px;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 8px 16px 0;
        overflow: visible;
    }

    .about-page .process-line {
        display: none;
    }

    .about-page .process-step {
        width: auto;
        min-width: 0;
        padding: 0;
    }

    .about-page .process-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 16px;
    }

    .about-page .process-step-number {
        position: static;
        display: block;
        margin-bottom: 8px;
        transform: none;
        opacity: 1;
        color: #198754;
    }

    .about-page .process-content>span {
        margin-bottom: 6px;
    }

    .about-page .process-content h3 {
        margin-bottom: 7px;
    }

    .about-page .process-content p {
        max-width: 145px;
    }
}

@media (max-width: 375px) {
    .about-page .process-timeline {
        gap: 24px 10px;
        padding-right: 12px;
        padding-left: 12px;
    }

}

/*==================================
        HOME & ABOUT TYPOGRAPHY SCALE
==================================*/


.about-page .process-content h3 small {
    display: block;
    margin-top: 3px;
    color: #617165;
}



/* The original narrow text columns were designed for 10?14px copy.
   Let the new 16px About-page paragraphs use the available card width. */
.about-page .journey-card p {
    max-width: none;
    text-align: center;
}

.about-page .process-content p {
    max-width: none;

}

/* Eight 28px process titles need considerably more room than the original
   compact labels.  Use two rows until the viewport can accommodate all eight
   without title collisions. */
@media (min-width: 992px) and (max-width: 1599px) {
    .about-page .process-timeline {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 34px 24px;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 12px 20px 0;
    }

    .about-page .process-line {
        display: none;
    }

    .about-page .process-step {
        width: auto;
        min-width: 0;
        padding: 0;
    }

    .about-page .process-step-number {
        position: static;
        display: block;
        margin-bottom: 8px;
        transform: none;
        opacity: 1;
        color: #198754;
    }

    .about-page .process-icon {
        margin-bottom: 16px;
    }
}

@media (min-width: 1600px) {
    .about-page .process-section>.container {
        max-width: 1740px;
    }

    .about-page .process-timeline {
        max-width: none;
    }
}

/*==================================
        ABOUT: 11-STAGE PROCESS ROADMAP
==================================*/
.about-page .process-section {
    background: linear-gradient(135deg, #f7faf8 0%, #ffffff 58%, #f2f9f3 100%);
}

.about-page .process-heading {
    max-width: 720px;
}

.about-page .process-heading h2 span {
    display: inline;
    margin-left: .18em;
}

.about-page .process-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
}

.about-page .process-line {
    display: none;
}

.about-page .process-step {
    display: flex;
    min-height: 225px;
    padding: 25px 20px 22px;
    overflow: hidden;
    text-align: left;
    background: #fff;
    border: 1px solid #e0ebe2;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(25, 72, 34, .06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.about-page .process-step::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #198754;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .4s ease;
}

.about-page .process-step.active,
.about-page .process-step:hover,
.about-page .process-step:focus-visible {
    border-color: rgba(25, 135, 84, .45);
    box-shadow: 0 16px 34px rgba(25, 72, 34, .12);
    transform: translateY(-5px);
}

.about-page .process-step.active::after,
.about-page .process-step:hover::after,
.about-page .process-step:focus-visible::after {
    transform: scaleY(1);
}

.about-page .process-step-number {
    position: absolute;
    top: 17px;
    right: 18px;
    left: auto;
    color: #b8c9bb;
    opacity: 1;
    transform: none;
}

.about-page .process-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    margin: 0 16px 0 0;
}

.about-page .process-content {
    padding-top: 2px;
}

.about-page .process-content>span {
    margin-bottom: 7px;
}

.about-page .process-content h3 {
    margin-bottom: 9px;
}

.about-page .process-content p {
    margin: 0;
}

@media (min-width: 1200px) {
    .about-page .process-step:nth-child(9) {
        grid-column: 1 / 2;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .about-page .process-timeline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .about-page .process-timeline {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 16px;
    }

    .about-page .process-step {
        min-height: 0;
        padding: 20px 18px;
    }

    .about-page .process-step:hover {
        transform: none;
    }


}

@media (prefers-reduced-motion: reduce) {

    .about-page .process-step,
    .about-page .process-step::after {
        transition: none;
    }
}

/* Compact, single-frame process board: all stages are visible together on
   desktop while tablet and mobile retain comfortable reading sizes. */
.about-page .process-section {
    padding: 64px 0;
}

.about-page .process-heading {
    margin-bottom: 26px;
}

.about-page .process-frame {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    max-width: 1320px;
}

.about-page .process-frame .process-step {
    min-height: 144px;
    padding: 17px 14px 14px;
    border-radius: 12px;
}

.about-page .process-frame .process-step:nth-child(9) {
    grid-column: auto;
}

.about-page .process-frame .process-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    margin-right: 10px;
}

.about-page .process-frame .process-step-number {
    top: 10px;
    right: 11px;
}

.about-page .process-frame .process-content>span {
    margin-bottom: 4px;
}

.about-page .process-frame .process-content h3 {
    margin-bottom: 5px;
    padding-right: 8px;
}

.about-page .process-frame .process-content h3 small {
    margin-top: 2px;
}


@media (min-width: 768px) and (max-width: 1199px) {
    .about-page .process-section {
        padding: 60px 0;
    }

    .about-page .process-frame {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .about-page .process-frame .process-step {
        min-height: 154px;
    }
}

@media (max-width: 767px) {
    .about-page .process-section {
        padding: 52px 0;
    }

    .about-page .process-frame {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 0 12px;
    }

    .about-page .process-frame .process-step {
        min-height: 166px;
        padding: 15px 11px 12px;
    }

    .about-page .process-frame .process-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        margin-right: 8px;
    }


}

@media (max-width: 375px) {
    .about-page .process-frame {
        grid-template-columns: 1fr;
    }

    .about-page .process-frame .process-step {
        min-height: 0;
    }
}

/*==================================
        SCROLLING PROCESS FRAME
==================================*/
.about-page .process-frame {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 4px 2px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    scroll-padding-inline: 2px;
    scrollbar-width: none;
}

.about-page .process-frame::-webkit-scrollbar {
    display: none;
}

.about-page .process-frame::-webkit-scrollbar-track {
    background: #dfece1;
    border-radius: 20px;
}

.about-page .process-frame::-webkit-scrollbar-thumb {
    background: #198754;
    border-radius: 20px;
}

.about-page .process-frame .process-step,
.about-page .process-frame .process-step:nth-child(9) {
    flex: 0 0 calc((100% - 56px) / 5);
    grid-column: auto;
    min-width: 0;
    scroll-snap-align: start;
}

.about-page .process-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 0;
    color: #198754;
}

.about-page .process-scroll-hint i {
    color: #198754;
}

.about-page .process-scroll-hint>span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.about-page .process-manual-controls {
    display: inline-flex;
    gap: 7px;
}

.about-page .process-scroll-button {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #198754;
    background: #fff;
    border: 1px solid #b9dfbe;
    border-radius: 50%;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.about-page .process-scroll-button:hover,
.about-page .process-scroll-button:focus-visible {
    color: #fff;
    background: #fff;
    outline: none;
    transform: translateY(-2px);
}

.about-page .process-auto-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    color: #198754;
    background: #fff;
    border: 1px solid #b9dfbe;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.about-page .process-auto-toggle:hover,
.about-page .process-auto-toggle:focus-visible {
    color: #fff;
    background: #198754;
    border-color: #198754;
    outline: none;
}


@media (min-width: 768px) and (max-width: 1199px) {
    .about-page .process-frame {
        display: flex;
        padding-inline: 2px;
    }

    .about-page .process-frame .process-step,
    .about-page .process-frame .process-step:nth-child(9) {
        flex-basis: calc((100% - 28px) / 3);
    }
}

@media (max-width: 767px) {
    .about-page .process-frame {
        display: flex;
        gap: 12px;
        padding: 4px 16px 12px;
        scroll-padding-inline: 16px;
    }

    .about-page .process-frame .process-step,
    .about-page .process-frame .process-step:nth-child(9) {
        flex: 0 0 min(82vw, 290px);
        min-height: 148px;
    }

    .about-page .process-scroll-hint {
        margin-top: 12px;
        flex-direction: column;
    }
}

/* Readable type scale for the scrolling process cards. */
.about-page .process-section {
    padding: 90px 0;
}



.about-page .process-frame .process-step,
.about-page .process-frame .process-step:nth-child(9) {
    display: block;
    min-height: 268px;
    padding: 23px 20px 20px;

}

.about-page .process-frame .process-icon {
    width: 52px;
    height: 52px;
    margin: 0 0 18px;
}

.about-page .process-frame .process-step-number {
    top: 17px;
    right: 17px;
}

.about-page .process-frame .process-content>span {
    margin-bottom: 7px;
}

.about-page .process-frame .process-content h3 {
    margin-bottom: 12px;
    padding-right: 0;
    height: 50px;
    align-content: center;
}

.about-page .process-frame .process-content h3 small {
    margin-top: 4px;
}

.about-page .process-frame .process-content p {
    color: #000;
}

@media (max-width: 767px) {
    .about-page .process-section {
        padding: 68px 0;
    }


    .about-page .process-frame .process-step,
    .about-page .process-frame .process-step:nth-child(9) {
        min-height: 300px;
        padding: 21px 18px 18px;
    }

}

/* Larger journey type needs more room than the former fixed-height panels. */
@media (min-width: 768px) {
    .about-page .journey-card {
        height: auto;
        min-height: 300px;
    }
}

/*==================================
        TECHNOLOGY SUB BANNER
==================================*/

.tech-sub-banner {

    position: relative;

    min-height: 390px;

    display: flex;

    align-items: center;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

}


/*==================================
        BACKGROUND OVERLAY
==================================*/

.tech-banner-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(4, 43, 27, .94) 0%,
            rgba(5, 58, 35, .83) 35%,
            rgba(5, 58, 35, .48) 68%,
            rgba(5, 58, 35, .20) 100%);

}


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

.tech-banner-content {

    position: relative;

    z-index: 2;

    max-width: 800px;

    padding:
        65px 0 55px;

}


/*==================================
        BREADCRUMB
==================================*/

.tech-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 24px;


}

.tech-breadcrumb a {

    color:
        rgba(255, 255, 255, .78);

    text-decoration: none;

    transition:
        color .3s ease;

}

.tech-breadcrumb a:hover {

    color: #198754;

}

.tech-breadcrumb span {

    color:
        rgba(255, 255, 255, .50);

}

.tech-breadcrumb strong {

    color: #ffffff;

}


/*==================================
        PRODUCT BADGE
==================================*/

.tech-product-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 38px;

    padding:
        8px 16px;

    margin-bottom: 18px;

    border:
        1px solid rgba(255, 255, 255, .28);

    border-radius: 30px;

    background:
        rgba(255, 255, 255, .07);

    color: #ffffff;


    backdrop-filter:
        blur(7px);

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

}


/*==================================
        BADGE LINE
==================================*/

.tech-badge-line {

    width: 20px;

    height: 2px;

    flex-shrink: 0;

    background: #198754;

}


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

.tech-banner-content h1 {

    max-width: 750px;

    margin: 0;

    color: #ffffff;



}


/*
    Only the highlighted portion
    uses EcoGenn green.
*/

.tech-banner-content h1 em {

    display: block;

    color: #198754;

}


/*==================================
        PRODUCT BITES
==================================*/

.tech-bites {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin-top: 28px;

}


/*==================================
        SINGLE BITE
==================================*/

.tech-bite {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 38px;

    padding:
        8px 13px;

    border:
        1px solid rgba(255, 255, 255, .18);

    border-radius: 6px;

    background:
        rgba(0, 0, 0, .16);

    color:
        rgba(255, 255, 255, .93);


    backdrop-filter:
        blur(5px);

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

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}

.tech-bite i {

    flex-shrink: 0;

    color: #198754;

}

.tech-bite:hover {

    background:
        rgba(25, 135, 84, .13);

    border-color:
        rgba(25, 135, 84, .45);

    transform:
        translateY(-2px);

}


/*==================================
        LARGE DESKTOP
==================================*/

@media (min-width: 1400px) {

    .tech-sub-banner {

        min-height: 430px;

    }

    .tech-banner-content {

        padding-left: 15px;

    }

}


/*==================================
        LAPTOP
==================================*/

@media (max-width: 1199px) {

    .tech-sub-banner {

        min-height: 370px;

    }

    .tech-banner-content {

        max-width: 720px;

    }


}


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

@media (max-width: 991px) {

    .tech-sub-banner {

        min-height: 350px;

        background-position: center;

    }

    .tech-banner-overlay {

        background:
            linear-gradient(90deg,
                rgba(4, 43, 27, .94),
                rgba(5, 58, 35, .72),
                rgba(5, 58, 35, .30));

    }

    .tech-banner-content {

        padding:
            55px 0 45px;

    }


    .tech-bites {

        max-width: 700px;

    }

}


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

@media (max-width: 767px) {

    .tech-sub-banner {

        min-height: 430px;

        align-items: center;

        background-position: 62% center;

    }

    .tech-banner-overlay {

        background:
            linear-gradient(90deg,
                rgba(3, 35, 23, .95),
                rgba(4, 51, 31, .84));

    }

    .tech-banner-content {

        width: 100%;

        padding:
            50px 15px 45px;

    }


    /* Breadcrumb */

    .tech-breadcrumb {

        gap: 6px;

        margin-bottom: 20px;

    }


    /* Badge */

    .tech-product-badge {

        min-height: 34px;

        padding:
            7px 12px;

        margin-bottom: 16px;


    }


    .tech-badge-line {

        width: 16px;

    }


    /* Title */




    /* Bites */

    .tech-bites {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        margin-top: 23px;

    }

    .tech-bite {

        min-height: 35px;

        padding:
            7px 11px;

    }

}


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

@media (max-width: 576px) {

    .tech-sub-banner {

        min-height: 400px;

        background-position: 65% center;

    }

    .tech-banner-content {

        padding:
            45px 10px 40px;

    }





    .tech-product-badge {

        min-height: 31px;

        padding:
            6px 10px;

    }




}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {

    .tech-sub-banner {

        min-height: 390px;

    }


    .tech-bites {

        gap: 6px;

    }

    .tech-bite {

        min-height: 32px;

        padding:
            6px 9px;

    }

}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .tech-bite,
    .tech-breadcrumb a {

        transition: none;

    }

}















/*==================================
        our-technology SUB BANNER
==================================*/

.our-technology-sub-banner,
.our-technology-overview-section,
.our-technology-technology-section {
    padding-top: var(--about-section-space) !important;
    padding-bottom: var(--about-section-space) !important;
}




.our-technology-sub-banner {

    position: relative;

    width: 100%;

    min-height: 500px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #198754;

}


/*==================================
        FULL BANNER IMAGE
==================================*/

.our-technology-banner-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-image:
        url("../home-img/stp-banner.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    z-index: 0;

}


/*==================================
        GREEN OVERLAY
==================================*/

.our-technology-banner-overlay {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    background:
        linear-gradient(90deg,

            rgba(2, 42, 27, .94) 0%,

            rgba(3, 56, 34, .84) 30%,

            rgba(4, 58, 35, .55) 55%,

            rgba(4, 58, 35, .20) 78%,

            rgba(4, 58, 35, .08) 100%);

}


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

.our-technology-sub-banner .container {

    position: relative;

    z-index: 2;

}


.our-technology-banner-content {

    max-width: 850px;

    padding:
        70px 0 65px;

}


/*==================================
        BREADCRUMB
==================================*/

.our-technology-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 24px;

    color: rgba(255, 255, 255, .8);


}


.our-technology-breadcrumb a {

    color:
        rgba(255, 255, 255, .8);

    text-decoration: none;

    transition:
        color .3s ease;

}


.our-technology-breadcrumb a:hover {

    color: #198754;

}


.our-technology-breadcrumb span {

    color:
        rgba(255, 255, 255, .55);

}


.our-technology-breadcrumb strong {

    color: #ffffff;

}


/*==================================
        PRODUCT BADGE
==================================*/

.our-technology-product-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        8px 15px;

    margin-bottom: 18px;

    border:
        1px solid rgba(255, 255, 255, .30);

    border-radius: 30px;

    background:
        rgba(255, 255, 255, .08);

    color: #ffffff;


    backdrop-filter:
        blur(6px);

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

}


.our-technology-badge-line {

    width: 20px;

    height: 2px;

    background: #198754;

}


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

.our-technology-banner-content h1 {

    max-width: 700px;

    margin: 0;

    color: #ffffff;



}


.our-technology-banner-content h1 span {

    display: inline;

    color: #198754;

}


/*==================================
        PRODUCT BITES
==================================*/

.our-technology-bites {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;

}


.our-technology-bite {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 42px;

    padding:
        8px 14px;

    border:
        1px solid rgba(255, 255, 255, .20);

    border-radius: 6px;

    background:
        rgba(0, 0, 0, .18);

    color: #ffffff;


    backdrop-filter:
        blur(5px);

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

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.our-technology-bite i {

    flex-shrink: 0;

    color: #198754;

}


.our-technology-bite:hover {

    background:
        rgba(25, 135, 84, .15);

    border-color:
        rgba(25, 135, 84, .45);

    transform:
        translateY(-2px);

}


/*==================================
        LARGE DESKTOP
==================================*/

@media (min-width: 1400px) {

    .our-technology-sub-banner {

        min-height: 520px;

    }

    .our-technology-banner-content {

        padding:
            80px 0 70px;

    }

}


/*==================================
        LAPTOP
==================================*/

@media (max-width: 1199px) {

    .our-technology-sub-banner {

        min-height: 480px;

    }

    .our-technology-banner-content {

        max-width: 760px;

        padding:
            65px 0 60px;

    }

}


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

@media (max-width: 991px) {

    .our-technology-sub-banner {

        min-height: 450px;

    }

    .our-technology-banner-image {

        background-position:
            center center;

    }

    .our-technology-banner-overlay {

        background:
            linear-gradient(90deg,
                rgba(2, 42, 27, .94) 0%,
                rgba(3, 56, 34, .82) 45%,
                rgba(4, 58, 35, .35) 100%);

    }

    .our-technology-banner-content {

        padding:
            60px 0 55px;

    }

}


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

@media (max-width: 767px) {

    .our-technology-sub-banner {

        min-height: 500px;

        align-items: center;

    }


    /*
        Move the image slightly to the
        right so the treatment plant
        remains visible behind the content.
    */

    .our-technology-banner-image {

        background-position:
            68% center;

    }


    .our-technology-banner-overlay {

        background:
            linear-gradient(90deg,
                rgba(2, 38, 25, .96) 0%,
                rgba(3, 52, 32, .90) 50%,
                rgba(4, 58, 35, .60) 100%);

    }


    .our-technology-banner-content {

        width: 100%;

        padding:
            55px 15px 50px;

    }


    /* Breadcrumb */

    .our-technology-breadcrumb {

        margin-bottom: 20px;

    }


    /* Badge */

    .our-technology-product-badge {

        padding:
            7px 12px;

        margin-bottom: 15px;


    }


    /* Heading */




    /* Bites */

    .our-technology-bites {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        margin-top: 22px;

    }


    .our-technology-bite {

        min-height: 40px;

        padding:
            7px 12px;

    }

}


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

@media (max-width: 576px) {

    .our-technology-sub-banner {

        min-height: 480px;

    }


    .our-technology-banner-image {

        background-position:
            70% center;

    }


    .our-technology-banner-content {

        padding:
            45px 10px 40px;

    }




    .our-technology-product-badge {

        padding:
            7px 10px;

    }





    .our-technology-bite {

        min-height: 37px;

        padding:
            6px 10px;

    }




}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {

    .our-technology-sub-banner {

        min-height: 460px;

    }




}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .our-technology-bite,
    .our-technology-breadcrumb a {

        transition: none;

    }

}






























/*==================================
        our-technology OVERVIEW
==================================*/








.our-technology-overview-section {

    position: relative;
    /* 
    padding: 110px 0; */

    background: #ffffff;

    overflow: hidden;

}


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

.our-technology-overview-image-wrap {

    position: relative;

    padding: 0 25px 25px 0;

}


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

.our-technology-image-accent {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 88%;

    height: 88%;

    border-radius: 0 28px 28px 0;

    background: #eaf7ed;

    z-index: 0;

}


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

.our-technology-overview-image {

    position: relative;

    z-index: 1;

    width: 100%;

    height: 560px;

    overflow: hidden;

    border-radius: 24px;

    background: #e8eee9;

}


.our-technology-overview-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform .8s ease;

}


.our-technology-overview-image-wrap:hover .our-technology-overview-image img {

    transform: scale(1.035);

}


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

.our-technology-image-caption {

    position: absolute;

    z-index: 3;

    left: 25px;

    bottom: 0;

    display: flex;

    align-items: center;

    gap: 13px;

    max-width: 330px;

    padding: 15px 20px;

    background: rgba(255, 255, 255, .96);

    border-left: 3px solid #198754;

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

    backdrop-filter: blur(8px);

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

}


.our-technology-caption-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #edf8ef;

    color: #198754;

}




.our-technology-image-caption strong {

    display: block;

    margin-bottom: 3px;

    color: #252525;


}


.our-technology-image-caption>div>span {

    display: block;

    color: #777777;


}


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

.our-technology-overview-content {

    padding-left: 25px;

}


/*==================================
        SECTION LABEL
==================================*/

.our-technology-section-label {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    color: #198754;


}


.our-technology-section-label::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #198754;

}


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

.our-technology-overview-content h2 {

    max-width: 620px;

    margin: 0 0 22px;

    color: #1e1e1e;



}


.our-technology-overview-content h2 span {

    display: inline;

    color: #198754;

}


/*==================================
        INTRODUCTION
==================================*/

.our-technology-introduction {

    max-width: 620px;

    margin: 0 0 30px;

    color: #252525;


}


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

.our-technology-content-block {

    display: grid;

    grid-template-columns: 42px 1fr;

    gap: 18px;

    max-width: 620px;

    padding-top: 25px;

    border-top: 1px solid #e5ece7;

}


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

.our-technology-content-number {

    display: block;

    color: #198754;


}


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

.our-technology-content-block h3 {

    margin: -4px 0 9px;

    color: #252525;


}


/*==================================
        BLOCK PARAGRAPH
==================================*/

.our-technology-content-block p {

    max-width: 550px;

    margin: 0;

    color: #252525;


}


/*==================================
        BENEFITS
==================================*/

.our-technology-benefits-block {

    max-width: 620px;

    margin-top: 28px;

    padding-top: 25px;

    border-top: 1px solid #e5ece7;

}


.our-technology-benefits-heading {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 18px;

}




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

.our-technology-benefits-list {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px 25px;

}


.our-technology-benefit {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 34px;

}


.our-technology-benefit i {

    width: 30px;

    height: 30px;

    min-width: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #edf8ef;

    color: #198754;

}


.our-technology-benefit span {

    color: #252525;


}


/*==================================
        CTA
==================================*/

.our-technology-overview-cta {

    margin-top: 30px;

}


.our-technology-proposal-btn {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 13px 18px 13px 22px;

    color: #ffffff;

    background: #198754;

    border-radius: 6px;

    text-decoration: none;


    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


.our-technology-proposal-btn i {

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .18);

}


.our-technology-proposal-btn:hover {

    color: #ffffff;

    background: #198754;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(22, 184, 78, .20);

}


/*==================================
        LARGE DESKTOP
==================================*/

@media (max-width: 1199px) {

    .our-technology-overview-section {

        padding: 95px 0;

    }

    .our-technology-overview-image {

        height: 520px;

    }

    .our-technology-overview-content {

        padding-left: 10px;

    }

}


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

@media (max-width: 991px) {

    .our-technology-overview-section {

        padding: 85px 0;

    }

    .our-technology-overview-image-wrap {

        max-width: 700px;

        margin: 0 auto;

    }

    .our-technology-overview-image {

        height: 470px;

    }

    .our-technology-overview-content {

        padding-left: 0;

        max-width: 720px;

        margin: 25px auto 0;

    }


}


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

@media (max-width: 767px) {

    .our-technology-overview-section {

        padding: 70px 0;

    }

    .our-technology-overview-image-wrap {

        padding:
            0 14px 14px 0;

    }

    .our-technology-image-accent {

        width: 90%;

        height: 90%;

        border-radius:
            0 20px 20px 0;

    }

    .our-technology-overview-image {

        height: 380px;

        border-radius: 18px;

    }

    .our-technology-image-caption {

        left: 12px;

        max-width: 285px;

        padding:
            12px 14px;

    }

    .our-technology-caption-icon {

        width: 36px;

        height: 36px;

        min-width: 36px;

    }



    /* Content */

    .our-technology-overview-content {

        margin-top: 15px;

    }

    .our-technology-content-block {

        grid-template-columns: 32px 1fr;

        gap: 12px;

        padding-top: 22px;

    }



    .our-technology-benefits-block {

        padding-top: 22px;

    }

    .our-technology-benefits-heading {

        gap: 12px;

    }


    .our-technology-benefits-list {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .our-technology-overview-cta {

        margin-top: 27px;

    }



}


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

@media (max-width: 576px) {

    .our-technology-overview-section {

        padding: 60px 0;

    }

    .our-technology-overview-section .container {

        padding-left: 17px;

        padding-right: 17px;

    }

    .our-technology-overview-image {

        height: 320px;

        border-radius: 16px;

    }

    .our-technology-image-caption {

        max-width: 255px;

    }



}

/* =========================================================
   TECHNOLOGY OVERVIEW REDESIGN
========================================================= */

.our-technology-overview-section {
    padding: 10px 0 10px !important;
    background:
        radial-gradient(circle at 4% 18%, rgba(25, 135, 84, .08), transparent 24%),
        linear-gradient(135deg, #f7fbf8 0%, #ffffff 54%, #f1f8f3 100%);
}

.our-technology-overview-section .row {
    --bs-gutter-x: 5rem;
    --bs-gutter-y: 3rem;
}

.our-technology-overview-image-wrap {
    padding: 0 34px 34px 0;
}

.our-technology-image-accent {
    right: 0;
    bottom: 0;
    width: 88%;
    height: 88%;
    border-radius: 0 30px 30px 0;
    background: #d9eee0;
}

.our-technology-overview-image {
    height: 510px;
    border: 10px solid #ffffff;
    border-radius: 6px 30px 30px 30px;
    box-shadow: 0 24px 55px rgba(12, 54, 31, .16);
}

.our-technology-overview-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 34, 20, .03) 42%, rgba(4, 34, 20, .62) 100%);
    pointer-events: none;
}

.our-technology-overview-image-wrap:hover .our-technology-overview-image img {
    transform: scale(1.06);
}

.our-technology-image-caption {
    left: 20px;
    bottom: 14px;
    max-width: 350px;
    padding: 14px 17px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-left: 4px solid #198754;
    border-radius: 4px 12px 12px 4px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .14);
}

.our-technology-caption-icon {
    border-radius: 10px;
    background: #e2f4e7;
}

.our-technology-overview-content {
    padding-left: 0;
}

.our-technology-section-label {
    margin-bottom: 15px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #e4f5e9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.our-technology-section-label::before {
    width: 20px;
}

.our-technology-overview-content h2 {
    max-width: 670px;
    margin-bottom: 19px;
    color: #10231a;
    font-size: clamp(32px, 3.4vw, 48px);
    line-height: 1.1;
    letter-spacing: -.03em;
}

.our-technology-overview-content h2 span {
    display: inline;
}

.our-technology-introduction {
    max-width: 650px;
    margin-bottom: 10px;
    color: #000;
    line-height: 1.75;
}

.our-technology-content-block,
.our-technology-benefits-block {
    max-width: 650px;
    padding: 22px 0 0;
    border-top: 1px solid #d9e8dd;
}

.our-technology-content-block {
    grid-template-columns: 48px 1fr;
    gap: 17px;
}

.our-technology-content-number {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: #198754;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.our-technology-content-block h3,
.our-technology-benefits-heading h3 {
    color: #000;
    font-size: 20px;
    line-height: 1.25;
}

.our-technology-content-block p {
    color: #000;
    text-align: justify;
    line-height: 1.7;
}

.our-technology-benefits-block {
    margin-top: 20px;
}

.our-technology-benefits-heading {
    gap: 17px;
    margin-bottom: 15px;
}

.our-technology-benefits-list {
    gap: 10px;
}

.our-technology-benefit {
    min-height: 48px;
    padding: 8px 11px;
    border: 1px solid #dcebe0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.our-technology-benefit:hover {
    transform: translateY(-3px);
    border-color: #9fd3ae;
    box-shadow: 0 8px 18px rgba(25, 135, 84, .1);
}

.our-technology-benefit i {
    border-radius: 8px;
    background: #e4f5e9;
}

.our-technology-benefit span {
    color: #000;
    font-weight: 600;
}

.our-technology-overview-cta {
    margin-top: 27px;
}

.our-technology-proposal-btn {
    gap: 15px;
    padding: 13px 14px 13px 20px;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(25, 135, 84, .18);
}

@media (max-width: 991px) {
    .our-technology-overview-section {
        padding: 72px 0 80px !important;
    }

    .our-technology-overview-section .row {
        --bs-gutter-x: 2rem;
    }

    .our-technology-overview-image {
        height: 440px;
    }

    .our-technology-overview-content {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .our-technology-overview-section {
        padding: 58px 0 68px !important;
    }

    .our-technology-overview-image-wrap {
        padding: 0 16px 16px 0;
    }

    .our-technology-overview-image {
        height: 330px;
        border-width: 7px;
        border-radius: 5px 20px 20px 20px;
    }

    .our-technology-image-caption {
        left: 10px;
        bottom: 7px;
        max-width: 275px;
        padding: 10px 12px;
    }

    .our-technology-overview-content h2 {
        font-size: 34px;
    }

    .our-technology-benefits-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .our-technology-overview-image {
        height: 275px;
    }

    .our-technology-overview-content h2 {
        font-size: 30px;
    }
}

/* =========================================================
   TECHNOLOGY METHOD TILES
========================================================= */

:is(.stp-tech-methods, .bio-tech-methods) {
    padding: 24px 30px 24px 0;
}

:is(.stp-method-list, .bio-method-list) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
}

:is(.stp-method-list, .bio-method-list)>div {
    min-width: 0;
    min-height: 72px;
    padding: 11px 10px;
    border: 1px solid #dcebe0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

:is(.stp-method-list, .bio-method-list)>div:hover {
    transform: translateY(-3px);
    border-color: #9fd3ae;
    box-shadow: 0 8px 18px rgba(25, 135, 84, .1);
}

:is(.stp-method-list, .bio-method-list) strong {
    display: block;
    margin-bottom: 7px;
    color: #163327;
    font-size: 13px;
    line-height: 1.15;
    white-space: normal;
}

:is(.stp-method-list, .bio-method-list) span {
    display: block;
    color: #718078;
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@media (max-width: 991px) {
    :is(.stp-tech-methods, .bio-tech-methods) {
        padding-right: 0;
        border-right: 0;
    }
}

@media (max-width: 575px) {
    :is(.stp-method-list, .bio-method-list) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {

    .our-technology-overview-image {

        height: 280px;

    }



}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .our-technology-overview-image img,
    .our-technology-proposal-btn {

        transition: none;

    }

}
















/*==================================
        STP TECHNOLOGY - P2
==================================*/

.stp-tech-section {
    position: relative;
    padding: 10px 0;
    background: #f5f9f6;
    overflow: hidden;
}


/*==================================
        BACKGROUND
==================================*/

.stp-tech-section::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    top: -250px;
    right: -180px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .035);

    pointer-events: none;
}

.stp-tech-section::after {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -190px;
    left: -150px;

    border-radius: 50%;

    background: rgba(25, 135, 84, .025);

    pointer-events: none;
}


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

.stp-tech-header {
    position: relative;
    z-index: 2;

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

    gap: 35px;

    margin-bottom: 22px;
}

.stp-tech-heading {
    max-width: 650px;
}

.stp-tech-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 7px;

    color: #198754;
}

.stp-tech-label::before {
    content: "";

    width: 24px;
    height: 2px;

    background: #198754;
}

.stp-tech-heading h2 {
    margin: 0;

    color: #1b2921;

    line-height: 1.15;
}

.stp-tech-heading h2 span {
    display: inline;
    color: #198754;
}

.stp-tech-header>p {
    max-width: 360px;

    margin: 0 0 2px;

    color: #000;

    line-height: 1.5;
}


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

.stp-process-box {
    position: relative;
    z-index: 2;

    padding: 16px 20px 18px;

    border: 1px solid #d8e5dc;

    background: rgba(255, 255, 255, .75);

    box-shadow:
        0 8px 25px rgba(31, 62, 44, .035);
}


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

.stp-process-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 11px;

    margin-bottom: 15px;

    border-bottom: 1px solid #e2ebe5;

    color: #198754;
}

.stp-process-top small {
    color: #9aa69f;
}


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

.stp-process-flow {
    display: flex;
    align-items: center;

    width: 100%;
}


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

.stp-process-item {
    flex: 1;

    min-width: 70px;

    text-align: center;
}

.stp-process-number {
    display: block;

    margin-bottom: 5px;

    color: #000;
}

.stp-process-number {
    color: #455249;
}


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

.stp-process-icon {
    width: 40px;
    height: 40px;

    margin: 0 auto 7px;

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

    border: 1px solid #cbdcd1;
    border-radius: 50%;

    background: #ffffff;

    color: #75847a;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.stp-process-item.active .stp-process-icon {
    background: #198754;

    border-color: #198754;

    color: #ffffff;

    box-shadow:
        0 6px 15px rgba(25, 135, 84, .16);
}

.stp-process-item.featured .stp-process-icon {
    background: #ffffff;
    border-color: #cbdcd1;
    color: #75847a;
}

.stp-process-item.final .stp-process-icon {
    background: #ffffff;
    border-color: #cbdcd1;
    color: #75847a;
}

.stp-process-item:hover .stp-process-icon {
    transform: translateY(-3px);

    border-color: #198754;

    color: #198754;
}

.stp-process-item.active:hover .stp-process-icon {
    color: #ffffff;
}


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



.stp-process-item strong {
    color: #000;

}


/*==================================
        ARROWS
==================================*/

.stp-process-arrow {
    flex: 0 0 24px;

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

    color: #a8b5ad;
}


/*==================================
        TECHNOLOGY FACTORS
==================================*/

.stp-tech-factors {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 18px;

    border: 1px solid #dce7df;

    background: #ffffff;
}


/*==================================
        FACTOR
==================================*/

.stp-factor {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 15px 17px;

    border-right: 1px solid #dce7df;
}

.stp-factor:last-child {
    border-right: 0;
}

.stp-factor>span {
    color: #198754;
}

.stp-factor strong {
    display: block;

    margin-bottom: 3px;

    color: #000;
}

.stp-factor small {
    display: block;

    color: #000;
}


/*==================================
        ENGINEERING
==================================*/

.stp-engineering {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 25px;

    padding: 14px 18px;

    border: 1px solid #dce7df;
    border-top: 0;

    background: #f9fbfa;
}

.stp-engineering-label {
    flex-shrink: 0;

    color: #198754;
}

.stp-engineering-flow {
    display: flex;
    align-items: center;

    gap: 9px;

    overflow-x: auto;

    scrollbar-width: none;
}

.stp-engineering-flow::-webkit-scrollbar {
    display: none;
}

.stp-engineering-flow span {
    flex-shrink: 0;

    color: #000;
}

.stp-engineering-flow i {
    flex-shrink: 0;

    color: #a3afa7;
}


/*==================================
        CTA
==================================*/

.stp-tech-cta {
    position: relative;
    z-index: 2;

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

    gap: 25px;

    margin-top: 18px;

    padding: 16px 20px;

    border-radius: 7px;

    background: #198754;
}

.stp-tech-cta>div {
    min-width: 0;
}

.stp-tech-cta>div>span {
    display: block;

    margin-bottom: 3px;

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

.stp-tech-cta strong {
    display: block;

    color: #ffffff;
}

.stp-tech-cta a {
    flex-shrink: 0;

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

    gap: 10px;

    padding: 7px 8px 7px 15px;

    border-radius: 50px;

    background: #ffffff;

    color: #198754;

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.stp-tech-cta a i {
    width: 28px;
    height: 28px;

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

    border-radius: 50%;

    background: #198754;

    color: #ffffff;
}

.stp-tech-cta a:hover {
    color: #198754;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, .12);
}


/*==================================
        LARGE DESKTOP
==================================*/

@media (max-width: 1199px) {

    .stp-tech-section {
        padding: 38px 0;
    }

    .stp-process-item {
        min-width: 65px;
    }

    .stp-process-arrow {
        flex-basis: 19px;
    }

    .stp-factor {
        padding: 14px 12px;
    }

}


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

@media (max-width: 991px) {

    .stp-tech-section {
        padding: 35px 0;
    }

    .stp-tech-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

        margin-bottom: 20px;
    }

    .stp-tech-header>p {
        max-width: 650px;
    }

    .stp-process-box {
        overflow-x: auto;

        scrollbar-width: none;
    }

    .stp-process-box::-webkit-scrollbar {
        display: none;
    }

    .stp-process-flow {
        min-width: 760px;
    }

    .stp-tech-factors {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .stp-factor {
        border-bottom: 1px solid #dce7df;
    }

    .stp-factor:nth-child(2) {
        border-right: 0;
    }

    .stp-factor:nth-child(3),
    .stp-factor:nth-child(4) {
        border-bottom: 0;
    }

    .stp-engineering {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }

}


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

@media (max-width: 767px) {

    .stp-tech-section {
        padding: 32px 0;
    }

    .stp-tech-section .container {
        padding-left: 17px;
        padding-right: 17px;
    }

    .stp-tech-header {
        margin-bottom: 18px;
    }

    .stp-process-box {
        margin-left: -17px;
        margin-right: -17px;

        padding:
            14px 17px 16px;
    }

    .stp-process-flow {
        min-width: 720px;
    }

    .stp-process-icon {
        width: 38px;
        height: 38px;
    }

    .stp-process-item {
        min-width: 62px;
    }

    .stp-process-arrow {
        flex-basis: 17px;
    }

    .stp-tech-factors {
        margin-top: 15px;
    }

    .stp-factor {
        padding: 13px 12px;
    }

    .stp-engineering {
        padding: 13px 15px;
    }

    .stp-tech-cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

        padding: 16px;
    }

    .stp-tech-cta a {
        width: 100%;

        justify-content: space-between;
    }

}


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

@media (max-width: 576px) {

    .stp-tech-section {
        padding: 28px 0;
    }

    .stp-tech-heading h2 {
        line-height: 1.2;
    }

    .stp-process-flow {
        min-width: 680px;
    }

    .stp-process-icon {
        width: 36px;
        height: 36px;
    }

    .stp-process-item {
        min-width: 58px;
    }

    .stp-process-arrow {
        flex-basis: 15px;
    }

    .stp-tech-factors {
        grid-template-columns: 1fr;
    }

    .stp-factor,
    .stp-factor:nth-child(2),
    .stp-factor:nth-child(3),
    .stp-factor:nth-child(4) {
        border-right: 0;
        border-bottom: 1px solid #dce7df;
    }

    .stp-factor:last-child {
        border-bottom: 0;
    }

    .stp-tech-cta {
        padding: 15px;
    }

}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {

    .stp-tech-section {
        padding: 25px 0;
    }

    .stp-process-box {
        padding-left: 15px;
        padding-right: 15px;
    }

    .stp-process-flow {
        min-width: 650px;
    }

    .stp-tech-factors {
        margin-top: 12px;
    }

}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .stp-process-icon,
    .stp-tech-cta a {
        transition: none;
    }

}








/*==================================
        STP FAQ SECTION
==================================*/

.stp-faq-section {

    position: relative;

    padding: 100px 0;

    background: #ffffff;

    overflow: hidden;

}


/*==================================
        FAQ WRAPPER
==================================*/

.stp-faq-wrapper {

    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

}


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

.stp-faq-intro {

    max-width: 720px;

    margin: 0 auto 55px;

    text-align: center;

}


.stp-faq-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-bottom: 14px;

    color: #198754;


}


.stp-faq-label::before,
.stp-faq-label::after {

    content: "";

    width: 25px;

    height: 2px;

    background: #198754;

}


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

.stp-faq-intro h2 {

    margin: 0 0 18px;

    color: #1c2921;



}


.stp-faq-intro h2 span {

    display: inline;

    color: #198754;

}


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

.stp-faq-intro p {

    max-width: 620px;

    margin: 0 auto;

    color: #000000;
    text-align: center;


}


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

.stp-faq-list {

    width: 100%;

    border-top: 1px solid #dce6df;

}


/*==================================
        FAQ ITEM
==================================*/

.stp-faq-item {

    width: 100%;

    border-bottom: 1px solid #dce6df;

}


/*==================================
        FAQ QUESTION
==================================*/

.stp-faq-question {

    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        55px minmax(0, 1fr) 42px;

    align-items: center;

    gap: 15px;

    padding:
        25px 5px;

    border: 0;

    outline: none;

    background: transparent;

    color: #27332c;

    text-align: left;

    cursor: pointer;

}


/*==================================
        FAQ NUMBER
==================================*/

.stp-faq-number {

    display: block;

    color: #198754;



}


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

.stp-faq-title {

    display: block;

    color: #29362e;


    transition:
        color .3s ease;

}


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

.stp-faq-icon {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: auto;

    border: 1px solid #d5e1d9;

    border-radius: 50%;

    background: transparent;

    color: #198754;


    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;

}


.stp-faq-icon i {

    display: block;

    transition:
        transform .35s ease;

}


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

.stp-faq-question:hover .stp-faq-title {

    color: #198754;

}


.stp-faq-question:hover .stp-faq-icon {

    border-color: #198754;

}


/*==================================
        ACTIVE QUESTION
==================================*/

.stp-faq-item.active .stp-faq-title {

    color: #198754;

}


.stp-faq-item.active .stp-faq-icon {

    background: #198754;

    border-color: #198754;

    color: #ffffff;

}


/*
    Plus icon becomes an X
*/

.stp-faq-item.active .stp-faq-icon i {

    transform: rotate(45deg);

}


/*==================================
        FAQ ANSWER

        IMPORTANT:
        JS controls max-height
==================================*/

.stp-faq-answer {

    width: 100%;

    max-height: 0;

    overflow: hidden;

    transition:
        max-height .45s ease;

}


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

.stp-faq-answer p {

    max-width: 820px;

    margin: 0;

    padding:
        0 60px 0 75px;

    color: #000000;
    font-weight: 200;


}


/*==================================
        ACTIVE ANSWER

        Padding appears only
        when FAQ is active
==================================*/

.stp-faq-item.active .stp-faq-answer p {

    padding-bottom: 25px;

}


/*==================================
        ACCESSIBILITY
==================================*/

.stp-faq-question:focus-visible {

    outline:
        2px solid #198754;

    outline-offset:
        -2px;

}


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

@media (max-width: 991px) {

    .stp-faq-section {

        padding: 85px 0;

    }


    .stp-faq-wrapper {

        max-width: 850px;

    }





    .stp-faq-question {

        padding:
            23px 5px;

    }

}


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

@media (max-width: 767px) {

    .stp-faq-section {

        padding: 70px 0;

    }


    .stp-faq-intro {

        margin-bottom: 40px;

        text-align: left;

    }


    .stp-faq-label {

        justify-content: flex-start;


    }


    .stp-faq-label::after {

        display: none;

    }




    .stp-faq-intro p {

        max-width: 100%;


    }


    /*==============================
            QUESTION
    ==============================*/

    .stp-faq-question {

        grid-template-columns:
            38px minmax(0, 1fr) 38px;

        gap: 10px;

        padding:
            20px 0;

    }





    .stp-faq-icon {

        width: 32px;

        height: 32px;

    }


    /*==============================
            ANSWER
    ==============================*/

    .stp-faq-answer p {

        max-width: 100%;

        padding:
            0 45px 0 48px;


    }


    .stp-faq-item.active .stp-faq-answer p {

        padding-bottom: 22px;

    }

}


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

@media (max-width: 576px) {

    .stp-faq-section {

        padding: 60px 0;

    }


    .stp-faq-section .container {

        padding-left: 17px;

        padding-right: 17px;

    }




    /*==============================
            QUESTION
    ==============================*/

    .stp-faq-question {

        grid-template-columns:
            30px minmax(0, 1fr) 34px;

        gap: 8px;

        padding:
            18px 0;

    }




    .stp-faq-icon {

        width: 30px;

        height: 30px;

    }


    /*==============================
            ANSWER
    ==============================*/

    .stp-faq-answer p {

        padding:
            0 35px 0 38px;


    }


    .stp-faq-item.active .stp-faq-answer p {

        padding-bottom: 20px;

    }

}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {



    .stp-faq-question {

        grid-template-columns:
            25px minmax(0, 1fr) 30px;

    }





    .stp-faq-icon {

        width: 28px;

        height: 28px;

    }


    .stp-faq-answer p {

        padding-left: 33px;

        padding-right: 30px;

    }

}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .stp-faq-answer,
    .stp-faq-icon,
    .stp-faq-icon i,
    .stp-faq-title {

        transition: none;

    }

}























/*==================================
        BIO SEPTIC TECHNOLOGY
==================================*/

.bio-tech-section {
    position: relative;
    padding: 70px 0;
    background: #f6faf7;
    overflow: hidden;
}

.bio-tech-section::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    top: -280px;
    right: -180px;
    border-radius: 50%;
    background: rgba(25, 135, 84, .045);
    pointer-events: none;
}

.bio-tech-section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    bottom: -220px;
    left: -160px;
    border-radius: 50%;
    background: rgba(25, 135, 84, .035);
    pointer-events: none;
}


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

.bio-tech-header {
    position: relative;
    z-index: 2;
    margin-bottom: 35px;
}

.bio-tech-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: #198754;
}

.bio-tech-label::before {
    content: "";
    width: 27px;
    height: 2px;
    background: #198754;
}

.bio-tech-header h2 {
    max-width: 850px;
    margin: 0;
    color: #1c2921;
}

.bio-tech-header h2 span {
    color: #198754;
}


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

.bio-process-area {
    position: relative;
    z-index: 2;
    padding: 22px 25px 25px;
    border-top: 1px solid #dbe7df;
    border-bottom: 1px solid #dbe7df;
    background: rgba(255, 255, 255, .60);
}

.bio-process-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    color: #7a857d;
}

.bio-process-title>div {
    flex: 1;
    height: 1px;
    background: #dce7df;
}

.bio-process-flow {
    display: flex;
    align-items: center;
    width: 100%;
}

.bio-process-item {
    flex: 1;
    min-width: 75px;
    text-align: center;
}

.bio-process-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfe0d5;
    border-radius: 50%;
    background: #ffffff;
    color: #829188;
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.bio-process-item.active .bio-process-icon {
    background: #198754;
    border-color: #198754;
    color: #ffffff;
    box-shadow: 0 7px 18px rgba(25, 135, 84, .18);
}

.bio-process-item.final .bio-process-icon {
    background: #eaf8ee;
    border-color: #9fd4ad;
    color: #198754;
}

.bio-process-item:hover .bio-process-icon {
    transform: translateY(-3px);
    border-color: #198754;
    color: #198754;
}

.bio-process-item.active:hover .bio-process-icon {
    color: #ffffff;
}

.bio-process-item strong {
    display: block;
    color: #46534b;
}

.bio-process-item.active strong {
    color: #198754;
}


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

.bio-process-arrow {
    flex: 0 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a5b4aa;
}


/*==================================
        BOTTOM AREA
==================================*/

.bio-tech-bottom {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    margin-top: 30px;
    border-top: 1px solid #dce7df;
    border-bottom: 1px solid #dce7df;
}

.bio-bottom-label {
    display: block;
    margin-bottom: 15px;
    color: #198754;
}


/*==================================
        TECHNOLOGY HIGHLIGHTS
==================================*/

.bio-tech-methods {
    padding: 22px 30px 22px 0;
    border-right: 1px solid #dce7df;
}

.bio-method-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.bio-method-list>div {
    min-width: 0;
}

.bio-method-list strong {
    display: block;
    margin-bottom: 4px;
    color: #26342b;
}

.bio-method-list span {
    display: block;
    color: #89938d;
}


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

.bio-engineering {
    padding: 22px 0 22px 30px;
}

.bio-engineering-flow {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.bio-engineering-flow::-webkit-scrollbar {
    display: none;
}

.bio-engineering-flow span {
    flex-shrink: 0;
    color: #46534b;
}

.bio-engineering-flow i {
    flex-shrink: 0;
    color: #9cab9f;
}


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

.bio-tech-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 25px;
    padding: 18px 22px;
    border-radius: 7px;
    background: #198754;
}

.bio-tech-footer>span {
    display: block;
    margin-bottom: 4px;
    color: #198754;
}

.bio-tech-footer strong {
    display: block;
    color: #ffffff;
}

.bio-tech-footer a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px 10px 16px;
    border-radius: 5px;
    background: #198754;
    color: #ffffff;
    text-decoration: none;
    transition:
        background .3s ease,
        transform .3s ease;
}

.bio-tech-footer a i {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}

.bio-tech-footer a:hover {
    color: #ffffff;
    background: #198754;
    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    .bio-tech-section {
        padding: 65px 0;
    }

    .bio-tech-header {
        margin-bottom: 30px;
    }


    .bio-process-area {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .bio-process-area::-webkit-scrollbar {
        display: none;
    }

    .bio-process-flow {
        min-width: 700px;
    }

    .bio-tech-bottom {
        grid-template-columns: 1fr;
    }

    .bio-tech-methods {
        padding: 22px 0;
        border-right: 0;
        border-bottom: 1px solid #dce7df;
    }

    .bio-engineering {
        padding: 22px 0;
    }
}


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

@media (max-width: 767px) {

    .bio-tech-section {
        padding: 55px 0;
    }

    .bio-tech-section .container {
        padding-left: 17px;
        padding-right: 17px;
    }

    .bio-tech-header {
        margin-bottom: 25px;
    }



    .bio-process-area {
        margin-left: -17px;
        margin-right: -17px;
        padding: 20px 17px 23px;
    }

    .bio-process-flow {
        min-width: 680px;
    }

    .bio-process-item {
        min-width: 65px;
    }

    .bio-process-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 7px;
    }



    .bio-process-arrow {
        flex-basis: 18px;
    }

    .bio-tech-methods {
        padding: 20px 0;
    }

    .bio-method-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 17px 15px;
    }



    .bio-engineering {
        padding: 20px 0;
    }

    .bio-engineering-flow {
        gap: 7px;
    }



    .bio-tech-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        padding: 20px 17px;
    }

}


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

@media (max-width: 576px) {

    .bio-tech-section {
        padding: 50px 0;
    }


    .bio-process-flow {
        min-width: 630px;
    }

    .bio-process-item {
        min-width: 60px;
    }

    .bio-process-icon {
        width: 37px;
        height: 37px;
    }


}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {



    .bio-method-list {
        grid-template-columns: repeat(2, 1fr);
    }
}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .bio-process-icon,
    .bio-tech-footer a {
        transition: none;
    }

}





























/*==================================
        CONTACT SUB BANNER
==================================*/

.contact-sub-banner {

    position: relative;

    width: 100%;

    min-height: 500px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: #198754;

}


/*==================================
        CONTACT BANNER IMAGE
==================================*/

.contact-banner-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-image:
        url("../home-img/contact-banner.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    z-index: 0;

}


/*==================================
        CONTACT OVERLAY
==================================*/

.contact-sub-banner .our-technology-banner-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(2, 42, 27, .94) 0%,
            rgba(3, 56, 34, .84) 30%,
            rgba(4, 58, 35, .55) 55%,
            rgba(4, 58, 35, .20) 78%,
            rgba(4, 58, 35, .08) 100%);

}


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

.contact-sub-banner .container {

    position: relative;

    z-index: 2;

}


.contact-sub-banner .our-technology-banner-content {

    max-width: 850px;

    padding:
        70px 0 65px;

}


/*==================================
        BREADCRUMB
==================================*/

.contact-sub-banner .our-technology-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 24px;

    color: rgba(255, 255, 255, .8);


}


.contact-sub-banner .our-technology-breadcrumb a {

    color: rgba(255, 255, 255);

    text-decoration: none;

    transition: color .3s ease;

}


.contact-sub-banner .our-technology-breadcrumb a:hover {

    color: #198754;

}


.contact-sub-banner .our-technology-breadcrumb span {

    color: rgba(255, 255, 255);

}


.contact-sub-banner .our-technology-breadcrumb strong {

    color: #ffffff;

}


/*==================================
        PRODUCT BADGE
==================================*/

.contact-sub-banner .our-technology-product-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 15px;

    margin-bottom: 18px;

    border: 1px solid rgba(255, 255, 255, .30);

    border-radius: 30px;

    background: rgba(255, 255, 255, .08);

    color: #ffffff;


    backdrop-filter: blur(6px);

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

}


.contact-sub-banner .our-technology-badge-line {

    width: 20px;

    height: 2px;

    background: #198754;

}


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

.contact-sub-banner .our-technology-banner-content h1 {

    max-width: 750px;

    margin: 0;

    color: #ffffff;



}


.contact-sub-banner .our-technology-banner-content h1 span {

    display: inline;

    color: #198754;

}


/*==================================
        PRODUCT BITES
==================================*/

.contact-sub-banner .our-technology-bites {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;

}


.contact-sub-banner .our-technology-bite {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 42px;

    padding: 8px 14px;

    border: 1px solid rgba(255, 255, 255, .20);

    border-radius: 6px;

    background: rgba(0, 0, 0, .18);

    color: #ffffff;


    backdrop-filter: blur(5px);

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

}


.contact-sub-banner .our-technology-bite i {

    flex-shrink: 0;

    color: #198754;

}


/*==================================
        LARGE DESKTOP
==================================*/

@media (min-width: 1400px) {

    .contact-sub-banner {

        min-height: 520px;

    }

    .contact-sub-banner .our-technology-banner-content {

        padding: 80px 0 70px;

    }

}


/*==================================
        LAPTOP
==================================*/

@media (max-width: 1199px) {

    .contact-sub-banner {

        min-height: 480px;

    }

    .contact-sub-banner .our-technology-banner-content {

        max-width: 760px;

        padding: 65px 0 60px;

    }

}


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

@media (max-width: 991px) {

    .contact-sub-banner {

        min-height: 450px;

    }

    .contact-banner-image {

        background-position: center center;

    }

    .contact-sub-banner .our-technology-banner-overlay {

        background:
            linear-gradient(90deg,
                rgba(2, 42, 27, .94) 0%,
                rgba(3, 56, 34, .82) 45%,
                rgba(4, 58, 35, .35) 100%);

    }

    .contact-sub-banner .our-technology-banner-content {

        padding: 60px 0 55px;

    }

}


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

@media (max-width: 767px) {

    .contact-sub-banner {

        min-height: 500px;

    }

    .contact-banner-image {

        background-position: 68% center;

    }

    .contact-sub-banner .our-technology-banner-overlay {

        background:
            linear-gradient(90deg,
                rgba(2, 38, 25, .96) 0%,
                rgba(3, 52, 32, .90) 50%,
                rgba(4, 58, 35, .60) 100%);

    }

    .contact-sub-banner .our-technology-banner-content {

        width: 100%;

        padding: 55px 15px 50px;

    }

    .contact-sub-banner .our-technology-breadcrumb {

        margin-bottom: 20px;

    }

    .contact-sub-banner .our-technology-product-badge {

        padding: 7px 12px;

        margin-bottom: 15px;


    }

    .contact-sub-banner .our-technology-bites {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        margin-top: 22px;

    }

    .contact-sub-banner .our-technology-bite {

        min-height: 40px;

        padding: 7px 12px;

    }

}


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

@media (max-width: 576px) {

    .contact-sub-banner {

        min-height: 480px;

    }

    .contact-banner-image {

        background-position: 70% center;

    }

    .contact-sub-banner .our-technology-banner-content {

        padding: 45px 10px 40px;

    }


    .contact-sub-banner .our-technology-product-badge {

        padding: 7px 10px;

    }


    .contact-sub-banner .our-technology-bite {

        min-height: 37px;

        padding: 6px 10px;

    }



}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {

    .contact-sub-banner {

        min-height: 460px;

    }



}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .contact-sub-banner .our-technology-breadcrumb a {

        transition: none;

    }

}

























/*==================================
        CONTACT ? LET'S CONNECT
==================================*/

.contact-connect-section {

    position: relative;

    padding: 28px 0;

    background: #ffffff;

    overflow: hidden;

}


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

.contact-connect-wrapper {

    max-width: 1100px;

    margin: 0 auto;

}


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

.contact-connect-intro {

    max-width: 700px;

    margin-bottom: 50px;

}


.contact-section-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color: #198754;


}


.contact-section-label::before {

    content: "";

    width: 28px;

    height: 2px;

    background: #198754;

}


.contact-connect-intro h2 {

    margin: 0 0 17px;

    color: #1c2921;



}


.contact-connect-intro h2 span {

    color: #198754;

}


.contact-connect-intro p {

    max-width: 620px;

    margin: 0;

    color: #000000;


}


/*==================================
        CONTACT DETAILS
==================================*/

.contact-connect-details {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    border-top: 1px solid #dce6df;

}


/*==================================
        CONTACT ITEM
==================================*/

.contact-connect-item {

    position: relative;

    display: grid;

    grid-template-columns: 48px 1fr 36px;

    align-items: center;

    gap: 17px;

    min-height: 145px;

    padding: 25px 25px 25px 0;

    border-bottom: 1px solid #dce6df;

}


.contact-connect-item:nth-child(odd) {

    padding-right: 30px;

    border-right: 1px solid #dce6df;

}


.contact-connect-item:nth-child(even) {

    padding-left: 30px;

}


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

.contact-connect-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #edf8ef;

    color: #198754;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.contact-connect-item:hover .contact-connect-icon {

    background: #198754;

    color: #ffffff;

    transform: translateY(-3px);

}


/*==================================
        LABEL
==================================*/

.contact-connect-item>div:nth-child(2)>span {

    display: block;

    margin-bottom: 6px;

    color: #198754;


}


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

.contact-connect-item h3 {

    margin: 0 0 5px;

    color: #29362e;


}


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

.contact-connect-item p {

    max-width: 390px;

    margin: 0;

    color: #7a847d;


}


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

.contact-connect-item>a {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #d5e1d9;

    border-radius: 50%;

    color: #198754;

    text-decoration: none;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.contact-connect-item>a:hover {

    background: #198754;

    border-color: #198754;

    color: #ffffff;

    transform: translateY(-2px);

}


/*==================================
        CTA
==================================*/

.contact-connect-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 35px;

    padding: 22px 25px;

    border-radius: 7px;

    background: #198754;

}


.contact-connect-cta span {

    display: block;

    margin-bottom: 5px;

    color: #198754;


}


.contact-connect-cta strong {

    display: block;

    color: #ffffff;


}


.contact-connect-cta a {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 13px 10px 17px;

    border-radius: 5px;

    background: #198754;

    color: #ffffff;

    text-decoration: none;


    transition:
        background .3s ease,
        transform .3s ease;

}


.contact-connect-cta a i {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .18);

}


.contact-connect-cta a:hover {

    color: #ffffff;

    background: #198754;

    transform: translateY(-2px);

}


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

@media (max-width: 991px) {

    .contact-connect-section {

        padding: 80px 0;

    }

    .contact-connect-intro {

        margin-bottom: 40px;

    }

    .contact-connect-item {

        grid-template-columns:
            44px 1fr 34px;

        gap: 14px;

        min-height: 135px;

    }

    .contact-connect-item:nth-child(odd) {

        padding-right: 20px;

    }

    .contact-connect-item:nth-child(even) {

        padding-left: 20px;

    }

}


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

@media (max-width: 767px) {

    .contact-connect-section {

        padding: 70px 0;

    }

    .contact-connect-section .container {

        padding-left: 17px;

        padding-right: 17px;

    }

    .contact-connect-intro {

        margin-bottom: 35px;

    }




    /* Contact list */

    .contact-connect-details {

        grid-template-columns: 1fr;

    }

    .contact-connect-item {

        grid-template-columns:
            42px minmax(0, 1fr) 34px;

        min-height: 120px;

        padding: 20px 0 !important;

        border-right: 0 !important;

    }

    .contact-connect-icon {

        width: 42px;

        height: 42px;

    }




    /* CTA */

    .contact-connect-cta {

        align-items: flex-start;

        flex-direction: column;

        gap: 17px;

        padding: 20px 18px;

    }


}


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

@media (max-width: 576px) {

    .contact-connect-section {

        padding: 60px 0;

    }

    .contact-connect-section .container {

        padding-left: 17px;

        padding-right: 17px;

    }



    .contact-connect-item {

        grid-template-columns:
            38px minmax(0, 1fr) 30px;

        gap: 11px;

    }

    .contact-connect-icon {

        width: 38px;

        height: 38px;

    }


    .contact-connect-item>a {

        width: 30px;

        height: 30px;

    }

}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {



    .contact-connect-item {

        grid-template-columns:
            35px minmax(0, 1fr) 28px;

        gap: 9px;

    }

    .contact-connect-icon {

        width: 35px;

        height: 35px;

    }



}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .contact-connect-icon,
    .contact-connect-item>a,
    .contact-connect-cta a {

        transition: none;

    }

}






























/*==================================
        CONTACT ? LET'S CONNECT
==================================*/

.contact-connect-section {

    position: relative;

    padding: 28px 0;

    background: #ffffff;

    overflow: hidden;

}


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

.contact-connect-intro {

    max-width: 720px;

    margin-bottom: 55px;

}


.contact-section-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #198754;


}


.contact-section-label::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #198754;

}


.contact-connect-intro h2 {

    margin: 0 0 18px;

    color: #1c2921;



}


.contact-connect-intro h2 span {

    color: #198754;

}


.contact-connect-intro p {

    max-width: 620px;

    margin: 0;

    color: #000000;


}


/*==================================
        MAIN LAYOUT
==================================*/

.contact-connect-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr) minmax(300px, .75fr);

    gap: 70px;

    align-items: stretch;

}


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

.contact-connect-list {

    border-top: 1px solid #dce6df;

}


/*==================================
        CONTACT ITEM
==================================*/

.contact-connect-item {

    position: relative;

    display: grid;

    grid-template-columns:
        42px 48px minmax(0, 1fr) 38px;

    align-items: center;

    gap: 18px;

    min-height: 135px;

    padding: 22px 0;

    border-bottom: 1px solid #dce6df;

    color: inherit;

    text-decoration: none;

    background: transparent;

    transition:
        padding .35s ease,
        background .35s ease;

}


.contact-connect-item:hover {

    color: inherit;

    text-decoration: none;

    padding-left: 12px;

    padding-right: 12px;

    background: #f7fbf8;

}


/*==================================
        NUMBER
==================================*/

.contact-connect-number {

    align-self: start;

    padding-top: 4px;

    color: #9ba8a0;



    transition:
        color .3s ease;

}


.contact-connect-item:hover .contact-connect-number {

    color: #198754;

}


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

.contact-connect-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #d9e5dc;

    border-radius: 50%;

    background: #ffffff;

    color: #198754;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.contact-connect-item:hover .contact-connect-icon {

    border-color: #198754;

    background: #198754;

    color: #ffffff;

    transform: translateY(-3px);

}


/*==================================
        INFO
==================================*/

.contact-connect-info {

    min-width: 0;

}


/*==================================
        LABEL
==================================*/

.contact-connect-label {

    display: block;

    margin-bottom: 6px;

    color: #198754;


}


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

.contact-connect-info h3 {

    margin: 0 0 5px;

    color: #26342b;


    transition:
        color .3s ease;

}


.contact-connect-item:hover .contact-connect-info h3 {

    color: #198754;

}


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

.contact-connect-info p {

    max-width: 550px;

    margin: 0;

    color: #7b857e;


}


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

.contact-connect-arrow {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: auto;

    border: 1px solid #d5e1d9;

    border-radius: 50%;

    color: #198754;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;

}


.contact-connect-item:hover .contact-connect-arrow {

    border-color: #198754;

    background: #198754;

    color: #ffffff;

    transform: translate(3px, -3px);

}


/*==================================
        RIGHT VISUAL
==================================*/

.contact-connect-visual {

    position: relative;

    min-height: 540px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 45px;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            #198754 0%,
            #198754 55%,
            #0c7447 100%);

}


/*==================================
        VISUAL DECORATION
==================================*/

.contact-connect-visual::before {

    content: "";

    position: absolute;

    width: 360px;

    height: 360px;

    top: -150px;

    right: -150px;

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 50%;

}


.contact-connect-visual::after {

    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    top: -85px;

    right: -85px;

    border: 1px solid rgba(255, 255, 255, .10);

    border-radius: 50%;

}


/*==================================
        VISUAL LINE
==================================*/

.contact-connect-visual-line {

    position: absolute;

    top: 0;

    left: 45px;

    width: 1px;

    height: 80px;

    background: #198754;

}


/*==================================
        VISUAL LABEL
==================================*/

.contact-connect-visual-label {

    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 18px;

    color: #198754;


}


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

.contact-connect-visual h3 {

    position: relative;

    z-index: 2;

    max-width: 340px;

    margin: 0 0 18px;

    color: #ffffff;



}


.contact-connect-visual h3 span {

    display: block;

    color: #198754;

}


/*==================================
        VISUAL PARAGRAPH
==================================*/

.contact-connect-visual p {

    position: relative;

    z-index: 2;

    max-width: 340px;

    margin: 0;

    color: rgba(255, 255, 255, .72);


}


/*==================================
        VISUAL MARK
==================================*/

.contact-connect-visual-mark {

    position: absolute;

    right: 35px;

    top: 35px;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, .20);

    border-radius: 50%;

    color: #ffffff;

}


/*==================================
        CTA
==================================*/

.contact-connect-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 35px;

    padding: 22px 25px;

    background: #198754;

}


.contact-connect-cta span {

    display: block;

    margin-bottom: 5px;

    color: #198754;


}


.contact-connect-cta strong {

    display: block;

    color: #ffffff;


}


.contact-connect-cta a {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 13px 10px 17px;

    border-radius: 5px;

    background: #198754;

    color: #ffffff;

    text-decoration: none;


    transition:
        background .3s ease,
        transform .3s ease;

}


.contact-connect-cta a i {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .18);

}


.contact-connect-cta a:hover {

    color: #ffffff;

    background: #198754;

    transform: translateY(-2px);

}


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

@media (max-width: 1199px) {

    .contact-connect-layout {

        gap: 45px;

        grid-template-columns:
            minmax(0, 1.45fr) minmax(280px, .75fr);

    }


    .contact-connect-visual {

        padding: 35px;

        min-height: 510px;

    }



}


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

@media (max-width: 991px) {

    .contact-connect-section {

        padding: 85px 0;

    }


    .contact-connect-intro {

        margin-bottom: 45px;

    }


    .contact-connect-layout {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .contact-connect-visual {

        min-height: 300px;

        padding: 35px;

    }





    .contact-connect-visual p {

        max-width: 500px;

    }


    .contact-connect-visual-line {

        left: 35px;

    }

}


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

@media (max-width: 767px) {

    .contact-connect-section {

        padding: 70px 0;

    }


    .contact-connect-section .container {

        padding-left: 17px;

        padding-right: 17px;

    }


    .contact-connect-intro {

        margin-bottom: 35px;

    }



    /* Contact item */

    .contact-connect-item {

        grid-template-columns:
            30px 42px minmax(0, 1fr) 32px;

        gap: 10px;

        min-height: 115px;

        padding: 18px 0;

    }


    .contact-connect-item:hover {

        padding-left: 7px;

        padding-right: 7px;

    }




    .contact-connect-icon {

        width: 40px;

        height: 40px;

    }





    .contact-connect-arrow {

        width: 31px;

        height: 31px;

    }


    /* Visual */

    .contact-connect-visual {

        min-height: 300px;

        padding: 30px;

    }



    .contact-connect-visual-mark {

        width: 45px;

        height: 45px;

        right: 25px;

        top: 25px;

    }


    /* CTA */

    .contact-connect-cta {

        align-items: flex-start;

        flex-direction: column;

        gap: 17px;

        padding: 20px 18px;

    }

}


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

@media (max-width: 576px) {

    .contact-connect-section {

        padding: 60px 0;

    }




    .contact-connect-item {

        grid-template-columns:
            25px 38px minmax(0, 1fr) 30px;

        gap: 8px;

    }


    .contact-connect-icon {

        width: 37px;

        height: 37px;

    }




    .contact-connect-arrow {

        width: 29px;

        height: 29px;

    }


    .contact-connect-visual {

        min-height: 280px;

        padding: 25px;

    }





    .contact-connect-visual-line {

        left: 25px;

        height: 60px;

    }



}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {




    .contact-connect-item {

        grid-template-columns:
            22px 35px minmax(0, 1fr) 28px;

        gap: 7px;

    }


    .contact-connect-icon {

        width: 34px;

        height: 34px;

    }





    .contact-connect-visual {

        min-height: 260px;

    }



}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .contact-connect-item,
    .contact-connect-icon,
    .contact-connect-arrow,
    .contact-connect-cta a {

        transition: none;

    }

}




























/*==================================
        CONTACT ? LET'S CONNECT
==================================*/

.contact-connect-section {

    position: relative;

    padding: 28px 0;

    background: #ffffff;

    overflow: hidden;

}


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

.contact-connect-wrapper {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 90px;

    align-items: center;

}


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

.contact-connect-intro {

    position: relative;

    /* min-height: 430px; */

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 50px 0;

}


.contact-section-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #198754;


}


.contact-section-label::before {

    content: "";

    width: 32px;

    height: 2px;

    background: #198754;

}


.contact-connect-intro h2 {

    max-width: 520px;

    margin: 0 0 22px;

    color: #17241c;



}


.contact-connect-intro h2 span {

    display: block;

    color: #198754;

}


.contact-connect-intro p {

    max-width: 460px;

    margin: 0;

    color: #000000;


}


/*==================================
        DECORATIVE MARK
==================================*/

.contact-connect-mark {

    /* position: absolute; */

    right: 40px;

    bottom: 15px;

    width: 150px;

    height: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #dce9df;

    border-radius: 50%;

}


.contact-connect-mark::before {

    content: "";

    position: absolute;

    width: 105px;

    height: 105px;

    border: 1px solid #e5eee8;

    border-radius: 50%;

}


.contact-connect-mark span {

    position: absolute;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #198754;

}


.contact-connect-mark i {

    position: relative;

    z-index: 2;

    color: #ffffff;

}


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

.contact-connect-content {

    border-top: 1px solid #dce6df;

}


/*==================================
        CONTACT ROW
==================================*/

.contact-connect-row {

    display: grid;

    grid-template-columns:
        52px minmax(0, 1fr) 35px;

    align-items: center;

    gap: 20px;

    min-height: 105px;

    padding: 18px 0;

    border-bottom: 1px solid #dce6df;

    color: inherit;

    text-decoration: none;

    transition:
        padding .35s ease,
        background .35s ease;

}


.contact-connect-row:hover {

    color: inherit;

    text-decoration: none;

    padding-left: 18px;

    padding-right: 12px;

    background: #f6faf7;

}


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

.contact-connect-row-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #d5e4d9;

    border-radius: 50%;

    background: #ffffff;

    color: #198754;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.contact-connect-row:hover .contact-connect-row-icon {

    background: #198754;

    border-color: #198754;

    color: #ffffff;

    transform: translateY(-2px);

}


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

.contact-connect-row-content {

    min-width: 0;

}


.contact-connect-row-content small {

    display: block;

    margin-bottom: 6px;

    color: #198754;
    font-weight: 700;


}


.contact-connect-row-content strong {

    display: block;

    overflow: hidden;

    color: #26342b;


    text-overflow: ellipsis;

    white-space: nowrap;

    transition:
        color .3s ease;

}


.contact-connect-row:hover .contact-connect-row-content strong {

    color: #198754;

}


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

.contact-connect-row-arrow {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #d5e1d9;

    border-radius: 50%;

    color: #198754;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.contact-connect-row:hover .contact-connect-row-arrow {

    background: #198754;

    border-color: #198754;

    color: #ffffff;

    transform: translate(3px, -3px);

}


/*==================================
        LOCATION
==================================*/

.contact-connect-location {

    position: relative;

    display: grid;

    grid-template-columns:
        58px 1fr auto;

    align-items: center;

    gap: 25px;

    margin-top: 60px;

    padding: 28px 32px;

    background: #198754;

    color: #ffffff;

    text-decoration: none;

    overflow: hidden;

    transition:
        background .3s ease;

}


.contact-connect-location:hover {

    color: #ffffff;

    text-decoration: none;

    background: #198754;

}


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

.contact-connect-location-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, .20);

    border-radius: 50%;

    color: #198754;

}


/*==================================
        LOCATION INFO
==================================*/

.contact-connect-location-info small {

    display: block;

    margin-bottom: 5px;

    color: #198754;


}


.contact-connect-location-info strong {

    display: block;

    margin-bottom: 4px;

    color: #ffffff;


}


.contact-connect-location-info p {

    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, .65);


}


/*==================================
        LOCATION ACTION
==================================*/

.contact-connect-location-action {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;


    white-space: nowrap;

}


.contact-connect-location-action i {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #198754;

    transition:
        transform .3s ease;

}


.contact-connect-location:hover .contact-connect-location-action i {

    transform: translate(3px, -3px);

}


/*==================================
        CTA
==================================*/

.contact-connect-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 25px;

    padding: 20px 25px;

    border: 1px solid #dce6df;

    background: #f7faf8;

}


.contact-connect-cta small {

    display: block;

    margin-bottom: 5px;

    color: #198754;


}


.contact-connect-cta strong {

    color: #26342b;


}


.contact-connect-cta>a {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 13px 10px 17px;

    border-radius: 5px;

    background: #198754;

    color: #ffffff;

    text-decoration: none;


    transition:
        background .3s ease,
        transform .3s ease;

}


.contact-connect-cta>a i {

    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .18);

}


.contact-connect-cta>a:hover {

    color: #ffffff;

    background: #198754;

    transform: translateY(-2px);

}


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

@media (max-width: 991px) {

    .contact-connect-section {

        padding: 85px 0;

    }


    .contact-connect-wrapper {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .contact-connect-intro {

        min-height: auto;

        padding: 0;

    }


    .contact-connect-mark {

        right: 10px;

        bottom: -35px;

    }


    .contact-connect-location {

        margin-top: 45px;

    }

}


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

@media (max-width: 767px) {

    .contact-connect-section {

        padding: 70px 0;

    }


    .contact-connect-section .container {

        padding-left: 17px;

        padding-right: 17px;

    }





    .contact-connect-mark {

        display: none;

    }


    .contact-connect-row {

        grid-template-columns:
            42px minmax(0, 1fr) 32px;

        gap: 13px;

        min-height: 90px;

    }


    .contact-connect-row:hover {

        padding-left: 8px;

        padding-right: 8px;

    }


    .contact-connect-row-icon {

        width: 40px;

        height: 40px;

    }



    .contact-connect-row-arrow {

        width: 30px;

        height: 30px;

    }


    .contact-connect-location {

        grid-template-columns:
            45px 1fr;

        gap: 15px;

        margin-top: 40px;

        padding: 25px 20px;

    }


    .contact-connect-location-icon {

        width: 42px;

        height: 42px;

    }





    .contact-connect-location-action {

        grid-column: 2;

        justify-self: start;

        margin-top: 5px;

    }


    .contact-connect-cta {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        padding: 20px;

    }

}


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

@media (max-width: 576px) {

    .contact-connect-section {

        padding: 60px 0;

    }





    .contact-connect-row {

        grid-template-columns:
            38px minmax(0, 1fr) 30px;

        gap: 10px;

    }


    .contact-connect-row-icon {

        width: 37px;

        height: 37px;

    }





    .contact-connect-row-arrow {

        width: 28px;

        height: 28px;

    }


    .contact-connect-location {

        padding: 22px 17px;

    }




}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {




    .contact-connect-row {

        grid-template-columns:
            35px minmax(0, 1fr) 28px;

        gap: 8px;

    }


    .contact-connect-row-icon {

        width: 34px;

        height: 34px;

    }




}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .contact-connect-row,
    .contact-connect-row-icon,
    .contact-connect-row-arrow,
    .contact-connect-location,
    .contact-connect-location-action i,
    .contact-connect-cta>a {

        transition: none;

    }

}











































/*==================================
        OUR STORE LOCATIONS
==================================*/

.contact-location-section {

    position: relative;

    padding: 28px 0;

    background: #f5f9f6;

    overflow: hidden;

}


/*==================================
        SECTION HEADER
==================================*/

.contact-location-header {

    display: grid;

    grid-template-columns: 1fr 420px;

    align-items: end;

    gap: 60px;

    margin-bottom: 55px;

}


.contact-location-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #198754;


}


.contact-location-label::before {

    content: "";

    width: 30px;

    height: 2px;

    background: #198754;

}


.contact-location-header h2 {

    margin: 0;

    color: #1b2921;



}


.contact-location-header h2 span {

    color: #198754;

}


.contact-location-header>p {

    margin: 0;

    color: #000;


}


/*==================================
        LOCATION WRAPPER
==================================*/

.contact-location-wrapper {

    display: grid;

    grid-template-columns: 1fr;

    min-height: 500px;

    background: #ffffff;

    box-shadow:
        0 20px 60px rgba(20, 55, 35, .08);

}


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

.contact-location-map {

    position: relative;

    min-height: 500px;

    overflow: hidden;

}


.contact-location-map iframe {

    display: block;

    width: 100%;

    height: 100%;

    min-height: 500px;

    border: 0;

    filter:
        grayscale(20%) contrast(95%);

}


/*==================================
        LOCATION DETAILS
==================================*/

.contact-location-details {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px 45px;

    background: #198754;

    overflow: hidden;

}


.contact-location-details::before {

    content: "";

    position: absolute;

    width: 190px;

    height: 190px;

    right: -105px;

    bottom: -105px;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 50%;

}


.contact-location-details::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    right: -150px;

    bottom: -150px;

    border: 1px solid rgba(255, 255, 255, .10);

    border-radius: 50%;

}


/*==================================
        EYEBROW
==================================*/

.contact-location-eyebrow {

    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 12px;

    color: #198754;


}


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

.contact-location-details h3 {

    position: relative;

    z-index: 2;

    margin: 0 0 16px;

    color: #ffffff;


}


.contact-location-address {

    position: relative;

    z-index: 2;

    max-width: 330px;

    margin: 0 0 35px;

    color: rgba(255, 255, 255, .68);


}


/*==================================
        LOCATION INFO
==================================*/

.contact-location-info {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-bottom: 35px;

}


.contact-location-info-item {

    display: flex;

    align-items: center;

    gap: 15px;

}


.contact-location-info-item>i {

    width: 40px;

    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, .18);

    border-radius: 50%;

    color: #198754;

}


.contact-location-info-item small {

    display: block;

    margin-bottom: 4px;

    color: #198754;


}


.contact-location-info-item strong {

    display: block;

    color: #ffffff;


}


/*==================================
        GET DIRECTIONS
==================================*/

.contact-location-map-btn {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    gap: 12px;

    padding: 11px 13px 11px 18px;

    border-radius: 5px;

    background: #198754;

    color: #ffffff;

    text-decoration: none;


    transition:
        background .3s ease,
        transform .3s ease;

}


.contact-location-map-btn i {

    width: 26px;

    height: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .18);

}


.contact-location-map-btn:hover {

    color: #ffffff;

    background: #198754;

    transform: translateY(-2px);

}


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

@media (max-width: 1199px) {

    .contact-location-header {

        grid-template-columns: 1fr 380px;

        gap: 40px;

    }


    .contact-location-details {

        padding: 45px 35px;

    }

}


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

@media (max-width: 991px) {

    .contact-location-section {

        padding: 85px 0;

    }


    .contact-location-header {

        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 40px;

    }


    .contact-location-wrapper {

        grid-template-columns: 1fr;

    }


    .contact-location-map {

        min-height: 420px;

    }


    .contact-location-map iframe {

        min-height: 420px;

    }


    .contact-location-details {

        min-height: 430px;

    }

}


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

@media (max-width: 767px) {

    .contact-location-section {

        padding: 70px 0;

    }


    .contact-location-section .container {

        padding-left: 17px;

        padding-right: 17px;

    }




    .contact-location-map {

        min-height: 350px;

    }


    .contact-location-map iframe {

        min-height: 350px;

    }


    .contact-location-details {

        min-height: auto;

        padding: 40px 25px;

    }




}


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

@media (max-width: 576px) {

    .contact-location-section {

        padding: 60px 0;

    }





    .contact-location-map {

        min-height: 300px;

    }


    .contact-location-map iframe {

        min-height: 300px;

    }


    .contact-location-details {

        padding: 35px 20px;

    }





    .contact-location-info {

        gap: 16px;

    }

}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {



    .contact-location-details {

        padding: 30px 17px;

    }


}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .contact-location-map-btn {

        transition: none;

    }

}








































































/*==================================
        OUR SERVICE APPROACH
==================================*/








/* .contact-connect-section,
.our-technology-technology-section {
    padding-top: var(--about-section-space) !important;
    padding-bottom: var(--about-section-space) !important;
} */





















.contact-approach-section {

    position: relative;

    padding: 10px 0;

    background: #ffffff;

    overflow: hidden;

}


/*==================================
        SECTION HEADER
==================================*/

.contact-approach-header {

    max-width: 760px;

    margin: 0 auto 10px;

    text-align: center;

}


.contact-approach-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #198754;


}


.contact-approach-label::before,
.contact-approach-label::after {

    content: "";

    width: 28px;

    height: 2px;

    background: #198754;

}


.contact-approach-header h2 {

    margin: 0 0 18px;

    color: #1b2921;



}


.contact-approach-header h2 span {

    color: #198754;

}


.contact-approach-header p {

    max-width: 650px;

    margin: 0 auto;

    color: #000;
    text-align: center;


}


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

.contact-approach-flow {

    display: flex;

    align-items: stretch;

    width: 100%;

    border-top: 1px solid #dce6df;

    border-bottom: 1px solid #dce6df;

}


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

.contact-approach-item {

    flex: 1;

    min-width: 0;

    padding: 30px 22px;

    background: #ffffff;

    transition:
        background .3s ease,
        transform .3s ease;

}


.contact-approach-item:hover {

    background: #f6faf7;

    transform: translateY(-3px);

}


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

.contact-approach-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border: 1px solid #d6e4da;

    border-radius: 50%;

    background: #f3f9f5;

    color: #198754;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;

}


.contact-approach-item:hover .contact-approach-icon {

    border-color: #198754;

    background: #198754;

    color: #ffffff;

}


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

.contact-approach-content h3 {

    margin: 0 0 9px;

    color: #26342b;


}


.contact-approach-content p {

    margin: 0;

    color: #000;


}


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

.contact-approach-arrow {

    flex: 0 0 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #198754;

}


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

@media (max-width: 991px) {

    .contact-approach-section {

        padding: 80px 0;

    }


    .contact-approach-flow {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        border: 0;

        gap: 1px;

        background: #dce6df;

    }


    .contact-approach-item {

        min-height: 190px;

        padding: 28px;

        background: #ffffff;

    }


    .contact-approach-arrow {

        display: none;

    }

}


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

@media (max-width: 767px) {

    .contact-approach-section {

        padding: 70px 0;

    }


    .contact-approach-section .container {

        padding-left: 17px;

        padding-right: 17px;

    }


    .contact-approach-header {

        margin-bottom: 40px;

        text-align: left;

    }


    .contact-approach-label::after {

        display: none;

    }



    .contact-approach-flow {

        grid-template-columns: 1fr;

    }


    .contact-approach-item {

        min-height: auto;

        padding: 25px 20px;

    }


    .contact-approach-icon {

        width: 44px;

        height: 44px;

        margin-bottom: 15px;

    }




}


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

@media (max-width: 576px) {

    .contact-approach-section {

        padding: 60px 0;

    }



    .contact-approach-item {

        padding: 22px 18px;

    }




}


/*==================================
        EXTRA SMALL
==================================*/

@media (max-width: 375px) {}


/*==================================
        REDUCED MOTION
==================================*/

@media (prefers-reduced-motion: reduce) {

    .contact-approach-item,
    .contact-approach-icon {

        transition: none;

    }

}











/* =========================================================
   BLOG SUB BANNER
========================================================= */

.ecogenn-blog-banner {
    position: relative;
    min-height: 390px;
    padding: 85px 0 70px;
    background-color: #0d171f;
    background-image: url("../home-img/Choosing.png");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.ecogenn-blog-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(5, 22, 16, .94) 0%, rgba(5, 22, 16, .78) 48%, rgba(5, 22, 16, .42) 100%);
    pointer-events: none;
}


.ecogenn-blog-banner::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -120px;
    bottom: -170px;
    border-radius: 50%;
    background: rgba(48, 105, 232, 0.08);
}


.ecogenn-blog-banner .container {
    position: relative;
    z-index: 2;
}


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

.blog-banner-content {
    max-width: 680px;
}

.blog-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .78);
}

.blog-breadcrumb a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .3s ease;
}

.blog-breadcrumb a:hover {
    color: #198754;
}

.blog-breadcrumb span {
    color: rgba(255, 255, 255, .5);
}

.blog-breadcrumb strong {
    color: #ffffff;
    font-weight: 600;
}


.blog-banner-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;

    color: #198754;
}


.blog-banner-label::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #198754;
}


.blog-banner-content h1 {
    margin: 0;
    color: #ffffff;

}


.blog-banner-content h1 span {
    display: block;
    color: #198754;
}


.blog-banner-content p {
    max-width: 600px;
    margin: 22px 0 0;

    color: #b9c6ce;
}


.blog-banner-line {
    width: 65px;
    height: 3px;
    margin-top: 28px;
    background: #198754;
    border-radius: 5px;
}


/* =========================================================
   VISUAL
========================================================= */

.blog-banner-visual {
    position: relative;
    min-height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Circle */

.blog-circle {
    position: absolute;
    border-radius: 50%;
}


.blog-circle-one {
    width: 230px;
    height: 230px;
    border: 1px solid rgba(18, 184, 74, 0.25);
}


.blog-circle-two {
    width: 165px;
    height: 165px;
    border: 1px solid rgba(48, 105, 232, 0.25);
}


/* Main Card */

.blog-visual-card {
    position: relative;
    z-index: 3;

    width: 245px;
    padding: 25px;

    display: flex;
    align-items: center;
    gap: 18px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;

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

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}


.blog-visual-icon {
    width: 55px;
    height: 55px;

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

    border-radius: 14px;

    background: rgba(18, 184, 74, 0.12);
    color: #198754;

}


.blog-visual-card span {
    display: block;

    color: #aab8c1;
    text-transform: uppercase;
}


.blog-visual-card strong {
    display: block;
    margin-top: 3px;

    color: #ffffff;
}


/* =========================================================
   FLOATING LEAVES
========================================================= */

.blog-leaf {
    position: absolute;
    z-index: 4;

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

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: rgba(18, 184, 74, 0.12);
    color: #198754;

    border: 1px solid rgba(18, 184, 74, 0.18);
}


.leaf-one {
    top: 22px;
    right: 70px;
    transform: rotate(-18deg);
}


.leaf-two {
    bottom: 25px;
    left: 55px;
    transform: rotate(25deg);
}


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

@media (max-width: 991.98px) {

    .ecogenn-blog-banner {
        min-height: auto;
        padding: 70px 0 55px;
    }


    .blog-banner-content {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }


    .blog-banner-label {
        justify-content: center;
    }


    .blog-banner-content p {
        margin-left: auto;
        margin-right: auto;
    }


    .blog-banner-line {
        margin-left: auto;
        margin-right: auto;
    }


    .blog-banner-visual {
        margin-top: 45px;
    }

}


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

@media (max-width: 575.98px) {

    .ecogenn-blog-banner {
        padding: 60px 0 45px;
    }




    .blog-banner-visual {
        min-height: 220px;
        margin-top: 30px;
    }


    .blog-circle-one {
        width: 190px;
        height: 190px;
    }


    .blog-circle-two {
        width: 135px;
        height: 135px;
    }


    .blog-visual-card {
        width: 220px;
        padding: 20px;
    }


    .blog-visual-icon {
        width: 48px;
        height: 48px;
    }



    .leaf-one {
        right: 20px;
    }


    .leaf-two {
        left: 15px;
    }

}















































/* =========================================================
   ECOGENN BLOG SECTION
========================================================= */

.ecogenn-blogs-section {
    position: relative;

    padding: 95px 0;

    background: #ffffff;

    overflow: hidden;
}


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

.blogs-section-heading {
    max-width: 780px;

    margin: 0 auto 55px;

    text-align: center;
}


.blogs-section-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color: #198754;


    text-transform: uppercase;
}


.blogs-section-label::before {
    content: "";

    width: 30px;

    height: 2px;

    background: #198754;

    border-radius: 10px;
}


.blogs-section-heading h2 {
    margin: 0;

    color: #0d171f;


}


.blogs-section-heading h2 span {
    color: #198754;
}


.blogs-section-heading p {
    max-width: 680px;

    margin: 18px auto 0;

    color: #000;

}



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

.ecogenn-blog-card {
    position: relative;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e4ebe7;

    border-radius: 20px;

    box-shadow:
        0 8px 30px rgba(13, 23, 31, 0.045);

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


.ecogenn-blog-card:hover {
    transform: translateY(-8px);

    border-color: rgba(25, 135, 84, 0.35);

    box-shadow:
        0 22px 50px rgba(13, 23, 31, 0.11);
}



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

.blog-card-image {
    position: relative;

    height: 245px;

    flex-shrink: 0;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #edf6f1,
            #dce9e3);
}


.blog-card-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.65s cubic-bezier(0.22,
            1,
            0.36,
            1);
}


.ecogenn-blog-card:hover .blog-card-image img {
    transform: none;
    filter: brightness(1.06) saturate(1.08);
}


/* Image overlay */

.blog-card-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.02),
            rgba(0, 0, 0, 0.20));

    pointer-events: none;
}



/* =========================================================
   CATEGORY
========================================================= */

.blog-category {
    position: absolute;

    left: 18px;

    bottom: 17px;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    padding: 8px 14px;

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

    border:
        1px solid rgba(16,
            184,
            74,
            0.20);

    border-radius: 50px;

    color: #198754;


    text-transform: uppercase;

    box-shadow:
        0 6px 18px rgba(0,
            0,
            0,
            0.08);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}



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

.blog-card-content {
    display: flex;

    flex: 1;

    flex-direction: column;

    padding: 26px 25px 27px;
}



/* =========================================================
   BLOG META
========================================================= */

.blog-card-meta {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 13px;

    color: #000;

}


.blog-card-meta i {
    color: #198754;

}



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

.blog-card-content h3 {
    margin: 0 0 13px;

    color: #0d171f;



    transition:
        color 0.3s ease;
}


.ecogenn-blog-card:hover .blog-card-content h3 {
    color: #198754;
}



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

.blog-card-content p {
    margin: 0 0 24px;

    color: #000;

}



/* =========================================================
   READ MORE
========================================================= */

.blog-read-more {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-top: auto;

    padding: 0;

    border: 0;

    background: transparent;

    color: #0d171f;


    cursor: pointer;

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}


.blog-read-more span {
    position: relative;
}


.blog-read-more span::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 0;

    height: 2px;

    background: #198754;

    border-radius: 5px;

    transition:
        width 0.3s ease;
}


.blog-read-more i {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: #eef8f1;

    color: #198754;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


.blog-read-more:hover {
    gap: 13px;

    color: #198754;
}


.blog-read-more:hover span::after {
    width: 100%;
}


.blog-read-more:hover i {
    transform: rotate(45deg);

    background: #198754;

    color: #ffffff;
}



/* =========================================================
   =========================================================
   ECOGENN BLOG POPUP
   =========================================================
========================================================= */


/* =========================================================
   MODAL
========================================================= */

#blogModal {
    position: fixed !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    padding: 0 !important;

    overflow: hidden !important;

    z-index: 1055 !important;
}



/* =========================================================
   NAVBAR MUST STAY ABOVE POPUP
========================================================= */

.navbar.fixed-top,
.custom-navbar,
nav.navbar {
    z-index: 1100 !important;
}



/* =========================================================
   MODAL DIALOG
========================================================= */

#blogModal .modal-dialog {
    position: relative;

    width: min(920px,
            calc(100% - 40px));

    max-width: 920px;

    /*
       Navbar space is preserved here.
    */

    height: calc(100vh - 125px);

    max-height: calc(100vh - 125px);

    margin:
        95px auto 30px;

    display: flex;

    align-items: stretch;

    overflow: hidden !important;

    pointer-events: none;
}



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

#blogModal .modal-content {
    position: relative;

    width: 100%;

    height: 100%;

    min-height: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden !important;

    border: 0;

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 30px 90px rgba(0,
            0,
            0,
            0.28);

    pointer-events: auto;

    animation:
        blogModalOpen 0.3s ease;
}



/* =========================================================
   POPUP ANIMATION
========================================================= */

@keyframes blogModalOpen {

    from {

        opacity: 0;

        transform:
            translateY(20px) scale(0.975);

    }

    to {

        opacity: 1;

        transform:
            translateY(0) scale(1);

    }

}



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

.blog-modal-image {
    position: relative;

    width: 100%;

    height: 185px;

    min-height: 185px;

    flex-shrink: 0;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #edf6f1,
            #dce9e3);
}


.blog-modal-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
}


.blog-modal-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(to bottom,
            rgba(5, 17, 14, 0.02),
            rgba(5, 17, 14, 0.22));
}



/* =========================================================
   CLOSE BUTTON
========================================================= */

.blog-close-btn {
    position: absolute;

    top: 16px;

    right: 16px;

    z-index: 50;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

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

    border-radius: 50%;

    background:
        rgba(10,
            20,
            25,
            0.72);

    backdrop-filter: blur(10px);

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

    color: #ffffff;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.blog-close-btn:hover {
    background: #198754;

    transform: rotate(90deg);

    box-shadow:
        0 8px 20px rgba(16,
            184,
            74,
            0.25);
}




.blog-modal-body {
    position: relative;

    flex: 1 1 auto;

    min-height: 0;

    height: 100%;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    padding:
        32px 48px 48px;

    background: #ffffff;

    scrollbar-width: thin;

    scrollbar-color:
        #198754 #edf2ef;
}



/* =========================================================
   CUSTOM SCROLLBAR
========================================================= */

.blog-modal-body::-webkit-scrollbar {
    width: 6px;
}


.blog-modal-body::-webkit-scrollbar-track {
    background: #edf2ef;
}


.blog-modal-body::-webkit-scrollbar-thumb {
    background: #198754;

    border-radius: 20px;
}


.blog-modal-body::-webkit-scrollbar-thumb:hover {
    background: #198754;
}



/* =========================================================
   MODAL META
========================================================= */

.blog-modal-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 16px;
}


.blog-modal-meta>span:first-child {
    display: inline-flex;

    align-items: center;

    padding:
        7px 13px;

    border:
        1px solid #ccefd8;

    border-radius: 50px;

    background: #eef9f2;

    color: #198754;


    text-transform: uppercase;
}


.blog-modal-date {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #7b8790;

}


.blog-modal-date i {
    color: #198754;
}



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

.blog-modal-body h2 {
    margin: 0;

    max-width: 820px;

    color: #0d171f;


}


.blog-modal-body h2::after {
    content: "";

    display: block;

    width: 48px;

    height: 3px;

    margin-top: 17px;

    border-radius: 5px;

    background: #198754;
}



/* =========================================================
   FULL BLOG CONTENT
========================================================= */

.blog-full-content {
    padding-top: 25px;

    color: #61717c;

}


.blog-full-content p {
    margin:
        0 0 23px;
}


.blog-full-content h3 {
    position: relative;

    margin:
        32px 0 14px;

    padding-left: 14px;

    color: #0d171f;


}


.blog-full-content h3::before {
    content: "";

    position: absolute;

    left: 0;

    top: 4px;

    width: 3px;

    height:
        calc(100% - 8px);

    border-radius: 5px;

    background: #198754;
}


.blog-full-content ul {
    margin:
        0 0 24px;

    padding-left: 22px;
}


.blog-full-content li {
    margin-bottom: 10px;

    padding-left: 5px;
}


.blog-full-content li::marker {
    color: #198754;
}



/* =========================================================
   BLOG CONTENT IMAGE
========================================================= */

.blog-full-content img {
    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

    margin:
        25px 0 30px;

    border-radius: 14px;

    object-fit: cover;
}



/* =========================================================
   MODAL BACKDROP
========================================================= */

.modal-backdrop {
    z-index: 1040 !important;

    background:
        #071017 !important;
}


.modal-backdrop.show {
    opacity: 0.72 !important;
}



/* =========================================================
   BODY LOCK
========================================================= */

body.modal-open {
    overflow: hidden !important;

    padding-right: 0 !important;
}


body.modal-open .modal {
    overflow: hidden !important;
}



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

@media (max-width: 991.98px) {

    .ecogenn-blogs-section {
        padding: 75px 0;
    }


    .blogs-section-heading {
        margin-bottom: 42px;
    }


    .blog-card-image {
        height: 225px;
    }


    #blogModal .modal-dialog {

        width:
            calc(100% - 30px);

        height:
            calc(100vh - 115px);

        max-height:
            calc(100vh - 115px);

        margin:
            85px auto 30px;
    }


    .blog-modal-image {

        height: 175px;

        min-height: 175px;
    }


    .blog-modal-body {

        padding:
            30px 35px 40px;
    }



}



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

@media (max-width: 767.98px) {

    .ecogenn-blogs-section {
        padding: 60px 0;
    }


    .blogs-section-heading {
        margin-bottom: 35px;
    }



    .blog-card-image {
        height: 220px;
    }


    .blog-card-content {
        padding:
            23px 21px 25px;
    }





    /* -----------------------------------------
       POPUP
    ----------------------------------------- */

    #blogModal .modal-dialog {

        width:
            calc(100% - 16px);

        height:
            calc(100vh - 95px);

        max-height:
            calc(100vh - 95px);

        margin:
            75px auto 20px;
    }


    #blogModal .modal-content {
        border-radius: 18px;
    }


    .blog-modal-image {

        height: 150px;

        min-height: 150px;
    }


    .blog-close-btn {

        width: 38px;

        height: 38px;

        top: 11px;

        right: 11px;
    }


    .blog-modal-body {

        padding:
            25px 21px 32px;
    }


    .blog-modal-meta {

        gap: 10px;
    }





    .blog-modal-body h2::after {

        width: 40px;

        margin-top: 15px;
    }


    .blog-full-content {

        padding-top: 21px;

    }


    .blog-full-content h3 {

        margin-top: 28px;
    }

}



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

@media (max-width: 480px) {

    .ecogenn-blogs-section {
        padding: 50px 0;
    }


    .blog-card-image {
        height: 200px;
    }


    #blogModal .modal-dialog {

        width:
            calc(100% - 10px);

        height:
            calc(100vh - 85px);

        max-height:
            calc(100vh - 85px);

        margin:
            70px auto 15px;
    }


    #blogModal .modal-content {
        border-radius: 16px;
    }


    .blog-modal-image {

        height: 130px;

        min-height: 130px;
    }


    .blog-modal-body {

        padding:
            22px 17px 28px;
    }




}



/* =========================================================
   ACCESSIBILITY
========================================================= */

.blog-close-btn:focus-visible {

    outline:
        3px solid rgba(16,
            184,
            74,
            0.35);

    outline-offset: 3px;
}



/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #blogModal .modal-content {
        animation: none;
    }


    .blog-close-btn {
        transition: none;
    }


    .ecogenn-blog-card {
        transition: none;
    }

}

/* =========================================================
   O&M / AMC SUPPORT — VISUAL REFINEMENT
========================================================= */
.eg-om-section {
    padding: 48px 25px;
    background: linear-gradient(180deg, #f8fcf9 0%, #ffffff 100%);
}

.eg-om-wrapper {
    grid-template-columns: 370px minmax(0, 1fr);
    gap: 36px;
    min-height: 700px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(25, 135, 84, .18);
    border-radius: 32px;
    background:
        radial-gradient(circle at 74% 12%, rgba(25, 135, 84, .10), transparent 28%),
        linear-gradient(135deg, #f8fdf9 0%, #eef8f1 100%);
    box-shadow: 0 24px 60px rgba(16, 66, 37, .12);
}

.eg-om-wrapper::before,
.eg-om-wrapper::after {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.eg-om-wrapper::before {
    width: 330px;
    height: 330px;
    top: -190px;
    left: -120px;
    border: 1px solid rgba(25, 135, 84, .16);
}

.eg-om-wrapper::after {
    width: 220px;
    height: 220px;
    right: -110px;
    bottom: -100px;
    background: rgba(25, 135, 84, .06);
}

.eg-om-intro {
    padding: 38px 32px;
    border: 1px solid rgba(25, 135, 84, .13);
    border-radius: 24px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 18px 36px rgba(15, 67, 37, .08);
    backdrop-filter: blur(8px);
}

.eg-om-label {
    padding: 7px 12px;
    border-radius: 999px;
    background: #e7f8ed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.eg-om-intro h2 {
    line-height: 1.12;
}

.eg-om-heading-line {
    width: 58px;
    height: 4px;
    margin: 22px 0;
}

.eg-om-intro>p {
    max-width: none;
    color: #46574b;
    line-height: 1.75;
}

.eg-om-reliability {
    margin-top: 28px;
    padding: 14px;
    border-radius: 14px;
    background: #f1faf4;
}

.eg-om-reliability-icon {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: #198754;
    box-shadow: 0 8px 16px rgba(25, 135, 84, .22);
}

.eg-om-reliability strong {
    color: #198754;
}

.eg-om-reliability span {
    color: #5b6e61;
}

.eg-om-network {
    border-radius: 24px;
    background: rgba(255, 255, 255, .43);
}

.eg-om-grid {
    border: 1px solid rgba(25, 135, 84, .08);
    border-radius: 24px;
}

.eg-om-orbit-one {
    border-color: rgba(25, 135, 84, .18);
    box-shadow: 0 0 0 24px rgba(25, 135, 84, .025);
}

.eg-om-orbit-two {
    border-color: rgba(25, 135, 84, .28);
}

.eg-om-hub-core {
    background: linear-gradient(145deg, #ffffff, #ddf5e5);
    box-shadow: 0 18px 38px rgba(13, 73, 38, .16);
}

.eg-om-connector {
    background: linear-gradient(90deg, rgba(25, 135, 84, .2), #198754, rgba(25, 135, 84, .2));
}

.eg-connector-top,
.eg-connector-bottom {
    background: linear-gradient(180deg, rgba(25, 135, 84, .2), #198754, rgba(25, 135, 84, .2));
}

.eg-om-card {
    border-color: rgba(18, 81, 44, .13);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 30px rgba(15, 67, 37, .10);
}

.eg-om-card:hover {
    border-color: rgba(25, 135, 84, .48);
    box-shadow: 0 20px 38px rgba(15, 67, 37, .16);
}

.eg-om-card-number {
    color: #198754;
    font-weight: 700;
}

.eg-om-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.eg-om-card h3 {
    color: #198754;
    line-height: 1.25;
}

.eg-om-card p {
    color: #5a6b60;
    line-height: 1.6;
}

@media (max-width: 1199.98px) {
    .eg-om-wrapper {
        grid-template-columns: 315px minmax(0, 1fr);
        gap: 24px;
    }

    .eg-om-intro {
        padding: 30px 24px;
    }
}

@media (max-width: 991.98px) {
    .eg-om-section {
        padding: 36px 20px;
    }

    .eg-om-wrapper {
        padding: 28px 22px;
    }

    .eg-om-intro {
        padding: 32px 26px;
    }
}

@media (max-width: 767.98px) {
    .eg-om-section {
        padding: 28px 14px;
    }

    .eg-om-wrapper {
        padding: 18px 12px;
        border-radius: 22px;
    }

    .eg-om-intro {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .eg-om-network,
    .eg-om-grid {
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .eg-om-card,
    .eg-om-card-icon {
        transition: none;
    }
}





































/* =========================================================
   ECOGENN ? OUR SERVICES SUB-BANNER
========================================================= */

.ecogenn-services-sub-banner {

    position: relative;

    min-height: 460px;

    display: flex;
    align-items: center;

    overflow: hidden;

    isolation: isolate;

    /*
       CHANGE THIS IMAGE PATH
       Put your services banner image inside:
       assets/images/services-banner.jpg
    */

    background-image:
        url("../home-img/our-services.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.services-banner-overlay {

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(90deg,
            rgba(5, 18, 23, 0.94) 0%,
            rgba(5, 20, 25, 0.82) 42%,
            rgba(5, 20, 25, 0.58) 72%,
            rgba(5, 20, 25, 0.38) 100%);

}



/* =========================================================
   GREEN ATMOSPHERE
========================================================= */

.ecogenn-services-sub-banner::before {

    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    left: -280px;
    top: -280px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(25, 135, 84, 0.18) 0%,
            rgba(25, 135, 84, 0.04) 45%,
            transparent 72%);

    z-index: -1;

    pointer-events: none;
}


.ecogenn-services-sub-banner::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -180px;
    bottom: -200px;

    border-radius: 50%;

    border: 1px solid rgba(25, 135, 84, 0.15);

    z-index: -1;

    pointer-events: none;
}



/* =========================================================
   DECORATIVE CIRCLES
========================================================= */

.services-banner-circle {

    position: absolute;

    border-radius: 50%;

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

    pointer-events: none;

    z-index: 0;
}


.circle-one {

    width: 280px;
    height: 280px;

    right: 13%;
    top: -160px;
}


.circle-two {

    width: 170px;
    height: 170px;

    right: 5%;
    bottom: -90px;

    border-color:
        rgba(25, 135, 84, 0.18);
}



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

.services-banner-content {

    position: relative;

    z-index: 2;

    max-width: 800px;

    padding: 75px 0;
}



/* =========================================================
   BREADCRUMB
========================================================= */

.services-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 27px;

}


.services-breadcrumb a {

    color: rgba(255, 255, 255);

    text-decoration: none;

    transition:
        color 0.3s ease;
}


.services-breadcrumb a:hover {

    color: #198754;
}


.services-breadcrumb i {

    color: #198754;

}


.services-breadcrumb span {

    color: #ffffff;
}



/* =========================================================
   LABEL
========================================================= */

.services-banner-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #198754;


}


.services-banner-label span {

    display: block;

    width: 32px;
    height: 2px;

    background: #198754;

    border-radius: 5px;
}



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

.services-banner-content h1 {

    margin: 0;

    color: #ffffff;


}


.services-banner-content h1 span {

    color: #198754;
}



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

.services-banner-content p {

    max-width: 700px;

    margin: 23px 0 0;

    color:
        rgba(255, 255, 255);

}



/* =========================================================
   ACCENT LINE
========================================================= */

.services-banner-line {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 29px;
}


.services-banner-line span:first-child {

    width: 58px;
    height: 3px;

    background: #198754;

    border-radius: 10px;
}


.services-banner-line span:last-child {

    width: 13px;
    height: 3px;

    background: #198754;

    opacity: 0.45;

    border-radius: 10px;
}



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

@media (max-width: 991.98px) {

    .ecogenn-services-sub-banner {

        min-height: 420px;

        background-position:
            center center;
    }


    .services-banner-overlay {

        background:
            linear-gradient(90deg,
                rgba(5, 18, 23, 0.95),
                rgba(5, 20, 25, 0.72));
    }


    .services-banner-content {

        padding: 65px 0;
    }





    .services-banner-content p {

        max-width: 620px;

    }

}



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

@media (max-width: 767.98px) {

    .ecogenn-services-sub-banner {

        min-height: 390px;

        background-position:
            center center;
    }


    .services-banner-overlay {

        background:
            linear-gradient(90deg,
                rgba(5, 18, 23, 0.94),
                rgba(5, 20, 25, 0.75));
    }


    .services-banner-content {

        padding: 55px 0;
    }


    .services-breadcrumb {

        margin-bottom: 21px;

    }




    .services-banner-content p {

        margin-top: 18px;

    }


    .circle-one {

        right: -100px;

        top: -100px;
    }


    .circle-two {

        right: -50px;

        bottom: -70px;
    }

}



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

@media (max-width: 480px) {

    .ecogenn-services-sub-banner {

        min-height: 360px;
    }


    .services-banner-content {

        padding: 48px 0;
    }





    .services-banner-label {

        gap: 7px;

    }


    .services-banner-label span {

        width: 23px;
    }


    .services-banner-line {

        margin-top: 22px;
    }

}












/* =========================================================
   ECOGENN | COMPLETE TREATMENT SHOWCASE
========================================================= */

.ecogenn-treatment-showcase {
    position: relative;
    padding-top: 28px;
    padding-bottom: 28px;

    /* padding: 100px 0 110px; */
    /* padding-top: var(--about-section-space) !important;
    padding-bottom: var(--about-section-space) !important; */

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

    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.ecogenn-treatment-showcase::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -180px;
    right: -160px;

    border-radius: 50%;

    background:
        rgba(25, 135, 84, 0.045);

    pointer-events: none;
}


.ecogenn-treatment-showcase::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -150px;
    left: -120px;

    border-radius: 50%;

    background:
        rgba(25, 135, 84, 0.035);

    pointer-events: none;
}



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

.ecogenn-treatment-intro {

    position: relative;

    z-index: 2;

    max-width: 820px;

    margin: 0 auto 60px;

    text-align: center;
    padding-top: var(--about-section-space) !important;
    padding-bottom: var(--about-section-space) !important;
}


.ecogenn-treatment-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #198754;


    text-transform: uppercase;
}


.ecogenn-treatment-eyebrow span {

    display: block;

    width: 30px;
    height: 2px;

    border-radius: 10px;

    background: #198754;
}


.ecogenn-treatment-intro h2 {

    margin: 0;

    color: #0d171f;


}


.ecogenn-treatment-intro h2 strong {

    display: block;

    color: #198754;

}


.ecogenn-treatment-intro p {

    max-width: 700px;

    margin: 20px auto 0;

    color: #000000;

}



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

.ecogenn-treatment-product {

    position: relative;

    display: flex;

    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e3ebe6;

    border-radius: 22px;

    box-shadow:
        0 8px 25px rgba(13, 23, 31, 0.045);

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


.ecogenn-treatment-product:hover {

    transform: translateY(-8px);

    border-color:
        rgba(25, 135, 84, 0.28);

    box-shadow:
        0 25px 55px rgba(13, 23, 31, 0.11);
}



/* =========================================================
   PRODUCT VISUAL AREA
========================================================= */

.ecogenn-product-visual {

    position: relative;

    width: 47%;

    min-width: 47%;

    min-height: 330px;

    overflow: hidden;

    background: #dfeae4;
}


.ecogenn-product-visual img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(0.2,
            0.7,
            0.2,
            1);
}


.ecogenn-treatment-product:hover .ecogenn-product-visual img {

    transform: scale(1.09);
}



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

.ecogenn-product-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(5, 25, 17, 0.05) 0%,
            rgba(5, 25, 17, 0.08) 45%,
            rgba(5, 25, 17, 0.72) 100%);

    pointer-events: none;
}



/* =========================================================
   PRODUCT INDEX
========================================================= */

.ecogenn-product-index {

    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 3;

    display: flex;

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

    width: 45px;
    height: 45px;

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

    border-radius: 50%;

    background:
        rgba(7, 24, 18, 0.65);

    backdrop-filter:
        blur(10px);

    color: #ffffff;


}



/* =========================================================
   PRODUCT TYPE BADGE
========================================================= */

.ecogenn-product-type {

    position: absolute;

    top: 20px;
    right: 18px;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 9px 13px;

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

    border-radius: 50px;

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

    backdrop-filter:
        blur(10px);

    color: #ffffff;


}


.ecogenn-product-type i {

    color: #198754;

}



/* =========================================================
   PRODUCT BOTTOM TECHNICAL STRIP
========================================================= */

.ecogenn-product-strip {

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 8px;
}


.ecogenn-product-strip span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 10px;

    border-radius: 6px;

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

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

    backdrop-filter:
        blur(8px);

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


}


.ecogenn-product-strip i {

    color: #198754;

}



/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.ecogenn-product-info {

    position: relative;

    display: flex;

    flex: 1;

    flex-direction: column;

    justify-content: center;

    padding: 36px 34px;
}



/* =========================================================
   CATEGORY
========================================================= */

.ecogenn-product-category {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin-bottom: 12px;

    color: #198754;


    text-transform: uppercase;
}


.ecogenn-product-category::before {

    content: "";

    width: 18px;
    height: 2px;

    margin-right: 8px;

    border-radius: 5px;

    background: #198754;
}



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

.ecogenn-product-info h3 {

    margin: 0 0 15px;

    color: #0d171f;


}


.ecogenn-product-info h3 span {

    color: #198754;
}



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

.ecogenn-product-info p {

    margin: 0 0 25px;

    color: #000000;

}



/* =========================================================
   PRODUCT LINK
========================================================= */

.ecogenn-product-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    color: #0d171f;

    text-decoration: none;


    transition:
        color 0.3s ease,
        gap 0.3s ease;
}


.ecogenn-product-link i {

    display: flex;

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

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: #eef8f1;

    color: #198754;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


.ecogenn-product-link:hover {

    gap: 14px;

    color: #198754;
}


.ecogenn-product-link:hover i {

    transform:
        translate(2px,
            -2px);

    background: #198754;

    color: #ffffff;
}



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

@media (max-width: 991.98px) {

    .ecogenn-treatment-showcase {

        padding:
            80px 0 90px;
    }


    .ecogenn-treatment-intro {

        margin-bottom: 45px;
    }


    .ecogenn-treatment-product {

        flex-direction: column;
    }


    .ecogenn-product-visual {

        width: 100%;

        min-width: 100%;

        height: 300px;

        min-height: 300px;
    }


    .ecogenn-product-info {

        padding: 30px;
    }

}



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

@media (max-width: 767.98px) {

    .ecogenn-treatment-showcase {

        padding:
            65px 0 75px;
    }


    .ecogenn-treatment-intro {

        margin-bottom: 35px;
    }




    .ecogenn-product-visual {

        height: 245px;

        min-height: 245px;
    }


    .ecogenn-product-info {

        padding: 25px 23px 27px;
    }


    .ecogenn-product-type {

        padding: 8px 10px;
    }


    .ecogenn-product-strip {

        left: 14px;
        right: 14px;
        bottom: 14px;

        flex-wrap: wrap;
    }

}



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

@media (max-width: 480px) {

    .ecogenn-treatment-showcase {

        padding:
            55px 0 65px;
    }





    .ecogenn-product-visual {

        height: 215px;

        min-height: 215px;
    }


    .ecogenn-product-index {

        width: 39px;
        height: 39px;

        top: 14px;
        left: 14px;
    }


    .ecogenn-product-type {

        top: 14px;
        right: 14px;
    }


    .ecogenn-product-info {

        padding: 22px 19px 25px;
    }




}

























































/* =========================================================
   ECOGENN | COMPLETE TREATMENT SOLUTIONS — REDESIGN
========================================================= */
.ecogenn-treatment-showcase {
    padding: 110px 0 46px;
    background: #f2f6f2
}

.ecogenn-treatment-showcase::before {
    width: 520px;
    height: 520px;
    top: -280px;
    right: -180px;
    background: #d9e9da
}

.ecogenn-treatment-showcase::after {
    width: 460px;
    height: 460px;
    bottom: -280px;
    left: -220px;
    background: #dfeee8
}

.ecogenn-treatment-intro {
    z-index: 1;
    max-width: none;
    margin: 0 0 52px;
    padding: 0 !important;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(270px, .55fr);
    align-items: end;
    gap: 54px;
    text-align: left
}

.ecogenn-treatment-eyebrow {
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em
}

.ecogenn-treatment-intro h2 {

    font-size: clamp(2.45rem, 5vw, 5rem);
    line-height: .98;
    letter-spacing: -.06em
}

.ecogenn-treatment-intro h2 strong {
    color: #198754
}

.ecogenn-treatment-summary {
    padding: 0 0 7px 25px;
    border-left: 1px solid #bfd1c2
}

.ecogenn-treatment-summary p {
    max-width: 365px;
    margin: 0 0 21px;
    color: #43514a;
    font-size: 15px;
    line-height: 1.65
}

.ecogenn-treatment-summary a,
.ecogenn-treatment-footer a {
    color: #0d171f;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .08em
}

.ecogenn-treatment-summary a i {
    color: #198754;
    font-size: 17px;
    margin-left: 5px
}

.ecogenn-treatment-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 330px;
    gap: 18px
}

.ecogenn-treatment-product,
.ecogenn-treatment-product.treatment-product--large {
    position: relative;
    display: block;
    min-height: 0;
    width: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #173d32;
    color: #fff;
    text-decoration: none;
    box-shadow: none;
    isolation: isolate
}

.ecogenn-treatment-product.treatment-product--large {
    grid-row: span 2
}

.ecogenn-treatment-product img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1)
}

.ecogenn-treatment-product:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none
}

.ecogenn-treatment-product:hover img {
    transform: scale(1.065)
}

.ecogenn-product-overlay {
    z-index: 1;
    background: linear-gradient(180deg, rgba(8, 29, 21, .08) 20%, rgba(7, 29, 20, .88) 100%)
}

.ecogenn-product-index,
.ecogenn-product-type {
    z-index: 2;
    top: 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.ecogenn-product-index {
    left: 22px;
    display: block;
    width: auto;
    height: auto;
    color: #c4eece
}

.ecogenn-product-type {
    right: 22px;
    padding: 0;
    color: #fff
}

.ecogenn-product-type i {
    color: #b9edc8;
    font-size: 15px
}

.ecogenn-product-info {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: 28px 30px
}

.ecogenn-product-category {
    display: block;
    margin: 0 0 8px;
    color: #b9edc8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase
}

.ecogenn-product-category::before {
    display: none
}

.ecogenn-product-info strong {
    display: block;
    max-width: 470px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.65rem, 2.8vw, 2.65rem);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em
}

.ecogenn-product-info strong em {
    color: #b9edc8;
    font-style: normal
}

.ecogenn-product-info small {
    display: block;
    max-width: 390px;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    color: rgba(255, 255, 255, .83);
    font-size: 13px;
    line-height: 1.55;
    transition: max-height .35s ease, margin .35s ease, opacity .25s ease
}

.ecogenn-product-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

.ecogenn-product-link i {
    display: inline;
    width: auto;
    height: auto;
    background: none;
    color: #b9edc8;
    font-size: 18px
}

.ecogenn-treatment-product:hover .ecogenn-product-info small {
    max-height: 48px;
    margin-top: 12px;
    opacity: 1
}

.ecogenn-treatment-product:hover .ecogenn-product-link {
    gap: 12px;
    color: #fff
}

.ecogenn-treatment-product:hover .ecogenn-product-link i {
    transform: translate(2px, -2px);
    background: none;
    color: #b9edc8
}

.ecogenn-treatment-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 25px 0 0;
    color: #5b6961;
    font-size: 12px
}

.ecogenn-treatment-footer>span {
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase
}

.ecogenn-treatment-footer>span i {
    margin-right: 8px;
    color: #198754;
    font-size: 17px
}

.ecogenn-treatment-footer p {
    margin: 0;
    color: #5b6961
}

.ecogenn-treatment-footer a {
    margin-left: 5px;
    color: #198754
}

@media(max-width:991.98px) {
    .ecogenn-treatment-showcase {
        padding: 80px 0 36px
    }

    .ecogenn-treatment-intro {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 38px
    }

    .ecogenn-treatment-summary {
        padding-left: 18px
    }

    .ecogenn-treatment-grid {
        grid-auto-rows: 300px
    }
}

@media(max-width:767.98px) {
    .ecogenn-treatment-showcase {
        padding: 64px 0 30px
    }

    .ecogenn-treatment-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 310px;
        gap: 13px
    }

    .ecogenn-treatment-product.treatment-product--large {
        grid-row: span 1
    }

    .ecogenn-product-info {
        padding: 24px
    }

    .ecogenn-product-index {
        left: 18px;
        top: 17px
    }

    .ecogenn-product-type {
        right: 18px;
        top: 17px
    }

    .ecogenn-treatment-footer {
        display: block;
        padding-top: 21px
    }

    .ecogenn-treatment-footer p {
        margin-top: 12px;
        line-height: 1.6
    }

    .ecogenn-product-info small {
        max-height: 48px;
        margin-top: 10px;
        opacity: 1
    }
}

/* =========================================================
   ECOGENN | COMPLETE TREATMENT SOLUTIONS — FULL SECTION REBUILD
========================================================= */
.treatment-ecosystem {
    padding: 118px 0 10px;
    background: #09251d;
    isolation: isolate
}

.treatment-ecosystem::before,
.treatment-ecosystem::after {
    display: none
}

.treatment-ecosystem .container {
    position: relative
}

.treatment-ecosystem .container::before {
    content: "WATER / WASTE / REUSE";
    position: absolute;
    top: 8px;
    right: 12px;
    color: rgba(205, 235, 211, .14);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .24em;
    writing-mode: vertical-rl
}

.treatment-ecosystem__header {
    position: relative;
    z-index: 1;
    max-width: none;
    margin: 0 0 66px;
    padding: 0 !important;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, .55fr);
    align-items: end;
    gap: 70px;
    text-align: left
}

.treatment-ecosystem .ecogenn-treatment-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 19px;
    color: #bce5c5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase
}

.treatment-ecosystem .ecogenn-treatment-eyebrow span {
    width: 28px;
    background: #bce5c5
}

.treatment-ecosystem .ecogenn-treatment-intro h2 {
    margin: 0;
    color: #f5faf4;
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.9rem, 5.5vw, 5.6rem);
    line-height: .93;
    letter-spacing: -.065em
}

.treatment-ecosystem .ecogenn-treatment-intro h2 strong {
    color: #a7dfa9;
    font-weight: 400
}

.treatment-ecosystem .ecogenn-treatment-summary {
    padding: 3px 0 8px 25px;
    border-left: 1px solid rgba(188, 229, 197, .42)
}

.treatment-ecosystem .ecogenn-treatment-summary p {
    max-width: 375px;
    margin: 0 0 25px;
    color: #c9d7cd;
    font-size: 15px;
    line-height: 1.7
}

.treatment-ecosystem .ecogenn-treatment-summary a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f5faf4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase
}

.treatment-ecosystem .ecogenn-treatment-summary a i {
    color: #a7dfa9;
    font-size: 18px
}

.treatment-ecosystem__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 440px;
    gap: 15px
}

.treatment-ecosystem .ecogenn-treatment-product,
.treatment-ecosystem .ecogenn-treatment-product.treatment-product--large {
    display: block;
    grid-row: auto;
    min-height: 0;
    width: auto;
    border: 0;
    border-radius: 0;
    background: #eff3ed;
    color: #10231b;
    box-shadow: none;
    isolation: isolate
}

.treatment-ecosystem .ecogenn-treatment-product::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 27, 18, .18), transparent 54%);
    transition: background .35s ease
}

.treatment-ecosystem .ecogenn-treatment-product img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 48%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1)
}

.treatment-ecosystem .ecogenn-product-overlay {
    z-index: 1;
    inset: 0 0 auto;
    height: 48%;
    background: linear-gradient(180deg, rgba(2, 19, 12, .03), rgba(2, 19, 12, .58))
}

.treatment-ecosystem .ecogenn-product-index {
    z-index: 3;
    top: 19px;
    left: 20px;
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(4, 27, 18, .25);
    color: #fff;
    font-size: 10px
}

.treatment-ecosystem .ecogenn-product-type {
    z-index: 3;
    top: 24px;
    right: 21px;
    padding: 0;
    color: #fff;
    font-size: 9px;
    letter-spacing: .13em
}

.treatment-ecosystem .ecogenn-product-type i {
    color: #c7f0ce
}

.treatment-ecosystem .ecogenn-product-info {
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    display: block;
    padding: 28px 30px 27px;
    background: #eff3ed
}

.treatment-ecosystem .ecogenn-product-category {
    margin: 0 0 9px;
    color: #387650;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em
}

.treatment-ecosystem .ecogenn-product-info strong {
    max-width: none;
    color: #11261c;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.55rem, 2.45vw, 2.4rem);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.048em
}

.treatment-ecosystem .ecogenn-product-info strong em {
    color: #338350
}

.treatment-ecosystem .ecogenn-product-info small {
    max-width: 430px;
    max-height: none;
    margin: 12px 0 0;
    opacity: 1;
    color: #536157;
    font-size: 12px;
    line-height: 1.55
}

.treatment-ecosystem .ecogenn-product-link {
    margin-top: 16px;
    color: #173d2d;
    font-size: 10px;
    letter-spacing: .11em
}

.treatment-ecosystem .ecogenn-product-link i {
    color: #258048;
    font-size: 18px
}

.treatment-ecosystem .ecogenn-treatment-product:nth-child(2) .ecogenn-product-info {
    background: #e6f0e6
}

.treatment-ecosystem .ecogenn-treatment-product:nth-child(3) .ecogenn-product-info {
    background: #edf0e9
}

.treatment-ecosystem .ecogenn-treatment-product:nth-child(4) .ecogenn-product-info {
    background: #e2efea
}

.treatment-ecosystem .ecogenn-treatment-product:hover {
    transform: none;
    box-shadow: none
}

.treatment-ecosystem .ecogenn-treatment-product:hover::before {
    background: linear-gradient(90deg, rgba(4, 27, 18, .35), transparent 63%)
}

.treatment-ecosystem .ecogenn-treatment-product:hover img {
    transform: scale(1.06)
}

.treatment-ecosystem .ecogenn-treatment-product:hover .ecogenn-product-link {
    gap: 13px;
    color: #173d2d
}

.treatment-ecosystem .ecogenn-treatment-product:hover .ecogenn-product-link i {
    background: none;
    color: #258048
}

.treatment-ecosystem .ecogenn-treatment-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 25px;
    padding: 25px 0 0;
    border-top: 1px solid rgba(205, 235, 211, .24);
    color: #b8cdbd;
    font-size: 11px
}

.treatment-ecosystem .ecogenn-treatment-footer>span {
    color: #b8cdbd;
    font-weight: 800;
    letter-spacing: .1em
}

.treatment-ecosystem .ecogenn-treatment-footer>span i {
    margin: 0 8px;
    color: #84c795
}

.treatment-ecosystem .ecogenn-treatment-footer p {
    color: #b8cdbd
}

.treatment-ecosystem .ecogenn-treatment-footer a {
    color: #eaf5eb;
    font-size: 10px;
    letter-spacing: .1em
}

.treatment-ecosystem .ecogenn-treatment-footer a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-top: 1px solid #a7dfa9;
    border-right: 1px solid #a7dfa9;
    transform: rotate(45deg)
}

@media(max-width:991.98px) {
    .treatment-ecosystem {
        padding: 82px 0 43px
    }

    .treatment-ecosystem__header {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 44px
    }

    .treatment-ecosystem__grid {
        grid-auto-rows: 400px
    }

    .treatment-ecosystem .ecogenn-treatment-summary {
        padding-left: 19px
    }
}

@media(max-width:767.98px) {
    .treatment-ecosystem {
        padding: 65px 0 35px
    }

    .treatment-ecosystem .container::before {
        display: none
    }

    .treatment-ecosystem__header {
        margin-bottom: 36px
    }

    .treatment-ecosystem__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 390px;
        gap: 12px
    }

    .treatment-ecosystem .ecogenn-product-info {
        padding: 23px
    }

    .treatment-ecosystem .ecogenn-treatment-footer {
        display: block;
        margin-top: 19px;
        padding-top: 20px
    }

    .treatment-ecosystem .ecogenn-treatment-footer p {
        margin-top: 13px;
        line-height: 1.6
    }

    .treatment-ecosystem .ecogenn-treatment-intro h2 {
        font-size: clamp(2.6rem, 12vw, 4.2rem)
    }
}

/* =========================================================
   ECOGENN | COMPLETE TREATMENT SOLUTIONS — TREATMENT ATLAS
========================================================= */
.treatment-ecosystem {
    position: relative;
    padding: 78px 0 38px;
    overflow: hidden;
    background: #eee9df;
    color: #18251f;
}

.treatment-ecosystem::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 38%;
    height: 100%;
    background: #e4eee4;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
    opacity: .8;
}

.treatment-ecosystem::after {
    content: "04 / COMPLETE ROUTE";
    position: absolute;
    right: 34px;
    bottom: 104px;
    color: rgba(24, 37, 31, .28);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .22em;
    writing-mode: vertical-rl;
}

.treatment-ecosystem .container {
    position: relative;
    z-index: 1;
}

.treatment-ecosystem .container::before {
    display: none;
}

.treatment-ecosystem__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
    align-items: end;
    gap: 56px;
    max-width: 1000px;
    margin: 0 0 42px;
    padding: 0 !important;
    text-align: left;
}

.treatment-ecosystem .ecogenn-treatment-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 21px;
    color: #2b7549;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.treatment-ecosystem .ecogenn-treatment-eyebrow span {
    width: 32px;
    background: #d26b3e;
}

.treatment-ecosystem .ecogenn-treatment-intro h2 {
    margin: 0;
    color: #18251f;
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.45rem, 4.8vw, 4.8rem);
    font-weight: 400;
    line-height: .92;
    letter-spacing: -.065em;
}

.treatment-ecosystem .ecogenn-treatment-intro h2 strong {
    color: #2b7549;
    font-weight: 400;
}

.treatment-ecosystem .ecogenn-treatment-summary {
    padding: 0 0 5px 22px;
    border-left: 2px solid #d26b3e;
}

.treatment-ecosystem .ecogenn-treatment-summary p {
    margin: 0 0 22px;
    color: #59645c;
    font-size: 14px;
    line-height: 1.7;
}

.treatment-ecosystem .ecogenn-treatment-summary a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #18251f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
}

.treatment-ecosystem .ecogenn-treatment-summary a i {
    color: #d26b3e;
    font-size: 17px;
}

.treatment-ecosystem__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
}

.treatment-ecosystem .ecogenn-treatment-product,
.treatment-ecosystem .ecogenn-treatment-product.treatment-product--large {
    display: grid;
    grid-template-columns: minmax(240px, 34%) 1fr;
    min-height: 218px;
    border: 1px solid rgba(24, 37, 31, .08);
    border-radius: 0;
    background: #f7f4ed;
    color: #18251f;
    box-shadow: 0 8px 22px rgba(62, 70, 52, .07);
}

.treatment-ecosystem .ecogenn-treatment-product:nth-child(even) {
    grid-template-columns: 1fr minmax(280px, 39%);
}

.treatment-ecosystem .ecogenn-treatment-product:nth-child(even) img,
.treatment-ecosystem .ecogenn-treatment-product:nth-child(even) .ecogenn-product-overlay {
    grid-column: 2;
}

.treatment-ecosystem .ecogenn-treatment-product:nth-child(even) .ecogenn-product-info {
    grid-column: 1;
    grid-row: 1;
}

.treatment-ecosystem .ecogenn-treatment-product img {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 218px;
    object-fit: cover;
    filter: saturate(.82);
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.treatment-ecosystem .ecogenn-treatment-product:hover img {
    transform: scale(1.06);
}

.treatment-ecosystem .ecogenn-product-overlay {
    grid-column: 1;
    grid-row: 1;
    inset: 0;
    background: linear-gradient(135deg, rgba(14, 48, 31, .12), rgba(14, 48, 31, .55));
}

.treatment-ecosystem .ecogenn-product-index {
    top: 22px;
    left: 22px;
    z-index: 3;
    color: #fff;
    font-size: 11px;
    letter-spacing: .15em;
}

.treatment-ecosystem .ecogenn-product-type {
    top: 24px;
    right: 22px;
    z-index: 3;
    color: #fff;
    font-size: 9px;
    letter-spacing: .13em;
}

.treatment-ecosystem .ecogenn-product-type i {
    color: #f3c38d;
}

.treatment-ecosystem .ecogenn-product-info {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px 38px;
    background: #f7f4ed;
}

.treatment-ecosystem .ecogenn-treatment-product:nth-child(2) .ecogenn-product-info {
    background: #e1eee3;
}

.treatment-ecosystem .ecogenn-treatment-product:nth-child(3) .ecogenn-product-info {
    background: #f1e9dd;
}

.treatment-ecosystem .ecogenn-treatment-product:nth-child(4) .ecogenn-product-info {
    background: #deecea;
}

.treatment-ecosystem .ecogenn-product-category {
    margin: 0 0 14px;
    color: #2b7549;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
}

.treatment-ecosystem .ecogenn-product-info strong {
    color: #18251f;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.7rem, 2.6vw, 2.75rem);
    font-weight: 400;
    line-height: .96;
    letter-spacing: -.055em;
}

.treatment-ecosystem .ecogenn-product-info strong em {
    color: #d26b3e;
    font-style: normal;
}

.treatment-ecosystem .ecogenn-product-info small {
    max-width: 420px;
    max-height: none;
    margin-top: 10px;
    color: #5c685f;
    font-size: 12px;
    line-height: 1.45;
    opacity: 1;
}

.treatment-ecosystem .ecogenn-product-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 13px;
    color: #18251f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.treatment-ecosystem .ecogenn-product-link i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d26b3e;
    color: #fff;
    font-size: 16px;
}

.treatment-ecosystem .ecogenn-treatment-footer {
    margin-top: 16px;
    padding: 15px 0 0;
    border-top: 1px solid rgba(24, 37, 31, .18);
    color: #69736b;
    font-size: 11px;
}

.treatment-ecosystem .ecogenn-treatment-footer>span {
    color: #2b7549;
    font-weight: 800;
    letter-spacing: .1em;
}

.treatment-ecosystem .ecogenn-treatment-footer>span i {
    color: #d26b3e;
}

.treatment-ecosystem .ecogenn-treatment-footer p {
    color: #69736b;
}

.treatment-ecosystem .ecogenn-treatment-footer a {
    color: #18251f;
}

@media (max-width: 991.98px) {
    .treatment-ecosystem {
        padding: 62px 0 32px;
    }

    .treatment-ecosystem__header {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 32px;
    }

    .treatment-ecosystem .ecogenn-treatment-product,
    .treatment-ecosystem .ecogenn-treatment-product:nth-child(even) {
        grid-template-columns: minmax(240px, 40%) 1fr;
    }

    .treatment-ecosystem .ecogenn-treatment-product:nth-child(even) img,
    .treatment-ecosystem .ecogenn-treatment-product:nth-child(even) .ecogenn-product-overlay {
        grid-column: 2;
    }

    .treatment-ecosystem .ecogenn-product-info {
        padding: 25px 28px;
    }
}

@media (max-width: 767.98px) {
    .treatment-ecosystem {
        padding: 48px 0 26px;
    }

    .treatment-ecosystem::after {
        right: 12px;
        bottom: 80px;
    }

    .treatment-ecosystem__header {
        margin-bottom: 25px;
    }

    .treatment-ecosystem .ecogenn-treatment-intro h2 {
        font-size: clamp(2.35rem, 11vw, 3.7rem);
    }

    .treatment-ecosystem .ecogenn-treatment-product,
    .treatment-ecosystem .ecogenn-treatment-product:nth-child(even) {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .treatment-ecosystem .ecogenn-treatment-product img {
        min-height: 180px;
    }

    .treatment-ecosystem .ecogenn-product-overlay {
        height: 180px;
    }

    .treatment-ecosystem .ecogenn-product-info {
        padding: 21px 20px 23px;
    }

    .treatment-ecosystem .ecogenn-product-info strong {
        font-size: 1.95rem;
    }

    .treatment-ecosystem .ecogenn-treatment-footer {
        display: block;
        margin-top: 14px;
    }

    .treatment-ecosystem .ecogenn-treatment-footer p {
        margin-top: 12px;
        line-height: 1.6;
    }
}

/* =========================================================
   ECOGENN | TREATMENT ATLAS — COMPLETE SECTION REPLACEMENT
========================================================= */
.treatment-ecosystem .treatment-ecosystem__legacy {
    display: none !important
}

.treatment-ecosystem {
    padding: 92px 0 10px;
    background: #eef5ef
}

.treatment-ecosystem::before,
.treatment-ecosystem::after {
    display: none
}

.solution-atlas {
    position: relative
}

.solution-atlas__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr);
    grid-template-areas: "eyebrow note" "title note";
    align-items: end;
    column-gap: 78px;
    row-gap: 0;
    margin-bottom: 20px
}

.solution-atlas__header p {
    grid-area: eyebrow;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 17px;
    color: #21814d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase
}

.solution-atlas__header p span {
    display: block;
    width: 32px;
    height: 1px;
    background: #21814d
}

.solution-atlas__header h2 {
    grid-area: title;
    max-width: 760px;
    margin: 0;
    color: #10271c;
    /* font-family: Georgia, 'Times New Roman', serif; */
    font-size: 35px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.04em
}

.solution-atlas__header h2 em {
    color: #258552;
    font-style: normal
}

.solution-atlas__header-note {
    grid-area: note;
    padding: 0 0 4px 23px;
    border-left: 1px solid #b9cfbe;
    color: #000;
    font-size: 15px;
    line-height: 1.65
}

.solution-atlas__panel {
    display: grid;
    grid-template-columns: minmax(310px, .88fr) minmax(0, 1.12fr);
    min-height: 570px;
    overflow: hidden;
    background: #12372a;
    box-shadow: 0 22px 45px rgba(18, 55, 42, .13)
}

.solution-atlas__visual {
    position: relative;
    overflow: hidden
}

.solution-atlas__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 35, 25, .08), rgba(9, 35, 25, .82))
}

.solution-atlas__visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.solution-atlas__visual-copy {
    position: absolute;
    z-index: 1;
    right: 28px;
    bottom: 29px;
    left: 28px;
    color: #fff
}

.solution-atlas__visual-copy span {
    display: block;
    margin-bottom: 8px;
    color: #b8efc8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.solution-atlas__visual-copy strong {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.85rem, 3vw, 3.1rem);
    font-weight: 400;
    letter-spacing: -.05em
}

.solution-atlas__routes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff
}

.solution-atlas__route {
    position: relative;
    display: grid;
    grid-template-columns: 30px 36px 1fr 22px;
    align-items: center;
    gap: 13px;
    padding: 31px 27px;
    color: #12291e;
    text-decoration: none;
    border-right: 1px solid #e3ebe4;
    border-bottom: 1px solid #e3ebe4;
    transition: background .25s ease, transform .25s ease
}

.solution-atlas__route:nth-child(even) {
    border-right: 0
}

.solution-atlas__route:nth-child(n+3) {
    border-bottom: 0
}

.solution-atlas__route-number {
    align-self: start;
    color: #73a884;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em
}

.solution-atlas__route>i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e7f3e9;
    color: #278250;
    font-size: 16px
}

.solution-atlas__route small {
    display: block;
    margin-bottom: 6px;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase
}

.solution-atlas__route strong {
    display: block;
    /* font-family: Georgia, 'Times New Roman', serif; */
    font-size: 20px;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.025em
}

.solution-atlas__route b {
    color: #2a8050;
    font-size: 20px;
    font-weight: 400;
    transition: transform .25s ease
}

.solution-atlas__route:hover {
    background: #e8f4ea;
    color: #12291e
}

.solution-atlas__route:hover b {
    transform: translate(3px, -3px)
}

.solution-atlas__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 2px 0;
    color: #000;
    font-size: 11px
}

.solution-atlas__footer>span {
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.solution-atlas__footer>span i {
    margin-right: 8px;
    color: #258552;
    font-size: 16px
}

.solution-atlas__footer a {
    color: #000;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase
}

.solution-atlas__footer a i {
    margin-left: 6px;
    color: #258552;
    font-size: 17px
}

@media(max-width:991.98px) {
    .treatment-ecosystem {
        padding: 72px 0 45px
    }

    .solution-atlas__header {
        grid-template-columns: 1fr;
        grid-template-areas: "eyebrow" "title" "note";
        gap: 22px
    }

    .solution-atlas__panel {
        grid-template-columns: .75fr 1.25fr;
        min-height: 500px
    }

    .solution-atlas__route {
        padding: 23px 18px;
        grid-template-columns: 25px 34px 1fr
    }

    .solution-atlas__route b {
        display: none
    }
}

@media(max-width:767.98px) {
    .treatment-ecosystem {
        padding: 58px 0 33px
    }

    .solution-atlas__header {
        margin-bottom: 33px
    }

    .solution-atlas__panel {
        display: block;
        min-height: 0
    }

    .solution-atlas__visual {
        height: 280px
    }

    .solution-atlas__routes {
        grid-template-columns: 1fr
    }

    .solution-atlas__route,
    .solution-atlas__route:nth-child(even),
    .solution-atlas__route:nth-child(n+3) {
        padding: 22px;
        border-right: 0;
        border-bottom: 1px solid #e3ebe4
    }

    .solution-atlas__route:last-child {
        border-bottom: 0
    }

    .solution-atlas__footer {
        display: block;
        line-height: 1.6
    }

    .solution-atlas__footer a {
        display: inline-block;
        margin-top: 10px
    }

    .solution-atlas__header h2 {
        font-size: 30px
    }
}

/* Treatment Atlas panel — panoramic layout */
.solution-atlas__panel {
    display: block;
    min-height: 0;
    background: #fff;
    box-shadow: 0 20px 42px rgba(18, 55, 42, .12)
}

.solution-atlas__visual {
    height: 310px
}

.solution-atlas__visual::after {
    background: linear-gradient(90deg, rgba(7, 31, 22, .76), rgba(7, 31, 22, .12) 72%)
}

.solution-atlas__visual-copy {
    right: auto;
    bottom: 34px;
    left: 38px
}

.solution-atlas__visual-copy strong {
    font-size: clamp(2rem, 3vw, 3rem)
}

.solution-atlas__routes {
    grid-template-columns: repeat(4, 1fr)
}

.solution-atlas__route,
.solution-atlas__route:nth-child(even),
.solution-atlas__route:nth-child(n+3) {
    display: flex;
    min-height: 177px;
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding: 25px 24px;
    border-right: 1px solid #e3ebe4;
    border-bottom: 0
}

.solution-atlas__route:last-child {
    border-right: 0
}

.solution-atlas__route-number {
    position: absolute;
    top: 17px;
    right: 18px
}

.solution-atlas__route>i {
    width: 42px;
    height: 42px
}

/* .solution-atlas__route strong {
    font-size: 1.38rem
} */

.solution-atlas__route b {
    position: absolute;
    right: 20px;
    bottom: 19px
}

@media(max-width:991.98px) {
    .solution-atlas__routes {
        grid-template-columns: 1fr 1fr
    }

    .solution-atlas__route,
    .solution-atlas__route:nth-child(even),
    .solution-atlas__route:nth-child(n+3) {
        min-height: 190px;
        border-bottom: 1px solid #e3ebe4
    }

    .solution-atlas__route:nth-child(even) {
        border-right: 0
    }

    .solution-atlas__route:nth-child(n+3) {
        border-bottom: 0
    }
}

@media(max-width:767.98px) {
    .solution-atlas__visual {
        height: 250px
    }

    .solution-atlas__visual-copy {
        bottom: 24px;
        left: 24px
    }

    .solution-atlas__routes {
        grid-template-columns: 1fr
    }

    .solution-atlas__route,
    .solution-atlas__route:nth-child(even),
    .solution-atlas__route:nth-child(n+3) {
        min-height: 142px;
        border-right: 0;
        border-bottom: 1px solid #e3ebe4
    }

    .solution-atlas__route:last-child {
        border-bottom: 0
    }
}

/* =========================================================
   ECOGENN | STP HANGING FRAME
   REALISTIC ROPE STYLE
========================================================= */

.ecogenn-stp-visual-wrap {
    position: relative;

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

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

    padding-top: 95px;

    overflow: visible;
}


/* =========================================================
   ROPE BASE
========================================================= */

.ecogenn-stp-rope {
    position: absolute;

    top: 0;

    z-index: 2;

    width: 14px;
    height: 155px;

    border-radius: 10px;

    /* braided rope appearance */
    background:
        repeating-linear-gradient(135deg,
            #f0d2a3 0px,
            #f0d2a3 2px,
            #c49a68 2px,
            #c49a68 4px,
            #ead0a4 4px,
            #ead0a4 6px,
            #a87d4d 6px,
            #a87d4d 8px);

    box-shadow:
        inset 2px 0 2px rgba(255, 255, 255, 0.45),
        inset -2px 0 2px rgba(73, 47, 25, 0.25),
        1px 2px 4px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   ROPE TWISTING EFFECT
========================================================= */

.ecogenn-stp-rope::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 10px;

    background:
        repeating-linear-gradient(135deg,
            transparent 0px,
            transparent 4px,
            rgba(92, 62, 35, 0.35) 4px,
            rgba(92, 62, 35, 0.35) 6px,
            transparent 6px,
            transparent 10px);

    opacity: 0.85;

    pointer-events: none;
}


/* =========================================================
   ROPE HIGHLIGHT
========================================================= */

.ecogenn-stp-rope::after {

    content: "";

    position: absolute;

    left: 3px;
    top: 0;

    width: 3px;
    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.65),
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.45));

    opacity: 0.8;

    pointer-events: none;
}


/* =========================================================
   ROPE POSITION
========================================================= */

.rope-left {
    left: 27%;
}


.rope-right {
    right: 27%;
}


/* =========================================================
   ROPE KNOT / LOOP
========================================================= */

.rope-knot {

    position: absolute;

    left: 50%;
    bottom: -13px;

    width: 25px;
    height: 22px;

    transform: translateX(-50%);

    border: 5px solid #a77c4d;

    border-top: 0;

    border-radius:
        0 0 14px 14px;

    background: transparent;

    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   KNOT INNER ROPE
========================================================= */

.rope-knot::before {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -6px;

    width: 8px;
    height: 12px;

    transform:
        translateX(-50%) rotate(8deg);

    border-radius: 5px;

    background:
        repeating-linear-gradient(135deg,
            #e8c99b 0px,
            #e8c99b 2px,
            #a77c4d 2px,
            #a77c4d 4px);
}


/* =========================================================
   SMALL METAL / WOOD CONNECTION
========================================================= */

.rope-knot::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -17px;

    width: 13px;
    height: 13px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(circle at 35% 30%,
            #e5cda8 0%,
            #b38b5d 45%,
            #705133 100%);

    border:
        1px solid #795a3b;

    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.2);
}


/* =========================================================
   FRAME
========================================================= */

.ecogenn-stp-frame {

    position: relative;

    z-index: 5;

    width: 88%;
    max-width: 570px;

    height: 500px;

    margin-top: 35px;

    padding: 10px;

    background:
        linear-gradient(135deg,
            #e2c59a 0%,
            #b58b5b 18%,
            #d5b37d 38%,
            #9a7048 58%,
            #d7b77f 78%,
            #a67a4d 100%);

    clip-path:
        polygon(13% 0%,
            87% 0%,
            100% 13%,
            100% 87%,
            87% 100%,
            13% 100%,
            0% 87%,
            0% 13%);

    filter:
        drop-shadow(0 25px 30px rgba(13, 23, 31, 0.18));

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


/* =========================================================
   WOOD FRAME INNER EDGE
========================================================= */

.ecogenn-stp-frame::before {

    content: "";

    position: absolute;

    inset: 5px;

    z-index: 5;

    pointer-events: none;

    clip-path:
        polygon(13% 0%,
            87% 0%,
            100% 13%,
            100% 87%,
            87% 100%,
            13% 100%,
            0% 87%,
            0% 13%);

    border:
        2px solid rgba(255, 255, 255, 0.35);
}


/* =========================================================
   FRAME TOP CONNECTION POINTS
========================================================= */

.stp-frame-hook {

    position: absolute;

    top: -4px;

    z-index: 10;

    width: 30px;
    height: 23px;

    border-radius:
        0 0 10px 10px;

    background:
        linear-gradient(90deg,
            #777a76,
            #282c2a 45%,
            #8b8e89);

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

    box-shadow:
        0 3px 5px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   HOOK TOP RING
========================================================= */

.stp-frame-hook::before {

    content: "";

    position: absolute;

    left: 50%;
    top: -11px;

    width: 13px;
    height: 13px;

    transform:
        translateX(-50%);

    border:
        3px solid #565956;

    border-radius: 50%;

    background: transparent;
}


/* =========================================================
   HOOK HIGHLIGHT
========================================================= */

.stp-frame-hook::after {

    content: "";

    position: absolute;

    left: 6px;
    right: 6px;

    top: 4px;

    height: 3px;

    border-radius: 5px;

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


/* =========================================================
   HOOK POSITIONS
========================================================= */

.hook-left {
    left: 22%;
}


.hook-right {
    right: 22%;
}


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

.ecogenn-stp-image {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #dce9e1;

    clip-path:
        polygon(13% 0%,
            87% 0%,
            100% 13%,
            100% 87%,
            87% 100%,
            13% 100%,
            0% 87%,
            0% 13%);
}


.ecogenn-stp-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.ecogenn-stp-frame:hover .ecogenn-stp-image img {

    transform: scale(1.05);
}


/* =========================================================
   ROPE ALIGNMENT WITH HOOKS
========================================================= */

.rope-left {
    transform: translateX(0);
}


.rope-right {
    transform: translateX(0);
}


/* =========================================================
   SUBTLE HANGING MOTION
========================================================= */

@keyframes stpRopeSwing {

    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(0.7deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


.rope-left,
.rope-right {

    transform-origin:
        top center;

    animation:
        stpRopeSwing 5s ease-in-out infinite;
}


.rope-right {

    animation-delay: -2.5s;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991.98px) {

    .ecogenn-stp-visual-wrap {

        min-height: 555px;

        padding-top: 80px;
    }


    .ecogenn-stp-rope {

        height: 125px;

        width: 12px;
    }


    .rope-left {
        left: 27%;
    }


    .rope-right {
        right: 27%;
    }


    .ecogenn-stp-frame {

        width: 86%;

        height: 450px;

        margin-top: 30px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .ecogenn-stp-visual-wrap {

        min-height: 420px;

        padding-top: 65px;
    }


    .ecogenn-stp-rope {

        width: 9px;

        height: 95px;
    }


    .rope-left {
        left: 23%;
    }


    .rope-right {
        right: 23%;
    }


    .ecogenn-stp-frame {

        width: 94%;

        height: 340px;

        margin-top: 20px;

        padding: 7px;
    }


    .stp-frame-hook {

        width: 23px;

        height: 18px;
    }


    .hook-left {
        left: 21%;
    }


    .hook-right {
        right: 21%;
    }


    .rope-knot {

        width: 20px;
        height: 18px;

        border-width: 4px;
    }

}


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

@media (max-width: 480px) {

    .ecogenn-stp-visual-wrap {

        min-height: 350px;

        padding-top: 55px;
    }


    .ecogenn-stp-rope {

        width: 7px;

        height: 78px;
    }


    .rope-left {
        left: 21%;
    }


    .rope-right {
        right: 21%;
    }


    .ecogenn-stp-frame {

        width: 96%;

        height: 285px;

        margin-top: 15px;
    }


    .stp-frame-hook {

        width: 19px;
        height: 15px;
    }


    .rope-knot {

        width: 17px;
        height: 15px;

        border-width: 3px;
    }

}

/* =========================================================
   ECOGENN | STP
   RIGHT SIDE CONTENT
========================================================= */

.ecogenn-stp-content {
    position: relative;
    z-index: 5;

    padding-left: 20px;

    max-width: 620px;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.ecogenn-stp-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 16px;

    color: #198754;


    text-transform: uppercase;
}


.ecogenn-stp-label::before {
    content: "";

    width: 30px;
    height: 2px;

    border-radius: 10px;

    background: #198754;
}


/* =========================================================
   H2
========================================================= */

.ecogenn-stp-content h2 {
    margin: 0;

    max-width: 580px;

    color: #000000;


}


.ecogenn-stp-content h2 span {
    display: block;

    color: #198754;
}


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

.ecogenn-stp-divider {
    width: 52px;
    height: 3px;

    margin: 20px 0;

    border-radius: 10px;

    background: #198754;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.ecogenn-stp-intro {
    max-width: 570px;

    margin: 0 0 32px;

    color: #000000;


}


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

.ecogenn-stp-features {
    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-bottom: 30px;
}


/* =========================================================
   FEATURE ITEM
========================================================= */

.ecogenn-stp-feature {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 4px 0;

    transition:
        transform 0.3s ease;
}


.ecogenn-stp-feature:hover {
    transform: translateX(5px);
}


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

.ecogenn-stp-feature-icon {
    flex-shrink: 0;

    width: 44px;
    height: 44px;

    display: flex;

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

    border: 1px solid #d9ebe0;

    border-radius: 12px;

    background: #f3faf6;

    color: #198754;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease;
}


.ecogenn-stp-feature:hover .ecogenn-stp-feature-icon {
    background: #198754;

    border-color: #198754;

    color: #ffffff;

    transform: scale(1.06);
}


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

.ecogenn-stp-feature-content {
    flex: 1;

    min-width: 0;
}


/* =========================================================
   H3
========================================================= */

.ecogenn-stp-feature h3 {
    margin: 0 0 7px;

    color: #000000;


}


/* =========================================================
   FEATURE PARAGRAPH
========================================================= */

.ecogenn-stp-feature p {
    max-width: 500px;

    margin: 0;

    color: #000000;


}


/* =========================================================
   APPLICATIONS / USE CASES
========================================================= */

.ecogenn-stp-applications {
    padding-top: 20px;

    margin-bottom: 10px;

    border-top: 1px solid #e1e9e4;
}


.ecogenn-stp-applications>span {
    display: block;

    margin-bottom: 12px;

    color: #000000;


    text-transform: uppercase;
}


.ecogenn-stp-applications>div {
    display: flex;

    flex-wrap: wrap;
    color: #000;
    gap: 8px;
}


.ecogenn-stp-applications b {
    display: inline-flex;

    align-items: center;

    padding: 8px 13px;

    border: 1px solid #dfe8e2;

    border-radius: 50px;

    background: #ffffff;

    color: #000000;


    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.ecogenn-stp-applications b:hover {
    border-color: #198754;

    background: #eef9f2;

    color: #198754;

    transform: translateY(-2px);
}


/* =========================================================
   CTA
========================================================= */

.ecogenn-stp-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    padding:
        12px 13px 12px 19px;

    border-radius: 9px;

    background: #198754;

    color: #ffffff;

    text-decoration: none;


    box-shadow:
        0 10px 25px rgba(25, 135, 84, 0.18);

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
    margin: 10px;
}


.ecogenn-stp-btn:hover {
    background: #198754;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 15px 30px rgba(25, 135, 84, 0.25);
}


.ecogenn-stp-btn i {
    width: 30px;
    height: 30px;

    display: flex;

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

    border-radius: 7px;

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

    color: #ffffff;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.ecogenn-stp-btn:hover i {
    transform:
        translate(2px, -2px);

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


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

.ecogenn-stp-trust {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 24px;

    padding-top: 18px;

    border-top:
        1px solid #edf1ee;
}


.ecogenn-stp-trust-item {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #000000;

}


.ecogenn-stp-trust-item i {
    color: #198754;

}


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

@media (max-width: 991.98px) {

    .ecogenn-stp-content {
        padding-left: 0;

        max-width: 100%;
    }


    .ecogenn-stp-content h2 {
        max-width: 650px;

    }


    .ecogenn-stp-intro {
        max-width: 650px;

    }





    .ecogenn-stp-feature p {
        max-width: 620px;

    }

}


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

@media (max-width: 767.98px) {

    .ecogenn-stp-content {
        padding-left: 0;

        margin-top: 10px;
    }





    .ecogenn-stp-divider {
        margin: 18px 0;
    }


    .ecogenn-stp-intro {
        margin-bottom: 25px;

    }


    .ecogenn-stp-features {
        gap: 18px;

        margin-bottom: 25px;
    }


    .ecogenn-stp-feature {
        gap: 12px;
    }


    .ecogenn-stp-feature-icon {
        width: 40px;
        height: 40px;

        border-radius: 10px;

    }





    .ecogenn-stp-applications {
        padding-top: 17px;

        margin-bottom: 24px;
    }




    .ecogenn-stp-applications b {
        padding: 7px 11px;
    }


    .ecogenn-stp-trust {
        flex-wrap: wrap;

        gap: 12px;
    }


}


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

@media (max-width: 480px) {




    .ecogenn-stp-applications b {
        padding: 6px 10px;
    }


    .ecogenn-stp-btn {
        width: 100%;

        justify-content: space-between;

    }


}


































/* =========================================================
   ECOGENN | O&M AND AMC SUPPORT
========================================================= */

.eg-om-section {
    position: relative;

    padding: 25px 25px;

    background: #ffffff;

    overflow: hidden;
}


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

.eg-om-wrapper {
    position: relative;

    display: grid;

    grid-template-columns: 330px minmax(0, 1fr);

    align-items: center;

    gap: 45px;

    max-width: 1450px;

    min-height: 690px;

    margin: 0 auto;

    padding: 20px 35px;

    border: 1px solid #dce8e1;

    border-radius: 28px;

    background: #fbfefc;

    box-shadow:
        0 15px 45px rgba(13, 23, 31, 0.055);
}


/* =========================================================
   ENGINEERING GRID
========================================================= */

.eg-om-grid {
    position: absolute;

    inset: 0;

    opacity: 0.65;

    pointer-events: none;

    background-image:
        linear-gradient(rgba(25, 135, 84, 0.035) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(25, 135, 84, 0.035) 1px,
            transparent 1px);

    background-size: 38px 38px;
}


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

.eg-om-intro {
    position: relative;

    z-index: 10;

    align-self: center;

    padding-left: 15px;
}


.eg-om-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 14px;

    color: #198754;


    text-transform: uppercase;
}


.eg-om-label::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 10px;

    background: #198754;
}


.eg-om-intro h2 {
    margin: 0;

    color: #000000;


}


.eg-om-intro h2 span {
    display: block;

    color: #198754;
}


.eg-om-heading-line {
    width: 45px;
    height: 3px;

    margin: 20px 0;

    border-radius: 20px;

    background: #198754;
}


.eg-om-intro>p {
    max-width: 315px;

    margin: 0;

    color: #000000;

}


/* =========================================================
   RELIABILITY
========================================================= */

.eg-om-reliability {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 35px;
}


.eg-om-reliability-icon {
    flex-shrink: 0;

    width: 45px;
    height: 45px;

    display: flex;

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

    border: 2px solid #198754;

    border-radius: 10px;

    color: #198754;

}


.eg-om-reliability strong {
    display: block;

    color: #000000;

}


.eg-om-reliability span {
    display: block;

    margin-top: 3px;

    color: #000000;

}


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

.eg-om-network {
    position: relative;

    z-index: 3;

    width: 100%;

    min-height: 640px;

    overflow: visible;
}


/* =========================================================
   ORBITS
========================================================= */

.eg-om-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    pointer-events: none;
}


.eg-om-orbit-one {
    width: 470px;
    height: 470px;

    border: 1px solid rgba(25, 135, 84, 0.09);
}


.eg-om-orbit-two {
    width: 330px;
    height: 330px;

    border: 1px dashed rgba(25, 135, 84, 0.13);
}


/* =========================================================
   CENTRAL HUB
========================================================= */

.eg-om-hub {
    position: absolute;

    z-index: 20;

    left: 50%;
    top: 50%;

    width: 190px;
    height: 190px;

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

    display: flex;

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


.eg-om-hub-ring {
    position: absolute;

    border-radius: 50%;
}


.eg-hub-ring-one {
    inset: 0;

    border: 1px solid rgba(25, 135, 84, 0.32);
}


.eg-hub-ring-two {
    inset: 14px;

    border: 1px dashed rgba(25, 135, 84, 0.25);
}


.eg-om-hub-core {
    position: relative;

    z-index: 4;

    width: 138px;
    height: 138px;

    display: flex;

    flex-direction: column;

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

    border: 8px solid #ffffff;

    border-radius: 50%;

    background:
        linear-gradient(145deg,
            #ffffff,
            #eef9f2);

    box-shadow:
        0 15px 35px rgba(13, 23, 31, 0.12);
}


.eg-om-hub-icon {
    width: 44px;
    height: 44px;

    display: flex;

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

    margin-bottom: 8px;

    border-radius: 50%;

    background: #198754;

    color: #ffffff;

    box-shadow:
        0 7px 17px rgba(25, 135, 84, 0.22);
}


.eg-om-hub-core strong {
    color: #000000;


}


.eg-om-hub-core span {
    margin-top: 3px;

    color: #000000;


}


/* =========================================================
   CONNECTORS
========================================================= */

.eg-om-connector {
    position: absolute;

    z-index: 5;

    background: #198754;

    opacity: 0.65;
}


.eg-om-connector span {
    position: absolute;

    width: 12px;
    height: 12px;

    border: 3px solid #ffffff;

    border-radius: 50%;

    background: #198754;

    box-shadow:
        0 0 0 4px rgba(25, 135, 84, 0.10);
}


/* TOP */

.eg-connector-top {
    left: 50%;
    top: 112px;

    width: 2px;
    height: 100px;

    transform: translateX(-50%);
}


.eg-connector-top span {
    left: 50%;
    bottom: -5px;

    transform: translateX(-50%);
}


/* RIGHT */

.eg-connector-right {
    right: 160px;
    top: 50%;

    width: 105px;
    height: 2px;

    transform: translateY(-50%);
}


.eg-connector-right span {
    right: -5px;
    top: 50%;

    transform: translateY(-50%);
}


/* LEFT */

.eg-connector-left {
    left: 160px;
    top: 50%;

    width: 105px;
    height: 2px;

    transform: translateY(-50%);
}


.eg-connector-left span {
    left: -5px;
    top: 50%;

    transform: translateY(-50%);
}


/* BOTTOM */

.eg-connector-bottom {
    left: 50%;
    bottom: 112px;

    width: 2px;
    height: 100px;

    transform: translateX(-50%);
}


.eg-connector-bottom span {
    left: 50%;
    top: -5px;

    transform: translateX(-50%);
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.eg-om-card {
    position: absolute;

    z-index: 15;

    display: grid;

    grid-template-columns: auto 48px minmax(0, 1fr);

    gap: 13px;

    width: 350px;

    padding: 17px;

    border: 1px solid #d9e6de;

    border-radius: 16px;

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

    box-shadow:
        0 12px 30px rgba(13, 23, 31, 0.075);

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


.eg-om-card:hover {
    border-color: rgba(25, 135, 84, 0.38);

    box-shadow:
        0 18px 38px rgba(13, 23, 31, 0.11);
}


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

.eg-om-card-top {
    left: 50%;
    top: 34px;

    transform: translateX(-50%);
}


.eg-om-card-right {
    right: 0;
    top: 50%;

    transform: translateY(-50%);
}


.eg-om-card-left {
    left: 0;
    top: 50%;

    transform: translateY(-50%);
}


.eg-om-card-bottom {
    left: 50%;
    bottom: 15px;

    transform: translateX(-50%);
}


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

.eg-om-card-top:hover {
    transform: translateX(-50%) translateY(-5px);
}


.eg-om-card-right:hover {
    transform: translateY(-50%) translateX(-5px);
}


.eg-om-card-left:hover {
    transform: translateY(-50%) translateX(5px);
}


.eg-om-card-bottom:hover {
    transform: translateX(-50%) translateY(5px);
}


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

.eg-om-card-number {
    padding-top: 4px;

    color: #198754;


}


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

.eg-om-card-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    border: 1px solid #d5e9dc;

    border-radius: 12px;

    background: #f1faf5;

    color: #198754;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.eg-om-card:hover .eg-om-card-icon {
    background: #198754;

    color: #ffffff;

    transform: scale(1.05);
}


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

.eg-om-card-label {
    display: block;

    margin-bottom: 4px;

    color: #198754;


}


.eg-om-card h3 {
    margin: 0;

    color: #000000;


}


.eg-om-small-line {
    width: 32px;
    height: 2px;

    margin: 9px 0 9px;

    border-radius: 10px;

    background: #198754;
}


.eg-om-card p {
    margin: 0;

    color: #000000;

}


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

@media (max-width: 1199.98px) {

    .eg-om-wrapper {
        grid-template-columns: 280px minmax(0, 1fr);

        gap: 25px;

        padding: 20px;
    }

    .eg-om-card {
        width: 315px;
    }

    .eg-connector-left {
        left: 135px;
        width: 90px;
    }

    .eg-connector-right {
        right: 135px;
        width: 90px;
    }

}


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

@media (max-width: 991.98px) {

    .eg-om-section {
        padding: 25px 25px;
    }

    .eg-om-wrapper {
        display: block;

        min-height: auto;

        padding: 45px 25px;
    }

    .eg-om-intro {
        max-width: 600px;

        margin: 0 auto 50px;

        padding-left: 0;

        text-align: center;
    }

    .eg-om-intro>p {
        max-width: 600px;

        margin-left: auto;
        margin-right: auto;
    }

    .eg-om-label {
        justify-content: center;
    }

    .eg-om-heading-line {
        margin-left: auto;
        margin-right: auto;
    }

    .eg-om-reliability {
        justify-content: center;

        text-align: left;
    }

    .eg-om-network {
        min-height: 700px;
    }

}


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

@media (max-width: 767.98px) {

    .eg-om-section {
        padding: 25px 25px;
    }

    .eg-om-wrapper {
        padding: 35px 16px;

        border-radius: 20px;
    }

    .eg-om-intro {
        margin-bottom: 35px;
    }



    .eg-om-reliability {
        justify-content: flex-start;

        margin-top: 25px;
    }

    /* -----------------------------------------
       MOBILE NETWORK
    ----------------------------------------- */

    .eg-om-network {
        display: flex;

        flex-direction: column;

        gap: 15px;

        min-height: auto;

        padding: 25px 10px;

        overflow: hidden;
    }

    .eg-om-orbit,
    .eg-om-connector {
        display: none;
    }

    /* Hub first */

    .eg-om-hub {
        position: relative;

        left: auto;
        top: auto;

        width: 150px;
        height: 150px;

        margin: 0 auto 10px;

        transform: none;
    }

    .eg-om-hub-core {
        width: 110px;
        height: 110px;

        border-width: 5px;
    }

    .eg-om-hub-icon {
        width: 35px;
        height: 35px;

        margin-bottom: 5px;
    }


    /* Cards */

    .eg-om-card {
        position: relative;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        width: 100%;

        transform: none !important;

        grid-template-columns: auto 45px minmax(0, 1fr);
    }

    .eg-om-card:hover {
        transform: translateY(-3px) !important;
    }

    .eg-om-card-icon {
        width: 45px;
        height: 45px;
    }



}


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

@media (max-width: 480px) {

    .eg-om-wrapper {
        padding: 30px 12px;
    }



    .eg-om-card {
        grid-template-columns: auto 42px minmax(0, 1fr);

        gap: 9px;

        padding: 14px;
    }

    .eg-om-card-icon {
        width: 42px;
        height: 42px;
    }


}












/* =========================================================
   ECOGENN | SERVICES CTA
   BACKGROUND IMAGE DESIGN
========================================================= */

/* Final cascade for the O&M / AMC support dashboard. */
.eg-om-section {
    padding: 48px 25px;
    background: linear-gradient(180deg, #f8fcf9, #fff);
}

.eg-om-wrapper {
    grid-template-columns: 370px minmax(0, 1fr);
    gap: 36px;
    min-height: 700px;
    padding: 28px;
    overflow: hidden;
    border-color: rgba(25, 135, 84, .18);
    border-radius: 32px;
    background: radial-gradient(circle at 74% 12%, rgba(25, 135, 84, .10), transparent 28%), linear-gradient(135deg, #f8fdf9, #eef8f1);
    box-shadow: 0 24px 60px rgba(16, 66, 37, .12);
}

.eg-om-intro {
    padding: 38px 32px;
    border: 1px solid rgba(25, 135, 84, .13);
    border-radius: 24px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 18px 36px rgba(15, 67, 37, .08);
}

.eg-om-label {
    padding: 7px 12px;
    border-radius: 999px;
    background: #e7f8ed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.eg-om-intro h2 {
    line-height: 1.12;
}

.eg-om-heading-line {
    width: 58px;
    height: 4px;
    margin: 22px 0;
}

.eg-om-intro>p {
    max-width: none;
    color: #000;
    line-height: 1.75;
}

.eg-om-reliability {
    margin-top: 28px;
    padding: 14px;
    border-radius: 14px;
    background: #f1faf4;
}

.eg-om-reliability-icon {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: #198754;
    box-shadow: 0 8px 16px rgba(25, 135, 84, .22);
}

.eg-om-reliability strong {
    color: #198754;
}

.eg-om-reliability span {
    color: #000;
}

.eg-om-network {
    border-radius: 24px;
    background: rgba(255, 255, 255, .43);
}

.eg-om-grid {
    border: 1px solid rgba(25, 135, 84, .08);
    border-radius: 24px;
}

.eg-om-orbit-one {
    border-color: rgba(25, 135, 84, .18);
    box-shadow: 0 0 0 24px rgba(25, 135, 84, .025);
}

.eg-om-orbit-two {
    border-color: rgba(25, 135, 84, .28);
}

.eg-om-hub-core {
    background: linear-gradient(145deg, #fff, #ddf5e5);
    box-shadow: 0 18px 38px rgba(13, 73, 38, .16);
}

.eg-om-card {
    border-color: rgba(18, 81, 44, .13);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 30px rgba(15, 67, 37, .10);
}

.eg-om-card:hover {
    border-color: rgba(25, 135, 84, .48);
    box-shadow: 0 20px 38px rgba(15, 67, 37, .16);
}

.eg-om-card-number {
    color: #198754;
    font-weight: 700;
}

.eg-om-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.eg-om-card h3 {
    color: #198754;
    line-height: 1.25;
}

.eg-om-card p {
    color: #000;
    line-height: 1.6;
}

@media (max-width: 1199.98px) {
    .eg-om-wrapper {
        grid-template-columns: 315px minmax(0, 1fr);
        gap: 24px;
    }

    .eg-om-intro {
        padding: 30px 24px;
    }
}

@media (max-width: 991.98px) {
    .eg-om-section {
        padding: 36px 20px;
    }

    .eg-om-wrapper {
        padding: 28px 22px;
    }

    .eg-om-intro {
        padding: 32px 26px;
    }
}

@media (max-width: 767.98px) {
    .eg-om-section {
        padding: 28px 14px;
    }

    .eg-om-wrapper {
        padding: 18px 12px;
        border-radius: 22px;
    }

    .eg-om-intro {
        padding: 28px 20px;
        border-radius: 18px;
    }

    .eg-om-network,
    .eg-om-grid {
        border-radius: 18px;
    }
}

/* =========================================================
   O&M / AMC SUPPORT — SIMPLIFIED SERVICE GRID
========================================================= */

.eg-om-section {
    padding: 76px 0;
    background: linear-gradient(180deg, #f7fcf8 0%, #fff 100%);
}

.eg-om-wrapper {
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.55fr);
    align-items: stretch;
    min-height: 0;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dceee1;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 67, 37, .09);
}

.eg-om-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    padding: 52px 42px;
    border: 0;
    border-right: 1px solid #dceee1;
    border-radius: 0;
    background: linear-gradient(155deg, #effaf2 0%, #fbfefc 76%);
    box-shadow: none;
}

.eg-om-intro h2 {
    font-size: clamp(2rem, 3vw, 3rem);
}

.eg-om-intro>p {
    font-size: 16px;
}

.eg-om-reliability {
    margin-top: 32px;
}

.eg-om-network {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 16px;
    min-height: 0;
    padding: 34px;
    border-radius: 0;
    background: #fff;
}

.eg-om-network-intro {
    grid-column: 1 / -1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding: 0 2px 10px;
}

.eg-om-network-intro span {
    color: #198754;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
}

.eg-om-network-intro p {
    margin: 0;
    color: #000;
    font-size: 14px;
    text-align: right;
}

.eg-om-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 48px minmax(0, 1fr);
    gap: 14px;
    width: auto;
    min-height: 194px;
    padding: 24px 20px;
    border: 1px solid #e0ece4;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    transform: none;
}

.eg-om-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    width: 36px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: #198754;
}

.eg-om-card:hover,
.eg-om-card-top:hover,
.eg-om-card-right:hover,
.eg-om-card-left:hover,
.eg-om-card-bottom:hover {
    border-color: rgba(25, 135, 84, .5);
    box-shadow: 0 12px 26px rgba(15, 67, 37, .10);
    transform: translateY(-4px);
}

.eg-om-card-number {
    padding-top: 7px;
    color: #198754;
    font-size: 13px;
}

.eg-om-card h3 {
    font-size: 18px;
}

.eg-om-card p {
    font-size: 14px;
    line-height: 1.65;
}

@media (max-width: 991.98px) {
    .eg-om-section {
        padding: 54px 0;
    }

    .eg-om-wrapper {
        display: block;
    }

    .eg-om-intro {
        min-height: 0;
        padding: 42px 36px;
        border-right: 0;
        border-bottom: 1px solid #dceee1;
        text-align: left;
    }

    .eg-om-label,
    .eg-om-reliability {
        justify-content: flex-start;
    }

    .eg-om-heading-line {
        margin-left: 0;
    }

    .eg-om-intro>p {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 767.98px) {
    .eg-om-section {
        padding: 38px 14px;
    }

    .eg-om-intro {
        padding: 34px 24px;
    }

    .eg-om-network {
        grid-template-columns: 1fr;
        padding: 24px 18px;
    }

    .eg-om-network-intro {
        display: block;
        padding-bottom: 2px;
    }

    .eg-om-network-intro p {
        margin-top: 6px;
        text-align: left;
    }

    .eg-om-card {
        min-height: 0;
        padding: 21px 16px;
    }
}

.eg-services-cta {

    position: relative;

    min-height: 380px;

    display: flex;

    align-items: center;

    padding: 70px 0;

    overflow: hidden;

    background-image:
        url("../home-img/hero1.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


/* =========================================================
   DARK GREEN OVERLAY
========================================================= */

.eg-services-cta-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(5, 18, 13, 0.92) 0%,
            rgba(5, 18, 13, 0.78) 45%,
            rgba(5, 18, 13, 0.58) 100%);

    z-index: 1;
}


/* =========================================================
   SUBTLE GREEN LIGHT
========================================================= */

.eg-services-cta::before {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: -170px;

    border-radius: 50%;

    border: 1px solid rgba(25, 135, 84, 0.20);

    z-index: 2;

    pointer-events: none;
}


.eg-services-cta::after {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: -130px;
    bottom: -150px;

    border-radius: 50%;

    background:
        rgba(25, 135, 84, 0.08);

    z-index: 2;

    pointer-events: none;
}


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

.eg-services-cta-content {

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr) minmax(300px, 0.8fr);

    align-items: center;

    gap: 70px;
}


/* =========================================================
   LEFT TEXT
========================================================= */

.eg-services-cta-text {

    max-width: 680px;
}


/* =========================================================
   LABEL
========================================================= */

.eg-services-cta-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    color: #198754;


    text-transform: uppercase;
}


.eg-services-cta-label::before {

    content: "";

    width: 30px;
    height: 2px;

    border-radius: 10px;

    background: #198754;
}


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

.eg-services-cta-text h2 {

    margin: 0;

    max-width: 650px;

    color: #ffffff;


}


.eg-services-cta-text h2 span {

    display: block;

    color: #198754;
}


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

.eg-services-cta-text p {

    max-width: 610px;

    margin: 18px 0 0;

    color: rgba(255, 255, 255);

}


/* =========================================================
   RIGHT CTA CARD
========================================================= */

.eg-services-cta-action {

    display: flex;

    justify-content: flex-end;
}


.eg-services-cta-card {

    width: 100%;

    max-width: 360px;

    padding: 28px;

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

    border-radius: 18px;

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

    backdrop-filter: blur(14px);

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

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.20);
}


.eg-services-cta-card>span {

    display: block;

    margin-bottom: 9px;

    color: #198754;


}


.eg-services-cta-card strong {

    display: block;

    margin-bottom: 21px;

    color: #ffffff;


}


/* =========================================================
   CTA BUTTON
========================================================= */

.eg-services-cta-btn {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    width: 100%;

    padding: 10px 11px 10px 18px;

    border-radius: 9px;

    background: #198754;

    color: #ffffff;

    text-decoration: none;


    box-shadow:
        0 10px 25px rgba(25, 135, 84, 0.25);

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.eg-services-cta-btn i {

    width: 31px;
    height: 31px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 7px;

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

    transition:
        transform 0.3s ease;
}


.eg-services-cta-btn:hover {

    background: #198754;

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(25, 135, 84, 0.32);
}


.eg-services-cta-btn:hover i {

    transform:
        translate(2px, -2px);
}


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

@media (max-width: 991.98px) {

    .eg-services-cta {

        min-height: 400px;

        padding: 60px 0;
    }


    .eg-services-cta-content {

        grid-template-columns:
            minmax(0, 1fr) minmax(280px, 0.75fr);

        gap: 40px;
    }




    .eg-services-cta-card {

        max-width: 320px;

        padding: 24px;
    }

}


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

@media (max-width: 767.98px) {

    .eg-services-cta {

        min-height: auto;

        padding: 60px 0;
    }


    .eg-services-cta-overlay {

        background:
            linear-gradient(180deg,
                rgba(5, 18, 13, 0.90),
                rgba(5, 18, 13, 0.82));
    }


    .eg-services-cta-content {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 30px;
    }


    .eg-services-cta-text {

        max-width: 100%;
    }




    .eg-services-cta-action {

        width: 100%;

        justify-content: flex-start;
    }


    .eg-services-cta-card {

        max-width: 100%;

        padding: 23px;
    }



}


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

@media (max-width: 480px) {

    .eg-services-cta {

        padding: 50px 0;
    }





    .eg-services-cta-card {

        padding: 20px;
    }

}






















/* =========================================================
   ECOGENN | WHY CHOOSE ECOGENN
========================================================= */

.ecogenn-why-section {
    position: relative;

    padding: 25px 25px;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.ecogenn-why-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -250px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background: rgba(25, 135, 84, 0.035);

    pointer-events: none;
}


.ecogenn-why-section::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    bottom: 40px;

    border: 1px solid rgba(25, 135, 84, 0.10);

    border-radius: 50%;

    pointer-events: none;
}


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

.ecogenn-why-heading {
    position: relative;

    z-index: 2;

    max-width: 720px;

    margin: 0 auto 45px;

    text-align: center;
}


/* =========================================================
   LABEL
========================================================= */

.ecogenn-why-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    color: #198754;


    text-transform: uppercase;
}


.ecogenn-why-label::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 10px;

    background: #198754;
}


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

.ecogenn-why-heading h2 {
    margin: 0;

    color: #000000;


}


.ecogenn-why-heading h2 span {
    color: #198754;
}


.ecogenn-why-heading p {
    max-width: 650px;

    margin: 15px auto 0;

    color: #000000;
    text-align: center;

}


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

.ecogenn-why-card {
    position: relative;

    height: 100%;

    min-height: 235px;

    padding: 24px 24px 27px;

    border: 1px solid #e2eae5;

    border-radius: 18px;

    background: #ffffff;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(13, 23, 31, 0.045);

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


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

.ecogenn-why-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(25, 135, 84, 0.35);

    box-shadow:
        0 18px 40px rgba(13, 23, 31, 0.10);
}


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

.ecogenn-why-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;
}


/* =========================================================
   NUMBER
========================================================= */

.ecogenn-why-number {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #198754;


}


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

.ecogenn-why-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #d8ece0;

    border-radius: 13px;

    background: #f2faf5;

    color: #198754;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.ecogenn-why-card:hover .ecogenn-why-icon {
    background: #198754;

    color: #ffffff;

    transform: rotate(-4deg) scale(1.05);
}


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

.ecogenn-why-card-content {
    position: relative;

    z-index: 2;
}


.ecogenn-why-card-content h3 {
    margin: 0 0 10px;

    color: #000000;


}


.ecogenn-why-card-content p {
    margin: 0;

    color: #000000;

}


/* =========================================================
   GREEN BOTTOM ACCENT
========================================================= */

.ecogenn-why-line {
    position: absolute;

    left: 24px;
    bottom: 0;

    width: 42px;
    height: 3px;

    border-radius: 5px 5px 0 0;

    background: #198754;

    transition:
        width 0.35s ease;
}


.ecogenn-why-card:hover .ecogenn-why-line {
    width: calc(100% - 48px);
}


/* =========================================================
   SUBTLE CARD CORNER
========================================================= */

.ecogenn-why-card::before {
    content: "";

    position: absolute;

    right: -35px;
    top: -35px;

    width: 90px;
    height: 90px;

    border: 1px solid rgba(25, 135, 84, 0.08);

    border-radius: 50%;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}


.ecogenn-why-card:hover::before {
    transform: scale(1.35);

    border-color:
        rgba(25, 135, 84, 0.16);
}


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

@media (max-width: 991.98px) {

    .ecogenn-why-section {
        padding: 70px 0 80px;
    }


    .ecogenn-why-heading {
        margin-bottom: 40px;
    }


    .ecogenn-why-card {
        min-height: 225px;

        padding: 22px;
    }


    .ecogenn-why-card-top {
        margin-bottom: 18px;
    }

}


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

@media (max-width: 767.98px) {

    .ecogenn-why-section {
        padding: 60px 0 70px;
    }


    .ecogenn-why-heading {
        margin-bottom: 32px;
    }





    .ecogenn-why-card {
        min-height: auto;

        padding: 21px;

        border-radius: 16px;
    }


    .ecogenn-why-card-top {
        margin-bottom: 17px;
    }


    .ecogenn-why-icon {
        width: 44px;
        height: 44px;

    }




    .ecogenn-why-line {
        left: 21px;
    }


    .ecogenn-why-card:hover .ecogenn-why-line {
        width: calc(100% - 42px);
    }

}


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

@media (max-width: 480px) {

    .ecogenn-why-section {
        padding: 50px 0 60px;
    }




    .ecogenn-why-card {
        padding: 19px;
    }


}

/* Rounded section labels: size only; their existing colors and pill designs remain unchanged. */
body .session-rounded-heading.session-rounded-heading {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 10px;
    padding: 7px 17px;
    background: rgba(255, 255, 255);
    border-radius: 50px;

}

.session-rounded-heading2 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 10px;
    padding: 7px 17px;
    background: rgb(21 185 109);
    border-radius: 50px;
    color: #ffff;

}

body span.session-rounded-heading {
    display: inline-block;
}

/* Final banner heading font-size override. */
body .hero-content h1.banner-heading,
body .tech-banner-content h1.banner-heading,
body .our-technology-banner-content h1.banner-heading,
body .contact-sub-banner .our-technology-banner-content h1.banner-heading,
body .blog-banner-content h1.banner-heading,
body .services-banner-content h1.banner-heading {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
}

/* Main content headings: font-size only. */
body :is(h1, h2, h3).main-heading.main-heading {
    font-size: 35px;
    font-weight: 700;
    line-height: 1.25;
}

body :is(h1, h2, h3, h4, h5, h6, span, strong, b).second-heading.second-heading {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

body :is(h1, h2, h3, h4, h5, h6, span, strong, b).third-heading.third-heading {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

/* Shared page rhythm and readable content size. */
body section,
body section[class] {
    padding-top: 14px;
    /* padding-bottom: 14px; */
}

/* Keep all inner-page banners compact and visually consistent. */
:is(.our-technology-sub-banner,
    .contact-sub-banner,
    .about-page .about-hero,
    .ecogenn-blog-banner,
    .ecogenn-services-sub-banner,
    .case-study-sub-banner,
    .get-enquiry-sub-banner,
    .tech-sub-banner) {
    height: 400px;
    min-height: 400px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ecogenn-blog-banner .container {
    height: 100%;
    display: flex;
    align-items: center;
}

.ecogenn-blog-banner .row {
    width: 100%;
}

@media (max-width: 767px) {

    :is(.our-technology-sub-banner,
        .contact-sub-banner,
        .about-page .about-hero,
        .ecogenn-blog-banner,
        .ecogenn-services-sub-banner,
        .case-study-sub-banner,
        .get-enquiry-sub-banner,
        .tech-sub-banner) {
        height: 420px;
        min-height: 420px;
    }

    .ecogenn-blog-banner .container {
        height: auto;
    }

    .ecogenn-blog-banner .blog-banner-visual {
        min-height: 180px;
        margin-top: 20px;
    }
}

body p,
body [class] p,
body p[class] {
    font-size: 16px;

}

/* Minimum text size for non-heading UI elements. */
/* body [class] {
    font-size: max(14px, 1em);
} */

.our-achivements-icon {
    font-size: 1.90em;
    line-height: 1;
}

.technology-icon {
    font-size: 1.90em;
    line-height: 1;
}

















/* ================================ CASE STUDIES SUB BANNER ================================ */

/* ================================ CASE STUDIES SUB BANNER ================================ */

.case-study-sub-banner {
    position: relative;

    height: 400px;

    display: flex;
    align-items: center;

    background-image: url("../images/case-study-banner.jpg");
    background-size: cover;
    background-position: center;

    overflow: hidden;
}


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

.case-study-sub-banner-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 45, 30, 0.68);
}


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

.case-study-sub-banner .container {
    position: relative;
    z-index: 2;
}


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

.case-study-sub-banner-content {
    max-width: 700px;
}


/* ================================ BREADCRUMB ================================ */

.case-study-breadcrumb {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 24px;
}


.case-study-breadcrumb a,
.case-study-breadcrumb .breadcrumb-current {
    font-size: 16px;
    line-height: 1.5;
}


.case-study-breadcrumb a {
    color: #ffffff;

    text-decoration: none;

    transition: color 0.3s ease;
}


.case-study-breadcrumb a:hover {
    color: #00a878;
}


.case-study-breadcrumb .breadcrumb-arrow {
    color: #ffffff;

    font-size: 20px;
    line-height: 1;

    margin-top: -1px;
}


.case-study-breadcrumb .breadcrumb-current {
    color: #ffffff;

    font-weight: 500;
}


/* ================================ SECTION TAG ================================ */

.case-study-sub-banner-tag {
    display: inline-flex;
    align-items: center;

    padding: 7px 18px;
    margin-bottom: 13px;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50px;

    color: #00a878;

    font-size: 16px;
    font-weight: 500;

    letter-spacing: 0.5px;
}


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

.case-study-sub-banner-content h1 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 34px;
    font-weight: 600;

    line-height: 1.2;
}


/* ================================ PARAGRAPH ================================ */

.case-study-sub-banner-content p {
    max-width: 620px;

    margin: 0;

    color: rgba(255, 255, 255);

    font-size: 16px;

    line-height: 1.7;
}


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

@media (max-width: 991px) {

    .case-study-sub-banner {
        height: 400px;
    }

    .case-study-sub-banner-content {
        max-width: 600px;
    }

}


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

@media (max-width: 767px) {

    .case-study-sub-banner {
        height: 400px;

        background-position: center;
    }

    .case-study-breadcrumb {
        margin-bottom: 20px;
    }

    .case-study-breadcrumb a,
    .case-study-breadcrumb .breadcrumb-current {
        font-size: 15px;
    }

    .case-study-breadcrumb .breadcrumb-arrow {
        font-size: 18px;
    }

    .case-study-sub-banner-content h1 {
        font-size: 30px;
    }

    .case-study-sub-banner-content p {
        font-size: 16px;
    }

    .case-study-sub-banner-tag {
        font-size: 15px;
    }

}


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

@media (max-width: 480px) {

    .case-study-sub-banner-content h1 {
        font-size: 28px;
    }

    .case-study-sub-banner-content p {
        line-height: 1.6;
    }

    .case-study-breadcrumb {
        gap: 7px;
        margin-bottom: 17px;
    }

}








/* ================================ CASE STUDIES OVERVIEW ================================ */

.case-studies-overview {
    padding-top: 60px;
    padding-bottom: 25px;
    background: #fff;
}

.case-studies-overview .row {
    min-height: 430px;
}


/* SESSION ROUNDED HEADING */

.session-rounded-heading {
    display: inline-flex;
    align-items: center;
    padding: 7px 17px;
    margin-bottom: 15px;

    border: 1px solid #d8e5dc;
    border-radius: 50px;

    color: #198754;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.4px;
}


/* MAIN HEADING */

.case-overview-main-heading {
    max-width: 650px;
    margin: 0 0 18px;

    color: #000;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.2;
}


/* PARAGRAPH */

.case-overview-text {
    max-width: 680px;
    margin-bottom: 14px;

    color: #000;
    font-size: 16px;
    line-height: 1.7;
    text-align: justify;
}



/* BUTTON */

.case-overview-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 10px;
    padding: 12px 21px;

    border-radius: 5px;
    background: #198754;

    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;

    transition: all 0.3s ease;
}

.case-overview-btn span {
    font-size: 19px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.case-overview-btn:hover {
    background: #198754;
    color: #fff;
}

.case-overview-btn:hover span {
    transform: translateX(4px);
}


/* ================================ STATISTICS ================================ */

.case-overview-stats {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.case-stat-card {
    position: relative;

    padding: 20px 22px;

    border: 1px solid #e4ebe6;
    border-radius: 10px;

    background: #f7faf8;

    transition: all 0.3s ease;
}

.case-stat-card:hover {
    transform: translateX(-5px);
    border-color: #c9dace;
}

.case-stat-number {
    margin-bottom: 2px;

    color: #198754;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

.case-stat-title {
    margin-bottom: 5px;

    color: #000;
    font-size: 20px;
    font-weight: 600;
}

.case-stat-card p {
    margin: 0;

    color: #000;
    font-size: 15px;
    line-height: 1.5;
}


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

@media (max-width: 991px) {

    .case-studies-overview {
        padding-top: 50px;
        padding-bottom: 25px;
    }

    .case-studies-overview .row {
        min-height: auto;
    }

    .case-overview-main-heading {
        max-width: 700px;
    }

    .case-overview-text {
        max-width: 100%;
    }

    .case-overview-stats {
        margin-top: 15px;
    }
}


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

@media (max-width: 767px) {

    .case-studies-overview {
        padding-top: 40px;
        padding-bottom: 25px;
    }

    .case-overview-main-heading {
        font-size: 30px;
    }

    .case-overview-text {
        font-size: 16px;
        line-height: 1.65;
    }

    .case-stat-card {
        padding: 18px;
    }

    .case-stat-number {
        font-size: 26px;
    }

    .case-stat-title {
        font-size: 20px;
    }
}


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

@media (max-width: 480px) {

    .case-overview-main-heading {
        font-size: 28px;
    }

    .session-rounded-heading {
        font-size: 15px;
    }

    .case-overview-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================================ FEATURED CASE STUDY ================================ */

.featured-case-study {
    padding-top: 50px;
    padding-bottom: 25px;
    background: #f7faf8;
}


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

.featured-case-heading {
    max-width: 760px;
    margin-bottom: 30px;
}

.featured-case-heading h2 {
    margin: 0 0 12px;

    color: #000;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.2;
}

.featured-case-heading p {
    max-width: 680px;
    margin: 0;

    color: #000;
    font-size: 16px;
    line-height: 1.7;
}


/* ================================ FEATURED WRAPPER ================================ */

.featured-case-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;

    overflow: hidden;

    border: 1px solid #e0e8e3;
    border-radius: 14px;

    background: #fff;
}


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

.featured-case-image {
    position: relative;
    min-height: 570px;
    overflow: hidden;
}

.featured-case-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    transition: transform 0.6s ease;
}

.featured-case-wrapper:hover .featured-case-image img {
    transform: scale(1.03);
}

.featured-case-label {
    position: absolute;
    top: 20px;
    left: 20px;

    padding: 7px 16px;

    border-radius: 50px;

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

    color: #198754;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
}


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

.featured-case-content {
    padding: 42px 40px;
}

.featured-case-category {
    display: inline-block;
    margin-bottom: 13px;

    color: #198754;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.8px;
}

.featured-case-content h3 {
    max-width: 540px;
    margin: 0 0 16px;

    color: #000;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

.featured-case-description {
    margin: 0 0 24px;

    color: #000;
    font-size: 16px;
    line-height: 1.7;
    text-align: justify;
}


/* ================================ PROJECT DETAILS ================================ */

.featured-case-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    padding: 17px 0;
    margin-bottom: 24px;

    border-top: 1px solid #e5ebe7;
    border-bottom: 1px solid #e5ebe7;
}

.case-detail-item {
    padding-right: 15px;
}

.case-detail-item:not(:last-child) {
    border-right: 1px solid #e5ebe7;
}

.case-detail-item:not(:first-child) {
    padding-left: 15px;
}

.case-detail-item span {
    display: block;
    margin-bottom: 5px;

    color: #198754;
    font-size: 20px;
}

.case-detail-item strong {
    display: block;

    color: #000;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}


/* ================================ CHALLENGE / SOLUTION ================================ */

.case-challenge-solution {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 22px;

    margin-bottom: 26px;
}

.case-challenge-solution>div {
    padding-left: 15px;

    border-left: 2px solid #198754;
}

.case-challenge-solution h4 {
    margin: 0 0 7px;

    color: #198754;
    font-size: 20px;
    font-weight: 600;
}

.case-challenge-solution p {
    margin: 0;

    color: #000;
    font-size: 15px;
    line-height: 1.6;
}


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

.featured-case-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    padding: 12px 20px;

    border-radius: 5px;

    background: #198754;

    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;

    transition: all 0.3s ease;
}

.featured-case-btn span {
    font-size: 19px;
    transition: transform 0.3s ease;
}

.featured-case-btn:hover {
    background: #198754;
    color: #fff;
}

.featured-case-btn:hover span {
    transform: translateX(4px);
}


/* ================================ CASE STUDY COLLECTION POPUP ================================ */

.case-study-popup-dialog {
    width: min(920px, calc(100% - 40px));
    max-width: 920px;
    height: calc(100vh - 125px);
    max-height: calc(100vh - 125px);
    margin: 90px auto 35px;
}

.case-study-popup-content {
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
    animation: caseStudyPopupOpen 0.3s ease;
}

@keyframes caseStudyPopupOpen {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.975);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.case-study-popup-close {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #198754;
    font-size: 17px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.case-study-popup-close:hover {
    transform: rotate(90deg);
    background: #fff;
}

.case-study-popup-image {
    position: relative;
    height: 230px;
    overflow: hidden;
    background: #eaf4ed;
}

.case-study-popup-image::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(to bottom, rgba(4, 33, 18, 0.03), rgba(4, 33, 18, 0.35));
}

.case-study-popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-study-popup-image span {
    position: absolute;
    z-index: 1;
    bottom: 18px;
    left: 22px;
    padding: 7px 14px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.94);
    color: #198754;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.case-study-popup-body {
    height: calc(100% - 230px);
    padding: 30px 38px 38px;
    overflow-y: auto;
    color: #27342c;
}

.case-study-popup-category {
    display: inline-block;
    margin-bottom: 10px;
    color: #198754;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.case-study-popup-body h2 {
    margin: 0 0 14px;
    color: #17251d;
    font-size: 29px;
    font-weight: 650;
    line-height: 1.25;
}

.case-study-popup-body>p,
.case-study-popup-story p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
}

.case-study-popup-overview,
.case-study-popup-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 24px 0;
    border: 1px solid #dfe9e2;
    border-radius: 10px;
}

.case-study-popup-overview>div,
.case-study-popup-results>div {
    padding: 16px 18px;
}

.case-study-popup-overview>div:not(:last-child),
.case-study-popup-results>div:not(:last-child) {
    border-right: 1px solid #dfe9e2;
}

.case-study-popup-overview span,
.case-study-popup-results span {
    display: block;
    margin-bottom: 5px;
    color: #607168;
    font-size: 12px;
}

.case-study-popup-overview strong {
    color: #198754;
    font-size: 14px;
}

.case-study-popup-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.case-study-popup-story section {
    padding-left: 15px;
    border-left: 3px solid #198754;
}

.case-study-popup-story h3,
.case-study-popup-results-title {
    margin: 0 0 8px;
    color: #198754;
    font-size: 17px;
    font-weight: 700;
}

.case-study-popup-results-title {
    margin-top: 25px;
}

.case-study-popup-results {
    margin: 12px 0 0;
    background: #f7faf8;
}

.case-study-popup-results {
    grid-template-columns: 1fr;
}

.case-study-popup-results strong {
    display: block;
    margin-bottom: 4px;
    color: #198754;
    font-size: 24px;
    line-height: 1;
}

@media (max-width: 767px) {
    .case-study-popup-dialog {
        width: calc(100% - 16px);
        height: calc(100vh - 95px);
        max-height: calc(100vh - 95px);
        margin: 75px auto 20px;
    }

    .case-study-popup-image {
        height: 170px;
    }

    .case-study-popup-body {
        height: calc(100% - 170px);
        padding: 24px 21px 30px;
    }

    .case-study-popup-body h2 {
        font-size: 24px;
    }

    .case-study-popup-overview,
    .case-study-popup-results,
    .case-study-popup-story {
        grid-template-columns: 1fr;
    }

    .case-study-popup-overview>div:not(:last-child),
    .case-study-popup-results>div:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid #dfe9e2;
    }
}


/* ================================ RESULTS ================================ */

.featured-case-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin-top: 16px;

    border: 1px solid #e0e8e3;
    border-radius: 10px;

    background: #fff;
}

.featured-result {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 22px 25px;
}

.featured-result:not(:last-child) {
    border-right: 1px solid #e0e8e3;
}

.result-number {
    flex-shrink: 0;

    color: #198754;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
}

.featured-result strong {
    display: block;
    margin-bottom: 3px;

    color: #198754;
    font-size: 20px;
    font-weight: 600;
}

.featured-result p {
    margin: 0;

    color: #000;
    font-size: 15px;
    line-height: 1.4;
}


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

@media (max-width: 991px) {

    .featured-case-study {
        padding-top: 45px;
    }

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

    .featured-case-image {
        min-height: 400px;
    }

    .featured-case-content {
        padding: 35px;
    }

    .featured-case-results {
        grid-template-columns: 1fr;
    }

    .featured-result:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #e0e8e3;
    }
}


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

@media (max-width: 767px) {

    .featured-case-study {
        padding-top: 40px;
        padding-bottom: 25px;
    }

    .featured-case-heading {
        margin-bottom: 25px;
    }

    .featured-case-heading h2 {
        font-size: 30px;
    }

    .featured-case-image {
        min-height: 300px;
    }

    .featured-case-content {
        padding: 28px 22px;
    }

    .featured-case-details {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .case-detail-item,
    .case-detail-item:not(:first-child) {
        padding: 0;
    }

    .case-detail-item:not(:last-child) {
        padding-bottom: 12px;
        border-right: none;
        border-bottom: 1px solid #e5ebe7;
    }

    .case-challenge-solution {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .featured-case-btn {
        width: 100%;
        justify-content: center;
    }

    .featured-result {
        padding: 20px;
    }
}


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

@media (max-width: 480px) {

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

    .featured-case-image {
        min-height: 260px;
    }

    .featured-case-content {
        padding: 25px 18px;
    }

    .featured-case-results {
        margin-top: 12px;
    }

    .result-number {
        font-size: 25px;
    }
}


/* ================================ CASE STUDIES COLLECTION ================================ */

.case-studies-collection {
    padding-top: 50px;
    padding-bottom: 25px;
    background: #ffffff;
}


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

.case-collection-heading {
    max-width: 800px;
    margin: 0 auto 30px;
    text-align: center;
}

.case-collection-heading h2 {
    margin: 0 0 12px;

    color: #17251d;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.2;
}

.case-collection-heading p {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;

    color: #000;

    line-height: 1.7;
}


/* ================================ CASE STUDY CARD ================================ */

.case-study-card {
    height: 100%;
    overflow: hidden;

    border: 1px solid #e2e9e4;
    border-radius: 12px;

    background: #ffffff;

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

.case-study-card:hover {
    transform: translateY(-6px);

    border-color: #cbdacf;

    box-shadow: 0 15px 35px rgba(35, 70, 48, 0.09);
}


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

.case-study-card-image {
    position: relative;
    height: 245px;
    overflow: hidden;
}

.case-study-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.55s ease;
}

.case-study-card:hover .case-study-card-image img {
    transform: scale(1.05);
}


/* ================================ CASE NUMBER ================================ */

.case-study-number {
    position: absolute;
    top: 16px;
    left: 16px;

    padding: 6px 13px;

    border-radius: 50px;

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

    color: #198754;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
}


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

.case-study-card-content {
    display: flex;
    flex-direction: column;

    min-height: 255px;

    padding: 23px 22px 20px;
}

.case-study-category {
    display: block;
    margin-bottom: 9px;

    color: #198754;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.6px;
}

.case-study-card-content h3 {
    margin: 0 0 10px;

    color: #000;

    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.case-study-card-content p {
    margin: 0;

    color: #000;

    font-size: 16px;
    line-height: 1.6;
}


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

.case-study-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: auto;
    padding-top: 18px;

    border-top: 1px solid #e8ede9;
}

.case-study-result {
    color: #000;

    font-size: 15px;
    font-weight: 500;
}

.case-study-card-footer a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #198754;

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

    text-decoration: none;

    white-space: nowrap;
}

.case-study-card-footer a span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.case-study-card-footer a:hover {
    color: #198754;
}

.case-study-card-footer a:hover span {
    transform: translateX(4px);
}


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

@media (max-width: 991px) {

    .case-studies-collection {
        padding-top: 45px;
    }

    .case-collection-heading {
        margin-bottom: 25px;
    }

    .case-study-card-image {
        height: 230px;
    }

    .case-study-card-content {
        min-height: 250px;
    }
}


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

@media (max-width: 767px) {

    .case-studies-collection {
        padding-top: 40px;
        padding-bottom: 25px;
    }

    .case-collection-heading {
        max-width: 100%;
        margin-bottom: 25px;
    }

    .case-collection-heading h2 {
        font-size: 30px;
    }

    .case-collection-heading p {
        font-size: 16px;
        line-height: 1.65;
    }

    .case-study-card-image {
        height: 220px;
    }

    .case-study-card-content {
        min-height: auto;
        padding: 21px 19px 18px;
    }

    .case-study-card-content h3 {
        font-size: 20px;
    }

    .case-study-card-footer {
        margin-top: 20px;
    }
}


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

@media (max-width: 480px) {

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

    .case-study-card-image {
        height: 210px;
    }

    .case-study-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}


.vision-mission-icon {
    font-size: 1.50rem;
}

.Our-core-values-icon {
    font-size: 1.50rem;
}




/* ================================ FINAL CASE STUDIES ================================ */

.final-case-studies {
    padding-top: 50px;
    padding-bottom: 25px;

    background: #f5f9f6;
}


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

.final-case-studies-wrapper {
    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 50px;

    padding: 45px;

    border-radius: 16px;

    background: #173c2a;

    overflow: hidden;
}


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

.final-case-studies-content {
    max-width: 650px;
}

.final-case-studies-content .session-rounded-heading {
    margin-bottom: 15px;

    border-color: rgba(255, 255, 255, 0.35);

    color: #198754;
}

.final-case-studies-content h2 {
    margin: 0 0 16px;

    color: #ffffff;

    font-size: 35px;
    font-weight: 600;

    line-height: 1.2;
}

.final-case-studies-content p {
    max-width: 620px;

    margin: 0 0 12px;

    color: rgba(255, 255, 255);

    font-size: 16px;

    line-height: 1.7;
}


/* ================================ BUTTONS ================================ */

.final-case-studies-buttons {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 25px;
}

.final-case-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 12px 20px;

    border-radius: 5px;

    background: #00a878;

    color: #ffffff;

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

    text-decoration: none;

    transition: all 0.3s ease;
}

.final-case-primary-btn span {
    font-size: 18px;

    transition: transform 0.3s ease;
}

.final-case-primary-btn:hover {
    background: #008f66;

    color: #ffffff;
}

.final-case-primary-btn:hover span {
    transform: translateX(4px);
}


.final-case-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 20px;

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 5px;

    color: #ffffff;

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

    text-decoration: none;

    transition: all 0.3s ease;
}

.final-case-secondary-btn:hover {
    border-color: #ffffff;

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

    color: #ffffff;
}


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

.final-case-studies-impact {
    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 0;

    padding-left: 35px;

    border-left: 1px solid rgba(255, 255, 255, 0.18);
}


/* ================================ IMPACT ITEM ================================ */

.final-impact-item {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    padding: 20px 0;
}

.final-impact-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.final-impact-number {
    flex-shrink: 0;

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

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;

    color: #00c18a;

    font-size: 15px;
    font-weight: 600;
}

.final-impact-item h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 600;
}

.final-impact-item p {
    margin: 0;

    color: rgba(255, 255, 255);

    font-size: 15px;

    line-height: 1.55;
}


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

@media (max-width: 991px) {

    .final-case-studies {
        padding-top: 45px;
    }

    .final-case-studies-wrapper {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 35px;
    }

    .final-case-studies-impact {
        padding-top: 10px;
        padding-left: 0;

        border-left: none;
    }

}


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

@media (max-width: 767px) {

    .final-case-studies {
        padding-top: 40px;
        padding-bottom: 25px;
    }

    .final-case-studies-wrapper {
        gap: 25px;

        padding: 28px 22px;

        border-radius: 12px;
    }

    .final-case-studies-content h2 {
        font-size: 30px;
    }

    .final-case-studies-content p {
        font-size: 16px;
    }

    .final-case-studies-buttons {
        align-items: stretch;
        flex-direction: column;

        margin-top: 20px;
    }

    .final-case-primary-btn,
    .final-case-secondary-btn {
        width: 100%;
    }

    .final-impact-item {
        padding: 17px 0;
    }

}


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

@media (max-width: 480px) {

    .final-case-studies-wrapper {
        padding: 25px 18px;
    }

    .final-case-studies-content h2 {
        font-size: 28px;
    }

    .final-impact-item {
        gap: 13px;
    }

    .final-impact-number {
        width: 38px;
        height: 38px;
    }

}






/* ================================ GET ENQUIRY SUB BANNER ================================ */

.get-enquiry-sub-banner {
    position: relative;

    height: 400px;

    display: flex;
    align-items: center;

    background-image: url("../images/get-enquiry-banner.jpg");
    background-size: cover;
    background-position: center;

    overflow: hidden;
}


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

.get-enquiry-sub-banner-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 45, 30, 0.68);
}


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

.get-enquiry-sub-banner .container {
    position: relative;

    z-index: 2;
}


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

.get-enquiry-sub-banner-content {
    max-width: 720px;
}


/* ================================ BREADCRUMB ================================ */

.get-enquiry-breadcrumb {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 24px;
}

.get-enquiry-breadcrumb a,
.get-enquiry-breadcrumb .breadcrumb-current {
    font-size: 16px;
    line-height: 1.5;
}

.get-enquiry-breadcrumb a {
    color: #ffffff;

    text-decoration: none;

    transition: color 0.3s ease;
}

.get-enquiry-breadcrumb a:hover {
    color: #00a878;
}

.get-enquiry-breadcrumb .breadcrumb-arrow {
    color: #ffffff;

    font-size: 20px;
    line-height: 1;

    margin-top: -1px;
}

.get-enquiry-breadcrumb .breadcrumb-current {
    color: #ffffff;

    font-weight: 500;
}


/* ================================ SECTION TAG ================================ */

.get-enquiry-sub-banner-tag {
    display: inline-flex;
    align-items: center;

    padding: 7px 18px;
    margin-bottom: 13px;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50px;

    color: #00a878;

    font-size: 16px;
    font-weight: 500;

    letter-spacing: 0.5px;
}


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

.get-enquiry-sub-banner-content h1 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 35px;
    font-weight: 600;

    line-height: 1.2;
}


/* ================================ PARAGRAPH ================================ */

.get-enquiry-sub-banner-content p {
    max-width: 650px;

    margin: 0;

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

    font-size: 16px;

    line-height: 1.7;
}


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

@media (max-width: 991px) {

    .get-enquiry-sub-banner {
        height: 400px;
    }

    .get-enquiry-sub-banner-content {
        max-width: 650px;
    }

}


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

@media (max-width: 767px) {

    .get-enquiry-sub-banner {
        height: 400px;

        background-position: center;
    }

    .get-enquiry-breadcrumb {
        margin-bottom: 20px;
    }

    .get-enquiry-breadcrumb a,
    .get-enquiry-breadcrumb .breadcrumb-current {
        font-size: 15px;
    }

    .get-enquiry-breadcrumb .breadcrumb-arrow {
        font-size: 18px;
    }

    .get-enquiry-sub-banner-content h1 {
        font-size: 30px;
    }

    .get-enquiry-sub-banner-content p {
        font-size: 16px;
    }

    .get-enquiry-sub-banner-tag {
        font-size: 15px;
    }

}


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

@media (max-width: 480px) {

    .get-enquiry-sub-banner-content h1 {
        font-size: 28px;
    }

    .get-enquiry-sub-banner-content p {
        line-height: 1.6;
    }

    .get-enquiry-breadcrumb {
        gap: 7px;

        margin-bottom: 17px;
    }

}

/* ================================ GET ENQUIRY SECTION ================================ */

.get-enquiry-section {
    padding-top: 55px;
    padding-bottom: 25px;

    background: #f5f8f6;
}


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

.get-enquiry-wrapper {
    display: grid;

    grid-template-columns: 0.82fr 1.18fr;

    overflow: hidden;

    border-radius: 16px;

    background: #ffffff;

    box-shadow: 0 15px 45px rgba(35, 70, 48, 0.08);
}


/* ================================ LEFT INFORMATION ================================ */

.get-enquiry-info {
    position: relative;

    background: #173c2a;

    overflow: hidden;
}

.get-enquiry-info::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    right: -170px;
    top: -130px;

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

    border-radius: 50%;
}

.get-enquiry-info::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -120px;
    bottom: -100px;

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

    border-radius: 50%;
}

.get-enquiry-info-content {
    position: relative;

    z-index: 2;

    padding: 45px 38px;
}


/* ================================ LABEL ================================ */

.get-enquiry-label {
    display: inline-block;

    margin-bottom: 16px;

    padding: 7px 17px;

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

    border-radius: 50px;

    color: #6ed2aa;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 0.5px;
}


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

.get-enquiry-info-content>h2 {
    max-width: 400px;

    margin: 0 0 16px;

    color: #ffffff;

    font-size: 35px;

    font-weight: 600;

    line-height: 1.2;
}

.get-enquiry-info-content>p {
    max-width: 430px;

    margin: 0;

    color: rgba(255, 255, 255);

    font-size: 16px;

    line-height: 1.7;
}


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

.get-enquiry-contact {
    margin-top: 30px;
}

.get-enquiry-contact>span {
    display: block;

    margin-bottom: 6px;

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

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.7px;
}

.get-enquiry-contact a {
    color: #ffffff;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;

    word-break: break-word;

    transition: color 0.3s ease;
}

.get-enquiry-contact a:hover {
    color: #6ed2aa;
}


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

.get-enquiry-divider {
    width: 100%;

    height: 1px;

    margin: 28px 0;

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


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

.get-enquiry-process-label {
    display: block;

    margin-bottom: 16px;

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

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.7px;
}

.get-enquiry-process-item {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 18px;
}

.get-enquiry-process-item:last-child {
    margin-bottom: 0;
}

.get-enquiry-process-item>strong {
    flex-shrink: 0;

    color: #6ed2aa;

    font-size: 15px;

    font-weight: 600;
}

.get-enquiry-process-item h3 {
    margin: 0 0 3px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;
}

.get-enquiry-process-item p {
    margin: 0;

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

    font-size: 14px;

    line-height: 1.5;
}


/* ================================ FORM AREA ================================ */

.get-enquiry-form-area {
    padding: 45px 42px;
}


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

.get-enquiry-form-heading {
    margin-bottom: 28px;
}

.get-enquiry-form-heading .session-rounded-heading {
    margin-bottom: 14px;
}

.get-enquiry-form-heading h2 {
    margin: 0 0 10px;

    color: #17251d;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.25;
}

.get-enquiry-form-heading p {
    margin: 0;

    color: #000000;

    font-size: 16px;

    line-height: 1.6;
}


/* ================================ FORM ================================ */

.ecogenn-enquiry-form {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px 20px;
}


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

.get-enquiry-field {
    min-width: 0;
}

.get-enquiry-field label {
    display: block;

    margin-bottom: 7px;

    color: #26372d;

    font-size: 15px;

    font-weight: 600;
}

.get-enquiry-field label span {
    color: #315f43;
}


/* ================================ INPUTS ================================ */

.get-enquiry-field input,
.get-enquiry-field select,
.get-enquiry-field textarea {
    display: block;

    width: 100%;

    padding: 11px 13px;

    border: 1px solid #d9e3dc;

    border-radius: 6px;

    outline: none;

    background: #ffffff;

    color: #26372d;

    font-family: inherit;

    font-size: 16px;

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

.get-enquiry-field input,
.get-enquiry-field select {
    height: 48px;
}

.get-enquiry-field textarea {
    min-height: 130px;

    resize: vertical;
}

.get-enquiry-field input::placeholder,
.get-enquiry-field textarea::placeholder {
    color: #929a95;
}

.get-enquiry-field input:focus,
.get-enquiry-field select:focus,
.get-enquiry-field textarea:focus {
    border-color: #4d795c;

    box-shadow: 0 0 0 3px rgba(77, 121, 92, 0.08);
}


/* ================================ FULL WIDTH FIELDS ================================ */

.get-enquiry-message-field,
.get-enquiry-file-field,
.get-enquiry-submit {
    grid-column: 1 / -1;
}


/* ================================ FILE ================================ */

.get-enquiry-file {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 48px;

    padding: 8px 12px;

    border: 1px dashed #c9d7ce;

    border-radius: 6px;

    background: #f8faf9;

    overflow: hidden;
}

.get-enquiry-file input {
    width: auto;

    max-width: 180px;

    padding: 0;

    border: 0;

    background: transparent;

    font-size: 14px;
}

.get-enquiry-file input:focus {
    box-shadow: none;
}

.get-enquiry-file span {
    color: #315f43;

    font-size: 14px;

    font-weight: 600;
}

.get-enquiry-file small {
    color: #7d8781;

    font-size: 13px;
}


/* ================================ FORM MESSAGE ================================ */

.enquiry-form-message {
    display: none;

    grid-column: 1 / -1;

    padding: 12px 14px;

    border-radius: 6px;

    font-size: 15px;

    line-height: 1.5;
}

.enquiry-form-message.success {
    display: block;

    border: 1px solid #c8dfcf;

    background: #edf7f0;

    color: #28603b;
}

.enquiry-form-message.error {
    display: block;

    border: 1px solid #e4caca;

    background: #faf0f0;

    color: #8a3333;
}


/* ================================ SUBMIT ================================ */

.get-enquiry-submit {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 4px;
}

.get-enquiry-submit button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 175px;

    min-height: 48px;

    padding: 12px 20px;

    border: 0;

    border-radius: 5px;

    background: #315f43;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;
}

.get-enquiry-submit button:hover {
    background: #244b34;
}

.get-enquiry-submit button strong {
    font-size: 19px;

    transition: transform 0.3s ease;
}

.get-enquiry-submit button:hover strong {
    transform: translateX(4px);
}

.get-enquiry-submit button:disabled {
    opacity: 0.6;

    cursor: not-allowed;
}

.get-enquiry-submit small {
    color: #7d8781;

    font-size: 13px;

    line-height: 1.5;
}


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

@media (max-width: 991px) {

    .get-enquiry-section {
        padding-top: 45px;
    }

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

    .get-enquiry-info-content {
        padding: 35px;
    }

    .get-enquiry-info-content>h2 {
        max-width: 600px;
    }

    .get-enquiry-info-content>p {
        max-width: 650px;
    }

    .get-enquiry-form-area {
        padding: 35px;
    }

}


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

@media (max-width: 767px) {

    .get-enquiry-section {
        padding-top: 40px;
        padding-bottom: 25px;
    }

    .get-enquiry-info-content {
        padding: 30px 22px;
    }

    .get-enquiry-info-content>h2 {
        font-size: 30px;
    }

    .get-enquiry-form-area {
        padding: 30px 20px;
    }

    .get-enquiry-form-heading h2 {
        font-size: 26px;
    }

    .ecogenn-enquiry-form {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .get-enquiry-message-field,
    .get-enquiry-file-field,
    .get-enquiry-submit {
        grid-column: auto;
    }

    .enquiry-form-message {
        grid-column: auto;
    }

    .get-enquiry-submit {
        align-items: stretch;

        flex-direction: column;

        gap: 10px;
    }

    .get-enquiry-submit button {
        width: 100%;
    }

    .get-enquiry-submit small {
        text-align: center;
    }

}


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

@media (max-width: 480px) {

    .get-enquiry-info-content {
        padding: 26px 18px;
    }

    .get-enquiry-info-content>h2 {
        font-size: 28px;
    }

    .get-enquiry-form-area {
        padding: 26px 16px;
    }

    .get-enquiry-form-heading h2 {
        font-size: 24px;
    }

    .get-enquiry-file {
        align-items: flex-start;

        flex-direction: column;

        padding: 12px;
    }

}

/*==================================
        CONTACT PROJECT DESK
==================================*/

.contact-connect-section {
    position: relative;
    padding: 78px 0 24px;
    background: #edf3ed;
}

.contact-project-desk {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 58px 30px;
    border: 1px solid rgba(25, 72, 48, .14);
    border-radius: 2px;
    background: #f8faf5;
    box-shadow: 0 24px 55px rgba(31, 66, 45, .1);
    overflow: hidden;
}

.contact-project-desk::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 9px;
    height: 100%;
    background: #2b7549;
}

.contact-project-desk::after {
    content: "";
    position: absolute;
    right: -88px;
    bottom: -120px;
    width: 290px;
    height: 290px;
    border: 1px solid rgba(43, 117, 73, .14);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(43, 117, 73, .04), 0 0 0 44px rgba(43, 117, 73, .04);
    pointer-events: none;
}

.contact-project-desk__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: end;
    gap: 34px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d8e3d8;
}

.contact-project-desk__header p {
    grid-column: 1 / -1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    margin: 0 auto 25px;
    padding: 7px 17px;
    border: 1px solid #d8e3d8;
    border-radius: 30px;
    color: #2b7549;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.contact-project-desk__header p span {
    width: 28px;
    height: 2px;
    background: #d26b3e;
}

.contact-project-desk__header h2 {
    margin: 0;
    color: #18251f;
    font-size: clamp(2.55rem, 4vw, 4.25rem);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.045em;
}

.contact-project-desk__header h2 em {
    color: #2b7549;
    font-style: normal;
}

.contact-project-desk__header>div {
    padding: 10px 0 10px 22px;
    border-left: 2px solid #d26b3e;
    color: #000;
    font-size: 15px;
    line-height: 1.8;
}

.contact-project-desk__body {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(360px, 1.2fr);
    gap: 76px;
    padding: 10px 0 10px;
}

.contact-project-desk__stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
    color: #d26b3e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.contact-project-desk__intro h3 {
    max-width: 390px;
    margin: 0 0 14px;
    color: #18251f;

    font-size: clamp(1.8rem, 2.6vw, 2.8rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.04em;
}

.contact-project-desk__intro p {
    max-width: 320px;
    margin: 0;
    color: #000;
    font-size: 13px;
    line-height: 1.6;
}

.contact-project-desk__actions {
    border-top: 1px solid #d8e3d8;
}

.contact-project-desk__actions a {
    display: grid;
    grid-template-columns: 38px 1fr 20px;
    align-items: center;
    gap: 15px;
    min-height: 74px;
    padding: 5px 0;
    border-bottom: 1px solid #d8e3d8;
    color: #18251f;
    text-decoration: none;
    transition: padding .25s ease, color .25s ease;
}

.contact-project-desk__actions a:hover {
    padding: 5px 12px;
    color: #2b7549;
    background: #f2f7f1;
}

.contact-project-desk__actions a>i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #dcecdf;
    color: #2b7549;
    transition: transform .25s ease, background .25s ease;
}

.contact-project-desk__actions a:hover>i {
    transform: rotate(-8deg) scale(1.08);
    background: #f2dfd2;
    color: #d26b3e;
}

.contact-project-desk__actions small,
.contact-project-desk__visit small {
    display: block;
    margin-bottom: 3px;
    color: #2b7549;
    font-size: 16px;


    font-weight: 800;
    /* letter-spacing: .13em; */
    text-transform: uppercase;
}

.contact-project-desk__actions strong,
.contact-project-desk__visit strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.contact-project-desk__actions b {
    color: #d26b3e;
    font-size: 17px;
}

.contact-project-desk__visit {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 15px;
    min-height: 64px;
    padding: 20px 12px 0;
    border-top: 1px solid #d8e3d8;
    color: #18251f;
    text-decoration: none;
    transition: background .25s ease, padding .25s ease;
}

.contact-project-desk__visit:hover {
    padding-left: 20px;
    padding-right: 20px;
    color: #18251f;
    background: #f2f7f1;
}

.contact-project-desk__visit>i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f2dfd2;
    color: #d26b3e;
}

.contact-project-desk__visit>b {
    color: #2b7549;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

sess .contact-connect-legacy {
    display: none;
}

/* Final styling for the live Contact project desk. */
.contact-project-desk__header h2 em {
    display: inline;
    color: #2b7549;
    font-style: normal;
}

.contact-project-desk__intro h3 {
    margin-bottom: 14px;
    color: #18251f;
}

.contact-project-desk__visit small {
    color: #2b7549;
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .contact-connect-section {
        padding: 42px 0 46px;
    }

    .contact-project-desk {
        padding: 34px 24px 24px;
    }

    .contact-project-desk::before {
        width: 6px;
    }

    .contact-project-desk__header {
        display: block;
        padding-bottom: 24px;
    }

    .contact-project-desk__header p {
        margin: 0 0 18px;
    }

    .contact-project-desk__header h2 {
        font-size: clamp(2.3rem, 11vw, 3.6rem);
    }

    .contact-project-desk__header>div {
        margin-top: 22px;
        padding-left: 15px;
        font-size: 16px;
    }

    .contact-project-desk__body {
        display: block;
        padding: 25px 0 20px;
    }

    .contact-project-desk__intro {
        margin-bottom: 24px;
    }

    .contact-project-desk__intro h3 {
        font-size: 1.85rem;
    }

    .contact-project-desk__visit {
        grid-template-columns: 34px 1fr;
        gap: 11px;
        padding-left: 0;
        padding-right: 0;
    }

    .contact-project-desk__visit:hover {
        padding-left: 8px;
        padding-right: 8px;
    }

    .contact-project-desk__visit>b {
        grid-column: 2;
    }
}

.bio-septic-banner-image {
    background-image: url("../home-img/Bio Septic Tank Systems.png");
    background-position: center;
}

/* Final Contact location presentation. */
.contact-location-section {
    padding: 76px 0 10px;
    background:
        radial-gradient(circle at 8% 18%, rgba(25, 135, 84, .08), transparent 24%),
        linear-gradient(135deg, #f6faf7 0%, #ffffff 58%, #edf6ef 100%);
}

.contact-location-header {
    display: block;
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center;
}

.contact-location-header h2 {
    margin: 0;
    color: #18251f;
    line-height: 1.08;
}

.contact-location-header h2 span {
    display: block;
}

.contact-location-header>p {
    max-width: 650px;
    margin: 16px auto 0;
    color: #586960;
    line-height: 1.7;
}

.contact-location-label {
    justify-content: center;
}

.contact-location-wrapper {
    min-height: 520px;
    overflow: hidden;
    border: 1px solid #dcebe0;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(20, 72, 39, .11);
}

.contact-location-map {
    min-height: 520px;
}

.contact-location-map::after {
    content: "ECOGENN BIO SOLUTIONS";
    position: absolute;
    left: 22px;
    bottom: 20px;
    z-index: 2;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 6px;
    color: #ffffff;
    background: rgba(8, 38, 23, .72);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    pointer-events: none;
}

.contact-location-details {
    justify-content: flex-start;
    min-height: 520px;
    padding: 48px 42px;
    background: linear-gradient(155deg, #123b2a 0%, #0b2c20 100%);
}

.contact-location-eyebrow {
    margin-bottom: 13px;
    color: #9be0ad;
    font-size: 11px;
    letter-spacing: .14em;
}

.contact-location-details h3 {
    margin-bottom: 16px;
    color: #ffffff;
    font-size: 32px;
}

.contact-location-address {
    max-width: 360px;
    margin-bottom: 34px;
    color: rgba(255, 255, 255);
    line-height: 1.75;
}

.contact-location-info {
    gap: 17px;
    margin-bottom: 34px;
}

.contact-location-info-item>i {
    border-color: rgba(155, 224, 173, .35);
    color: #9be0ad;
}

.contact-location-info-item small {
    color: #9be0ad;
    font-weight: 800;
    letter-spacing: .12em;
}

.contact-location-info-item strong {
    color: #ffffff;
    line-height: 1.45;
}

.contact-location-map-btn {
    padding: 11px 14px 11px 18px;
    border-radius: 7px;
    background: #198754;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
}

@media (max-width: 991px) {
    .contact-location-section {
        padding: 62px 0 70px;
    }

    .contact-location-header {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 28px;
    }

    .contact-location-wrapper,
    .contact-location-map {
        min-height: 430px;
    }

    .contact-location-details {
        min-height: 430px;
    }
}

@media (max-width: 767px) {
    .contact-location-section {
        padding: 52px 0 60px;
    }

    .contact-location-header h2 {
        font-size: 32px;
    }

    .contact-location-wrapper {
        border-radius: 17px;
    }

    .contact-location-map,
    .contact-location-map iframe {
        min-height: 320px;
    }

    .contact-location-details {
        min-height: 0;
        padding: 36px 24px 40px;
    }
}

.icon-col {
    color: #000;
}