/**
 * SpiTech Web Services - Mobile Styles
 * Mobile-specific styles (screens < 768px)
 */

/* ===============================
   Typography - Mobile Adjustments
================================== */

/* Strength Title Font Size */
.strength-title,
h2.strength-title,
.sec-title.strength-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 10px !important;
}

/* Desktop par default size (override ke liye) */
@media (min-width: 768px) {
    .strength-title {
        font-size: 3rem !important;
    }
}

/* Stat Number Font Size */
.stat-number {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1 !important;
}

/* Desktop par original size */
@media (min-width: 768px) {
    .stat-number {
        font-size: 2.5rem !important;
    }
}

/* Testimonial Body Padding - Mobile */
.testimonial-layout1 .testi-body {
    padding: 0 15px !important;
}

/* Mobile Marquee Speed - Slower */
.mobile-marquee .marquee-content {
    animation: marqueeScroll 20s linear infinite !important; /* 20s se 40s kiya - slower scroll */
}

/* Google Map Responsive - Mobile */
@media (max-width: 767px) {
    .ratio-21x9 iframe,
    .google-map iframe {
        height: 300px !important;
    }
}

/* General Heading Adjustments for Mobile */
@media (max-width: 767px) {
    /* Section Titles */
    .sec-title {
        font-size: 24px !important;
    }
    
    /* Subtitles */
    .sec-subtitle {
        font-size: 16px !important;
    }
    
    /* All H1-H6 tags */
    h1 {
        font-size: 26px !important;
    }
    
    h2 {
        font-size: 22px !important;
    }
    
    h3 {
        font-size: 13px !important;
    }
    
    h4 {
        font-size: 18px !important;
    }
    
    h5 {
        font-size: 16px !important;
    }
    
    h6 {
        font-size: 14px !important;
    }
}

/* ===============================
   Layout & Spacing - Mobile
================================== */

@media (max-width: 767px) {
    /* Container Padding */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Section Padding */
    .space {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    .space-extra {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    
    /* Grid Adjustments */
    .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ===============================
   Navigation - Mobile
================================== */

@media (max-width: 767px) {
    /* Hide Desktop Menu */
    .main-menu.d-none.d-lg-block {
        display: none !important;
    }
    
    /* Mobile Menu Toggle */
    .vs-menu-toggle {
        display: block !important;
        font-size: 20px;
        padding: 10px;
    }
    
    /* Mobile Menu Area */
    .vs-menu-wrapper {
        width: 85%;
        max-width: 320px;
    }
}

/* ===============================
   Buttons - Mobile
================================== */

@media (max-width: 767px) {
    /* Primary Buttons */
    .vs-btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    /* Icon Buttons */
    .btn-icon {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ===============================
   Cards & Boxes - Mobile
================================== */

@media (max-width: 767px) {
    /* Card Padding */
    .card-style1,
    .card-style2,
    .service-card {
        padding: 20px !important;
    }
    
    /* Counter/Stat Cards */
    .counter-card {
        flex-direction: column !important;
        text-align: center;
    }
}

/* ===============================
   Images & Media - Mobile
================================== */

@media (max-width: 767px) {
    /* Responsive Images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Hero Images */
    .hero-img img {
        max-height: 300px;
    }
}

/* ===============================
   Forms - Mobile
================================== */

@media (max-width: 767px) {
    /* Input Fields */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 12px !important;
    }
    
    /* Form Labels */
    label {
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }
}

/* ===============================
   Footer - Mobile
================================== */

@media (max-width: 767px) {
    /* Footer Widget Spacing */
    .footer-widget {
        margin-bottom: 30px !important;
    }
    
    /* Footer Social Links */
    .social-links a {
        width: 35px !important;
        height: 35px !important;
        font-size: 14px !important;
    }
    
    /* Quick Contact Bar Mobile */
    .quick-contact-bar {
        overflow-x: auto !important;
    }
    
    .quick-contact-item {
        min-width: 120px !important;
    }
}

/* ===============================
   Utilities - Mobile
================================== */

@media (max-width: 767px) {
    /* Hide Elements */
    .d-mobile-none {
        display: none !important;
    }
    
    /* Show Only on Mobile */
    .d-mobile-block {
        display: block !important;
    }
    
    /* Text Alignment */
    .text-mobile-center {
        text-align: center !important;
    }
    
    /* Margin Utilities */
    .mb-mobile-20 {
        margin-bottom: 20px !important;
    }
    
    /* Padding Utilities */
    .p-mobile-15 {
        padding: 15px !important;
    }
}

/* ===============================
   Animations - Mobile
================================== */

@media (max-width: 767px) {
    /* Reduce Animation Duration */
    * {
        animation-duration: 0.3s !important;
    }
    
    /* Disable Parallax on Mobile */
    .parallax-container {
        background-attachment: scroll !important;
    }
}