/* ==========================================================
   PAKET.CSS
   ----------------------------------------------------------
   Landing Page Paket EduSmart Muslim
   Digunakan oleh:
   - Paket Sahabat
   - Paket Lengkap
   - Paket lainnya di masa mendatang
========================================================== */
/* ==========================================
   PACKAGE HEADER
========================================== */

.header{

    position: relative;

    top: auto;

    padding: 18px 0;
}

.header .container{

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

.logo img{

    width:180px;
    height:auto;
}

/* ==========================================
   PACKAGE NAVIGATION
========================================== */

.package-nav{

    background:#2F8F83;

}

.package-nav .container{

    padding:14px 0;

}

.package-nav__back{

    display:inline-flex;
    align-items:center;
    gap:10px;

    color:var(--color-white);

    font-size:1rem;
    font-weight:var(--font-weight-bold);

    text-decoration:none;

    transition:var(--transition);

}

.package-nav__back:hover{

    opacity:.85;

}

/* ==========================================
   PACKAGE HERO
========================================== */

.package-hero{
    padding: 24px 0 100px;
}

.package-hero__container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.package-hero__content{
    max-width: 600px;
}

.package-hero__eyebrow{
    display: inline-block;

    margin-bottom: 20px;
    padding: 8px 18px;

    background: rgba(var(--color-primary-rgb), .08);
    border-radius: 999px;

    color: var(--color-primary);

    font-size: .95rem;
    font-weight: var(--font-weight-semibold);
}

.package-hero__title{
    margin-bottom: 18px;

    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
}

.package-hero__subtitle{

    margin-bottom: 20px;

    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: var(--font-weight-semibold);

    color: var(--color-text);
}

.package-hero__description{

    max-width: 55ch;
    margin-bottom: 40px;

    color: var(--color-text-light);
}

.package-hero__actions{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.package-hero__image{

    display:flex;
    justify-content:center;
}

.package-hero__image img{

    display:block;

    width:100%;
    max-width:720px;

    height:auto;

}

/* ==========================================
   SECTION HEADING
========================================== */

.section-heading{

    max-width:820px;

    margin:0 auto 64px;

    text-align:center;

}

/* Ribbon */

.heading__ribbon{

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:36px;

}

/* Garis */

.heading__line{

    flex:1;

    max-width:180px;

    height:3px;

    background:#2F8F83;

    border-radius:999px;

}

/* ==========================================
   SECTION RIBBON
========================================== */

/* Label */

.heading__label{

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

    min-width:220px;
    height:52px;

    margin:0 20px;
    padding:0 32px;

    background:var(--color-primary);

    border:2px solid rgba(255,255,255,.18);

    border-radius:18px;

    color:var(--color-white);

    font-family:var(--font-heading);
    font-size:1.35rem;
    font-weight:700;

    letter-spacing:.02em;

    white-space:nowrap;

    box-shadow:
        0 6px 16px rgba(var(--color-primary-rgb), .18);

}
/* ==========================================
   PACKAGE FEATURES
========================================== */

/* Section */

.package-features{

    padding:120px 0;

    background:linear-gradient(
        180deg,
        #FFFFFF 0%,
        #FCFEFC 12%,
        #F6FCF7 30%,
        #EEF8F1 60%,
        #E3F4E8 100%
    );

}

/* Grid */

.package-features__grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:28px;

    margin-top:64px;

}

/* Card */

.feature-card{

    padding: 2.5rem;

    background:var(--color-white);

    border:2px solid var(--color-border);

    border-radius:24px;

    transition:var(--transition);

}

.feature-card:hover{

    transform:translateY(-8px);

    border-color:rgba(var(--color-primary-rgb), .20);

    box-shadow:0 20px 40px rgba(0,0,0,.06);

}

.feature-card__icon{

    margin-bottom:20px;

    font-size:1.75rem;

}

.feature-card__title{

    margin-bottom:18px;
    padding-bottom:18px;

    border-bottom:2px solid rgba(var(--color-primary-rgb), .12);

    color:var(--color-primary);

    font-size:1.5rem;
    font-weight:var(--font-weight-bold);

}


/* ==========================================
   MUHASABAH LEVELING
========================================== */

.package-leveling{

    padding:120px 0 48px;

}

.package-leveling__illustration{

    margin-top:48px;
    margin-bottom:0;

    text-align:center;

}

.package-leveling__illustration img{

    display:block;

    width:100%;
    max-width:1200px;

    height:auto;

    margin-inline:auto;

}
/* ==========================================
   LEVELING BENEFITS
========================================== */

.leveling-benefits{
    padding:80px 0 60px;
}

.benefit-list{
    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:2.5rem 4rem;

    margin-top:3rem;
}

.benefit-list__item h3{

    margin-bottom:.75rem;

    color:var(--color-primary);

    font-size:1.3rem;

    font-weight:var(--font-weight-bold);

}

.benefit-list__item p{

    margin:0;

    color:var(--color-text-light);

    line-height:1.8;

}

/* ==========================================
   CTA
========================================== */

.package-cta__actions{

    display: flex;

    justify-content: flex-end;

    margin-top: 40px;

}

/* ==========================================================
   SECTION NOTE
========================================================== */

.section-note{
    max-width: 1100px;

    margin: 2.5rem auto 0;

    padding: 1.25rem 2rem;

    background: rgba(47, 158, 143, 0.06);

    border-left: 4px solid var(--color-primary);

    border-radius: 0;
}

.section-note p{
    margin: 0;

    color: var(--color-text);

    font-size: 1rem;

    line-height: 1.8;
}

.section-note strong{
    color: var(--color-primary-dark);
}

.section-note p{
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-lg);
    line-height: 1.8;
}

.section-note strong{
    color: var(--color-primary-dark);
}



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


/* ==========================
   TABLET
========================== */
@media (max-width: 992px){

    /* Hero */

    .package-hero__container{
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }

    .package-hero__content{
        max-width: 700px;
        margin: 0 auto;
    }

    .package-hero__description{
        margin-left: auto;
        margin-right: auto;
    }

}

/* ==========================
   MOBILE
========================== */
@media (max-width:768px){

    .benefit-list{
        grid-template-columns:1fr;
    }

}

@media (max-width: 768px){

    /* Hero */

    .package-hero{
        padding: 24px 0 64px;
    }

    .package-hero__container{
        gap: 40px;
    }

    /* Features */

    .package-features__grid{
        grid-template-columns: 1fr;
    }

    
    /* CTA */

    .package-cta__actions{
        justify-content: center;
    }
    /* Section Heading */

    .heading__line{

        max-width:70px;

    }

    .heading__label{

        min-width:auto;

        height:50px;

        margin:0 16px;

        padding:0 28px;

        font-size:1.15rem;

    }
    
}