/* Mobile Responsive Styles */

/* Header Mobile Styles */
@media (max-width: 767px) {
    header .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    header nav {
        display: none !important;
    }
    
    header .flex.items-center.h-20 {
        justify-content: space-between;
    }
    
    header .flex.items-center.gap-4 {
        gap: 0.5rem;
    }
    
    header button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    header img[alt="Vision"] {
        display: none !important;
    }
}

/* Mobile Sidebar Menu */
.mobile-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.mobile-sidebar.active {
    display: block;
}

.mobile-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.mobile-sidebar-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    background: #343439;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.mobile-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-sidebar-close {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.mobile-sidebar-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.mobile-sidebar-body {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-sidebar-link {
    display: block;
    padding: 1rem 1.25rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.75rem;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.mobile-sidebar-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.mobile-sidebar-link.active {
    color: white;
    background: rgba(29, 153, 139, 0.2);
    border-color: rgba(29, 153, 139, 0.4);
    font-weight: 600;
}

.mobile-sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-sidebar-item {
    width: 100%;
}

.mobile-sidebar-button {
    width: 100%;
}

/* Hero Section Mobile - Target section with h-[600px] class */
@media (max-width: 767px) {
    section.relative.h-\[600px\] {
        height: auto !important;
        min-height: 500px !important;
        padding: 2rem 0 !important;
    }
    
    .hero-slide h1 {
        font-size: 2rem !important;
        line-height: 1.3;
    }
    
    .hero-slide p {
        font-size: 1rem !important;
    }
    
    .hero-slide-image {
        margin-top: 2rem;
    }
    
    .hero-slide-image img {
        max-height: 300px !important;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-buttons button {
        width: 100%;
    }
    
    section.relative .flex.gap-4 {
        flex-direction: column;
    }
    
    section.relative .flex.gap-4 button {
        width: 100%;
    }
}

/* About Section Mobile */
@media (max-width: 967px) {
    .about-content {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    
    .about-text h2 {
        font-size: 2.5rem !important;
    }
    
    .about-text p {
        font-size: 1.125rem !important;
    }
    
    .about-features {
        grid-template-columns: 1fr !important;
    }
    
    .about-video video,
    .about-video iframe {
        min-height: 300px !important;
    }
}

/* Stats Section Mobile */
@media (max-width: 767px) {
    .stats-section {
        margin-top: -2rem !important;
        padding: 1rem;
    }
    
    .stats-section .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.5rem !important;
    }
    
    .stat-number {
        font-size: 2rem !important;
    }
    
    .stat-label {
        font-size: 0.875rem !important;
    }
}

/* Services Section Mobile */
@media (max-width: 767px) {
    section[style*="14.png"] {
        padding: 3rem 0 !important;
    }
    
    section[style*="14.png"] h2 {
        font-size: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    section[style*="14.png"] .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .service-card {
        padding: 1.5rem !important;
    }
    
    .service-card img {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 1rem !important;
    }
    
    .service-card a,
    .service-card button {
        font-size: 0.75rem !important;
        padding: 0.75rem 1rem !important;
    }
}

/* Why Section Mobile */
@media (max-width: 1023px) {
    section.relative.bg-primary {
        padding: 3rem 0 !important;
    }
    
    section.relative.bg-primary .grid.lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    
    section.relative.bg-primary h2 {
        font-size: 2rem !important;
    }
    
    section.relative.bg-primary .grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }
}

/* Service Detail Page Mobile */
@media (max-width: 967px) {
    .service-detail-section {
        padding: 4rem 0 2rem !important;
    }
    
    .service-content {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
    
    .service-text h1 {
        font-size: 2rem !important;
    }
    
    .service-text p {
        font-size: 1rem !important;
    }
    
    .service-icon-wrapper {
        width: 60px !important;
        height: 60px !important;
    }
    
    .service-icon-wrapper .material-icons-outlined {
        font-size: 36px !important;
    }
    
    .service-image-wrapper {
        margin-top: 1rem;
    }
}

/* Request Form Mobile */
@media (max-width: 767px) {
    .request-form-section {
        padding: 3rem 0 !important;
    }
    
    .request-form-section h2 {
        font-size: 2rem !important;
    }
    
    .request-form-section .max-w-3xl {
        padding: 0 1rem;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: 0.875rem !important;
        padding: 0.75rem !important;
    }
    
    .form-group button {
        width: 100%;
        padding: 1rem !important;
    }
}

/* Footer Mobile */
@media (max-width: 1023px) {
    footer .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem;
    }
}

@media (max-width: 767px) {
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        text-align: center;
        display: grid !important;
    }
    
    /* Move Rewa section (last div) to first position and make it full width */
    footer .grid > div:last-child {
        order: -1;
        grid-row: 1;
        grid-column: 1 / -1;
        width: 100%;
    }
    
    footer ul {
        align-items: center;
    }
}

/* Vision/Mission Section Mobile */
@media (max-width: 767px) {
    .vision-content .flex.flex-col {
        gap: 2rem !important;
    }
    
    .vision-content h3 {
        font-size: 1.5rem !important;
    }
    
    .vision-content .material-icons-outlined {
        font-size: 3rem !important;
    }
    
    .vision-content p {
        font-size: 1rem !important;
    }
}

/* Partners Section Mobile */
@media (max-width: 767px) {
    .partners-slider-row img {
        height: 3rem !important;
        margin: 0 1rem !important;
    }
}

/* General Mobile Adjustments */
@media (max-width: 767px) {
    .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    section {
        padding: 3rem 0 !important;
    }
    
    section.py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    /* WhatsApp and Scroll buttons */
    .fixed.bottom-6 {
        bottom: 1rem !important;
    }
    
    .fixed.bottom-6.left-6 {
        left: 1rem !important;
        width: 3rem !important;
        height: 3rem !important;
    }
    
    .fixed.bottom-6.right-6 {
        right: 1rem !important;
        width: 3rem !important;
        height: 3rem !important;
    }
}

/* Small Mobile Screens (max-width: 480px) */
@media (max-width: 480px) {
    /* Header adjustments */
    header .max-w-7xl {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    header img[src*="logo"] {
        height: 3rem !important;
    }
    
    .mobile-menu-toggle {
        width: 2rem;
        height: 2rem;
    }
    
    /* Hero Section */
    section.relative.h-\[600px\] {
        min-height: 400px !important;
        padding: 1rem 0 !important;
    }
    
    .hero-slide h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-slide ul {
        font-size: 0.8125rem !important;
        margin-bottom: 1rem !important;
        gap: 0.5rem !important;
    }
    
    .hero-slide ul li {
        gap: 0.5rem !important;
        font-size: 0.8125rem !important;
    }
    
    .hero-slide ul li .material-icons-outlined {
        font-size: 1rem !important;
    }
    
    section.relative .flex.gap-4 button {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* Services Section - Keep 2 columns */
    section[style*="14.png"] {
        padding: 2rem 0 !important;
    }
    
    section[style*="14.png"] h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    section[style*="14.png"] .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    .service-card {
        padding: 1rem 0.75rem !important;
    }
    
    .service-card img {
        width: 2.25rem !important;
        height: 2.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .service-card a,
    .service-card button {
        font-size: 0.6875rem !important;
        padding: 0.5rem 0.625rem !important;
    }
    
    /* Stats Section - Keep 2 columns */
    .stats-section {
        margin-top: -1.5rem !important;
        padding: 0.75rem !important;
    }
    
    .stats-section .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .stat-card {
        padding: 1rem 0.75rem !important;
    }
    
    .stat-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 0.75rem !important;
    }
    
    .stat-number {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .stat-label {
        font-size: 0.75rem !important;
    }
    
    /* About Section */
    .about-text h2 {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    .about-text p {
        font-size: 0.9375rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .about-features {
        gap: 0.75rem !important;
        margin-top: 1.25rem !important;
    }
    
    .about-feature-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Service Detail Page */
    .service-detail-section {
        padding: 2.5rem 0 1.25rem !important;
    }
    
    .service-text h1 {
        font-size: 1.5rem !important;
    }
    
    .service-text p {
        font-size: 0.9375rem !important;
    }
    
    .service-icon-wrapper {
        width: 48px !important;
        height: 48px !important;
    }
    
    .service-icon-wrapper .material-icons-outlined {
        font-size: 28px !important;
    }
    
    /* Request Form */
    .request-form-section {
        padding: 1.5rem 0 !important;
    }
    
    .request-form-section h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-group label {
        font-size: 0.8125rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .form-group button {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Footer */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        padding-top: 2rem !important;
        display: grid !important;
    }
    
    /* Move Rewa section to first position and make it full width */
    footer .grid > div:last-child {
        order: -1;
        grid-row: 1;
        grid-column: 1 / -1;
        width: 100%;
    }
    
    footer h4 {
        font-size: 0.9375rem !important;
        margin-bottom: 1rem !important;
    }
    
    footer ul {
        font-size: 0.75rem !important;
        gap: 0.75rem !important;
    }
    
    footer li {
        font-size: 0.75rem !important;
    }
    
    /* Mobile Sidebar */
    .mobile-sidebar-content {
        width: 80%;
        max-width: 260px;
    }
    
    .mobile-sidebar-header {
        padding: 1rem;
    }
    
    .mobile-sidebar-header h3 {
        font-size: 1rem;
    }
    
    .mobile-sidebar-close {
        width: 2rem;
        height: 2rem;
    }
    
    .mobile-sidebar-body {
        padding: 1rem;
    }
    
    .mobile-sidebar-link {
        padding: 0.75rem 0.875rem;
        font-size: 0.875rem;
    }
    
    .mobile-sidebar-footer {
        padding: 1rem;
        gap: 0.75rem;
    }
    
    .mobile-sidebar-button {
        font-size: 0.8125rem;
        padding: 0.5rem !important;
    }
    
    /* WhatsApp and Scroll buttons */
    .fixed.bottom-6.left-6 {
        width: 2.25rem !important;
        height: 2.25rem !important;
        bottom: 0.5rem !important;
        left: 0.5rem !important;
    }
    
    .fixed.bottom-6.right-6 {
        width: 2.25rem !important;
        height: 2.25rem !important;
        bottom: 0.5rem !important;
        right: 0.5rem !important;
    }
    
    .fixed.bottom-6.left-6 svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    /* General adjustments */
    .max-w-7xl {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    section {
        padding: 1.5rem 0 !important;
    }
    
    section.py-24 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    h3 {
        font-size: 1.125rem !important;
    }
    
    /* Vision/Mission Section */
    .vision-content {
        gap: 1.5rem !important;
    }
    
    .vision-content h3 {
        font-size: 1.125rem !important;
    }
    
    .vision-content .material-icons-outlined {
        font-size: 2.25rem !important;
    }
    
    .vision-content p {
        font-size: 0.875rem !important;
    }
    
    /* Why Section - Keep 2 columns if possible */
    section.relative.bg-primary {
        padding: 2rem 0 !important;
    }
    
    section.relative.bg-primary h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    section.relative.bg-primary .grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    section.relative.bg-primary .grid.grid-cols-2 .material-icons-outlined {
        font-size: 2rem !important;
    }
    
    section.relative.bg-primary .grid.grid-cols-2 h3 {
        font-size: 1rem !important;
    }
    
    section.relative.bg-primary .grid.grid-cols-2 p {
        font-size: 0.8125rem !important;
    }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1023px) {
    .service-card img {
        width: 4rem !important;
        height: 4rem !important;
    }
    
    section[style*="14.png"] .grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}