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

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

:root{
    --primary-black:#0a0a0a;
    --secondary-black:#1a1a1a;
    --white:#ffffff;
    --light-gray:#f8f9fa;
    --text-gray:#666666;
    --text-light:rgba(255,255,255,0.8);
}

/* ================= BODY ================= */

body{
    font-family:'Inter',sans-serif;
    background:white;
    color:var(--text-gray);
    overflow-x:hidden;
    cursor:none;
}

.container{
    max-width:1400px;
    margin:0 auto;
    padding:0 24px;
}

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

.header{
    width:100%;
    background:rgba(50,50,50,0.6);
    backdrop-filter:blur(10px);

    padding:1.5rem 0;

    position:fixed;
    top:0;
    left:0;

    z-index:9999;
}

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

.logo{
    font-size:2.5rem;
    font-weight:900;
    color:white;
}

.nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.nav a{
    color:white;
    margin-left:1.5rem;

    text-decoration:none;

    font-size:.95rem;
    letter-spacing:1px;

    display:inline-block;

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

.nav a:hover{
    transform:scale(1.15);
}

.nav a.active{
    font-size:1.1rem;
     transform:scale(1.2);
    font-weight:700;
}

.logo img{
    height:60px;
    width:auto;
    display:block;
}

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

.hero-full{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.hero-bg-image{
    position:absolute;
    inset:0;

    background-image:url('../assets/images/hero.jpg');
    background-size:cover;
    background-position:center;

    filter:brightness(85%);
}

.hero-overlay-text{
    position:absolute;
    bottom:12%;
    left:8%;
    color:white;
}

.hero-overlay-text h1{
    font-size:clamp(3rem,8vw,7rem);
    font-weight:900;
}

.hero-overlay-text p{
    font-size:1.2rem;
    opacity:.85;
}
/* ================= HERO SLIDER ================= */

.hero-slider{
    position:relative;
    width:100%;

    /* START BELOW HEADER */
    margin-top:95px;

    /* KEEP FULL SCREEN LOOK */
    height:calc(100vh - 95px);

    overflow:hidden;
}

/* SLIDES */

.slide{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    opacity:0;
    visibility:hidden;

    transition:opacity 1s ease;

    transform:scale(1.05);
}

.slide.active{
    opacity:1;
    visibility:visible;
}

/* DARK OVERLAY */

.hero-overlay{
    position:absolute;
    inset:0;

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

    z-index:1;
}

/* CONTENT */

.hero-content{
    position:absolute;

    left:8%;
    bottom:12%;

    z-index:5;

    color:white;

    max-width:700px;
}

.hero-content h1{
    font-size:clamp(2.4rem, 4.5vw, 4.8rem);
    font-weight:700;

    line-height:0.95;

    margin-bottom:1rem;

    letter-spacing:-1px;

    max-width:700px;
}
.hero-content p{
    font-size:1.05rem;
    line-height:1.8;
    opacity:.9;
    max-width:650px;
}

/* PLUS BUTTON */

.next-slide{
    position:absolute;

    right:50px;
    bottom:50px;

    width:70px;
    height:70px;

    border:none;
    border-radius:50%;

    background:white;
    color:black;

    font-size:3rem;
    font-weight:300;

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

    z-index:20;

    transition:.3s ease;
}

.next-slide:hover{
    transform:scale(1.1) rotate(90deg);
}

/* MOBILE */

@media(max-width:768px){

    .hero-content{
        left:7%;
        right:7%;
        bottom:10%;
    }

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

    .hero-content p{
        font-size:1rem;
        line-height:1.7;
    }

    .next-slide{
        width:60px;
        height:60px;

        right:25px;
        bottom:25px;

        font-size:2.5rem;
    }
}
/* ================= ABOUT ================= */

.about-page{
    background:white;
    padding:8rem 0;
}

.about-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5rem;
    align-items:center;
}

.about-left h1{
    font-size:clamp(3rem,6vw,5rem);
    font-weight:900;
    color:black;
    margin-bottom:2rem;
}

.about-left p{
    font-size:1.1rem;
    line-height:1.8;
    color:#444;
    margin-bottom:1.5rem;
}

.about-right img{
    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
}

/* ================= ABOUT EXTRA ================= */

.about-extra{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5rem;
    margin-top:6rem;
    align-items:center;
}

.about-extra-left img{
    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
}

.about-extra-right p{
    font-size:1.1rem;
    line-height:1.8;
    color:#444;
    margin-bottom:1.5rem;
}

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

.services-section{
    background:white;
    padding:10rem 0;
}

.section-title{
    text-align:center;
    font-size:clamp(3rem,6vw,5rem);
    font-weight:800;
    color:black;

    margin-bottom:5rem;

    letter-spacing:-2px;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
}

.service-card{
    background:white;

    padding:4rem 2rem;

    text-align:center;

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

    transition:.4s ease;

    opacity:1 !important;
    visibility:visible !important;
}

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

.service-icon{
    width:120px;
    height:80px;

    background:black;
    color:white;

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

    margin:0 auto 2rem;

    font-size:2rem;
    font-weight:900;

    border-radius:8px;

    transition:.3s ease;
}

.service-card:hover .service-icon{
    transform:scale(1.05);
}

.service-card h3{
    font-size:1.5rem;
    margin-bottom:1rem;
    color:black;
}

.service-card p{
    color:#666;
    line-height:1.7;
}

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

.projects-section{
    background:#f7f7f7;
    padding:12rem 0 8rem;
}

.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:2rem;
}

.project-card{
    background:white;

    text-decoration:none;
    color:black;

    overflow:hidden;

    border-radius:12px;

    box-shadow:
    0 10px 40px rgba(0,0,0,.06);

    transition:.35s ease;
}

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

    box-shadow:
    0 20px 60px rgba(0,0,0,.12);
}
.project-card:hover{
    transform:translateY(-10px);
}

.project-media{
    height:320px;
    overflow:hidden;
}

.project-media img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .5s ease;
    
    transform:scale(1.08);

}

.project-card:hover img{
    transform:scale(1.05);
}

.project-content{
    padding:2rem;
}

.project-content h3{
    font-size:1.35rem;
    font-weight:700;

    color:black;

    margin-bottom:.8rem;
}

.project-content p{
    color:#666;
    line-height:1.8;
    font-size:.95rem;
}

.project-category{
    font-size:2rem;
    font-weight:700;
    color:black;

    margin-top:5rem;
    margin-bottom:2rem;

    padding-bottom:12px;

    border-bottom:1px solid #ddd;
}
/* ================= CONTACT ================= */
/* ================= CONTACT ================= */
 .contact-intro{ 
    background:white;
    padding:14rem 0 4rem;
    text-align:center; } 

.contact-intro-text{
     font-size:1.4rem; 
     color:#333; 
     max-width:800px; 
     margin:0 auto; 
     line-height:1.8; } 

.contact-map-info{ 
    background:white; 
    padding:4rem 0 8rem; } 

.contact-map-grid{ 
    display:grid; 
    grid-template-columns:1.5fr 1fr;
    gap:3rem; align-items:start; } 

.contact-map iframe{ width:100%; 
    height:450px; 
    border:none; } 

.contact-info{ 
    display:flex; 
    flex-direction:column; 
    gap:2rem; } 

.info-block h4{ 
    margin-bottom:.5rem; 
    color:black; } 

.info-block p{ 
    color:#555; 
    line-height:1.6; } 

.contact-talk{ 
    background:white; 
    padding:6rem 0; }

.contact-talk-grid{ 
    display:grid; 
    grid-template-columns:1fr 1fr; 
    gap:4rem; 
    align-items:start; } 

.talk-text h2{ 
    font-size:3rem; 
    color:black; 
    margin-bottom:1rem; }

  .talk-text p{ 
    color:#555; 
    line-height:1.8; } 

  .contact-form{ 
    display:flex; 
    flex-direction:column; 
    gap:2rem; } 

  .form-line{ 
    border-bottom:1px solid #ddd; 
    padding-bottom:.5rem; } 

  .contact-form input,
  .contact-form textarea{ 
    width:100%; 
    border:none; 
    outline:none; 
    background:transparent; 
    font-size:1.1rem; } 

  .contact-form textarea{ 
    min-height:120px; 
    resize:none; } 

  .btn-submit{ 
    margin-top:1rem; 
    padding:1rem 2rem; 
    background:black; 
    color:white; 
    border:none; 
    cursor:pointer; } 

  /* ================= FOOTER ================= */ 
  .footer{
    background:#0a0a0a;
    color:white; 
    padding:5rem 0 2rem; } 
    
  .footer-grid{ 
    display:flex; 
    justify-content:space-between; 
    align-items:flex-start; 
    gap:4rem; } 

  .footer-info{ 
    display:flex; 
    flex-direction:column; 
    gap:2.5rem; } 

  .footer-col h4{ 
    margin-bottom:.7rem; 
    font-size:1.1rem; } 

  .footer-col p{ 
    opacity:.7; 
    line-height:1.7; } 

  .footer-logo-wrap{ 
    text-align:right; } 

  .footer-logo{ 
    font-size:clamp(4rem,8vw,8rem); 
    font-weight:900; 
    line-height:1; 
    letter-spacing:-2px; }

   .footer-logo-text{ 
    margin-top:.5rem; 
    letter-spacing:6px; 
    text-transform:uppercase; 
    opacity:.7; }

    .footer-copy{ 
    text-align:center; 
    margin-top:3rem;
    opacity:.5; 
    font-size:.9rem; }

    .footer-logo img{
    width:220px;
    max-width:100%;
    height:auto;
    display:block;
}

/* ================= MODAL ================= */

.modal{
    position:fixed;
    inset:0;

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

    display:none;
    justify-content:center;
    align-items:center;

    z-index:999999;

    padding:20px;
}

.modal.open{
    display:flex;
}

.modal-content{
    background:white;
    color:black;

    width:600px;
    max-width:100%;

    padding:3rem;

    border-radius:12px;

    position:relative;
}

.close{
    position:absolute;
    top:15px;
    right:20px;

    font-size:2rem;
}

/* ================= CUSTOM CURSOR ================= */

/* HIDE DEFAULT CURSOR */
*{
    cursor:none !important;
}

/* CUSTOM + */
.custom-cursor{
    position:fixed;
    top:0;
    left:0;

    pointer-events:none;
    user-select:none;

    z-index:999999999;

    color:black;

    font-size:28px;
    font-weight:900;

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

    transition:
        color .2s ease,
        transform .2s ease;
}
.custom-cursor.white{
    color:white !important;
}


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

@media(max-width:900px){

    .about-grid,
    .about-extra,
    .contact-map-grid,
    .contact-talk-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        flex-direction:column;
        align-items:flex-start;
        gap:3rem;
    }

    .footer-logo-wrap{
        text-align:left;
    }

    .nav a{
        margin-top:.5rem;
    }
}

/* ================= PROJECT PAGE ================= */

.project-hero{
    position:relative;
    margin-top:95px;
    height:80vh;
    overflow:hidden;
}

.project-hero img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.project-header{
    padding:4rem 0 3rem;
    background:white;
}

.project-header h1{
    font-size:4rem;
    font-weight:800;
    color:black;
    margin-bottom:.8rem;
}

.project-header p{
    font-size:1.2rem;
    color:#777;
}


.project-details{
    padding:6rem 0;
}

.project-details p{
    font-size:1.1rem;
    line-height:1.9;
    color:#444;
}

.project-gallery{
    padding:0 0 8rem;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2rem;
}

.gallery-grid img{
    width:100%;
    height:450px;
    object-fit:cover;

    border-radius:12px;

    transition:.4s ease;
}

.gallery-grid img:hover{
    transform:scale(1.02);
}

.projects-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2.5rem;
}

.project-category{
    font-size:2rem;
    font-weight:700;
    color:black;
    margin-bottom:2rem;
    margin-top:4rem;
}

.project-info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;

    margin-bottom:5rem;
    padding-bottom:3rem;

    border-bottom:1px solid #ddd;
}

.info-item span{
    display:block;
    color:#888;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:.8rem;
    margin-bottom:.5rem;
}

.info-item h4{
    color:black;
    font-size:1.1rem;
    font-weight:600;
}

.project-text{
    max-width:900px;
}

.project-text p{
    font-size:1.15rem;
    line-height:2;
    color:#444;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2rem;
}

.gallery-grid img{
    width:100%;
    height:500px;
    object-fit:cover;

    border-radius:12px;

    transition:.4s ease;
}

.gallery-grid img:hover{
    transform:scale(1.02);
}
.back-projects{
    margin-top:110px;
    padding:20px 8%;
}

.back-projects a{
    color:black;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.back-projects a:hover{
    opacity:.6;
}
/* TABLET */
@media(max-width:900px){

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

}

/* MOBILE */
@media(max-width:600px){

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

}