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

.hero {

    position: relative;

    overflow: hidden;

    min-height: calc(100vh - 90px);

    display: flex;

    align-items: center;

    padding: 120px 0 60px;

    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

}

/* Background Decoration */

.hero::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    right: -220px;

    top: -230px;

    border-radius: 50%;

    background: rgba(212, 175, 55, .08);

}

.hero::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    left: -250px;

    bottom: -230px;

    border-radius: 50%;

    background: rgba(10, 35, 66, .05);

}

/* ==========================================
            CONTAINER
========================================== */

.hero-container {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 600px;

    gap: 70px;

    align-items: center;

}

/* ==========================================
            BADGE
========================================== */

.hero-badge {

    display: inline-block;

    padding: 14px 28px;

    border-radius: 40px;

    background: #FFF8E7;

    color: #D4AF37;

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: .3px;

    margin-bottom: 28px;

}

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

.hero-left {

    max-width: 620px;

}

.hero-left h1 {
    font-family: "Poppins", sans-serif;
    font-size: 3.25rem;
    line-height: 1.1;
    color: #0A2342;
    margin-bottom: 18px;
    font-weight: 700;
}

.hero-left p {

    font-size: 1.08rem;

    color: #64748B;

    line-height: 1.8;

}

/* ==========================================
            CHECKLIST
========================================== */

.hero-list {

    margin: 30px 0;

}

.hero-list li {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    font-size: 1.05rem;

    font-weight: 500;

}

.hero-list i {

    color: #22C55E;

    font-size: 18px;

}

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

.hero-bottom {
    display: grid;
    grid-template-columns: 1fr 230px;
    gap: 40px;
    align-items: start;
}

.hero-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 35px;
}

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

.hero-right {
    position: relative;
    width: 100%;

    margin-top: -70px;
}

.hero-image {

    overflow: hidden;

    border-radius: 28px;

    box-shadow: 0 30px 60px rgba(0, 0, 0, .12);

}

.hero-image img {

    width: 100%;

    height: 520px;

    object-fit: cover;

    display: block;

    transition: .45s;

}

.hero-image:hover img {

    transform: scale(1.05);

}

/* ==========================================
            FLOAT CARD
========================================== */

.hero-card {

    position: absolute;

    left: -35px;

    bottom: 35px;

    background: #fff;

    padding: 24px 30px;

    border-radius: 22px;

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

}

.hero-card h3 {

    font-size: 2rem;

    color: #0A2342;

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

}

.hero-card p {

    margin-top: 5px;

    color: #64748B;

}

/* ==========================================
            STATS
========================================== */

.hero-stats {

    display: flex;

    gap: 45px;

    margin-top: 50px;

}

.hero-stats h2 {

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

    color: #0A2342;

    font-size: 2rem;

}

.hero-stats span {

    color: #64748B;

    font-size: .95rem;

}

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

@media(max-width:991px) {

    .hero {

        padding: 120px 0 70px;

        min-height: auto;

    }

    .hero-container {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .hero-left {

        text-align: center;

        max-width: 700px;

        margin: auto;

    }

    .hero-left h1 {

        font-size: 2.9rem;

    }

    .hero-left p {

        margin: auto;

    }

    .hero-list li {

        justify-content: center;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-right {

        max-width: 620px;

        margin: auto;

    }

    .hero-image img {

        height: 420px;

    }

    .hero-card {

        left: 20px;

        bottom: 20px;

    }

}

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

.hero-left {
    animation: slideLeft .9s ease;
}

.hero-right {
    animation: slideRight .9s ease;
}

.hero-card {
    animation: zoomIn 1.2s ease;
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================
        MOBILE ONLY
========================================== */

.mobile-service {
    display: none;
}

.mobile-btn {
    display: none;
}

.btn-service {

    background: #F59E0B;

    color: #fff;

    border: none;

    box-shadow: 0 12px 25px rgba(245, 158, 11, .35);

}

.btn-service:hover {

    background: #EA580C;

    transform: translateY(-3px);

    box-shadow: 0 18px 35px rgba(245, 158, 11, .45);

}