/* Google Font */
                                        
                                        * {
                                            margin: 0;
                                            padding: 0;
                                            box-sizing: border-box;
                                            font-family: 'Poppins', sans-serif;
                                        }
                                        
                                        body {
                                            background: #f5f5f5;
                                        }
                                        
                                        .hero {
                                            width: 100%;
                                            min-height: 100vh;
                                            background-image: url("../images/bg.webp");
                                            background-size: cover;
                                            background-position: center;
                                            background-repeat: no-repeat;
                                            padding: 30px 70px;
                                        }
                                        
                                        .logo img {
                                            width: auto;
                                            height: 70px;
                                            object-fit: contain;
                                        }
                                        
                                        .hero-container {
                                            width: 100%;
                                            display: flex;
                                            justify-content: space-between;
                                            align-items: center;
                                            margin-top: 60px;
                                            gap: 50px;
                                        }
                                        
                                        .hero-left {
                                            width: 60%;
                                            color: #fff;
                                        }
                                        
                                        .hero-left h1 {
                                            font-size: 72px;
                                            line-height: 1.1;
                                            font-weight: 700;
                                            margin-bottom: 25px;
                                        }
                                        
                                        .hero-left p {
                                            width: 80%;
                                            font-size: 18px;
                                            line-height: 30px;
                                        }
                                        
                                        .hero-form {
                                            width: 380px;
                                            background: #FCF8F4;
                                            border-radius: 25px;
                                            padding: 30px;
                                            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
                                        }
                                        
                                        .hero-form h2 {
                                            font-size: 20px;
                                            color: #8C5634;
                                            margin-bottom: 25px;
                                            line-height: 30px;
                                        }
                                        
                                        .hero-form form {
                                            display: flex;
                                            flex-direction: column;
                                            gap: 18px;
                                        }
                                        /* Input & Select */
                                        
                                        .hero-form input,
                                        .hero-form select {
                                            width: 100%;
                                            padding: 15px 18px;
                                            border: 1px solid #D8C1AE;
                                            border-radius: 12px;
                                            outline: none;
                                            font-size: 15px;
                                            color: #444;
                                            background: #FFFDFB;
                                            transition: 0.3s;
                                        }
                                        /* Focus Effect */
                                        
                                        .hero-form input:focus,
                                        .hero-form select:focus {
                                            border-color: #A66A43;
                                            box-shadow: 0 0 8px rgba(166, 106, 67, 0.2);
                                        }
                                        /* Placeholder */
                                        
                                        .hero-form input::placeholder {
                                            color: #999;
                                        }
                                        .hero-form button {
                                            width: 100%;
                                            padding: 16px;
                                            border: none;
                                            border-radius: 14px;
                                            background: #A66A43;
                                            color: #fff;
                                            font-size: 16px;
                                            font-weight: 600;
                                            cursor: pointer;
                                            transition: 0.3s;
                                        }
                                        /* Hover */
                                        
                                        .hero-form button:hover {
                                            background: #8C5634;
                                        }
                                        
                                        .hero {
                                            position: relative;
                                            overflow: hidden;
                                        }
                                        
                                        .hero::before {
                                            content: "";
                                            position: absolute;
                                            inset: 0;
                                            background: linear-gradient( to right, rgba(0, 0, 0, .75) 20%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .20) 100%);
                                        }
                                        /* Hero Content Above Overlay */
                                        
                                        .hero-container {
                                            position: relative;
                                            z-index: 2;
                                        }
                                        
                                        .hero-left h1 {
                                            text-shadow: 2px 2px 12px rgba(0, 0, 0, .45);
                                        }
                                        
                                        .hero-left p {
                                            text-shadow: 1px 1px 8px rgba(0, 0, 0, .4);
                                        }
                                        
                                        .hero-form {
                                            transition: .3s;
                                        }
                                        
                                        .hero-form:hover {
                                            transform: translateY(-5px);
                                        }
                                        
                                        @media (max-width:1024px) {
                                            .hero {
                                                padding: 25px;
                                            }
                                            .hero-container {
                                                gap: 35px;
                                            }
                                            .hero-left h1 {
                                                font-size: 55px;
                                            }
                                            .hero-left p {
                                                width: 100%;
                                            }
                                            .hero-form {
                                                width: 360px;
                                            }
                                        }
                                        
                                        @media (max-width:768px) {
                                            .hero-container {
                                                flex-direction: column;
                                                text-align: center;
                                                margin-top: 40px;
                                            }
                                            .hero-left {
                                                width: 100%;
                                            }
                                            .hero-left h1 {
                                                font-size: 42px;
                                            }
                                            .hero-left p {
                                                width: 100%;
                                                font-size: 16px;
                                            }
                                            .hero-form {
                                                width: 100%;
                                                max-width: 450px;
                                            }
                                        }
                                        
                                        @media (max-width: 480px) {
                                            .hero {
                                                padding: 18px;
                                            }
                                            .logo img {
                                                width: 140px;
                                            }
                                            .hero-left h1 {
                                                font-size: 34px;
                                                line-height: 1.2;
                                            }
                                            .hero-left p {
                                                font-size: 15px;
                                                line-height: 26px;
                                            }
                                            .hero-form {
                                                padding: 22px;
                                            }
                                            .hero-form h2 {
                                                font-size: 18px;
                                                line-height: 28px;
                                            }
                                            .hero-form input,
                                            .hero-form select,
                                            .hero-form button {
                                                padding: 14px;
                                                font-size: 15px;
                                            }
                                        }
                                        
                                        .logo img {
                                            transition: .4s;
                                        }
                                        
                                        .logo img:hover {
                                            transform: scale(1.05);
                                        }
                                        
                                        .contact-btn {
                                            transition: .35s;
                                        }
                                        
                                        .contact-btn:hover {
                                            transform: translateY(-3px);
                                        }
                                        
                                        .hero-left h1 {
                                            letter-spacing: 1px;
                                        }
                                        
                                        .hero-left p {
                                            opacity: .95;
                                        }
                                        
                                        .hero-form {
                                            border: 1px solid #ececec;
                                        }
                                        
                                        .hero-form input:hover,
                                        .hero-form select:hover {
                                            border-color: #888;
                                        }
                            
                            
                                        .heading-line {
                                            width: 80px;
                                            height: 4px;
                                            background: #9a6b49;
                                            margin: 18px auto 22px;
                                            border-radius: 10px;
                                        }
                                        
                                        .hero-form button {
                                            letter-spacing: .5px;
                                        }
                                        
                                        .hero-form button:hover {
                                            transform: translateY(-2px);
                                        }
                                        
                                        .why-choose {
                                            width: 100%;
                                            background: #ffffff;
                                            padding: 90px 8%;
                                        }
                                        
                                        .why-heading {
                                            text-align: center;
                                            margin-bottom: 60px;
                                        }
                                        
                                        .why-heading h2 {
                                            font-size: 42px;
                                            color: #222;
                                            font-weight: 700;
                                            margin-bottom: 15px;
                                        }
                                        
                                        .why-heading span {
                                            color: #9a6b49;
                                            /* Same brown accent */
                                        }
                                        
                                        .why-heading p {
                                            width: 65%;
                                            margin: auto;
                                            color: #666;
                                            line-height: 1.8;
                                            font-size: 17px;
                                        }
                                        
                                        .why-container {
                                            display: grid;
                                            grid-template-columns: repeat(4, 1fr);
                                            gap: 30px;
                                        }
                                        
                                        .why-card {
                                            background: #fff;
                                            border-radius: 18px;
                                            padding: 35px 28px;
                                            text-align: center;
                                            border: 1px solid #f1ece7;
                                            transition: 0.35s ease;
                                            box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
                                        }
                                        
                                        .why-card:hover {
                                            transform: translateY(-12px);
                                            box-shadow: 0 20px 45px rgba(154, 107, 73, .18);
                                            border-color: #9a6b49;
                                        }
                                        
                                        .why-card .icon {
                                            width: 75px;
                                            height: 75px;
                                            margin: 0 auto 25px;
                                            border-radius: 50%;
                                            background: #f8f3ee;
                                            color: #9a6b49;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            font-size: 30px;
                                            transition: 0.35s ease;
                                        }
                                        
                                        .why-card h3 {
                                            font-size: 24px;
                                            color: #222;
                                            margin-bottom: 15px;
                                            font-weight: 600;
                                        }
                                        
                                        .why-card p {
                                            color: #666;
                                            line-height: 1.8;
                                            font-size: 16px;
                                        }
                                        /* Hover Effect */
                                        
                                        .why-card:hover .icon {
                                            background: #9a6b49;
                                            color: #fff;
                                            transform: rotate(8deg) scale(1.08);
                                        }
                                        
                                        .why-card:hover h3 {
                                            color: #9a6b49;
                                        }
                                        
                                        @media (max-width:1100px) {
                                            .why-container {
                                                grid-template-columns: repeat(2, 1fr);
                                            }
                                        }
                                        
                                        @media (max-width:768px) {
                                            .why-choose {
                                                padding: 70px 7%;
                                            }
                                            .why-heading h2 {
                                                font-size: 34px;
                                            }
                                            .why-heading p {
                                                width: 100%;
                                                font-size: 16px;
                                            }
                                            .why-container {
                                                grid-template-columns: 1fr;
                                                gap: 25px;
                                            }
                                
                                            .why-card {
                                                padding: 30px 25px;
                                            }
                                        }
                             

.factory-section{
    width:100%;
    background:#f8f8f8;
    padding:90px 8%;
}

.factory-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px;
    margin-bottom:70px;
}

.factory-image img{
    width:100%;
    border-radius:20px;
    display:block;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.factory-subtitle{
    display:inline-block;
    color:#9a6b49;
    font-size:15px;
    font-weight:600;
    letter-spacing:2px;
    margin-bottom:18px;
}

.factory-content h2{
    font-size:42px;
    color:#222;
    line-height:1.3;
    margin-bottom:22px;
}

.factory-content h2 span{
    color:#9a6b49;
}

.factory-content p{
    color:#666;
    font-size:17px;
    line-height:1.9;
}

.factory-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-bottom:60px;
}

.factory-card{
    background:#fff;
    padding:35px 28px;
    border-radius:18px;
    text-align:center;
    border:1px solid #f1ece7;
    transition:.35s ease;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.factory-card:hover{
    transform:translateY(-10px);
    border-color:#9a6b49;
    box-shadow:0 18px 40px rgba(154,107,73,.18);
}

.factory-icon{
    width:75px;
    height:75px;
    border-radius:50%;
    background:#f8f3ee;
    color:#9a6b49;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 22px;
    font-size:30px;
    transition:.35s ease;
}

.factory-card:hover .factory-icon{
    background:#9a6b49;
    color:#fff;
    transform:rotate(8deg) scale(1.08);
}

.factory-card h3{
    font-size:24px;
    color:#222;
    margin-bottom:15px;
}

.factory-card p{
    color:#666;
    line-height:1.8;
    font-size:16px;
}

.factory-card:hover h3{
    color:#9a6b49;
}

.factory-highlight{
    background:#222;
    color:#fff;
    border-radius:20px;
    padding:35px;
    display:flex;
    align-items:center;
    gap:25px;
}

.factory-highlight i{
    font-size:48px;
    color:#9a6b49;
}

.factory-highlight h3{
    font-size:30px;
    margin-bottom:10px;
}

.factory-highlight p{
    color:#ddd;
    line-height:1.8;
    font-size:16px;
}
@media (max-width:1100px){

    .factory-wrapper{
        grid-template-columns:1fr;
        gap:45px;
    }

    .factory-image{
        order:1;
    }

    .factory-content{
        order:2;
        text-align:center;
    }

    .factory-content p{
        max-width:700px;
        margin:auto;
    }

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

    .factory-highlight{
        flex-direction:column;
        text-align:center;
    }

}

@media (max-width:768px){

    .factory-section{
        padding:70px 7%;
    }

    .factory-wrapper{
        gap:35px;
        margin-bottom:50px;
    }

    .factory-subtitle{
        font-size:13px;
        letter-spacing:1.5px;
    }

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

    .factory-content p{
        font-size:16px;
        line-height:1.8;
    }

    .factory-cards{
        grid-template-columns:1fr;
        gap:22px;
        margin-bottom:40px;
    }

    .factory-card{
        padding:30px 24px;
    }

    .factory-card h3{
        font-size:22px;
    }

    .factory-card p{
        font-size:15px;
    }

    .factory-highlight{
        padding:28px 22px;
        gap:18px;
        text-align:center;
    }

    .factory-highlight i{
        font-size:40px;
    }

    .factory-highlight h3{
        font-size:24px;
    }

    .factory-highlight p{
        font-size:15px;
    }

}


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

@media (max-width:480px){

    .factory-content h2{
        font-size:30px;
    }

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

    .factory-icon{
        width:65px;
        height:65px;
        font-size:26px;
    }

    .factory-highlight h3{
        font-size:21px;
    }

}
                                        .services {
                                            width: 100%;
                                            padding: 90px 8%;
                                            background: #faf9f7;
                                        }
                                        
                                        .services-heading {
                                            text-align: center;
                                            margin-bottom: 60px;
                                        }
                                        
                                        .services-heading h2 {
                                            font-size: 42px;
                                            color: #222;
                                            margin-bottom: 15px;
                                        }
                                        
                                        .services-heading span {
                                            color: #9a6b49;
                                        }
                                        
                                        .services-heading p {
                                            width: 65%;
                                            margin: auto;
                                            font-size: 17px;
                                            color: #666;
                                            line-height: 1.8;
                                        }
                                        
                                        .services-container {
                                            display: grid;
                                            grid-template-columns: repeat(3, 1fr);
                                            gap: 30px;
                                        }
                                        
                                        .service-card {
                                            background: #fff;
                                            border-radius: 20px;
                                            overflow: hidden;
                                            box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
                                            transition: .4s;
                                        }
                                        
                                        .service-card:hover {
                                            transform: translateY(-10px);
                                            box-shadow: 0 20px 45px rgba(0, 0, 0, .15);
                                        }
                                        
                                        .service-card img {
                                            width: 100%;
                                            height: 250px;
                                            object-fit: cover;
                                            transition: .4s;
                                        }
                                        
                                        .service-card:hover img {
                                            transform: scale(1.08);
                                        }
                                        
                                        .service-content {
                                            padding: 25px;
                                        }
                                        
                                        .service-content h3 {
                                            font-size: 24px;
                                            color: #222;
                                            margin-bottom: 15px;
                                        }
                                        
                                        .service-content p {
                                            color: #666;
                                            line-height: 1.8;
                                            margin-bottom: 18px;
                                        }
                                        
                                        .service-content a {
                                            text-decoration: none;
                                            color: #9a6b49;
                                            font-weight: 600;
                                            transition: .3s;
                                        }
                                        
                                        .service-content a:hover {
                                            letter-spacing: 1px;
                                        }
                                        
                                        .services-btn {
                                            text-align: center;
                                            margin-top: 55px;
                                        }
                                        
                                        .view-btn {
                                            display: inline-block;
                                            padding: 15px 40px;
                                            background: #9a6b49;
                                            color: #fff;
                                            text-decoration: none;
                                            border-radius: 50px;
                                            transition: .3s;
                                        }
                                        
                                        .view-btn:hover {
                                            background: #7d5439;
                                            transform: translateY(-3px);
                                        }
                                        
                                        @media(max-width:992px) {
                                            .services-container {
                                                grid-template-columns: repeat(2, 1fr);
                                            }
                                        }
                                        
                                        @media(max-width:768px) {
                                            .services {
                                                padding: 70px 7%;
                                            }
                                            .services-heading p {
                                                width: 100%;
                                            }
                                            .services-container {
                                                grid-template-columns: 1fr;
                                            }
                                        }
                                        
                                        .process {
                                            width: 100%;
                                            padding: 90px 8%;
                                            background: #ffffff;
                                        }
                                        
                                        .process-heading {
                                            text-align: center;
                                            margin-bottom: 60px;
                                        }
                                        
                                        .process-heading h2 {
                                            font-size: 42px;
                                            color: #222;
                                            margin-bottom: 15px;
                                        }
                                        
                                        .process-heading span {
                                            color: #9a6b49;
                                        }
                                        
                                        .process-heading p {
                                            width: 65%;
                                            margin: auto;
                                            color: #666;
                                            font-size: 17px;
                                            line-height: 1.8;
                                        }
                                        
                                        .process-container {
                                            display: grid;
                                            grid-template-columns: repeat(4, 1fr);
                                            gap: 30px;
                                        }
                                        
                                        .process-card {
                                            position: relative;
                                            background: #fff;
                                            border-radius: 20px;
                                            padding: 40px 25px;
                                            text-align: center;
                                            border: 1px solid #f1ece7;
                                            box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
                                            transition: .35s ease;
                                        }
                                        
                                        .process-card:hover {
                                            transform: translateY(-10px);
                                            box-shadow: 0 20px 45px rgba(154, 107, 73, .18);
                                        }
                                        
                                        .process-number {
                                            width: 42px;
                                            height: 42px;
                                            border-radius: 50%;
                                            background: #9a6b49;
                                            color: #fff;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            font-weight: 600;
                                            margin: 0 auto 18px;
                                        }
                                        
                                        .process-icon {
                                            width: 80px;
                                            height: 80px;
                                            border-radius: 50%;
                                            background: #f8f3ee;
                                            color: #9a6b49;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            margin: 0 auto 25px;
                                            font-size: 30px;
                                            transition: .35s;
                                        }
                                        
                                        .process-card h3 {
                                            font-size: 23px;
                                            color: #222;
                                            margin-bottom: 15px;
                                        }
                                        
                                        .process-card p {
                                            color: #666;
                                            line-height: 1.8;
                                            font-size: 16px;
                                        }
                                        
                                        .process-card:hover .process-icon {
                                            background: #9a6b49;
                                            color: #fff;
                                            transform: rotate(8deg) scale(1.08);
                                        }
                                        
                                        .process-card:hover h3 {
                                            color: #9a6b49;
                                        }
                                        
                                        @media(max-width:992px) {
                                            .process-container {
                                                grid-template-columns: repeat(2, 1fr);
                                            }
                                        }
                                        
                                        @media(max-width:768px) {
                                            .process {
                                                padding: 70px 7%;
                                            }
                                            .process-heading p {
                                                width: 100%;
                                            }
                                            .process-container {
                                                grid-template-columns: 1fr;
                                            }
                                        }
                                        
                                        .cta {
                                            width: 100%;
                                            padding: 120px 8%;
                                            background: url("../images/cta.webp");
                                            background-size: cover;
                                            background-position: center;
                                            background-attachment: fixed;
                                            position: relative;
                                        }
                                        
                                        .cta::before {
                                            content: "";
                                            position: absolute;
                                            inset: 0;
                                            background: rgba(32, 25, 20, .65);
                                        }
                                        
                                        .cta-overlay {
                                            position: relative;
                                            z-index: 2;
                                            text-align: center;
                                            color: #fff;
                                        }
                                        
                                        .cta-overlay h2 {
                                            font-size: 48px;
                                            margin-bottom: 20px;
                                        }
                                        
                                        .cta-overlay p {
                                            width: 60%;
                                            margin: 0 auto 35px;
                                            line-height: 1.8;
                                            font-size: 18px;
                                            color: #f2f2f2;
                                        }
                                        
                                        .cta-btn {
                                            display: inline-block;
                                            padding: 16px 42px;
                                            background: #9a6b49;
                                            color: #fff;
                                            text-decoration: none;
                                            border-radius: 50px;
                                            transition: .3s;
                                        }
                                        
                                        .cta-btn:hover {
                                            background: #7d5439;
                                            transform: translateY(-3px);
                                        }
                                        
                                        @media(max-width:768px) {
                                            .cta {
                                                padding: 90px 7%;
                                                background-attachment: scroll;
                                            }
                                            .cta-overlay h2 {
                                                font-size: 34px;
                                            }
                                            .cta-overlay p {
                                                width: 100%;
                                                font-size: 16px;
                                            }
                                        }
                                        /* ABOUT HERO */
                                        
                                        .about-hero {
                                            width: 100%;
                                            min-height: 70vh;
                                            background-image: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, .72)), url("../images/about-bg.webp");
                                            background-size: cover;
                                            background-position: center;
                                            background-repeat: no-repeat;
                                            padding: 30px 70px;
                                            position: relative;
                                        }
                                        
                                        .about-overlay {
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            width: 100%;
                                            height: 100%;
                                            z-index: 1;
                                        }
                                        
                                        .about-content {
                                            min-height: calc(70vh - 100px);
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                            align-items: center;
                                            text-align: center;
                                            color: #fff;
                                            position: relative;
                                            z-index: 2;
                                        }
                                        
                                        .about-content h1 {
                                            font-size: 60px;
                                            font-weight: 700;
                                            margin: 18px 0;
                                        }
                                        
                                        .about-content p {
                                            max-width: 700px;
                                            font-size: 19px;
                                            line-height: 1.8;
                                        }
                                        
                                       
                                       @media (max-width: 768px) {
                                        .about-hero {
                                           padding: 30px 18px;
                                            }
                                        }
                                        /* OUR STORY */
                                        
                                        .our-story {
                                            width: 100%;
                                            padding: 100px 70px;
                                            background: #ffffff;
                                        }
                                        
                                        .story-container {
                                            display: flex;
                                            flex-wrap: wrap;
                                            justify-content: space-between;
                                            align-items: center;
                                            gap: 60px;
                                            max-width: 1400px;
                                            margin: auto;
                                        }
                                        
                                        .story-image {
                                            flex: 1;
                                        }
                                        
                                        .story-image img {
                                            width: 100%;
                                            border-radius: 20px;
                                            display: block;
                                            object-fit: cover;
                                            box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
                                            transition: .4s;
                                        }
                                        
                                        .story-image img:hover {
                                            transform: scale(1.03);
                                        }
                                        
                                        .story-content {
                                            flex: 1;
                                        }
                                        
                                        .story-content span {
                                            display: inline-block;
                                            color: #9a6b49;
                                            font-size: 16px;
                                            font-weight: 600;
                                            letter-spacing: 2px;
                                            margin-bottom: 15px;
                                            text-transform: uppercase;
                                        }
                                        
                                        .story-content h2 {
                                            font-size: 46px;
                                            color: #222;
                                            line-height: 1.3;
                                            margin-bottom: 25px;
                                        }
                                        
                                        .story-content p {
                                            color: #666;
                                            font-size: 17px;
                                            line-height: 1.9;
                                            margin-bottom: 20px;
                                        }
                                        
                                        .story-btn {
                                            display: inline-block;
                                            margin-top: 15px;
                                            padding: 15px 35px;
                                            background: #9a6b49;
                                            color: #fff;
                                            text-decoration: none;
                                            border-radius: 35px;
                                            font-size: 16px;
                                            font-weight: 500;
                                            transition: .3s ease;
                                        }
                                        
                                        .story-btn:hover {
                                            background: #7d5439;
                                            transform: translateY(-3px);
                                            box-shadow: 0 10px 25px rgba(154, 107, 73, .30);
                                        }
                                        
                                        .philosophy {
                                            width: 100%;
                                            padding: 100px 70px;
                                            background: #ffffff;
                                        }
                                        
                                        .philosophy-container {
                                            max-width: 90%;
                                            margin: auto;
                                            text-align: center;
                                        }
                                        
                                        .philosophy-heading span {
                                            color: #9a6b49;
                                            font-size: 16px;
                                            font-weight: 600;
                                            letter-spacing: 2px;
                                            text-transform: uppercase;
                                        }
                                        
                                        .philosophy-heading h2 {
                                            font-size: 44px;
                                            color: #222;
                                            margin: 18px 0 30px;
                                        }
                                        
                                        .philosophy-content p {
                                            color: #666;
                                            font-size: 18px;
                                            line-height: 1.9;
                                            margin-bottom: 20px;
                                        }
                                        
                                        .brands {
                                            width: 100%;
                                            padding: 100px 70px;
                                            background: #ffffff;
                                        }
                                        
                                        .brands-heading {
                                            text-align: center;
                                            margin-bottom: 60px;
                                        }
                                        
                                        .brands-heading span {
                                            color: #9a6b49;
                                            font-size: 16px;
                                            font-weight: 600;
                                            letter-spacing: 2px;
                                            text-transform: uppercase;
                                        }
                                        
                                        .brands-heading h2 {
                                            font-size: 44px;
                                            color: #222;
                                            margin: 18px 0;
                                        }
                                        
                                        .brands-heading p {
                                            max-width: 700px;
                                            margin: auto;
                                            color: #666;
                                            line-height: 1.8;
                                        }
                                        
                                        .brands-container {
                                            display: grid;
                                            grid-template-columns: repeat(5, 1fr);
                                            gap: 25px;
                                        }
                                        
                                        .brand-card {
                                            background: #fff;
                                            border: 1px solid #eee;
                                            border-radius: 16px;
                                            padding: 30px 20px;
                                            text-align: center;
                                            font-size: 20px;
                                            font-weight: 600;
                                            color: #333;
                                            transition: .35s ease;
                                            box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
                                        }
                                        
                                        .brand-card:hover {
                                            transform: translateY(-8px);
                                            border-color: #9a6b49;
                                            color: #9a6b49;
                                            box-shadow: 0 18px 35px rgba(154, 107, 73, .15);
                                        }
                                        
                                        @media(max-width:992px) {
                                            .brands-container {
                                                grid-template-columns: repeat(2, 1fr);
                                            }
                                        }
                                        
                                        @media(max-width:768px) {
                                            .brands {
                                                padding: 70px 30px;
                                            }
                                            .brands-container {
                                                grid-template-columns: 1fr;
                                            }
                                            .story-container {
                                                flex-direction: column;
                                            }
                                            .story-image {
                                                width: 100%;
                                            }
                                            .brands-heading h2 {
                                                font-size: 34px;
                                            }
                                        }
                                        
                                        .core-values {
                                            width: 100%;
                                            padding: 100px 70px;
                                            background: #ffffff;
                                        }
                                        
                                        .values-heading {
                                            text-align: center;
                                            margin-bottom: 60px;
                                        }
                                        
                                        .values-heading span {
                                            color: #9a6b49;
                                            font-size: 16px;
                                            font-weight: 600;
                                            letter-spacing: 2px;
                                            text-transform: uppercase;
                                        }
                                        
                                        .values-heading h2 {
                                            font-size: 44px;
                                            color: #222;
                                            margin: 18px 0;
                                        }
                                        
                                        .values-heading p {
                                            max-width: 700px;
                                            margin: auto;
                                            color: #666;
                                            line-height: 1.8;
                                        }
                                        
                                        .values-container {
                                            display: grid;
                                            grid-template-columns: repeat(4, 1fr);
                                            gap: 30px;
                                        }
                                        
                                        .value-card {
                                            background: #fff;
                                            padding: 40px 25px;
                                            text-align: center;
                                            border-radius: 18px;
                                            box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
                                            transition: .35s ease;
                                            border: 1px solid #eee;
                                        }
                                        
                                        .value-card:hover {
                                            transform: translateY(-8px);
                                            border-color: #9a6b49;
                                            box-shadow: 0 18px 40px rgba(154, 107, 73, .18);
                                        }
                                        
                                        .value-card i {
                                            font-size: 40px;
                                            color: #9a6b49;
                                            margin-bottom: 20px;
                                        }
                                        
                                        .value-card h3 {
                                            font-size: 22px;
                                            color: #222;
                                            margin-bottom: 15px;
                                        }
                                        
                                        .value-card p {
                                            color: #666;
                                            line-height: 1.8;
                                            font-size: 16px;
                                        }
                                        
                                        @media(max-width:992px) {
                                            .values-container {
                                                grid-template-columns: repeat(2, 1fr);
                                            }
                                        }
                                        
                                        @media(max-width:768px) {
                                            .core-values {
                                                padding: 70px 30px;
                                            }
                                            .values-container {
                                                grid-template-columns: 1fr;
                                            }
                                            .values-heading h2 {
                                                font-size: 34px;
                                            }
                                        }
                                        
                                        .value-card:hover i {
                                            color: #7d5439;
                                        }
                                        
                                        .services-hero {
                                            width: 100%;
                                            min-height: 70vh;
                                            background-image: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, .72)), url("../images/services-bg.webp");
                                            background-size: cover;
                                            background-position: center;
                                            background-repeat: no-repeat;
                                            padding: 30px 70px;
                                            position: relative;
                                        }
                                        
                                        .services-overlay {
                                            position: absolute;
                                            top: 0;
                                            left: 0;
                                            width: 100%;
                                            height: 100%;
                                        }
                                        
                                        .services-content {
                                            min-height: calc(70vh - 100px);
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                            align-items: center;
                                            text-align: center;
                                            color: #fff;
                                            position: relative;
                                            z-index: 2;
                                        }
                                        
                                        .services-content h1 {
                                            font-size: 60px;
                                            font-weight: 700;
                                            margin: 18px 0;
                                        }
                                        
                                        .services-content p {
                                            max-width: 720px;
                                            font-size: 19px;
                                            line-height: 1.8;
                                        }
                                        
                                        .service-highlights {
                                            background: #9a6b49;
                                            padding: 18px 70px;
                                        }
                                    @media (max-width: 768px){
                                        .services-hero {
                                         padding: 30px 18px;
                                          }
                                          }
                                        
                                        .highlights-container {
                                            max-width: 1400px;
                                            margin: auto;
                                            display: flex;
                                            justify-content: space-between;
                                            align-items: center;
                                            gap: 20px;
                                            flex-wrap: wrap;
                                        }
                                        
                                        .highlight-item {
                                            display: flex;
                                            align-items: center;
                                            gap: 10px;
                                            color: #fff;
                                            font-size: 17px;
                                            font-weight: 500;
                                        }
                                        
                                        .highlight-item i {
                                            font-size: 20px;
                                            color: #fff;
                                        }
                                        
                                        .service-highlights {
                                            border-top: 1px solid rgba(255, 255, 255, .2);
                                            border-bottom: 1px solid rgba(255, 255, 255, .2);
                                        }
                                        
                                        .services-intro {
                                            width: 100%;
                                            padding: 100px 70px;
                                            background: #f8f4ef;
                                        }
                                        
                                        .intro-container {
                                            max-width: 1400px;
                                            margin: auto;
                                            display: flex;
                                            flex-wrap: wrap;
                                            justify-content: space-between;
                                            align-items: center;
                                            gap: 60px;
                                        }
                                        
                                        .intro-content {
                                            flex: 1;
                                        }
                                        
                                        .intro-content span {
                                            color: #9a6b49;
                                            font-size: 16px;
                                            font-weight: 600;
                                            letter-spacing: 2px;
                                            text-transform: uppercase;
                                        }
                                        
                                        .intro-content h2 {
                                            font-size: 46px;
                                            color: #222;
                                            margin: 18px 0;
                                            line-height: 1.3;
                                        }
                                        
                                        .intro-content p {
                                            color: #666;
                                            font-size: 17px;
                                            line-height: 1.9;
                                            margin-bottom: 30px;
                                        }
                                        
                                        .intro-image {
                                            flex: 1;
                                        }
                                        
                                        .intro-image img {
                                            width: 100%;
                                            height: auto;
                                            object-position: 50% 40%;
                                            display: block;
                                            object-fit: cover;
                                            box-shadow: 0 25px 50px rgba(0, 0, 0, .15);
                                        }
                                        
                                        .intro-btn {
                                            display: inline-block;
                                            padding: 15px 35px;
                                            background: #9a6b49;
                                            color: #fff;
                                            text-decoration: none;
                                            border-radius: 35px;
                                            transition: .3s;
                                        }
                                        
                                        .intro-btn:hover {
                                            background: #7d5439;
                                        }
                                        
                                        .intro-image {
                                            flex: 1;
                                            position: relative;
                                        }
                                        
                                        .intro-image img {
                                            position: relative;
                                            z-index: 2;
                                            width: 100%;
                                            display: block;
                                            border-radius: 20px;
                                            object-fit: cover;
                                            box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
                                        }
                                        
                                        .intro-content h2::after {
                                            content: "";
                                            display: block;
                                            width: 80px;
                                            height: 4px;
                                            background: #9a6b49;
                                            margin-top: 18px;
                                            border-radius: 5px;
                                        }
                                        
                                        .services-section {
                                            width: 100%;
                                            padding: 100px 70px;
                                            background: #f8f4ef;
                                        }
                                        
                                        .services-heading {
                                            text-align: center;
                                            margin-bottom: 60px;
                                        }
                                        
                                        .services-heading span {
                                            color: #9a6b49;
                                            font-size: 16px;
                                            font-weight: 600;
                                            letter-spacing: 2px;
                                            text-transform: uppercase;
                                        }
                                        
                                        .services-heading h2 {
                                            font-size: 44px;
                                            color: #222;
                                            margin: 18px 0;
                                        }
                                        
                                        .services-heading p {
                                            max-width: 700px;
                                            margin: auto;
                                            color: #666;
                                            line-height: 1.8;
                                            font-size: 17px;
                                        }
                                        
                                        .services-grid {
                                            display: grid;
                                            grid-template-columns: repeat(3, 1fr);
                                            gap: 30px;
                                            max-width: 1400px;
                                            margin: auto;
                                        }
                                        
                                        .service-card {
                                            background: #fff;
                                            padding: 40px 30px;
                                            border-radius: 18px;
                                            text-align: center;
                                            border: 1px solid #eee;
                                            box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
                                            transition: .35s ease;
                                        }
                                        
                                        .service-card:hover {
                                            transform: translateY(-8px);
                                            border-color: #9a6b49;
                                            box-shadow: 0 18px 40px rgba(154, 107, 73, .18);
                                        }
                                        
                                        .service-card i {
                                            font-size: 42px;
                                            color: #9a6b49;
                                            margin-bottom: 20px;
                                        }
                                        
                                        .service-card h3 {
                                            font-size: 24px;
                                            color: #222;
                                            margin-bottom: 15px;
                                        }
                                        
                                        .service-card p {
                                            color: #666;
                                            line-height: 1.8;
                                            margin-bottom: 25px;
                                        }
                                        
                                        .service-btn {
                                            display: inline-block;
                                            padding: 12px 28px;
                                            background: #9a6b49;
                                            color: #fff;
                                            text-decoration: none;
                                            border-radius: 30px;
                                            transition: .3s;
                                        }
                                        
                                        .service-btn:hover {
                                            background: #7d5439;
                                        }
                                        /* Tablet */
                                        
                                        @media (max-width:992px) {
                                            .services-section {
                                                padding: 80px 40px;
                                            }
                                            .services-grid {
                                                grid-template-columns: repeat(2, 1fr);
                                            }
                                            .services-heading h2 {
                                                font-size: 38px;
                                            }
                                        }
                                        /* Mobile */
                                        
                                        @media (max-width:768px) {
                                            .services-section {
                                                padding: 60px 20px;
                                            }
                                            .services-grid {
                                                grid-template-columns: 1fr;
                                                gap: 20px;
                                            }
                                            .services-heading h2 {
                                                font-size: 30px;
                                            }
                                            .service-card {
                                                padding: 30px 20px;
                                            }
                                            .service-card h3 {
                                                font-size: 22px;
                                            }
                                            .intro-container {
                                                flex-direction: column;
                                            }
                                            .service-card {
                                                background: #fff;
                                                padding: 40px 30px;
                                                border-radius: 18px;
                                                border: 1px solid #eee;
                                                box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
                                                transition: .35s ease;
                                                display: flex;
                                                flex-direction: column;
                                                align-items: center;
                                                height: 100%;
                                            }
                                            .service-card p {
                                                flex-grow: 1;
                                            }
                                            .service-btn {
                                                margin-top: auto;
                                            }
                                            .service-card:hover i {
                                                transform: scale(1.12);
                                                transition: .3s ease;
                                            }
                                            .service-card {
                                                position: relative;
                                                overflow: hidden;
                                            }
                                            .service-card::before {
                                                content: "";
                                                position: absolute;
                                                top: 0;
                                                left: 0;
                                                width: 100%;
                                                height: 4px;
                                                background: #9a6b49;
                                                transform: scaleX(0);
                                                transform-origin: left;
                                                transition: .35s ease;
                                            }
                                            .service-card:hover::before {
                                                transform: scaleX(1);
                                            }
                                        }
                                        
                                        .faq-section {
                                            width: 100%;
                                            padding: 100px 70px;
                                            background: #f8f4ef;
                                        }
                                        
                                        .faq-heading {
                                            text-align: center;
                                            margin-bottom: 60px;
                                        }
                                        
                                        .faq-heading span {
                                            color: #9a6b49;
                                            font-size: 16px;
                                            font-weight: 600;
                                            letter-spacing: 2px;
                                            text-transform: uppercase;
                                        }
                                        
                                        .faq-heading h2 {
                                            font-size: 44px;
                                            color: #222;
                                            margin: 18px 0;
                                        }
                                        
                                        .faq-heading p {
                                            max-width: 700px;
                                            margin: auto;
                                            color: #666;
                                            line-height: 1.8;
                                        }
                                        
                                        .faq-container {
                                            max-width: 950px;
                                            margin: auto;
                                        }
                                        
                                        .faq-item {
                                            background: #fff;
                                            border-radius: 15px;
                                            margin-bottom: 20px;
                                            border: 1px solid #e6e6e6;
                                            overflow: hidden;
                                            transition: .3s;
                                            box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
                                        }
                                        
                                        .faq-item:hover {
                                            border-color: #9a6b49;
                                        }
                                        
                                        .faq-item summary {
                                            list-style: none;
                                            cursor: pointer;
                                            padding: 22px 28px;
                                            font-size: 18px;
                                            font-weight: 600;
                                            color: #222;
                                            position: relative;
                                            transition: .3s;
                                        }
                                        
                                        .faq-item summary::-webkit-details-marker {
                                            display: none;
                                        }
                                        
                                        .faq-item summary::after {
                                            content: "+";
                                            position: absolute;
                                            right: 28px;
                                            top: 50%;
                                            transform: translateY(-50%);
                                            font-size: 28px;
                                            color: #9a6b49;
                                            font-weight: 500;
                                        }
                                        
                                        .faq-item[open] summary::after {
                                            content: "−";
                                        }
                                        
                                        .faq-item p {
                                            padding: 0 28px 25px;
                                            color: #666;
                                            line-height: 1.9;
                                            font-size: 16px;
                                        }
                                        
                                        .faq-item[open] {
                                            border-color: #9a6b49;
                                            box-shadow: 0 15px 35px rgba(154, 107, 73, .12);
                                        }
                                        /* Tablet */
                                        
                                        @media (max-width:992px) {
                                            .faq-section {
                                                padding: 80px 40px;
                                            }
                                        }
                                        
                                        @media (min-width:1600px) {
                                            .faq-container {
                                                max-width: 1400px;
                                            }
                                        }
                                        /* Mobile */
                                        
                                        @media (max-width:768px) {
                                            .faq-section {
                                                padding: 60px 20px;
                                            }
                                            .faq-heading h2 {
                                                font-size: 32px;
                                            }
                                            .faq-item summary {
                                                font-size: 16px;
                                                padding: 18px 20px;
                                                padding-right: 50px;
                                            }
                                            .faq-item summary::after {
                                                right: 20px;
                                            }
                                            .faq-item p {
                                                padding: 0 20px 20px;
                                                font-size: 15px;
                                            }
                                        }
                                        
                                        .faq-item summary::before {
                                            content: "Q";
                                            display: inline-flex;
                                            align-items: center;
                                            justify-content: center;
                                            width: 28px;
                                            height: 28px;
                                            background: #9a6b49;
                                            color: #fff;
                                            border-radius: 50%;
                                            font-size: 14px;
                                            margin-right: 12px;
                                            font-weight: 600;
                                        }
                                        
                                        .contact-hero {
                                            width: 100%;
                                            min-height: 100vh;
                                            background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .72)), url("../images/contact-bg.webp");
                                            background-size: cover;
                                            background-position: center;
                                            background-repeat: no-repeat;
                                            padding: 30px 70px;
                                        }
                                        
                                        .contact-hero-content {
                                            height: 80vh;
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                            align-items: center;
                                            text-align: center;
                                            color: #fff;
                                        }
                                        
                                        .contact-hero-content span {
                                            color: #d67b3d;
                                            letter-spacing: 2px;
                                            font-weight: 600;
                                        }
                                        
                                        .contact-hero-content h1 {
                                            font-size: 60px;
                                            margin: 20px 0;
                                            text-shadow: 0 4px18px rgba(0, 0, 0, .05);
                                        }
                                        
                                        .contact-hero-content p {
                                            max-width: 700px;
                                            line-height: 1.8;
                                            margin-bottom: 35px;
                                        }
                                        
                                        .contact-hero-buttons {
                                            display: flex;
                                            gap: 20px;
                                        }
                                        
                                        .primary-btn,
                                        .secondary-btn {
                                            text-decoration: none;
                                            padding: 15px 35px;
                                            border-radius: 50px;
                                            font-weight: 600;
                                            transition: .3s;
                                        }
                                        
                                        .primary-btn {
                                            background: #d67b3d;
                                            color: #fff;
                                        }
                                        
                                        .primary-btn:hover {
                                            background: #b9622b;
                                        }
                                        
                                        .secondary-btn {
                                            border: 2px solid #fff;
                                            color: #fff;
                                        }
                                        
                                        .secondary-btn:hover {
                                            background: #fff;
                                            color: #222;
                                        }
                                        
                                        @media (max-width: 768px) {
                                            .contact-hero {
                                                padding: 20px;
                                                min-height: 100vh;
                                            }
                                            .contact-hero-content {
                                                text-align: center;
                                                width: 100%;
                                                max-width: 100%;
                                                padding: 20px 0;
                                            }
                                            .contact-hero-content span {
                                                font-size: 14px;
                                            }
                                            .contact-hero-content h1 {
                                                font-size: 42px;
                                                line-height: 1.2;
                                                margin: 15px 0;
                                            }
                                            .contact-hero-content p {
                                                font-size: 16px;
                                                line-height: 1.7;
                                                max-width: 100%;
                                            }
                                            .contact-hero-buttons {
                                                display: flex;
                                                flex-direction: column;
                                                align-items: center;
                                                gap: 15px;
                                                margin-top: 25px;
                                            }
                                            .primary-btn,
                                            .secondary-btn {
                                                width: 100%;
                                                max-width: 280px;
                                                text-align: center;
                                            }
                                        }
                                        
                                        @media (max-width:480px) {
                                            .contact-hero {
                                                padding: 15px;
                                            }
                                            .contact-hero-content h1 {
                                                font-size: 34px;
                                            }
                                            .contact-hero-content p {
                                                font-size: 15px;
                                            }
                                            .primary-btn,
                                            .secondary-btn {
                                                max-width: 250px;
                                                padding: 14px 20px;
                                            }
                                        }
                                        /* CONTACT CARDS */
                                        
                                        .contact-info {
                                            width: 90%;
                                            margin: 90px auto;
                                            display: grid;
                                            grid-template-columns: repeat(3, 1fr);
                                            gap: 30px;
                                        }
                                        
                                        .contact-card {
                                            background: #fff;
                                            border-radius: 20px;
                                            padding: 45px 30px;
                                            text-align: center;
                                            box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
                                            transition: .4s;
                                        }
                                        
                                        .contact-card:hover {
                                            transform: translateY(-10px);
                                            border-bottom: 4px solid #d67b3d;
                                        }
                                        
                                        .contact-icon {
                                            width: 75px;
                                            height: 75px;
                                            margin: 0 auto 20px;
                                            border-radius: 50%;
                                            background: #fff5ef;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                        }
                                        
                                        .contact-icon i {
                                            font-size: 30px;
                                            color: #d67b3d;
                                        }
                                        
                                        .contact-card h3 {
                                            font-size: 24px;
                                            margin-bottom: 12px;
                                            color: #222;
                                        }
                                        
                                        .contact-card p {
                                            font-size: 18px;
                                            font-weight: 600;
                                            color: #444;
                                            margin-bottom: 10px;
                                        }
                                        
                                        .contact-card span {
                                            color: #777;
                                            font-size: 15px;
                                        }
                                        
                                        @media(max-width:992px) {
                                            .contact-info {
                                                grid-template-columns: 1fr;
                                            }
                                        }
                                        
                                        .contact-form-section {
                                            padding: 100px 70px;
                                            background: #f8f4ef;
                                        }
                                        
                                        .contact-container {
                                            max-width: 1400px;
                                            margin: auto;
                                            display: grid;
                                            grid-template-columns: 1fr 1fr;
                                            gap: 70px;
                                            align-items: center;
                                        }
                                        
                                        .contact-left span {
                                            color: #9a6b49;
                                            font-weight: 600;
                                            letter-spacing: 2px;
                                        }
                                        
                                        .contact-left h2 {
                                            font-size: 44px;
                                            color: #222;
                                            margin: 18px 0;
                                        }
                                        
                                        .contact-left p {
                                            color: #666;
                                            line-height: 1.9;
                                            margin-bottom: 35px;
                                        }
                                        
                                        .contact-feature {
                                            display: flex;
                                            align-items: center;
                                            gap: 15px;
                                            margin-bottom: 18px;
                                        }
                                        
                                        .contact-feature i {
                                            color: #9a6b49;
                                            font-size: 20px;
                                        }
                                        
                                        .contact-feature span {
                                            color: #333;
                                            letter-spacing: 0;
                                        }
                                        
                                        .contact-form {
                                            background: #fff;
                                            padding: 40px;
                                            border-radius: 20px;
                                            box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
                                        }
                                        
                                        .contact-form form {
                                            display: flex;
                                            flex-direction: column;
                                            gap: 18px;
                                        }
                                        
                                        .contact-form input,
                                        .contact-form select,
                                        .contact-form textarea {
                                            width: 100%;
                                            padding: 16px;
                                            border: 1px solid #ddd;
                                            border-radius: 10px;
                                            font-size: 16px;
                                            outline: none;
                                            transition: .3s;
                                        }
                                        
                                        .contact-form input:focus,
                                        .contact-form select:focus,
                                        .contact-form textarea:focus {
                                            border-color: #9a6b49;
                                        }
                                        
                                        .contact-form textarea {
                                            resize: none;
                                        }
                                        
                                        .contact-form button {
                                            background: #9a6b49;
                                            color: #fff;
                                            border: none;
                                            padding: 16px;
                                            border-radius: 35px;
                                            font-size: 17px;
                                            cursor: pointer;
                                            transition: .3s;
                                        }
                                        
                                        .contact-form button:hover {
                                            background: #7d5439;
                                        }
                                        
                                        @media (max-width:992px) {
                                            .contact-container {
                                                grid-template-columns: 1fr;
                                                gap: 50px;
                                            }
                                        }
                                        
                                        @media (max-width:768px) {
                                            .contact-form-section {
                                                padding: 70px 20px;
                                            }
                                            .contact-left h2 {
                                                font-size: 32px;
                                            }
                                            .contact-form {
                                                padding: 25px;
                                            }
                                        }
                                        /*TABLET & MOBILE====*/
                                        
                                        @media (max-width:768px) {
                                            .logo img {
                                                height: 55px;
                                                width: auto;
                                            }
                                            .menu-toggle {
                                                display: block;
                                                margin-left: auto;
                                            }
                                        }
                                        
                                        .project-hero {
                                            min-height: 100vh;
                                            background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, .72)), url("../images/project-bg.webp") center/cover no-repeat;
                                            padding: 30px 70px 100px;
                                            display: flex;
                                            flex-direction: column;
                                        }
                                        
                                        .project-hero-content {
                                            flex: 1;
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                            align-items: center;
                                            text-align: center;
                                            max-width: 900px;
                                            margin: 0 auto;
                                        }
                                        
                                        .project-hero-content span {
                                            color: #d67b3d;
                                            font-size: 16px;
                                            font-weight: 600;
                                            letter-spacing: 3px;
                                            text-transform: uppercase;
                                            margin-bottom: 18px;
                                        }
                                        
                                        .project-hero-content h1 {
                                            color: #fff;
                                            font-size: 58px;
                                            line-height: 1.2;
                                            margin-bottom: 25px;
                                            font-weight: 700;
                                        }
                                        
                                        .project-hero-content p {
                                            color: #f5f5f5;
                                            font-size: 18px;
                                            line-height: 1.9;
                                            max-width: 760px;
                                        }
                                        
                                        @media(max-width:992px) {
                                            .project-hero {
                                                padding: 25px 35px 80px;
                                            }
                                            .project-hero-content h1 {
                                                font-size: 46px;
                                            }
                                            .project-hero-content p {
                                                font-size: 17px;
                                            }
                                        }
                                        
                                        @media(max-width:768px) {
                                            .project-hero {
                                                min-height: 80vh;
                                                padding: 20px 18px 60px;
                                            }
                                            .project-hero-content {
                                                margin-top: 60px;
                                            }
                                            .project-hero-content span {
                                                font-size: 14px;
                                                letter-spacing: 2px;
                                            }
                                            .project-hero-content h1 {
                                                font-size: 34px;
                                                line-height: 1.35;
                                            }
                                            .project-hero-content p {
                                                font-size: 16px;
                                                line-height: 1.8;
                                            }
                                        }
                                        
                                        @media(max-width:480px) {
                                            .project-hero-content h1 {
                                                font-size: 28px;
                                            }
                                            .project-hero-content p {
                                                font-size: 15px;
                                            }
                                        }
                                        
                                        .featured-video {
                                            padding: 100px 70px;
                                            background: #ffffff;
                                        }
                                        
                                        .section-title h2 {
                                            font-size: 34px;
                                            color: #222;
                                            margin-bottom: 18px;
                                            font-weight: 600;
                                        }
                                        
                                        .section-title p {
                                            font-size: 17px;
                                            line-height: 1.9;
                                            color: #666;
                                            margin-bottom: 35px;
                                        }
                                        
                                        .video-wrapper {
                                            max-width: 90%;
                                            margin: 60px auto 40px;
                                            border-radius: 20px;
                                            overflow: hidden;
                                            box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
                                        }
                                        
                                        .video-wrapper video {
                                            width: 100%;
                                            height: auto;
                                            display: block;
                                            border-radius: 20px;
                                            box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
                                        }
                                        
                                        .video-content {
                                            max-width: 1400px;
                                            margin: 0;
                                            height: auto;
                                        }
                                        
                                        .video-content h3 {
                                            font-size: 34px;
                                            color: #222;
                                            margin-bottom: 18px;
                                            font-weight: 600;
                                        }
                                        
                                        .video-content p {
                                            font-size: 17px;
                                            line-height: 1.9;
                                            color: #666;
                                            margin-bottom: 35px;
                                        }
                                        
                                        .video-btn {
                                            display: inline-block;
                                            background: #4b4b57;
                                            color: #fff;
                                            text-decoration: none;
                                            padding: 14px 34px;
                                            border-radius: 40px;
                                            font-weight: 600;
                                            transition: .3s;
                                        }
                                        
                                        .video-btn:hover {
                                            background: #d67b3d;
                                            transform: translateY(-3px);
                                        }
                                        
                                        @media(max-width:992px) {
                                            .featured-video {
                                                padding: 80px 35px;
                                            }
                                            .video-wrapper {
                                                margin: 45px auto 35px;
                                            }
                                            .video-content h3 {
                                                font-size: 30px;
                                            }
                                        }
                                        
                                        @media(max-width:768px) {
                                            .featured-video {
                                                padding: 70px 18px;
                                            }
                                            .video-wrapper {
                                                margin: 35px auto 30px;
                                                border-radius: 15px;
                                            }
                                            .video-wrapper video {
                                                border-radius: 15px;
                                            }
                                            .video-content h3 {
                                                font-size: 26px;
                                            }
                                            .video-content p {
                                                font-size: 16px;
                                                line-height: 1.8;
                                            }
                                            .video-btn {
                                                width: 100%;
                                                max-width: 300px;
                                                text-align: center;
                                            }
                                        }
                                        
                                        @media(max-width:480px) {
                                            .video-content h3 {
                                                font-size: 22px;
                                            }
                                            .video-content p {
                                                font-size: 15px;
                                            }
                                        }
                                        
                                        .projects-gallery {
                                            padding: 100px 70px;
                                            background: #ffffff;
                                        }
                                        
                                        .projects-grid {
                                            display: grid;
                                            grid-template-columns: repeat(3, 1fr);
                                            gap: 35px;
                                            margin-top: 60px;
                                        }
                                        
                                        .project-card {
                                            background: #fff;
                                            border-radius: 18px;
                                            overflow: hidden;
                                            box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
                                            transition: .35s ease;
                                        }
                                        
                                        .project-card:hover {
                                            transform: translateY(-8px);
                                            box-shadow: 0 18px 40px rgba(0, 0, 0, .15);
                                        }
                                        
                                        .project-card img {
                                            width: 100%;
                                            height: 280px;
                                            object-fit: cover;
                                            display: block;
                                            transition: .4s ease;
                                        }
                                        
                                        .project-card:hover img {
                                            transform: scale(1.08);
                                        }
                                        
                                        .project-info {
                                            padding: 22px;
                                            text-align: center;
                                        }
                                        
                                        .project-info h3 {
                                            font-size: 24px;
                                            color: #222;
                                            margin-bottom: 10px;
                                            font-weight: 600;
                                        }
                                        
                                        .project-info p {
                                            color: #777;
                                            font-size: 16px;
                                            line-height: 1.7;
                                        }
                                        
                                        @media(max-width:992px) {
                                            .projects-gallery {
                                                padding: 80px 35px;
                                            }
                                            .projects-grid {
                                                grid-template-columns: repeat(2, 1fr);
                                                gap: 25px;
                                            }
                                            .project-card img {
                                                height: 240px;
                                            }
                                        }
                                        
                                        @media(max-width:768px) {
                                            .projects-gallery {
                                                padding: 70px 18px;
                                            }
                                            .projects-grid {
                                                grid-template-columns: 1fr;
                                                gap: 22px;
                                            }
                                            .project-card {
                                                border-radius: 16px;
                                            }
                                            .project-card img {
                                                height: 220px;
                                            }
                                            .project-info {
                                                padding: 18px;
                                            }
                                            .project-info h3 {
                                                font-size: 22px;
                                            }
                                            .project-info p {
                                                font-size: 15px;
                                            }
                                        }
                                        
                                        @media(max-width:480px) {
                                            .project-card img {
                                                height: 200px;
                                            }
                                            .project-info h3 {
                                                font-size: 20px;
                                            }
                                        }
                                        
                                        .achievements {
                                            padding: 100px 70px;
                                            background: #ffffff;
                                        }
                                        
                                        .achievement-grid {
                                            display: grid;
                                            grid-template-columns: repeat(3, 1fr);
                                            gap: 30px;
                                            margin-top: 60px;
                                        }
                                        
                                        .achievement-card {
                                            background: #2b2b2b;
                                            border: 1px solid rgba(255, 255, 255, .08);
                                            border-radius: 20px;
                                            padding: 40px 25px;
                                            text-align: center;
                                            transition: .35s ease;
                                        }
                                        
                                        .achievement-card:hover {
                                            transform: translateY(-8px);
                                            border-color: #d67b3d;
                                            box-shadow: 0 15px 30px rgba(0, 0, 0, .25);
                                        }
                                        
                                        .achievement-card i {
                                            font-size: 42px;
                                            color: #d67b3d;
                                            margin-bottom: 18px;
                                        }
                                        
                                        .achievement-card h3 {
                                            font-size: 48px;
                                            color: #fff;
                                            margin-bottom: 12px;
                                            font-weight: 700;
                                        }
                                        
                                        .achievement-card p {
                                            color: #d8d8d8;
                                            font-size: 18px;
                                            line-height: 1.7;
                                        }
                                        
                                        @media(max-width: 992px) {
                                            .achievements {
                                                padding: 80px 35px;
                                            }
                                            .achievement-grid {
                                                grid-template-columns: repeat(2, 1fr);
                                                gap: 25px;
                                            }
                                        }
                                        
                                        @media(max-width:768px) {
                                            .achievements {
                                                padding: 70px 18px;
                                            }
                                            .achievement-grid {
                                                grid-template-columns: 1fr;
                                                gap: 20px;
                                                margin-top: 40px;
                                            }
                                            .achievement-card {
                                                padding: 35px 20px;
                                            }
                                            .achievement-card i {
                                                font-size: 36px;
                                            }
                                            .achievement-card h3 {
                                                font-size: 38px;
                                            }
                                            .achievement-card p {
                                                font-size: 16px;
                                            }
                                        }
                                        
                                        @media(max-width:480px) {
                                            .achievement-card {
                                                padding: 30px 18px;
                                            }
                                            .achievement-card h3 {
                                                font-size: 34px;
                                            }
                                        }
                                        
                                        .project-cta {
                                            padding: 100px 70px;
                                            background: linear-gradient(135deg, #2f2f35, #1f1f1f);
                                            border-radius: 30px;
                                            margin: 100px 70px;
                                        }
                                        
                                        .cta-content {
                                            max-width: 850px;
                                            margin: 0 auto;
                                            text-align: center;
                                        }
                                        
                                        .cta-content span {
                                            display: block;
                                            color: #d67b3d;
                                            font-size: 16px;
                                            font-weight: 600;
                                            letter-spacing: 3px;
                                            text-transform: uppercase;
                                            margin-bottom: 18px;
                                        }
                                        
                                        .cta-content h2 {
                                            color: #fff;
                                            font-size: 46px;
                                            line-height: 1.3;
                                            margin-bottom: 20px;
                                        }
                                        
                                        .cta-content p {
                                            color: #e5e5e5;
                                            font-size: 18px;
                                            line-height: 1.9;
                                            margin-bottom: 40px;
                                        }
                                        
                                        .cta-buttons {
                                            display: flex;
                                            justify-content: center;
                                            gap: 20px;
                                            flex-wrap: wrap;
                                        }
                                        
                                        .cta-primary,
                                        .cta-secondary {
                                            display: inline-flex;
                                            align-items: center;
                                            justify-content: center;
                                            text-decoration: none;
                                            padding: 15px 34px;
                                            border-radius: 40px;
                                            font-weight: 600;
                                            transition: .3s ease;
                                        }
                                        
                                        .cta-primary {
                                            background: #d67b3d;
                                            color: #fff;
                                        }
                                        
                                        .cta-primary:hover {
                                            background: #b9652d;
                                            transform: translateY(-3px);
                                        }
                                        
                                        .cta-secondary {
                                            background: transparent;
                                            color: #fff;
                                            border: 2px solid rgba(255, 255, 255, .3);
                                        }
                                        
                                        .cta-secondary:hover {
                                            background: #fff;
                                            color: #222;
                                        }
                                        
                                        .cta-secondary i {
                                            margin-right: 8px;
                                        }
                                        
                                        @media(max-width:992px) {
                                            .project-cta {
                                                margin: 80px 35px;
                                                padding: 80px 35px;
                                            }
                                            .cta-content h2 {
                                                font-size: 38px;
                                            }
                                        }
                                        
                                        @media(max-width:768px) {
                                            .project-cta {
                                                margin: 70px 18px;
                                                padding: 60px 20px;
                                                border-radius: 20px;
                                            }
                                            .cta-content h2 {
                                                font-size: 30px;
                                            }
                                            .cta-content p {
                                                font-size: 16px;
                                            }
                                            .cta-buttons {
                                                flex-direction: column;
                                                gap: 15px;
                                            }
                                            .cta-primary,
                                            .cta-secondary {
                                                width: 100%;
                                                max-width: 300px;
                                                margin: 0 auto;
                                            }
                                        }
                                        
                                        @media(max-width:480px) {
                                            .cta-content h2 {
                                                font-size: 26px;
                                            }
                                        }