/* =========================================================
   MENTORA HOMEPAGE
   Gutenberg Homepage UI
   ========================================================= */


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

:root {
    --mentora-bg: #081a14;
    --mentora-bg-2: #0b2118;
    --mentora-card: #102d22;
    --mentora-card-2: #123628;

    --mentora-gold: #d4af37;
    --mentora-gold-light: #f0d878;

    --mentora-green: #145a3a;
    --mentora-green-light: #1b7048;

    --mentora-white: #ffffff;
    --mentora-text: #d7e5df;
    --mentora-muted: #9db2a9;

    --mentora-border: rgba(255,255,255,.10);

    --mentora-radius: 22px;
    --mentora-shadow: 0 20px 50px rgba(0,0,0,.25);
}


/* Main homepage */

.home {
    background: var(--mentora-bg);
    color: var(--mentora-white);
}


/* Remove unnecessary spacing */

.home .entry-content {
    margin: 0;
}

.home .wp-site-blocks {
    padding-top: 0;
}


/* =========================================================
   COMMON SECTION
   ========================================================= */

.mentora-hero,
.mentora-quick,
.mentora-resources,
.mentora-courses,
.mentora-tutors,
.mentora-services,
.mentora-islamic,
.mentora-why,
.mentora-internship,
.mentora-final-cta {

    position: relative;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}


/* Section headings */

.mentora-resources h2,
.mentora-courses h2,
.mentora-tutors h2,
.mentora-services h2,
.mentora-why h2,
.mentora-internship h2 {

    color: var(--mentora-white);
    font-weight: 800;
    line-height: 1.15;
}


/* Section paragraphs */

.mentora-resources p,
.mentora-courses p,
.mentora-tutors p,
.mentora-services p,
.mentora-why p,
.mentora-internship p {

    color: var(--mentora-text);
}


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

.mentora-hero {

    min-height: 620px;

    display: flex;
    align-items: center;

    padding: 80px 10px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(20,90,58,.45),
            transparent 35%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(212,175,55,.08),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #081a14 0%,
            #0b2e1e 55%,
            #071510 100%
        );

    border-radius: 0 0 30px 30px;
}


/* Hero columns */

.mentora-hero .wp-block-columns {

    width: 100%;
    max-width: 1200px;

    margin: auto;

    align-items: center;
}


/* Hero text */

.mentora-hero h1 {

    font-size: clamp(44px, 6vw, 76px);

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -2px;

    margin-top: 15px;
    margin-bottom: 25px;

    color: #ffffff;
}


/* Hero small heading */

.mentora-hero .wp-block-column:first-child > p:first-child {

    color: var(--mentora-gold);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* Hero description */

.mentora-hero .wp-block-column:first-child p {

    max-width: 620px;

    color: var(--mentora-text);

    font-size: 18px;

    line-height: 1.75;
}


/* Hero image */

.mentora-hero img {

    width: 100%;

    max-height: 520px;

    object-fit: cover;

    border-radius: 26px;

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);

    transition: transform .4s ease;
}


.mentora-hero img:hover {

    transform: translateY(-6px) scale(1.01);
}


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

.mentora-hero .wp-block-button__link,
.mentora-final-cta .wp-block-button__link,
.mentora-internship .wp-block-button__link {

    border-radius: 12px;

    padding: 14px 25px;

    font-weight: 700;

    text-decoration: none;

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


/* Primary */

.mentora-hero .wp-block-button:first-child .wp-block-button__link,
.mentora-final-cta .wp-block-button:first-child .wp-block-button__link {

    background: var(--mentora-gold);

    color: #081a14;

    border: none;
}


.mentora-hero .wp-block-button:first-child .wp-block-button__link:hover,
.mentora-final-cta .wp-block-button:first-child .wp-block-button__link:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(212,175,55,.30);
}


/* Secondary */

.mentora-hero .wp-block-button:last-child .wp-block-button__link {

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

    color: #ffffff;

    border: 1px solid rgba(255,255,255,.18);
}


.mentora-hero .wp-block-button:last-child .wp-block-button__link:hover {

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

    transform: translateY(-3px);
}


/* =========================================================
   QUICK CATEGORIES
   ========================================================= */

.mentora-quick {

    padding: 55px 6%;

    background: var(--mentora-bg-2);
}


.mentora-quick .wp-block-columns {

    max-width: 1200px;

    margin: auto;

    gap: 18px;
}


/* Quick cards */

.mentora-quick .wp-block-column {

    padding: 28px 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

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

    border-radius: var(--mentora-radius);

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

    transition: transform .3s ease,
                border-color .3s ease;
}


.mentora-quick .wp-block-column:hover {

    transform: translateY(-7px);

    border-color:
        rgba(212,175,55,.35);
}


.mentora-quick h3 {

    margin-top: 8px;

    color: #ffffff;

    font-weight: 700;
}


.mentora-quick p {

    color: var(--mentora-muted);
}


/* =========================================================
   RESOURCES
   ========================================================= */

.mentora-resources {

    padding: 100px 6%;

    background: var(--mentora-bg);
}


.mentora-resources > .wp-block-heading {

    text-align: center;

    margin-bottom: 15px;
}


/* Resource grid */

.mentora-resources .wp-block-columns {

    margin-top: 45px;

    gap: 20px;
}


/* Resource cards */

.mentora-resources .wp-block-column {

    padding: 32px 25px;

    min-height: 210px;

    background:
        linear-gradient(
            145deg,
            #102d22,
            #0b2118
        );

    border:

        1px solid var(--mentora-border);

    border-radius: var(--mentora-radius);

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        border-color .3s ease;
}


.mentora-resources .wp-block-column:hover {

    transform: translateY(-8px);

    box-shadow:

        0 20px 50px rgba(0,0,0,.30);

    border-color:

        rgba(212,175,55,.30);
}


.mentora-resources h3 {

    color: var(--mentora-gold-light);

    margin-bottom: 10px;
}


/* =========================================================
   COURSES
   ========================================================= */

.mentora-courses {

    padding: 90px 6%;

    background:
        linear-gradient(
            135deg,
            #0b2118,
            #081a14
        );
}


.mentora-courses .wp-block-columns {

    align-items: center;

    max-width: 1200px;

    margin: auto;

    gap: 60px;
}


/* Course cards */

.mentora-courses .wp-block-column:last-child {

    display: grid;

    gap: 15px;
}


.mentora-courses .wp-block-column:last-child
.wp-block-group {

    padding: 22px;

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

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

    border-radius: 16px;

    transition: transform .25s ease;
}


.mentora-courses .wp-block-column:last-child
.wp-block-group:hover {

    transform: translateX(7px);

    border-color:
        rgba(212,175,55,.25);
}


/* =========================================================
   TUTORS
   ========================================================= */

.mentora-tutors {

    padding: 100px 6%;

    background: var(--mentora-bg);
}


.mentora-tutors .wp-block-columns {

    margin-top: 45px;

    gap: 22px;
}


.mentora-tutors .wp-block-column {

    padding: 35px 25px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #102d22,
            #0b2118
        );

    border-radius: var(--mentora-radius);

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

    transition: all .3s ease;
}


.mentora-tutors .wp-block-column:hover {

    transform: translateY(-8px);

    border-color:
        rgba(212,175,55,.3);
}


.mentora-tutors h3 {

    color: #ffffff;
}


.mentora-tutors p {

    color: var(--mentora-muted);
}


/* =========================================================
   SKILLED SERVICES
   ========================================================= */

.mentora-services {

    padding: 100px 6%;

    background: var(--mentora-bg-2);
}


.mentora-services .wp-block-columns {

    gap: 18px;

    margin-top: 45px;
}


.mentora-services .wp-block-column {

    padding: 30px 20px;

    text-align: center;

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

    border:

        1px solid var(--mentora-border);

    border-radius: 18px;

    transition: all .3s ease;
}


.mentora-services .wp-block-column:hover {

    transform: translateY(-7px);

    background:

        rgba(20,90,58,.25);

    border-color:

        rgba(212,175,55,.25);
}


.mentora-services h3 {

    color: #ffffff;
}


/* =========================================================
   ISLAMIC LEARNING
   ========================================================= */

.mentora-islamic {

    padding: 110px 6%;

    text-align: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at center,
            rgba(20,90,58,.35),
            transparent 60%
        ),

        linear-gradient(
            135deg,
            #07150f,
            #0b2e1e
        );

    border-top:

        1px solid rgba(255,255,255,.05);

    border-bottom:

        1px solid rgba(255,255,255,.05);
}


.mentora-islamic h2 {

    color: var(--mentora-gold-light);

    font-size: clamp(35px,5vw,60px);

    margin-bottom: 20px;
}


.mentora-islamic p {

    max-width: 700px;

    margin-left: auto;
    margin-right: auto;

    color: var(--mentora-text);

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   WHY MENTORA
   ========================================================= */

.mentora-why {

    padding: 100px 6%;

    background: var(--mentora-bg);
}


.mentora-why > .wp-block-columns {

    margin-top: 45px;

    gap: 20px;
}


.mentora-why .wp-block-column {

    padding: 30px 22px;

    background:

        rgba(255,255,255,.04);

    border:

        1px solid var(--mentora-border);

    border-radius: 18px;

    transition: all .3s ease;
}


.mentora-why .wp-block-column:hover {

    transform: translateY(-6px);

    border-color:

        rgba(212,175,55,.3);
}


.mentora-why h3 {

    color: var(--mentora-gold-light);
}


/* =========================================================
   INTERNSHIP
   ========================================================= */

.mentora-internship {

    padding: 90px 6%;

    text-align: center;

    background:

        linear-gradient(
            135deg,
            #0b2e1e,
            #102d22
        );

    border-radius: 24px;
}


.mentora-internship p {

    max-width: 700px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.mentora-final-cta {

    padding: 120px 6%;

    text-align: center;

    background:

        radial-gradient(
            circle at center,
            rgba(212,175,55,.10),
            transparent 50%
        ),

        #081a14;
}


.mentora-final-cta h2 {

    font-size: clamp(40px,6vw,68px);

    color: #ffffff;

    font-weight: 800;

    margin-bottom: 20px;
}


.mentora-final-cta p {

    max-width: 700px;

    margin:

        0 auto 35px;

    color: var(--mentora-text);

    font-size: 18px;

    line-height: 1.7;
}


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

@media (max-width: 781px) {


    /* Global */

    .mentora-hero,
    .mentora-quick,
    .mentora-resources,
    .mentora-courses,
    .mentora-tutors,
    .mentora-services,
    .mentora-islamic,
    .mentora-why,
    .mentora-internship,
    .mentora-final-cta {

        padding-left: 22px;
        padding-right: 22px;
    }


    /* Hero */

    .mentora-hero {

        min-height: auto;

        padding-top: 55px;
        padding-bottom: 55px;

        border-radius: 0 0 22px 22px;
    }


    .mentora-hero .wp-block-columns {

        gap: 35px;
    }


    .mentora-hero h1 {

        font-size: 46px;

        letter-spacing: -1px;
    }


    .mentora-hero p {

        font-size: 16px;
    }


    .mentora-hero img {

        max-height: 350px;
    }


    /* Stack sections */

    .mentora-quick .wp-block-columns,
    .mentora-resources .wp-block-columns,
    .mentora-courses .wp-block-columns,
    .mentora-tutors .wp-block-columns,
    .mentora-services .wp-block-columns,
    .mentora-why .wp-block-columns {

        display: flex;

        flex-direction: column;

        gap: 16px;
    }


    /* Cards */

    .mentora-quick .wp-block-column,
    .mentora-resources .wp-block-column,
    .mentora-tutors .wp-block-column,
    .mentora-services .wp-block-column,
    .mentora-why .wp-block-column {

        width: 100% !important;

        min-height: auto;
    }


    /* Course */

    .mentora-courses {

        padding-top: 65px;
        padding-bottom: 65px;
    }


    /* Islamic */

    .mentora-islamic {

        padding-top: 75px;
        padding-bottom: 75px;
    }


    /* CTA */

    .mentora-final-cta {

        padding-top: 80px;
        padding-bottom: 80px;
    }


    .mentora-final-cta h2 {

        font-size: 42px;
    }


    /* Buttons */

    .mentora-hero .wp-block-buttons {

        flex-direction: column;

        align-items: stretch;
    }


    .mentora-hero .wp-block-button {

        width: 100%;
    }


    .mentora-hero .wp-block-button__link {

        width: 100%;

        text-align: center;
    }

}


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

@media (max-width: 480px) {

    .mentora-hero h1 {

        font-size: 38px;
    }


    .mentora-final-cta h2 {

        font-size: 36px;
    }


    .mentora-hero img {

        border-radius: 18px;
    }

}