/* =========================================
   TABLET & LARGE MOBILE RESPONSIVENESS (< 1024px)
   ========================================= */
@media (max-width: 1024px) {
    /* --- General Layout & Typography --- */
    .container {
        padding: 0 20px;
    }

    .section-title {
        font-size: 32px;
    }

    /* --- Header & Navigation --- */
    .nav-links, .call-box {
        display: none;
    }
    .hamburger-btn {
        display: block;
    }
    .header-container {
        padding: 12px 20px;
    }
    .logo-img {
        width: 200px;
    }

    /* --- Hero Sections --- */
    .hero-grid, .hero-split, .about-intro-grid {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }
    .hero-left, .hero-right, .hero-content, .about-intro-left, .about-intro-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hero-subtitle, .hero-content p, .about-intro-right p {
        max-width: 100%;
        text-align: center;
    }
    .hero-mini-features, .hero-buttons, .hero-google, .hero-btn-group {
        justify-content: center;
    }
    .rate-card {
        margin: 0 auto;
        max-width: 320px;
    }
    .services-hero {
        padding: 60px 0;
    }
    .hero-content h1 {
        font-size: 40px;
    }

    /* --- Grids & Cards --- */
    .why-choose-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .benefits-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .testi-grid, .blog-grid, .mf-content-grid, .cp-content-grid {
        grid-template-columns: 1fr;
    }
    .blog-main-content .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .value-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .faq-cta-wrapper, .founder-grid, .contact-grid, .blog-layout-grid {
        grid-template-columns: 1fr;
    }
    .founder-sidebar, .blog-sidebar {
        position: static;
        margin-top: 40px;
    }
    .mf-stats-grid, .cp-stats-grid {
        grid-template-columns: 1fr;
    }

    /* --- Specific Components --- */
    .floating-strip {
        flex-wrap: wrap;
        gap: 20px 0;
        padding: 24px;
    }
    .strip-divider {
        display: none;
    }
    .strip-item {
        flex-basis: 33.33%;
        min-width: 180px;
    }
    .stats-grid {
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }
    .stat-item {
        flex-basis: 40%;
        border-right: none;
        justify-content: center;
    }
    .timeline {
        flex-direction: column;
        gap: 40px;
    }
    .timeline-container::before {
        display: none;
    }
    .step {
        width: 100%;
    }
    .core-service-row, .core-service-row.reverse {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
    .cs-title-box {
        justify-content: center;
    }
    .process-split, .process-container, .commitment-grid {
        flex-direction: column;
        gap: 40px;
    }
    .compliance-row-card {
        flex-direction: column;
    }
    .c-icon-part {
        width: 100%;
        border-right: 2px solid var(--primary-red, #8A0C13);
        border-bottom: none;
    }
    .c-icon-part::after {
        display: none;
    }
    .c-content-part {
        padding: 20px 20px 20px 20px;
    }
    .c-value-part::before {
        top: 0;
        left: 20px;
        right: 20px;
        height: 2px;
        width: auto;
    }
    .mf-trust-banner, .mf-contact-banner {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    /* --- Footer --- */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }
    .bottom-cta .container {
        justify-content: center;
        text-align: center;
    }
    .cta-left {
        flex-direction: column;
        text-align: center;
    }
}

/* =========================================
   MOBILE RESPONSIVENESS (< 768px)
   ========================================= */
@media (max-width: 768px) {
    /* --- General Layout & Typography --- */
    .section-padding {
        padding: 50px 0;
    }
    .section-title {
        font-size: 28px;
        text-align: center;
    }
    .about-intro-left .section-title {
        text-align: center;
    }
    .hero-title, .hero-content h1, .mf-title, .cp-title {
        font-size: 34px;
        line-height: 1.2;
    }
    .hero-subtitle {
        font-size: 16px;
    }

    /* --- Header & Top Bar --- */
    .top-info-bar .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }

    /* Hide on mobile: RBI Compliant, BIS Certified, 100% Transparent, Instant Payment */
    .top-info-bar .left-section {
        display: none;
    }

    /* Hide on mobile: Updated time only */
    .top-info-bar .mobile-hidden-info {
        display: none;
    }

    /* Right section: gold rate left, LIVE badge right, single line */
    .top-info-bar .right-section {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0;
    }

    /* Gold rate stays visible on the left */
    .top-info-bar .right-section .info-item:first-child {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* LIVE badge visible on the right */
    .top-info-bar .live-badge {
        display: inline-block;
        margin-left: auto;
    }
    .logo-img {
        width: 180px;
    }

    /* --- Hero & Banners --- */
    /* Hide banner images on mobile for a cleaner view */
    .hero-section {
        background-image: none;
        background-color: var(--bg-light);
        padding: 40px 0;
        min-height: auto;
    }
    .hero-image-wrap,
    .cp-header-image-container {
        display: none;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    .hero-buttons .btn {
        width: 100%;
        max-width: 320px;
    }
    .bottom-strip-wrapper {
        margin-top: 20px;
        margin-bottom: 40px;
    }
    .floating-strip {
        flex-direction: column;
        gap: 25px;
    }
    .strip-item {
        flex-direction: row;
        text-align: left;
        gap: 15px;
        width: 100%;
        justify-content: flex-start;
    }
    .stats-banner {
        margin-top: 0;
        padding: 50px 0;
    }
    .stats-grid {
        flex-direction: column;
        gap: 0;
    }
    .stat-item {
        width: 100%;
        flex-direction: column; /* Stack icon and text vertically */
        align-items: center; /* Center horizontally */
        text-align: center; /* Ensure text inside is centered */
        gap: 12px; /* Add space between icon and text */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 25px 10px; /* Adjusted padding for better spacing */
    }
    .stat-item:last-child {
        border-bottom: none;
    }

    /* --- Grids & Cards --- */
    .why-choose-grid, .benefits-grid {
        grid-template-columns: 1fr 1fr;
    }
    .testi-grid, .blog-main-content .blog-grid, .branch-grid {
        grid-template-columns: 1fr;
    }
    .contact-form-col {
        padding: 30px 20px;
    }
    .why-row-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .why-text p {
        text-align: center;
    }

    /* --- Specific Page Components --- */
    .excellence-banner {
        padding: 60px 20px;
    }
    .excellence-heading {
        font-size: 28px;
    }
    .post-layout {
        padding: 30px 0;
    }
    .post-content {
        padding: 20px;
    }
    .post-featured-image {
        width: calc(100% + 40px);
        margin: -20px -20px 25px -20px;
    }
    .post-title {
        font-size: 28px;
    }
    .post-nav {
        flex-direction: column;
    }
    .cp-box-header {
        padding: 40px 20px 20px;
        text-align: center;
        flex-direction: column;
    }
    .cp-shield-icon {
        left: 50%;
        transform: translateX(-50%);
        top: -30px;
    }

    /* --- Footer --- */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-logo, .footer-socials {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-links a {
        padding: 5px 0;
    }
    .footer-contact {
        justify-content: center;
    }
    .fab-container {
        right: 16px;
        bottom: 16px;
    }
}

/* =========================================
   SMALL MOBILE RESPONSIVENESS (< 480px)
   ========================================= */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    .hero-title, .hero-content h1, .mf-title, .cp-title {
        font-size: 28px;
    }
    .why-choose-grid, .benefits-grid {
        grid-template-columns: 1fr;
    }
    .rate-card {
        max-width: 100%;
    }
    .testi-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .testi-left {
        min-width: 0;
    }
    .google-g-icon {
        bottom: 15px;
        right: 15px;
    }
    .faq-btn {
        padding: 15px;
        font-size: 15px;
    }
    .faq-answer {
        padding: 0 15px 15px;
        font-size: 14px;
    }
    .modal-content {
        padding: 40px 20px;
    }
    .modal-content h3 {
        font-size: 24px;
    }
    .post-title {
        font-size: 24px;
    }
    .mf-stat-header {
        flex-direction: column;
    }
}

/* =========================================
   ABOUT US PAGE - REDESIGNED RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
    .founder-intro {
        grid-template-columns: 250px 1fr;
        gap: 30px;
    }
    .founder-name-large {
        font-size: 36px;
    }
    .founder-quote-large {
        font-size: 20px;
    }
    .principles-grid-redefined {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .about-hero {
        padding: 60px 0;
    }
    .about-hero-title {
        font-size: 40px;
    }
    .about-hero-subtitle {
        font-size: 20px;
    }
    .founder-intro {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .founder-image-container {
        max-width: 250px;
        margin: 0 auto;
    }
    .founder-quote-large {
        text-align: left;
    }
    .founder-story-content p {
        text-align: left;
    }
    .compliance-grid-redefined {
        grid-template-columns: 1fr;
    }
}