/* In style-tablet.css */
@media (min-width: 501px) and (max-width: 1499px) {
    .section {
        padding: 4rem 2rem; /* Add more vertical padding */
        min-height: auto;   /* Remove the minimum height for more natural flow */
    }

    /* --- Hero Section Fix --- */
    .hero-container {
        flex-direction: column; /* Stack the text and image sections */
        text-align: center;
        gap: 3rem; /* Add space between text and gallery */
    }

    .hero-left, .hero-right {
        max-width: 100%; /* Allow both sections to take full width */
        width: 80%;
    }

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

    .product-gallery {
        height: 500px; /* Reduce gallery height */
        --main-image-scale: 1.55;
        --main-image-position-x: 0%;
        --main-image-position-y: 0%;
        --side-image-scale: 1.30;
        --side-image-position-x: 20%;
        --side-image-position-y: 15%;
        --side-image-opacity: 0.4;
    }

    /* Adjust image positions for tablet */
    .gallery-image-main {
        transform: translate(-50%, 0) scale(1.2); /* Center and scale down */
        left: 50%;
    }
    .gallery-image-side {
        transform: translate(10%, 0) scale(1.2); /* Adjust side image */
    }


    /* --- Key Features Section Fix --- */
    .key-features-and-why {
        flex-direction: column; /* Stack the two columns */
        gap: 3rem;
    }

    #flow-slideshow-container {
        height: 40vh; /* Reduce height of slideshow */
        width: 90vw;  /* Make slideshow wider to fit screen */
    }
    
    #dynamic-feature-text {
        min-height: 200px; /* Reduce height as font sizes are smaller */
    }
    
    .feature-text-block {
        position: relative; /* CHANGE: Make text blocks static to prevent overlap */
        transform: none;
        margin-bottom: 1rem;
    }
    
    /* We only want to show the active text block */
    .feature-text-block:not(.active) {
        display: none;
    }
    
    .why-fyvia-container {
        width: 100%;
    }
    .how-to-use-boxes{
        flex-direction: column;
        gap: 20px;
    }
    .how-to-use-section{
        padding: 20px;
    }
    .how-to-use-title,
    .suggest-features-title {
        font-size: 1.8rem;
        text-align: center;
    }
    .how-to-use-box {
        padding: 15px;
        max-width: none;
    }
    .how-to-use-box-title {
        font-size: 1.2rem;
    }
    .how-to-use-box-text {
        font-size: 14px;
    }

    /* Template Builders Section - Tablet Styles */
    #template-builders {
        padding: 0 2vw;
    }

    .template-builders-container {
        width: 95%;
        max-width: 1000px;
        padding: 1.5rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .template-builders-title {
        font-size: 2rem;
        margin-bottom: 0.8rem;
        margin-top: 0.8rem;
    }

    .template-builders-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
        max-width: 500px;
    }

    .template-builder-tabs {
        gap: 0.8rem;
        margin-bottom: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .template-tab {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }

    .template-builder-content {
        min-height: 500px;
    }

    /* Template builder containers - tablet adjustments */
    #template-builders .invoice-builder-container,
    #template-builders .quote-builder-container {
        height: auto;
        min-height: 500px;
    }

    /* Sidebar adjustments for tablet */
    #template-builders .invoice-builder__sidebar,
    #template-builders .quote-builder__sidebar {
        min-width: 280px;
        max-width: 320px;
    }

    /* Canvas container adjustments */
    #template-builders .invoice-builder__canvas-container,
    #template-builders .quote-builder__canvas-container {
        padding: 0.3rem;
    }

    /* Toast notification adjustments for tablet */
    .template-toast-notification {
        top: 80px;
        right: 15px;
    }

    .toast-content {
        min-width: 280px;
        max-width: 350px;
        padding: 0.8rem 1.2rem;
    }

    .toast-message {
        font-size: 0.85rem;
    }
}

@media (min-width: 1001px) and (max-width: 1499px) {
    #flow-slideshow-container {
        height: 70vh; /* Reduce height of slideshow */
        width: 80vw;  /* Make slideshow wider to fit screen */
    }
}