.section,
.bg-cover,
.optech-section-padding,
.cta-bg3 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.wishlist_icon svg path {
    stroke: #000;
    /* default outline color */
    fill: transparent;
    transition: all 0.3s ease;
}

.wishlist_icon:hover svg path {
    fill: #ff4d4d;
    /* hover fill color */
    stroke: #ff4d4d;
}

.wishlist_icon.active svg path {
    fill: #ff4d4d;
    /* active state fill color */
    stroke: #ff4d4d;
}

.optech-hero-slider-item::before {
    content: "";
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    background-image: url('../img/hero/overlay.png') !important;
}

.optech-service-contact {
    background-image: url('../img/service/bg.png');
}

.optech-footer-cta-wrap {
    background-image: url('../img/cta/cta.png');
}

.optech-counter-wrap {
    background-image: url('../img/v2/counter-bg.png');
}

.optech-hero-section {
    background-image: url('../img/hero/bg1.png');
}

.optech-service-contact {
    background-image: url('../img/service/bg.png');
}

.custom_image {
    background-image: url('../img/cta/cta-bg2.png');
}

.optech-hero-section4 {
    background-image: url('../img/hero/bg3.png');
}

.tech-agency-img {
    background-image: url('../img/hero/bg2.png');
}

.optech-footer-cta-wrap {
    background-image: url('../img/cta/cta.png');
}

.optech-hero-section8 {
    background-image: url('../img/hero/4.png');
}

.custom-image-two {
    background-image: url('../img/cta/cta-bg3.png');
}

.custom-image-two-home {
    background-image: url('../img/cta/cta-bg2.png') !important;
}

.cookie_consent_modal {
    width: 350px;
    padding: 30px;
    background-color: var(--white-color);
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    border: 1px solid #e4e4e4;
    box-shadow: 2px 3px 4px 0 rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.cookie_consent_modal .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 1;
}

.cookie_consent_modal h5 {
    font-size: 22px;
    font-weight: 500;
}

.cookie_consent_modal p {
    font-size: 16px;
    line-height: 27px;
    margin-top: 10px;
}

.cookie_consent_modal .thm-btn-two {
    margin-top: 20px;
}

.shop_sidebar_item_box_main.fst {
    min-height: 240px !important;
    height: 0px !important;
}

.dashbord_sidebar {
    border-radius: 0px !important;
    border-right: 1px solid #e3e3ec;
}

.dashbord_bg {
    background: #fff !important;
    box-shadow: 0 12px 40px 4px rgba(10, 22, 94, 0.0784313725) !important;
}

.dashbord_item {
    padding: 0 !important;
    flex-direction: row !important;
    text-align: start !important;
}

.dashbord_item_icon {
    width: 54px !important;
    height: 54px !important;
}

.dashbord_item_text .d-item-label {
    font-size: 14px !important;
    font-weight: 400 !important;
}

.dashbord_table_main .table thead tr th {
    background: #EEF1FF !important;
    white-space: nowrap !important;
}

.d_review_box_head {
    background: #EEF1FF !important;
}

.dashbord_table_main .table tbody tr td {
    min-width: 150px !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--dark-bg);
    font-weight: 500;
}

p {
    color: var(--dark-bg);
}

.main-banner {
    background-image: url();
    background-size: contain;
    background-repeat: no-repeat;
    padding: 200px 0 150px !important;
    background-position: right;
    background-color: #0b4951;
}

/* .main-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    backdrop-filter: blur(3px);
} */

.banner-bg-inner {
    z-index: 1;
    position: relative;
}

.main-banner h1 {
    font-size: 140px;
    line-height: 1;
    margin-bottom: 20px;
}

.main-banner p {
    font-size: 20px;
}

#optech-default-btn,
#optech-hero-form-btn,
#optech-team-form-btn,
.optech-default-btn,
.optech-product-btn,
.optech-shop-btn,
button#optech-main-form-btn,
button#optech-subscription-btn {
    background-color: var(--dark-bg);
}

.text-animate {
    visibility: hidden;
}

.heading {
    font-size: 55px;
    margin-bottom: 20px;
}

.sticky-menu .optech-header-btn {
    background: #fff;
    color: var(--dark-bg) ! IMPORTANT;
}

.optech-default-btn,
.optech-counter-icon {
    box-shadow: 3px 3px 3px 1px rgb(0 0 0 / 25%);
}

.optech-header-top {
    box-shadow: 3px 3px 3px 1px rgb(0 0 0 / 15%);
}

canvas {
    display: block;
    position: absolute;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 0;
    max-width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    .main-banner h1 {
        font-size: 40px;
    }

    .main-banner p {
        font-size: 16px;
    }
    .optech-section-title h2, .heading{
        font-size: 35px !important;
    }
    .mv-box{
        position: unset !important;
        max-width: 100% !important;
    }
}

.counter-section {
    margin-top: -120px;
}

.optech-counter-wrap {
    background: var(--dark-bg);
}

.optech-counter-icon,
.optech-counter-data::before {
    background: #fff;
}

.optech-counter-icon img {
    filter: invert(1)
}

.optech-section-title h2,
.heading {
    font-size: 55px;
}

.optech-section-title.center {
    max-width: 840px;
}

.optech-service-data {
    padding-bottom: 80px;
}

.optech-service-data h5 {
    font-size: 24px;
    text-align: left;
}

.optech-service-data h5:hover {
    text-decoration: underline;
}

.optech-service-box {
    position: relative;
}

.optech-service-thumb:after {
    display: none;
}

.optech-service-thumb:before {
    background: #00000080;
    z-index: 1;
}

.optech-service-thumb:hover:before {
    opacity: 1;
}

.optech-service-box::before {
    content: "";
    width: 91px;
    height: 79px;
    position: absolute;
    border-radius: 0 0 10px;
    bottom: 0;
    right: 0;
    background-image: url(https://aiero-nextjs-template.vercel.app/assets/images/service/ser-layer.png);
    z-index: 2;
}

.optech-service-box a.optech-default-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
    border-radius: 15px;
    padding: 16px 20px;
}

.optech-service-box a.optech-default-btn:after {
    content: "\ea70";
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

.section-bg-tilt {
    background: #f5f5f5;
    position: relative;
    z-index: 1;
}

.section-bg-tilt::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 90px;
    background: #fff;
    transform: skewY(-1deg);
    transform-origin: top left;
    z-index: -1;
}

.arch-card-premium{
    margin-bottom: 2rem;
}



.section-bg-tilt::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 0;
    width: 100%;
    height: 90px;
    background: #fff;
    transform: skewY(-1deg);
    transform-origin: top left;
    z-index: -1;
}

.arch-card-premium:hover .arch-card-glow {
    opacity: 1;
    background: linear-gradient(135deg, var(--dark-bg), #0b4951, var(--dark-bg));
    box-shadow: 0 0 30px #c3a36533;
}

.arch-card-inner {
    backdrop-filter: blur(20px);
    background: linear-gradient(145deg, var(--dark-bg), #0b4951);
    border-radius: 24px;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 3rem 2.5rem;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px #ffffff0d;
    transition: all .4s;
    box-shadow: 0 10px 20px #0000004d;
}

.arch-card-premium:hover .arch-card-inner{
    transform: translateY(-5px);
    box-shadow: 0 10px 20px #0000004d, 0 0 30px #c3a36533;
}

.arch-watermark {
    color: #ffffff08;
    pointer-events: none;
    z-index: 0;
    transition: all .6s cubic-bezier(.16, 1, .3, 1);
    position: absolute;
    top: -20px;
    right: -20px;
    transform: rotate(15deg)
}

.arch-watermark svg{
    width: 100px;
    height: 100px;
    fill: #ffffff48;
}

.arch-card-premium:hover .arch-watermark {
    color: #c3a36514;
    transform: rotate(0) scale(1.1);
}

.arch-icon-wrapper {
    color: var(--dark-bg);
    z-index: 2;
    background: #fff;
    border: 1px solid #ffffff33;
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: auto;
    transition: all .4s;
    display: flex;
    position: relative;
    box-shadow: 0 10px 20px #0000004d;
}

.arch-icon-wrapper svg, .arch-icon-wrapper img {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.arch-card-premium:hover .arch-icon-wrapper img{
    filter: brightness(0) invert(1);
}

.arch-card-premium:hover .arch-icon-wrapper {
    background: var(--dark-bg);
    border-color: #ffffff33;
    transform: scale(1.05);
    box-shadow: 0 0 20px #ffffff33;
    color: #fff;
}

.arch-card-title {
    z-index: 2;
    font-family: var(--font-heading, sans-serif);
    color: #fff;
    letter-spacing: .5px;
    margin-top: 3rem;
    margin-bottom: .8rem;
    font-size: 1.4rem;
    font-weight: 300;
    transition: color .3s;
    position: relative;
    min-height: 57px;
}

.arch-card-desc {
    z-index: 2;
    color: #ffffff8c;
    margin: 0;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    position: relative;
}

/* Initial state */
[data-aos="fade-up-zoom"] {
opacity: 0;
transform: translateY(40px) scale(0.8);
transition-property: opacity, transform;
}

/* Animate state */
[data-aos="fade-up-zoom"].aos-animate {
opacity: 1;
transform: translateY(0) scale(1);
}

[data-aos="fade-up-zoom"] {
transition-duration: 800ms;
transition-timing-function: ease-out;
}

.optech-blog-content .optech-default-btn {
    padding-top: 15px;
    padding-bottom: 15px;
}

.mission-sec {
    position: relative;
    /* max-width: 1100px; */
    margin: 80px auto;
    padding: 20px;
}

/* Image */
.mission-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 16px;
}

/* Overlapping Card */
.mv-box {
    position: absolute;
    bottom: -60px;
    left: 40px;
    max-width: calc(50% - 40px);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 25px 30px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: 0.3s ease;
}

.mv-box:hover {
    transform: translateY(-5px);
}

/* Heading */
.mv-box h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    margin-bottom: 10px;
}

/* Icon */
.mission-icon {
    width: 30px;
}

/* Text */
.mv-box p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark-bg);
}

.mission {
    left: auto;
    right: 40px;
}

.overview-section {
    padding: 80px 0;
    background: #fff;
}

.overview-title h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 40px;
}

.overview-content {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.left-content,
.right-content {
    flex: 1;
}

.left-content p,
.right-content p {
    font-size: 22px;
    line-height: 1.6;
    color: #337D93;
    margin-bottom: 22px;
}

/* Mission / Vision Styling */
.mission-icon {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    vertical-align: middle;
    /* keeps the icon white if dark background */
}

.mission-vision-section {
    /* background: #f9f9f9; */
    padding: 60px 0;
    position: relative;
}
.mv-wrapper {
    display: flex;
    gap: 40px;
}

.mv-box {
    flex: 1;
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
}

.mv-box h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.mv-box p {
    font-size: 18px;
    color: #337D93;
    line-height: 1.6;
}

/* Responsive */
@media(max-width: 992px) {

    .overview-content,
    .mv-wrapper {
        flex-direction: column;
    }

    .overview-title h1 {
        font-size: 32px;
    }
}

.faq-section {
background: #f9fafc;
}

.faq-image-wrapper {
overflow: hidden;
}

.faq-image {
transition: opacity 0.4s ease-in-out;
}

.custom-faq .accordion-item {
border: none;
margin-bottom: 15px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.custom-faq .accordion-button {
font-weight: 600;
padding: 18px;
background: #fff;
}

.custom-faq .accordion-button:not(.collapsed) {
background: #001f3f;
color: #fff;
}

.custom-faq .accordion-body {
background: #fff;
padding: 15px 18px;
}

.team-section {
    padding: 80px 20px;
}

.team-card {
    background: #fffff  f;
    border-radius: 18px;
    padding: 25px;
    border: 1px solid rgba(0, 128, 128, 0.15);
    transition: all 0.35s ease;
    height: 100%;
    position: relative;
}

/* hover */
.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-color: #00a8a8;
}

/* text */
.team-card h5 {
    font-size: 18px;
    margin-bottom: 5px;
}

.team-card h5 span {
    color: #008b8b;
    font-weight: 600;
}

.team-card h6 {
    font-size: 20px;
    color: #888;
    margin-bottom: 15px;
}

.team-card p {
    font-size: 14px;
    color: var(--dark-bg);
    line-height: 1.6;
}

.overview-section {
    padding: 80px 0;
    background: #fff;
}

.overview-title h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 40px;
}

.overview-content {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.left-content, .right-content {
    flex: 1;
}

.left-content p, .right-content p {
    font-size: 22px;
    line-height: 1.6;
    color: #337D93;
    margin-bottom: 22px;
}

/* Mission / Vision Styling */
.mission-icon {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    vertical-align: middle;
     /* keeps the icon white if dark background */
}


.mission-vision-section {
    background: #f9f9f9;
    padding: 60px 0;
}

.mv-wrapper {
    display: flex;
    gap: 40px;
}

.mv-box {
    flex: 1;
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.06);
}

.mv-box h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.mv-box p {
    font-size: 18px;
    color: #337D93;
    line-height: 1.6;
}

/* Responsive */
@media(max-width: 992px) {
    .overview-content,
    .mv-wrapper {
        flex-direction: column;
    }

    .overview-title h1 {
        font-size: 32px;
    }
}



.head-banner {
            padding: 60px 0;
        }

        .head-banner img {
            aspect-ratio: 856 / 570;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 18px;
        }

        .head-banner h2 {
            font-size: 45px;
        }
        
        .process-section {
                padding: 80px 0;
                background: #f8fafc;
            }

            .process-wrapper {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 20px;
                position: relative;
            }

            /* Step Card */
            .process-step {
                background: #fff;
                padding: 25px 20px;
                border-radius: 16px;
                text-align: center;
                position: relative;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
                transition: 0.3s;
            }

            .process-step:hover {
                transform: translateY(-8px);
            }

            /* Icon */
            .process-step .icon {
                width: 60px;
                height: 60px;
                margin: 0 auto 15px;
                background: #e6f4ea;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .process-step svg {
                width: 28px;
                height: 28px;
                fill: var(--dark-bg);
            }

            /* Text */
            .process-step h4 {
                color: var(--dark-bg);
                margin-bottom: 10px;
                font-weight: 600;
            }

            .process-step p {
                font-size: 14px;
                color: var(--dark-bg);
                line-height: 1.6;
            }

            /* Flow Arrow */
            .process-step::after {
                content: "➝";
                position: absolute;
                top: 50%;
                right: -15px;
                transform: translateY(-50%);
                font-size: 24px;
                color: var(--dark-bg);
            }

            .process-step:last-child::after {
                display: none;
            }

            /* Responsive */
            @media (max-width: 992px) {
                .process-wrapper {
                    grid-template-columns: repeat(2, 1fr);
                }

                .process-step::after {
                    display: none;
                }
            }

            @media (max-width: 576px) {
                .process-wrapper {
                    grid-template-columns: 1fr;
                }
            }
            
            
            .timeline-section {
                position: relative;
                padding: 100px 20px;
                max-width: 1100px;
                margin: auto;
            }

            /* CENTER LINE */
            .timeline-section .timeline-line {
                position: absolute;
                left: 50%;
                top: 0;
                width: 3px;
                height: 100%;
                background: #ddd;
                transform: translateX(-50%);
            }

            /* PROGRESS LINE */
            .timeline-section .timeline-line::after {
                content: "";
                position: absolute;
                width: 100%;
                height: calc(var(--progress, 0) * 100%);
                background: var(--dark-bg);
                top: 0;
                left: 0;
                transition: height 0.2s ease;
            }

            /* ITEM BASE */
            .timeline-section .timeline-item {
                position: relative;
                width: 50%;
                padding: 50px 40px;
            }

            /* LEFT SIDE */
            .timeline-section .timeline-item.left {
                left: 0;
                text-align: right;
            }

            /* Icon */
            .timeline-section .icon {
                width: 50px;
                height: 50px;
                background: #e6f4ea;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 10px;
                margin-left: auto;
            }

            .timeline-section .timeline-item.right .icon {
                margin-left: 0;
            }

            .timeline-section .icon svg {
                width: 24px;
                height: 24px;
                fill: var(--dark-bg);
            }

            /* Dot on line */
            .timeline-section .timeline-item::before {
                content: "";
                position: absolute;
                top: 50px;
                width: 14px;
                height: 14px;
                background: var(--dark-bg);
                border-radius: 50%;
                z-index: 2;
            }

            .timeline-section .timeline-item.left::before {
                right: -7px;
            }

            .timeline-section .timeline-item.right::before {
                left: -7px;
            }

            /* RIGHT SIDE */
            .timeline-section .timeline-item.right {
                left: 50%;
            }

            /* CARD */
            .timeline-section .timeline-content {
                background: #fff;
                padding: 25px;
                border-radius: 14px;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
                transition: 0.3s;
            }

            .timeline-section .timeline-content:hover {
                transform: translateY(-6px);
            }

            /* DOT ON CENTER LINE */


            /* STEP NUMBER (OPPOSITE SIDE) */
            .timeline-section .timeline-number {
                position: absolute;
                top: 45px;
                font-size: 40px;
                font-weight: 700;
                color: rgba(10, 143, 47, 0.15);
            }

            /* NUMBER POSITIONING */
            .timeline-section .timeline-item.left .timeline-number {
                right: -80px;
                /* opposite side */
            }

            .timeline-section .timeline-item.right .timeline-number {
                left: -80px;
                /* opposite side */
            }

            /* TEXT */
            .timeline-section .timeline-content h4 {
                color: var(--dark-bg);
                margin-bottom: 10px;
            }

            .timeline-section .timeline-content p {
                color: var(--dark-bg);
                font-size: 14px;
                line-height: 1.6;
            }
            
            .breadcrumbs ul{
                        flex-wrap: wrap;
                    }

            /* RESPONSIVE */
            @media (max-width: 768px) {
                .timeline-section .timeline-line {
                    left: 20px;
                }

                .timeline-section .timeline-item {
                    width: 100%;
                    padding-left: 70px;
                    padding-right: 20px;
                }

                .timeline-section .timeline-item.left,
                .timeline-section .timeline-item.right {
                    left: 0;
                    text-align: left;
                }

                .timeline-section .timeline-item::before {
                    left: 20px;
                }

                .timeline-section .timeline-number {
                    left: 0 !important;
                    right: auto;
                    top: 0;
                    font-size: 28px;
                }
            }
            
            
            /* SECTION */
        .services-modern {
            width: 100%;
            padding: 80px 20px;
            background: linear-gradient(180deg, #ffffff, #f8fafc);
        }

        /* HEADER */
        .services-header {
            margin-bottom: 40px;
        }

        .services-header h2 {
            font-size: 36px;
            font-weight: 700;
            position: relative;
        }

        .services-header h2::after {
            content: "";
            width: 60px;
            height: 4px;
            background: var(--dark-bg);
            display: block;
            margin-top: 10px;
            border-radius: 2px;
        }

        /* GRID */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        /* CARD */
        .service-card-modern {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 22px 24px;
            background: #ffffff;
            border-radius: 16px;
            text-decoration: none;
            color: #222;
            font-size: 16px;
            font-weight: 500;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
            transition: all 0.35s ease;
            position: relative;
            overflow: hidden;
        }

        /* gradient hover overlay */
        .service-card-modern::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(10, 143, 47, 0.1), transparent);
            opacity: 0;
            transition: 0.3s;
        }

        .service-card-modern:hover::before {
            opacity: 1;
        }

        /* hover animation */
        .service-card-modern:hover {
            transform: translateY(-8px);
            color: var(--dark-bg);
        }

        /* TITLE */
        .service-title {
            max-width: 85%;
            line-height: 1.4;
        }

        /* ICON */
        .service-icon {
            font-size: 18px;
            transition: 0.3s;
        }

        .service-card-modern:hover .service-icon {
            transform: translateX(6px) rotate(45deg);
            color: var(--dark-bg);
        }
        
        ul.styled-list li {
            padding: 5px 0px;
            color: var(--dark-bg);
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

        ul.styled-list li svg {
            min-width: 15px;
            height: 15px;
            top: 8px;
            position: relative;
            fill: var(--dark-bg);
            ;
        }
        
        .benefits-section {
            padding: 100px 0;
             background: linear-gradient(0deg, #f8fafc, #ffffff); 
        }

        .benefits-section .section-heading {
            /*text-align: center;*/
            margin-bottom: 24px;
        }

        .benefits-section .section-heading h2 {
            font-size: 36px;
            font-weight: 700;
        }

        .benefits-section .section-heading p {
            color: var(--dark-bg);
            margin-top: 10px;
        }

        /* CARD */
        .benefits-section .benefit-card {
            background: #fff;
            padding: 30px 25px;
            border-radius: 18px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
            transition: all 0.35s ease;
            position: relative;
            overflow: hidden;
            height: 100%;
        }

        /* subtle gradient hover */
        .benefits-section .benefit-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(10, 143, 47, 0.08), transparent);
            opacity: 0;
            transition: 0.4s;
        }

        .benefits-section .benefit-card:hover::before {
            opacity: 1;
        }

        .benefits-section .benefit-card:hover {
            transform: translateY(-10px);
        }

        /* ICON */
        .benefits-section .icon {
            width: 60px;
            height: 60px;
            background: #e6f4ea;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .benefits-section .icon svg {
            width: 26px;
            height: 26px;
            fill: var(--dark-bg);
        }

        /* TEXT */
        .benefits-section .benefit-card h4, .benefits-section .benefit-card h5 {
            font-size: 18px;
            margin-bottom: 10px;
            color: var(--dark-bg);
        }

        .benefits-section .benefit-card p {
            font-size: 14px;
            color: var(--dark-bg);
            line-height: 1.6;
        }

        .breadcrumbs ul {
            flex-wrap: wrap;
        }

        /* RESPONSIVE */
        @media (max-width: 992px) {
            .benefits-section .benefits-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 576px) {
            .benefits-section .benefits-grid {
                grid-template-columns: 1fr;
            }

            .benefits-section .benefit-card {
                margin-bottom: 20px;
                height: auto;
            }

            .benefits-section,
            .process-section,
            .head-banner {
                padding-left: 10px;
                padding-right: 10px;
            }
            
            .head-banner h2,
            .head-banner p {
                text-align: center;
            }

            /* ✅ FIX BUTTON CENTER */
            .head-banner .optech-header-btn {
                display: block;
                width: fit-content;
                margin: 20px auto 0;
                text-align: center;
            }
        }

        /* RESPONSIVE */
        @media (max-width: 992px) {
            .services-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 576px) {
            .services-grid {
                grid-template-columns: 1fr;
            }

            .services-header h2 {
                font-size: 28px;
            }
        }