/*=========================================================
                SKI CONNECT v3.0
          HOME PAGE DESIGN SYSTEM
=========================================================*/

/* ===========================
   HERO SECTION
=========================== */

.hero{
    min-height:calc(100vh - 56px);

    background-image:url("../images/school_bg.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

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

    padding:68px 20px 18px;

    position:relative;
    overflow:hidden;
}

.hero-overlay{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 0;

    background:transparent;

}
/* ===========================
   HERO CARD
=========================== */

.hero-card{
    width:100%;
    max-width:980px;
    margin:auto;

    /* CHANGE THIS */
    padding:16px 32px;

    border-radius:30px;

    background:linear-gradient(
        145deg,
        rgba(235,225,210,.30),
        rgba(30,32,28,.48) 34%,
        rgba(18,22,19,.58) 72%,
        rgba(215,195,165,.20)
    );

    backdrop-filter:blur(28px) saturate(125%);
    -webkit-backdrop-filter:blur(28px) saturate(125%);

    border:1.5px solid rgba(255,248,235,.58);

    box-shadow:
        0 28px 70px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.48),
        inset 0 -1px 0 rgba(255,205,130,.12);

    position:relative;
    overflow:hidden;
}

/* Glass shine */

.hero-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:180px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.22),
        rgba(255,255,255,.06),
        rgba(255,255,255,0)
    );

    pointer-events:none;

    border-radius:34px 34px 0 0;
}


.hero-card > *{

    position:relative;

    z-index:1;
}


/* ===========================
   SCHOOL BRAND
=========================== */

.school-brand{
    display:flex;
    justify-content:center;
    align-items:center;

    width:90%;
    max-width:680px;

    margin:0 auto 8px;

    padding:10px 22px;

    border-radius:18px;

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

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

    box-shadow:
        0 8px 22px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,1);

    overflow:hidden;
}


/* SCHOOL TITLE IMAGE */

.school-title-img{
    display:block;

    width:auto;
    max-width:100%;

    height:125px;

    object-fit:contain;

    margin:auto;
}

/* ===========================
   TITLE
=========================== */

.hero-title{
    color:#FFD76A;

    font-family:Georgia, "Times New Roman", serif;

    font-size:3.1rem;
    font-weight:500;

    margin:5px 0 2px;
    line-height:1.08;

    text-shadow:
        0 2px 3px rgba(0,0,0,.85),
        0 0 8px rgba(255,215,106,.25);
}

.hero-title span{
    color:#FFD76A;
}

.gold-line{
    width:140px;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #F3C55B,
        transparent
    );

    margin:5px auto;

    border-radius:30px;
}


.hero-subtitle{
    color:#FFFFFF;

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

    line-height:1.2;
    margin:0 0 7px;

    text-shadow:
        0 2px 4px rgba(0,0,0,.90);
}  

.hero-text{
    color:#FFFFFF;

    font-size:1.02rem;
    font-weight:500;

    line-height:1.55;

    max-width:760px;
    margin:0 auto;

    text-shadow:
        0 2px 4px rgba(0,0,0,.95);
}
/* ===========================
   CEO CARD
=========================== */
.ceo-message{
    margin-top:12px;

    padding:18px 22px;

    border-radius:27px;

    background:linear-gradient(
        135deg,
        rgba(16,20,17,.64),
        rgba(45,42,35,.42)
    );

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

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.13);
}

.ceo-photo{

    width:230px;

    max-width:100%;

    border-radius:18px;

    border:4px solid #FFC107;

    box-shadow:0 15px 35px rgba(0,0,0,.35);

    transition:.35s;
}

.ceo-photo:hover{

    transform:scale(1.03);
}

.quote-icon{

    color:#FFC107;

    font-size:3rem;
}

.ceo-title{
    color:#FFD54F;

    font-weight:700;

    text-shadow:
        0 2px 4px rgba(0,0,0,.75);
}

.ceo-text{
    color:#FFFFFF;

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

    font-style:italic;
    font-weight:400;

    line-height:1.65;

    text-align:justify;

    letter-spacing:.1px;

    text-shadow:
        0 2px 3px rgba(0,0,0,.85);
}
.ceo-details{

    margin-top:22px;

    text-align:left;
}


.ceo-details h6{

    margin:0 0 5px;

    color:#F4C35A;

    font-size:1.05rem;

    font-weight:700;
}


.ceo-details p{

    margin:0 0 3px;

    color:#FFFFFF;

    font-size:.9rem;

    font-weight:600;
}


.ceo-details small{

    color:#EAEAEA;

    font-size:.82rem;
}

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

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:12px;
     
    flex-wrap:wrap;

}

.btn-submit{

    background:linear-gradient(90deg,#FF6A00,#FFA000);

    color:white;

    border:none;

    border-radius:50px;

    padding:15px 34px;

    min-width:220px;

    font-weight:600;

    transition:.35s;

}

.btn-submit:hover{

    color:white;

    transform:translateY(-4px);

}

.btn-track{

    background:linear-gradient(90deg,#1976D2,#0D47A1);

    color:white;

    border:none;

    border-radius:50px;

    padding:15px 34px;

    min-width:220px;

    font-weight:600;

    transition:.35s;

}

.btn-track:hover{

    color:white;

    transform:translateY(-4px);

}

/* ===========================
   TRUST BADGES
=========================== */

.trust-badges{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:10px;

    flex-wrap:wrap;
}

.trust-item{

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

    padding:14px 22px;

    border-radius:40px;

    color:#FFFFFF;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);

    transition:.35s;
}

.trust-item i{

    color:#FFD54F;

    margin-right:8px;
}

.trust-item:hover{

    transform:translateY(-3px);

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

    border-color:rgba(255,213,79,.45);
}

/* ==========================================
   MOBILE HOME PAGE
   ========================================== */

@media (max-width: 768px) {

    .hero {
        min-height: auto;
        padding: 75px 10px 25px;
    }

    .hero-overlay {
        padding: 15px 0;
    }

    .hero-card {
        width: 100%;
        max-width: 100%;
        padding: 20px 14px;
        border-radius: 24px;
    }

    /* SCHOOL BRAND */

    .school-brand {
        width: 100%;
        max-width: 100%;
        padding: 6px 8px;
        margin-bottom: 12px;
        border-radius: 15px;
    }

    .school-title-img {
        width: 100%;
        max-width: 300px;
        height: auto;
        max-height: 82px;
    }

    /* MAIN TITLE */

    .hero-title {
        font-size: 1.8rem;
        line-height: 1.15;
        margin: 8px 0 4px;
    }

    .gold-line {
        width: 100px;
        margin: 7px auto;
    }

    .hero-subtitle {
        font-size: 1.05rem;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    .hero-text {
        font-size: .92rem;
        line-height: 1.5;
        padding: 0 5px;
    }

    /* CEO CARD */

    .ceo-message {
        margin-top: 15px;
        padding: 18px 14px;
        border-radius: 20px;
    }

    .ceo-photo {
        width: 155px;
        margin-bottom: 12px;
    }

    .quote-icon {
        font-size: 2.3rem;
    }

    .ceo-title {
        font-size: 1.35rem;
        line-height: 1.3;
    }

    .ceo-text {
        font-size: .88rem;
        line-height: 1.55;
        text-align: center;
    }

    .ceo-details {
        margin-top: 15px;
        text-align: center;
    }

    .ceo-details h6 {
        font-size: 1rem;
    }

    .ceo-details p {
        font-size: .85rem;
    }

    .ceo-details small {
        font-size: .78rem;
    }

    /* BUTTONS */

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 16px;
    }

    .btn-submit,
    .btn-track {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 13px 20px;
    }

    /* TRUST BADGES */

    .trust-badges {
        flex-direction: column;
        gap: 8px;
        margin-top: 15px;
    }

    .trust-item {
        width: 100%;
        padding: 11px 14px;
        text-align: center;
        font-size: .85rem;
    }
}