/*
* Hope Foundation - Responsive Stylesheet
* Responsive styles for all devices
*/

/* Extra Small Devices (phones, 575px and down) */
@media (max-width: 575px) {
    /* General */
    .section-title {
        font-size: 1.8rem;
    }
    
    /* Hero Section */
    .hero-section {
        height: 90vh;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-text {
        font-size: 1rem;
    }
    
    /* Page Banner */
    .page-banner {
        height: 200px;
        margin-top: 56px; /* Adjusted for smaller navbar */
    }
    
    .banner-title {
        font-size: 2rem;
    }
    
    /* Programs Section */
    .program-card {
        padding: 1.5rem;
    }
    
    /* Impact Section */
    .impact-number {
        font-size: 2.5rem;
    }
    
    .impact-text {
        font-size: 1rem;
    }
    
    /* Donate Page */
    .donation-form-container {
        padding: 1.5rem;
    }
    
    /* News Page */
    .featured-news-img {
        height: 250px;
    }
    
    .news-date {
        left: 20px;
        padding: 0.75rem;
    }
    
    .news-date .date {
        font-size: 1.5rem;
    }
    
    .news-title {
        font-size: 1.5rem;
    }
    
    /* Timeline (About Page) */
    .timeline::after {
        left: 31px;
    }
    
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    
    .timeline-item::after {
        left: 18px;
    }
    
    .right {
        left: 0%;
    }
}

/* Small Devices (landscape phones, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    /* Hero Section */
    .hero-title {
        font-size: 2.5rem;
    }
    
    /* Page Banner */
    .page-banner {
        margin-top: 56px; /* Adjusted for smaller navbar */
    }
    
    /* Timeline (About Page) */
    .timeline::after {
        left: 31px;
    }
    
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    
    .timeline-item::after {
        left: 18px;
    }
    
    .right {
        left: 0%;
    }
}

/* Medium Devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    /* Hero Section */
    .hero-title {
        font-size: 3rem;
    }
    
    /* Programs Section */
    .program-card {
        margin-bottom: 1.5rem;
    }
    
    /* Team Section */
    .team-card {
        margin-bottom: 1.5rem;
    }
}

/* Large Devices (desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    /* No specific styles needed for this breakpoint as the default styles work well */
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1180px;
    }
    
    /* Hero Section */
    .hero-title {
        font-size: 4rem;
    }
}

/* Specific Component Responsiveness */

/* Navbar */
@media (max-width: 991px) {
    .navbar-nav {
        padding: 1rem 0;
    }
    
    .navbar-nav .nav-item {
        margin: 0.25rem 0;
    }
    
    .donate-btn {
        margin-left: 0;
        margin-top: 0.5rem;
        display: inline-block;
    }
}

/* Cards and Grids */
@media (max-width: 767px) {
    .value-card, 
    .program-card, 
    .involvement-card, 
    .impact-card, 
    .support-card, 
    .contact-info-card,
    .partnership-card {
        margin-bottom: 1.5rem;
    }
    
    .vision-card, 
    .mission-card {
        margin-bottom: 1.5rem;
    }
    
    .story-card {
        margin-bottom: 1.5rem;
    }
    
    .news-card {
        margin-bottom: 1.5rem;
    }
}

/* Forms */
@media (max-width: 575px) {
    .form-group {
        margin-bottom: 1rem;
    }
    
    .btn-lg {
        padding: 0.5rem 1.2rem;
        font-size: 1rem;
    }
}

/* Donation Form */
@media (max-width: 767px) {
    .donation-amount-options .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* CTA Sections */
@media (max-width: 575px) {
    .cta-title {
        font-size: 1.8rem;
    }
    
    .cta-text {
        font-size: 1rem;
    }
    
    .cta-buttons .btn {
        margin: 0 0.3rem 1rem;
        display: block;
        width: 100%;
    }
}

/* Footer */
@media (max-width: 991px) {
    .footer-title {
        margin-top: 1.5rem;
    }
}

/* Program Navigation Pills */
@media (max-width: 767px) {
    .program-nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 1rem;
    }
    
    .program-nav-pills .nav-link {
        white-space: nowrap;
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    }
}

/* News Sidebar */
@media (max-width: 767px) {
    .news-sidebar {
        margin-bottom: 2rem;
    }
}

/* Partnership Logos */
@media (max-width: 575px) {
    .partner-logos {
        gap: 15px;
    }
    
    .partner-logo {
        flex: 0 0 45%;
    }
}
@media (max-width: 1200px) {
    .sdg-hexagon { width: 140px; height: 155px; }
    .sdg-title .title-line2 { font-size: 2.1rem; }
}
@media (max-width: 991.98px) {
    .sdg-hexagon { width: 120px; height: 135px; }
    .sdg-title .title-line2 { font-size: 1.7rem; }
}
@media (max-width: 767.98px) {
    .sdg-hexagon { width: 90px; height: 100px; margin: 0 6px 12px 6px; }
    .sdg-title .title-line2 { font-size: 1.1rem; }
    .sdg-title .title-line1 { font-size: 0.9rem; }
    .sdg-hexagon .icon-svg { width: 32px; height: 32px; }
    .sdg-hexagon .text-label { font-size: 0.6rem; }
    .sdg-hexagon .number-label { font-size: 0.7rem; }
}
@media (max-width: 991.98px) {
    .sdg-hexagon { width: 120px; height: 138px; }
    .sdg-title .title-line2 { font-size: 2rem; }
}
@media (max-width: 767.98px) {
    .sdg-hexagon { width: 100px; height: 115px; margin: 0 8px 16px 8px; }
    .sdg-title .title-line2 { font-size: 1.3rem; }
    .sdg-title .title-line1 { font-size: 1rem; }
}
@media (max-width: 575.98px) {
    .sdg-hexagon { width: 80px; height: 92px; }
    .icon-svg { width: 32px; height: 32px; }
    .text-label { font-size: 0.7rem; }
    .number-label { font-size: 0.85rem; }
}
@media (max-width: 991.98px) {
    .hero-section {
        min-height: 55vh;     /* Increase for tablets */
    }
    .hero-section .carousel-item img {
        height: 55vh;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        min-height: 35vh;     /* Slightly less for mobile */
    }
    .hero-section .carousel-item img {
        height: 35vh;
    }
}