/**
 * Responsive CSS for WISDOM FOUNDATION Website
 * This file contains responsive styling for different screen sizes
 */

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .hero-slider .carousel-item {
        height: 700px;
    }
    
    .hero-slider h2 {
        font-size: 3.5rem;
    }
    
    .hero-slider p {
        font-size: 1.35rem;
    }
    
    .section-title h2 {
        font-size: 3rem;
    }
    
    .quick-link-box {
        padding: 3rem 2rem;
    }
    
    .about-text h2 {
        font-size: 3rem;
    }
    
    .about-text p {
        font-size: 1.2rem;
    }
}

/* Large Devices (desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-slider .carousel-item {
        height: 600px;
    }
    
    .hero-slider h2 {
        font-size: 3rem;
    }
    
    .hero-slider p {
        font-size: 1.25rem;
    }
    
    .section-title h2 {
        font-size: 2.5rem;
    }
    
    header h1 {
        font-size: 1.75rem;
    }
    
    .navbar-dark .navbar-nav .nav-link {
        padding: 1rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Medium Devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-slider .carousel-item {
        height: 500px;
    }
    
    .hero-slider h2 {
        font-size: 2.5rem;
    }
    
    .hero-slider p {
        font-size: 1.1rem;
    }
    
    .hero-slider .carousel-caption {
        max-width: 500px;
    }
    
    .section-title h2 {
        font-size: 2.25rem;
    }
    
    header h1 {
        font-size: 1.5rem;
    }
    
    header p {
        font-size: 0.8rem;
    }
    
    .navbar-dark .navbar-nav .nav-link {
        padding: 0.75rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .navbar-dark .navbar-nav .nav-link i {
        margin-right: 0.25rem;
    }
    
    .quick-link-box {
        padding: 1.5rem 1rem;
    }
    
    .quick-link-box h3 {
        font-size: 1.25rem;
    }
    
    .quick-link-box i {
        font-size: 2.5rem;
    }
    
    .team-card h3 {
        font-size: 1.25rem;
    }
    
    .about-text h2 {
        font-size: 2rem;
    }
    
    .about-text p {
        font-size: 1rem;
    }
    
    .about-feature-icon {
        width: 40px;
        height: 40px;
    }
    
    .about-feature-icon i {
        font-size: 1.25rem;
    }
    
    .about-feature-text h4 {
        font-size: 1.1rem;
    }
    
    .footer-heading {
        font-size: 1.1rem;
    }
    
    .contact-form {
        padding: 1.5rem;
    }
    
    .contact-form h3 {
        font-size: 1.5rem;
    }
    
    .contact-info-icon {
        width: 60px;
        height: 60px;
    }
    
    .contact-info-icon i {
        font-size: 1.5rem;
    }
    
    .contact-info-content h4 {
        font-size: 1.1rem;
    }
}

/* Small Devices (landscape phones, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .hero-slider .carousel-item {
        height: 400px;
    }
    
    .hero-slider h2 {
        font-size: 2rem;
    }
    
    .hero-slider p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .hero-slider .carousel-caption {
        max-width: 400px;
    }
    
    .hero-slider .btn {
        padding: 0.5rem 1.5rem;
        font-size: 0.875rem;
    }
    
    .section-title h2 {
        font-size: 2rem;
    }
    
    header {
        text-align: center;
    }
    
    header h1 {
        font-size: 1.5rem;
    }
    
    header p {
        font-size: 0.75rem;
    }
    
    .logo img {
        max-height: 60px;
    }
    
    .quick-links {
        margin-top: 0;
    }
    
    .quick-link-box {
        margin-bottom: 1.5rem;
    }
    
    .about-image {
        margin-bottom: 2rem;
    }
    
    .about-text h2 {
        font-size: 1.75rem;
    }
    
    .team-card {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .testimonial-card {
        text-align: center;
    }
    
    .testimonial-card img {
        margin-bottom: 1.5rem;
    }
    
    .testimonial-content {
        padding-left: 0;
    }
    
    .testimonial-content i {
        position: static;
        display: block;
        margin-bottom: 1rem;
    }
    
    .contact-info-box {
        margin-bottom: 1.5rem;
    }
    
    .contact-form {
        margin-top: 2rem;
    }
    
    footer {
        text-align: center;
    }
    
    .footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-contact-info li {
        justify-content: center;
    }
    
    .footer-social {
        justify-content: center;
    }
}

/* Extra Small Devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    .hero-slider .carousel-item {
        height: 350px;
    }
    
    .hero-slider h2 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .hero-slider p {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
    
    .hero-slider .carousel-caption {
        max-width: 300px;
        left: 5%;
    }
    
    .hero-slider .btn {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        margin-right: 0.5rem;
    }
    
    .section-title h2 {
        font-size: 1.75rem;
    }
    
    header {
        text-align: center;
        padding: 1rem 0;
    }
    
    header h1 {
        font-size: 1.25rem;
    }
    
    header p {
        font-size: 0.7rem;
    }
    
    .logo img {
        max-height: 50px;
    }
    
    .top-bar {
        text-align: center;
    }
    
    .top-bar .social-icons,
    .top-bar .contact-info {
        margin-bottom: 0.5rem;
    }
    
    .quick-links {
        margin-top: 0;
    }
    
    .quick-link-box {
        margin-bottom: 1.5rem;
    }
    
    .about-image {
        margin-bottom: 2rem;
    }
    
    .about-text h2 {
        font-size: 1.5rem;
    }
    
    .about-text p {
        font-size: 0.875rem;
    }
    
    .team-card {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .testimonial-card {
        text-align: center;
        padding: 1.5rem;
    }
    
    .testimonial-card img {
        margin-bottom: 1.5rem;
        width: 80px;
        height: 80px;
    }
    
    .testimonial-content {
        padding-left: 0;
    }
    
    .testimonial-content i {
        position: static;
        display: block;
        margin-bottom: 1rem;
    }
    
    .testimonial-content p {
        font-size: 0.875rem;
    }
    
    .contact-info-box {
        margin-bottom: 1.5rem;
        padding: 1.5rem;
    }
    
    .contact-form {
        margin-top: 2rem;
        padding: 1.5rem;
    }
    
    .contact-form h3 {
        font-size: 1.5rem;
    }
    
    footer {
        text-align: center;
        padding: 3rem 0 1rem;
    }
    
    .footer-heading {
        font-size: 1.25rem;
    }
    
    .footer-heading::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-contact-info li {
        justify-content: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-bottom {
        margin-top: 2rem;
        font-size: 0.75rem;
    }
}