@media screen and (min-width: 1280px) {

    /* Preloader */
    #preloader {
        background-size: 10%;
    }
}

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

    /* Preloader */
    #preloader {
        background-size: 25%;
    }

    /* 08. Hero CSS */
    .hero-area .hero-content .hero-head {
        font-size: 50px;
    }
}
 


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

    /* Preloader */
    #preloader {
        background-size: 40%;
    }
 

    /* 07. Navigation CSS */
    .primary-menu .navbar-collapse {
        background: #FFF;
        position: absolute;
        top: 99%;
        left: 0;
        right: 0;
        margin-top: 0;
        z-index: 1000;
    }

    .primary-menu .navbar-nav {
        overflow: hidden;
        overflow-y: auto;
        max-width: 65vh;
        padding: 15px;
    }

    .primary-menu .navbar-nav .nav-item .nav-link {
        height: auto;
        padding: 8px 0;
        color: #1E1E1E;
    }

    .primary-menu .navbar-toggler {
        display: block;
    }

    /* 08. Hero CSS */
    .hero-area .hero-content .hero-head {
        font-size: 40px;
        line-height: 1.3;
    }
}

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

    /* 07. Navigation CSS */
    .primary-menu .social-icons li {
        margin: 2px 4px;
    }

    /* 08. Hero CSS */
    .hero-area .hero-content .hero-head {
        font-size: 27px;
        margin-bottom: 20px;
    }

    .hero-area .subscribe-content p {
        font-size: 18px;
        margin-bottom: 10px;
    }
}