/* =========================================================
   LEARNOVA ACADEMY
   HOME + INSTRUCTOR DESIGN
========================================================= */


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

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

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

    color: #24345f;

    background:
        linear-gradient(
            135deg,
            #f5f6ff 0%,
            #eef0ff 45%,
            #f8f5ff 100%
        );

    min-height: 100vh;

    overflow-x: hidden;
}


body,
button,
input,
textarea,
select {
    font-family: "Cairo", sans-serif;
}


a {
    text-decoration: none;
}


img {
    max-width: 100%;
}


/* =========================================================
   ANIMATED BACKGROUND
========================================================= */

.background-effects {
    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


.floating-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(4px);

    opacity: 0.42;

    animation:
        floatOrb 12s ease-in-out infinite alternate;
}


.orb-1 {
    width: 420px;

    height: 420px;

    top: -180px;

    right: -100px;

    background:
        radial-gradient(
            circle,
            rgba(110, 86, 220, 0.20),
            transparent 70%
        );
}


.orb-2 {
    width: 360px;

    height: 360px;

    bottom: -140px;

    left: -100px;

    background:
        radial-gradient(
            circle,
            rgba(52, 113, 205, 0.16),
            transparent 70%
        );

    animation-delay: -3s;
}


.orb-3 {
    width: 280px;

    height: 280px;

    top: 35%;

    left: 20%;

    background:
        radial-gradient(
            circle,
            rgba(174, 110, 222, 0.12),
            transparent 70%
        );

    animation-delay: -6s;
}


.orb-4 {
    width: 330px;

    height: 330px;

    top: 55%;

    right: 18%;

    background:
        radial-gradient(
            circle,
            rgba(81, 136, 224, 0.10),
            transparent 70%
        );

    animation-delay: -9s;
}


.floating-dot {
    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: rgba(101, 75, 177, 0.28);

    animation:
        floatingDot 7s ease-in-out infinite;
}


.dot-1 {
    top: 18%;

    left: 12%;
}


.dot-2 {
    top: 70%;

    left: 38%;

    animation-delay: -2s;
}


.dot-3 {
    top: 25%;

    right: 28%;

    animation-delay: -4s;
}


.dot-4 {
    bottom: 18%;

    right: 10%;

    animation-delay: -5s;
}


@keyframes floatOrb {

    from {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(25px, -25px, 0)
            scale(1.08);
    }

}


@keyframes floatingDot {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);

        opacity: 0.35;
    }

    50% {
        transform:
            translateY(-25px)
            scale(1.5);

        opacity: 0.75;
    }

}


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

.site-header {
    position: relative;

    z-index: 50;

    width: 100%;

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

    border-bottom:
        1px solid rgba(80, 67, 150, 0.08);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);
}


.header-inner {
    position: relative;

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

    min-height: 82px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


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

.brand {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #1c3f7b;
}


.brand img {
    display: block;

    width: auto;

    height: 55px;

    object-fit: contain;
}


.brand-text {
    display: flex;

    flex-direction: column;

    line-height: 1.05;
}


.brand-text strong {
    color: #1c3f7b;

    font-size: 19px;

    font-weight: 800;
}


.brand-text small {
    color: #6c4385;

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   HOME LOGO
   EXACT CENTER
========================================================= */

.home-page .header-inner {
    position: relative;
}


.home-page .home-brand {
    position: absolute !important;

    left: 50% !important;

    right: auto !important;

    top: 50% !important;

    transform:
        translate(-50%, -50%) !important;

    margin: 0 !important;

    z-index: 20;

    display: flex !important;

    align-items: center;

    justify-content: center;
}


.home-page .home-brand img {
    height: 58px;

    max-width: 150px;
}


/* =========================================================
   HAZEM LOGO
   TOP RIGHT
========================================================= */

.hazem-page .header-inner {
    position: relative;
}


.hazem-page .hazem-brand {
    position: absolute !important;

    right: 20px !important;

    left: auto !important;

    top: 50% !important;

    transform:
        translateY(-50%) !important;

    margin: 0 !important;

    z-index: 20;
}


.hazem-page .hazem-brand img {
    height: 52px;

    max-width: 140px;
}


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

.main-nav {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 36px;

    position: relative;

    z-index: 10;
}


.main-nav a {
    position: relative;

    padding: 29px 2px;

    color: #283a65;

    font-size: 14px;

    font-weight: 700;

    transition:
        color 0.25s ease;
}


.main-nav a:hover,
.main-nav a.active {
    color: #6743e5;
}


.main-nav a::after {
    content: "";

    position: absolute;

    right: 0;

    left: 0;

    bottom: 17px;

    height: 3px;

    border-radius: 20px;

    background: #6743e5;

    transform:
        scaleX(0);

    transition:
        transform 0.25s ease;
}


.main-nav a:hover::after,
.main-nav a.active::after {
    transform:
        scaleX(1);
}


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

.header-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    position: relative;

    z-index: 15;
}


.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    min-height: 40px;

    padding: 8px 16px;

    border-radius: 12px;

    font-size: 12px;

    font-weight: 700;

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


.btn:hover {
    transform:
        translateY(-2px);
}


.btn-primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #6344d5,
            #7652e7
        );

    box-shadow:
        0 7px 18px rgba(
            91,
            62,
            193,
            0.18
        );
}


.btn-outline {
    color: #503693;

    background: #ffffff;

    border:
        1px solid #dcd7f2;
}


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

.hero-section {
    position: relative;

    z-index: 2;

    width: 100%;

    padding:
        48px 0 38px;
}


.hero-container {
    width: min(
        1200px,
        calc(100% - 40px)
    );

    min-height: 490px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(0, 0.98fr);

    direction: ltr;

    overflow: hidden;

    border-radius: 32px;

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

    border:
        1px solid rgba(
            93,
            77,
            155,
            0.08
        );

    box-shadow:
        0 25px 70px rgba(
            46,
            48,
            104,
            0.10
        );

    backdrop-filter: blur(12px);
}


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

.hero-image {
    position: relative;

    min-height: 490px;

    order: 1;

    overflow: hidden;

    background:
        url("../images/home-hero.jpg")
        center center /
        cover
        no-repeat;
}


.hero-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20, 30, 70, 0.05),
            rgba(255, 255, 255, 0.08)
        );
}


.hero-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(20, 25, 60, 0.18)
        );
}


.hero-quote {
    position: absolute;

    z-index: 3;

    left: 38px;

    bottom: 38px;

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

    font-size: 20px;

    font-style: italic;

    line-height: 1.45;

    text-align: left;

    text-shadow:
        0 2px 10px rgba(
            0,
            0,
            0,
            0.28
        );
}


.hero-quote span {
    opacity: 0.92;
}


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

.hero-content {
    direction: rtl;

    order: 2;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        55px 58px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.98),
            rgba(247,246,255,0.90)
        );
}


.hero-badge {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 18px;

    padding: 8px 14px;

    border-radius: 50px;

    color: #6240b5;

    background:
        #eeebff;

    font-size: 12px;

    font-weight: 800;
}


.hero-content h1 {
    margin: 0 0 18px;

    color: #183e7c;

    font-size:
        clamp(34px, 4vw, 52px);

    line-height: 1.35;

    font-weight: 800;
}


.hero-content h1 strong {
    display: block;

    color: #6741e0;

    font-weight: 800;
}


.hero-content > p {
    max-width: 570px;

    margin: 0 0 28px;

    color: #697188;

    font-size: 15px;

    line-height: 2;
}


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

.hero-buttons {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}


.hero-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 48px;

    padding: 10px 20px;

    border-radius: 14px;

    font-size: 13px;

    font-weight: 800;

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


.hero-btn:hover {
    transform:
        translateY(-3px);
}


.hero-btn.primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #6040d2,
            #7952e9
        );

    box-shadow:
        0 12px 25px rgba(
            93,
            61,
            198,
            0.20
        );
}


.hero-btn.secondary {
    color: #6040a8;

    background: #ffffff;

    border:
        1px solid #dcd7f4;
}


/* =========================================================
   FEATURES
========================================================= */

.features-section {
    position: relative;

    z-index: 2;

    padding:
        28px 0 60px;
}


.features-container {
    width: min(
        1160px,
        calc(100% - 40px)
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}


.feature-card {
    padding: 25px 22px;

    text-align: right;

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

    border:
        1px solid rgba(
            87,
            71,
            148,
            0.08
        );

    border-radius: 22px;

    box-shadow:
        0 13px 35px rgba(
            48,
            42,
            100,
            0.06
        );

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


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

    box-shadow:
        0 18px 40px rgba(
            48,
            42,
            100,
            0.11
        );
}


.feature-icon {
    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    border-radius: 15px;

    font-size: 19px;
}


.feature-icon.purple {
    color: #6741c4;

    background: #eeeaff;
}


.feature-icon.blue {
    color: #356bc0;

    background: #eaf2ff;
}


.feature-icon.green {
    color: #2a9d67;

    background: #e8f8ef;
}


.feature-icon.orange {
    color: #d67b28;

    background: #fff0df;
}


.feature-card h3 {
    margin: 0 0 7px;

    color: #233c73;

    font-size: 16px;

    font-weight: 800;
}


.feature-card p {
    margin: 0;

    color: #70778a;

    font-size: 12px;

    line-height: 1.9;
}


/* =========================================================
   ABOUT
========================================================= */

.about-section {
    position: relative;

    z-index: 2;

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

    margin:
        0 auto 65px;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #f0edff,
            #f8f6ff
        );

    border:
        1px solid rgba(
            102,
            78,
            175,
            0.09
        );
}


.about-section::before {
    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    left: -100px;

    bottom: -130px;

    background:
        rgba(
            117,
            86,
            219,
            0.10
        );
}


.about-content {
    position: relative;

    padding:
        65px 30px;

    text-align: center;
}


.about-icon {
    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto 17px;

    border-radius: 20px;

    color: #6241c4;

    background: #e6e0ff;

    font-size: 23px;
}


.about-content h2 {
    margin: 0 0 12px;

    color: #203d76;

    font-size:
        clamp(25px, 3vw, 36px);

    line-height: 1.5;

    font-weight: 800;
}


.about-content p {
    margin:
        0 auto 25px;

    color: #70778b;

    font-size: 14px;
}


.about-btn {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        12px 22px;

    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #6041cf,
            #7753e5
        );

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(
            93,
            61,
            198,
            0.18
        );
}


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

.site-footer {
    position: relative;

    z-index: 3;

    padding:
        24px 0;

    background:
        #22234d;

    color: #ffffff;
}


.footer-inner {
    width: min(
        1160px,
        calc(100% - 40px)
    );

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.footer-brand {
    display: flex;

    align-items: center;

    gap: 10px;
}


.footer-brand img {
    width: auto;

    height: 42px;
}


.footer-brand span {
    font-size: 14px;

    font-weight: 800;
}


.footer-inner p {
    margin: 0;

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

    font-size: 11px;
}


/* =========================================================
   HAZEM PAGE
========================================================= */

.hazem-page {
    background:
        linear-gradient(
            135deg,
            #f2f3ff 0%,
            #eceeff 45%,
            #f7f3ff 100%
        );
}


.hazem-page .page-main {
    position: relative;

    z-index: 2;

    padding:
        42px 0 70px;
}


/* =========================================================
   HAZEM PROFILE
========================================================= */

.hazem-profile-section {
    width: min(
        1120px,
        calc(100% - 40px)
    );

    margin:
        0 auto 58px;
}


.hazem-profile-card {
    display: grid;

    grid-template-columns:
        250px minmax(0, 1fr);

    gap: 42px;

    align-items: center;

    padding: 38px;

    border-radius: 30px;

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

    border:
        1px solid rgba(
            91,
            73,
            150,
            0.09
        );

    box-shadow:
        0 22px 60px rgba(
            47,
            43,
            100,
            0.09
        );

    backdrop-filter:
        blur(14px);
}


/* =========================================================
   HAZEM PHOTO
========================================================= */

.hazem-photo-wrapper {
    display: flex;

    align-items: center;

    justify-content: center;
}


.hazem-photo {
    width: 215px;

    height: 270px;

    overflow: hidden;

    border-radius: 25px;

    border:
        6px solid rgba(
            255,
            255,
            255,
            0.95
        );

    background: #eef0fb;

    box-shadow:
        0 16px 35px rgba(
            35,
            49,
            105,
            0.15
        );
}


.hazem-photo img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center top;
}


/* =========================================================
HAZEM INFORMATION
========================================================= */

.hazem-info {
min-width: 0;
direction: rtl;
text-align: right;
}

.profile-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
padding: 8px 14px;
border-radius: 50px;
color: #6240b5;
background: #efebff;
font-size: 12px;
font-weight: 800;
}

.hazem-info h1 {
margin: 0 0 10px;
color: #173e7b;
font-size: clamp(29px, 4vw, 43px);
line-height: 1.3;
font-weight: 800;
}

.hazem-info h2 {
margin: 0 0 22px;
color: #6a4285;
font-size: 17px;
line-height: 1.8;
font-weight: 700;
}

.hazem-info > p {
max-width: 760px;
margin: 0 0 16px;
color: #626b81;
font-size: 14px;
line-height: 2.15;
font-weight: 500;
}

.hazem-info > p:last-of-type {
margin-bottom: 0;
}

.hazem-info > p strong {
color: #51399b;
font-weight: 800;
}

/* =========================================================
HAZEM CONTACT
========================================================= */

.hazem-contact {
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid rgba(77, 69, 130, 0.10);
}

.hazem-contact h3 {
margin: 0 0 14px;
color: #243c73;
font-size: 16px;
font-weight: 800;
}

/* =========================================================
   HAZEM CONTACT
========================================================= */

.hazem-contact {
    margin-top: 23px;

    padding-top: 20px;

    border-top:
        1px solid rgba(
            77,
            69,
            130,
            0.10
        );
}


.hazem-contact h3 {
    margin:
        0 0 14px;

    color: #243c73;

    font-size: 16px;

    font-weight: 800;
}


.hazem-social {
    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

    gap: 10px;
}


.hazem-social-link {
    min-height: 46px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        7px 13px;

    border-radius: 13px;

    color: #293862;

    background:
        #f8f8fd;

    border:
        1px solid #e8e7f2;

    font-size: 12px;

    font-weight: 700;

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


.hazem-social-link:hover {
    transform:
        translateY(-3px);

    background: #ffffff;

    box-shadow:
        0 8px 20px rgba(
            54,
            45,
            113,
            0.10
        );
}


.social-icon {
    width: 31px;

    height: 31px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color: #6542ad;

    background: #eeeaff;

    font-size: 15px;
}


.hazem-social-link.instagram
.social-icon {
    color: #b63d78;

    background: #fff0f6;
}


.hazem-social-link.linkedin
.social-icon {
    color: #2867a8;

    background: #edf5ff;
}


.hazem-social-link.email
.social-icon {
    color: #315fa6;

    background: #edf3ff;
}


/* =========================================================
   WHATSAPP QR
========================================================= */

.hazem-whatsapp {
    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 64px;

    padding:
        6px 9px 6px 12px;

    border-radius: 14px;

    background: #f7fff9;

    border:
        1px solid #e1efe5;
}


.whatsapp-icon {
    width: 32px;

    height: 32px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color: #20a955;

    background: #e8f8ec;

    font-size: 16px;
}


.whatsapp-text {
    display: flex;

    flex-direction: column;

    gap: 1px;
}


.whatsapp-text strong {
    color: #285239;

    font-size: 12px;
}


.whatsapp-text small {
    color: #718078;

    font-size: 10px;
}


.hazem-whatsapp img {
    width: 66px;

    height: 66px;

    object-fit: contain;

    padding: 3px;

    border-radius: 7px;

    background: #ffffff;
}


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

.hazem-courses-section {
    width: min(
        1160px,
        calc(100% - 40px)
    );

    margin: 0 auto;
}


.section-heading {
    margin-bottom: 30px;

    text-align: center;
}


.section-heading > span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 6px;

    color: #6945a5;

    font-size: 13px;

    font-weight: 800;
}


.section-heading h2 {
    margin:
        0 0 7px;

    color: #173d7a;

    font-size:
        clamp(28px, 4vw, 38px);

    font-weight: 800;
}


.section-heading p {
    max-width: 620px;

    margin: 0 auto;

    color: #697186;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================================
   COURSE GRID
========================================================= */

.hazem-course-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 23px;
}


/* =========================================================
   COURSE CARD
========================================================= */

.hazem-course-card {
    overflow: hidden;

    border-radius: 22px;

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

    border:
        1px solid rgba(
            86,
            72,
            146,
            0.09
        );

    box-shadow:
        0 12px 35px rgba(
            48,
            42,
            100,
            0.08
        );

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}


.hazem-course-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 21px 45px rgba(
            48,
            42,
            100,
            0.13
        );
}


/* =========================================================
   COURSE IMAGE
========================================================= */

.hazem-course-cover {
    position: relative;

    height: 190px;

    overflow: hidden;

    background: #eef0fa;
}


.hazem-course-cover img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.4s ease;
}


.hazem-course-card:hover
.hazem-course-cover img {
    transform:
        scale(1.045);
}


.course-badge {
    position: absolute;

    top: 12px;

    right: 12px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        7px 10px;

    border-radius: 50px;

    color: #53378e;

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

    font-size: 10px;

    font-weight: 800;

    box-shadow:
        0 5px 15px rgba(
            20,
            20,
            60,
            0.10
        );
}


/* =========================================================
   COURSE BODY
========================================================= */

.hazem-course-body {
    padding: 19px;
}


.hazem-course-body h3 {
    margin:
        0 0 9px;

    color: #1b3e78;

    font-size: 17px;

    line-height: 1.6;

    font-weight: 800;
}


.hazem-course-body p {
    min-height: 50px;

    margin:
        0 0 16px;

    color: #6b7286;

    font-size: 12px;

    line-height: 1.8;
}


.course-card-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding-top: 14px;

    border-top:
        1px solid #eeeef5;

    color: #747b8d;

    font-size: 11px;
}


.course-card-bottom > span {
    display: inline-flex;

    align-items: center;

    gap: 5px;
}


.course-card-bottom > span i {
    color: #7351aa;
}


.course-view-btn {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:
        8px 12px;

    border-radius: 10px;

    color: #ffffff;

    background:
        #6042bd;

    font-size: 11px;

    font-weight: 700;

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


.course-view-btn:hover {
    transform:
        translateX(-3px);

    background:
        #4e34a4;
}


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

.empty-courses {
    padding:
        55px 20px;

    text-align: center;

    border-radius: 25px;

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

    color: #687188;
}


.empty-courses i {
    margin-bottom: 12px;

    color: #7653b3;

    font-size: 38px;
}


.empty-courses h3 {
    margin:
        0 0 7px;

    color: #243b73;
}


.empty-courses p {
    margin: 0;

    font-size: 13px;
}


/* =========================================================
   RESPONSIVE - 1100
========================================================= */

@media (max-width: 1100px) {

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


    .hazem-profile-card {
        grid-template-columns:
            220px minmax(0, 1fr);

        gap: 30px;

        padding: 30px;
    }


    .hazem-photo {
        width: 195px;

        height: 250px;
    }

}


/* =========================================================
   RESPONSIVE - 900
========================================================= */

@media (max-width: 900px) {

    .header-inner {
        width:
            calc(100% - 25px);

        min-height: 78px;
    }


    .main-nav {
        gap: 20px;
    }


    .main-nav a {
        font-size: 12px;
    }


    .header-actions {
        gap: 6px;
    }


    .btn {
        padding:
            7px 11px;

        font-size: 10px;
    }


    .brand-text {
        display: none;
    }


    .home-page .home-brand img {
        height: 52px;
    }


    .hero-container {
        grid-template-columns: 1fr;
    }


    .hero-image {
        min-height: 380px;
    }


    .hero-content {
        min-height: 370px;

        padding:
            42px 35px;

        text-align: center;

        align-items: center;
    }


    .hero-content > p {
        text-align: center;
    }


    .hero-buttons {
        justify-content: center;
    }


    .features-container {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .hazem-course-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .hazem-profile-card {
        grid-template-columns: 1fr;

        text-align: center;
    }


    .hazem-photo-wrapper {
        order: 1;
    }


    .hazem-info {
        order: 2;
    }


    .hazem-info > p {
        margin-left: auto;

        margin-right: auto;
    }


    .hazem-social {
        justify-content: center;
    }


    .hazem-contact {
        text-align: center;
    }

}


/* =========================================================
   RESPONSIVE - 650
========================================================= */

@media (max-width: 650px) {

    .header-inner {
        min-height: 115px;

        flex-direction: column;

        justify-content: center;

        gap: 4px;

        padding:
            10px 0;
    }


    .home-page .home-brand,
    .hazem-page .hazem-brand {
        position: static !important;

        transform: none !important;

        margin:
            0 auto 3px !important;
    }





    .main-nav {
        order: 2;

        gap: 22px;
    }


    .main-nav a {
        padding:
            5px 0 11px;

        font-size: 11px;
    }


    .main-nav a::after {
        bottom: 2px;
    }


    .header-actions {
        position: absolute;

        top: 10px;

        left: 10px;

        right: 10px;

        justify-content: space-between;
    }


    .hero-section {
        padding-top: 25px;
    }


    .hero-container,
    .features-container,
    .about-section,
    .hazem-profile-section,
    .hazem-courses-section {
        width:
            calc(100% - 24px);
    }


    .hero-image {
        min-height: 300px;
    }


    .hero-content {
        padding:
            35px 22px;
    }


    .hero-content h1 {
        font-size: 31px;
    }


    .hero-content > p {
        font-size: 13px;
    }


    .hero-buttons {
        flex-direction: column;

        width: 100%;
    }


    .hero-btn {
        width: 100%;
    }


    .features-container {
        grid-template-columns: 1fr;
    }


    .feature-card {
        text-align: center;
    }


    .feature-icon {
        margin-left: auto;

        margin-right: auto;
    }


    .about-content {
        padding:
            45px 20px;
    }


    .footer-inner {
        flex-direction: column;

        text-align: center;
    }


    .hazem-page .header-inner {
        min-height: 115px;
    }


    .hazem-profile-card {
        padding:
            24px 17px;

        border-radius: 24px;
    }


    .hazem-photo {
        width: 175px;

        height: 220px;
    }


    .hazem-info h1 {
        font-size: 29px;
    }


    .hazem-info h2 {
        font-size: 14px;

        line-height: 1.8;
    }


    .hazem-info > p {
        font-size: 12px;

        line-height: 2;
    }


    .hazem-social {
        flex-direction: column;

        align-items: stretch;
    }


    .hazem-social-link {
        width: 100%;

        justify-content: center;
    }


    .hazem-whatsapp {
        justify-content: center;
    }


    .hazem-course-grid {
        grid-template-columns: 1fr;
    }


    .hazem-course-cover {
        height: 210px;
    }

}


/* =========================================================
   RESPONSIVE - 420
========================================================= */

@media (max-width: 420px) {

    .header-actions {
        gap: 4px;
    }


    .btn {
        min-height: 34px;

        padding:
            5px 8px;

        font-size: 9px;
    }


    .main-nav {
        gap: 15px;
    }


    .main-nav a {
        font-size: 10px;
    }


    .hero-image {
        min-height: 260px;
    }


    .hero-quote {
        left: 20px;

        bottom: 20px;

        font-size: 15px;
    }


    .hero-content h1 {
        font-size: 27px;
    }


    .hero-content > p {
        font-size: 12px;
    }


    .hazem-photo {
        width: 155px;

        height: 195px;
    }


    .hazem-info h1 {
        font-size: 26px;
    }


    .hazem-course-cover {
        height: 190px;
    }


    .course-card-bottom {
        flex-direction: column;

        align-items: stretch;
    }


    .course-view-btn {
        justify-content: center;
    }

}
/* =========================================================
   HAZEM LOGO - EXACT CENTER
========================================================= */

.hazem-page .header-inner {
    position: relative;
}

.hazem-page .hazem-brand {
    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    margin: 0 !important;

    z-index: 20;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hazem-page .hazem-brand img {
    display: block;
    height: 58px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}