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


html {
    scroll-behavior: smooth;
}


body {

    color: #4b3045;
    overflow-x: hidden;

}

/* Floral Background */

.background {

    position: fixed;

    width: 100%;
    height: 100%;

    z-index: -1;


    background:

    radial-gradient(circle at 10% 20%, #ffc8dd 0%, transparent 25%),
    radial-gradient(circle at 90% 30%, #cdb4db 0%, transparent 25%),
    radial-gradient(circle at 50% 90%, #bde0fe 0%, transparent 30%),

    linear-gradient(
        135deg,
        #fff0f5,
        #f8edeb,
        #e2ece9
    );

}

/* Flower Decorations */

.background::before,
.background::after {

    content: "🌸";
    position: absolute;
    font-size: 80px;
    opacity: .4;
    animation: floatFlower 5s infinite ease-in-out;

}


.background::before {

    top: 10%;
    left: 8%;

}


.background::after {

    bottom: 10%;
    right: 10%;

    content: "🌷";

}

@keyframes floatFlower {
    50% {
        transform: translateY(-25px) rotate(10deg);
    }
}

header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 30px 8%;

}

.logo {

    font-family: "Playfair Display";

    font-size: 30px;

    color: #a64d79;

    letter-spacing: 3px;

}

nav a {

    text-decoration: none;

    color: #6d435a;

    margin-left: 25px;

    font-weight: 500;

    transition: .3s;

}

nav a:hover {

    color: #d63384;

}

 
/* Hero */

.hero {

    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

.glass-card,
.about-card,
.card {


    background:

    rgba(255,255,255,.45);


    backdrop-filter: blur(15px);


    border:

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


    border-radius: 35px;


    box-shadow:

    0 20px 50px rgba(166,77,121,.15);

}




.glass-card {

    width: 550px;

    padding: 50px;

    text-align: center;

    animation: appear 1s ease;

}



@keyframes appear {

    from {

        opacity:0;

        transform:translateY(50px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}

.profile-img {
    width:160px;
    height:160px;
    object-fit:cover;
    border-radius:50%;
    border:6px solid white;
    box-shadow:
    0 10px 30px rgba(214,51,132,.3);
    margin-bottom:25px;

}

.experience-img{
    width: 100%;
    max-width: 220px;
    height: 150px;
    object-fit: cover;
    border-radius: 15px;
    display: block;
    margin: 0 auto 15px;
}

.Volleyball-img {
    width: 100%;
    max-width: 220px;
    height: 120px;
    object-fit: cover;
    border-radius: 1px;
    display: block;
    margin: 0 auto 15px;
}

.youth-img {
    width: 100%;
    max-width: 220px;
    height: 120px;
    object-fit: cover;
    border-radius: 1px;
    display: block;
    margin: 0 auto 15px;
}


h1 {

    font-family:"Playfair Display";

    font-size:42px;

}

span {

    color:#d63384;

}


p {

    line-height:1.8;

    color:#66425b;

}

button {


    margin-top:30px;


    padding:15px 40px;


    border:none;


    border-radius:50px;


    background:

    linear-gradient(
        45deg,
        #ffafcc,
        #cdb4db
    );


    color:white;


    font-size:16px;


    cursor:pointer;


    transition:.4s;

}

button:hover {

    transform:scale(1.1);

    box-shadow:

    0 10px 25px rgba(214,51,132,.3);

}

.section {

    padding:80px 8%;

    text-align:center;

}

.section h2 {

    font-family:"Playfair Display";

    font-size:38px;

    color:#a64d79;

    margin-bottom:35px;

}

.about-card {

    max-width:700px;

    margin:auto;

    padding:40px;

}

.cards {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

}

.card {

    width:280px;

    padding:35px;

    transition:.4s;

}

.card:hover {

    transform:

    translateY(-15px);

    background:

    rgba(255,255,255,.7);

}

.card h3 {

    color:#d63384;

    margin-bottom:15px;

}

@media(max-width:768px){


header {

    flex-direction:column;

    gap:20px;

}


nav {

    display:none;

}


.glass-card {

    width:90%;

}


h1 {

    font-size:32px;

}


}