/* Mobile-specific styles */
@media (max-width: 768px) {
    /* General page padding */
    .pi-page-main {
        padding: 2rem 1rem;
    }

    /* Hero section */
    .pi-hero-content .pi-hero-title {
        font-size: 2.5rem;
    }

    .pi-hero-content .pi-hero-subtitle {
        font-size: 1.5rem;
    }

    .pi-hero-content p {
        font-size: 1rem;
        padding: 0 1rem;
    }

    /* Hero images */
    .hero-image-composition {
        height: 350px;
        transform: scale(0.8);
    }

    .hero-image-container {
        width: 250px !important;
        height: 250px !important;
    }

    /* Coach section */
    .pi-coach-layout {
        gap: 2rem;
    }

    .pi-image-placeholder {
        min-height: 300px;
        border-radius: 100px 100px 20px 20px;
    }

    .coach-chat-container {
        height: 450px;
    }

    /* Solutions section */
    .solutions-list {
        gap: 1.5rem;
        padding: 0 1rem;
    }

    .solution-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .solution-text h3 {
        font-size: 1.2rem;
    }

    .solution-text p {
        font-size: 0.95rem;
    }

    /* Navigation dots */
    .pi-nav-dots {
        right: 15px;
    }

    .pi-nav-dot {
        width: 10px;
        height: 10px;
    }
    
    /* CTA Button */
    .pi-cta-button {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }

    /* Chat messages */
    .chat-messages {
        padding: 1rem;
    }

    .chat-bubble {
        max-width: 85%;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .pi-hero-content .pi-hero-title {
        font-size: 2rem;
    }

    .pi-hero-content .pi-hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-image-composition {
        transform: scale(0.7);
    }

    .solutions-text-content h2 {
        font-size: 1.8rem;
    }

    .chat-messages {
        padding: 0.75rem;
    }

    .chat-bubble {
        max-width: 90%;
        padding: 0.6rem 0.8rem;
    }
}
@media screen and (max-width: 767px) {
    /* Main Container */
    .main-container {
        padding: 10px;
    }

    /* Logo Section */
    .main-title {
        font-size: clamp(3rem, 8vw, 4rem);
    }

    .region {
        font-size: clamp(1rem, 2.5vw, 1.5rem);
    }

    /* Gallery Section */
    .gallery-container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding: 0 15px;
    }

    .gallery-title {
        font-size: 2rem;
        margin-bottom: 2rem;
        padding: 0 15px;
    }

    /* Nav Menu */
    .nav-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: block !important;
    }

    /* Tagline Section */
    .animated-tagline-section .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 1rem !important;
    }

    .animated-tagline-section .tagline {
        grid-column: span 1 !important;
    }

    /* Page Section */
    .page-section {
        padding: 1rem;
        min-height: calc(100vh - 66px);
    }

    /* Nav Dots */
    .nav-dots {
        right: 10px;
    }

    /* Cards */
    .gallery-card {
        min-height: 300px;
        padding: 1.5rem;
    }

    .card-title {
        font-size: 1.2rem;
    }

    .card-description {
        font-size: 0.9rem;
    }

    /* Core Tech Card Diagram */
    .card-diagram-container {
        height: 120px;
    }

    /* Bottom Indicator */
    .bottom-indicator {
        bottom: 20px;
    }

    /* Navbar */
    .navbar {
        padding: 0.8rem 1rem;
    }

    .nav-logo {
        font-size: 1.3rem;
    }

    .nav-logo img {
            height: 50px;
            width: auto;
            transition: transform 0.3s ease;
        }

        .nav-logo:hover img {
            transform: scale(1.05);
        }
    
    /* Footer */
    .footer {
        padding: 2rem 1rem;
    }
}

/* Decision Intelligence Page Mobile Styles */
@media screen and (max-width: 767px) {
    /* Hero Section */
    .decision-intelligence-page {
        padding: 0;
    }

    .hero-section {
        padding: 4rem 1rem 2rem;
        min-height: auto;
    }

    .hero-main-title {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
        text-align: center;
    }

    .hero-subtitle-1 {
        font-size: clamp(1.5rem, 4vw, 2rem);
        text-align: center;
    }

    .hero-subtitle-2 {
        font-size: clamp(1rem, 3vw, 1.2rem);
        text-align: center;
        padding: 0 1rem;
    }

    /* Demo Container */
    .demo-container {
        width: 100% !important;
        height: 500px !important;
        margin: 1rem auto !important;
    }

    .demo-sidebar {
        display: none !important;
    }

    /* Product Section */
    .product-section {
        padding: 3rem 1rem;
    }

    .product-overview {
        flex-direction: column;
    }

    .product-content {
        width: 100%;
        padding: 0;
    }

    .product-description {
        font-size: 1rem;
        text-align: center;
    }

    .product-image {
        width: 100%;
        margin-top: 2rem;
    }

    /* Features Section */
    .features-section {
        padding: 3rem 1rem;
    }

    .features-nav {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0 1rem;
    }

    .feature-nav-btn {
        width: 100%;
        padding: 0.8rem;
        font-size: 0.9rem;
    }

    .feature-content-container {
        padding: 2rem 0;
    }

    .feature-card-large {
        padding: 1.5rem;
    }

    .feature-icon-large {
        width: 60px;
        height: 60px;
    }

    .feature-icon-large svg {
        width: 30px;
        height: 30px;
    }

    .feature-title-large {
        font-size: 1.3rem;
    }

    .feature-description-large {
        font-size: 0.9rem;
    }

    .feature-benefits {
        margin-top: 1.5rem;
    }

    .benefit-item {
        font-size: 0.9rem;
    }

    /* Timeline */
    .how-it-works-timeline::before {
        display: none; /* Hide the vertical line */
    }

    .timeline-item {
        flex-direction: column !important;
        align-items: center;
    }

    .timeline-content {
        width: 100%;
        margin: 0;
    }

    .timeline-item:nth-child(even) {
        flex-direction: column !important;
    }

    .timeline-dot {
        display: none; /* Hide the dots since we're stacking vertically */
    }

    .timeline-item > div:last-child {
        display: none; /* Hide the empty spacing div */
    }

    /* Benefits Section */
    .benefits-section {
        padding: 3rem 1rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .benefit-card {
        padding: 1.5rem;
    }

    .benefit-title {
        font-size: 1.2rem;
    }

    .benefit-description {
        font-size: 0.9rem;
    }

    /* How It Works Section */
    .how-it-works {
        padding: 3rem 1rem;
    }

    .process-steps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .process-step {
        padding: 1.5rem;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .step-title {
        font-size: 1.2rem;
    }

    .step-description {
        font-size: 0.9rem;
    }

    /* Section Titles */
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
        text-align: center;
        padding: 0 1rem;
    }

    /* Side Navigation */
    .di-nav-dots {
        right: 10px;
    }

    .di-nav-dot {
        width: 10px;
        height: 10px;
    }
}

/* Small Mobile Screens */
@media screen and (max-width: 480px) {
    .main-title {
        font-size: clamp(2.5rem, 7vw, 3rem);
    }

    .region {
        font-size: clamp(0.9rem, 2vw, 1.2rem);
    }

    .gallery-card {
        min-height: 280px;
        padding: 1.2rem;
    }

    .tagline {
        font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    }

    /* AI Service Page - Extra Small Screens */
    .hero-main-title {
        font-size: clamp(2rem, 5vw, 2.5rem);
    }

    .service-card {
        padding: 1.5rem;
    }

    .timeline-content {
        padding: 1rem;
    }

    .timeline-icon {
        width: 60px;
        height: 60px;
    }

    .timeline-icon svg {
        width: 30px;
        height: 30px;
    }

    .timeline-text {
        font-size: 0.9rem;
    }

    /* Button Styles */
    .hero-cta {
        width: 100%;
        max-width: 300px;
        margin: 2rem auto;
        display: block;
        padding: 0.8rem 2rem;
        font-size: 1.1rem;
    }

    /* Floating Particles */
    .floating-particles {
        display: none;
    }
}