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

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',Arial,sans-serif;

color:#333;

background:#fff;

overflow-x:hidden;

}


/* =====================================================
   NAVBAR
===================================================== */

.navbar{

width:100%;

height:85px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 7%;

background:white;

box-shadow:0 3px 20px rgba(0,0,0,.08);

position:sticky;

top:0;

z-index:1000;

}

.logo{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

}

.nav-links{

display:flex;

gap:30px;

list-style:none;

align-items:center;

}

.nav-links a{

text-decoration:none;

color:#333;

font-weight:600;

transition:.3s;

}

.nav-links a:hover{

color:#005540;

}

.login-btn{

background:#005540;

color:white!important;

padding:13px 30px;

border-radius:30px;

cursor:pointer;

text-decoration:none;

border:none;

font-weight:600;

}

.login-btn:hover{

background:#007a58;

}


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

.hero{

min-height:600px;

display:flex;

align-items:center;

justify-content:space-between;

padding:60px 8%;

background:

linear-gradient(
135deg,
#f4faf7,
#ffffff
);

}

.hero-text{

max-width:600px;

}

.hero h1{

font-size:55px;

line-height:1.2;

color:#005540;

font-weight:800;

margin-bottom:20px;

}

.hero p{

font-size:20px;

line-height:1.7;

color:#555;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.primary-btn{

background:#005540;

color:white;

padding:16px 35px;

border-radius:30px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.primary-btn:hover{

background:#007a58;

transform:translateY(-2px);

}

.secondary-btn{

border:2px solid #005540;

color:#005540;

padding:14px 35px;

border-radius:30px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.secondary-btn:hover{

background:#005540;

color:white;

}

.hero-image img{

width:420px;

max-width:100%;

filter:drop-shadow(0 15px 25px rgba(0,0,0,.15));

}


/* =====================================================
   SECTION TITLE
===================================================== */

.section-title{

text-align:center;

font-size:36px;

color:#005540;

margin-bottom:40px;

}


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

.services{

padding:80px 8%;

}

.cards{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}

.card{

background:white;

width:300px;

padding:35px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

text-align:center;

transition:.3s;

}

.card:hover{

transform:translateY(-10px);

box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.card i{

font-size:45px;

color:#005540;

margin-bottom:20px;

}

.card h3{

margin-bottom:15px;

font-size:22px;

color:#222;

}

.card p{

color:#666;

line-height:1.7;

}


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

.features{

background:#f5faf7;

padding:70px 8%;

}

.feature-box{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}

.feature{

width:250px;

text-align:center;

}

.feature i{

font-size:40px;

color:#005540;

margin-bottom:15px;

}

.feature h3{

margin-bottom:10px;

}

.feature p{

color:#666;

line-height:1.6;

}


/* =====================================================
   PRICING
===================================================== */

.pricing{

padding:80px 8%;

text-align:center;

background:white;

}

.price-card{

display:inline-block;

vertical-align:top;

width:280px;

margin:15px;

padding:35px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

transition:.3s;

}

.price-card:hover{

transform:translateY(-8px);

box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.price-card h3{

font-size:25px;

color:#005540;

}

.price-card h2{

font-size:40px;

margin:20px;

color:#222;

}

.price-card p{

margin:8px 0;

color:#666;

}

.price-card a{

display:block;

background:#005540;

color:white;

padding:12px;

border-radius:25px;

text-decoration:none;

margin-top:20px;

cursor:pointer;

transition:.3s;

}

.price-card a:hover{

background:#007a58;

}


/* =====================================================
   CONTACT SECTION
===================================================== */

.contact-section{

padding:90px 8%;

background:#f5faf7;

}

.contact-container{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:50px;

align-items:center;

}

.contact-info h2{

font-size:38px;

color:#005540;

margin-bottom:20px;

}

.contact-info > p{

color:#666;

line-height:1.8;

margin-bottom:30px;

}

.contact-list{

display:flex;

flex-direction:column;

gap:18px;

}

.contact-item{

display:flex;

align-items:center;

gap:15px;

color:#444;

text-decoration:none;

transition:.3s;

}

.contact-item:hover{

color:#005540;

transform:translateX(5px);

}

.contact-item i{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#005540;

color:white;

font-size:18px;

}

.social-title{

font-size:24px;

color:#005540;

margin-bottom:20px;

}

.social-links{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.social-links a{

width:50px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

color:white;

font-size:21px;

text-decoration:none;

transition:.3s;

box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.social-links a:hover{

transform:translateY(-5px) scale(1.05);

box-shadow:0 10px 20px rgba(0,0,0,.25);

}

.social-whatsapp{

background:#25D366;

}

.social-email{

background:#3f37c9;

}

.social-phone{

background:#0072ff;

}

.social-tiktok{

background:#000;

}

.social-instagram{

background:linear-gradient(135deg,#f09433,#dc2743,#cc2366,#bc1888);

}

.social-facebook{

background:#1877F2;

}

.social-youtube{

background:#FF0000;

}


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

footer{

background:#004936;

color:white;

padding:70px 8% 25px;

}

.footer-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:2fr 1fr 1fr 1.5fr;

gap:45px;

}

.footer-column h3{

font-size:21px;

margin-bottom:20px;

color:white;

}

.footer-column p{

color:#c9ddd6;

line-height:1.8;

font-size:14px;

}

.footer-logo{

display:flex;

align-items:center;

gap:15px;

margin-bottom:20px;

}

.footer-logo img{

width:65px;

height:65px;

border-radius:50%;

}

.footer-logo span{

font-size:25px;

font-weight:800;

}

.footer-links{

list-style:none;

display:flex;

flex-direction:column;

gap:12px;

}

.footer-links a{

color:#c9ddd6;

text-decoration:none;

font-size:14px;

transition:.3s;

}

.footer-links a:hover{

color:white;

padding-left:5px;

}

.footer-contact{

display:flex;

flex-direction:column;

gap:14px;

}

.footer-contact a{

color:#c9ddd6;

text-decoration:none;

font-size:14px;

display:flex;

align-items:center;

gap:10px;

transition:.3s;

}

.footer-contact a:hover{

color:white;

}

.footer-contact i{

width:20px;

text-align:center;

}

.footer-social{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-top:15px;

}

.footer-social a{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

color:white;

text-decoration:none;

font-size:17px;

transition:.3s;

}

.footer-social a:hover{

transform:translateY(-4px);

}

.footer-bottom{

max-width:1200px;

margin:50px auto 0;

padding-top:25px;

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

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.footer-bottom p{

font-size:13px;

color:#bcd2ca;

}

.footer-bottom-links{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.footer-bottom-links a{

color:#bcd2ca;

font-size:13px;

text-decoration:none;

}

.footer-bottom-links a:hover{

color:white;

}


/* =====================================================
   LOGIN MODAL
===================================================== */

.modal{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.65);

z-index:9999;

align-items:center;

justify-content:center;

padding:20px;

}

.login-box{

background:white;

width:420px;

max-width:100%;

padding:40px;

border-radius:25px;

text-align:center;

position:relative;

box-shadow:0 20px 50px rgba(0,0,0,.3);

animation:popup .3s ease;

}

.login-box .modal-logo{

width:80px;

height:80px;

border-radius:50%;

margin-bottom:15px;

}

.login-box h2{

color:#005540;

margin-bottom:25px;

}

.login-box input{

width:100%;

padding:15px;

margin:10px 0;

border-radius:12px;

border:1px solid #ddd;

font-size:16px;

outline:none;

}

.login-box input:focus{

border-color:#005540;

box-shadow:0 0 0 3px rgba(0,85,64,.1);

}

.password-wrapper{

position:relative;

}

.password-wrapper input{

padding-right:50px;

}

.toggle-password{

position:absolute;

right:15px;

top:50%;

transform:translateY(-50%);

cursor:pointer;

color:#005540;

font-size:18px;

}

.login-box button.login-submit{

width:100%;

padding:15px;

margin-top:20px;

border:none;

border-radius:30px;

background:#005540;

color:white;

font-size:18px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.login-box button.login-submit:hover{

background:#007a58;

}

.close-btn{

position:absolute;

top:10px;

right:18px;

border:none;

background:none;

font-size:35px;

color:#555;

cursor:pointer;

}

.close-btn:hover{

color:#005540;

}

.login-box a{

color:#005540;

font-weight:bold;

text-decoration:none;

}

.login-box a:hover{

text-decoration:underline;

}

.free-exam-link{

display:block;

margin-top:20px;

}

@keyframes popup{

from{

transform:translateY(-50px);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

}


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

@media(max-width:1000px){

.footer-container{

grid-template-columns:repeat(2,1fr);

}

.contact-container{

grid-template-columns:1fr;

}

}

@media(max-width:900px){

.navbar{

padding:0 5%;

}

.nav-links{

display:none;

}

.hero{

flex-direction:column;

text-align:center;

}

.hero-text{

max-width:700px;

}

.hero h1{

font-size:38px;

}

.hero-buttons{

justify-content:center;

}

.hero-image img{

margin-top:40px;

}

}

@media(max-width:600px){

.navbar{

height:75px;

}

.logo{

width:58px;

height:58px;

}

.login-btn{

padding:10px 20px;

font-size:14px;

}

.hero{

padding:60px 6%;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:16px;

}

.section-title{

font-size:29px;

}

.services,
.features,
.pricing,
.contact-section{

padding:60px 6%;

}

.footer-container{

grid-template-columns:1fr;

gap:35px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-bottom-links{

justify-content:center;

}

.contact-info h2{

font-size:30px;

}

.social-links{

justify-content:center;

}

}
/* =====================================================
   PREMIUM LANGUAGE SWITCHER
===================================================== */

.language-switcher{

position:relative;

display:flex;

align-items:center;

gap:10px;

height:48px;

min-width:105px;

padding:0 17px;

border:1px solid rgba(0,85,64,.15);

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(255,255,255,.95),
rgba(244,250,247,.95)
);

color:#005540;

font-family:'Poppins',Arial,sans-serif;

font-size:14px;

font-weight:700;

cursor:pointer;

transition:all .35s ease;

box-shadow:

0 5px 20px rgba(0,85,64,.08),

inset 0 1px 0 rgba(255,255,255,.8);

overflow:hidden;

}

.language-switcher::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.7),
transparent
);

transition:.6s;

}

.language-switcher:hover::before{

left:100%;

}

.language-switcher:hover{

transform:translateY(-2px);

border-color:#005540;

box-shadow:

0 8px 25px rgba(0,85,64,.18);

}

.language-icon{

width:28px;

height:28px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#005540;

color:white;

font-size:13px;

transition:.35s;

}

.language-switcher:hover .language-icon{

transform:rotate(360deg);

}

.language-current{

min-width:22px;

text-align:center;

letter-spacing:.5px;

}

.language-arrow{

font-size:10px;

transition:.35s;

}

.language-switcher:hover .language-arrow{

transform:rotate(180deg);

}


/* =====================================================
   RTL LANGUAGE
===================================================== */

html[dir="rtl"] .navbar{

direction:rtl;

}

html[dir="rtl"] .nav-links{

direction:rtl;

}

html[dir="rtl"] .language-switcher{

direction:ltr;

}

html[dir="rtl"] .hero{

direction:rtl;

}

/* =====================================================
   LANGUAGE DIRECTION
===================================================== */

/* Arabic */
html[dir="rtl"] .hero-text {
    text-align: right;
}

html[dir="rtl"] .hero-buttons {
    justify-content: flex-start;
}

/* Dutch */
html[dir="ltr"] .hero-text {
    text-align: left;
}

html[dir="ltr"] .hero-buttons {
    justify-content: flex-start;
}


/* =====================================================
   MOBILE LANGUAGE DIRECTION
===================================================== */

@media (max-width: 900px) {

    html[dir="rtl"] .hero-text,
    html[dir="ltr"] .hero-text {
        text-align: center;
    }

    html[dir="rtl"] .hero-buttons,
    html[dir="ltr"] .hero-buttons {
        justify-content: center;
    }

}

html[dir="rtl"] .contact-container{

direction:rtl;

}

html[dir="rtl"] .contact-info{

text-align:right;

}

html[dir="rtl"] .contact-item{

direction:rtl;

}

html[dir="rtl"] .footer-container{

direction:rtl;

}

html[dir="rtl"] .footer-column{

text-align:right;

}

html[dir="rtl"] .footer-links a:hover{

padding-left:0;

padding-right:5px;

}

html[dir="rtl"] .footer-contact a{

direction:rtl;

}

html[dir="rtl"] .footer-bottom{

direction:rtl;

}

html[dir="rtl"] .login-box{

direction:rtl;

}

html[dir="rtl"] .login-box input{

text-align:right;

}

html[dir="rtl"] .password-wrapper input{

padding-right:15px;

padding-left:50px;

}

html[dir="rtl"] .toggle-password{

right:auto;

left:15px;

}


/* =====================================================
   MOBILE LANGUAGE SWITCHER
===================================================== */

@media(max-width:900px){

.language-switcher{

height:44px;

min-width:92px;

padding:0 13px;

gap:7px;

font-size:13px;

}

.language-icon{

width:25px;

height:25px;

font-size:12px;

}

}

@media(max-width:600px){

.navbar{

gap:10px;

}

.language-switcher{

min-width:auto;

width:45px;

height:45px;

padding:0;

justify-content:center;

}

.language-current{

display:none;

}

.language-arrow{

display:none;

}

.language-icon{

width:30px;

height:30px;

}

}


/* =========================================
   KNMES STATISTICS
========================================= */

#statistics-container {
    width: 100% !important;
    display: block !important;
    padding: 70px 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #f7faf9 !important;
}

#statistics-container .statistics-section {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: block !important;
}

#statistics-container .statistics-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;

    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    gap: 22px !important;

    align-items: stretch !important;
}

/* =========================================
   STAT CARD
========================================= */

#statistics-container .stat-card {
    width: 100% !important;
    min-height: 180px !important;

    padding: 30px 20px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;

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

    text-align: center !important;

    background: #ffffff !important;

    border-radius: 20px !important;

    border: 1px solid #e8eeee !important;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.06) !important;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}

/* =========================================
   ICON
========================================= */

#statistics-container .stat-card i {
    display: block !important;

    font-size: 34px !important;

    margin: 0 0 18px 0 !important;

    color: #006b57 !important;
}

/* =========================================
   NUMBER
========================================= */

#statistics-container .stat-card h3 {
    display: block !important;

    margin: 0 0 8px 0 !important;

    font-size: 30px !important;

    line-height: 1.2 !important;

    font-weight: 800 !important;

    color: #006b57 !important;
}

/* =========================================
   TITLE
========================================= */

#statistics-container .stat-card p {
    display: block !important;

    margin: 0 !important;

    font-size: 14px !important;

    line-height: 1.5 !important;

    font-weight: 600 !important;

    color: #687b78 !important;
}

/* =========================================
   HOVER
========================================= */

#statistics-container .stat-card:hover {
    transform: translateY(-7px) !important;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.10) !important;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    #statistics-container .statistics-container {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

}

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

@media (max-width: 650px) {

    #statistics-container {
        padding: 50px 15px !important;
    }

    #statistics-container .statistics-container {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 15px !important;
    }

    #statistics-container .stat-card {
        min-height: 150px !important;

        padding: 20px 10px !important;
    }

    #statistics-container .stat-card i {
        font-size: 28px !important;
    }

    #statistics-container .stat-card h3 {
        font-size: 24px !important;
    }

}

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

@media (max-width: 400px) {

    #statistics-container .statistics-container {
        grid-template-columns: 1fr !important;
    }

}


#noAccount {
    color: #555 !important;
    font-weight: 500;
}
/* =====================================================
   EXAM IMAGE SLIDER
===================================================== */

.exam-slider-section {
    padding: 70px 0;
}

.exam-slider {
    position: relative;
    width: min(1150px, 94%);
    margin: 35px auto 0;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    background: #fff;
}

.exam-slides {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
}

.exam-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease;
}

.exam-slide.active {
    opacity: 1;
    visibility: visible;
}

.exam-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* الأسهم */

.exam-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    width: 45px;
    height: 45px;

    border: none;
    border-radius: 50%;

    background: rgba(255,255,255,0.9);
    color: #005540;

    cursor: pointer;

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

    box-shadow: 0 5px 15px rgba(0,0,0,0.15);

    transition: 0.2s ease;
}

.exam-arrow:hover {
    transform: translateY(-50%) scale(1.08);
    background: #fff;
}

.exam-arrow.prev {
    right: 18px;
}

.exam-arrow.next {
    left: 18px;
}

/* النقاط */

.exam-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    gap: 8px;

    z-index: 5;
}

.exam-dot {
    width: 9px;
    height: 9px;

    padding: 0;
    border: none;
    border-radius: 50%;

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

    cursor: pointer;

    transition: 0.25s ease;
}

.exam-dot.active {
    width: 26px;
    border-radius: 10px;
    background: #fff;
}


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

@media (max-width: 700px) {

    .exam-slider {
        width: 94%;
        border-radius: 18px;
    }

    .exam-slides {
        aspect-ratio: 16 / 9;
    }

    .exam-arrow {
        width: 38px;
        height: 38px;
    }

    .exam-arrow.prev {
        right: 10px;
    }

    .exam-arrow.next {
        left: 10px;
    }

}