/* ===================================================
   Control Productions - Responsive Design
   ================================================== */

/* ===================================================
   TABLET (768px and below)
   ================================================== */

@media (max-width: 768px) {
    /* TopBar */
    .topbar-container {
        padding: 0.8rem 1rem;
    }

    .logo-circle {
        width: 50px;
        height: 50px;
    }

    /* Hide desktop navigation */
    .topbar-nav {
        display: none;
    }

    /* Hide tagline on tablet */
    .topbar-tagline {
        display: none;
    }

    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Home Page */
    #logo-video {
        max-width: 350px;
    }

    .cta-button {
        font-size: 1.1rem;
        padding: 1rem 2rem;
    }

    .cta-container {
        bottom: 3rem;
    }
}

/* ===================================================
   MOBILE (576px and below)
   ================================================== */

@media (max-width: 576px) {
    /* TopBar */
    .topbar-container {
        padding: 0.6rem 1rem;
    }

    .logo-circle {
        width: 45px;
        height: 45px;
    }

    /* Home Page */
    #logo-video {
        max-width: 280px;
    }

    .cta-button {
        font-size: 1rem;
        padding: 0.9rem 1.5rem;
    }

    .cta-container {
        bottom: 2rem;
    }

    /* Modal */
    .modal-content {
        padding: 1.5rem;
        width: 95%;
    }

    .modal-content h2 {
        font-size: 1.5rem;
    }

    /* Forms */
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 0.7rem 0.8rem;
        font-size: 0.95rem;
    }

    .btn-primary {
        padding: 0.9rem;
        font-size: 1rem;
    }
}

/* ===================================================
   SMALL MOBILE (380px and below)
   ================================================== */

@media (max-width: 380px) {
    #logo-video {
        max-width: 240px;
    }

    .cta-button {
        font-size: 0.9rem;
        padding: 0.8rem 1.2rem;
    }

    .mobile-nav a {
        font-size: 1.3rem;
    }
}

/* ===================================================
   LARGE DESKTOP (1200px and above)
   ================================================== */

@media (min-width: 1200px) {
    .topbar-container {
        padding: 1.2rem 3rem;
    }

    #logo-video {
        max-width: 600px;
    }

    .cta-button {
        font-size: 1.4rem;
        padding: 1.3rem 3.5rem;
    }
}