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

.hero-section{

    background:linear-gradient(
        135deg,
        #F8FAFC 0%,
        #EEF4FF 100%
    );

    position:relative;

    overflow:hidden;

}

.hero-title{

    font-size:clamp(2.5rem,6vw,5rem);

    font-weight:500;

    line-height:1.0;

    color:#1F2937;

}

.hero-subtitle{

    font-size:1.15rem;

    line-height:1.5;

    color:#6B7280;

}

/* BUTTON */

.btn-campus-hero{

    background:#0F4C81;

    color:#fff;

    padding:15px 34px;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

}

.btn-campus-hero:hover{

    transform:translateY(-4px);
    background:yellow;
    color:black;

}

.btn-outline-campus{

    border:2px solid #0F4C81;

    color:#0F4C81;

    padding:15px 34px;

    border-radius:50px;

    font-weight:700;

}

.btn-outline-campus:hover{

    background:#0F4C81;

    color:white;

}

/* COUNTER */

.counter-box{

    background:white;

    padding:20px;

    border-radius:18px;

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

    transition:.35s;

}

.counter-box:hover{

    transform:translateY(-8px);

}

.counter-box h3{

    font-weight:800;

    color:#0F4C81;

}

/* IMAGE */

.hero-image{

    max-width:550px;

    animation:floating 5s ease infinite;

}

/* FLOATING CARD */

.floating-card{

    position:absolute;

    background:white;

    padding:18px;

    border-radius:20px;

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

    width:170px;

    text-align:center;

}

.floating-card i{

    font-size:30px;

    color:#0F4C81;

}

.card-1{

    top:10%;

    left:0;

}

.card-2{

    right:5%;

    top:30%;

}

.card-3{

    bottom:8%;

    left:8%;

}

/* BG */

.hero-bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    opacity:.18;

}

.circle-1{

    width:260px;

    height:260px;

    background:#0F4C81;

    left:-120px;

    top:120px;

}

.circle-2{

    width:240px;

    height:240px;

    background:#15A362;

    right:-80px;

    top:80px;

}

.circle-3{

    width:300px;

    height:300px;

    background:#FFC107;

    bottom:-120px;

    left:30%;

}

/* SCROLL */

.scroll-down{

    position:absolute;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    animation:bounce 2s infinite;

}

.scroll-down a{

    color:#0F4C81;

    font-size:32px;

}

/* ANIMATION */

@keyframes floating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

@keyframes bounce{

    0%,100%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,10px);

    }

}

/* MOBILE */

@media(max-width:991px){

    .hero-title{

    text-align:center;

    }

    .hero-subtitle{

    text-align:center;

    }

    .hero-counter{

    margin-top:30px;

    }

    .hero-image{

    max-width:350px;

    margin-top:50px;

    }

    .floating-card{

    display:none;

    }

    .scroll-down{

    display:none;

    }

}