/* ========================================
   RESPONSIVE NAVIGATION SYSTEM (Custom Logo Fix)
   ======================================== */

/* ------------------------------------------------
   1. Large Screens & Laptops (Max-Width: 1200px)
   ------------------------------------------------ */
@media (max-width: 1200px) {
    .nav-pill {
        max-width: 95%;
        padding: 0.75rem 1.25rem;
    }

    .nav-links {
        gap: 1.5rem;
    }
    
    .nav-links .nav-link {
        font-size: 0.9rem;
    }
}

/* ------------------------------------------------
   2. Tablets & Small Laptops (Max-Width: 992px)
   Objective: Text Hide + Big Logo Image
   ------------------------------------------------ */
@media (max-width: 992px) {
    /* Desktop links ko hide karein */
    .nav-links {
        display: none;
    }

    /* Burger Menu Toggle ko dikhayein */
    .nav-actions .mobile-toggle {
        display: flex;
    }

    /* --- LOGO CUSTOMIZATION STARTS --- */
    
    /* 1. Logo Text ko HIDE kar diya (Sirf Image dikhegi) */
    .logo .logo-text {
        display: none !important;
    }

    /* 2. Logo Icon Container ko BADA kiya */
    .logo .logo-icon {
        width: 3.5rem;  /* Pehle 2.5rem tha, ab bada kiya */
        height: 3.5rem;
        
        /* Agar aapko peeche ka Gola (Circle/Color) hatana hai to ye uncomment karein: */
        /* background: transparent; */
        /* border: none; */
        
        /* Agar image rectangle hai to radius adjust karein */
        /* border-radius: 0; */
        
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 3. Image ko container mein fit karna */
    .logo .logo-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Logo katega nahi */
    }
    /* --- LOGO CUSTOMIZATION ENDS --- */
}

/* ------------------------------------------------
   3. Mobile Devices (Max-Width: 768px)
   ------------------------------------------------ */
@media (max-width: 768px) {
    .header-floating {
        top: 0.75rem;
        padding: 0 1rem;
    }

    .nav-pill {
        padding: 0.6rem 1rem;
        width: 100%;
        /* Logo aur Menu ke beech space maintain karein */
        justify-content: space-between; 
    }

    /* Mobile par bhi Logo Text Hide rahega */
    .logo .logo-text {
        display: none !important;
    }

    /* Mobile par Logo ka size thoda adjust kiya (Perfect fit) */
    .logo .logo-icon {
        width: 3.2rem; /* Mobile ke liye thoda sa optimized */
        height: 3.2rem;
    }

    /* --- CTA Button (Phone Number) Adjustment --- */
    .nav-actions .cta-btn {
        padding: 0;
        width: 2.75rem; 
        height: 2.75rem;
        border-radius: 50%;
        justify-content: center;
    }

    .nav-actions .cta-btn .cta-text {
        display: none;
    }

    .nav-actions .cta-btn i {
        margin: 0;
        font-size: 1.1rem;
    }
}

/* ------------------------------------------------
   4. Small Mobile Phones (Max-Width: 380px)
   ------------------------------------------------ */
@media (max-width: 380px) {
    /* Chote phone par logo thoda sa chhota taaki toote na */
    .logo .logo-icon {
        width: 2.8rem;
        height: 2.8rem;
    }

    .nav-actions {
        gap: 0.5rem;
    }
}

/* ========================================
   MOBILE MENU OVERLAY FIXES
   ======================================== */

.mobile-menu-overlay {
    overflow-y: auto;
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2rem;
}

.mobile-menu-content {
    min-height: 100%;
    justify-content: flex-start;
    padding-top: 2rem;
    padding-bottom: 100px;
}

/* Agar height choti ho (Landscape Mode on Mobile) */
@media (max-height: 600px) {
    .mobile-menu-overlay {
        padding-top: 6rem;
    }
    
    .mobile-menu-overlay .mobile-menu-content .mobile-link {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
}

/* ========================================
   HERO SECTION & CALCULATOR FIXES
   ======================================== */

/* ------------------------------------------------
   1. GLOBAL FIXES (Applies to ALL Devices)
   Objective: Calculator ka curve (border-radius) 
   kam karna taaki wo professional lage.
   ------------------------------------------------ */
.hero .calculator-card {
    /* Pehle ye 3rem tha, ab 1.5rem kar diya (Clean Look) */
    border-radius: 1.5rem !important; 
    
    /* Mobile par padding thodi adjust ki */
    padding: 2rem; 
}

/* ------------------------------------------------
   2. Tablet & Small Laptops (Max-Width: 1024px)
   Objective: 
   - Grid ko 1 Column banana.
   - TEXT UPAR rahega, CALCULATOR NEECHE.
   ------------------------------------------------ */
@media (max-width: 1024px) {
    .hero {
        padding-top: 8rem; /* Nav ke liye jagah */
        padding-bottom: 4rem;
        height: auto; /* Fixed height hatayi */
        min-height: 100vh;
    }

    .hero-content {
        grid-template-columns: 1fr; /* 2 cols -> 1 col */
        gap: 3rem; /* Text aur Form ke beech gap */
        text-align: center; /* Text center align */
    }

    .hero-left {
        display: flex;
        flex-direction: column;
        align-items: center; 
        max-width: 800px;
        margin: 0 auto;
    }

    /* Trust indicators (Reviews etc) ko center align */
    .hero .trust-indicators {
        justify-content: center;
        width: 100%;
        border-top: 1px solid rgba(0,0,0,0.05);
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    /* Orbs ki brightness kam ki taaki text padha jaye */
    .gradient-orb {
        opacity: 0.4;
    }
}

/* ------------------------------------------------
   3. Mobile Devices (Max-Width: 768px)
   Objective: Buttons aur Calculator ko mobile finger
   friendly banana.
   ------------------------------------------------ */
@media (max-width: 768px) {
    /* --- Typography Fixes --- */
    .hero-title {
        font-size: 2.5rem; /* Heading size control */
        line-height: 1.2;
    }

    .hero-description {
        font-size: 1.05rem;
        padding: 0 0.5rem;
    }

    /* --- Buttons Stacking (Easy to Tap) --- */
    .hero-ctas {
        flex-direction: column; /* Upar-Neeche stack */
        width: 100%;
        gap: 1rem !important;
        margin-top: 2rem !important;
    }

    .hero-ctas button, 
    .hero-ctas .btn-watch-demo,
    .hero-ctas .btn-outline {
        width: 100% !important; /* Full screen width */
        justify-content: center;
        min-width: unset;
        margin: 0;
    }

    /* --- Calculator Mobile Adjustments --- */
    .hero .calculator-card {
        padding: 1.5rem; /* Padding thodi kam */
        width: 100%;
        margin-top: 1rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Shadow soft ki */
    }

    .hero .calculator-card .calculator-header {
        margin-bottom: 1rem;
    }

    .hero .calculator-card .calculator-title {
        font-size: 1.35rem;
    }

    /* --- iPhone Input Zoom Fix --- */
    /* Agar font 16px se kam ho to iPhone zoom kar deta hai */
    .hero .calculator-card .form-group .form-input {
        font-size: 16px !important; 
        padding: 12px;
    }
    
    .hero .calculator-card .btn-primary {
        padding: 1rem; /* Button bada kiya tap karne ke liye */
        font-size: 1rem;
    }
}

/* ------------------------------------------------
   4. Small Mobiles (Fold/SE) (Max-Width: 380px)
   Objective: Content squish na ho.
   ------------------------------------------------ */
@media (max-width: 380px) {
    .hero-title {
        font-size: 2rem;
    }

    /* Trust indicators ko stack karein */
    .hero .trust-indicators {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero .trust-indicators .avatars {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .hero .calculator-card {
        padding: 1.2rem; /* Padding aur kam */
    }
}


/* ========================================
   SECTIONS: STATS, BENTO GRID & SOLUTIONS
   ======================================== */

/* ------------------------------------------------
   1. GLOBAL CURVE FIX (Professional Look)
   Objective: Sabhi cards ka curve 3rem se ghatakar 
   1.5rem karna (Same as calculator).
   ------------------------------------------------ */
.advantages .bento-card,
.solutions .solution-card {
    border-radius: 1.5rem !important;
}

/* ------------------------------------------------
   2. STATS SECTION (Numbers)
   Objective: Mobile par gap kam karna aur text 
   fit karna.
   ------------------------------------------------ */
@media (max-width: 768px) {
    .stats {
        padding: 3rem 0; /* Vertical padding kam ki */
    }

    .stats-grid {
        gap: 2rem 1rem; /* Row gap 2rem, Column gap 1rem */
        /* Grid 2x2 hi rahega mobile pe bhi, kyunki numbers chhote hain */
    }

    .stats .stat-value {
        font-size: 2rem; /* Font size optimized */
        margin-bottom: 0.25rem;
    }

    .stats .stat-label {
        font-size: 0.7rem; /* Label thoda chhota */
    }
}

/* ------------------------------------------------
   3. ADVANTAGES (Bento Grid)
   Objective: Complex Grid ko Mobile par Simple 
   Single Column list banana.
   ------------------------------------------------ */
@media (max-width: 1024px) {
    /* Tablet fixes */
    .advantages .bento-grid {
        grid-template-rows: auto; /* Fixed height hatayi */
    }
}

@media (max-width: 768px) {
    /* --- Layout Reset for Mobile --- */
    .advantages .bento-grid {
        display: flex; /* Grid hata ke Flexbox (Easy Stacking) */
        flex-direction: column;
        gap: 1.5rem;
    }

    /* --- Universal Card Styling for Mobile --- */
    /* Sabhi cards (Large, Wide, Small) ko same behave karna chahiye */
    .advantages .bento-large,
    .advantages .bento-wide,
    .advantages .bento-small {
        grid-column: auto; /* Span hataya */
        grid-row: auto;
        padding: 1.5rem; /* Padding 3rem se 1.5rem ki (Space saved) */
        min-height: auto; /* Height auto */
    }

    /* --- Specific Card Adjustments --- */
    .advantages .bento-large .bento-title {
        font-size: 1.75rem; /* Title chhota kiya */
    }

    .advantages .bento-large .bento-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    /* Wide card (Row style) ko Column style banana */
    .advantages .bento-wide {
        flex-direction: column; /* Icon upar, text neeche */
        align-items: flex-start;
        text-align: left;
        gap: 1rem;
    }

    .advantages .bento-wide .bento-icon-large {
        width: 4rem;
        height: 4rem;
        font-size: 1.75rem;
    }
}

/* ------------------------------------------------
   4. SOLUTIONS SECTION (Image Cards)
   Objective: Card ki height kam karna aur text 
   ko readable banana.
   ------------------------------------------------ */
@media (max-width: 768px) {
    .solutions {
        padding-bottom: 4rem;
    }

    .solutions .solution-card {
        height: 350px; /* Mobile par 400px/500px bahut lamba hai */
    }

    .solutions .solution-content {
        padding: 1.5rem; /* Padding kam ki */
    }

    .solutions .solution-card .solution-title {
        font-size: 1.5rem;
    }

    .solutions .solution-card .solution-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
}

/* ------------------------------------------------
   5. SECTION HEADER (Global Title Fixes)
   Objective: "Why Choose Us" jaise titles ko 
   mobile par control karna.
   ------------------------------------------------ */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: 2.5rem; /* Gap kam kiya */
        padding: 0 1rem;
    }

    .section-header .section-title {
        font-size: 2rem; /* Title size fit kiya */
    }

    .section-header .section-description {
        font-size: 1rem;
    }
}


/* ========================================
   SECTIONS: TESTIMONIALS, PARTNERS & FAQ
   ======================================== */

/* ------------------------------------------------
   1. GLOBAL CURVE FIX (Professional Look)
   Objective: FAQ, Testimonial cards ka curve 
   normalize karna (1.5rem).
   ------------------------------------------------ */
.testimonials .testimonial-card,
.faq .accordion-item,
.faq .faq-cta {
    border-radius: 1.5rem !important; /* 3rem se 1.5rem kiya */
}

/* ------------------------------------------------
   2. TESTIMONIALS (Review Cards)
   Objective: Mobile par slider visible ho aur 
   cards screen se bahar na bhaagein.
   ------------------------------------------------ */
@media (max-width: 1024px) {
    .testimonials .testimonial-card {
        min-width: calc(50% - 1rem); /* Tablet: 2 cards dikhenge */
    }
}

@media (max-width: 768px) {
    .testimonials {
        padding: 3rem 0; /* Padding kam ki */
    }

    .testimonials .testimonial-carousel {
        margin-bottom: 2rem;
    }

    /* Mobile: 1 Card full width */
    .testimonials .testimonial-card {
        min-width: 100%; /* Ek baar mein ek card */
        padding: 2rem 1.5rem; /* Padding adjust ki */
        margin-right: 0;
    }

    .testimonials .testimonial-text {
        font-size: 1.1rem; /* Font size readable banaya */
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    /* Quote Watermark ko chhota kiya */
    .testimonials .testimonial-card .quote-watermark {
        font-size: 3rem;
        right: 1rem;
        top: 1rem;
    }

    /* Author section compact */
    .testimonials .testimonial-card .testimonial-author {
        flex-direction: column; /* Avatar upar, Naam neeche */
        text-align: center;
        gap: 0.5rem;
    }

    .testimonials .testimonial-author .author-name {
        text-align: center;
    }

    .testimonials .testimonial-author .author-location {
        text-align: center;
    }
}

/* ------------------------------------------------
   3. PARTNERS (Marquee Logos)
   Objective: Logos mobile par huge na dikhein.
   ------------------------------------------------ */
@media (max-width: 768px) {
    .partners {
        padding: 3rem 0;
    }

    .partners .marquee-track {
        gap: 2rem; /* Logos ke beech gap kam kiya */
    }

    .partners .marquee-track .partner-name {
        font-size: 1.5rem; /* Text size chhota kiya */
    }
}

/* ------------------------------------------------
   4. FAQ SECTION (Accordion)
   Objective: Mobile par width badhana taaki 
   question padha ja sake.
   ------------------------------------------------ */
@media (max-width: 992px) {
    .faq .container-small {
        width: 90% !important; /* Tablet: 90% width */
    }
}

@media (max-width: 768px) {
    .faq {
        padding: 3rem 0;
    }

    .faq .container-small {
        width: 100% !important; /* Mobile: Full width */
        padding: 0 1rem;
    }

    .faq .section-title {
        font-size: 2rem;
        letter-spacing: -1px;
    }

    /* Accordion Header */
    .faq .accordion-header {
        padding: 1.25rem;
    }

    .faq .faq-question {
        font-size: 1rem;
        gap: 10px;
    }

    /* Icon size chhota kiya */
    .faq .faq-icon {
        width: 36px;
        height: 36px;
        min-width: 36px; /* Shrink na ho */
        font-size: 0.9rem;
    }

    .faq .toggle-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.8rem;
    }

    /* Answer Body Padding */
    .faq .faq-answer {
        padding: 0 1.25rem 1.25rem 1.25rem; /* Left padding kam ki */
    }

    /* CTA Box at bottom */
    .faq-cta {
        margin-top: 3rem;
        padding: 2rem 1.5rem;
    }
    
    .faq-cta-btn {
        width: 100%; /* Button full width */
        justify-content: center;
    }
}

/* ========================================
   SECTION: CONTACT US (Form & Info)
   ======================================== */

/* ------------------------------------------------
   1. GLOBAL CURVE FIX (Clean & Professional)
   Objective: Form aur Info cards ke curves ko 
   calculator jaisa same (1.5rem) banana.
   ------------------------------------------------ */
.contact-form-card,
.contact-info-card,
.trust-badge {
    border-radius: 1.5rem !important; /* 32px se 1.5rem kiya */
}

/* ------------------------------------------------
   2. TABLETS (Max-Width: 1024px)
   Objective: 2 Columns ko 1 Column karna aur 
   content center align karna.
   ------------------------------------------------ */
@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr; /* Stack Left & Right */
        gap: 3rem;
    }

    .contact-left {
        text-align: center; /* Text center */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .contact-intro {
        margin: 0 auto 2rem;
    }

    /* Info Cards (Phone, Email, etc.) */
    .contact-info {
        width: 100%;
        max-width: 500px; /* Zyada faile nahi */
        margin: 0 auto 2rem;
    }

    .contact-info-card {
        width: 100%; /* Full width inside container */
        background: white; /* Glass effect hata ke solid white for better contrast */
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
}

/* ------------------------------------------------
   3. MOBILE DEVICES (Max-Width: 768px)
   Objective: Form ko compact banana aur 
   Inputs ko easy-to-type banana.
   ------------------------------------------------ */
@media (max-width: 768px) {
    .contact {
        padding: 3rem 0; /* Padding kam ki */
    }

    /* --- Form Card Styling --- */
    .contact-form-card {
        padding: 1.5rem; /* Padding 40px se 24px ki */
    }

    .form-grid {
        grid-template-columns: 1fr; /* Name aur Phone upar-neeche */
        gap: 1rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    /* --- iPhone Input Zoom Fix (Very Important) --- */
    /* Font < 16px hone par iPhone zoom karta hai, isliye 16px fix kiya */
    .form-input, 
    .form-textarea {
        font-size: 16px !important; 
        padding: 12px; /* Touch friendly padding */
    }

    /* --- Typography --- */
    .contact-left .section-title {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    .contact-intro {
        font-size: 1rem;
        padding: 0 1rem;
    }

    /* Trust Badge (Bottom Black Box) */
    .trust-badge {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        width: 100%;
        gap: 1rem;
    }

    .trust-badge-icon i {
        margin-bottom: 0.5rem;
    }
}

/* ------------------------------------------------
   4. SMALL MOBILE (Max-Width: 400px)
   Objective: Submit button aur Icons adjust karna.
   ------------------------------------------------ */
@media (max-width: 400px) {
    .contact-left .section-title {
        font-size: 1.8rem; /* Heading aur choti */
    }

    /* Info Cards Compact View */
    .contact-info-card {
        padding: 1rem;
        gap: 1rem;
    }

    .contact-info-icon {
        width: 40px;
        height: 40px;
        min-width: 40px; /* Shrink na ho */
        font-size: 1rem;
    }

    .contact-info-value {
        font-size: 0.95rem; /* Email cut na ho */
        word-break: break-all; /* Agar email lamba ho to break kare */
    }

    .btn-submit {
        padding: 14px;
        font-size: 1rem;
    }
}

/* ========================================
   SECTION: FOOTER RESPONSIVENESS
   ======================================== */

/* ------------------------------------------------
   1. TABLETS (Max-Width: 1024px)
   Objective: 2 Columns -> 1 Column Layout
   ------------------------------------------------ */
@media (max-width: 1024px) {
    .footer-top {
        grid-template-columns: 1fr; /* Stack Brand & Links */
        gap: 3rem;
    }
    
    .footer-brand-section {
        max-width: 100%; /* Full width allow */
        text-align: center; /* Center align for tablet */
        align-items: center;
    }

    .footer-desc {
        max-width: 500px;
    }

    /* Newsletter center */
    .footer-newsletter {
        width: 100%;
        max-width: 400px;
    }
}

/* ------------------------------------------------
   2. MOBILE DEVICES (Max-Width: 768px)
   Objective: Links ko 2 columns mein rakhna
   aur Contact ko neeche neat dikhana.
   ------------------------------------------------ */
@media (max-width: 768px) {
    .footer {
        padding: 3rem 0 2rem;
    }

    .footer-top {
        gap: 2.5rem;
    }

    /* --- Brand Section --- */
    .footer-brand-section {
        align-items: flex-start; /* Left align on mobile feels better */
        text-align: left;
    }

    /* --- Navigation Grid Fix --- */
    .footer-nav-grid {
        grid-template-columns: 1fr 1fr; /* 2 Columns: Space Bachayega */
        gap: 2rem 1rem; /* Row Gap zyada, Col gap kam */
    }

    /* Contact Section ko poori width do */
    .contact-col {
        grid-column: span 2; /* Full width */
        margin-top: 1rem;
        padding-top: 1.5rem;
        border-top: 1px dashed rgba(255,255,255,0.1);
    }

    /* --- Contact Info Styling --- */
    .contact-list {
        flex-direction: column; /* Stack items vertically */
        gap: 1.25rem;
    }
    
    .contact-list li {
        width: 100%;
    }

    .contact-list .value {
        font-size: 0.95rem; /* Text size readable */
    }

    /* --- Social Icons --- */
    .social-links {
        justify-content: flex-start; /* Left align */
        margin-top: 0.5rem;
    }

    /* --- Footer Bottom Bar --- */
    .footer-bottom {
        flex-direction: column-reverse; /* Copyright neeche, Badge upar */
        text-align: center;
        gap: 1.5rem;
    }

    .certifications {
        justify-content: center; /* Center align badges */
    }
}

/* ------------------------------------------------
   3. SMALL MOBILE (Max-Width: 400px)
   Objective: Content cut na ho.
   ------------------------------------------------ */
@media (max-width: 400px) {
    /* Agar screen bahut choti hai to 1 column kar do */
    .footer-nav-grid {
        grid-template-columns: 1fr; 
        gap: 2rem;
        text-align: center;
    }

    .footer-links {
        align-items: center; /* Center links */
    }

    .contact-col {
        grid-column: span 1; /* Reset span */
    }

    .contact-list li {
        justify-content: center; /* Center icons & text */
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }
}


/* ========================================
   SECTIONS: PROJECTS, CONTACT FORM & TESTIMONIALS
   ======================================== */

/* ------------------------------------------------
   1. GLOBAL CURVE FIX (Uniform Professional Look)
   Objective: Override 'radius-3xl' (huge curves) 
   with a cleaner '1.5rem' look.
   ------------------------------------------------ */
.projects-section-container .project-image,
.contact-form-card,
.testimonials .testimonial-card,
.testimonials .calculator-results {
    border-radius: 1.5rem !important;
}

/* ------------------------------------------------
   2. RECENT INSTALLATIONS (Projects)
   Objective: Make gallery look like a premium 
   app feed on mobile.
   ------------------------------------------------ */
@media (max-width: 768px) {
    .projects-section-container {
        padding: 2rem 0;
    }

    /* Title Centering */
    .projects-section-container .projects-title {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        font-size: 2rem;
    }

    /* Icon adjustment */
    .projects-section-container .projects-title .projects-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
        background: var(--orange-500); /* Mobile pe hamesha colored rakhein */
        color: white;
    }

    /* Grid Layout - Single Column but spaced well */
    .projects-section-container .project-gallery {
        grid-template-columns: 1fr; /* Single Column */
        height: auto; /* Remove fixed height */
        gap: 1.5rem;
        padding: 0 1rem; /* Side padding */
    }

    /* Image Aspect Ratio */
    .projects-section-container .project-image {
        aspect-ratio: 16/9; /* Cinematic wide look */
        width: 100%;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
}

/* ------------------------------------------------
   3. CONTACT FORM STYLING
   Objective: Make inputs easy to tap and prevent
   iPhone zoom issues.
   ------------------------------------------------ */
@media (max-width: 768px) {
    .contact-form-card {
        padding: 1.5rem; /* Compact padding */
        margin-top: 1rem;
    }

    /* Input Fields Touch Optimization */
    .contact-form-card .form-group .form-input,
    .contact-form-card .form-group .form-textarea {
        font-size: 16px !important; /* Prevents iOS Zoom */
        padding: 14px; /* Larger touch area */
        background: #f8fafc;
    }

    /* Submit Button Full Width */
    .contact-form-card .btn-submit {
        width: 100%;
        justify-content: center;
        padding: 16px;
    }
}

/* ------------------------------------------------
   4. TESTIMONIALS (Revamped Mobile)
   Objective: Ensure cards don't overflow and 
   text remains readable.
   ------------------------------------------------ */
@media (max-width: 768px) {
    .testimonials {
        padding: 3rem 0;
    }

    /* Slider Wrapper */
    .testimonials .testimonial-carousel {
        margin: 0;
        width: 100%;
    }

    /* Card Sizing */
    .testimonials .testimonial-card {
        min-width: 100%; /* Full width of screen */
        padding: 2rem 1.5rem;
        margin-right: 0;
        /* Halka sa border taaki white bg pe dikhe */
        border: 1px solid #e2e8f0; 
    }

    /* Quote Icon Background */
    .testimonials .testimonial-card .quote-watermark {
        font-size: 3.5rem;
        top: 1rem;
        right: 1rem;
        opacity: 0.3;
    }

    /* Text Readability */
    .testimonials .testimonial-text {
        font-size: 1.1rem;
        line-height: 1.6;
        min-height: auto; /* Remove fixed height */
        margin-bottom: 2rem;
    }

    /* Author Details Stacked */
    .testimonials .testimonial-card .testimonial-author {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    /* Slider Controls */
    .testimonials .slider-controls {
        margin-top: 2rem;
        gap: 1rem;
    }
    
    .testimonials .slider-controls .slider-btn {
        width: 3rem;
        height: 3rem; /* Slightly smaller buttons */
    }
}

/* ------------------------------------------------
   5. CALCULATOR RESULTS INSIDE TESTIMONIALS
   Objective: If calculator results appear here, 
   stack them nicely on mobile.
   ------------------------------------------------ */
@media (max-width: 768px) {
    .testimonials .calculator-results {
        padding: 1.25rem;
    }

    .testimonials .result-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Stack grid items */
    .testimonials .result-grid {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 0.75rem;
    }

    /* Main card span reset */
    .testimonials .result-card.main-card {
        grid-column: span 1; 
    }

    .testimonials .res-value {
        font-size: 1.5rem; /* Slightly smaller numbers */
    }

    .testimonials .res-value.highlight {
        font-size: 2rem;
    }
}