body{

margin:0;
font-family:Arial;

background-image:url("blossam.png");
background-repeat:repeat;
background-size:500px;

}

.navbar{

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

padding:20px 40px;

background:white;

box-shadow:0 2px 10px rgba(0,0,0,0.1);

}

.navbar ul{

display:flex;
list-style:none;
gap:20px;

}

.navbar a{

text-decoration:none;
color:#d63384;
font-weight:bold;

}

.logo{

color:#d63384;

}

.hero{

height:60vh;

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

}

.hero-card{

background:white;

padding:50px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,0.1);

text-align:center;

}

.card{

background:white;

width:80%;

margin:40px auto;

padding:40px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,0.1);

}

.projects{

display:flex;
gap:20px;

}

.project-box{

background:#ffe6f0;

padding:20px;

border-radius:10px;

flex:1;

}

h1,h2{

color:#d63384;

}

footer{

text-align:center;

background:white;

padding:20px;

margin-top:40px;

}

.featured-buttons{

display:flex;
gap:25px;
flex-wrap:wrap;
margin-top:20px;

}

.feature-btn{

display:inline-block;

padding:14px 28px;

background:white;

color:#d63384;

border:2px solid #d63384;

border-radius:12px;

text-decoration:none;

font-weight:600;

}

.feature-btn:hover{

background:#d63384;

color:white;

}


/* MOBILE RESPONSIVE DESIGN */

@media (max-width: 768px){

/* Navbar */
.navbar{
flex-direction:column;
gap:10px;
padding:15px;
text-align:center;
}

.navbar ul{
flex-direction:column;
gap:10px;
padding:0;
}

/* Hero */
.hero{
height:auto;
padding:40px 20px;
}

.hero-card{
padding:25px;
}

/* Sections */
.card{
width:90%;
padding:20px;
margin:20px auto;
}

/* Projects */
.projects{
flex-direction:column;
}

/* Buttons */
.featured-buttons{
justify-content:center;
}

.feature-btn{
width:100%;
text-align:center;
}

}

h1{
font-size:28px;
}

h2{
font-size:22px;
}

p{
font-size:14px;
line-height:1.6;
}

.project-box{
word-wrap:break-word;
}