/*====================================================
   NOVELEA
   Premium Apple x Porsche Style
====================================================*/


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

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


html{
    scroll-behavior:smooth;
}


body{

    font-family:'Manrope', sans-serif;

    background:#ffffff;

    color:#171717;

    line-height:1.7;

    overflow-x:hidden;

}


:root{

    --black:#0f0f0f;

    --gold:#c8a96a;

    --gold-light:#e6d1a3;

    --gray:#666;

    --light:#f8f8f8;

    --border:#e9e9e9;

}



/*========================
TYPOGRAPHY
========================*/


h1,
h2,
h3{

    font-family:'Cormorant Garamond',serif;

    color:#111;

}


h2{

    font-size:55px;

    text-align:center;

    margin-bottom:25px;

}


h3{

    font-size:32px;

}


p{

    color:var(--gray);

}





/*========================
NAVBAR
========================*/


.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:22px 9%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(0,0,0,.05);

    z-index:999;

    transition:.4s;

}



.navbar.scrolled{

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}



/* LOGO */


.logo{

    display:flex;

    align-items:center;

    gap:14px;

    background:#111;

    padding:10px 20px;

    border-radius:18px;

}


.logo img{

    height:42px;

    width:auto;

}


.logo span{

    color:white;

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    font-weight:700;

    letter-spacing:1px;

}



/* MENU */


.nav-links{

    display:flex;

    gap:40px;

    list-style:none;

}


.nav-links a{

    text-decoration:none;

    color:#222;

    font-weight:600;

    transition:.3s;

}


.nav-links a:hover{

    color:var(--gold);

}



.nav-btn{

    background:#111;

    color:white;

    padding:15px 32px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}


.nav-btn:hover{

    background:var(--gold);

    transform:translateY(-3px);

}



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


.hero{

    min-height:100vh;

    padding:170px 9% 100px;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}



.badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:#f8f8f8;

    border:1px solid var(--border);

    color:var(--gold);

    font-weight:700;

    margin-bottom:25px;

}



.hero h1{

    font-size:80px;

    line-height:1.05;

    margin-bottom:30px;

}



.hero p{

    font-size:20px;

    max-width:600px;

    margin-bottom:40px;

}



.hero-buttons{

    display:flex;

    gap:20px;

}



/* BUTTONS */


.primary-btn{

    background:#111;

    color:white;

    padding:18px 40px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}



.primary-btn:hover{

    background:var(--gold);

    transform:translateY(-5px);

}



.secondary-btn{

    border:2px solid #ddd;

    color:#111;

    padding:18px 40px;

    border-radius:50px;

    text-decoration:none;

    transition:.35s;

}


.secondary-btn:hover{

    border-color:var(--gold);

    color:var(--gold);

}



/* HERO IMAGE */


.hero-image img{

    width:100%;

    border-radius:35px;

    box-shadow:0 40px 90px rgba(0,0,0,.15);

}





/*========================
USP SECTION
========================*/


.stats{

    padding:60px 9%;

    display:flex;

    justify-content:center;

    gap:40px;

}



.stats div{

    width:260px;

    padding:45px;

    text-align:center;

    border-radius:25px;

    background:white;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    transition:.3s;

}


.stats div:hover{

    transform:translateY(-10px);

}



.stats h2{

    color:var(--gold);

    font-size:60px;

    margin:0;

}




/*========================
SECTIONS
========================*/


section{

    padding:120px 9%;

}



.section-text{

    max-width:700px;

    text-align:center;

    margin:0 auto 70px;

}



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


.cards{

    display:grid;

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

    gap:35px;

}



.card{

    padding:45px;

    background:white;

    border:1px solid var(--border);

    border-radius:30px;

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

    transition:.4s;

}



.card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}





/*========================
PORTFOLIO
========================*/


.portfolio-grid{

    display:grid;

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

    gap:30px;

}



.portfolio-item{

    height:420px;

    border-radius:30px;

    background-size:cover;

    background-position:center;

    transition:.4s;

}



.portfolio-item:hover{

    transform:translateY(-12px);

}





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


.about{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}


.about-image img{

    border-radius:35px;

    box-shadow:0 30px 80px rgba(0,0,0,.15);

}


.about-text h2{

    text-align:left;

}





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


.cta{

    margin:80px 9%;

    border-radius:40px;

    padding:90px 40px;

    text-align:center;

    background:#111;

}



.cta h2{

    color:white;

}



.cta p{

    color:#bbb;

    margin-bottom:40px;

}





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


#contact{

    background:#fafafa;

    text-align:center;

}



form{

    max-width:700px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:20px;

}



input,
textarea{

    padding:20px;

    border-radius:18px;

    border:1px solid #ddd;

    font-family:'Manrope';

}


textarea{

    height:180px;

}


button{

    background:#111;

    color:white;

    padding:20px;

    border:none;

    border-radius:50px;

    font-weight:700;

    cursor:pointer;

}


button:hover{

    background:var(--gold);

}





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


footer{

    background:#111;

    text-align:center;

    padding:70px 9%;

    color:white;

}


footer img{

    height:55px;

    margin-bottom:25px;

}


footer p{

    color:#aaa;

}





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


@media(max-width:1000px){


.hero{

    grid-template-columns:1fr;

    text-align:center;

}


.hero h1{

    font-size:60px;

}


.hero-buttons{

    justify-content:center;

}


.cards,
.portfolio-grid,
.about{

    grid-template-columns:1fr;

}


.nav-links{

    display:none;

}


}



@media(max-width:600px){


.hero h1{

    font-size:42px;

}


h2{

    font-size:40px;

}


.logo span{

    font-size:25px;

}


.stats{

    flex-direction:column;

    align-items:center;

}


}