/* <!-- ================
    |   responsive for 1200px |
    ================== --> */

@media screen and (max-width:1200px) {

    :root {
        /* spacing */

        --px: 80px;

    }

    /* <!-- ================
    |   header responsive |
    ================== --> */
    .alert {
        margin-top: 30px;
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        overflow: hidden;
        z-index: 50;
    }

    header.active {
        top: 250px;
    }

    /* small screen manu btn style */
    .navbar-menu-btn {
        display: block;
        position: absolute;
        top: 50%;
        left: var(--px);
        transform: translateY(-50%);
    }

    .navbar-brand {
        margin-left: 50px;
    }

    .navbar-menu-btn span {
        display: block;
        background: var(--light-gray);
        width: 25px;
        height: 2px;
        margin: 8px;
    }

    .navbar-menu-btn .two {
        width: 20px;
    }

    .navbar-menu-btn .three {
        width: 15px;
    }

    .navbar-menu-btn.active span {
        background: var(--bright-orange);
    }

    .navbar-menu-btn.active .one {
        transform: rotate(45deg) translateY(14px);
    }

    .navbar-menu-btn.active .two {
        width: 0;
    }

    .navbar-menu-btn.active .three {
        width: 25px;
        transform: rotate(-45deg) translateY(-14px);
    }


    nav {
        position: fixed;
        top: -250px;
        left: 0;
        width: 100%;
        z-index: 100;
    }

    nav.active {
        top: 0;
    }

    .navbar-nav {
        height: 250px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-left: var(--px);
        border-bottom: 1px solid var(--oxford-blue);
    }

    .navbar-nav li:not(:last-child) {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .navbar-form {
        position: absolute;
        top: 100%;
        left: var(--px);
        right: var(--px);
        height: 100%;
        background: var(--rich-black-fogra-29);
        margin-right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 100;
    }

    .navbar-form.active {
        top: auto;
    }

    .navbar-form-search {
        margin-right: 40px;
    }

    .navbar-form-btn {
        right: 80px;
    }

    .navbar-form-close {
        display: block;
        padding-top: 4px;
        opacity: 0.8;
    }

    .navbar-form-close:hover {
        opacity: 1;
    }

    .navbar-form-close ion-icon {
        font-size: 20px;
        color: var(--bright-orange);
    }

    .navbar-search-btn {
        display: block;
        margin-right: 100px;
        padding-top: 5px;
    }

    /* <!-- ============
    |   banner Sections |
    ============ --> */
    .banner {
        margin-top: 100px;
    }

    .banner-card .card-title {
        font-size: 2.5em;
    }

    /* <!-- ============
    |   category Sections responscive|
    ============ --> */

    .category-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    /* <!-- ============
    |   footer Sections responscive|
    ============ --> */

    .footer-content {
        flex-direction: column;
    }

    .footer-brand {
        margin-right: 0;
        margin-bottom: 60px;
    }

    .footer-links {
        grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    }
    

}

/* <!-- ================
    |   responsive for 1024px |
    ================== --> */

@media screen and (max-width:1024px) {
    :root {
        /* spacing */
        --px: 60px;
    }

    /* <!-- ================
    |   banner section |
    ================== --> */

    .banner-card .card-content {
        bottom: 40px;
        left: 60px;
        right: 60px;
    }

    .notification {
        margin-top: 50px;
    }
    .player{
        width: 900px;
        height: 400px;
    }
}

/* <!-- ================
    |   responsive for 768px |
    ================== --> */

@media screen and (max-width:768px) {
    :root {
        /* spacing */
        --px: 40px;
    }

    /* <!-- ============
    |   movie Sections responsive|
    ============ --> */
    .movies {
        margin-top: 120px;
    }

    /* <!-- ============
    |   filter bar responsive |
    ============ --> */
    .filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-bar select {
        margin-bottom: 20px;
    }

    .filter-radios {
        width: 100%;
    }

    .feedback-form {
        padding: 10px;
        margin: 10px;
        width: 80%;
    }

    .notification {
        margin-top: 50px;
    }

    .auth-form {
        width: 70%;
    }

    .player{
        width: 650px;
        height: 400px;
    }

}

/* <!-- ================
    |   responsive for mobile |
    ================== --> */

@media screen and (max-width:520px) {
    :root {
        /* spacing */
        --px: 20px;
        /* typography */
        --section-heading: 32px;
        --fs-lg: 20px
    }

    /* <!-- ============
    |   navbar search btn responsive|
    ============ --> */
    .navbar-search-btn {
        margin-right: 20px;
    }

    .navbar-form-search {
        margin-right: 20px;
    }

    .navbar-form-btn {
        right: 55px;
    }

    /* <!-- ============
    |   footer Sections responsive|
    ============ --> */
    .footer-copyright {
        flex-direction: column-reverse;
    }

    .wrapper {
        margin-bottom: 20px;
    }

    /* .navbar-brand{
        width: 10px;
        height: 10px;
    } */
    .feedbacks {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .feedback-form {
        padding: 10px;
        margin: 10px;
        width: 80%;
    }

    .feedback-message {
        width: auto;
        max-width: 100%;
        cols: 10;
    }

    .request-form {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .notification {
        margin-top: 50px;
    }

    .auth-form {
        width: 80%;
    }

    .alert-warning {
        margin: 35px;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
    .player{
        width: 310px;
        height: 310px;
        overflow: hidden;
    }
}