/*==================================================
    PIGGYNEST V3
    MAIN CSS
==================================================*/

/* Design System */
@import url("variables.css");

/* Sections */
@import url("navbar.css");
@import url("loader.css");
@import url("hero.css");
@import url("stats.css");
@import url("features.css");
@import url("learning.css");
@import url("timeline.css");
@import url("showcase.css");
@import url("testimonials.css");
@import url("faq.css");
@import url("cta.css");
@import url("footer.css");


/*==================================================
    GLOBAL LAYOUT
==================================================*/

.container{

    max-width:var(--container);

}


section{

    padding:var(--section-space) 0;

    overflow:hidden;

}


.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}


.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:999px;

    background:#DBEAFE;

    color:var(--primary);

    font-size:14px;

    font-weight:800;

    margin-bottom:24px;

}


.section-title{

    font-size:clamp(2.2rem,5vw,3.6rem);

    font-weight:900;

    color:var(--text);

    line-height:1.15;

    margin-bottom:22px;

}


.section-title span{

    color:var(--primary);

}


.section-description{

    font-size:18px;

    color:var(--text-light);

    line-height:1.9;

}


/*==================================================
    BUTTONS
==================================================*/

.btn-primary-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:999px;

    background:var(--gradient-primary);

    color:#fff;

    font-weight:800;

    box-shadow:var(--shadow-md);

    transition:var(--transition);

}


.btn-primary-custom:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

    color:#fff;

}


.btn-secondary-custom{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:999px;

    background:#fff;

    color:var(--text);

    font-weight:800;

    border:1px solid var(--border);

    transition:var(--transition);

}


.btn-secondary-custom:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}


/*==================================================
    CARDS
==================================================*/

.glass-card{

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

    backdrop-filter:blur(18px);

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

    border-radius:28px;

}


.white-card{

    background:#fff;

    border-radius:28px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}


.white-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}


/*==================================================
    BACK TO TOP
==================================================*/

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow-lg);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    z-index:999;

}


#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/*==================================================
    LOADER
==================================================*/

#loader{

    position:fixed;

    inset:0;

    background:#fff;

    z-index:99999;

}


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

@media(max-width:991px){

    :root{

        --section-space:90px;

    }

}


@media(max-width:767px){

    :root{

        --section-space:70px;

    }

    .section-header{

        margin-bottom:50px;

    }

    .section-description{

        font-size:16px;

    }

    .btn-primary-custom,
    .btn-secondary-custom{

        width:100%;

    }

}