/* ===================================================
   ROYA PLATFORM - HERO
=================================================== */

.hero-section {
    position: relative !important;
    overflow: hidden !important;

    width: 100% !important;
    min-height: 560px !important;

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

    background-color: #1769AA !important;

    background-image:
        radial-gradient(
            circle at 50% 20%,
            rgba(255, 209, 102, 0.12) 0%,
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0D1B3D 0%,
            #1769AA 48%,
            #4AA3DF 100%
        ) !important;

    color: #ffffff !important;
    text-align: center !important;
}


/* ===================================================
   OVERLAY
=================================================== */

.hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    background: linear-gradient(
        to bottom,
        rgba(13, 27, 61, 0.02),
        rgba(13, 27, 61, 0.10)
    ) !important;

    pointer-events: none !important;
}


/* ===================================================
   CONTENT
=================================================== */

.hero-content {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 1100px !important;

    margin: 0 auto !important;
    padding: 42px 20px 50px !important;
}


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

.hero-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 0 auto 22px !important;
}

.hero-logo-img {
    display: block !important;

    width: 230px !important;
    max-width: 230px !important;
    height: auto !important;

    object-fit: contain !important;

    opacity: 1 !important;
    visibility: visible !important;

    filter: drop-shadow(
        0 8px 20px rgba(0, 0, 0, 0.15)
    );
}


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

.hero-content h1 {
    width: 100% !important;
    max-width: 950px !important;

    margin: 0 auto 16px !important;

    color: #ffffff !important;

    font-size: clamp(40px, 5vw, 68px) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;

    text-align: center !important;

    text-shadow:
        0 5px 18px rgba(0, 0, 0, 0.12);
}


/* ===================================================
   DESCRIPTION
=================================================== */

.hero-description {
    width: 100% !important;
    max-width: 850px !important;

    margin: 0 auto 28px !important;

    color: rgba(255, 255, 255, 0.95) !important;

    font-size: clamp(18px, 2vw, 24px) !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;

    text-align: center !important;
}


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

.hero-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 190px !important;
    min-height: 56px !important;

    padding: 12px 26px !important;

    border: 0 !important;
    border-radius: 12px !important;

    background: #FFD166 !important;

    color: #0D1B3D !important;

    font-size: 18px !important;
    font-weight: 800 !important;

    text-decoration: none !important;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.hero-btn:hover {
    background: #F2B705 !important;
    color: #0D1B3D !important;

    transform: translateY(-2px);

    box-shadow:
        0 15px 32px rgba(0, 0, 0, 0.20);
}


/* ===================================================
   TABLET
=================================================== */

@media (max-width: 991.98px) {

    .hero-section {
        min-height: 520px !important;
    }

    .hero-content {
        padding: 40px 18px 45px !important;
    }

    .hero-logo-img {
        width: 190px !important;
        max-width: 190px !important;
    }

    .hero-content h1 {
        font-size: clamp(36px, 7vw, 54px) !important;
    }
}


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

@media (max-width: 575.98px) {

    .hero-section {
        min-height: 650px !important;

        background-color: #1769AA !important;

        background-image:
            linear-gradient(
                135deg,
                #0D1B3D 0%,
                #1769AA 50%,
                #4AA3DF 100%
            ) !important;
    }

    .hero-content {
        padding: 35px 15px 42px !important;
    }

    .hero-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 auto 20px !important;

        overflow: visible !important;
    }

    .hero-logo-img {
        display: block !important;

        width: 260px !important;
        max-width: 80vw !important;
        height: auto !important;

        object-fit: contain !important;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    .hero-content h1 {
        margin: 0 auto 14px !important;

        font-size: 32px !important;
        line-height: 1.45 !important;
    }

    .hero-description {
        margin: 0 auto 24px !important;

        font-size: 17px !important;
        line-height: 1.8 !important;
    }

    .hero-btn {
        min-width: 165px !important;
        min-height: 52px !important;

        padding: 11px 22px !important;

        font-size: 17px !important;
    }
}