/* =========================================================
   STAI MADINAH AR RASUL
   GLOBAL DESIGN SYSTEM
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --mar-blue: #0758a6;
    --mar-blue-deep: #043d7a;
    --mar-blue-dark: #022c5a;

    --mar-cyan: #079fe3;
    --mar-cyan-bright: #17b7f2;
    --mar-cyan-soft: #e8f7fe;

    --mar-charcoal: #222326;
    --mar-text: #263347;
    --mar-muted: #68788c;

    --mar-white: #ffffff;

    --mar-bg: #f4f8fc;
    --mar-bg-soft: #eef5fb;

    --mar-border: #dde8f2;

    --mar-shadow:
        0 20px 55px rgba(18, 56, 94, .10);

    --mar-shadow-lg:
        0 30px 70px rgba(9, 57, 105, .14);

}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    padding: 0;

    background:
        var(--mar-white);

    color:
        var(--mar-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

}

img {

    max-width: 100%;

    height: auto;

}

a {

    color:
        var(--mar-blue);

    transition:
        .22s ease;

}

button,
input,
textarea,
select {

    font:
        inherit;

}


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

.mar-container {

    width:
        min(1180px, calc(100% - 40px));

    margin-left:
        auto;

    margin-right:
        auto;

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.mar-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        12px;

    color:
        var(--mar-cyan);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}

.mar-eyebrow::before {

    content: "";

    width:
        18px;

    height:
        3px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--mar-blue),
            var(--mar-cyan)
        );

}

.mar-title {

    margin:
        0;

    color:
        var(--mar-blue-dark);

    font-size:
        clamp(31px, 4vw, 44px);

    line-height:
        1.18;

    letter-spacing:
        -.7px;

}

.mar-description {

    max-width:
        700px;

    margin:
        16px 0 0;

    color:
        var(--mar-muted);

    font-size:
        14px;

    line-height:
        1.85;

}


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

.mar-button {

    min-height:
        49px;

    padding:
        0 23px;

    border:
        0;

    border-radius:
        10px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    cursor:
        pointer;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        850;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;

}

.mar-button-primary {

    color:
        var(--mar-white);

    background:
        linear-gradient(
            135deg,
            var(--mar-blue),
            var(--mar-cyan)
        );

    box-shadow:
        0 12px 28px rgba(7, 88, 166, .18);

}

.mar-button-primary:hover {

    color:
        var(--mar-white);

    transform:
        translateY(-2px);

    box-shadow:
        0 17px 35px rgba(7, 88, 166, .25);

}

.mar-button-dark {

    color:
        var(--mar-white);

    background:
        var(--mar-charcoal);

}

.mar-button-dark:hover {

    color:
        var(--mar-white);

    transform:
        translateY(-2px);

}


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

.mar-card {

    border:
        1px solid
        var(--mar-border);

    border-radius:
        18px;

    background:
        var(--mar-white);

    box-shadow:
        0 14px 40px rgba(18, 56, 94, .06);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

.mar-card:hover {

    transform:
        translateY(-5px);

    border-color:
        transparent;

    box-shadow:
        var(--mar-shadow);

}


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

.mar-section {

    padding:
        95px 0;

}

.mar-section-soft {

    background:
        var(--mar-bg);

}


/* =========================================================
   TOP BAR
========================================================= */

.mar-topbar {

    background:
        var(--mar-charcoal);

    color:
        rgba(255,255,255,.78);

}

.mar-topbar-inner {

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    font-size:
        11px;

    font-weight:
        600;

}

.mar-topbar-left {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}

.mar-topbar-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--mar-cyan);

    box-shadow:
        0 0 0 4px rgba(7, 159, 227, .14);

}


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

.mar-header {

    position:
        relative;

    z-index:
        100;

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

    border-bottom:
        1px solid
        var(--mar-border);

}

.mar-navbar {

    min-height:
        104px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

}


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

.mar-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    color:
        inherit;

    text-decoration:
        none;

}

.mar-brand-logo {

    width:
        78px;

    height:
        65px;

    flex:
        0 0 78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}

.mar-brand-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}

.mar-brand-copy {

    display:
        flex;

    flex-direction:
        column;

}

.mar-brand-copy strong {

    max-width:
        430px;

    color:
        var(--mar-charcoal);

    font-size:
        17px;

    font-weight:
        850;

    line-height:
        1.3;

}

.mar-brand-copy span {

    margin-top:
        4px;

    color:
        var(--mar-blue);

    font-size:
        11px;

    font-weight:
        800;

}


/* =========================================================
   NAVIGATION
========================================================= */

.mar-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        3px;

}

.mar-nav a {

    position:
        relative;

    padding:
        11px 13px;

    border-radius:
        8px;

    color:
        #27374a;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        750;

}

.mar-nav a:hover,
.mar-nav a.mar-active {

    color:
        var(--mar-blue);

    background:
        var(--mar-cyan-soft);

}

.mar-nav a.mar-active::after {

    content: "";

    position:
        absolute;

    left:
        14px;

    right:
        14px;

    bottom:
        4px;

    height:
        2px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--mar-blue),
            var(--mar-cyan)
        );

}

.mar-nav
.mar-nav-contact {

    margin-left:
        6px;

    padding-left:
        19px;

    padding-right:
        19px;

    color:
        var(--mar-white);

    background:
        linear-gradient(
            135deg,
            var(--mar-blue),
            var(--mar-cyan)
        );

    box-shadow:
        0 9px 22px rgba(7, 88, 166, .15);

}

.mar-nav
.mar-nav-contact:hover {

    color:
        var(--mar-white);

    background:
        linear-gradient(
            135deg,
            var(--mar-blue-deep),
            var(--mar-blue)
        );

}

.mar-nav
.mar-nav-contact::after {

    display:
        none;

}


/* =========================================================
   LOGO FALLBACK / IMAGE FALLBACK
========================================================= */

.mar-logo-fallback {

    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:

        radial-gradient(
            circle at 80% 18%,
            rgba(23, 183, 242, .16),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            #edf7fd,
            #f8fbfe
        );

}

.mar-logo-fallback::before {

    content: "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    border:
        1px solid
        rgba(7,88,166,.08);

    border-radius:
        50%;

}

.mar-logo-fallback img {

    position:
        relative;

    z-index:
        2;

    width:
        58%;

    height:
        70%;

    object-fit:
        contain;

}


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

.mar-footer {

    background:
        var(--mar-charcoal);

    color:
        rgba(255,255,255,.68);

}

.mar-footer-grid {

    padding:
        65px 0;

    display:
        grid;

    grid-template-columns:
        1.3fr .7fr .9fr;

    gap:
        70px;

}

.mar-footer-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        19px;

}

.mar-footer-logo {

    width:
        82px;

    height:
        67px;

    padding:
        5px;

    border-radius:
        10px;

    background:
        var(--mar-white);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}

.mar-footer-logo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}

.mar-footer-brand strong {

    color:
        var(--mar-white);

    font-size:
        15px;

    line-height:
        1.4;

}

.mar-footer h3 {

    margin:
        0 0 18px;

    color:
        var(--mar-white);

    font-size:
        13px;

}

.mar-footer p {

    margin:
        0;

    font-size:
        11px;

    line-height:
        1.8;

}

.mar-footer-links {

    display:
        grid;

    gap:
        11px;

}

.mar-footer-links a {

    color:
        rgba(255,255,255,.72);

    text-decoration:
        none;

    font-size:
        11px;

}

.mar-footer-links a:hover {

    color:
        var(--mar-cyan-bright);

}

.mar-footer-bottom {

    padding:
        19px 0;

    border-top:
        1px solid
        rgba(255,255,255,.10);

    color:
        rgba(255,255,255,.52);

    font-size:
        10px;

}


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

@media (max-width: 1000px) {

    .mar-brand-copy strong {

        max-width:
            340px;

        font-size:
            15px;

    }

    .mar-nav {

        gap:
            0;

    }

    .mar-nav a {

        padding:
            9px 8px;

        font-size:
            11px;

    }

}


@media (max-width: 900px) {

    .mar-navbar {

        display:
            block;

        padding:
            17px 0;

    }

    .mar-brand {

        margin-bottom:
            15px;

    }

    .mar-nav {

        overflow-x:
            auto;

    }

    .mar-nav a {

        white-space:
            nowrap;

        padding:
            10px 11px;

    }

    .mar-footer-grid {

        grid-template-columns:
            1fr 1fr;

    }

}


@media (max-width: 620px) {

    .mar-container {

        width:
            min(100% - 28px,1180px);

    }

    .mar-topbar {

        display:
            none;

    }

    .mar-header {

        border-top:
            3px solid
            var(--mar-cyan);

    }

    .mar-brand-logo {

        width:
            67px;

        height:
            55px;

        flex-basis:
            67px;

    }

    .mar-brand-copy strong {

        font-size:
            12px;

    }

    .mar-brand-copy span {

        font-size:
            9px;

    }

    .mar-section {

        padding:
            70px 0;

    }

    .mar-footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

        padding:
            50px 0;

    }

}