/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=Great+Vibes&display=swap');

:root{

    /* COLORS */

    --primary:#efb5c8;
    --primary-dark:#e79ab5;
    --white:#ffffff;
    --black:#111111;
    --text:#f8f8f8;
    --overlay:rgba(0,0,0,.45);

    /* FONTS */

    --heading:'Cormorant Garamond', serif;
    --body:'Manrope', sans-serif;
    --logo:'Great Vibes', cursive;

    /* SIZES */

    --section-padding:7rem 10%;
    --transition:.35s ease;
}

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--body);
    background: #4f4a4a;
    color:var(--white);
}

body.menu-open{
    overflow:hidden;
}


/*  PAGE WRAPPER */

.page-content{

    min-height:100vh;

    transition:
        filter .45s ease,
        transform .45s ease,
        opacity .45s ease;

}

/* Blur page when menu is open */

body.menu-open .page-content{

    filter:blur(10px);

    transform:scale(.985);

    pointer-events:none;
    user-select:none;

}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button{
    border:none;
    background:none;
    cursor:pointer;
}

.section{
    padding:var(--section-padding);
}

/* NAVIGATION */

nav{

    position:absolute;
    top:0;
    left:0;

    width:100%;

    padding:2.5rem 7%;

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

    z-index:1000;

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        padding .35s ease,
        box-shadow .35s ease,
        transform .35s ease;

}

nav.scrolled{

    position:fixed;

    padding:1rem 7%;

}

.nav-hidden {
  transform: translateY(-100%);
}


/* LOGO */

.logo-text{

    display:flex;
    align-items:flex-end;
    gap:.35rem;

}

.logo-small{

    font-family:var(--heading);
    color:white;
    font-size:1.3rem;
    margin-bottom:.4rem;

}

.logo-big{

    font-family:var(--logo);
    font-size:3.4rem;
    color:var(--primary);
    line-height:1;

}

/* MENU BUTTON */

.menu-btn{

    width:58px;
    height:58px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(16px);

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

    cursor:pointer;

    transition:.35s;
    

}

.menu-btn,
.menu-close {
    border: none;
    background: rgba(255,255,255,.12);
    padding: 0;
}

.menu-btn:hover{

    background:var(--primary);

    transform:scale(1.08);

}

.menu-btn i{

    font-size:2rem;
    color:white;

}

/* MOBILE MENU*/

.mobile-menu{

    position:fixed;

    top:0;
    right:0;

    width:32%;
    min-width:360px;
    max-width:450px;

    height:100vh;

    background:rgba(18,18,18,.82);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-left:1px solid rgba(255,255,255,.08);

    display:flex;
    flex-direction:column;
    justify-content:space-between;


    overflow-y:auto;
    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

    padding:3rem;

    transform:translateX(100%);
    transition:.55s cubic-bezier(.77,0,.18,1);

    z-index:2000;

    box-shadow:-30px 0 70px rgba(0,0,0,.45);
    scrollbar-width:none;

}

.mobile-menu::-webkit-scrollbar{
    width:0;
}


.mobile-menu::before{

    content:"";

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(239,181,200,.08),
    transparent 45%);

    pointer-events:none;

}

.mobile-menu.active{

    transform:translateX(0);

}

.menu-header{
    position:sticky;
    top:0;

    display:flex;
    justify-content:flex-end;
    align-items:center;
   
    z-index:10;
   margin-bottom:1.5rem;
    padding-bottom:1rem;
}

.menu-close{

    width:52px;
    height:52px;

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

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.menu-close i{

    color:white;
    font-size:2rem;

    cursor:pointer;

    transition:.35s;
 
}

.menu-close i:hover{

    color:var(--primary);

    transform:rotate(90deg);

}

.menu-links{

    flex:1;

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1.2rem;
transform:translateY(-35px);
   margin:0;

}

.menu-links a{

    display:flex;
   align-items:center;
    justify-content:flex-start;
    width:100%;
    gap:1rem;

    font-family:var(--heading);
    font-size:1.8rem;

    color:white;

    position:relative;

    opacity:0;

    transform:translateX(40px);

    padding:.5rem 1rem;

    border-radius:999px;
    transition:
        color .35s,
        background .35s,
        transform .35s,
        opacity .35s;

}

.menu-links span{

    width:28px;

    font-family:var(--body);

    font-size:.72rem;

    letter-spacing:3px;

    color:var(--primary);

}

.menu-links a:hover{

    color:var(--primary);

    transform:translateX(10px);

    background:rgba(239,181,200,.06);

}


/* ACTIVE PAGE */

.menu-links a.active{

    color:var(--primary);

    background:rgba(239,181,200,.08);

}

.mobile-menu.active a{

    opacity:1;

    transform:translateX(0);

}

.mobile-menu.active a:nth-child(1){transition-delay:.08s;}
.mobile-menu.active a:nth-child(2){transition-delay:.16s;}
.mobile-menu.active a:nth-child(3){transition-delay:.24s;}
.mobile-menu.active a:nth-child(4){transition-delay:.32s;}
.mobile-menu.active a:nth-child(5){transition-delay:.40s;}
.mobile-menu.active a:nth-child(6){transition-delay:.48s;}

.menu-footer{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:2rem;

}

.menu-socials{

    display:flex;

    gap:1.5rem;

    font-size:1.3rem;

}

.menu-socials a{

    width:42px;
    height:42px;

    border-radius:50%;

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

    border:1px solid rgba(255,255,255,.15);

    transition:.35s;

}

.menu-socials a:hover{

    background:var(--primary);

    color:#111;

}

.designer{

    text-align:center;

}

.designer p{

    color:#dcd7d7;

    font-size:.7rem;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:.35rem;

}

.designer a{

    font-family:var(--logo);

    font-size:2rem;

    color:var(--primary);

    transition:.35s;

}

.designer a:hover{

    color:white;

}

/*RESPONSIVE */

@media (max-width:1024px){

    :root{
        --section-padding:5rem 6%;
    }

    nav{
        padding:2rem 5%;
    }

    .logo-big{
        font-size:2.8rem;
    }

    .logo-small{
        font-size:1.1rem;
    }

    /* Side Menu */

    .mobile-menu{

        width:50%;
        min-width:420px;

    }

}


@media (max-width:768px){

    :root{
        --section-padding:4rem 5%;
    }

    nav{
        padding:1.5rem 5%;
    }

    .menu-btn{

        width:48px;
        height:48px;

    }

    .menu-btn i{

        font-size:1.5rem;

    }

    /* Full Screen Menu */

    .mobile-menu{

        width:100%;
        min-width:100%;
        padding:2rem 1.5rem;

    }

    /* Hide duplicate logo */

    .menu-header{

        justify-content:flex-end;

    }

    .menu-header .logo{

        display:none;

    }

    .menu-links{

        align-items:center;
        gap:1.2rem;
        margin-top:1rem;

    }

    .menu-links a{

        font-size:1.75rem;

    }

    .logo-big{

        font-size:2.4rem;

    }

    .logo-small{

        font-size:1rem;

    }

}

@media (max-width:480px){

    nav{

        padding:1.25rem 5%;

    }

    .menu-btn{

        width:44px;
        height:44px;

    }

    .menu-btn i{

        font-size:1.35rem;

    }

    .mobile-menu{

        padding:1.5rem 1.25rem;

    }

    .menu-links{

        gap:1rem;

    }

    .menu-links a{

        font-size:1.5rem;
        padding:.4rem .8rem;

    }

    .menu-links span{

        width:24px;
        font-size:.65rem;

    }

    .menu-socials{

        gap:1rem;

    }

    .menu-socials a{

        width:38px;
        height:38px;
        font-size:1.1rem;

    }

    .designer a{

        font-size:1.7rem;

    }

}



@media (max-width:900px) and (orientation:landscape){

    .mobile-menu{

        justify-content:flex-start;
        overflow-y:auto;

        padding:2rem;

        gap:2rem;

    }

    .menu-links{

        margin-top:0;
        gap:.7rem;

    }

    .menu-links a{

        font-size:1.4rem;

    }

    .menu-footer{

        margin-top:1rem;
        
    }

    body.menu-open .page-content{

    filter:blur(5px);

    transform:none;

}

}


@supports(height:100dvh){

    .mobile-menu{

        height:100dvh;

    }

}



@media(prefers-reduced-motion:reduce){

    .mobile-menu,
    .menu-links a,
    .menu-btn,
    .menu-close i{

        transition:none !important;

    }

}