/*@media (max-width: 430px) {
  .section {
    padding-left: 18px;
    padding-right: 18px;
  }
}

!* Medium mobile (431px–767px) *!
@media (min-width: 431px) and (max-width: 767px) {
  .section {
    padding-left: 24px;
    padding-right: 24px;
  }
}

!* Tablets (768px–1023px) *!
@media (min-width: 768px) and (max-width: 1023px) {
  .section {
    padding-left: 32px;
    padding-right: 32px;
  }
}*/
@media (max-width: 430px) {
    .mobile-menu {
        width: 100% !important;
    }

    .header-container {
        padding: 1rem;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-description,
    .section-description {
        padding: 0 1rem;
        font-size: 0.95rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .platforms-grid,
    .pricing-grid,
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .feature-card,
    .testimonial-card,
    .pricing-card {
        padding: 1rem;
    }

    .subscription-form {
        flex-direction: column;
    }

    .cta-title {
        font-size: 1.5rem;
    }

    .cta-description {
        font-size: 1rem;
    }

    html, body {
        overflow-x: hidden;
    }
}

@media (max-width: 430px) {
    /* Hero Section Fixes */
    .hero {
        padding: 3rem 1rem; /* reduce vertical + horizontal spacing */
        text-align: center;
    }

    .hero-title {
        font-size: 1.75rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    .hero-description {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
        padding: 0 0.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .hero-buttons .button {
        width: 100%;
        text-align: center;
    }
}


@media (max-width: 430px) {
    /* Platforms Section */
    .platforms {
        padding: 3rem 1rem;
        text-align: center;
    }

    .platforms-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 👈 2 items per row */
        gap: 1.25rem;
        justify-items: center;
    }

    .platform-item {
        width: 100%;
        max-width: 140px;
        padding: 1rem;
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .platform-icon svg {
        width: 36px;
        height: 36px;
    }

    .platform-name {
        font-size: 0.875rem;
        margin-top: 0.5rem;
        word-break: break-word;
        text-align: center;
    }

    .section-title {
        font-size: 1.25rem;
    }

    .section-description {
        font-size: 0.95rem;
        margin-top: 0.5rem;
    }

    .platforms-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* ✅ 2 items per row */
        gap: 1rem !important;
        /*padding: 0 !important;*/
        justify-items: center !important;
    }

    .platform-item {
        max-width: 100% !important;
        width: 100%;
        text-align: center;
        padding: 1rem;
        background: #fff;
        border-radius: 0.75rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .platform-icon svg {
        width: 36px;
        height: 36px;
    }

    .platform-name {
        font-size: 0.875rem;
        display: block;
        margin-top: 0.5rem;
    }

    .platform-item {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .trusted-logo-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
    }

    .trusted-logo {
        max-height: 60px;
        width: auto;
        object-fit: contain;
    }

    .trusted-slider .slick-slide {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .trusted-slider > div {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .trusted-slider .slick-prev,
    .trusted-slider .slick-next {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .features {
        padding: 3rem 1rem;
        text-align: center;
    }

    .features-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .section-description {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .features-slider .slick-slide {
        display: flex !important;
        justify-content: center;
        padding: 0 0.5rem;
    }

    .feature-card {
        background-color: #fff;
        border-radius: 0.75rem;
        padding: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .feature-title {
        font-size: 1.1rem;
        margin-top: 0.75rem;
    }

    .feature-description {
        font-size: 0.9rem;
        margin-top: 0.5rem;
        line-height: 1.4;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feature-number {
        font-size: 1rem;
        font-weight: bold;
    }

    .features-slider .slick-prev,
    .features-slider .slick-next {
        top: 45%;
        z-index: 2;
        transform: translateY(-50%);
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        width: 32px;
        height: 32px;
    }

    .features-slider .slick-prev,
    .features-slider .slick-next {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .more-features {
        padding: 3rem 1rem;
        text-align: center;
    }

    .more-features-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .section-description {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .more-features-grid {
        display: grid;
        grid-template-columns: 1fr; /* 👈 Stack vertically */
        gap: 1rem;
    }

    .more-feature-item {
        padding: 1rem;
        border-radius: 0.75rem;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        text-align: left;
    }

    .more-feature-title {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .more-feature-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }
}

@media (max-width: 430px) {
    .testimonials {
        padding: 3rem 1rem;
        text-align: center;
    }

    .testimonials-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .testimonials-slider .slick-slide {
        display: flex !important;
        justify-content: center;
        padding: 0 0.5rem;
    }

    .testimonial-card {
        background-color: #fff;
        padding: 1rem;
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        max-width: 320px;
        text-align: left;
    }

    .testimonial-header {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        margin-bottom: 1rem;
    }

    .testimonial-avatar {
        width: 48px;
        height: 48px;
    }

    .circle-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .testimonial-name {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .testimonial-position {
        font-size: 0.85rem;
        color: #777;
    }

    .testimonial-text {
        font-size: 0.9rem;
        line-height: 1.5;
        color: #333;
    }

    /* 👇 Hide arrows for this and future sliders */
    .slick-prev,
    .slick-next {
        display: none !important;
    }
}

@media (max-width: 430px) {
    /* Narrower padding for just these sections */
    .features.container,
    .testimonials.container {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    /* Optional: tweak card width to fit nicely */
    .feature-card,
    .testimonial-card {
        width: 100%;
        max-width: 100%;
    }

    .features-slider .slick-slide,
    .testimonials-slider .slick-slide {
        display: flex !important;
        justify-content: center;
    }
}

@media (max-width: 430px) {
    .subscription {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    .subscription-input,
    .subscription-form .button-primary {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .blog {
        padding-left: 18px;
        padding-right: 18px;
        text-align: center;
    }

    .blog-title {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .blog-description {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .blog-grid {
        display: grid;
        grid-template-columns: 1fr; /* 1 card per row on mobile */
        gap: 1.5rem;
    }

    .blog-card {
        background-color: #fff;
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        text-align: left;
    }

    .blog-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    .blog-content {
        padding: 1rem;
    }

    .blog-post-title {
        font-size: 1.1rem;
        margin: 0.75rem 0 0.5rem;
    }

    .blog-excerpt {
        font-size: 0.95rem;
        color: #555;
    }

    .blog-meta {
        display: flex;
        /*flex-direction: column;*/
        align-items: flex-start;
        font-size: 0.85rem;
        margin-top: 1rem;
        gap: 0.25rem;
    }

    .blog-author {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .blog-view-all {
        margin-top: 2rem;
    }

    .blog-view-all .button-primary {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .pricing {
        padding-left: 18px !important;
        padding-right: 18px !important;
        text-align: center;
    }

    .pricing-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .pricing-description {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .pricing-toggle-container {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .pricing-toggle-button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        flex: 1 1 40%;
    }

    .pricing-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 2rem;
    }

    .pricing-card {
        width: 100%;
        padding: 1.25rem;
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        text-align: left;
    }

    .pricing-card-title {
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
    }

    .pricing-card-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .pricing-card-price {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .pricing-card-amount {
        font-size: 1.5rem;
        font-weight: bold;
    }

    .pricing-card-body {
        margin-top: 1.5rem;
    }

    .pricing-card-features {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .pricing-card-feature {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .pricing-card-feature-icon {
        min-width: 20px;
        height: 20px;
    }

    .pricing-card-badge {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
        margin-bottom: 0.75rem;
    }

    .pricing-card .button {
        margin-top: 1rem;
        width: 100%;
    }

    .pricing-grid {
        grid-template-columns: 1fr; /* Stack vertically */
    }

    .pricing-card {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .faq {
        padding-left: 18px;
        padding-right: 18px;
    }

    .faq-title {
        font-size: 1.5rem;
        /*margin-bottom: 1rem;*/
    }

    .section-description {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .accordion-trigger {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
        width: 100%;
        background: none;
        text-align: left;
    }

    .accordion-trigger span {
        flex: 1;
        margin-right: 0.5rem;
    }

    .accordion-content {
        margin-top: 0.25rem; /* Reduce vertical gap */
        padding-left: 18px;
        padding-right: 18px;
    }

    .accordion-content-inner {
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0; /* Ensure no default margin from paragraphs */
    }
}

@media (max-width: 430px) {
    .cta {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .container,
    .features,
    .testimonials,
    .pricing,
    .faq,
    .subscription,
    .blog {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .platforms-grid,
    .blog-grid,
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .more-features-grid {
        grid-template-columns: 1fr 1fr;
    }

    .features-slider .slick-slide,
    .testimonials-slider .slick-slide {
        padding: 0 0.75rem;
    }

    .feature-card,
    .testimonial-card,
    .pricing-card {
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    h2.section-title,
    .hero-title,
    .pricing-title,
    .faq-title {
        font-size: 1.75rem;
    }

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

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two equal-width cards */
        gap: 1.5rem;
    }

    .pricing-card {
        width: 100%; /* Stretch to fill the column */
        max-width: none; /* Remove any width limits */
        margin: 0 auto; /* Center if needed */
    }
}

@media (min-width: 834px) and (max-width: 1199px) {
    /* Adjust container spacing */
    .container,
    .features,
    .testimonials,
    .pricing,
    .faq,
    .subscription,
    .blog {
        padding-left: 40px;
        padding-right: 40px;
    }

    /* Pricing: 3 even-width cards per row */
    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .pricing-card {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    /* Blog or Feature Cards (if grid-based) */
    .blog-grid,
    .more-features-grid,
    .platforms-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Improve text scaling */
    .section-title,
    .pricing-title,
    .faq-title {
        font-size: 1.75rem;
    }

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

@media (min-width: 500px) and (max-width: 600px) {
    .container,
    .pricing,
    .faq,
    .blog,
    .subscription {
        padding-left: 24px;
        padding-right: 24px;
    }

    .pricing-grid,
    .blog-grid,
    .more-features-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card,
    .blog-card {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (min-width: 1060px) and (max-width: 1150px) {
    .container,
    .pricing,
    .faq,
    .subscription {
        padding-left: 32px;
        padding-right: 32px;
    }

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 wide cards across screens */
        gap: 2rem;
    }

    .pricing-card {
        width: 100%;
        max-width: none;
    }

    .slick-slide {
        display: none;
    }
}

@media (max-width: 768px) {
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo-icon img {
        max-height: 36px;
        width: auto;
        object-fit: contain;
    }

    .logo-icon {
        display: flex;
        align-items: center;
    }

    .mobile-menu-close {
        font-size: 1.75rem;
        color: #333;
        cursor: pointer;
    }
}

/* Small mobile */
@media (max-width: 430px) {
    .story-content {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .story-text {
        padding: 0 1rem;
    }

    .story-image {
        font-size: 3rem;
        text-align: center;
    }

    .story-image img {
        max-width: 100%;
        height: auto;
    }
}

/* Large mobile and Surface Duo */
@media (min-width: 431px) and (max-width: 767px) {
    .story-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .story-text {
        padding: 0 2rem;
    }
}

/* Tablets (iPad Mini / Pro) */
@media (min-width: 768px) and (max-width: 1023px) {
    .story-content {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
    }

    .story-text {
        flex: 1;
        text-align: left;
    }

    .story-image {
        flex: 1;
        text-align: center;
    }

    .story-image img {
        max-width: 100%;
        height: auto;
    }
}

/* Small desktop (optional if needed) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .story-content {
        gap: 3rem;
    }

    .story-text h2 {
        font-size: 2rem;
    }

    .story-text p {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .stats-section {
        color: #fff; /* Ensure all text inside is white */
    }

    .stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two columns for tablets */
        gap: 1.5rem;
    }

    .stat-item {
        text-align: left; /* Force left alignment */
    }

    .stat-item h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #fff; /* White heading */
        margin-bottom: 0.25rem;
    }

    .stat-item p {
        font-size: 1rem;
        color: #fff; /* White label text */
    }
}

@media (max-width: 430px) {
    .stats-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
}

/* For screens ≤ 768px */
@media (max-width: 768px) {
    .contact-container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .form-container,
    .contact-info {
        width: 100%;
    }

    .form-header h2,
    .contact-info h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    .form-header p,
    .contact-info p {
        font-size: 1rem;
        text-align: center;
    }

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

    .form-label {
        font-size: 0.95rem;
    }

    .form-control,
    textarea.form-control {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
        border-radius: 6px;
    }

    .btn-submit {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
        border-radius: 6px;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .info-icon {
        min-width: 24px;
    }

    .info-content h4 {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    .info-content p,
    .info-content a {
        font-size: 0.95rem;
    }

    .contact-section .container {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    .contact-container {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    .form-container,
    .contact-info {
        width: 100%;
    }
}