/* css/courses.css */

/* Services Section */
.services-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
}

.services-section h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.services-section h2 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 3rem;
    color: #374151;
}

.services-section p.intro-text {
    font-size: 1.125rem;
    color: #4B5563;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}

.services-section .grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
}

/* Removes underline from card link */
a.course-card-link {
    text-decoration: none;
    color: inherit;
    display: block; /* Ensures proper layout */
}

/* Adds underline to h3 on hover */
a.course-card-link:hover .teach-card h3 {
    text-decoration: underline;
}


/* === CARD STYLES (MATCHING HOMEPAGE) === */
.services-section .teach-card {
    background-color: #FFFFFF;
    border-radius: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 300px;
    max-width: 340px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f0f0f0;
    height: 100%; /* Ensures cards in a link have full height */
}

.services-section .teach-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.services-section .teach-card-image-wrapper {
    padding: 1rem;
    background-color: #FFFFFF;
    border-radius: 1rem;
    margin: 0rem;
}

.services-section .teach-card img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 1rem;
}

.services-section .teach-card-content {
    padding: 0 1.5rem 1.5rem;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.services-section .teach-card h3 {
    color: #ad5207;
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0rem;
    transition: text-decoration 0.2s ease; /* Smooth transition for underline */
}

.services-section .teach-card p {
    color: #374151;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}
/* === END OF CARD STYLES === */

/* --- Methodology Section Styles --- */
.methodology-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #fffaf2;
    text-align: center;
}

.methodology-section h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: #ad5207;
}

.methodology-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.methodology-item {
    text-align: center;
}

.methodology-icon {
    font-size: 2.5rem;
    color: #e88e07;
    margin-bottom: 1rem;
}

.methodology-item h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ad5207;
    margin-bottom: 0.5rem;
}

.methodology-item p {
    font-size: 1rem;
    color: #4B5563;
    line-height: 1.6;
}


/* --- Other Courses Section Styles --- */
.other-courses-section {
    padding-top: 3rem;
    padding-bottom: 4rem;
    background-color: #FFFFFF; /* White background */
    text-align: center;
}

.other-courses-section h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: #ad5207;
}

.other-courses-section .courses-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 800px;
    display: grid;
    grid-template-columns: 1fr; /* 1 column on mobile */
    gap: 0.75rem; /* Space between list items */
}

.other-courses-section .courses-list li {
    padding: 1.25rem;
    border-bottom: 1px solid #e5e7eb; /* Subtle separator */
    font-size: 1.125rem;
    font-weight: 500;
    color: #374151;
    text-align: left;
    transition: background-color 0.3s ease;
}

.other-courses-section .courses-list li:last-child {
    border-bottom: none; /* No border on the last item */
}

.other-courses-section .courses-list li:hover {
    background-color: #fffaf2; /* Light hover effect */
}

/* --- NEW: Platform Section --- */
.platform-section {
    padding: 3rem 0;
    background-color: #FFFFFF;
    text-align: center;
}

.platform-section h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: #ad5207;
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.platform-item {
    text-align: center;
}

.platform-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.fa-video { color: #2D8CFF; } /* Zoom Blue */
.fa-google { color: #4285F4; } /* Google Blue */
.fa-whatsapp { color: #25D366; } /* WhatsApp Green */


.platform-item h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #374151;
}


/* --- Call to Action Section --- */
.cta-section {
    background-color: #ad5207;
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    justify-items: center;
}

.cta-text h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: white; /* Ensure heading is white */
    margin-bottom: 1rem;
}

.cta-text p {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.cta-text .btn-primary {
    background-color: white;
    color: #ad5207;
    padding: 0.75rem 2.5rem;
}

.cta-text .btn-primary:hover {
    background-color: #f3f4f6;
}

.cta-image img {
    width: 100%;
    max-width: 400px;
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}


/* ====== RESPONSIVE STYLES ====== */

@media (min-width: 540px) {
    .other-courses-section .courses-list {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on small tablets */
        column-gap: 2rem; /* Add horizontal gap */
    }

    /* Add vertical borders for multi-column layout */
    .other-courses-section .courses-list li:nth-child(odd) {
        border-right: 1px solid #e5e7eb;
    }
}

@media (min-width: 768px) {
    .services-section h1, .services-section h2 {
        font-size: clamp(2.5rem, 5vw, 3rem);
    }
    
    .other-courses-section h2, .platform-section h2 {
        font-size: 2.25rem;
    }

    .other-courses-section .courses-list {
        grid-template-columns: repeat(2, 1fr); /* Stick to 2 columns for a cleaner look */
    }

    .methodology-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* MODIFIED: Ensure CTA is centered on desktop */
    .cta-grid {
        grid-template-columns: 1fr; /* Changed from 1fr 1fr to 1fr */
        gap: 2rem;
    }

    .cta-image {
        display: none; /* Optional: Hide image on desktop to simplify centered layout */
    }
}