/* =====================================================
   MAYOBA COURSES HERO SECTION
   Fully scoped responsive styles
===================================================== */


.courses-hero-section {

    width: 100%;

    background: #f7f4ff;

    padding: clamp(45px, 6vw, 85px) 0;

}



/* MAIN CONTAINER */

.courses-hero-container {

    width: min(1240px, calc(100% - 80px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);

    align-items: center;

    gap: clamp(35px, 6vw, 80px);

}



/* LEFT CONTENT */

.courses-hero-content {

    max-width: 720px;

}



/* EYEBROW */

.courses-hero-eyebrow {

    display: inline-block;

    margin-bottom: 20px;

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

    font-size: 14px;

    font-weight: 600;

    color: #5138d8;

}



/* TITLE */


.courses-hero-content h1 {

    margin: 0 0 28px;


    font-family: Georgia, "Times New Roman", serif;


    font-size: clamp(42px, 5vw, 76px);


    line-height: .98;


    letter-spacing: -2px;


    font-weight: 700;


    color: #111653;

}



/* DESCRIPTION */


.courses-hero-content p {


    margin: 0 0 clamp(28px, 4vw, 42px);


    max-width: 650px;


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


    font-size: clamp(15px, 1.3vw, 18px);


    line-height: 1.75;


    color: #68708a;

}



/* SEARCH */


.courses-hero-search {


    width: 100%;


    max-width: 710px;


    min-height: 68px;


    padding: 8px;


    background: #ffffff;


    border-radius: 18px;


    display: flex;


    align-items: center;


    gap: 10px;


    box-shadow: 0 18px 45px rgba(25,30,90,.12);


}




.courses-hero-search input {


    flex: 1;


    min-width: 0;


    height: 52px;


    border: none;


    outline: none;


    padding: 0 22px;


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


    font-size: 15px;


    color: #222;


}



.courses-hero-search input::placeholder {

    color: #8b8fa1;

}



/* BUTTON */


.courses-hero-button {


    height: 52px;


    padding: 0 clamp(18px, 3vw, 32px);


    border: none;


    border-radius: 14px;


    background: linear-gradient(
        135deg,
        #6d3df5,
        #5030d8
    );


    color: #fff;


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


    font-size: 14px;


    font-weight: 600;


    cursor: pointer;


    white-space: nowrap;


}



/* RIGHT CARD */


.courses-hero-note {


    background: #202968;


    border-radius: clamp(22px, 3vw, 30px);


    padding: clamp(28px, 4vw, 42px);


    box-shadow:
        0 35px 80px rgba(22,30,90,.28);


}




.courses-hero-note strong {


    display: block;


    margin-bottom: 14px;


    font-family: Georgia, "Times New Roman", serif;


    font-size: clamp(24px, 2.5vw, 32px);


    line-height: 1.2;


    color: white;


}



.courses-hero-note span {


    display: block;


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


    font-size: clamp(14px, 1.2vw, 16px);


    line-height: 1.65;


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


}



/* =====================================================
   LARGE TABLETS / SMALL LAPTOPS
===================================================== */


@media(max-width:1100px){


    .courses-hero-container {


        grid-template-columns: 1fr;


        gap: 45px;


    }


    .courses-hero-content {


        max-width: 850px;


    }


    .courses-hero-note {


        max-width: 600px;


    }


}



/* =====================================================
   TABLETS
===================================================== */


@media(max-width:768px){


    .courses-hero-section {


        padding: 50px 0;


    }



    .courses-hero-container {


        width: calc(100% - 40px);


    }



    .courses-hero-content h1 {


        letter-spacing: -1px;


    }



    .courses-hero-search {


        flex-direction: column;


        align-items: stretch;


        padding: 12px;


    }



    .courses-hero-search input {


        width: 100%;


    }



    .courses-hero-button {


        width: 100%;


    }


}



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


@media(max-width:480px){


    .courses-hero-section {


        padding: 38px 0;


    }



    .courses-hero-container {


        width: calc(100% - 30px);


    }



    .courses-hero-content h1 {


        font-size: 40px;


        line-height: 1;


    }



    .courses-hero-content p {


        font-size: 15px;


        line-height: 1.65;


    }



    .courses-hero-note {


        border-radius: 22px;


        padding: 25px 22px;


    }



    .courses-hero-note strong {


        font-size: 24px;


    }


}



/* =====================================================
   VERY SMALL PHONES
===================================================== */


@media(max-width:360px){


    .courses-hero-content h1 {


        font-size: 34px;


    }



    .courses-hero-note strong {


        font-size: 21px;


    }


}