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


:root{

--brown:#6B4F3A;
--gold:#C49A6C;
--blue:#AFC8D8;

}



body{

background:

radial-gradient(
circle at top right,
#314650,
transparent 35%
),

linear-gradient(
135deg,
#070707,
#1c1c1c
);

color:white;

overflow-x:hidden;

}



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


.navbar{

position:fixed;

top:0;

left:0;

width:100%;


padding:25px 10%;


display:flex;

justify-content:space-between;

align-items:center;


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


backdrop-filter:blur(20px);


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


z-index:1000;

}



.logo{

font-size:26px;

font-weight:800;

color:var(--blue);

letter-spacing:1px;

}



.navbar ul{

display:flex;

gap:35px;

list-style:none;

}



.navbar a{

color:white;

text-decoration:none;

transition:.3s;

}



.navbar a:hover,
.active{

color:var(--gold);

}





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


.hero{

min-height:100vh;


padding:120px 10%;


display:flex;


justify-content:space-between;


align-items:center;


gap:50px;

}



.hero-text{

max-width:600px;

animation:slideLeft 1s ease;

}



.hero-text span{

color:var(--blue);

letter-spacing:5px;

font-size:14px;

}



.hero-text h1{


font-size:75px;


line-height:1.1;


margin:25px 0;



background:

linear-gradient(
90deg,
white,
var(--blue)
);


-webkit-background-clip:text;


color:transparent;


}



.hero-text p{


color:#ccc;


line-height:2;


font-size:16px;


}








/* ================= PERSON AREA ================= */



.person-area{


width:520px;


height:600px;


position:relative;


display:flex;


justify-content:center;


align-items:flex-end;


}



.circle{


position:absolute;


width:430px;


height:430px;


border-radius:50%;


background:var(--blue);


opacity:.5;


filter:blur(80px);


animation:pulse 5s infinite;


}





.main-person{


height:600px;


width:auto;


object-fit:contain;


z-index:5;


position:relative;


animation:float 5s infinite;


}




.back-image{


position:absolute;


width:270px;


height:270px;


object-fit:cover;


border-radius:30px;


right:-70px;


top:120px;


opacity:.6;


z-index:2;


animation:float 6s infinite;


}







/* ================= SPEECH ================= */



.speech{


position:absolute;


top:70px;


right:-40px;


background:white;


color:#111;


padding:20px 30px;


border-radius:30px;


font-weight:600;


z-index:10;


animation:bubble 3s infinite;


box-shadow:0 20px 40px rgba(0,0,0,.3);


}







/* ================= FLOAT CARD ================= */



.floating-card{


position:absolute;


padding:20px 25px;


border-radius:25px;


background:

rgba(255,255,255,.1);


border:

1px solid rgba(255,255,255,.2);


backdrop-filter:blur(20px);


z-index:8;


}



.floating-card i{


font-size:35px;


color:var(--gold);


}



.floating-card h3{


margin-top:10px;


}



.card1{


left:-50px;


top:200px;


animation:float 4s infinite;


}



.card2{


right:-30px;


bottom:130px;


animation:float 5s infinite;


}








/* ================= JOURNEY ================= */


.goals{


padding:100px 10%;


text-align:center;


}



.goals h2,
.reflection h2{


font-size:50px;


margin-bottom:70px;


}





.goal-container{


display:flex;


justify-content:center;


align-items:center;


gap:30px;


}





.goal-card{


width:330px;


padding:40px 30px;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.2);


border-radius:35px;


backdrop-filter:blur(20px);


transition:.5s;


}




.goal-card:hover{


transform:translateY(-20px);


box-shadow:0 25px 60px rgba(175,200,216,.2);


}





.number{


font-size:80px;


font-weight:800;


color:rgba(175,200,216,.3);


}



.goal-card i{


font-size:45px;


color:var(--gold);


margin:20px;


}



.goal-card h3{


font-size:25px;


margin-bottom:15px;


}



.goal-card p{


color:#ccc;


line-height:1.8;


}



.line{


height:3px;


width:80px;


background:var(--gold);


}









/* ================= REFLECTION ================= */


.reflection{


padding:120px 10%;


}




.reflection-container{


display:grid;


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


gap:35px;


align-items:center;


}






.reflection-card{


padding:35px;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.2);


border-radius:35px;


backdrop-filter:blur(20px);


transition:.4s;


}



.reflection-card:hover{


transform:translateY(-15px);


}





.reflection-icon{


width:70px;


height:70px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


background:rgba(175,200,216,.2);


color:var(--gold);


font-size:30px;


margin-bottom:25px;


}



.reflection-card h3{


font-size:22px;


line-height:1.5;


margin-bottom:20px;


}



.reflection-card h4{


color:var(--blue);


margin-top:20px;


}



.reflection-card p,
.reflection-card li{


color:#ccc;


line-height:1.8;


}



.reflection-card ul{


padding-left:20px;


}








/* ================= REFLECTION PERSON ================= */


.reflection-character{


height:550px;


display:flex;


justify-content:center;


align-items:flex-end;


position:relative;


}



.reflection-character img{


height:520px;


object-fit:contain;


animation:float 5s infinite;


}







/* ================= ANIMATION ================= */



@keyframes float{


50%{

transform:translateY(-25px);

}


}




@keyframes pulse{


50%{

transform:scale(1.15);

}


}




@keyframes bubble{


50%{

transform:translateY(-15px);

}


}



@keyframes slideLeft{


from{

opacity:0;

transform:translateX(-80px);

}


to{

opacity:1;

transform:translateX(0);

}


}







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



@media(max-width:900px){


.navbar ul{

display:none;

}



.hero{


flex-direction:column;


text-align:center;


}



.hero-text h1{


font-size:45px;


}



.person-area{


width:350px;


height:450px;


}



.main-person{


height:450px;


}



.back-image{


width:180px;


height:180px;


right:-30px;


}



.goal-container{


flex-direction:column;


}



.line{


width:3px;


height:50px;


}



.reflection-container{


grid-template-columns:1fr;


}



}