/*============================================================
Tablet Layout: 768px.
==============================================================*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
    #home .contact-btn {
        left: 38%;
    }

    #home h2 {
        font-size: 50px;
    }
    
    .logo span {
        font-size: 55px;
    }
    
    .logo a {
        font-size: 45px;
        padding-right: 40px;
    }
    
    nav ul {
        margin: 5px 0 0;
    }

    nav ul li {
        margin-left: 0;
    }

    nav ul li a {
        font-size: 14px;
        padding: 2px 8px;
        text-align: center;
    }

    nav ul li a i {
        padding-right: 2px;
    }  
}

/*============================================================
Wide Mobile Layout: 480px.
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
     
}

/*============================================================
Mobile Layout: 320px.
==============================================================*/
@media only screen and (max-width: 767px) {
    .navbar button {
        border: 1px solid var(--primary-color);
        font-size: 22px;
        color: var(--primary-color);
    }

    #home .contact-btn {
        left: 25%;
    }

    #home h2 {
        font-size: 35px;
    }

    nav ul {
        background-color: var(--black);      
        margin-top: -15px;
    }
    
    nav ul li {
        padding-left: 15px;
        color: #fff;
    }
    
    nav ul li a {
    font-size: 15px;
    color: #ffffff;
}
	
	.slider-area .owl-dots {
		right: 5px;
	}
    
    #about h2 {
        font-size: 30px;
    }
    
    #about h2:before {
        left: 17%;
    }
    
    #about h2:after {
        right: 17%;
    }
    
    #about p {
        margin-top: 20px;
    }
    
    .download-btn {
        margin-left: 80px;
        margin-top: 10px;
    }
    
    .about-btn {
        margin-left: 80px;
        margin-top: 10px;
    }
    
    #service h2 {
        font-size: 30px;
    }
    
    #service h2:before {
        left: 9%;
    }
    
    #service h2:after {
        right: 9%;
    }
    
     
    #portfolio h2 {
        font-size: 30px;
    }
    
    #portfolio h2:before {
        left: 5%;
    }
    
    #portfolio h2:after {
        right: 5%;
    }
    
    .portfolio-filter ul li {
        padding: 5px;
        font-size: 14px;
    }
    
    .recent-project {
        min-height: 550px;
    }
    
    .single-count {
        width: 150px;
        height: 130px;
        margin: 20px;
        padding: 0px;
    }
    
    .single-count .counting-icon i {
        font-size: 30px;
        padding-top: 14px;
    }
    
    .single-count span {
        font-size: 25px;
    }

    .single-count p {
        font-size: 16px;
    }
    
    #testimonial h2 {
        font-size: 30px;
        
    }
    
    #testimonial h2 span {
        letter-spacing: 2px;
    }
    
    #testimonial h2:before {
        left: 1%;
    }

    #testimonial h2:after {
        right: 1%;
    }
    
    #blog h2 {
        font-size: 30px;
    }
    
    #blog h2:before {
        left: 11%;
    }

    #blog h2:after {
        right: 12%;
    }
    
    .modal-image {
        width: 100%;
    }
    
    .modal-image img {
        width: 400px;
        height: 300px;
    }

    .modal-text {
        width: 100%;
        padding: 0px;
    }

    .modal-text h5 {
        padding-top: 25px;
        padding-bottom: 12px;
    }
    
    #contact h2 {
        font-size: 30px;
    }
    
    #contact h2:before {
        left: 8%;
    }

    #contact h2:after {
        right: 8%;
    }
}