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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",sans-serif;
    background:#0d0d0d;
    color:#fff;
    overflow-x:hidden;
}

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

a{
    color:inherit;
    text-decoration:none;
}

button{
    font-family:inherit;
    cursor:pointer;
    border:none;
}

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

.container{
    width:min(1280px,92%);
    margin:auto;
}

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

.button{

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

    padding:18px 36px;

    border-radius:999px;

    background:#C89D65;

    color:#000;

    font-weight:700;

    transition:.35s;

}

.button:hover{

    background:white;

    transform:translateY(-4px);

}

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    backdrop-filter:blur(20px);

    background:rgba(10,10,10,.55);

    border-bottom:1px solid rgba(255,255,255,.06);

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:82px;

}

.logo{

    font-size:26px;

    font-weight:800;

    letter-spacing:.25em;

}

.nav{

    display:flex;

    gap:48px;

}

.nav a{

    color:#d4d4d4;

    transition:.3s;

}

.nav a:hover{

    color:white;

}

.burger{

    display:none;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

}

.burger span{

    width:28px;

    height:2px;

    background:white;

    transition:.3s;

}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-2;

}

.overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    z-index:-1;

}

.hero-content{

    padding-top:90px;

}

.hero h1{

    max-width:900px;

    font-size:72px;

    line-height:1.05;

    font-weight:800;

}

.hero p{

    margin-top:36px;

    max-width:650px;

    font-size:22px;

    color:#c7c7c7;

    line-height:1.8;

}

.hero .button{

    margin-top:48px;

}

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

.stats{

    padding:110px 0;

    background:#111;

}

.stats .container{

    display:grid;

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

    gap:32px;

}

.stat{

    padding:48px 24px;

    text-align:center;

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

    border-radius:28px;

    background:#181818;

    transition:.35s;

}

.stat:hover{

    transform:translateY(-8px);

    border-color:#C89D65;

}

.stat h2{

    font-size:54px;

    color:#C89D65;

    margin-bottom:16px;

}

.stat p{

    color:#bdbdbd;

    font-size:18px;

}

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

.features{

    padding:120px 0;

    background:#0d0d0d;

}

.features h2{

    text-align:center;

    font-size:52px;

    margin-bottom:70px;

}

.features .grid{

    display:grid;

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

    gap:30px;

}

.card{

    padding:42px;

    border-radius:32px;

    background:#181818;

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

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

    border-color:#C89D65;

}

.card h3{

    font-size:28px;

    margin-bottom:22px;

}

.card p{

    color:#bfbfbf;

    line-height:1.8;

}

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

.projects{

    padding:130px 0;

    background:#111;

}

.projects h2{

    text-align:center;

    font-size:52px;

    margin-bottom:70px;

}

.project-grid{

    display:grid;

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

    gap:28px;

}

.project{

    overflow:hidden;

    border-radius:32px;

    background:#181818;

    transition:.4s;

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

}

.project:hover{

    transform:translateY(-10px);

    border-color:#C89D65;

}

.project img{

    width:100%;

    height:420px;

    object-fit:cover;

    transition:.6s;

}

.project:hover img{

    transform:scale(1.08);

}

.project .info{

    padding:28px;

}

.project h3{

    font-size:30px;

    margin-bottom:14px;

}

.project p{

    color:#bfbfbf;

    line-height:1.8;

}

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

.gallery{

    padding:130px 0;

    background:#0d0d0d;

    overflow:hidden;

}

.gallery h2{

    text-align:center;

    font-size:52px;

    margin-bottom:70px;

}

.gallery-row{

    overflow:hidden;

    margin-bottom:24px;

}

.gallery-track{

    display:flex;

    gap:24px;

    width:max-content;

    animation:marquee 70s linear infinite;

}

.gallery-row.reverse .gallery-track{

    animation:marqueeReverse 70s linear infinite;

}

.gallery-track img{

    width:420px;

    height:280px;

    border-radius:30px;

    object-fit:cover;

    flex-shrink:0;

    transition:.5s;

}

.gallery-track img:hover{

    transform:scale(1.05);

}

.gallery-track:hover{

    animation-play-state:paused;

}

@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@keyframes marqueeReverse{

    from{

        transform:translateX(-50%);

    }

    to{

        transform:translateX(0);

    }

}

/* ===========================
   STEPS
=========================== */

.steps{

    padding:130px 0;

    background:#111;

}

.steps h2{

    text-align:center;

    font-size:52px;

    margin-bottom:80px;

}

.timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:26px;

    top:0;

    width:2px;

    height:100%;

    background:#C89D65;

    opacity:.25;

}

.step{

    position:relative;

    display:flex;

    gap:40px;

    margin-bottom:50px;

}

.step span{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#C89D65;

    color:#000;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:800;

    flex-shrink:0;

}

.step div{

    flex:1;

    background:#181818;

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

    border-radius:28px;

    padding:34px;

    transition:.35s;

}

.step div:hover{

    border-color:#C89D65;

    transform:translateY(-6px);

}

.step h3{

    font-size:28px;

    margin-bottom:16px;

}

.step p{

    color:#bdbdbd;

    line-height:1.8;

}

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

.cta{

    padding:150px 0;

    background:#0d0d0d;

}

.cta-box{

    background:#181818;

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

    border-radius:40px;

    padding:80px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.cta-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(200,157,101,.15),
        transparent,
        rgba(200,157,101,.15)
    );

    pointer-events:none;

}

.cta-box span{

    display:block;

    color:#C89D65;

    letter-spacing:.35em;

    text-transform:uppercase;

    margin-bottom:26px;

}

.cta-box h2{

    font-size:58px;

    line-height:1.1;

    margin-bottom:30px;

}

.cta-box p{

    max-width:700px;

    margin:auto;

    color:#bfbfbf;

    line-height:1.9;

    margin-bottom:48px;

}

/* ===========================
   REVIEWS
=========================== */

.reviews{

    padding:130px 0;

    background:#111;

}

.reviews h2{

    text-align:center;

    font-size:52px;

    margin-bottom:20px;

}

.review-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.review{

    background:#181818;

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

    border-radius:30px;

    padding:36px;

    color:#C89D65;

    font-size:22px;

    transition:.35s;

}

.review:hover{

    transform:translateY(-8px);

    border-color:#C89D65;

}

.review p{

    color:#cfcfcf;

    font-size:17px;

    line-height:1.8;

    margin:25px 0;

}

.review strong{

    display:block;

    color:white;

    font-size:18px;

}

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

.contact{

    padding:140px 0;

    background:#0d0d0d;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:start;

}

.section-label{

    display:block;

    color:#C89D65;

    letter-spacing:.35em;

    text-transform:uppercase;

    margin-bottom:24px;

}

.contact h2{

    font-size:56px;

    line-height:1.1;

    margin-bottom:30px;

}

.contact-info>p{

    color:#bfbfbf;

    line-height:1.9;

    margin-bottom:50px;

}

.contact-list{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.contact-item{

    border-left:2px solid #C89D65;

    padding-left:22px;

}

.contact-item h4{

    margin-bottom:10px;

    color:white;

}

.contact-item a,
.contact-item p{

    color:#bfbfbf;

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:22px;

    padding:40px;

    border-radius:32px;

    background:#181818;

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

}

.contact-form input,
.contact-form textarea{

    width:100%;

    background:#242424;

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

    border-radius:16px;

    padding:18px 22px;

    color:white;

    font-size:16px;

    outline:none;

    transition:.3s;

}

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:#C89D65;

}

.contact-form textarea{

    resize:vertical;

}

.contact-form button{

    background:#C89D65;

    color:black;

    font-weight:700;

    padding:18px;

    border-radius:16px;

    transition:.35s;

}

.contact-form button:hover{

    background:white;

    transform:translateY(-4px);

}

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

.footer{

    background:#090909;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

    padding:80px 0;

}

.footer h3{

    font-size:30px;

    margin-bottom:20px;

}

.footer h4{

    margin-bottom:20px;

}

.footer p,
.footer li{

    color:#9f9f9f;

    line-height:2;

    list-style:none;

}

.footer ul{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.footer a{

    transition:.3s;

}

.footer a:hover{

    color:#C89D65;

}

.copyright{

    text-align:center;

    padding:26px;

    border-top:1px solid rgba(255,255,255,.08);

    color:#7a7a7a;

    font-size:15px;

}

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

@media(max-width:1100px){

    .project-grid,
    .features .grid,
    .review-grid{

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

    }

    .stats .container{

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

    }

}

@media(max-width:900px){

    .nav{

        display:none;

    }

    .burger{

        display:flex;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .hero h1{

        font-size:54px;

    }

    .cta-box{

        padding:60px 35px;

    }

    .cta-box h2{

        font-size:42px;

    }

}

@media(max-width:768px){

    .project-grid,
    .features .grid,
    .review-grid,
    .stats .container{

        grid-template-columns:1fr;

    }

    .hero{

        text-align:center;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        font-size:18px;

        margin-inline:auto;

    }

    .projects h2,
    .steps h2,
    .gallery h2,
    .features h2,
    .reviews h2,
    .contact h2{

        font-size:38px;

    }

    .gallery-track img{

        width:300px;

        height:220px;

    }

    .step{

        gap:20px;

    }

    .step span{

        width:44px;

        height:44px;

        font-size:14px;

    }

}

@media(max-width:480px){

    .header .container{

        height:70px;

    }

    .logo{

        font-size:20px;

    }

    .hero h1{

        font-size:34px;

    }

    .button{

        width:100%;

    }

    .cta-box{

        padding:40px 24px;

    }

}

@media (max-width:900px){

    .nav{

        position:fixed;
        top:70px;
        left:-100%;

        width:100%;
        height:calc(100vh - 70px);

        background:#111;

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

        gap:40px;

        transition:.35s;

    }

    .nav.active{

        left:0;

    }

}

.burger.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.burger.active span:nth-child(2){

    opacity:0;

}

.burger.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}