/* ===============================
   RESPONSIVE DESIGN
================================ */

/* ---------- Tablets & Small Laptops (≤ 992px) ---------- */
@media (max-width: 992px) {


    

    /* Hero */
   .home-hero h1{
        font-size: 2.5rem;
    }

    .program-home-hero h1{
        font-size: 2.5rem;
    }

    .about-hero-inner h2 {
        font-size: 2.5rem;
    }

    .therapist-hero-content h1 {
        font-size: 2.5rem;
    }

    .contact-hero-content h1{
        font-size: 2.5rem;
    }

    .join-hero-content h1{
        font-size: 2.5rem;
    }

    /* Navigation */
    nav ul {
        gap: 15px;
    }

    /* Therapists Grid */
    .therapists-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}


/* ---------- Tablets & Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {

    /* Navigation */
    .hamburger {
        display: block;
    }

    nav {
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;
    }

    nav ul {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: 0.4s ease;
        z-index: 1000;
    }

    nav ul.active {
        right: 0;
    }

    nav ul li a {
        font-size: 1.3rem;
    }

    /* Hero  */

    

    .home-hero h1{
        font-size: 2rem;
    }

    .program-home-hero h1{
        font-size: 2rem;
    }

    .about-hero-inner h2 {
        font-size: 2rem;
    }

    .therapist-hero-content h1 {
        font-size: 2rem;
    }

    .contact-hero-content h1{
        font-size: 2rem;
    }

    .join-hero-content h1{
        font-size: 2rem;
    }


   

    /* Forms */
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    /* Programs */
    .program-item {
        flex-direction: column !important;
    }

    .program-box {
        padding: 40px 25px !important;
    }

    .program-box h1 {
        font-size: 2.2rem !important;
    }

    .program-box h2 {
        font-size: 1.6rem !important;
    }

    /* About Page */
    .about-hero-inner {
        padding: 20px;
    }

    .about-hero-inner h2 {
        font-size: 2.2rem !important;
    }

    .about-text-content {
        padding: 25px;
    }

    /* Footer */
    .footer-nav-row {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .footer-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    .social-icons {
        margin-left: 0;
        justify-content: center;
    }
}


/* ---------- Mobile Devices (≤ 576px) ---------- */
@media (max-width: 576px) {

    /* Therapists */
    .therapists-grid {
        grid-template-columns: 1fr;
    }

    .therapist-card {
        padding: 20px;
    }
}


/* ---------- Small Mobile Devices (≤ 468px) ---------- */
@media (max-width: 468px) {

    /* Hero */


    .program-hero-content{
        padding: 30px 50px;
    }

    .home-hero h1{
        font-size: 1.2rem;
    }

    .program-home-hero h1{
        font-size: 1.2rem;
    }

    .about-hero-inner h2 {
        font-size: 1.2rem;
    }

    .therapist-hero-content h1 {
        font-size: 1.2rem;
    }

    .therapist-hero-content p{
        font-size: 0.8rem;
    }

    .contact-hero-content h1{
        font-size: 1.2rem;
    }
    .contact-hero-content p{
        font-size: 0.8rem;
    }

    .join-hero-content h1{
        font-size: 1.2rem;
    }

    .join-hero-content p {
        font-size: 0.8rem;
    }

    /* Forms */
    .checkbox-group {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-links {
        justify-content: center;
        gap: 15px;
        margin-bottom: 20px;
    }
}