/* =========================================================
   GLOBAL
========================================================= */

html {
    scroll-behavior: smooth;
}


/* =========================================================
   HEADER
========================================================= */

.menu-radial {
    background: radial-gradient(
        ellipse 80% 300% at center,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.30) 68%,
        rgba(255, 255, 255, 0.70) 85%,
        rgba(255, 255, 255, 0.95) 100%
    );
}


/* =========================================================
   HERO OVERLAY - ENGLISH
========================================================= */

.hero-overlay {
    background: linear-gradient(
        90deg,
        rgba(0, 48, 94, 0.97) 0%,
        rgba(0, 55, 105, 0.90) 24%,
        rgba(0, 61, 115, 0.58) 42%,
        rgba(0, 61, 115, 0.15) 58%,
        rgba(0, 61, 115, 0) 75%
    );
}


/* =========================================================
   HERO SCIENCE PANEL - ENGLISH
========================================================= */

.science-panel {
    position: absolute;

    right: 0;
    left: auto;
    bottom: 0;
    top: auto;

    width: 300px;
    height: 225px;

    background: rgba(255, 255, 255, 0.96);

    clip-path: polygon(
        43% 0,
        100% 0,
        100% 100%,
        0 100%,
        24% 75%
    );

    filter: drop-shadow(
        -2px 3px 3px rgba(0, 0, 0, 0.18)
    );
}


/* =========================================================
   ENGLISH SCIENCE MESSAGE
========================================================= */

.science-message {
    position: absolute;

    top: 37px;
    right: 30px;
    left: auto;

    width: 170px;

    transform: rotate(-10deg);
}


.science-script {
    font-family: "Caveat", cursive;
    font-weight: 500;
}


/* =========================================================
   GOLD HANDWRITTEN LINE
========================================================= */

.science-gold-line {
    width: 115px;
    height: 3px;

    margin: 16px 5px 0 auto;

    background: #d9a521;

    border-radius: 100%;

    transform: rotate(-8deg);
}


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

/*
 * Mirror the blue gradient.
 *
 * English:
 * dark area -> left
 *
 * Arabic:
 * dark area -> right
 */

html[lang="ar"] .hero-overlay {
    background: linear-gradient(
        270deg,
        rgba(0, 48, 94, 0.97) 0%,
        rgba(0, 55, 105, 0.90) 24%,
        rgba(0, 61, 115, 0.58) 42%,
        rgba(0, 61, 115, 0.15) 58%,
        rgba(0, 61, 115, 0) 75%
    );
}


/* =========================================================
   ARABIC SCIENCE PANEL
========================================================= */

/*
 * Mirror the entire white science panel.
 *
 * English -> bottom right
 * Arabic  -> bottom left
 */

html[lang="ar"] .science-panel {
    right: auto;
    left: 0;

    clip-path: polygon(
        0 0,
        57% 0,
        76% 75%,
        100% 100%,
        0 100%
    );

    filter: drop-shadow(
        2px 3px 3px rgba(0, 0, 0, 0.18)
    );
}


/* =========================================================
   ARABIC SCIENCE MESSAGE
========================================================= */

.science-message-ar {
    position: absolute;

    top: 42px;
    left: 28px;
    right: auto;

    width: 180px;

    transform: rotate(3deg);
}


/*
 * Aref Ruqaa gives the Arabic slogan
 * a handwritten / calligraphic appearance.
 */

.science-script-ar {
    font-family:
        "Aref Ruqaa",
        "Noto Kufi Arabic",
        serif;

    font-weight: 700;

    line-height: 1.05;
}


/* Arabic gold line */

html[lang="ar"] .science-message-ar .science-gold-line {
    margin: 13px auto 0;

    transform: rotate(5deg);
}


/* =========================================================
   HERO DECORATIVE GOLD SHAPE
========================================================= */

.hero-gold-shape {
    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%
    );
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.service-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.service-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0, 54, 105, 0.15);
}


/* Service arrow */

.service-arrow {
    transition: transform 0.25s ease;
}


/* English arrow movement */

.service-card:hover .service-arrow {
    transform: translateX(4px);
}


/* Arabic arrow movement */

html[lang="ar"] .service-card:hover .service-arrow {
    transform: translateX(-4px);
}


/* =========================================================
   JUST FOOTER
========================================================= */

.just-footer {
    background:
        radial-gradient(
            circle at 72% 45%,
            rgba(0, 126, 195, 0.25),
            transparent 34%
        ),
        linear-gradient(
            110deg,
            #00386c 0%,
            #004b87 50%,
            #003768 100%
        );
}


/* =========================================================
   FOOTER LIGHTING
========================================================= */

.footer-glow {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 142, 210, 0.18),
            transparent 55%
        );
}


/* =========================================================
   FOOTER MENU
========================================================= */

.footer-link {
    position: relative;

    color: rgba(255, 255, 255, 0.92);

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.footer-link:hover {
    color: #d9a521;
}


/* =========================================================
   FOOTER SOCIAL ICONS
========================================================= */

.footer-social {
    display: flex;

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

    color: white;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.footer-social:hover {
    color: #d9a521;

    transform: translateY(-3px);
}


/* =========================================================
   FOOTER SCIENCE SLOGAN - ENGLISH
========================================================= */

.science-footer {
    transform: rotate(-5deg);
}


/* Gold handwritten footer underline */

.science-line {
    width: 130px;
    height: 3px;

    margin: 17px 0 0 auto;

    background: #d9a521;

    border-radius:
        100% 0
        100% 0;

    transform:
        rotate(-8deg)
        skewX(-25deg);

    box-shadow:
        20px 0 0 -1px #d9a521;
}


/* =========================================================
   FOOTER SCIENCE SLOGAN - ARABIC
========================================================= */

html[lang="ar"] .science-footer {
    transform: rotate(3deg);
}


/*
 * If the Arabic footer contains the Arabic slogan,
 * use Aref Ruqaa instead of Caveat.
 */

html[lang="ar"] .science-footer .science-script,
html[lang="ar"] .science-footer .science-script-ar {
    font-family:
        "Aref Ruqaa",
        "Noto Kufi Arabic",
        serif;

    font-weight: 700;
}


/* Mirror footer underline for Arabic */

html[lang="ar"] .science-footer .science-line {
    margin:
        17px auto
        0 0;

    transform:
        rotate(8deg)
        skewX(25deg);

    box-shadow:
        -20px 0 0 -1px #d9a521;
}


/* =========================================================
   ARABIC GENERAL IMPROVEMENTS
========================================================= */

/*
 * Arabic headings generally look better without
 * artificial letter spacing.
 */

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
    letter-spacing: 0;
}


/*
 * Improve Arabic input alignment.
 */

html[lang="ar"] input {
    text-align: right;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1023px) {

    /*
     * Science panel is currently hidden by Tailwind's
     * "hidden lg:block", but these rules make the CSS
     * safe if that behavior changes later.
     */

    .science-panel {
        width: 270px;
        height: 205px;
    }


    .science-message {
        top: 34px;
        right: 26px;

        width: 160px;
    }


    .science-message-ar {
        top: 38px;
        left: 25px;

        width: 165px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767px) {

    /* English footer slogan */

    .science-footer {
        transform: rotate(-3deg);
    }


    /* Arabic footer slogan */

    html[lang="ar"] .science-footer {
        transform: rotate(2deg);
    }

}