/* Enhanced Mobile Responsive CSS for KARA Group Website */

/* Base Mobile Styles */
@media (max-width: 768px) {
    /* Container and Layout */
    .container {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    /* Typography - Better spacing and readability */
    h1 { 
        font-size: 28px !important; 
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    h2 { 
        font-size: 24px !important; 
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    h3 { 
        font-size: 20px !important; 
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    h4 { 
        font-size: 18px !important; 
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    h5 { 
        font-size: 16px !important; 
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }
    h6 { 
        font-size: 14px !important; 
        line-height: 1.3 !important;
        margin-bottom: 5px !important;
    }
    
    p { 
        font-size: 14px !important; 
        line-height: 1.6 !important; 
        margin-bottom: 15px !important;
        text-align: justify !important;
    }
    
    /* Header Improvements */
    .header-top { 
        padding: 15px 0 !important; 
    }
    
    .header-contact { 
        flex-direction: column !important; 
        gap: 10px !important;
    }
    
    .header-contact li { 
        margin-bottom: 8px !important; 
        text-align: center !important;
    }
    
    .h-adress-content h6 {
        font-size: 14px !important;
        margin-bottom: 3px !important;
    }
    
    .h-adress-content p {
        font-size: 13px !important;
    }
    
    /* Navigation */
    .navbar-nav { 
        padding: 20px 0 !important; 
    }
    
    .navbar-nav .nav-link { 
        padding: 12px 20px !important; 
        font-size: 16px !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .navbar-toggler {
        padding: 8px 12px !important;
        border: 2px solid #53a92c !important;
        background: none !important;
    }
    
    .navbar-toggler-icon i {
        font-size: 20px !important;
        color: #53a92c !important;
    }
    
    /* Slider/Hero Section */
    .carousel-item .slider-item img { 
        height: 300px !important; 
        width: 100% !important; 
        object-fit: cover !important; 
    }
    
    .slider-content { 
        padding: 30px 15px !important; 
        text-align: center !important;
    }
    
    .slider-content h2 { 
        font-size: 24px !important; 
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }
    
    .slider-content h3 { 
        font-size: 18px !important; 
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }
    
    .slider-content p { 
        font-size: 14px !important; 
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }
    
    .slider-btn .btn { 
        padding: 10px 20px !important; 
        font-size: 14px !important; 
        margin: 10px 5px !important;
        display: inline-block !important;
    }
    
    /* Grid System - Full width on mobile */
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 25px !important;
        padding: 0 15px !important;
    }
    
    /* Section Spacing */
    .section-padding { 
        padding: 50px 0 !important; 
    }
    
    .section-header {
        padding: 40px 0 30px 0 !important;
        text-align: center !important;
    }
    
    .section-header h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    .section-header h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    .section-header p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Cards and Items */
    .services-items, .cause-items, .blog-items, .people-work-items,
    .volunteers-items, .event-items, .collection-items { 
        height: auto !important;
        margin-bottom: 25px !important;
        padding: 20px !important;
        text-align: center !important;
    }
    
    /* Images - Proper sizing and centering */
    .cause-items img, .blog-items img, .services-items img,
    .people-work-items img, .volunteers-items img, .event-items img { 
        height: 200px !important; 
        width: 100% !important;
        object-fit: cover !important; 
        margin-bottom: 15px !important;
    }
    
    img { 
        max-width: 100% !important; 
        height: auto !important; 
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Content Spacing */
    .services-content, .cause-content, .blog-content, .work-content,
    .volunteers-content, .events-content, .collection-content {
        padding: 15px !important;
        text-align: center !important;
    }
    
    .services-content h4, .cause-content h4, .blog-content h4,
    .work-content h4, .volunteers-content h4, .events-content h3 {
        margin-bottom: 10px !important;
        text-align: center !important;
    }
    
    .services-content p, .cause-content p, .blog-content p,
    .work-content p, .volunteers-content p, .events-content p {
        text-align: justify !important;
        margin-bottom: 15px !important;
    }
    
    /* Buttons */
    .btn { 
        padding: 12px 25px !important; 
        font-size: 14px !important; 
        margin: 10px 5px !important;
        display: inline-block !important;
        text-align: center !important;
    }
    
    .btn-default {
        min-width: 120px !important;
    }
    
    /* Forms */
    .form-control { 
        font-size: 16px !important; 
        padding: 12px 15px !important; 
        margin-bottom: 15px !important;
        border-radius: 5px !important;
    }
    
    .form-group {
        margin-bottom: 20px !important;
    }
    
    /* Tables - Responsive */
    .table-responsive { 
        font-size: 14px !important; 
        overflow-x: auto !important;
    }
    
    table { 
        font-size: 12px !important; 
        min-width: 600px !important;
    }
    
    /* Footer */
    .footer-widget { 
        margin-bottom: 30px !important; 
        text-align: center !important;
    }
    
    .footer-widget h3 {
        margin-bottom: 15px !important;
    }
    
    .footer-widget p, .footer-widget li {
        text-align: center !important;
        margin-bottom: 8px !important;
    }
    
    /* Social Icons */
    .social-icon-rounded li {
        margin: 5px !important;
    }
    
    .social-icon-rounded li a {
        width: 45px !important;
        height: 45px !important;
        line-height: 45px !important;
        font-size: 18px !important;
    }
    
    /* Contact Information */
    .contact-address li {
        text-align: center !important;
        padding: 15px 0 !important;
    }
    
    .contact-address [class^="flaticon-"]:before,
    .contact-address [class*=" flaticon-"]:before {
        float: none !important;
        display: block !important;
        margin: 0 auto 10px auto !important;
    }
    
    /* Portfolio/Gallery */
    .portfolio-items .item {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .recent-project-content {
        padding: 20px !important;
        text-align: center !important;
    }
    
    /* Testimonials */
    .testimonial-content {
        margin-bottom: 20px !important;
        padding: 20px !important;
    }
    
    .author-details {
        text-align: center !important;
        padding: 15px 0 !important;
    }
    
    .author-img {
        float: none !important;
        margin: 0 auto 10px auto !important;
    }
    
    .author-name {
        float: none !important;
        margin: 0 !important;
    }
    
    /* Counter Section */
    .count-items {
        margin-bottom: 30px !important;
        padding: 20px !important;
    }
    
    .count-items [class^="flaticon-"]:before,
    .count-items [class*=" flaticon-"]:before {
        font-size: 40px !important;
        margin-bottom: 10px !important;
    }
    
    .count-items span {
        font-size: 32px !important;
        display: block !important;
        margin-bottom: 5px !important;
    }
    
    .count-items h4 {
        font-size: 16px !important;
    }
    
    /* Blog Meta */
    .meta-post {
        text-align: center !important;
        margin: 10px 0 !important;
    }
    
    .meta-post li {
        display: inline-block !important;
        margin: 0 5px !important;
        font-size: 12px !important;
    }
    
    /* Spacing Utilities */
    .mb-mobile-20 { margin-bottom: 20px !important; }
    .mb-mobile-30 { margin-bottom: 30px !important; }
    .mt-mobile-20 { margin-top: 20px !important; }
    .mt-mobile-30 { margin-top: 30px !important; }
    .p-mobile-15 { padding: 15px !important; }
    .p-mobile-20 { padding: 20px !important; }
    
    /* Text Alignment */
    .text-center-mobile { text-align: center !important; }
    .text-justify-mobile { text-align: justify !important; }
}

/* Extra Small Devices (phones, less than 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 10px !important;
    }
    
    /* Typography for very small screens */
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    h5 { font-size: 14px !important; }
    h6 { font-size: 12px !important; }
    p { font-size: 13px !important; }
    
    /* Slider adjustments */
    .carousel-item .slider-item img { 
        height: 250px !important; 
    }
    
    .slider-content { 
        padding: 20px 10px !important; 
    }
    
    .slider-content h2 { 
        font-size: 20px !important; 
    }
    
    .slider-content h3 { 
        font-size: 16px !important; 
    }
    
    .slider-content p { 
        font-size: 12px !important; 
    }
    
    /* Section spacing */
    .section-padding { 
        padding: 40px 0 !important; 
    }
    
    /* Buttons */
    .btn { 
        padding: 10px 20px !important; 
        font-size: 12px !important; 
        margin: 8px 3px !important;
    }
    
    /* Images */
    .cause-items img, .blog-items img, .services-items img { 
        height: 180px !important; 
    }
    
    /* Cards */
    .services-items, .cause-items, .blog-items { 
        padding: 15px !important; 
        margin-bottom: 20px !important;
    }
    
    /* Forms */
    .form-control { 
        font-size: 14px !important; 
        padding: 10px 12px !important; 
    }
    
    /* Social icons */
    .social-icon-rounded li a {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 16px !important;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .carousel-item .slider-item img { 
        height: 350px !important; 
    }
    
    .slider-content { 
        padding: 20px 15px !important; 
    }
}

/* Print styles */
@media print {
    .navbar-toggler, .fixed-contact-icons { 
        display: none !important; 
    }
}

/* Additional Mobile Enhancements */
@media (max-width: 768px) {
    /* Ensure proper spacing between sections */
    section {
        margin-bottom: 30px !important;
    }
    
    /* Better button spacing */
    .btn + .btn {
        margin-left: 0 !important;
        margin-top: 10px !important;
    }
    
    /* Improved card hover effects on mobile */
    .services-items:hover, .cause-items:hover, .blog-items:hover {
        transform: none !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
    /* Better form layout */
    .contact-form .row .col-md-6 {
        margin-bottom: 15px !important;
    }
    
    /* Improved navigation */
    .navbar-collapse {
        background: #fff !important;
        margin-top: 10px !important;
        border-radius: 8px !important;
        padding: 15px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Better footer layout */
    .footer-bottom {
        text-align: center !important;
    }
    
    .copyright-txt, .social-box {
        float: none !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }
    
    /* Improved breadcrumb */
    .breadcrumb {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .breadcrumb li {
        margin: 2px 5px !important;
    }
}