/* ============================================================
   MOBILE APP EXPERIENCE - Comprehensive Responsive Overhaul
   Applied only on screens <= 1199px (tablets and phones)
   ============================================================ */

/* ========================
   TABLET VIEW (768px - 1199px)
   ======================== */
@media (max-width: 1199px) {

    /* --- Prevent Horizontal Scroll --- */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* --- Header / Top Bar --- */
    .header .topbar {
        padding: 4px 0 !important;
        font-size: 12px !important;
    }

    .header .branding {
        min-height: 50px !important;
        padding: 5px 0 !important;
    }

    .header .logo h1 {
        font-size: 22px !important;
    }

    /* --- Global Section Spacing --- */
    section,
    .section {
        padding: 30px 0 !important;
    }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .section-title {
        padding-bottom: 30px !important;
    }

    .section-title h2 {
        font-size: 22px !important;
    }

    .section-title p {
        font-size: 13px !important;
    }

    /* --- Images --- */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* ========================
   PHONE VIEW (max-width: 767px) - The "App" experience
   ======================== */
@media (max-width: 767px) {

    /* --- Typography --- */
    h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 20px !important;
    }

    h4 {
        font-size: 18px !important;
    }

    h5 {
        font-size: 16px !important;
    }

    p,
    li {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* --- Hero Section --- */
    .hero {
        padding: 60px 0 30px 0 !important;
        margin-top: 10px !important;
        min-height: auto !important;
    }

    .hero .hero-badge {
        font-size: 11px !important;
        padding: 6px 14px !important;
        margin-top: 20px !important;
        margin-bottom: 12px !important;
    }

    .hero h1 {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .hero p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
        max-width: 100% !important;
    }

    .hero .hero-actions {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .hero .hero-actions a,
    .hero .hero-actions .btn-primary,
    .hero .hero-actions .btn-secondary {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    .hero .hero-stats {
        display: flex !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    .hero .hero-stats .stat-item {
        text-align: center !important;
        flex: 1 1 30% !important;
    }

    .hero .hero-stats .stat-item .stat-number {
        font-size: 22px !important;
    }

    .hero .hero-stats .stat-item .stat-label {
        font-size: 10px !important;
    }

    .hero .hero-visual {
        margin-top: 20px !important;
    }

    .hero .feature-card {
        padding: 14px !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }

    .hero .feature-card i {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }

    .hero .feature-card span {
        font-size: 11px !important;
    }

    /* --- Page Header (About, Services, Pricing, Contact) --- */
    .page-header {
        padding: 60px 0 20px 0 !important;
        margin-top: 10px !important;
    }

    .page-badge {
        font-size: 11px !important;
        padding: 6px 14px !important;
        margin-top: 75px !important;
        margin-bottom: 10px !important;
    }

    .page-header h1 {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }

    .page-header .lead {
        font-size: 14px !important;
    }

    .page-header .header-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .page-header .header-actions a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    .header-visual img {
        margin-top: 0px !important;
        border-radius: 12px !important;
    }

    /* --- About Section --- */
    .about {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .about .content {
        padding-right: 0 !important;
        text-align: left !important;
    }

    .about .content h2 {
        font-size: 24px !important;
    }

    .about .content .lead {
        font-size: 15px !important;
    }

    .about .stats-container {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .about .stat-item .number {
        font-size: 1.8rem !important;
    }

    .about .stat-item .label {
        font-size: 11px !important;
    }

    .about .image-wrapper {
        margin-top: 25px !important;
    }

    .about .image-wrapper .main-image {
        border-radius: 12px !important;
    }

    .about .floating-card {
        display: none !important;
    }

    /* =============================================
     OUR PROCESS / STEPS GRID - Force 2-column
     ============================================= */
    .how-we-work .steps-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-bottom: 1.5rem !important;
    }

    .how-we-work .step-card {
        padding: 16px 12px !important;
        border-radius: 14px !important;
        min-height: auto !important;
    }

    .how-we-work .step-card .step-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
        margin: 0 auto 10px !important;
    }

    .how-we-work .step-card .step-number {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
        margin-bottom: 8px !important;
    }

    .how-we-work .step-card h3 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
        min-height: auto !important;
    }

    .how-we-work .step-card p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
    }

    .how-we-work .step-card .step-arrow {
        display: none !important;
    }

    /* =============================================
     FEATURES / TABS SECTION
     ============================================= */
    .features .nav-tabs {
        margin-bottom: 20px !important;
    }

    .features .nav-tabs .nav-item {
        margin-bottom: 8px !important;
    }

    .features .nav-tabs .nav-link {
        padding: 12px !important;
    }

    .features .nav-tabs .nav-link .icon-box {
        width: 36px !important;
        height: 36px !important;
    }

    .features .nav-tabs .nav-link .icon-box i {
        font-size: 16px !important;
    }

    .features .nav-tabs .nav-link h4 {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }

    .features .nav-tabs .nav-link p {
        font-size: 11px !important;
        margin-bottom: 0 !important;
    }

    .features .content-box {
        padding: 16px !important;
    }

    .features .content-box h3 {
        font-size: 18px !important;
    }

    .features .features-list li {
        font-size: 13px !important;
        padding: 6px 0 !important;
    }

    .features .image-box img {
        border-radius: 12px !important;
        margin-top: 15px !important;
    }

    /* =============================================
     PRICING SECTION - 2 Cards Per Row, Mobile Optimized
     (overrides main.css 2-column grid at line 3674)
     ============================================= */
    .pricing .row.gy-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pricing .row.gy-4>div[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .pricing .pricing-item {
        padding: 14px 10px !important;
        margin-bottom: 0 !important;
        border-radius: 12px !important;
        min-height: auto !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    }

    .pricing .pricing-item.featured {
        transform: none !important;
        border-width: 1px !important;
    }

    .pricing .pricing-item.featured:hover {
        transform: translateY(-3px) !important;
    }

    .pricing .pricing-item .pricing-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        margin: 0 auto 8px !important;
    }

    .pricing .pricing-item .pricing-icon i {
        font-size: 16px !important;
    }

    .pricing .pricing-item h3 {
        font-size: 0.82rem !important;
        margin-bottom: 6px !important;
        min-height: 2.2em !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .pricing .pricing-item .price {
        font-size: 1.5rem !important;
        margin-bottom: 6px !important;
        line-height: 1 !important;
    }

    .pricing .pricing-item .price .currency {
        font-size: 0.85rem !important;
    }

    .pricing .pricing-item .price .period {
        font-size: 0.65rem !important;
    }

    .pricing .pricing-item .description {
        font-size: 0.7rem !important;
        margin-bottom: 10px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        line-height: 1.3 !important;
        flex-grow: 0 !important;
    }

    .pricing .pricing-item .features-list {
        margin-bottom: 10px !important;
        flex-grow: 1 !important;
    }

    .pricing .pricing-item .features-list li {
        padding: 4px 0 !important;
        font-size: 0.7rem !important;
        gap: 4px !important;
        line-height: 1.25 !important;
    }

    .pricing .pricing-item .features-list li i {
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }

    .pricing .pricing-item .btn-pricing {
        padding: 7px 12px !important;
        font-size: 0.7rem !important;
        max-width: none !important;
        width: 100% !important;
        margin-top: auto !important;
        border-radius: 20px !important;
    }

    /* Override inline margin-top styles on buttons */
    .pricing .pricing-item .btn-pricing[style*="margin-top"] {
        margin-top: auto !important;
    }

    .pricing .pricing-item.featured .pricing-badge {
        font-size: 0.55rem !important;
        padding: 3px 8px !important;
        top: -8px !important;
    }

    .pricing .pricing-item.enterprise-plan .price {
        font-size: 1.3rem !important;
    }

    /* =============================================
     CALL TO ACTION SECTION
     ============================================= */
    .call-to-action .cta-wrapper {
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .call-to-action .cta-content {
        padding: 24px !important;
    }

    .call-to-action .cta-content h2 {
        font-size: 22px !important;
    }

    .call-to-action .cta-content p {
        font-size: 14px !important;
    }

    .call-to-action .benefit-item {
        margin-bottom: 12px !important;
    }

    .call-to-action .benefit-item .icon-box {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    .call-to-action .benefit-content h5 {
        font-size: 15px !important;
    }

    .call-to-action .benefit-content p {
        font-size: 12px !important;
    }

    .call-to-action .action-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .call-to-action .action-buttons .btn {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    .call-to-action .cta-image-container {
        padding: 20px !important;
    }

    .call-to-action .cta-image-container .main-image {
        border-radius: 12px !important;
    }

    /* =============================================
     CONTACT SECTION
     ============================================= */
    .contact .contact-main-wrapper {
        flex-direction: column !important;
    }

    .contact .map-wrapper {
        height: 200px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin-bottom: 20px !important;
    }

    .contact .map-wrapper iframe {
        border-radius: 12px !important;
    }

    .contact .contact-card {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }

    .contact .contact-card h4 {
        font-size: 15px !important;
    }

    .contact .contact-card p {
        font-size: 13px !important;
    }

    .contact .contact-form-container {
        padding: 16px !important;
    }

    .contact .contact-form-container h3 {
        font-size: 20px !important;
    }

    .contact .form-control {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    .contact .form-submit button {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* =============================================
     FOOTER
     ============================================= */
    .footer {
        padding-bottom: 100px !important;
        /* Space for bottom navbar */
    }

    .footer .footer-top {
        padding-top: 30px !important;
    }

    .footer .footer-about {
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .footer .footer-about .logo {
        justify-content: center !important;
    }

    .footer .footer-about .logo span,
    .footer .footer-about .logo .sitename {
        font-size: 22px !important;
    }

    .footer .footer-about p {
        font-size: 13px !important;
        text-align: center !important;
    }

    .footer .social-links {
        justify-content: center !important;
    }

    .footer .social-links a {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    .footer h4 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
        text-align: left !important;
    }

    .footer .footer-links {
        margin-bottom: 20px !important;
    }

    .footer .footer-links ul li {
        padding: 6px 0 !important;
    }

    .footer .footer-links ul a {
        font-size: 13px !important;
    }

    .footer .footer-contact {
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .footer .footer-contact p {
        font-size: 13px !important;
    }

    .footer .copyright {
        padding: 15px 0 !important;
        padding-bottom: 90px !important;
        /* Extra for bottom navbar */
    }

    /* --- Services Section (Featured Services) - Reduce right gap --- */
    .featured-services .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .featured-services .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .featured-services .row>[class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .featured-services .services-content {
        padding: 0 !important;
    }

    .featured-services .services-content h2 {
        font-size: 22px !important;
    }

    .featured-services .services-content p {
        font-size: 14px !important;
    }

    .featured-services .services-image {
        margin-top: 20px !important;
    }

    .featured-services .services-image img {
        border-radius: 12px !important;
    }

    /* --- Services Slider (Swiper) Mobile Fix --- */
    .featured-services .row.mt-5 {
        margin-top: 1.5rem !important;
    }

    .featured-services .services-slider {
        margin-top: 10px !important;
        overflow: visible !important;
    }

    .featured-services .services-slider .swiper-wrapper {
        padding: 0 !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
    }

    .featured-services .swiper-slide {
        width: 100% !important;
    }

    .featured-services .service-card {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 20px !important;
        margin-bottom: 0 !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06) !important;
    }

    .featured-services .service-card .icon-box {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 12px !important;
    }

    .featured-services .service-card .icon-box i {
        font-size: 22px !important;
    }

    .featured-services .service-card .content h4,
    .featured-services .service-card .content h4 a {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .featured-services .service-card .content p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible !important;
        display: block !important;
    }

    .featured-services .service-card .content .service-number {
        font-size: 14px !important;
        padding-left: 46px !important;
    }

    .featured-services .service-card .content .service-number::after {
        width: 38px !important;
    }

    .featured-services .service-card .arrow-link {
        display: none !important;
    }

    .featured-services .service-card:hover {
        transform: translateY(-3px) !important;
    }

    /* Show swiper navigation on mobile */
    .featured-services .swiper-navigation {
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-top: 16px !important;
    }

    .featured-services .swiper-navigation button {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    /* --- Category Grid Fix --- */
    .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 0 !important;
    }

    .category-card {
        padding: 24px 20px !important;
        min-height: auto !important;
    }

    .category-card .category-icon {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 16px !important;
    }

    .category-card .category-icon i {
        font-size: 24px !important;
    }

    .category-card h4 {
        font-size: 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .category-card p {
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }

    /* --- Buttons general --- */
    .btn-primary,
    .btn-secondary,
    .btn-pricing,
    .btn-submit,
    .btn-consultation {
        padding: 12px 24px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* --- WhatsApp float --- */
    .float {
        width: 50px !important;
        height: 50px !important;
        bottom: 85px !important;
        right: 15px !important;
        font-size: 24px !important;
    }

    .float .my-float {
        margin-top: 13px !important;
    }

    /* =============================================
     ABOUT PAGE - Mobile Optimization
     ============================================= */

    /* --- Gap Reduction --- */
    .blog-categories {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .all-posts {
        padding-top: 5px !important;
        margin-top: 0 !important;
    }

    .categories-grid {
        margin-bottom: -45px !important;
    }

    /* --- About Page Header --- */
    .about-header {
        padding: 70px 0 30px !important;
        overflow: visible !important;
    }

    .about-header .row.align-items-center {
        flex-direction: column !important;
        gap: 0px !important;
    }

    .about-header .col-lg-6 {
        width: 100% !important;
    }

    .about-header .page-header-content {
        text-align: center !important;
        padding: 0 10px !important;
    }

    .about-header h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .about-header .lead {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    .about-header .header-actions {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }

    .about-header .header-actions .btn-primary,
    .about-header .header-actions .btn-secondary {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    .about-header .header-visual {
        padding: 0 0px !important;
    }

    .about-header .header-visual img {
        width: 100% !important;
        height: auto !important;
        max-height: 220px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    /* --- About Stats (4 items in a 2x2 grid) --- */
    .about-stats {
        padding: 25px 0 !important;
    }

    .about-stats .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .about-stats .row.g-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    .about-stats .row.g-4>div[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .about-stats .stat-item {
        padding: 14px 8px !important;
        background: rgba(16, 185, 129, 0.05) !important;
        border-radius: 10px !important;
    }

    .about-stats .stat-number {
        font-size: 1.5rem !important;
        margin-bottom: 4px !important;
    }

    .about-stats .stat-label {
        font-size: 0.7rem !important;
    }

    /* --- Our Story Section --- */
    .our-story {
        padding: 30px 0 !important;
    }

    .our-story .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .our-story .row.align-items-center {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .our-story .col-lg-6 {
        width: 100% !important;
    }

    .our-story .story-content .subtitle {
        font-size: 12px !important;
        padding: 6px 12px !important;
        margin-bottom: 12px !important;
    }

    .our-story .story-content h2 {
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }

    .our-story .story-content .lead {
        font-size: 0.9rem !important;
        margin-bottom: 14px !important;
    }

    .our-story .story-content p {
        font-size: 0.9rem !important;
        margin-bottom: 16px !important;
    }

    .our-story .story-highlights {
        margin-top: 16px !important;
    }

    .our-story .highlight-item {
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .our-story .highlight-item i {
        font-size: 1rem !important;
    }

    .our-story .highlight-item span {
        font-size: 0.9rem !important;
    }

    /* Story visual & floating cards */
    .our-story .story-visual {
        padding-bottom: 50px !important;
    }

    .our-story .story-visual .main-image {
        border-radius: 10px !important;
        width: 100% !important;
    }

    .our-story .floating-card {
        width: 46% !important;
        padding: 10px 8px !important;
        animation: none !important;
        transform: none !important;
        border-radius: 8px !important;
    }

    .our-story .experience-card {
        top: auto !important;
        left: 2% !important;
        bottom: 0 !important;
    }

    .our-story .clients-card {
        top: auto !important;
        right: 2% !important;
        bottom: 0 !important;
        left: auto !important;
    }

    .our-story .floating-card i {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        border-radius: 6px !important;
    }

    .our-story .floating-card .text h5 {
        font-size: 0.85rem !important;
    }

    .our-story .floating-card .text span {
        font-size: 0.7rem !important;
    }

    /* --- Mission & Vision (Stacked full-width) --- */
    .mission-vision {
        padding: 25px 0 !important;
        margin-top: 10px !important;
    }

    .mission-vision .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .mission-vision .row.g-5 {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mission-vision .row.g-5>div[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    .mission-card,
    .vision-card {
        padding: 22px 18px !important;
        border-radius: 12px !important;
        min-height: auto !important;
        height: auto !important;
    }

    .mission-card:hover,
    .vision-card:hover {
        transform: none !important;
    }

    .mission-vision .card-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 14px !important;
    }

    .mission-vision .card-icon i {
        font-size: 1.2rem !important;
    }

    .mission-card h3,
    .vision-card h3 {
        font-size: 1.15rem !important;
        margin-bottom: 10px !important;
    }

    .mission-card p,
    .vision-card p {
        font-size: 0.9rem !important;
        margin-bottom: 14px !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible !important;
        display: block !important;
    }

    .mission-points li,
    .vision-points li {
        font-size: 0.85rem !important;
        padding-left: 16px !important;
        margin-bottom: 6px !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible !important;
        display: list-item !important;
    }

    /* --- Why Choose Us (2-column feature cards) --- */
    .why-choose {
        padding: 30px 0 !important;
        margin-top: 0 !important;
    }

    .why-choose .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .why-choose .section-title {
        margin-bottom: 20px !important;
    }

    .why-choose .section-title h2 {
        font-size: 1.3rem !important;
    }

    .why-choose .section-title p {
        font-size: 0.85rem !important;
    }

    .why-choose .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .why-choose .feature-card {
        padding: 16px 12px !important;
        border-radius: 10px !important;
    }

    .why-choose .feature-card:hover {
        transform: none !important;
    }

    .why-choose .feature-icon {
        width: 44px !important;
        height: 44px !important;
        margin: 0 auto 10px !important;
    }

    .why-choose .feature-icon i {
        font-size: 1.1rem !important;
    }

    .why-choose .feature-card h4 {
        font-size: 0.82rem !important;
        margin-bottom: 6px !important;
        line-height: 1.2 !important;
    }

    .why-choose .feature-card p {
        font-size: 0.72rem !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* --- About CTA Section --- */
    .about-cta {
        padding: 30px 0 !important;
    }

    .about-cta .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .about-cta .row.align-items-center {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }

    .about-cta .col-lg-8,
    .about-cta .col-lg-4 {
        width: 100% !important;
    }

    .about-cta .col-lg-4 {
        text-align: center !important;
    }

    .about-cta h2 {
        font-size: 1.3rem !important;
        margin-bottom: 8px !important;
    }

    .about-cta p {
        font-size: 0.9rem !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .about-cta .cta-buttons {
        justify-content: center !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .about-cta .cta-buttons .btn-primary,
    .about-cta .cta-buttons .btn-secondary {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* =============================================
     SERVICES PAGE (server.html) - Mobile Optimization
     ============================================= */

    /* --- Services Page Header --- */
    .services-header {
        padding: 70px 0 30px !important;
        overflow: visible !important;
    }

    .services-header .row.align-items-center {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .services-header .col-lg-6 {
        width: 100% !important;
    }

    .services-header .page-header-content {
        text-align: center !important;
        padding: 0 10px !important;
    }

    .services-header h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .services-header .lead {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    .services-header .header-actions {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }

    .services-header .header-actions .btn-primary,
    .services-header .header-actions .btn-secondary {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    .services-header .header-visual {
        padding: 0 !important;
    }

    .services-header .header-visual img {
        width: 100% !important;
        height: auto !important;
        max-height: 220px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    /* --- Services Stats (2x2 grid) --- */
    .services-stats {
        padding: 20px 0 !important;
        margin-bottom: 0 !important;
    }

    .services-stats .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .services-stats .row.g-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    .services-stats .row.g-4>div[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .services-stats .stat-item {
        padding: 12px 8px !important;
        background: rgba(16, 185, 129, 0.05) !important;
        border-radius: 10px !important;
    }

    .services-stats .stat-number {
        font-size: 1.4rem !important;
        margin-bottom: 4px !important;
    }

    .services-stats .stat-label {
        font-size: 0.7rem !important;
    }

    /* --- Services List (Full-width stacked cards) --- */
    .services-list {
        padding: 25px 0 !important;
        margin-top: 0 !important;
    }

    .services-list .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .services-list .section-title {
        margin-bottom: 16px !important;
        padding: 0 !important;
    }

    .services-list .section-title h2 {
        font-size: 1.3rem !important;
    }

    .services-list .section-title p {
        font-size: 0.85rem !important;
    }

    .services-list .services-grid {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .services-list .service-detail-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 18px 14px !important;
        border-radius: 12px !important;
        min-height: auto !important;
        height: auto !important;
    }

    .services-list .service-detail-card.featured {
        transform: none !important;
    }

    .services-list .service-detail-card:hover {
        transform: none !important;
    }

    .services-list .service-detail-card.featured::before {
        display: block !important;
    }

    .services-list .service-header {
        flex-direction: row !important;
        margin-bottom: 12px !important;
    }

    .services-list .service-icon {
        width: 42px !important;
        height: 42px !important;
    }

    .services-list .service-icon i {
        font-size: 1.1rem !important;
    }

    .services-list .service-meta {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .services-list .service-badge {
        font-size: 9px !important;
        padding: 2px 8px !important;
    }

    .services-list .service-number {
        font-size: 1.3rem !important;
    }

    .services-list .service-detail-card h3 {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible !important;
        display: block !important;
    }

    .services-list .service-description {
        font-size: 0.85rem !important;
        margin-bottom: 12px !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible !important;
        display: block !important;
    }

    .services-list .service-features {
        margin: 10px 0 !important;
    }

    .services-list .service-features h5 {
        font-size: 0.85rem !important;
        margin-bottom: 8px !important;
    }

    .services-list .service-features li {
        font-size: 0.82rem !important;
        margin-bottom: 5px !important;
        gap: 6px !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible !important;
        display: flex !important;
    }

    .services-list .service-features i {
        font-size: 0.85rem !important;
    }

    .services-list .service-cta {
        margin-top: 12px !important;
    }

    .services-list .btn-service,
    .services-list .btn-service-outline {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* --- Process Section (2x2 grid) --- */
    .services-process {
        padding: 30px 0 !important;
    }

    .services-process .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .services-process .section-title {
        margin-bottom: 16px !important;
    }

    .services-process .section-title h2 {
        font-size: 1.3rem !important;
    }

    .services-process .section-title p {
        font-size: 0.85rem !important;
    }

    .services-process .process-steps {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-top: 0 !important;
    }

    .services-process .process-step {
        padding: 16px 12px !important;
        border-radius: 10px !important;
    }

    .services-process .process-step:hover {
        transform: none !important;
    }

    .services-process .step-icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 10px !important;
    }

    .services-process .step-icon span {
        font-size: 1rem !important;
    }

    .services-process .process-step h4 {
        font-size: 0.82rem !important;
        margin-bottom: 6px !important;
        line-height: 1.2 !important;
    }

    .services-process .process-step p {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }

    /* --- Services CTA Section --- */
    .services-cta {
        padding: 30px 0 !important;
    }

    .services-cta .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .services-cta .row.align-items-center {
        flex-direction: column !important;
        text-align: center !important;
        gap: 16px !important;
    }

    .services-cta .col-lg-8,
    .services-cta .col-lg-4 {
        width: 100% !important;
    }

    .services-cta .col-lg-4 {
        text-align: center !important;
    }

    .services-cta h2 {
        font-size: 1.3rem !important;
        margin-bottom: 8px !important;
    }

    .services-cta p {
        font-size: 0.9rem !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .services-cta .cta-buttons {
        justify-content: center !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .services-cta .cta-buttons .btn-primary,
    .services-cta .cta-buttons .btn-secondary {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* =============================================
     PRICING PAGE (price.html) - Mobile Optimization
     ============================================= */

    /* --- Pricing Header --- */
    .pricing-header {
        padding: 70px 0 30px !important;
        overflow: visible !important;
    }

    .pricing-header .row.align-items-center {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .pricing-header .col-lg-6 {
        width: 100% !important;
    }

    .pricing-header .page-header-content {
        text-align: center !important;
        padding: 0 10px !important;
    }

    .pricing-header h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .pricing-header .lead {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    .pricing-header .page-badge {
        font-size: 0.7rem !important;
        padding: 4px 12px !important;
        margin-bottom: 12px !important;
        margin-top: !important;
    }

    .pricing-header .header-actions {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 16px !important;
    }

    .pricing-header .header-actions .btn-primary,
    .pricing-header .header-actions .btn-secondary {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        max-width: 100% !important;
    }

    .pricing-header .header-visual {
        padding: 0 !important;
        margin-top: 20px !important;
    }

    .pricing-header .header-visual img {
        width: 100% !important;
        height: auto !important;
        max-height: 220px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    /* --- Pricing Toggle --- */
    .pricing-toggle {
        padding: 20px 0 !important;
    }

    .pricing-toggle .toggle-container {
        margin-bottom: 8px !important;
    }

    .pricing-toggle .toggle-label {
        font-size: 0.9rem !important;
    }

    .pricing-toggle .discount-badge {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
    }

    .pricing-toggle .toggle-description {
        font-size: 0.8rem !important;
        padding: 0 10px !important;
    }

    /* --- Pricing Plans (2-Column Grid as requested) --- */
    .pricing-plans {
        padding: 20px 0 !important;
        margin-top: 0 !important;
    }

    .pricing-plans .section-title {
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }

    .pricing-plans .section-title h2 {
        font-size: 1.3rem !important;
    }

    .pricing-plans .row.gy-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 5px !important;
    }

    .pricing-plans .row.gy-4>[class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .pricing-plans .pricing-item {
        padding: 15px 10px !important;
        min-height: 100% !important;
        height: 100% !important;
        border-radius: 10px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .pricing-plans .pricing-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 10px !important;
        border-radius: 10px !important;
    }

    .pricing-plans .pricing-icon i {
        font-size: 1.1rem !important;
    }

    .pricing-plans .pricing-item h3 {
        font-size: 0.85rem !important;
        margin-bottom: 8px !important;
        min-height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.2 !important;
    }

    .pricing-plans .price {
        font-size: 1.4rem !important;
        margin-bottom: 8px !important;
    }

    .pricing-plans .price .currency {
        font-size: 0.9rem !important;
    }

    .pricing-plans .price .period {
        font-size: 0.65rem !important;
    }

    .pricing-plans .description {
        font-size: 0.7rem !important;
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        height: 36px !important;
        /* Fixed height for alignment */
    }

    .pricing-plans .features-list {
        margin-bottom: 12px !important;
        flex-grow: 1 !important;
    }

    .pricing-plans .features-list li {
        font-size: 0.7rem !important;
        padding: 4px 0 !important;
        gap: 5px !important;
        line-height: 1.2 !important;
        align-items: flex-start !important;
    }

    .pricing-plans .features-list i {
        font-size: 0.8rem !important;
        margin-top: 2px !important;
    }

    .pricing-plans .btn-pricing {
        padding: 8px 0 !important;
        font-size: 0.75rem !important;
        margin-top: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 32px !important;
    }

    /* --- Feature Comparison (Table) --- */
    .feature-comparison {
        padding: 30px 0 !important;
        margin-top: 0 !important;
    }

    .feature-comparison .section-title h2 {
        font-size: 1.3rem !important;
    }

    .comparison-table {
        padding: 15px !important;
        border-radius: 12px !important;
        overflow-x: auto !important;
    }

    .comparison-table .table {
        min-width: 500px !important;
        /* Force scroll for readable table */
        font-size: 0.8rem !important;
    }

    .comparison-table .table th,
    .comparison-table .table td {
        padding: 8px 10px !important;
    }

    .comparison-table .table th {
        font-size: 0.85rem !important;
    }

    /* --- Value Proposition (Mobile Optimized) --- */
    .value-proposition {
        padding: 30px 0 !important;
        margin-top: 0 !important;
    }

    .value-content .subtitle {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
        margin-bottom: 10px !important;
        margin-top: 0 !important;
    }

    .value-content h2 {
        font-size: 1.3rem !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
    }

    .value-content>p {
        font-size: 0.9rem !important;
        margin-bottom: 20px !important;
    }

    .value-features {
        gap: 12px !important;
    }

    .value-item {
        padding: 14px !important;
        gap: 12px !important;
        flex-direction: row !important;
        /* Keep icon side-by-side if fits */
        align-items: flex-start !important;
        text-align: left !important;
    }

    .value-item i {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        margin: 0 !important;
    }

    .value-item h5 {
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
    }

    .value-item p {
        font-size: 0.8rem !important;
    }

    /* --- Pricing FAQ --- */
    .pricing-faq {
        padding: 30px 0 !important;
        margin-top: 0 !important;
    }

    .pricing-faq .section-title h2 {
        font-size: 1.3rem !important;
    }

    .faq-grid {
        gap: 12px !important;
    }

    .faq-item {
        border-radius: 8px !important;
    }

    .faq-question {
        padding: 16px !important;
    }

    .faq-question h5 {
        font-size: 0.9rem !important;
    }

    .faq-answer p {
        font-size: 0.85rem !important;
        padding-bottom: 16px !important;
    }

    /* --- Pricing CTA --- */
    .pricing-cta {
        padding: 30px 0 !important;
    }

    .pricing-cta h2 {
        font-size: 1.3rem !important;
        margin-bottom: 10px !important;
    }

    .pricing-cta p {
        font-size: 0.9rem !important;
        margin-bottom: 16px !important;
    }

    .pricing-cta .cta-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .pricing-cta .btn-primary,
    .pricing-cta .btn-secondary {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* =============================================
     CONTACT PAGE (contact.html) - Mobile Optimization
     ============================================= */

    /* --- Contact Header --- */
    .contact-header {
        padding: 70px 0 30px !important;
        overflow: visible !important;
    }

    .contact-header .row.align-items-center {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .contact-header .col-lg-6 {
        width: 100% !important;
    }

    .contact-header .page-header-content {
        text-align: center !important;
        padding: 0 10px !important;
        margin-top: 0 !important;
    }

    .contact-header h1 {
        font-size: 1.6rem !important;
        /* Slightly larger than pricing/about */
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .contact-header .lead {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }

    .contact-header .page-badge {
        font-size: 0.7rem !important;
        padding: 4px 12px !important;
        margin-bottom: 15px !important;
        margin-top: 0 !important;
    }

    .contact-header .header-actions {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 10px !important;
    }

    .contact-header .header-actions .btn-primary,
    .contact-header .header-actions .btn-secondary {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        max-width: 100% !important;
    }

    .contact-header .header-visual {
        padding: 0 !important;
        margin-top: 10px !important;
    }

    .contact-header .header-visual img {
        width: 100% !important;
        height: auto !important;
        max-height: 220px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    /* --- Contact Info Cards --- */
    .contact-info {
        padding: 30px 0 !important;
    }

    .contact-info .row.g-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .contact-info .info-card {
        padding: 20px !important;
        border-radius: 12px !important;
        height: auto !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    }

    .contact-info .info-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 15px !important;
    }

    .contact-info .info-icon i {
        font-size: 1.2rem !important;
    }

    .contact-info .info-card h4 {
        font-size: 1.1rem !important;
        margin-bottom: 15px !important;
    }

    .location-item,
    .contact-item {
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
    }

    .location-item h5,
    .contact-item h5 {
        font-size: 0.95rem !important;
    }

    .location-item p,
    .contact-item a {
        font-size: 0.85rem !important;
    }

    /* --- Contact Form Section --- */
    .contact-form-section {
        padding: 30px 0 !important;
        margin-top: 0 !important;
    }

    .contact-form-section .container {
        padding: 0 15px !important;
    }

    .form-container {
        padding: 20px !important;
        border-radius: 12px !important;
    }

    .form-header h2 {
        font-size: 1.4rem !important;
    }

    .form-header p {
        font-size: 0.9rem !important;
    }

    .contact-form .form-group {
        margin-bottom: 15px !important;
    }

    .contact-form .form-control {
        font-size: 16px !important;
        /* Prevent zoom on iOS */
        padding: 10px 15px !important;
    }

    .contact-form .btn-submit {
        width: 100% !important;
        padding: 14px !important;
        font-size: 1rem !important;
    }

    /* --- Sidebar Info --- */
    .sidebar-info {
        margin-top: 30px !important;
        padding: 0 !important;
    }

    .info-widget {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }

    .info-widget h4 {
        font-size: 1.1rem !important;
    }

    .quick-link {
        padding: 12px !important;
    }

    .quick-link div span {
        font-size: 0.9rem !important;
    }

    /* --- Map Section --- */
    .map-section {
        padding: 30px 0 !important;
        margin-top: 0 !important;
    }

    .map-section .section-title h2 {
        font-size: 1.4rem !important;
    }

    .map-container .row.g-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .location-card {
        padding: 20px !important;
        height: auto !important;
    }

    .map-wrapper {
        margin-top: 20px !important;
        padding: 20px !important;
    }

    .map-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .btn-map {
        width: 100% !important;
        padding: 12px !important;
    }

    /* --- Contact FAQ --- */
    .contact-faq {
        padding: 30px 0 !important;
        margin-top: 0 !important;
    }

    .contact-faq .section-title h2 {
        font-size: 1.4rem !important;
    }

    .faq-question {
        padding: 15px !important;
    }

    .faq-question h5 {
        font-size: 0.9rem !important;
    }

    .faq-answer p {
        font-size: 0.85rem !important;
        padding-bottom: 15px !important;
    }
}


/* ========================
   VERY SMALL PHONES (<= 375px) 
   ======================== */
@media (max-width: 375px) {

    .hero h1 {
        font-size: 24px !important;
    }

    .hero .hero-stats .stat-item .stat-number {
        font-size: 18px !important;
    }

    .page-header h1 {
        font-size: 22px !important;
    }

    .section-title h2 {
        font-size: 20px !important;
    }

    .hero .hero-actions a,
    .hero .hero-actions .btn-primary,
    .hero .hero-actions .btn-secondary {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    /* Steps grid: 1 column on very small screens */
    .how-we-work .steps-grid {
        grid-template-columns: 1fr !important;
    }

    .pricing .pricing-item .price {
        font-size: 30px !important;
    }

    .pricing .pricing-item .price .currency {
        font-size: 18px !important;
    }
}