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



*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{


font-family:Poppins,sans-serif;


color:skyblue;


background:


linear-gradient(

120deg,

rgba(255,255,255,.85),

rgba(235,220,255,.8)

),


url("background.jpg");



background-size:cover;

background-position:center;

background-attachment:fixed;


}




header{


position:fixed;

top:0;

width:100%;


padding:25px 8%;


background:#ffffffaa;


backdrop-filter:blur(15px);


z-index:100;


}



nav{


display:flex;

justify-content:space-between;

align-items:center;


}



.logo{


font-size:32px;

font-weight:800;


}


.logo span{

color:#ff4d6d;

}




.menu a{


margin-left:30px;

text-decoration:none;

color:#333;

font-weight:500;


}




.hero{


min-height:100vh;


display:flex;


align-items:center;


justify-content:space-between;


padding:120px 8% 60px;


}




.hero-content{


max-width:650px;


}



.subtitle{


color:#ff4d6d;

letter-spacing:3px;

font-weight:600;


}




h1{


font-size:65px;

line-height:1.2;

margin:20px 0;


}



h1 span{


background:

linear-gradient(45deg,#ff4d6d,#7b2cff);


-webkit-background-clip:text;

color:transparent;


}




.description{


line-height:1.8;

color:#555;


}



.main-btn{


display:inline-block;

margin-top:30px;

padding:15px 35px;

background:#111;

color:white;

border-radius:40px;

text-decoration:none;


}







.designer-card{


width:380px;

height:470px;


background:#ffffffaa;


border-radius:40px;


padding:25px;


backdrop-filter:blur(20px);


box-shadow:0 30px 80px #0002;


position:relative;


animation:floating 5s infinite;


}





.profile-img{


width:230px;

height:230px;


border-radius:50%;


object-fit:cover;


display:block;


margin:40px auto 20px;


border:8px solid white;


}




.card-info{


background:white;

padding:20px;

border-radius:20px;

text-align:center;


}




.bubble{


position:absolute;


background:white;


padding:15px;

border-radius:50%;

font-size:25px;


box-shadow:0 10px 30px #0002;


animation:bubble 3s infinite;


}



.one{

top:40px;

left:20px;

}


.two{

right:20px;

top:180px;

}


.three{

bottom:80px;

left:40px;

}





@keyframes floating{


50%{

transform:translateY(-20px);

}

}




@keyframes bubble{


50%{

transform:translateY(-15px);

}

}







section{


padding:90px 8%;


}




.section-title{


text-align:center;

font-size:45px;

margin-bottom:40px;


}





.glass-box,
.contact-box{


background:#ffffffcc;

padding:40px;

border-radius:30px;

max-width:800px;

margin:auto;

line-height:2;

box-shadow:0 20px 50px #0002;


}





.skill-grid,
.project-grid{


display:grid;


grid-template-columns:repeat(auto-fit,minmax(220px,1fr));


gap:25px;


}





.skill-card,
.project{


background:white;


padding:35px;


border-radius:25px;


text-align:center;


box-shadow:0 15px 40px #0002;


transition:.3s;


}



.skill-card:hover,
.project:hover{


transform:translateY(-10px);


}




.contact-box{


text-align:center;


background:#111;


color:white;


}



.contact-box a{


display:block;


margin:15px;


padding:15px;


background:#ffffff15;


border-radius:15px;


color:white;


text-decoration:none;


}



.contact-box a:hover{


background:#ff4d6d;


}




footer{


padding:30px;

text-align:center;

color:#777;


}





@media(max-width:900px){


.hero{


flex-direction:column;

text-align:center;


}



.designer-card{


margin-top:50px;


}


h1{


font-size:42px;


}



.menu{


display:none;


}


}


/* CERTIFICATIONS */


.certificate-grid{


display:grid;

grid-template-columns:

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


gap:30px;


}




.certificate-card{


background:white;


padding:35px;


border-radius:30px;


box-shadow:

0 20px 50px rgba(0,0,0,.12);


transition:.4s;


position:relative;


overflow:hidden;


}




.certificate-card::before{


content:"";


position:absolute;


width:120px;

height:120px;


background:

linear-gradient(

45deg,

#ff4d6d,

#7b2cff

);


border-radius:50%;


right:-50px;

top:-50px;


opacity:.15;


}




.certificate-card:hover{


transform:translateY(-12px);


}




.certificate-icon{


font-size:45px;


margin-bottom:20px;


}




.certificate-card h3{


font-size:22px;


margin-bottom:15px;


color:#222;


}




.certificate-card p{


color:#666;


line-height:1.7;


}




.certificate-card span{


display:inline-block;


margin-top:20px;


padding:8px 20px;


background:#111;


color:white;


border-radius:20px;


font-size:14px;


}