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

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

body{
    overflow-x:hidden;
    min-height:100vh;
    background:
    linear-gradient(
    120deg,
    #fff8fb,
    #f7fbff,
    #fff5f9
    );
}

/* Floating Background */

.floating-bg{
    position:fixed;
    inset:0;
    z-index:-1;
    overflow:hidden;
}

.bubble{
    position:absolute;
    border-radius:50%;
    filter:blur(25px);
    opacity:.6;
}

.bubble1{
    width:220px;
    height:220px;
    background:#ffd4ea;
    top:15%;
    left:10%;
    animation:float 14s infinite ease-in-out;
}

.bubble2{
    width:280px;
    height:280px;
    background:#c8eeff;
    top:60%;
    right:10%;
    animation:float 18s infinite ease-in-out;
}

.bubble3{
    width:160px;
    height:160px;
    background:#ffe7b3;
    top:30%;
    right:20%;
    animation:float 12s infinite ease-in-out;
}

.bubble4{
    width:120px;
    height:120px;
    background:#d9c6ff;
    left:50%;
    top:10%;
    animation:float 10s infinite ease-in-out;
}

.bubble5{
    width:180px;
    height:180px;
    background:#c9fff4;
    bottom:10%;
    left:30%;
    animation:float 15s infinite ease-in-out;
}

@keyframes float{
    0%{
        transform:translateY(0px) translateX(0px);
    }
    50%{
        transform:translateY(-40px) translateX(30px);
    }
    100%{
        transform:translateY(0px) translateX(0px);
    }
}

/* Hero */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:80px;
}

.logo-circle{
    width:180px;
    height:180px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,#4fd1d9,#56cfe1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:70px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.12);
}

.main-title{
    margin-top:30px;
    font-size:4rem;
    font-weight:700;

    background:linear-gradient(
    90deg,
    #2ba9d8,
    #f082b6
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.sub-title{
    display:inline-block;
    margin-top:15px;

    background:#ffdbe9;
    color:#df5f92;

    padding:10px 30px;
    border-radius:50px;

    font-size:1.4rem;
    font-weight:600;
}

.description{
    max-width:750px;
    margin:35px auto;
    color:#777;
    line-height:1.9;
    font-size:1.1rem;
}

.badge-soft{
    background:white;
    padding:12px 20px;
    border-radius:50px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    margin:5px;
    display:inline-block;
}

.badge-soft.pink{
    color:#d96da1;
}

/* Cards */


.menu-grid{

    display:flex;
    flex-direction:column;
    gap:20px;

    height:100%;
    justify-content:center;
}

.menu-card{

    height:180px;

    display:flex;
    flex-direction:column;

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

    text-align:center;

    border-radius:25px;

    text-decoration:none;

    color:#333;

    transition:.3s;

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

.menu-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 20px 35px rgba(0,0,0,.12);
}

.menu-icon{

    font-size:2.5rem;

    margin-bottom:15px;
}

.menu-content h5{

    margin:0;

    font-weight:600;
}

.menu-content small{

    color:#666;

    font-size:.9rem;
}

.yellow{
    background:#fff1bf;
    box-shadow:0 15px 30px rgba(255,214,10,.2);
}

.purple{
    background:#e8dfff;
    box-shadow:0 15px 30px rgba(156,105,255,.2);
}

.pink{
    background:#ffd8e7;
    box-shadow:0 15px 30px rgba(255,111,164,.2);
}

.blue{
    background:#dff5ff;
    box-shadow:0 15px 30px rgba(0,170,255,.2);
}

@media(max-width:768px){

    .main-title{
        font-size:2.8rem;
    }

    .logo-circle{
        width:130px;
        height:130px;
        font-size:55px;
    }
}

.nav-link{
    position:relative;
    transition:.3s;
}

.nav-link::after{
    content:"";

    position:absolute;
    bottom:0;
    left:50%;

    width:0;
    height:3px;

    background:#64c9ff;

    border-radius:20px;

    transition:.3s;
}

.nav-link:hover{
    color:#0ea5e9;
}

.nav-link:hover::after{
    width:100%;
    left:0;
}