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


:root{
    --brown:#6B4F3A;
    --gold:#B08D57;
    --soft-blue:#AFC8D8;
    --cream:#F8F5F0;
    --white:#FFFFFF;
    --text:#4B3A2F;
}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}


html{
    scroll-behavior:smooth;
}


body{

    background:linear-gradient(
        135deg,
        #F8F5F0,
        #FFFFFF,
        #EEF5F8
    );

    color:var(--text);

    overflow-x:hidden;

    position:relative;

}



/* =======================
BACKGROUND EFFECTS
======================= */


.background-blur{

    position:fixed;

    border-radius:50%;

    filter:blur(140px);

    z-index:-1;

}


.blur1{

    width:400px;

    height:400px;

    background:var(--gold);

    top:-120px;

    left:-120px;

    opacity:.20;

}


.blur2{

    width:450px;

    height:450px;

    background:var(--soft-blue);

    bottom:-150px;

    right:-120px;

    opacity:.25;

}





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


.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:18px 10%;


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

    backdrop-filter:blur(20px);


    border-bottom:
    1px solid rgba(176,141,87,.15);


    z-index:999;

}



.logo{

    font-size:22px;

    font-weight:700;

    color:var(--brown);

}



.nav-links{

    list-style:none;

    display:flex;

    gap:35px;

}



.nav-links a{

    text-decoration:none;

    color:#5f5145;

    font-weight:500;

    transition:.3s;

}



.nav-links a:hover{

    color:var(--gold);

}



.nav-links a.active{

    color:var(--gold);

    font-weight:700;

    position:relative;

}



.nav-links a.active::after{

    content:'';

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    background:var(--gold);

    border-radius:10px;

}





/* =======================
BACK TO HOME BUTTON
======================= */


.back-home{

    position:fixed;

    top:100px;

    left:40px;


    display:flex;

    align-items:center;

    gap:10px;


    padding:12px 24px;


    background:linear-gradient(
        135deg,
        var(--brown),
        var(--gold)
    );


    color:white;


    text-decoration:none;


    font-size:14px;


    font-weight:600;


    border-radius:50px;


    box-shadow:

    0 10px 25px rgba(0,0,0,.15);


    z-index:1000;


    transition:.4s ease;

}



.back-home i{

    font-size:15px;

}



.back-home:hover{

    transform:translateX(-8px);


    box-shadow:

    0 15px 35px rgba(176,141,87,.35);

}





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


.hero{

    min-height:100vh;


    display:flex;

    align-items:center;

    justify-content:center;


    gap:80px;


    flex-wrap:wrap;


    padding:150px 10% 80px;

}




.hero-image img{


    width:360px;

    height:360px;


    object-fit:cover;



    border-radius:30px;



    border:

    6px solid rgba(255,255,255,.8);



    box-shadow:

    0 15px 40px rgba(176,141,87,.25),

    0 0 80px rgba(175,200,216,.2);



    animation:floating 4s ease-in-out infinite;

}



@keyframes floating{


    50%{

        transform:translateY(-15px);

    }

}





.hero-content{

    max-width:650px;

}



.badge{


    display:inline-block;


    background:linear-gradient(

        90deg,

        var(--gold),

        var(--brown)

    );


    color:white;


    font-weight:600;


    padding:12px 24px;


    border-radius:50px;


    margin-bottom:25px;

}



.hero-content h1{


    font-size:60px;


    line-height:1.1;


    color:var(--brown);


    margin-bottom:25px;

}



.hero-content p{


    font-size:18px;


    line-height:1.9;


    color:#66584b;

}





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


.intro{

    padding:30px 10%;

}



.intro-card{


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


    backdrop-filter:blur(20px);


    border-radius:30px;


    padding:50px;


    text-align:center;



    border:

    1px solid rgba(176,141,87,.15);



    box-shadow:

    0 10px 30px rgba(0,0,0,.05);

}



.intro-card i{


    font-size:55px;


    color:var(--gold);


    margin-bottom:20px;

}



.intro-card h2{


    color:var(--brown);


    margin-bottom:15px;

}



.intro-card p{


    line-height:1.8;


    color:#5f5145;

}





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


.cards{


    padding:80px 10%;


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(320px,1fr));


    gap:30px;

}



.card{


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


    backdrop-filter:blur(20px);


    border-radius:25px;


    padding:35px;


    border:

    1px solid rgba(176,141,87,.15);



    transition:.4s ease;



    box-shadow:

    0 10px 25px rgba(0,0,0,.05);

}



.card:hover{


    transform:translateY(-12px);



    box-shadow:

    0 20px 45px rgba(176,141,87,.20);

}



.card i{


    font-size:40px;


    color:var(--gold);


    margin-bottom:20px;

}



.card h2{


    color:var(--brown);


    margin-bottom:15px;


    font-size:24px;

}



.card p{


    color:#5f5145;


    line-height:1.9;

}





/* =======================
QUOTE
======================= */


.quote-section{


    padding:120px 10%;


    text-align:center;

}



.quote-section h2{


    font-size:48px;


    font-weight:700;



    background:linear-gradient(

        to right,

        var(--brown),

        var(--gold),

        var(--soft-blue)

    );



    background-clip:text;


    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;

}





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


@media(max-width:992px){


    .hero{

        text-align:center;

    }


    .hero-content h1{

        font-size:50px;

    }

}



@media(max-width:768px){


    .navbar{


        flex-direction:column;


        gap:15px;

    }



    .nav-links{


        flex-wrap:wrap;


        justify-content:center;


        gap:15px;

    }



    .back-home{

        top:140px;

        left:20px;

        font-size:12px;

        padding:10px 18px;

    }



    .hero{


        padding:180px 7% 80px;

    }



    .hero-image img{


        width:280px;


        height:280px;

    }



    .hero-content h1{


        font-size:38px;

    }



    .hero-content p{


        font-size:16px;

    }



    .quote-section h2{


        font-size:28px;

    }



    .cards{


        grid-template-columns:1fr;

    }

}