/*==================================================
    GOOGLE FONT
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==================================================
    ROOT VARIABLES
==================================================*/

:root {
    --primary: #0A8F3D;
    --primary-dark: #067530;
    --secondary: #0B66C3;
    --accent: #17A2E8;
    --hero-bg: #F7FAFC;
    --white: #FFFFFF;
    --black: #0F172A;
    --text: #475569;
    --light: #F8FAFC;
    --border: #E5E7EB;
    --shadow: 0 15px 35px rgba(15, 23, 42, .08);
    --transition: .35s ease;
}

/*==================================================
    RESET
==================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #F8FAFC;
    color: var(--black);
    overflow-x: hidden;
}

img {
    width: 100%;
    display: block;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

.container {
    width: 90%;
    max-width: 1250px;
    margin: auto;
}

section {
    padding: 100px 0;
}

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

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #043a6f;
    color: #fff;
    padding: 16px 34px;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: 0 12px 30px rgba(32, 49, 87, 0.35);
    border: 2px solid rgba(202, 202, 202, 0.45);
}

.btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(29, 70, 48, 0.45);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #043a6f;
    color: #ffffff;
    padding: 16px 34px;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: 0 12px 30px rgba(45, 102, 63, 0.35);
    border: 2px solid rgba(202, 202, 202, 0.45);
    margin-left: 20px;
}

.btn-secondary:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(38, 37, 40, 0.45);
}

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

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: transparent;
    padding: 18px 0;
    transition: .35s ease;
}

header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #0F172A;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .1);
    animation: slideDown .4s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    width: 130px;
}

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

.navbar ul {
    display: flex;
    gap: 35px;
}

.navbar ul li a {
    color: #fff;
    font-weight: 500;
    transition: .3s;
    position: relative;
}

.navbar ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: .3s;
}

.navbar ul li a:hover::after {
    width: 100%;
}

.navbar ul li a.active {
    color: #16A34A;
}

.navbar ul li a.active::after {
    width: 100%;
}

.whatsapp-btn {
    background: #B20205;
    color: #fff;
    padding: 14px 28px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    transition: .3s;
}

.whatsapp-btn:hover {
    transform: translateY(-4px);
}

.menu-btn {
    display: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
}

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

.hero {
    position: relative;
    min-height: 100vh;
    padding-top: 170px;
    padding-bottom: 70px;
    position: relative;
    overflow: hidden;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease;
    transform: scale(1);
    min-height: 100vh;
    overflow: hidden;
}

.slide.active {
    opacity: 1;
    animation: zoom 8s linear forwards;
}

.slide:nth-child(1) {
    background-image: url(../image/bg2.png);
}

.slide:nth-child(2) {
    background-image: url(../image/bg3.png);
}

.slide:nth-child(3) {
    background-image: url(../image/bg1.png);
}

.slide:nth-child(4) {
    background-image: url(../image/bg4.png);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, .06),
            rgba(255, 255, 255, .06),
            rgba(255, 255, 255, .06));
    z-index: 1;
}

/* Dark Overlay */

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(10, 20, 30, .75),
            rgba(10, 20, 30, .40),
            rgba(10, 20, 30, .20));
    z-index: -1;
}

@keyframes zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}


.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    color: var(--primary);
}

.hero-tag {
    color: var(--primary);
    background: rgba(22, 163, 74, .12);
    display: inline-block;
    background: rgba(102, 93, 233, 0.288);
    backdrop-filter: blur(15px);
    padding: 10px 24px;
    border-radius: 50px;
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: .95rem;
    font-weight: 600;
}

.hero-content h1 {
    color: #ffffff;
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 800;
}

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

.line {
    width: 620px;
    height: 5px;
    background: linear-gradient(90deg,
        var(--primary),
        var(--secondary));
    margin: 30px auto;
    border-radius: 20px;
}

.hero-content p {
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.9;
    font-size: 1.05rem;
    color: #ffffff;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.features {
    background: transparent;
    position: relative;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feature-box {
    background: #fff;
    padding: 35px;
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    transition: all .45s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.feature-box:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    border-color: #16A34A;
}

.feature-box .icon {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg,
            #0A8F3D,
            #0B66C3);

    color: #fff;
    margin: auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    margin-bottom: 20px;
}

.feature-box h3 {
    margin-bottom: 12px;
    font-size: 1.3rem;
}

.feature-box p {
    color: var(--text);
    line-height: 1.7;
}

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

.about {
    background: transparent;
    position: relative;
    overflow: hidden;
}

.about::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(22, 163, 74, .08);
    border-radius: 50%;
    top: 5px;
    right: -120px;
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 2;
}

.section-tag {
    display: inline-block;
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.about-left h2 {
    font-size: 2.8rem;
    line-height: 1.3;
    margin-bottom: 20px;
}


.title-line {
    width: 80px;
    height: 5px;
    background: #1b173a;
    border-radius: 30px;
    margin-bottom: 25px;
}

.about-left p {
    color: var(--text);
    line-height: 1.9;
    margin-bottom: 20px;
}

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

.machine-card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
}

.circle-bg {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: linear-gradient(135deg,
            rgba(10, 143, 61, .12),
            rgba(11, 102, 195, .12));
}

.machine-card img {
    position: relative;
    width: 520px;
    z-index: 2;
    animation: machineFloat 4s ease-in-out infinite;
}

.platform {
    position: absolute;
    bottom: 70px;
    width: 260px;
    height: 26px;
    background: rgba(11, 102, 195, .18);
    border-radius: 50%;
    filter: blur(6px);
}

@keyframes machineFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}


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

.section-heading {
    text-align: center;
    margin-bottom: 60px;
}

.section-heading span {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.3rem;
    color: #b20205;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.section-heading h2 {
    margin: 15px 0;
    font-size: 2.8rem;
}

.section-heading p {
    max-width: 650px;
    margin: auto;
    color: var(--text);
    line-height: 1.8;
}

/*==================================================
    PRODUCTS
==================================================*/

.products {
    background: transparent;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.product-card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-12px);
}

.product-img {
    height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,
            rgba(22, 163, 74, .05),
            rgba(11, 102, 195, .05));
}

.product-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: .4s;
}

.product-card:hover .product-img img {
    transform: scale(1.08);
}

.product-content {
    padding: 30px;
}

.product-content h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.product-content p {
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 20px;
}

.product-content a {
    font-weight: 600;
    transition: .3s;
}

.product-content a:hover {
    color: var(--accent);
}

/*==================================================
    WHY CHOOSE US
==================================================*/

.why-us {
    background: transparent;
    position: relative;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 35px;
}

.why-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 35px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: .35s;
    height: 100%;
}

.why-card:hover {
    transform: translateY(-12px);
}


.service-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 25px;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: .5s ease;
}

.why-card:hover .service-image img {
    transform: scale(1.08);
}

.why-card h3 {
    color: #02b205;
    margin-bottom: 15px;
    font-size: 1.35rem;
}

.why-card p {
    color: #000000;
    line-height: 1.8;
}

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

.process {
    background: transparent;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.process-card {
    background: #fff;
    padding: 40px 25px;
    border-radius: 22px;
    text-align: center;
    position: relative;
    transition: .35s;
    box-shadow: var(--shadow);
}

.process-card:hover {
    transform: translateY(-10px);
}

.number {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 3rem;
    font-weight: 700;
    color: #ECE9FF;
}

.process-card i {
    width: 80px;
    height: 80px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,
            var(--primary),
            var(--accent));
    color: #fff;
    font-size: 30px;
    margin-bottom: 25px;
}

.process-card h3 {
    margin-bottom: 15px;
}

.process-card p {
    color: var(--text);
    line-height: 1.8;
}

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

.cta {
    background: transparent;
    padding: 120px 0;
}

.cta-box {
    background: linear-gradient(135deg,
            var(--primary),
            var(--accent));
    color: #fff;
    border-radius: 35px;
    padding: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    right: -120px;
    top: -120px;
}

.cta-text {
    position: relative;
    z-index: 2;
}

.cta-text span {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.cta-text h2 {
    font-size: 2.7rem;
    margin: 20px 0;
}

.cta-text p {
    max-width: 600px;
    line-height: 1.9;
}

.cta-btn {
    position: relative;
    z-index: 2;
}

.cta-btn .btn-primary {
    background: #fff;
    color: var(--primary);
}

/*==================================================
    COMMON HOVER EFFECT
==================================================*/

.product-card,
.why-card,
.process-card {
    transition: all .35s ease;
}

/*==================================================
    FAQ SECTION
==================================================*/

.faq {
    background: transparent;
}

.faq-wrapper {
    max-width: 900px;
    margin: auto;
}

.faq-item {
    background: #fff;
    border-radius: 18px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: .3s;
}

.faq-item.active {
    border-left: 5px solid var(--primary);
}

.faq-question {
    width: 100%;
    border: none;
    background: none;
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
}

.faq-question i {
    color: var(--primary);
    transition: .3s;
}

.faq-item.active i {
    transform: rotate(45deg);
}

.faq-answer {
    display: none;
    padding: 0 30px 25px;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-answer p {
    color: var(--text);
    line-height: 1.9;
}

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

.contact {
    background: transparent;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.contact-left span {
    color: #16A34A;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.contact-left h2 {
    font-size: 2.8rem;
    margin: 20px 0;
}

.contact-left p {
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 35px;
}

.contact-info div {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.contact-info i {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg,
            var(--primary),
            var(--accent));
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*==================================================
    CONTACT FORM
==================================================*/

.contact-right {
    background: #fff;
    padding: 40px;
    border-radius: 25px;
    box-shadow: var(--shadow);
}

.contact-right form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-right input,
.contact-right textarea {
    background: #F8FAFC;
    width: 100%;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    outline: none;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: .3s;
}

.contact-right input:focus,
.contact-right textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .15);
}

.contact-right textarea {
    resize: none;
}

.contact-right button {
    border: none;
    cursor: pointer;
}

.btn-submit {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,
            #16A34A 0%,
            #0B66C3 100%);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all .35s ease;
    box-shadow: 0 10px 25px rgba(22, 163, 74, .25);
}

.btn-submit:hover {
    background: linear-gradient(135deg,
            #16A34A 0%,
            #0B66C3 100%);
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(22, 163, 74, .35);
}

.btn-submit:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgb(16, 53, 121);
}

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

footer {
    background: #0F172A;
    color: #FFFFFF;
    padding: 90px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
}

.footer-about img {
    width: 280px;
    margin-bottom: 25px;
}

.footer-about p {
    color: #C7C7E6;
    line-height: 1.9;
    margin-bottom: 25px;
}

.social {
    display: flex;
    gap: 15px;
}

.social a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: .3s;
}

.social a:hover {
    background: var(--primary);
}

.footer-grid h3 {
    margin-bottom: 25px;
}

.footer-grid ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-grid ul a {
    color: #C7C7E6;
    transition: .3s;
}

.footer-grid ul a:hover {
    color: #fff;
    padding-left: 8px;
}

/*==================================================
    COPYRIGHT
==================================================*/

.copyright {
    background: #020617;
    color: #CBD5E1;
    text-align: center;
    padding: 20px 0;
}

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

.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 90px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    z-index: 999;
    transition: .3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

#scrollTop {
    position: fixed;
    right: 25px;
    bottom: 20px;
    width: 55px;
    height: 55px;
    border: none;
    border-radius: 50%;
    background: #5b5f62;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    transition: .3s;
}

#scrollTop:hover {
    background: var(--accent);
    transform: translateY(-5px);
}

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

/*============= Large Laptop =============*/
@media (max-width:1200px) {
    .container {
        width: 95%;
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }

    .about-left h2,
    .section-heading h2,
    .contact-left h2 {
        font-size: 2.5rem;
    }

    .hero-car img {
        width: 700px;
    }
}

/*============= Laptop =============*/
@media (max-width:992px) {
    /* Navigation */
    .menu-btn {
        display: block;
        z-index: 1001;
    }

    .navbar.active .menu-btn i::before {
        color: #000;
    }

    .navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 320px;
        height: 100vh;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .4s;
        z-index: 999;
    }

    .navbar.active {
        right: 0;
    }

    .navbar ul {
        flex-direction: column;
        gap: 35px;
        text-align: center;
    }

    .navbar ul li a {
        color: #000;
    }

    .header-btn {
        display: none;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 180px 0 220px;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .hero-car img {
        width: 600px;
    }

    /* Layout */
    .about-container,
    .contact-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .feature-grid,
    .product-grid,
    .why-grid,
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .newsletter-box {
        flex-direction: column;
        text-align: center;
    }

    .cta-box {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
}

/*============= Tablet =============*/
@media (max-width:768px) {
    section {
        padding: 80px 0;
    }

    .logo img {
        width: 150px;
    }

    .hero {
        padding-top: 150px;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: .95rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 18px;
    }

    .btn-secondary {
        margin-left: 0;
    }

    .hero-car {
        bottom: -90px;
    }

    .hero-car img {
        width: 480px;
    }

    .about-left h2,
    .contact-left h2,
    .section-heading h2 {
        font-size: 2rem;
    }

    .feature-grid,
    .product-grid,
    .why-grid,
    .process-grid,
    .testimonial-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-box {
        padding: 40px 25px;
    }

    .newsletter-box form {
        width: 100%;
        flex-direction: column;
        background: none;
        gap: 15px;
    }

    .newsletter-box input {
        width: 100%;
        border-radius: 50px;
    }

    .newsletter-box button {
        width: 100%;
        padding: 16px;
        border-radius: 50px;
    }

    .contact-right {
        padding: 30px;
    }
}

/*============= Mobile =============*/
@media (max-width:576px) {
    .container {
        width: 92%;
    }

    header {
        padding: 18px 0;
    }

    .logo img {
        width: 130px;
    }

    .hero {
        padding-top: 140px;
        padding-bottom: 180px;
    }

    .hero-tag {
        font-size: .8rem;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        font-size: .9rem;
    }

    .line {
        width: 70px;
    }

    .hero-car img {
        width: 340px;
    }

    .feature-box,
    .product-card,
    .why-card,
    .process-card,
    .testimonial-card {
        padding: 25px;
    }

    .product-img {
        height: 220px;
    }

    .product-img img {
        width: 170px;
    }

    .cta-box {
        padding: 40px 25px;
    }

    .cta-text h2 {
        font-size: 1.8rem;
    }

    .contact-right {
        padding: 25px;
    }

    .footer-grid {
        gap: 35px;
    }

    .footer-about {
        text-align: center;
    }

    .social {
        justify-content: center;
    }

    .whatsapp-float {
        width: 55px;
        height: 55px;
        font-size: 26px;
    }

    #scrollTop {
        width: 50px;
        height: 50px;
    }
}

/*============= Small Mobile =============*/
@media (max-width:400px) {
    .hero-content h1 {
        font-size: 1.7rem;
    }

    .hero-content p {
        font-size: .85rem;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .hero-car img {
        width: 300px;
    }

    .section-heading h2 {
        font-size: 1.6rem;
    }

    .about-left h2,
    .contact-left h2 {
        font-size: 1.6rem;
    }

    .contact-right {
        padding: 20px;
    }

    .newsletter-box {
        padding: 30px 20px;
    }
}

/* about page */

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

.about-hero {
    position: relative;
    height: 70vh;
    min-height: 500px;
    background: url("../image/about-banner.jpg") center center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.about-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(7, 25, 56, .90),
        rgba(10, 60, 120, .70),
        rgba(0, 0, 0, .45));
}

.about-hero::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(22, 163, 74, .15);
    border-radius: 50%;
    top: -180px;
    left: -120px;
}

.about-hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background: rgba(11, 102, 195, .18);
    border-radius: 50%;
    right: -100px;
    bottom: 60px;
}

.about-hero-content {
    position: relative;
    z-index: 10;
    color: #fff;
}

.about-hero-content span {
    display: inline-block;
    padding: 12px 28px;
    background: rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 40px;
    letter-spacing: 2px;
    font-size: .9rem;
    margin-bottom: 25px;
}

.about-hero-content h1 {
    color: #ffffff;
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.about-hero-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, .90);
}

.about-hero-content a {
    color: #fff;
}

.about-hero-content i {
    margin: 0 10px;
}

.wave {
    position: absolute;
    bottom: -2px;
    width: 100%;
    line-height: 0;
}

.wave svg {
    width: 100%;
    height: 120px;
}


/*==================================================
    COMPANY SECTION
==================================================*/

.company-about {
    padding: 100px 0;
    background: #fff;
}


/*==================================
    DECARBON SECTION
==================================*/

.decarbon-section {
    padding: 50px 0;
    background: #ffffff;
    overflow: hidden;
}

.decarbon-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 90px;
    align-items: center;
}

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

.image-bg {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16A34A, #0B66C3);
    opacity: .08;
}

.decarbon-image img {
    position: relative;
    width: 100%;
    max-width: 470px;
    z-index: 2;
    animation: floatImage 4s ease-in-out infinite;
}

@keyframes floatImage {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.decarbon-content h2 {
    font-size: 3rem;
    color: #0F172A;
    margin: 15px 0 5px;
    line-height: 1.2;
}

.decarbon-content h3 {
    font-size: 1.6rem;
    color: #16A34A;
    margin-bottom: 18px;
}

.decarbon-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(22, 163, 74, .12);
    color: #16A34A;
    padding: 12px 22px;
    border-radius: 50px;
    font-weight: 600;
}

.decarbon-line {
    width: 90px;
    height: 5px;
    border-radius: 50px;
    background: linear-gradient(90deg, #16A34A, #0B66C3);
    margin: 20px 0 30px;
}

.decarbon-content p {
    color: #64748B;
    line-height: 1.9;
    margin-bottom: 22px;
    font-size: 1rem;
}

.decarbon-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 35px 0;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #F8FAFC;
    border-radius: 14px;
    font-weight: 500;
    transition: .35s;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

.feature-item i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #16A34A;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .85rem;
}

/* RESPONSIVE */
@media(max-width:992px) {
    .decarbon-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }

    .decarbon-line {
        margin: 20px auto 30px;
    }

    .decarbon-tag {
        justify-content: center;
    }

    .decarbon-features {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {
    .decarbon-content h2 {
        font-size: 2.3rem;
    }

    .decarbon-content h3 {
        font-size: 1.3rem;
    }

    .decarbon-image img {
        max-width: 340px;
    }
}

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

    .decarbon-content h2 {
        font-size: 2rem;
    }

    .image-bg {
        width: 280px;
        height: 280px;
    }
}

.company-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 70px;
}

.company-left h2 {
    font-size: 2.8rem;
    margin: 20px 0;
    line-height: 1.3;
}

.company-left p {
    color: var(--text);
    line-height: 1.9;
    margin-bottom: 20px;
}

.company-right {
    text-align: center;
}

.company-right img {
    width: 100%;
    max-width: 520px;
    animation: floatMachine 4s ease-in-out infinite;
}

@keyframes floatMachine {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}


/*==================================================
    MISSION SECTION
==================================================*/

.mission {
    background: #F8FAFC;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}

.mission-card {
    background: #fff;
    padding: 45px;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: .35s;
}

.mission-card:hover {
    transform: translateY(-10px);
}

.mission-card i {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-bottom: 25px;
    color: #fff;
    font-size: 30px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.mission-card h3 {
    margin-bottom: 20px;
}

.mission-card p {
    line-height: 1.8;
    color: var(--text);
}


/*==================================================
    COMPANY STATS
==================================================*/

.company-stats {
    background: linear-gradient(135deg, #0A8F3D, #0B66C3);
    padding: 90px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.stat-card {
    text-align: center;
    color: #fff;
}

.stat-card h2 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.stat-card p {
    font-size: 1rem;
}


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

.why-about {
    background: #fff;
}


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

@media(max-width:992px) {
    .company-container {
        grid-template-columns: 1fr;
    }

    .mission-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-hero-content h1 {
        font-size: 3rem;
    }
}

@media(max-width:768px) {
    .about-hero {
        min-height: 420px;
    }

    .about-hero-content h1 {
        font-size: 2.5rem;
    }

    .company-left h2 {
        font-size: 2rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:576px) {
    .about-hero {
        height: 60vh;
    }

    .about-hero-content h1 {
        font-size: 2rem;
    }

    .company-left h2 {
        font-size: 1.7rem;
    }

    .mission-card {
        padding: 30px;
    }
}


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

.services-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 170px 0 120px;
    background:
        radial-gradient(circle at top right, #13b95d 0%, transparent 25%),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, .08) 0%, transparent 28%),
        linear-gradient(135deg, #04192f, #0a4e97);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .12);
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: .35;
}

.hero-circle {
    position: absolute;
    border-radius: 50%;
}

.circle-1 {
    width: 420px;
    height: 420px;
    background: rgba(22, 163, 74, .15);
    top: -170px;
    right: -120px;
}

.circle-2 {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, .08);
    left: -80px;
    bottom: -120px;
}

.services-container {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 80px;
    align-items: center;
}


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

.services-content {
    color: #fff;
}

.services-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .15);
    font-size: .9rem;
    letter-spacing: 1px;
    margin-bottom: 28px;
}

.services-content h1 {
    font-size: 4.2rem;
    line-height: 1.15;
    margin-bottom: 28px;
    max-width: 650px;
}

.services-content p {
    max-width: 620px;
    line-height: 1.9;
    color: #e8eef6;
    margin-bottom: 40px;
    font-size: 1.05rem;
}

.services-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.service-tagline {
    color: #000000;
    text-align: center;
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: -20px;
}


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

.services-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 36px;
    border-radius: 50px;
    background: #16A34A;
    color: #fff;
    font-weight: 600;
    transition: .35s;
    box-shadow: 0 15px 35px rgba(22, 163, 74, .28);
}

.services-btn-primary:hover {
    transform: translateY(-5px);
}

.services-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, .35);
    color: #fff;
    font-weight: 600;
    transition: .35s;
}

.services-btn-secondary:hover {
    background: #fff;
    color: #0a4e97;
}


/*==================================================
    MACHINE
==================================================*/

.services-image {
    position: relative;
    display: flex;
    justify-content: center;
}

.services-image::before {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background: #16A34A;
    opacity: .16;
    filter: blur(90px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.services-image img {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 650px;
    animation: servicesFloat 4s ease-in-out infinite;
}

@keyframes servicesFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}


/*==================================================
    FLOATING CARDS
==================================================*/

.machine-badge {
    position: absolute;
    top: 25px;
    right: 30px;
    background: #fff;
    padding: 15px 24px;
    border-radius: 50px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .15);
    z-index: 5;
}

.machine-badge i {
    color: #16A34A;
}


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

.services-intro {
    padding: 120px 0;
    background: #fff;
}

.intro-features {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.intro-feature {
    background: #fff;
    padding: 40px 30px;
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    transition: .35s;
}

.intro-feature:hover {
    transform: translateY(-10px);
}

.intro-feature i {
    width: 85px;
    height: 85px;
    margin: auto;
    margin-bottom: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #16A34A, #0B66C3);
    color: #fff;
    font-size: 32px;
}

.intro-feature h3 {
    margin-bottom: 15px;
    font-size: 1.35rem;
}

.intro-feature p {
    color: #64748b;
    line-height: 1.8;
}


/*==================================================
    SERVICES SHOWCASE
==================================================*/

.services-showcase {
    padding: 120px 0;
    background: #f8fafc;
}

.services-showcase .container {
    display: flex;
    flex-direction: column;
    gap: 140px;
}


/*==================================================
    SERVICE ITEM
==================================================*/

.service-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.service-item.reverse .service-img {
    order: 2;
}

.service-item.reverse .service-text {
    order: 1;
}


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

.service-img {
    position: relative;
}

.service-img::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    background: linear-gradient(135deg, #16A34A, #0B66C3);
    border-radius: 30px;
    top: -25px;
    left: -25px;
    opacity: .12;
}

.service-item.reverse .service-img::before {
    left: auto;
    right: -25px;
}

.service-img img {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: 24px;
    background: #fff;
    padding: 35px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .10);
    transition: .45s;
}

.service-item:hover .service-img img {
    transform: translateY(-10px);
}


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

.service-text span {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #16A34A, #0B66C3);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.service-text h2 {
    font-size: 2.6rem;
    line-height: 1.2;
    margin-bottom: 22px;
    color: #0f172a;
}

.service-text p {
    color: #64748b;
    line-height: 1.9;
    margin-bottom: 30px;
}


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

.service-text ul {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 40px;
}

.service-text ul li {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #334155;
    font-weight: 500;
}

.service-text ul li i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(22, 163, 74, .12);
    color: #16A34A;
    font-size: .9rem;
}


/*==================================================
    ALTERNATING BACKGROUNDS
==================================================*/

.service-item:nth-child(odd) {
    background: #fff;
    padding: 60px;
    border-radius: 30px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .05);
}

.service-item:nth-child(even) {
    background: #f1f5f9;
    padding: 60px;
    border-radius: 30px;
}


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

.service-text .services-btn-primary {
    display: inline-flex;
}


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

.service-item {
    transition: .35s;
}

.service-item:hover {
    transform: translateY(-8px);
}

.service-item:hover .service-text span {
    transform: rotate(12deg);
}

.service-text span {
    transition: .35s;
}


/*==================================================
    DECORATIVE SHAPES
==================================================*/

.service-item {
    position: relative;
    overflow: hidden;
}

.service-item::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(11, 102, 195, .05);
    bottom: -90px;
    right: -90px;
}

.service-item.reverse::after {
    left: -90px;
    right: auto;
}


/*==================================================
    WHY EDS WAGON
==================================================*/

.why-eds {
    padding: 120px 0;
    background: #ffffff;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.why-box {
    position: relative;
    background: #fff;
    padding: 45px 35px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
    transition: .35s;
    overflow: hidden;
}

.why-box:hover {
    transform: translateY(-10px);
}

.why-box::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(22, 163, 74, .08);
    right: -40px;
    top: -40px;
}

.why-number {
    width: 70px;
    height: 70px;
    margin: auto auto 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #16A34A, #0B66C3);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}

.why-box h3 {
    font-size: 1.4rem;
    margin-bottom: 18px;
}

.why-box p {
    color: #64748b;
    line-height: 1.9;
}


/*==================================================
    BUSINESS BANNER
==================================================*/

.business-banner {
    padding: 130px 0;
    background: linear-gradient(135deg, #03172f, #0b4b8d);
    overflow: hidden;
    position: relative;
}

.business-banner::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    top: -250px;
    right: -150px;
}

.business-wrapper {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 80px;
    align-items: center;
}

.business-content {
    color: #fff;
}

.business-content span {
    display: inline-block;
    margin-bottom: 18px;
    color: #8ef7c0;
    font-weight: 600;
    letter-spacing: 2px;
}

.business-content h2 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 25px;
}

.business-content p {
    color: #dbe7f5;
    line-height: 1.9;
    margin-bottom: 35px;
}

.business-content ul {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 40px;
}

.business-content li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.business-content li i {
    color: #22c55e;
}

.business-image {
    display: flex;
    justify-content: center;
    position: relative;
}

.business-image img {
    width: 100%;
    max-width: 520px;
    animation: servicesFloat 4s ease-in-out infinite;
}


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

.services-cta {
    padding: 120px 0;
    background: #f8fafc;
}

.services-cta-box {
    padding: 80px;
    border-radius: 35px;
    background: linear-gradient(135deg, #16A34A, #0B66C3);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.services-cta-box::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    top: -160px;
    right: -120px;
}

.services-cta-box span {
    position: relative;
    z-index: 2;
    letter-spacing: 2px;
    font-weight: 600;
}

.services-cta-box h2 {
    position: relative;
    z-index: 2;
    font-size: 3rem;
    margin: 20px 0;
}

.services-cta-box p {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto 40px;
    line-height: 1.9;
}

.services-cta .services-buttons {
    justify-content: center;
    position: relative;
    z-index: 2;
}


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

@media(max-width:1200px) {
    .services-container,
    .business-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:992px) {
    .hero-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .intro-features {
        grid-template-columns: 1fr;
    }

    .service-item {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .service-item.reverse .service-img,
    .service-item.reverse .service-text {
        order: unset;
    }

    .services-content {
        text-align: center;
    }

    .services-content p {
        margin-left: auto;
        margin-right: auto;
    }

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

    .business-content {
        text-align: center;
    }

    .business-content ul {
        align-items: center;
    }
}

@media(max-width:768px) {
    .services-content h1 {
        font-size: 2.6rem;
    }

    .services-content p {
        font-size: .95rem;
    }

    .hero-stats-grid {
        grid-template-columns: 1fr;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .service-item {
        padding: 35px;
    }

    .service-text h2 {
        font-size: 2rem;
    }

    .business-content h2 {
        font-size: 2.2rem;
    }

    .services-cta-box {
        padding: 50px 30px;
    }

    .services-cta-box h2 {
        font-size: 2rem;
    }
}

@media(max-width:576px) {
    .services-hero {
        padding: 150px 0 100px;
    }

    .services-content h1 {
        font-size: 2rem;
    }

    .services-tag {
        font-size: .8rem;
    }

    .services-buttons {
        flex-direction: column;
    }

    .services-btn-primary,
    .services-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .machine-badge,
    .floating-card {
        display: none;
    }

    .service-item {
        padding: 25px;
    }

    .service-text h2 {
        font-size: 1.7rem;
    }

    .business-content h2 {
        font-size: 1.8rem;
    }

    .services-cta-box h2 {
        font-size: 1.7rem;
    }
}


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

.hho-hero {
    position: relative;
    overflow: hidden;
    padding: 170px 0 120px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at top right, #00d084 0%, transparent 25%),
        radial-gradient(circle at bottom left, #0b66c320 0%, transparent 30%),
        linear-gradient(135deg, #031b34, #0b66c3);
}

.hho-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.hho-glow-one {
    width: 420px;
    height: 420px;
    background: #16A34A;
    opacity: .25;
    top: -120px;
    right: -120px;
}

.hho-glow-two {
    width: 300px;
    height: 300px;
    background: #ffffff;
    opacity: .08;
    left: -80px;
    bottom: -100px;
}

.hho-wrapper {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 2;
}


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

.hho-content {
    color: #fff;
}

.hho-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    margin-bottom: 30px;
    font-weight: 600;
    letter-spacing: 1px;
}

.hho-content h1 {
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 25px;
}

.hho-content p {
    color: #e8eef6;
    line-height: 1.9;
    max-width: 620px;
    margin-bottom: 40px;
}


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

.hho-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.hho-btn-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 38px;
    background: #16A34A;
    color: #fff;
    border-radius: 50px;
    font-weight: 600;
    transition: .35s;
    box-shadow: 0 15px 35px rgba(22, 163, 74, .3);
}

.hho-btn-primary:hover {
    transform: translateY(-5px);
}

.hho-btn-secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 38px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-weight: 600;
    transition: .35s;
}

.hho-btn-secondary:hover {
    background: #fff;
    color: #0b66c3;
}


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

.hho-image {
    position: relative;
    display: flex;
    justify-content: center;
}

.hho-image img {
    width: 100%;
    max-width: 560px;
    animation: hhoFloat 4s ease-in-out infinite;
}

@keyframes hhoFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}


/*==================================================
    FLOATING INFORMATION CARDS
==================================================*/

.hho-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 18px 24px;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .15);
    font-weight: 600;
    z-index: 2;
}

.hho-floating-card i {
    color: #16A34A;
}

.hho-left-card {
    top: 120px;
    left: -25px;
}

.hho-right-card {
    bottom: 70px;
    right: -20px;
}


/*==================================================
    QUICK HIGHLIGHTS
==================================================*/

.hho-highlights {
    margin-top: -70px;
    position: relative;
    z-index: 5;
}

.hho-highlights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.hho-highlight-card {
    background: #fff;
    border-radius: 22px;
    padding: 35px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
    transition: .35s;
}

.hho-highlight-card:hover {
    transform: translateY(-10px);
}

.hho-highlight-card h2 {
    font-size: 2.8rem;
    color: #16A34A;
    margin-bottom: 12px;
}

.hho-highlight-card p {
    color: #64748b;
}


/*==================================================
    HHO OVERVIEW
==================================================*/

.hho-overview {
    padding: 120px 0;
    background: #fff;
}

.hho-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.hho-overview-image img {
    width: 100%;
    border-radius: 25px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .10);
}

.hho-overview-content span {
    color: #16A34A;
    font-weight: 700;
    letter-spacing: 2px;
}

.hho-overview-content h2 {
    font-size: 3rem;
    margin: 18px 0 25px;
    line-height: 1.2;
}

.hho-overview-content p {
    color: #64748b;
    line-height: 1.9;
    margin-bottom: 22px;
}

.hho-overview-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 35px;
}

.hho-overview-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.hho-overview-item i {
    color: #16A34A;
}


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

.hho-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 70px;
}

.hho-heading span {
    display: inline-block;
    color: #16A34A;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.hho-heading h2 {
    font-size: 3rem;
    color: #0f172a;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hho-heading p {
    color: #64748b;
    line-height: 1.9;
}


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

.hho-process {
    padding: 120px 0;
    background: #f8fafc;
}

.hho-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.hho-process-card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    padding: 45px 30px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
    transition: .35s;
    overflow: hidden;
}

.hho-process-card:hover {
    transform: translateY(-12px);
}

.hho-process-number {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #16A34A;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
}

.hho-process-card i {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #16A34A, #0B66C3);
    color: #fff;
    font-size: 32px;
}

.hho-process-card h3 {
    font-size: 1.35rem;
    margin-bottom: 15px;
}

.hho-process-card p {
    color: #64748b;
    line-height: 1.8;
}


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

.hho-benefits {
    padding: 120px 0;
    background: #ffffff;
}

.hho-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.hho-benefit-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
    transition: .35s;
    position: relative;
    overflow: hidden;
}

.hho-benefit-card::before {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(22, 163, 74, .08);
    top: -60px;
    right: -60px;
}

.hho-benefit-card:hover {
    transform: translateY(-12px);
}

.hho-benefit-card i {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #16A34A, #0B66C3);
    color: #fff;
    font-size: 32px;
}

.hho-benefit-card h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.hho-benefit-card p {
    color: #64748b;
    line-height: 1.8;
}


/*==================================================
    SUITABLE VEHICLES
==================================================*/

.hho-vehicles {
    padding: 120px 0;
    background: #f8fafc;
}

.hho-vehicles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.hho-vehicle-card {
    background: #fff;
    padding: 45px 25px;
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
    transition: .35s;
}

.hho-vehicle-card:hover {
    transform: translateY(-10px);
}

.hho-vehicle-card i {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #16A34A, #0B66C3);
    color: #fff;
    font-size: 34px;
}

.hho-vehicle-card h3 {
    font-size: 1.35rem;
    color: #0f172a;
}


/*==================================================
    BEFORE VS AFTER
==================================================*/

.hho-comparison {
    padding: 120px 0;
    background: #ffffff;
}

.hho-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 70px;
}

.hho-before-card,
.hho-after-card {
    background: #fff;
    border-radius: 25px;
    padding: 45px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
    transition: .35s;
}

.hho-before-card {
    border-top: 6px solid #ef4444;
}

.hho-after-card {
    border-top: 6px solid #16A34A;
}

.hho-before-card:hover,
.hho-after-card:hover {
    transform: translateY(-10px);
}

.hho-label {
    display: inline-block;
    padding: 10px 26px;
    border-radius: 40px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #fff;
}

.hho-before-card .hho-label {
    background: #ef4444;
}

.hho-after-card .hho-label {
    background: #16A34A;
}

.hho-before-card ul,
.hho-after-card ul {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hho-before-card li,
.hho-after-card li {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #475569;
}

.hho-before-card i {
    color: #ef4444;
}

.hho-after-card i {
    color: #16A34A;
}


/*==================================================
    FAQ
==================================================*/

.hho-faq {
    padding: 120px 0;
    background: #f8fafc;
}

.hho-faq-wrapper {
    max-width: 900px;
    margin: auto;
}

.hho-faq-item {
    background: #fff;
    border-radius: 18px;
    margin-bottom: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.hho-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
}

.hho-faq-question i {
    transition: .35s;
    color: #16A34A;
}

.hho-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: .4s;
}

.hho-faq-answer p {
    padding: 0 30px 30px;
    color: #64748b;
    line-height: 1.8;
}

.hho-faq-item.active .hho-faq-answer {
    max-height: 220px;
}

.hho-faq-item.active .hho-faq-question i {
    transform: rotate(45deg);
}


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

.hho-cta {
    padding: 120px 0;
    background: #ffffff;
}

.hho-cta-box {
    background: linear-gradient(135deg, #031b34, #0b66c3);
    color: #fff;
    border-radius: 35px;
    padding: 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hho-cta-box::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    right: -120px;
    top: -120px;
}

.hho-cta-box span {
    color: #7fffd4;
    letter-spacing: 2px;
    font-weight: 600;
}

.hho-cta-box h2 {
    font-size: 3rem;
    margin: 20px 0;
    line-height: 1.2;
}

.hho-cta-box p {
    max-width: 720px;
    margin: 0 auto 40px;
    line-height: 1.9;
    color: #e2e8f0;
}

.hho-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}


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

@media(max-width:1200px) {
    .hho-wrapper,
    .hho-overview-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .hho-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:992px) {
    .hho-content {
        text-align: center;
    }

    .hho-content p {
        margin: auto auto 35px;
    }

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

    .hho-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hho-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hho-vehicles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hho-comparison-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {
    .hho-content h1 {
        font-size: 2.5rem;
    }

    .hho-heading h2 {
        font-size: 2.2rem;
    }

    .hho-overview-content h2 {
        font-size: 2.2rem;
    }

    .hho-process-grid,
    .hho-benefits-grid,
    .hho-vehicles-grid,
    .hho-highlights-grid {
        grid-template-columns: 1fr;
    }

    .hho-overview-list {
        grid-template-columns: 1fr;
    }

    .hho-cta-box {
        padding: 55px 30px;
    }

    .hho-cta-box h2 {
        font-size: 2rem;
    }
}

@media(max-width:576px) {
    .hho-hero {
        padding: 150px 0 100px;
    }

    .hho-content h1 {
        font-size: 2rem;
    }

    .hho-buttons {
        flex-direction: column;
    }

    .hho-btn-primary,
    .hho-btn-secondary {
        width: 100%;
    }

    .hho-floating-card {
        display: none;
    }

    .hho-before-card,
    .hho-after-card {
        padding: 30px;
    }
}


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

.carbon-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(10, 18, 13, 0.795),
        rgba(15, 23, 18, 0.464)), url("../image/earth.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.carbon-bg-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .18;
}

.carbon-circle-one {
    width: 420px;
    height: 420px;
    background: #4ADE80;
    top: -120px;
    left: -120px;
}

.carbon-circle-two {
    width: 350px;
    height: 350px;
    background: #BBF7D0;
    right: -120px;
    bottom: -80px;
}

.carbon-floating-leaf {
    position: absolute;
    color: #4ADE80;
    font-size: 2rem;
    animation: carbonLeaf 8s linear infinite;
}

.carbon-leaf-one {
    top: 18%;
    left: 12%;
}

.carbon-leaf-two {
    right: 15%;
    bottom: 22%;
}

@keyframes carbonLeaf {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-25px) rotate(20deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}


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

.carbon-hero-box {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: auto;
    text-align: center;
    color: #fff;
}

.carbon-badge {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
    letter-spacing: 2px;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 35px;
}

.carbon-earth {
    width: 320px;
    height: 320px;
    margin: 0 auto 45px;
    animation: carbonEarth 12s linear infinite;
}

.carbon-earth img {
    width: 100%;
}

@keyframes carbonEarth {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.carbon-hero-box h1 {
    font-size: 4.2rem;
    line-height: 1.15;
    margin-bottom: 30px;
}

.carbon-hero-box p {
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.9;
    color: #E5E7EB;
}


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

.carbon-buttons {
    margin-top: 45px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.carbon-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 17px 40px;
    border-radius: 50px;
    background: #22C55E;
    color: #fff;
    font-weight: 600;
    transition: .35s;
}

.carbon-btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 35px rgba(34, 197, 94, .35);
}

.carbon-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 17px 40px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, .25);
    color: #fff;
    transition: .35s;
}

.carbon-btn-secondary:hover {
    background: #fff;
    color: #166534;
}


/*==================================================
    STORY SECTION
==================================================*/

.carbon-story {
    padding: 130px 0;
    background: #F8FAFC;
}

.carbon-story-card {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 70px;
    align-items: center;
    background: #fff;
    border-radius: 35px;
    padding: 60px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .08);
}

.carbon-story-image {
    position: relative;
}

.carbon-story-image img {
    width: 100%;
    border-radius: 25px;
}

.carbon-story-content span {
    color: #16A34A;
    font-weight: 700;
    letter-spacing: 2px;
}

.carbon-story-content h2 {
    font-size: 3rem;
    margin: 20px 0;
    color: #0F172A;
    line-height: 1.2;
}

.carbon-story-content p {
    color: #64748B;
    line-height: 1.9;
    margin-bottom: 20px;
}


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

.carbon-title {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 80px;
}

.carbon-title span {
    display: inline-block;
    color: #16A34A;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.carbon-title h2 {
    font-size: 3rem;
    color: #0F172A;
    line-height: 1.2;
    margin-bottom: 20px;
}

.carbon-title p {
    color: #64748B;
    line-height: 1.9;
}


/*==================================================
    CARBON ECOSYSTEM
==================================================*/

.carbon-ecosystem {
    padding: 130px 0;
    background: #ffffff;
}

.carbon-circle-layout {
    position: relative;
    width: 700px;
    height: 700px;
    margin: 0 auto;
}

.carbon-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16A34A, #14532D);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .15);
}

.carbon-center-circle img {
    width: 90px;
    margin-bottom: 15px;
}

.carbon-center-circle h3 {
    font-size: 1.4rem;
}

.carbon-node {
    position: absolute;
    width: 170px;
    height: 170px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
    transition: .35s;
}

.carbon-node:hover {
    transform: scale(1.08);
}

.carbon-node i {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #16A34A;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    font-size: 26px;
}

.carbon-node h4 {
    font-size: 1rem;
    color: #0F172A;
}

.carbon-node1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.carbon-node2 {
    top: 120px;
    right: 0;
}

.carbon-node3 {
    bottom: 120px;
    right: 0;
}

.carbon-node4 {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.carbon-node5 {
    bottom: 120px;
    left: 0;
}

.carbon-node6 {
    top: 120px;
    left: 0;
}


/*==================================================
    GREEN JOURNEY
==================================================*/

.carbon-journey {
    padding: 130px 0;
    background: #F8FAFC;
}

.carbon-roadmap {
    position: relative;
    max-width: 1000px;
    margin: auto;
}

.carbon-roadmap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 4px;
    height: 100%;
    background: #16A34A;
    transform: translateX(-50%);
}

.carbon-road-step {
    width: 45%;
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 80px;
}

.carbon-left {
    margin-right: auto;
}

.carbon-right {
    margin-left: auto;
    flex-direction: row-reverse;
    text-align: right;
}

.carbon-road-icon {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16A34A, #14532D);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 32px;
    flex-shrink: 0;
}

.carbon-road-content {
    background: #fff;
    padding: 28px;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.carbon-road-content h3 {
    margin-bottom: 12px;
    color: #0F172A;
}

.carbon-road-content p {
    color: #64748B;
    line-height: 1.8;
}


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

.carbon-impact {
    padding: 130px 0;
    background: #ffffff;
}

.carbon-impact-wrapper {
    position: relative;
    max-width: 850px;
    height: 650px;
    margin: auto;
}

.carbon-impact-earth {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
}

.carbon-impact-earth img {
    width: 100%;
    animation: carbonEarth 15s linear infinite;
}

.carbon-impact-box {
    position: absolute;
    width: 200px;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
}

.carbon-impact-box h2 {
    font-size: 2.5rem;
    color: #16A34A;
    margin-bottom: 10px;
}

.carbon-impact-box p {
    color: #64748B;
}

.carbon-impact-one {
    top: 0;
    left: 50px;
}

.carbon-impact-two {
    top: 80px;
    right: 20px;
}

.carbon-impact-three {
    bottom: 40px;
    left: 0;
}

.carbon-impact-four {
    bottom: 0;
    right: 50px;
}


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

.carbon-benefits {
    padding: 130px 0;
    background: #F8FAFC;
}

.carbon-hexagon-layout {
    position: relative;
    max-width: 900px;
    height: 650px;
    margin: 80px auto 0;
}

.carbon-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

.carbon-center-logo img {
    width: 240px;
}

.carbon-hexagon {
    position: absolute;
    width: 170px;
    height: 190px;
    background: #16A34A;
    color: #fff;
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: .35s;
}

.carbon-hexagon:hover {
    transform: translateY(-12px) scale(1.05);
}

.carbon-hexagon i {
    font-size: 34px;
    margin-bottom: 18px;
}

.carbon-hexagon h4 {
    width: 120px;
    line-height: 1.5;
}

.carbon-hex-one {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.carbon-hex-two {
    top: 110px;
    right: 80px;
}

.carbon-hex-three {
    bottom: 110px;
    right: 80px;
}

.carbon-hex-four {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.carbon-hex-five {
    bottom: 110px;
    left: 80px;
}

.carbon-hex-six {
    top: 110px;
    left: 80px;
}


/*==================================================
    INDUSTRIES
==================================================*/

.carbon-industries {
    padding: 130px 0;
    background: #ffffff;
}

.carbon-industries-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.carbon-industries-image img {
    width: 100%;
}

.carbon-industries-content span {
    color: #16A34A;
    font-weight: 700;
    letter-spacing: 2px;
}

.carbon-industries-content h2 {
    font-size: 3rem;
    margin: 20px 0 35px;
    color: #0F172A;
}

.carbon-industry-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.carbon-industry-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 22px;
    border-radius: 15px;
    background: #F8FAFC;
    transition: .35s;
}

.carbon-industry-item:hover {
    background: #16A34A;
    color: #fff;
}

.carbon-industry-item i {
    font-size: 24px;
}


/*==================================================
    BEFORE AFTER
==================================================*/

.carbon-compare {
    padding: 130px 0;
    background: #F8FAFC;
}

.carbon-split-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.carbon-before,
.carbon-after {
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.carbon-before {
    background: #ffffff;
    border-left: 8px solid #EF4444;
}

.carbon-after {
    background: #ffffff;
    border-left: 8px solid #088514;
}

.carbon-before h3,
.carbon-after h3 {
    font-size: 2rem;
    margin-bottom: 30px;
}

.carbon-before ul,
.carbon-after ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.carbon-before li,
.carbon-after li {
    display: flex;
    align-items: center;
    gap: 15px;
}

.carbon-before i {
    color: #EF4444;
}

.carbon-after i {
    color: #fff;
}


/*==================================================
    FAQ
==================================================*/

.carbon-faq {
    padding: 130px 0;
    background: #ffffff;
}

.carbon-faq-wrapper {
    max-width: 900px;
    margin: auto;
}

.carbon-faq-item {
    background: #fff;
    margin-bottom: 20px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
}

.carbon-faq-question {
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
}

.carbon-faq-question i {
    color: #16A34A;
    transition: .35s;
}

.carbon-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: .4s;
}

.carbon-faq-answer p {
    padding: 0 30px 30px;
    color: #64748B;
    line-height: 1.8;
}

.carbon-faq-item.active .carbon-faq-answer {
    max-height: 220px;
}

.carbon-faq-item.active .carbon-faq-question i {
    transform: rotate(45deg);
}


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

.carbon-action {
    padding: 130px 0;
    background: #F8FAFC;
}

.carbon-action-box {
    background: linear-gradient(135deg, #14532D, #16A34A);
    color: #fff;
    border-radius: 40px;
    padding: 90px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.carbon-action-box::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    right: -120px;
    top: -120px;
}

.carbon-action-box span {
    letter-spacing: 2px;
    color: #BBF7D0;
}

.carbon-action-box h2 {
    font-size: 3rem;
    margin: 20px 0;
}

.carbon-action-box p {
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.9;
}

.carbon-action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}


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

@media(max-width:992px) {
    .carbon-story-card,
    .carbon-industries-wrapper,
    .carbon-split-view {
        grid-template-columns: 1fr;
    }

    .carbon-circle-layout {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .carbon-center-circle,
    .carbon-node {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        padding: 30px;
        border-radius: 25px;
    }

    .carbon-roadmap::before {
        display: none;
    }

    .carbon-road-step {
        width: 100%;
        margin-bottom: 35px;
    }

    .carbon-right {
        flex-direction: row;
        text-align: left;
    }
}

@media(max-width:768px) {
    .carbon-hero-box h1 {
        font-size: 2.5rem;
    }

    .carbon-title h2 {
        font-size: 2.2rem;
    }

    .carbon-story-content h2,
    .carbon-industries-content h2 {
        font-size: 2.2rem;
    }

    .carbon-industry-list {
        grid-template-columns: 1fr;
    }

    .carbon-buttons,
    .carbon-action-buttons {
        flex-direction: column;
    }

    .carbon-btn-primary,
    .carbon-btn-secondary {
        width: 100%;
    }

    .carbon-hexagon-layout {
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
        gap: 30px;
    }

    .carbon-center-logo,
    .carbon-hexagon {
        position: static;
        transform: none;
        margin: auto;
    }
}


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

.franchise-banner {
    position: relative;
    overflow: hidden;
    padding: 170px 0 120px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #081C3A, #0F766E);
}

.franchise-glow-one {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: #22C55E;
    opacity: .18;
    top: -150px;
    left: -120px;
    filter: blur(100px);
}

.franchise-glow-two {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: #38BDF8;
    opacity: .15;
    right: -120px;
    bottom: -120px;
    filter: blur(100px);
}

.franchise-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 2;
}


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

.franchise-tag {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    color: #fff;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 28px;
}

.franchise-title {
    color: #fff;
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 28px;
}

.franchise-text {
    color: #DCE7F5;
    line-height: 1.9;
    margin-bottom: 40px;
}


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

.franchise-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.franchise-primary-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 18px 42px;
    border-radius: 50px;
    background: #22C55E;
    color: #fff;
    font-weight: 600;
    transition: .35s;
}

.franchise-primary-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(34, 197, 94, .35);
}

.franchise-secondary-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 18px 42px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, .25);
    color: #fff;
    transition: .35s;
}

.franchise-secondary-btn:hover {
    background: #fff;
    color: #0F766E;
}


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

.franchise-showcase {
    position: relative;
    text-align: center;
}

.franchise-showcase img {
    width: 100%;
    max-width: 540px;
    animation: franchiseFloat 4s ease-in-out infinite;
}

@keyframes franchiseFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}


/*==================================================
    WHY CHOOSE SECTION
==================================================*/

.franchise-opportunity {
    padding: 120px 0;
    background: #F8FAFC;
}

.franchise-section-title {
    max-width: 760px;
    text-align: center;
    margin: 0 auto 70px;
}

.franchise-section-title span {
    color: #22C55E;
    font-weight: 700;
    letter-spacing: 2px;
}

.franchise-section-title h2 {
    font-size: 3rem;
    color: #0F172A;
    margin: 20px 0;
}

.franchise-section-title p {
    color: #64748B;
    line-height: 1.9;
}


/*==================================================
    FEATURE CARDS
==================================================*/

.franchise-feature-area {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.franchise-feature-item {
    background: #fff;
    padding: 40px 30px;
    border-radius: 24px;
    text-align: center;
    transition: .35s;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.franchise-feature-item:hover {
    transform: translateY(-10px);
}

.franchise-feature-icon {
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #22C55E, #0F766E);
    color: #fff;
    font-size: 30px;
}

.franchise-feature-item h3 {
    margin-bottom: 18px;
    color: #0F172A;
}

.franchise-feature-item p {
    color: #64748B;
    line-height: 1.8;
}

/*==================================================
    BUSINESS OPPORTUNITY
==================================================*/

.franchise-business {
    padding: 130px 0;
    background: #ffffff;
}

.franchise-business-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.franchise-business-photo {
    position: relative;
}

.franchise-business-photo img {
    width: 100%;
    border-radius: 30px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .10);
}

.franchise-business-info span {
    display: inline-block;
    color: #22C55E;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.franchise-business-info h2 {
    font-size: 3rem;
    color: #0F172A;
    margin-bottom: 25px;
    line-height: 1.2;
}

.franchise-business-info p {
    color: #64748B;
    line-height: 1.9;
    margin-bottom: 35px;
}

.franchise-business-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.franchise-business-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #334155;
    font-weight: 500;
}

.franchise-business-list i {
    color: #22C55E;
    font-size: 20px;
}


/*==================================================
    FINANCIAL DETAILS
==================================================*/

.franchise-financial {
    padding: 130px 0;
    background: #F8FAFC;
}

.franchise-financial-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.franchise-financial-box {
    background: #fff;
    padding: 45px 30px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
    transition: .35s;
    border-top: 5px solid transparent;
}

.franchise-financial-box:hover {
    transform: translateY(-10px);
    border-color: #22C55E;
}

.franchise-financial-box i {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #22C55E, #0F766E);
    color: #fff;
    font-size: 30px;
}

.franchise-financial-box h3 {
    color: #0F172A;
    margin-bottom: 15px;
}

.franchise-financial-box p {
    color: #64748B;
    line-height: 1.8;
}


/*==================================================
    PACKAGE SECTION
==================================================*/

.franchise-package {
    padding: 130px 0;
    background: #ffffff;
}

.franchise-package-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.franchise-package-card {
    background: linear-gradient(135deg, #0F766E, #081C3A);
    color: #fff;
    padding: 55px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.franchise-package-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    right: -80px;
    top: -80px;
}

.franchise-package-card span {
    display: inline-block;
    color: #A7F3D0;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.franchise-package-card h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    line-height: 1.2;
}

.franchise-package-card ul {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 40px;
}

.franchise-package-card li {
    display: flex;
    align-items: center;
    gap: 15px;
}

.franchise-package-card li i {
    color: #22C55E;
}


/*==================================================
    SUPPORT PANEL
==================================================*/

.franchise-support-card {
    background: #F8FAFC;
    padding: 55px;
    border-radius: 30px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
}

.franchise-support-card span {
    display: inline-block;
    color: #22C55E;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.franchise-support-card h2 {
    font-size: 2.5rem;
    color: #0F172A;
    margin-bottom: 25px;
    line-height: 1.2;
}

.franchise-support-card p {
    color: #64748B;
    line-height: 1.9;
    margin-bottom: 35px;
}

.franchise-support-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.franchise-support-list div {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    background: #fff;
    border-radius: 18px;
    transition: .35s;
}

.franchise-support-list div:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
}

.franchise-support-list i {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #22C55E, #0F766E);
    color: #fff;
    font-size: 20px;
}


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

.franchise-statistics {
    padding: 130px 0;
    background: linear-gradient(135deg, #081C3A, #0F766E);
    position: relative;
    overflow: hidden;
}

.franchise-statistics::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(255, 255, 255, .05);
    border-radius: 50%;
    top: -180px;
    right: -180px;
}

.franchise-statistics .franchise-section-title span {
    color: #A7F3D0;
}

.franchise-statistics .franchise-section-title h2 {
    color: #fff;
}

.franchise-statistics .franchise-section-title p {
    color: #DCE7F5;
}

.franchise-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.franchise-stat-card {
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 25px;
    padding: 45px 25px;
    text-align: center;
    transition: .35s;
}

.franchise-stat-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, .14);
}

.franchise-stat-card h2 {
    font-size: 3rem;
    color: #22C55E;
    margin-bottom: 12px;
}

.franchise-stat-card p {
    color: #fff;
    font-weight: 500;
}


/*==================================================
    ROADMAP
==================================================*/

.franchise-roadmap {
    padding: 130px 0;
    background: #ffffff;
}

.franchise-roadmap-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
    position: relative;
}

.franchise-roadmap-track::before {
    content: "";
    position: absolute;
    top: 45px;
    left: 8%;
    width: 84%;
    height: 4px;
    background: #22C55E;
    opacity: .25;
}

.franchise-stage {
    position: relative;
    z-index: 2;
    text-align: center;
}

.franchise-stage-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22C55E, #0F766E);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 32px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .10);
    transition: .35s;
}

.franchise-stage:hover .franchise-stage-icon {
    transform: scale(1.1);
}

.franchise-stage h4 {
    color: #0F172A;
    font-size: 1.05rem;
}


/*==================================================
    WHAT'S INCLUDED
==================================================*/

.franchise-includes {
    padding: 130px 0;
    background: #F8FAFC;
}

.franchise-includes-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.franchise-package-photo {
    position: relative;
}

.franchise-package-photo img {
    width: 100%;
    border-radius: 30px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .12);
}

.franchise-package-info span {
    display: inline-block;
    color: #22C55E;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.franchise-package-info h2 {
    font-size: 3rem;
    color: #0F172A;
    line-height: 1.2;
    margin-bottom: 25px;
}

.franchise-package-info p {
    color: #64748B;
    line-height: 1.9;
    margin-bottom: 35px;
}

.franchise-check-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.franchise-check-grid div {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    padding: 18px;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);
    transition: .35s;
}

.franchise-check-grid div:hover {
    transform: translateX(10px);
}

.franchise-check-grid i {
    color: #22C55E;
    font-size: 20px;
}


/*==================================================
    FRANCHISE FORM
==================================================*/

.franchise-form-section {
    padding: 130px 0;
    background: #ffffff;
}

.franchise-form-layout {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 45px;
    align-items: start;
}

.franchise-form-panel {
    background: #F8FAFC;
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
}

.franchise-input-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.franchise-form-panel input,
.franchise-form-panel select,
.franchise-form-panel textarea {
    width: 100%;
    padding: 18px 20px;
    border: 1px solid #DDE5EC;
    border-radius: 15px;
    font-size: 1rem;
    outline: none;
    transition: .35s;
    margin-bottom: 20px;
    background: #fff;
}

.franchise-form-panel input:focus,
.franchise-form-panel select:focus,
.franchise-form-panel textarea:focus {
    border-color: #22C55E;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .15);
}

.franchise-form-panel textarea {
    resize: none;
}


/*==================================================
    CONTACT PANEL
==================================================*/

.franchise-contact-panel {
    background: linear-gradient(135deg, #081C3A, #0F766E);
    color: #fff;
    padding: 45px;
    border-radius: 30px;
    position: sticky;
    top: 120px;
}

.franchise-contact-panel h3 {
    font-size: 2rem;
    margin-bottom: 35px;
}

.franchise-contact-item {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.franchise-contact-item i {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #22C55E;
    color: #fff;
}


/*==================================================
    FAQ
==================================================*/

.franchise-faq {
    padding: 130px 0;
    background: #F8FAFC;
}

.franchise-faq-wrapper {
    max-width: 900px;
    margin: auto;
}

.franchise-faq-item {
    background: #fff;
    margin-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.franchise-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer;
    font-weight: 600;
}

.franchise-faq-question i {
    color: #22C55E;
    transition: .35s;
}

.franchise-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: .4s;
}

.franchise-faq-answer p {
    padding: 0 30px 30px;
    color: #64748B;
    line-height: 1.9;
}

.franchise-faq-item.active .franchise-faq-answer {
    max-height: 220px;
}

.franchise-faq-item.active i {
    transform: rotate(45deg);
}


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

.franchise-cta {
    padding: 130px 0;
    background: #ffffff;
}

.franchise-cta-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #081C3A, #0F766E);
    color: #fff;
    border-radius: 35px;
    text-align: center;
    padding: 90px 60px;
}

.franchise-cta-panel::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    right: -120px;
    top: -120px;
}

.franchise-cta-panel span {
    color: #A7F3D0;
    font-weight: 700;
    letter-spacing: 2px;
}

.franchise-cta-panel h2 {
    font-size: 3rem;
    margin: 20px 0;
}

.franchise-cta-panel p {
    max-width: 720px;
    margin: 0 auto 40px;
    line-height: 1.9;
    color: #E2E8F0;
}


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

@media(max-width:1200px) {
    .franchise-layout,
    .franchise-business-layout,
    .franchise-includes-layout,
    .franchise-package-layout,
    .franchise-form-layout {
        grid-template-columns: 1fr;
    }

    .franchise-contact-panel {
        position: static;
    }
}

@media(max-width:992px) {
    .franchise-title {
        font-size: 3rem;
    }

    .franchise-feature-area {
        grid-template-columns: repeat(2, 1fr);
    }

    .franchise-financial-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .franchise-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .franchise-roadmap-track {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 50px;
    }

    .franchise-roadmap-track::before {
        display: none;
    }
}

@media(max-width:768px) {
    .franchise-banner {
        padding: 150px 0 100px;
    }

    .franchise-title {
        font-size: 2.4rem;
    }

    .franchise-section-title h2,
    .franchise-business-info h2,
    .franchise-package-card h2,
    .franchise-support-card h2,
    .franchise-package-info h2,
    .franchise-cta-panel h2 {
        font-size: 2rem;
    }

    .franchise-feature-area,
    .franchise-financial-grid,
    .franchise-stats-grid,
    .franchise-check-grid,
    .franchise-support-list,
    .franchise-input-row {
        grid-template-columns: 1fr;
    }

    .franchise-roadmap-track {
        grid-template-columns: repeat(2, 1fr);
    }

    .franchise-badge {
        display: none;
    }
}

@media(max-width:576px) {
    .franchise-title {
        font-size: 2rem;
    }

    .franchise-buttons {
        flex-direction: column;
    }

    .franchise-primary-btn,
    .franchise-secondary-btn {
        width: 100%;
    }

    .franchise-form-panel,
    .franchise-contact-panel,
    .franchise-package-card,
    .franchise-support-card,
    .franchise-cta-panel {
        padding: 35px 25px;
    }

    .franchise-roadmap-track {
        grid-template-columns: 1fr;
    }
}


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

.contact-hero {
    position: relative;
    overflow: hidden;
    padding: 170px 0 120px;
    background: linear-gradient(135deg, #032b44, #0B66C3);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.contact-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.contact-shape-one {
    width: 350px;
    height: 350px;
    background: #16A34A;
    opacity: .18;
    top: -120px;
    left: -120px;
}

.contact-shape-two {
    width: 300px;
    height: 300px;
    background: #ffffff;
    opacity: .08;
    right: -100px;
    bottom: -100px;
}

.contact-hero-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
    position: relative;
    z-index: 2;
}


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

.contact-hero-content {
    color: #fff;
}

.contact-hero-tag {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(10px);
    margin-bottom: 30px;
    font-weight: 600;
    letter-spacing: 2px;
}

.contact-hero-content h1 {
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 25px;
}

.contact-hero-content p {
    line-height: 1.9;
    color: #E2E8F0;
    margin-bottom: 40px;
}


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

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

.contact-btn-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 38px;
    border-radius: 50px;
    background: #16A34A;
    color: #fff;
    font-weight: 600;
    transition: .35s;
}

.contact-btn-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 35px rgba(22, 163, 74, .35);
}

.contact-btn-secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 38px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, .25);
    color: #fff;
    transition: .35s;
}

.contact-btn-secondary:hover {
    background: #fff;
    color: #0B66C3;
}


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

.contact-hero-image {
    text-align: center;
}

.contact-hero-image img {
    width: 100%;
    max-width: 520px;
    animation: contactFloat 4s ease-in-out infinite;
}

@keyframes contactFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}


/*==================================================
    CONTACT CARDS
==================================================*/

.contact-cards {
    margin-top: -70px;
    position: relative;
    z-index: 5;
}

.contact-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.contact-card-box {
    background: #fff;
    padding: 40px 30px;
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
    transition: .35s;
}

.contact-card-box:hover {
    transform: translateY(-10px);
}

.contact-card-icon {
    width: 85px;
    height: 85px;
    margin: 0 auto 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #16A34A, #0B66C3);
    color: #fff;
    font-size: 30px;
}

.contact-card-box h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.contact-card-box p {
    color: #64748B;
    margin-bottom: 8px;
}


/*==================================================
    CONTACT MAIN
==================================================*/

.contact-main {
    padding: 130px 0;
    background: #F8FAFC;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 50px;
    align-items: start;
}


/*==================================================
    FORM PANEL
==================================================*/

.contact-form-panel {
    background: #fff;
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
}

.contact-form-panel span {
    color: #16A34A;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-form-panel h2 {
    font-size: 2.8rem;
    margin: 18px 0 35px;
    color: #0F172A;
}

.contact-input-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.contact-form-panel input,
.contact-form-panel textarea {
    width: 100%;
    padding: 18px 22px;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    outline: none;
    font-size: 1rem;
    transition: .35s;
    margin-bottom: 20px;
}

.contact-form-panel input:focus,
.contact-form-panel textarea:focus {
    border-color: #16A34A;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}

.contact-form-panel textarea {
    resize: none;
}


/*==================================================
    OFFICE PANEL
==================================================*/

.contact-office-panel {
    background: linear-gradient(135deg, #032B44, #0B66C3);
    color: #fff;
    padding: 45px;
    border-radius: 30px;
    position: sticky;
    top: 120px;
}

.contact-office-panel span {
    color: #A7F3D0;
    letter-spacing: 2px;
    font-weight: 700;
}

.contact-office-panel h2 {
    font-size: 2.4rem;
    margin: 18px 0 20px;
}

.contact-office-panel>p {
    color: #E2E8F0;
    line-height: 1.8;
    margin-bottom: 35px;
}


/*==================================================
    OFFICE INFORMATION
==================================================*/

.contact-office-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-office-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.contact-office-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #16A34A;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    flex-shrink: 0;
}

.contact-office-item h4 {
    margin-bottom: 6px;
}

.contact-office-item p {
    color: #E2E8F0;
    line-height: 1.7;
}


/*==================================================
    WORKING HOURS
==================================================*/

.contact-working-hours {
    margin-top: 40px;
    padding-top: 35px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.contact-working-hours h3 {
    margin-bottom: 25px;
}

.contact-working-hours ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-working-hours li {
    display: flex;
    justify-content: space-between;
    color: #E2E8F0;
}


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

.contact-social-links {
    display: flex;
    gap: 18px;
    margin-top: 40px;
}

.contact-social-links a {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    transition: .35s;
}

.contact-social-links a:hover {
    background: #16A34A;
    transform: translateY(-5px);
}


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

.contact-process {
    padding: 130px 0;
    background: #ffffff;
}

.contact-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 70px;
}

.contact-heading span {
    color: #16A34A;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-heading h2 {
    font-size: 3rem;
    margin-top: 15px;
}

.contact-process-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.contact-process-step {
    text-align: center;
    flex: 1;
}

.contact-step-circle {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #16A34A, #0B66C3);
    color: #fff;
    font-size: 32px;
    transition: .35s;
}

.contact-step-circle:hover {
    transform: scale(1.08);
}

.contact-process-line {
    height: 4px;
    flex: 1;
    background: #16A34A;
    opacity: .3;
    margin-bottom: 70px;
}


/*==================================================
    GOOGLE MAP
==================================================*/

.contact-map-section {
    padding: 130px 0;
    background: #F8FAFC;
}

.contact-map-box {
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
}

.contact-map-box iframe {
    width: 100%;
    height: 520px;
    border: 0;
}


/*==================================================
    FAQ
==================================================*/

.contact-faq {
    padding: 130px 0;
    background: #ffffff;
}

.contact-faq-wrapper {
    max-width: 900px;
    margin: auto;
}

.contact-faq-item {
    background: #fff;
    margin-bottom: 20px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.contact-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.08rem;
}

.contact-faq-question i {
    color: #16A34A;
    transition: .35s;
}

.contact-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: .4s;
}

.contact-faq-answer p {
    padding: 0 30px 30px;
    color: #64748B;
    line-height: 1.9;
}

.contact-faq-item.active .contact-faq-answer {
    max-height: 220px;
}

.contact-faq-item.active .contact-faq-question i {
    transform: rotate(45deg);
}


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

.contact-cta {
    padding: 130px 0;
    background: #F8FAFC;
}

.contact-cta-box {
    position: relative;
    overflow: hidden;
    padding: 90px 60px;
    border-radius: 35px;
    text-align: center;
    background: linear-gradient(135deg, #032B44, #0B66C3);
    color: #fff;
}

.contact-cta-box::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    right: -120px;
    top: -120px;
}

.contact-cta-box span {
    color: #A7F3D0;
    letter-spacing: 2px;
    font-weight: 700;
}

.contact-cta-box h2 {
    font-size: 3rem;
    margin: 20px 0;
}

.contact-cta-box p {
    max-width: 720px;
    margin: 0 auto 40px;
    color: #E2E8F0;
    line-height: 1.9;
}

.contact-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}


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

@media(max-width:1200px) {
    .contact-main-grid {
        grid-template-columns: 1fr;
    }

    .contact-office-panel {
        position: static;
    }
}

@media(max-width:992px) {
    .contact-hero-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }

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

    .contact-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-process-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }

    .contact-process-line {
        display: none;
    }
}

@media(max-width:768px) {
    .contact-hero {
        padding: 150px 0 100px;
    }

    .contact-hero-content h1 {
        font-size: 2.5rem;
    }

    .contact-heading h2 {
        font-size: 2.2rem;
    }

    .contact-form-panel h2,
    .contact-office-panel h2 {
        font-size: 2rem;
    }

    .contact-card-grid {
        grid-template-columns: 1fr;
    }

    .contact-input-row {
        grid-template-columns: 1fr;
    }

    .contact-process-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .contact-step-circle {
        margin-bottom: 15px;
    }

    .contact-map-box iframe {
        height: 380px;
    }
}

@media(max-width:576px) {
    .contact-form-panel,
    .contact-office-panel,
    .contact-cta-box {
        padding: 35px 25px;
    }

    .contact-hero-content h1 {
        font-size: 2rem;
    }

    .contact-hero-buttons,
    .contact-cta-buttons {
        flex-direction: column;
    }

    .contact-btn-primary,
    .contact-btn-secondary {
        width: 100%;
    }

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

    .contact-map-box iframe {
        height: 300px;
    }
}