/* ============================================
   MOBILE FRIENDLY FIXES
   - Navbar / menu display and contrast
   - Text contrast (no black on blue)
   - Fit to screen, no horizontal scroll
   ============================================ */

/* Prevent horizontal scroll and fit to viewport */
html {
    overflow-x: hidden;
    max-width: 100vw;
}
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Container padding on small screens */
@media (max-width: 991px) {
    .container, .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }
}

/* ----- NAVBAR MOBILE ----- */
@media (max-width: 991px) {
    /* Navbar brand logo: fit on small screens */
    .navbar .navbar-brand {
        max-width: 60%;
    }
    .navbar .navbar-brand img {
        max-width: 100%;
        height: auto;
    }
    /* Visible hamburger: white icon on dark nav */
    .navbar .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.7);
        padding: 0.4rem 0.6rem;
    }
    .navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
    }

    /* Collapsed menu: light background so text is readable */
    .navbar-collapse {
        background: #fff;
        margin-top: 12px;
        margin-bottom: 0;
        padding: 20px 0 10px;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    /* Nav links in collapsed menu: dark text on white */
    .navbar-collapse .nav-link {
        color: #1a1a2e !important;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
        font-weight: 500;
    }
    .navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-link.active {
        color: #0a083b !important;
        background: rgba(48, 173, 178, 0.08);
    }
    /* Dropdown toggle in collapsed menu: dark text */
    .navbar-collapse .dropdown-toggle {
        color: #1a1a2e !important;
    }
    .navbar-collapse .dropdown-toggle::after {
        border-top-color: #1a1a2e;
    }
    /* Dropdown menus when collapsed: stay white, dark text */
    .navbar-collapse .dropdown-menu {
        background: #f8f9fa !important;
        border: 1px solid #e9ecef;
        margin-top: 4px;
        margin-bottom: 12px;
        padding: 8px;
        min-width: 100%;
        max-width: 100%;
        box-shadow: none;
    }
    .navbar-collapse .dropdown-item,
    .navbar-collapse .dropdown-item .dropdown-text strong,
    .navbar-collapse .dropdown-item .dropdown-text span {
        color: #1a1a2e !important;
    }
    .navbar-collapse .dropdown-item .dropdown-text span {
        color: #64748b !important;
    }
    .navbar-collapse .dropdown-item:hover {
        background: rgba(48, 173, 178, 0.12) !important;
    }
    .navbar-collapse .dropdown-item:hover .dropdown-text strong,
    .navbar-collapse .dropdown-item:hover .dropdown-text span {
        color: #0a083b !important;
    }
    /* Contact button in collapsed menu */
    .navbar-collapse .d-flex {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #eee;
    }
    .navbar-collapse .contact-btn {
        margin-left: 0 !important;
        width: 100%;
        text-align: center;
        display: block;
    }
}

/* ----- HERO / BANNER: fit and readable ----- */
@media (max-width: 767px) {
    .hero-section {
        padding: 70px 0 30px;
        min-height: auto;
    }
    .hero-section .content {
        padding-left: 0;
        padding-right: 0;
    }
    .hero-section h1 {
        font-size: 28px !important;
        line-height: 1.35 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 24px;
        color: #fff !important;
        text-align: left;
    }
    .hero-section h1 span {
        color: rgba(255, 255, 255, 0.95) !important;
    }
    .hero-cta {
        flex-direction: column;
        width: 100%;
    }
    .hero-cta .btn-primary-large,
    .hero-cta .btn-secondary-large {
        width: 100%;
        text-align: center;
    }
    .pic-right {
        padding-top: 20px;
    }
    .pic-right img {
        max-width: 100% !important;
    }
}
@media (max-width: 479px) {
    .hero-section h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
}

/* About us hero (inner pages) - Digital Marketing / GEO and other service inner pages */
@media (max-width: 767px) {
    .hero-section.about-us-hero {
        height: auto !important;
        min-height: 200px;
        padding: 50px 0 40px !important;
    }
    .hero-section.about-us-hero h1 {
        font-size: 22px !important;
        line-height: 1.4 !important;
        padding: 0 10px !important;
        color: #fff !important;
        word-wrap: break-word;
        hyphens: auto;
    }
}
@media (max-width: 479px) {
    .hero-section.about-us-hero h1 {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }
}

/* ----- CONTENT: ensure dark text on light backgrounds ----- */
@media (max-width: 991px) {
    .aboutus,
    .aboutus.inner-about,
    .services,
    .services-inner,
    .faq,
    .grey-bg {
        padding-left: 15px;
        padding-right: 15px;
    }
    .aboutus h2,
    .aboutus h3,
    .aboutus h4,
    .aboutus h5,
    .aboutus p,
    .services h2,
    .services h3,
    .services p,
    .faq h2,
    .faq h3,
    .faq h4,
    .faq p {
        color: #1a1a2e;
    }
    .aboutus h3 {
        color: #30ADB3;
    }
    .aboutus p,
    .services p,
    .faq .why-us-points-text p {
        color: #4a5568;
    }
    .background-color h4,
    .background-color h6,
    .background-color p {
        color: #1a1a2e !important;
    }
    .background-color .why-us-points-text h4 {
        color: #1a1a2e !important;
    }
    .background-color .why-us-points-text p {
        color: #4a5568 !important;
    }
}

/* ----- PROJECT-IN-MIND / CONTACT SECTION ----- */
@media (max-width: 767px) {
    .project-in-mind .container,
    .project-in-mind h2,
    .project-in-mind h3,
    .project-in-mind p,
    .project-in-mind ul {
        color: #1a1a2e;
    }
    .project-in-mind ul li {
        color: #4a5568;
    }
}

/* ----- FOOTER: readable on dark ----- */
@media (max-width: 991px) {
    .footer h3 {
        color: #fff;
    }
    .footer p,
    .footer .logo-center {
        color: rgba(255, 255, 255, 0.9);
    }
    .footer-nav a {
        color: rgba(255, 255, 255, 0.85);
    }
}

/* ----- SERVICE CARDS & INNER SECTIONS ----- */
@media (max-width: 767px) {
    .service-card-body h2,
    .service-card-body p,
    .services-inner h2,
    .services-inner h4,
    .services-inner p,
    .services-inner li {
        color: #1a1a2e !important;
    }
    .services-inner .text-primary {
        color: #0066B3 !important;
    }
    .services-inner p,
    .services-inner li {
        color: #4a5568 !important;
    }
}

/* ----- DIGITAL MARKETING / GEO PAGE (inner-about + services-inner) ----- */
@media (max-width: 991px) {
    .aboutus.inner-about h4.ps-5.pe-5,
    .inner-about h4.ps-5.pe-5 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size: 1rem;
        line-height: 1.5;
    }
}
@media (max-width: 767px) {
    .aboutus.inner-about,
    .aboutus.inner-about .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .aboutus.inner-about h2,
    .aboutus.inner-about h3,
    .aboutus.inner-about h4 {
        text-align: center;
    }
    /* Three-pillar cards (Analytics, Lead Gen, GEO): full width, readable */
    .services-inner .row.g-4 [class*="col-md-4"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .services-inner .background-color.rounded {
        padding: 1rem !important;
    }
    /* Two-column sections: stack and add spacing */
    .services-inner .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1.5rem;
    }
    .services-inner .row .col-md-6:last-child {
        margin-bottom: 0;
    }
    /* RaheBoost / CTA: single column, full width */
    .services-inner .col-md-8.mx-auto {
        max-width: 100%;
    }
    .services-inner .lead.mx-auto {
        max-width: 100% !important;
    }
    /* CTA buttons: stack and full width on small screens */
    .services-inner .text-center .btn.btn-lg {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .services-inner .text-center .btn.btn-lg:last-child {
        margin-bottom: 0;
    }
}

/* ----- UTILITY: no element overflows viewport ----- */
@media (max-width: 991px) {
    img {
        max-width: 100%;
        height: auto;
    }
    .row {
        margin-left: -8px;
        margin-right: -8px;
    }
    .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
}