/* 
   DESIGN SYSTEM
   Font: Almarai
   Colors: 
     Primary Green: #2FA7A0
     Primary Orange (CTA): #E85C3A
     Background Light: #F7F4EF
     Text Dark: #3A3A3A
     White: #FFFFFF
*/

:root {
    --primary-color: #2FA7A0;
    --primary-hover: #268c86;
    --cta-color: #E85C3A;
    --cta-hover: #d14928;
    --secondary-color: #2FA7A0;
    --background-color: #F7F4EF;
    --surface-color: #FFFFFF;
    --text-color: #3A3A3A;
    --text-light: #666666;
    --border-radius: 12px;
    --shadow-sm: 0 4px 6px rgba(47, 167, 160, 0.1);
    --shadow-md: 0 10px 15px rgba(47, 167, 160, 0.15);
    --font-main: 'Almarai', sans-serif;
}

/* Global Button & Icon Overrides to Orange */
.btn-primary {
    background-color: var(--cta-color) !important;
    border-color: var(--cta-color) !important;
    color: #fff;
}

.btn-primary:hover {
    background-color: #d64d2e !important;
    /* Darker Orange */
    border-color: #d64d2e !important;
}

i,
.fas,
.fab,
.far {
    color: var(--cta-color) !important;
}


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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    direction: rtl;
    text-align: right;
    overflow-x: hidden;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

h1,
h2,
h3,
h4 {
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--cta-color);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--cta-hover);
    transform: translateY(-2px);
}

.btn-outline {
    border-color: var(--cta-color);
    color: var(--cta-color);
    background: transparent;
}

.btn-outline:hover {
    background-color: var(--cta-color);
    color: #fff;
}

.btn-sm {
    padding: 8px 20px;
    font-size: 0.9rem;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 5px;
}

.btn-sm:hover {
    background-color: var(--primary-hover);
}

.block {
    display: block;
    width: 100%;
}

/* 1️⃣ Header */
.header {
    background-color: var(--surface-color);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 92px;
}

.nav-menu ul {
    display: flex;
    gap: 30px;
}

.nav-menu a {
    color: var(--text-color);
    font-weight: 600;
}

.nav-menu a:hover {
    color: var(--primary-color);
}

.mobile-menu-btn {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
}

/* 2️⃣ Hero Section */
/* 2️⃣ Hero Section */
.hero-section {
    padding: 120px 0;
    background-color: #F7F4EF;
    /* Harmonious Green Overlay similar to reference & brand primary */
    background-image:
        linear-gradient(rgba(47, 167, 160, 0.9), rgba(30, 110, 105, 0.95)),
        url('assets/0c731cac6e0e751f902597cb7761828e-scaled.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    background-attachment: fixed;
    text-align: center;
}

.hero-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content h3 {
    font-size: 1.5rem;
    color: #fff;
    /* White text for harmony */
    margin-bottom: 20px;
    font-weight: 500;
    opacity: 0.9;
}

.hero-content h1,
.hero-content h2 {
    font-size: 3rem;
    /* Larger, clearer title */
    line-height: 1.4;
    margin-bottom: 25px;
    color: #fff;
    font-weight: 800;
}

.hero-content p {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 40px;
    line-height: 1.8;
    opacity: 0.95;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Hide the side image as per reference centered layout */
.hero-image {
    display: none;
}

/* Buttons centered */
.hero-content .btn {
    padding: 15px 40px;
    font-size: 1.1rem;
    border-radius: 50px;
    background-color: var(--cta-color);
    /* Orange CTA pops against Green bg */
    border: none;
    color: #fff;
}

.hero-content .btn:hover {
    background-color: #d64d2e;
    transform: translateY(-2px);
}

.hero-image img {
    /* Keep this just in case, but parent is hidden */
    display: none;
}

/* 3️⃣ Highlights */
.highlights-section {
    margin-top: -120px;
    /* Pull up to overlap Hero */
    padding-bottom: 50px;
    position: relative;
    z-index: 20;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.highlight-card {
    background: var(--surface-color);
    padding: 25px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s;
    border-bottom: 4px solid var(--primary-color);
}

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

.highlight-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.highlight-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--text-color);
}

.highlight-card p {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* 4️⃣ About Section */
.about-section {
    padding: 80px 0;
}

.about-container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-image {
    flex: 1;
}

.about-image img {
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}

.about-content {
    flex: 1;
}

.about-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.about-content p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: var(--text-light);
}

/* 5️⃣ Our Mission */
.mission-section {
    padding: 80px 0;
    background-color: var(--cta-color);
    /* Orange */
    /* Add background image mixed with orange */
    background-image:
        linear-gradient(rgba(232, 92, 58, 0.9), rgba(232, 92, 58, 0.95)),
        url('assets/0c731cac6e0e751f902597cb7761828e-scaled.webp');
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

.mission-box h2 {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.mission-box p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.95;
    color: #fff;
    line-height: 1.8;
}

/* 6️⃣ Our Goals */
/* 6️⃣ Our Goals */
.goals-section {
    padding: 80px 0;
    background-image:
        linear-gradient(rgba(247, 244, 239, 0.95), rgba(247, 244, 239, 0.95)),
        url('assets/hat-stock388440 1.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin: 0 auto 50px;
    position: relative;
    display: block;
    width: 100%;
    color: var(--primary-color);
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--cta-color);
    margin: 15px auto 0;
    border-radius: 2px;
}

.goals-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.goal-item {
    background: var(--surface-color);
    border: 1px solid #eee;
    padding: 20px 30px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: var(--shadow-sm);
}

.goal-item:hover {
    border-color: var(--cta-color);
}

.goal-item i {
    color: var(--cta-color);
    font-size: 1.5rem;
}

.goal-item span {
    font-weight: 700;
}

/* 7️⃣ Our Vision */
.vision-section {
    padding: 80px 0;
    background-color: #fafafa;
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.vision-content h2 {
    font-size: 2.5rem;
}

.vision-content p {
    font-size: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
    color: var(--text-light);
}

/* 8️⃣ Our Programs */
.programs-section {
    padding: 80px 0;
    background-image:
        linear-gradient(rgba(247, 244, 239, 0.85), rgba(247, 244, 239, 0.90)),
        url('assets/gtte 9.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.program-card {
    background: var(--surface-color);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s;
    border: 1px solid #f0f0f0;
}

.program-card:hover {
    transform: translateY(-5px);
    border-bottom: 4px solid var(--primary-color);
}

.program-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.p-content {
    padding: 20px;
    text-align: center;
}

.p-content h3 {
    margin-bottom: 10px;
    font-size: 1.3rem;
    color: var(--cta-color);
    /* Orange Headline as requested */
    font-weight: 700;
}

.p-content p {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 20px;
}

.p-content .btn {
    background-color: var(--cta-color);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 0.9rem;
    display: inline-block;
    width: 100%;
    /* Optional: make it full width if desired for better touch target */
}

.p-content .btn:hover {
    background-color: #d64d2e;
}

/* 9️⃣ Certificates */
.certificates-section {
    padding: 80px 0;
    background: #FAFAFA;
}

.certs-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.cert-item img {
    border: 5px solid #fff;
    box-shadow: var(--shadow-sm);
    max-width: 300px;
}

/* 🔟 Why Choose Us */
.features-section {
    padding: 80px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feature-box {
    text-align: center;
    padding: 30px;
    border: 1px solid #ddd;
    border-radius: 15px;
    transition: all 0.3s;
    background: var(--surface-color);
}

.feature-box:hover {
    border-color: var(--cta-color);
    background: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.feature-box i {
    font-size: 2.5rem;
    color: var(--cta-color);
    margin-bottom: 15px;
}

.feature-box h4 {
    color: var(--text-color);
    margin: 0;
    font-weight: 700;
}

/* 1️⃣1️⃣ Plans */
/* 1️⃣1️⃣ Plans */
.plans-section {
    padding: 80px 0;
    background: #fff;
}

.plans-split-container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.plans-content {
    flex: 1;
}

.plans-content p {
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 20px;
}

.plans-content .highlight-text {
    font-weight: 700;
    color: var(--primary-color);
    background-color: rgba(47, 167, 160, 0.1);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 25px;
    border-right: 4px solid var(--primary-color);
}

.plans-image {
    flex: 1;
}

.plans-image img {
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    width: 100%;
}

@media (max-width: 768px) {
    .plans-split-container {
        flex-direction: column;
        text-align: center;
    }

    .plans-content .section-title {
        text-align: center !important;
    }

    .plans-image {
        margin-top: 30px;
    }
}

/* 1️⃣2️⃣ Testimonials (Now Slider) */
/* 1️⃣2️⃣ Testimonials (Now Slider) */
.testimonials-section {
    padding: 80px 0;
    overflow: hidden;
    background-image:
        linear-gradient(rgba(247, 244, 239, 0.95), rgba(247, 244, 239, 0.95)),
        url('assets/0c731cac6e0e751f902597cb7761828e-scaled.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Slider Styles */
.slider-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}

.certificates-section .slider-container {
    max-width: 100%;
}

.certificates-section .slider-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    transition: none;
}

.certificates-section .slide-item {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
}

.certificates-section .slider-btn {
    display: none;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 20px;
}

.slide-item {
    flex: 0 0 calc(100% - 20px);
    box-sizing: border-box;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-item:hover {
    transform: scale(1.02);
}

.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

@media (min-width: 768px) {
    .slide-item {
        flex: 0 0 calc(50% - 20px);
    }
}

@media (min-width: 1024px) {
    .slide-item {
        flex: 0 0 calc(33.333% - 20px);
    }
}

/* Slider Navigation Buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: all 0.3s;
}

.slider-btn:hover {
    background-color: var(--cta-color);
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    right: 0;
}

.next-btn {
    left: 0;
}


/* 🖼️ Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80vh;
    animation-name: zoom;
    animation-duration: 0.6s;
    border-radius: 5px;
    border: 2px solid #fff;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2001;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--cta-color);
    text-decoration: none;
    cursor: pointer;
}

.lightbox-prev,
.lightbox-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    z-index: 2002;
    background-color: rgba(0, 0, 0, 0.5);
}

.lightbox-next {
    right: 10px;
    border-radius: 3px 0 0 3px;
}

.lightbox-prev {
    left: 10px;
    border-radius: 0 3px 3px 0;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background-color: rgba(232, 92, 58, 0.8);
}

@media (min-width: 768px) {
    .testimonial-card {
        flex: 0 0 calc(50% - 15px);
        /* 2 slides */
    }
}

@media (min-width: 1024px) {
    .testimonial-card {
        flex: 0 0 calc(33.333% - 20px);
        /* 3 slides */
    }
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.slider-btn:hover {
    opacity: 1;
}

.prev-btn {
    right: 0;
    /* RTL arrow position */
}

.next-btn {
    left: 0;
    /* RTL arrow position */
}


.wa-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: #2e7d32;
    margin-bottom: 10px;
}

.wa-body {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    font-size: 0.95rem;
}

/* 1️⃣3️⃣ Contact */
.contact-section {
    padding: 80px 0;
    position: relative;
    background-image:
        linear-gradient(rgba(232, 92, 58, 0.60), rgba(232, 92, 58, 0.60)),
        url('assets/0c731cac6e0e751f902597cb7761828e-scaled.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.contact-section .section-title {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.contact-section .section-title::after {
    background-color: #fff;
}

.contact-grid {
    display: flex;
    gap: 30px;
    direction: rtl;
}

.contact-card {
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    flex: 1;
}

.form-card {
    background: #c5e1a5;
    /* Match reference light green form bg if desired, or keep white? Ref has Green for both? No, Right is Form, Left is Info. 
                           Actually, Ref image shows both boxes are light green. Let's make them light green #dcedc8 or similar. */
    background: #AED581;
    /* A bit darker green for form? or Light? Let's use #C5E1A5 */
    background: #dcedc8;
}

.info-card {
    background: #dcedc8;
}

/* Let's try to match the reference more closely. It looks like a single faint green container or two green columns. 
   User said "Background be the image + Overlay Orange". So the cards sit ON TOP of the orange overlay. 
   The cards themselves in the reference are GREEN. So I will make them Green. */

.form-card h3,
.info-card h3 {
    text-align: center;
    color: #333;
    /* Dark text for headers in the green box */
    margin-bottom: 25px;
    font-size: 1.1rem;
    /* Smaller font for "Team ready to serve..." */
    line-height: 1.5;
    font-weight: 700;
}

.contact-form .form-group {
    margin-bottom: 15px;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    color: #333;
    font-size: 0.9rem;
    text-align: right;
    /* Ensure label is right aligned */
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #fff;
    /* White border or none */
    border-radius: 5px;
    font-family: inherit;
    background-color: #fff;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.contact-form .btn {
    width: 100%;
    /* Full width button */
    border-radius: 5px;
    /* Square/Small radius */
}

/* Info Side Styles */
.info-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically if needed */
}

.info-divider {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 15px 0;
    width: 100%;
}

.info-row {
    text-align: center;
    margin-bottom: 10px;
}

.info-row i {
    font-size: 2.5rem;
    /* Larger icons */
    color: #333;
    margin-bottom: 15px;
    display: block;
}

.info-row h4 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 5px;
    font-weight: 800;
}

.info-row p {
    font-size: 1rem;
    color: #333;
    margin: 0;
}

@media (max-width: 768px) {
    .contact-grid {
        flex-direction: column;
    }
}

/* Footer */
.footer {
    background: #252525;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer .credit {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-top: 10px;
}

/* Whatsapp Float */
/* Whatsapp Float */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: #FFF !important;
    /* Force text to be white */
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.whatsapp-float i {
    color: #FFF !important;
    /* Force icon to be white, overriding global Orange */
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1);
}



/* RESPONSIVE */
@media (max-width: 1024px) {

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

@media (max-width: 768px) {
    .header-container {
        padding: 0 20px;
    }

    .logo img {
        height: 78px;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--surface-color);
        box-shadow: var(--shadow-md);
        padding: 20px;
    }

    .nav-menu.active {
        display: block;
    }

    .nav-menu ul {
        flex-direction: column;
        text-align: center;
    }

    .header-actions .btn {
        display: none;
        /* Hide main CTA on mobile header if needed or keep */
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero-container,
    .about-container,
    .contact-container {
        flex-direction: column;
        text-align: center;
    }

    .about-image {
        order: -1;
    }

    .highlights-section {
        margin-top: 0;
    }

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

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

    .plans-split-container {
        flex-direction: column !important;
    }

    .plans-content,
    .plans-image {
        width: 100%;
    }

    .plans-image {
        order: -1;
    }

    h2,
    .section-title {
        font-size: 30px !important;
    }
}

@media (max-width: 425px) {
    .spanss {
        font-size: 26px !important;
    }
}