/*====================================

HERO SECTION

====================================*/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding-top:160px;

    padding-bottom:100px;

}

/*========================

Layout

=========================*/

.hero-wrapper{

    width:100%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.25fr .9fr;

    gap:70px;

    align-items:center;

}

/*==========================
Hero Name Highlight
==========================*/

.hero-title{
    font-family:'Cormorant Garamond', serif;
    font-size:78px;
    line-height:1.1;
    font-weight:600;
    margin-bottom:18px;
}

.im{
    color:var(--text) !important;
    font-weight:500;
}

.pink-name{
    color:#c46b90b8 !important;
}


/*========================

LEFT

=========================*/

.hero-left{

    display:flex;

    justify-content:center;

    position:relative;

}

.photo-wrapper{

    position:relative;

}




.photo-frame{

width:360px;

height:440px;

padding:10px;

background:white;

border-radius:42px;

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

position:relative;

overflow:hidden;

}

.photo-frame img{

width:100%;

height:100%;

object-fit:cover;

border-radius:34px;

}

/*========================

CENTER

=========================*/

.hero-middle{

    display:flex;

    flex-direction:column;

}

.hello{
    font-family:'Allura', cursive;
    font-size:40px !important;
    line-height:1;
    color:var(--rose);
    margin-bottom:5px;
    display:block;
}

.hero-middle h1{

    font-size:60px;

    line-height:1.05;

    color:var(--text);

    margin-bottom:15px;

}

.hero-middle h1 span{

    color:var(--sage);

}

.hero-middle h2{

    font-family:'Outfit',sans-serif;

    font-size:22px;

    font-weight:500;

    color:var(--light-text);

    margin-bottom:28px;

}

.divider{

    color:var(--rose);

    margin:0 10px;

}

.hero-middle p{

    font-size:18px;

    max-width:620px;

    line-height:1.9;

    margin-bottom:40px;

}

/*========================

Buttons

=========================*/

.hero-buttons{
    display:flex;
    gap:20px;
    margin-top:35px;
    flex-wrap:wrap;
}

/*========================

RIGHT

=========================*/

.hero-right{

    display:flex;

    justify-content:flex-end;

}


.availability{

display:flex;

align-items:center;

gap:10px;

margin-top:30px;

padding:12px 16px;

background:#F8FFF2;

border-radius:999px;

font-weight:600;

color:var(--sage);

}

/*========================

Background

=========================*/

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(110px);

    z-index:-5;

    opacity:.65;

}

.blob-one{

    width:430px;

    height:430px;

    background:#F4DFE6;

    left:-140px;

    top:-120px;

}

.blob-two{

    width:350px;

    height:350px;

    background:#E8EFCF;

    right:-120px;

    bottom:-120px;

}


/*====================================

NAME HIGHLIGHT

====================================*/

.hero-middle h1 span{

    position:relative;

    color:var(--sage);

}

.hero-middle h1 span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:8px;

    width:100%;

    height:12px;

    background:rgba(232,239,207,.8);

    z-index:-1;

    border-radius:20px;

}


/*====================================

PHOTO FLOAT

====================================*/

.photo-card{

    animation:floatPhoto 6s ease-in-out infinite;

}

@keyframes floatPhoto{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}


/*====================================

LEARNING CARD

====================================*/

.learning{
    padding:35px;
    width:340px;
}

.learning h3{
    margin-bottom:25px;
    font-size:28px;
}

.learning-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.learning-list li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.learning-list li i{
    width:18px;
    height:18px;
    color:var(--sage);
    flex-shrink:0;
}

.learning-list li span:first-of-type{
    flex:1;
    color:var(--text);
}

.tag{
    padding:5px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
}

.beginner{
    background:#FFF6D8;
    color:#B88900;
}

.intermediate{
    background:#E7F5E6;
    color:#4D8A43;
}

/*====================================

BUTTONS

====================================*/

.hero-buttons a{

    transition:.35s ease;

}

.hero-buttons a:hover{

    transform:translateY(-6px);

}


/*====================================

PHOTO GLOW

====================================*/

.photo-wrapper::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:rgba(244,223,230,.45);

    border-radius:50%;

    filter:blur(80px);

    z-index:-5;

}


/*====================================

ENTRANCE ANIMATION

====================================*/

.hero-left,

.hero-middle,

.hero-right{

    opacity:0;

    transform:translateY(40px);

    animation:fadeHero .9s forwards;

}

.hero-middle{

    animation-delay:.2s;

}

.hero-right{

    animation-delay:.4s;

}

@keyframes fadeHero{

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==============================

Mini Info

==============================*/

.mini-info{

margin-top:-8px;

margin-bottom:30px;

display:flex;

align-items:center;

gap:14px;

flex-wrap:wrap;

font-family:'Outfit',sans-serif;

font-size:15px;

color:var(--light-text);

}

.mini-info span{

color:var(--rose);

font-size:14px;

}

.hero::before{

content:"";

position:absolute;

width:650px;

height:650px;

background:radial-gradient(
circle,
rgba(232,239,207,.45),
transparent 70%
);

right:-220px;

top:120px;

filter:blur(35px);

z-index:-3;

}

.hero::after{

content:"";

position:absolute;

width:450px;

height:450px;

background:radial-gradient(
circle,
rgba(244,223,230,.5),
transparent 70%
);

left:-150px;

top:70px;

filter:blur(35px);

z-index:-3;

}


@keyframes floatStar{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.learning-list{

display:flex;

flex-direction:column;

gap:18px;

margin-top:25px;

}

.learning-list li{

display:flex;

align-items:center;

gap:14px;

list-style:none;

font-size:16px;

}

.learning-list svg{

width:19px;

height:19px;

color:var(--sage);

}

.photo-frame{

position:relative;

overflow:visible;

}



.hero-quote{

margin-top:20px;

font-family:'Cormorant Garamond',serif;

font-style:italic;

font-size:24px;

color:#af356c !important;

opacity:.85;

}

.learning-status{

display:flex;

align-items:center;

gap:10px;

font-size:14px;

font-weight:600;

color:var(--sage);

margin-bottom:20px;

}

.pulse{

width:10px;

height:10px;

border-radius:50%;

background:#6BCB77;

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.5);

opacity:.5;

}

100%{

transform:scale(1);

opacity:1;

}

}

/*============================
Sparkles
============================*/

.sparkle{
    position:absolute;
    color:#D88AAE;
    font-size:24px;
    animation:twinkle 4s infinite ease-in-out;
    pointer-events:none;
    opacity:.7;
}

.sparkle-1{
    top:140px;
    left:18%;
}

.sparkle-2{
    right:15%;
    top:180px;
    font-size:20px;
    animation-delay:1.5s;
}

.sparkle-3{
    bottom:130px;
    left:48%;
    animation-delay:3s;
}

@keyframes twinkle{

0%,100%{
transform:scale(.8) rotate(0deg);
opacity:.4;
}

50%{
transform:scale(1.3) rotate(20deg);
opacity:1;
}

}

.noise{

position:absolute;

inset:0;

opacity:.03;

background-image:
radial-gradient(#97A13B 1px, transparent 1px);

background-size:22px 22px;

pointer-events:none;

z-index:-3;

}

.scroll-indicator{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

}

.mouse{

width:28px;

height:48px;

border:2px solid rgba(151,161,59,.5);

border-radius:20px;

display:flex;

justify-content:center;

padding-top:8px;

}

.mouse span{

width:5px;

height:10px;

background:var(--sage);

border-radius:20px;

animation:scroll 2s infinite;

}

@keyframes scroll{

0%{
opacity:1;
transform:translateY(0);
}

100%{
opacity:0;
transform:translateY(18px);
}

}

/*=========================================
        HERO INITIAL STATE
=========================================*/

.hero{

    position:relative;

    overflow:hidden;

    opacity:0;

    transform:translateY(16px);

    filter:blur(4px);

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

}

.hero.loaded{

    opacity:1;

    transform:translateY(0);

    filter:blur(0);

}