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

:root{
    --pink:#ff7eb8;
    --pink-dark:#ff4f9f;
    --purple:#b69cff;
    --cream:#fff9fc;
    --text:#333;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ================= HEADER ================= */
.header{
    position:fixed;
    top:15px;
    left:50%;
    transform:translateX(-50%);

    width:92%;

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

    padding:12px 6%;

    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.3);

    border-radius:25px;

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

    z-index:1000;
}

.header::before{
    content:"";
    position:absolute;
    inset:0;

    border-radius:25px;

    background:linear-gradient(
        135deg,
        rgba(255,126,184,0.2),
        rgba(215,196,255,0.2)
    );

    z-index:-1;
}
/* LOGO */
.logo img{
    height:100px;
    width:auto;
}

.logo img:hover{
    transform:scale(1.08);
    filter:drop-shadow(0 5px 10px rgba(255,95,162,0.3));
}

/* NAV */
.nav-menu{
    display:flex;
    gap:30px;
}

.nav-menu a{
    color:#333;
    font-weight:500;
    transition:0.3s;
    text-decoration: none;
}

.nav-menu a:hover{
    color:#ff5fa2;
    text-shadow:0 0 10px rgba(255,95,162,0.3);
}

/* HAMBURGER */
.hamburger{
    display:none;
    font-size:2rem;
    cursor:pointer;
    color:#ff5fa2;
}



html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--cream);
    color:var(--text);
    overflow-x:hidden;
}

/* SECTIONS */

.hero{
    min-height:100vh;
}

section{
    padding:100px 20%;
    min-height:80vh;
}

/* HERO */

.hero{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;

    background:
    linear-gradient(
    135deg,
    #fff0f8,
    #f7f0ff
    );
}

.hero-content{
    max-width:900px;
}

.subtitle{
    color:var(--pink-dark);
    font-weight:600;
    letter-spacing:3px;
    margin-bottom:20px;
}

.hero-title{
    font-family:'Great Vibes',cursive;
    font-size:8rem;
    color:var(--pink-dark);
    line-height:1;
}

.hero-description{
    max-width:650px;
    margin:25px auto;
    line-height:1.8;
    color:#666;
}

.hero-btn{
    display:inline-block;
    margin-top:20px;
    padding:16px 40px;

    text-decoration:none;
    color:white;

    border-radius:50px;

    background:
    linear-gradient(
    135deg,
    var(--pink),
    var(--pink-dark)
    );

    transition:.3s;
}

.hero-btn:hover{
    transform:translateY(-5px);
}

/* SECTION HEADER */

.section-header{
    text-align:center;
    margin-bottom:70px;
}

.section-header p{
    color:var(--pink-dark);
    letter-spacing:2px;
}

.section-header h2{
    font-family:'Playfair Display',serif;
    font-size:3.5rem;
}

/* SERVICES */

.services{
    background:white;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.card{
    padding:40px;

    border-radius:25px;

    background:
    rgba(255,255,255,0.7);

    backdrop-filter:blur(20px);

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    transition:.4s;
}

.card:hover{
    transform:translateY(-10px);
}

.card h3{
    margin-bottom:15px;
    color:var(--pink-dark);
    text-align: center;
}

/* ABOUT */

.about{
    display:flex;
    align-items:center;
    gap:80px;

    background:#faf5ff;
}

.about-image{
    flex:1;
    display:flex;
    justify-content:center;
}

.about-image img{
    width:80%;
    max-width:400px;

    border-radius:30px;

    padding:8px;

    background:linear-gradient(
        135deg,
        #ff8ec7,
        #d7c4ff,
        #ffb6d9
    );

    box-shadow:
        0 15px 35px rgba(255,126,184,0.25),
        0 5px 15px rgba(0,0,0,0.08);

    transition:0.4s ease;
}

.about-image img:hover{
    transform:translateY(-8px) scale(1.02);

    box-shadow:
        0 25px 50px rgba(255,126,184,0.35),
        0 10px 25px rgba(0,0,0,0.12);
}

.about-content{
    flex:1;
}

.about-content p:first-child{
    color:var(--pink-dark);
    letter-spacing:2px;
}

.about-content h2{
    font-size:3.5rem;
    margin:20px 0;
    font-family:'Playfair Display',serif;
}

.about-content p:last-child{
    line-height:2;
}

.about-header{
    display:flex;
    align-items:center;
    gap:20px;
}

.about-header img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;

    border:3px solid #ff7eb8;
    box-shadow:0 10px 20px rgba(255,126,184,0.25);
}

.about-header h2{
    font-family:'Playfair Display',serif;
    font-size:3rem;
    margin:0;
}

/* WHY */

.why{
    background:white;
    padding-bottom:0px; /* reduce extra space */
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-bottom: 0;
}

.why-card{
    padding:25px 40px;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        #fff4fa,
        #f7f2ff
    );

    text-align:center;

    transition:.3s;

    min-height:120px;

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

    box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

.why-card:hover{
    transform:scale(1.04);
}

/* CONTACT */

/* ================= CONTACT ================= */

.contact{
    background:linear-gradient(135deg, #ffffff, #f7f0ff);
    padding:100px 10%;
    text-align:center;
}

/* floating glass container */
.contact-box{
    max-width:850px;
    margin:auto;

    padding:50px 40px;

    position:relative;
    border-radius:30px;

    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,0.35);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.12);

    overflow:hidden;
    transition:0.4s ease;
}

/* liquid glow layer */
.contact-box::before{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,126,184,0.15),
        rgba(182,156,255,0.15)
    );

    z-index:-1;
}

/* hover float */
.contact-box:hover{
    transform:translateY(-10px);
    box-shadow:
        0 35px 80px rgba(0,0,0,0.18);
}

/* icon */
.contact-icon{
    width:85px;
    margin-bottom:20px;
    filter:drop-shadow(0 10px 15px rgba(255,79,159,0.25));
}

/* text */
.contact-text{
    font-size:1rem;
    line-height:1.8;
    color:#444;
    margin-bottom:20px;
}

/* wave */
.contact-wave{
    font-size:3rem;
    color:var(--pink-dark);
    margin:15px 0;
}

/* title */
.contact-title{
    font-size:3rem;
    font-family:'Playfair Display', serif;
    font-weight:700;
    color:var(--pink-dark);
    margin-bottom:10px;
}

/* subtitle */
.contact-subtitle{
    font-size:1rem;
    color:#555;
    margin-bottom:35px;
}

/* buttons */
.contact-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

/* liquid buttons */
.btn{
    padding:12px 28px;
    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--pink),
        var(--pink-dark)
    );

    color:white;
    text-decoration:none;
    font-weight:600;

    box-shadow:0 10px 25px rgba(255,79,159,0.25);

    transition:0.3s ease;
}

.btn:hover{
    transform:translateY(-5px) scale(1.02);
    box-shadow:0 15px 35px rgba(255,79,159,0.35);
}

@media (max-width:768px){

    /* section spacing */
    .contact{
        padding:80px 20px;
    }

    /* glass box */
    .contact-box{
        padding:30px 20px;
        border-radius:20px;
    }

    /* icon smaller */
    .contact-icon{
        width:70px;
    }

    /* title resize */
    .contact-title{
        font-size:2.2rem;
        line-height:1.2;
    }

    /* subtitle */
    .contact-subtitle{
        font-size:0.95rem;
    }

    /* text */
    .contact-text{
        font-size:0.95rem;
        line-height:1.6;
    }

    /* buttons stack nicely */
    .contact-buttons{
        flex-direction:column;
        gap:15px;
    }

    .btn{
        width:100%;
        text-align:center;
        padding:14px 20px;
    }

    /* wave smaller */
    .contact-wave{
        font-size:2.2rem;
    }
}
/* MOBILE */

@media(max-width:768px){

    .hero-title{
        font-size:4.5rem;
    }

    .services-grid,
    .why-grid{
        grid-template-columns:1fr;
    }

    .about{
        flex-direction:column;
    }

    .section-header h2{
        font-size:2.5rem;
    }
}

.title-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
}

.title-wrapper span{
    font-size:2rem;
    color:#ff7eb8;
}

@media (max-width:768px){

    .about{
        flex-direction:column;
    }

    .about-image{
        order:2;
        margin-top:0px;
    }

    .about-content{
        order:1;
    }

    .about-image img{
        width:80%;
        max-width:250px;
        padding:4px;
        border-radius:20px;
    }

    /* 👇 ADD THIS */
    .about-content p:last-of-type{
        margin-bottom:0;
    }

    .about-content img{
        margin-top:5px;
    }

    
}

@media (max-width:768px){

    .hamburger{
        display:block;
    }

    .nav-menu{
        position:absolute;
        top:80px;
        right:0;

        background:white;
        flex-direction:column;

        width:200px;
        padding:20px;

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

        display:none; /* hidden by default */
    }

    .nav-menu.active{
        display:flex;
    }
}

.card-badge{
    position:absolute;
    top:-12px;
    left:20px;

    padding:6px 16px;

    font-size:0.75rem;
    font-weight:600;

    color:white;

    background:linear-gradient(
        135deg,
        #ff7eb8,
        #c084fc
    );

    border-radius:50px;

    box-shadow:0 10px 20px rgba(0,0,0,0.15);
}

/* ================= PROJECTS ================= */

.projects{
    background:linear-gradient(135deg, #fff0f8, #f7f0ff);
    padding:100px 10%;
}

/* container */
.projects-container{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

/* glass card (matches your contact + services style) */
.projects .card{
    position:relative;

    padding:25px;

    border-radius:25px;

    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,0.3);

    box-shadow:0 15px 40px rgba(0,0,0,0.1);

    transition:0.4s ease;
    overflow:hidden;
}

/* hover float */
.projects .card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(255,79,159,0.15);
}

/* title */
.projects .card h3{
    margin-top:15px;
    margin-bottom:10px;

    color:var(--pink-dark);

    font-family:'Playfair Display', serif;
}

/* text */
.projects .card p{
    color:#444;
    line-height:1.6;
}

/* slideshow */
.slideshow{
    position:relative;
    width:100%;
    aspect-ratio:16/9;

    overflow:hidden;
    border-radius:18px;

    background:rgba(255,255,255,0.2);
}

/* images */
.slideshow img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;
    transition:1s ease;
}

/* active image */
.slideshow img.active{
    opacity:1;
    z-index:10;
}

/* responsive */
@media(max-width:768px){
    .projects-container{
        grid-template-columns:1fr;
    }
}