/*==================================================
    MAIN STYLESHEET
==================================================*/

/* Core */
@import url("variables.css");
@import url("reset.css");

/* Layout */
@import url("navbar.css");
@import url("hero.css");
@import url("about.css");
@import url("programs.css");
@import url("retreat.css");
@import url("initiatives.css");
@import url("why-para.css");
@import url("testimonials.css");
@import url("impact.css");
@import url("journey.css");
@import url("trusted.css");
@import url("marqee.css");
@import url("cta.css");
@import url("footer.css");

/* Effects */
@import url("cursor.css");
@import url("divider.css");
@import url("animations.css");
@import url("responsive.css");


/*==================================================
    3D CARD EFFECTS
==================================================*/

.program-card,
.pillar,
.initiative-card,
.impact-card,
.testimonial-card{
    transform-style:preserve-3d;
    will-change:transform;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/*==================================================
    BUTTON EFFECTS
==================================================*/

.btn{
    position:relative;
    overflow:hidden;
    will-change:transform;

    transition:
        transform .25s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.btn::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;

    width:0;
    height:0;

    border-radius:50%;
    background:rgba(255,255,255,.18);

    transform:translate(-50%,-50%);
    transition:width .5s ease,height .5s ease;
}

.btn:hover::before{
    width:320px;
    height:320px;
}

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


/*==================================================
    PRELOADER TEXT
==================================================*/

.line{
    margin:0;
    line-height:.9;
    letter-spacing:-2px;

    opacity:0;
    transform:translateY(30px);

    animation:fadeUp .8s forwards;
}

.line1{
    font-size:clamp(5rem,12vw,10rem);
    font-weight:900;
    text-transform:uppercase;
}

.line2{
    margin-top:1rem;
    font-size:clamp(2rem,4vw,3.5rem);
    font-weight:300;
    letter-spacing:4px;

    animation-delay:.35s;
}


/*==================================================
    ENTER BUTTON
==================================================*/

#enterBtn{
    margin-top:60px;
    padding:18px 50px;

    border:none;
    border-radius:999px;

    background:#090909;
    color:#fff;

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

    cursor:pointer;

    opacity:0;

    animation:fadeUp .8s forwards;
    animation-delay:1.5s;

    transition:
        transform .35s ease,
        background .35s ease;
}

#enterBtn:hover{
    transform:scale(1.05);
    background:#202020;
}

#enterBtn span{
    display:block;
    margin-top:6px;

    font-size:.8rem;
    opacity:.65;
}


/*==================================================
    ANIMATIONS
==================================================*/

@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes rise{
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/*==================================================
    PRELOADER
==================================================*/

#preloader{
    position:fixed;
    inset:0;
    z-index:99999;

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

    background:#731616;
    color:#fff;

    transition:
        background .9s ease,
        opacity .8s ease,
        visibility .8s ease;
}

#preloader.loaded{
    background:#fff;
    color:#731616;
}

#preloader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.preloader-content{
    text-align:center;
}

.line1{
    opacity:0;
    transform:translateY(35px);
    animation:rise .9s ease forwards;
}

.line2{
    opacity:0;
    transform:translateY(20px);

    animation:
        rise .9s ease .35s forwards,
        heartbeat 1.4s ease-in-out 1.3s infinite;
}

@keyframes heartbeat{

    0%, 50%, 100%{
        transform:translateY(0) scale(1);
    }

    6%{
        transform:translateY(0) scale(1.12);
    }

    12%{
        transform:translateY(0) scale(.98);
    }

    18%{
        transform:translateY(0) scale(1.16);
    }

    24%{
        transform:translateY(0) scale(1);
    }

}


/*==================================================
    RESPONSIVE
==================================================*/

@media (max-width:992px){

    .line1{
        font-size:clamp(4rem,10vw,7rem);
    }

    .line2{
        font-size:clamp(1.8rem,4vw,2.8rem);
    }
}

@media (max-width:768px){

    #enterBtn{
        width:100%;
        max-width:320px;
        padding:16px 32px;
        font-size:1rem;
    }

    .line{
        letter-spacing:-1px;
    }

    .line2{
        letter-spacing:2px;
    }
}

@media (max-width:480px){

    .line1{
        font-size:3rem;
    }

    .line2{
        font-size:1.3rem;
    }

    #enterBtn{
        margin-top:40px;
    }
}