/**
 * Mobile Responsive CSS for Homepage
 * Applied only on mobile devices (max-width: 768px)
 * Does NOT affect desktop/PC layout
 */

/* Mobile-only styles - applies to screens smaller than 768px */
@media only screen and (max-width: 768px) {

    /* ========== HERO SECTION ========== */
    .hero-section {
        padding-top: 120px !important; /* Reduce from 200px */
        min-height: auto !important;
        padding-bottom: 60px !important;
    }

    .hero-container {
        padding: 0 15px !important;
    }

    .hero-content {
        max-width: 100% !important;
    }

    .hero-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }

    .hero-description {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }

    .hero-badge {
        font-size: 0.8rem !important;
        padding: 10px 20px !important;
        margin-bottom: 20px !important;
    }

    .hero-cta-group {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .hero-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 28px !important;
        font-size: 0.95rem !important;
    }

    .hero-stats {
        flex-direction: row;
        padding-bottom: 30px;
        margin: 0 auto;
        gap: 1px!important;
    }

    .hero-stat-item {
        flex: 1 1 calc(50% - 10px) !important;
        text-align: center;
    }

    .product-carousel-container {
        max-width: 100vw;
        width: 100vw;
    }

    .hero-stat-number {
        font-size: 2rem !important;
        margin-bottom: 6px !important;
    }

    .hero-stat-label {
        font-size: 0.65rem !important;
    }

    /* ========== CATEGORIES SECTION ========== */
    .categories-section {
        padding: 60px 15px !important;
    }

    .categories-header {
        margin-bottom: 40px !important;
    }

    .categories-title,
    .product-carousel-title,
    .features-title,
    .about-title,
    .priorities-title {
        font-size: 1.75rem !important;
        margin-bottom: 15px !important;
    }

    .categories-subtitle,
    .product-carousel-subtitle,
    .features-subtitle,
    .priorities-subtitle {
        font-size: 0.85rem !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 15px !important;
    }

    .categories-description,
    .product-carousel-description,
    .features-description,
    .priorities-description {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .category-card {
        margin-bottom: 0 !important;
    }

    .category-image-wrapper {
        height: 220px !important;
    }

    .category-info {
        padding: 20px !important;
    }

    .category-title {
        font-size: 1.35rem !important;
        margin-bottom: 10px !important;
    }

    .category-description {
        font-size: 0.9rem !important;
        margin-bottom: 16px !important;
    }

    .category-icon {
        width: 50px !important;
        height: 50px !important;
        top: 16px !important;
        right: 16px !important;
    }

    .category-icon i {
        font-size: 22px !important;
    }

    /* ========== PRODUCT CAROUSEL ========== */
    .product-carousel-section {
        padding: 60px 15px !important;
    }

    .product-carousel-header {
        margin-bottom: 40px !important;
    }

    .product-carousel-wrapper {
        padding: 0 15px !important;
    }

    .product-carousel-track {
        gap: 20px !important;
        padding: 15px 0 !important;
    }

    .product-carousel-card {
        flex: 0 0 280px !important;
    }

    .product-carousel-image-wrapper {
        height: 200px !important;
    }

    .product-carousel-info {
        padding: 20px !important;
    }

    .product-carousel-name {
        font-size: 1.15rem !important;
        margin-bottom: 10px !important;
    }

    .product-carousel-description-text {
        font-size: 0.875rem !important;
        margin-bottom: 16px !important;
    }

    .product-carousel-price {
        font-size: 1.25rem !important;
    }

    .product-carousel-badge {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
        top: 12px !important;
        left: 12px !important;
    }

    .carousel-nav-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .carousel-nav-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* ========== FEATURES SECTION ========== */
    .features-section {
        padding: 60px 15px !important;
    }

    .features-header {
        margin-bottom: 40px !important;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .feature-card {
        padding: 32px 24px !important;
    }

    .feature-icon-wrapper {
        width: 70px !important;
        height: 70px !important;
        margin-bottom: 20px !important;
    }

    .feature-icon {
        font-size: 30px !important;
    }

    .feature-title {
        font-size: 1.25rem !important;
        margin-bottom: 12px !important;
    }

    .feature-description {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* ========== STATS SECTION ========== */
    .stats-section {
        padding: 60px 15px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .stat-card {
        padding: 28px 20px !important;
    }

    .stat-icon {
        width: 65px !important;
        height: 65px !important;
        font-size: 30px !important;
        margin-bottom: 20px !important;
    }

    .stat-number {
        font-size: 2.25rem !important;
        margin-bottom: 10px !important;
    }

    .stat-label {
        font-size: 0.95rem !important;
    }

    /* ========== ABOUT SECTION ========== */
    .about-section {
        padding: 60px 15px !important;
    }

    .about-container {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .about-content {
        padding-right: 0 !important;
    }

    .about-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 15px !important;
    }

    .about-description {
        font-size: 0.95rem !important;
        margin-bottom: 24px !important;
    }

    .about-features {
        gap: 16px !important;
        margin-bottom: 30px !important;
    }

    .about-feature-icon {
        width: 42px !important;
        height: 42px !important;
    }

    .about-feature-icon i {
        font-size: 18px !important;
    }

    .about-feature-text {
        font-size: 0.9rem !important;
    }

    .about-cta {
        padding: 14px 28px !important;
        font-size: 0.95rem !important;
    }

    .about-image-wrapper {
        border-radius: 16px !important;
    }

    .about-image {
        height: 350px !important;
    }

    .about-badge {
        bottom: 20px !important;
        left: 20px !important;
        padding: 18px 24px !important;
    }

    .about-badge-number {
        font-size: 2.25rem !important;
        margin-bottom: 6px !important;
    }

    .about-badge-text {
        font-size: 0.9rem !important;
    }

    /* ========== CTA SECTION ========== */
    .cta-section {
        padding: 60px 15px !important;
    }

    .cta-container {
        padding: 40px 24px !important;
        border-radius: 20px !important;
    }

    .cta-badge {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
        margin-bottom: 20px !important;
    }

    .cta-title {
        font-size: 1.75rem !important;
        margin-bottom: 16px !important;
    }

    .cta-description {
        font-size: 0.95rem !important;
        margin-bottom: 30px !important;
        line-height: 1.6 !important;
    }

    .cta-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .cta-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 28px !important;
        font-size: 0.95rem !important;
    }

    .cta-features {
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 30px !important;
        align-items: flex-start !important;
    }

    .cta-feature {
        gap: 10px !important;
        font-size: 0.9rem !important;
    }

    .cta-feature-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .cta-feature-icon svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* ========== PRIORITIES SECTION ========== */
    .priorities-section {
        padding: 60px 15px !important;
    }

    .priorities-header {
        margin-bottom: 40px !important;
    }

    .priorities-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .priority-card {
        padding: 28px 20px !important;
    }

    .priority-icon-wrapper {
        width: 75px !important;
        height: 75px !important;
        margin-bottom: 20px !important;
    }

    .priority-icon {
        font-size: 34px !important;
    }

    .priority-title {
        font-size: 1.25rem !important;
        margin-bottom: 12px !important;
    }

    .priority-description {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    /* ========== REVIEWS/TESTIMONIALS SECTION ========== */
    .testimonial-section {
        flex-direction: column !important;
        height: auto !important;
    }

    .testi-user-img {
        width: 100% !important;
        height: auto !important;
        min-height: 300px !important;
        max-height: 400px !important;
        margin-bottom: 0 !important;
    }

    .testimonial-section .user-saying {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
    }

    .swiper-container.testimonial {
        /*height: auto !important;*/
        min-height: 200px !important;
    }

    .testimonial-section .quote {
        width: 100% !important;
        padding: 30px 20px !important;
    }

    .testimonial-section .quote p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    .testimonial .name {
        font-size: 1rem !important;
        line-height: 24px !important;
    }

    .testimonial .designation {
        font-size: 0.8rem !important;
    }

    .quote-icon {
        width: 30px !important;
        margin-bottom: 20px !important;
    }

    .gallery-thumbs .swiper-slide {
        width: 180px !important;
        height: 250px !important;
    }

    .gallery-thumbs .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
    }

    /* ========== GENERAL MOBILE IMPROVEMENTS ========== */
    /* Better touch targets */
    a, button {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Improve readability */
    body {
        font-size: 15px !important;
    }

    /* Better spacing */
    section {
        margin-bottom: 0 !important;
    }

    /* Images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Reduce animations on mobile for better performance */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }
}

/* Extra small devices (phones in portrait, less than 480px) */
@media only screen and (max-width: 480px) {

    .hero-section {
        padding-top: 100px !important;
        padding-bottom: 40px !important;
    }

    .hero-title {
        font-size: 1.75rem !important;
    }

    .hero-stat-number {
        font-size: 1.55rem !important;
    }

    .categories-title,
    .product-carousel-title,
    .features-title,
    .about-title,
    .priorities-title,
    .cta-title {
        font-size: 1.5rem !important;
    }


    .product-carousel-card {
        flex: 0 0 260px !important;
    }

    .testi-user-img {
        min-height: 250px !important;
        max-height: 300px !important;
    }

    .gallery-thumbs .swiper-slide {
        width: 150px !important;
        height: 200px !important;
    }

    .about-image {
        height: 280px !important;
    }

    .cta-container {
        padding: 32px 20px !important;
    }
}

/* Landscape orientation adjustments for mobile */
@media only screen and (max-width: 768px) and (orientation: landscape) {

    .hero-section {
        min-height: auto !important;
        padding-top: 80px !important;
        padding-bottom: 40px !important;
    }

    .hero-stats {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 1px;
    }

    .hero-stat-item {
        flex: 1 1 calc(33.333% - 15px) !important;
    }

    .testi-user-img {
        min-height: 250px !important;
        max-height: 300px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}