/*
--------------------------------------------------------------------------------------------------------
* Project    : Picknick - Tour and Travel Agency HTML Template                                       * 
* Version    : 1.0                                                                                     *
*------------------------------------------------------------------------------------------------------- 
NOTE: This is the main stylesheet of the template, This file contains the styling for the actual Template*/

/*--------------------------------------------------------------
1. Responsive Media Query (less than 1599px)
--------------------------------------------------------------*/
@media only screen and (max-width: 1599px){
    .main-banner:after {
        width: calc(100% - 60px);
    }
} 

/*--------------------------------------------------------------
2. Responsive Media Query (less than 1199px)
--------------------------------------------------------------*/
@media only screen and (max-width:1199px) {
    .header-menu .header-main-menu .header-menu-items {
        margin-right: 1.2rem;
    }

    .service-links {
        padding-left: 40px;
    }

    .our-links {
        display: inline-block;
        padding-left: 20px;
    }
}

/*--------------------------------------------------------------
3. Responsive Media Query (less than 991px)
--------------------------------------------------------------*/
@media only screen and (max-width: 991px) {
    .header-topbar, .header-menu, .menu-plus-icon, .swiper-arrow, .main-banner:after, .shape-group, .download-thumb {
        display: none;
    }

    .mobile-menu-trigger {
        display: block;
        margin-left: 15px;
    }

    .main-header { 
        padding: 10px 0;
    }

    .header-account {
        margin-left: auto;
    } 

    .banner-form .form-group {
        margin-bottom: 20px;
    } 

    .main-swiper-slider { 
        padding: 0 0;
    }

    .banner-content {
        padding-top: 0;
        text-align: center;
        margin-bottom: 60px;
    }

    .banner-img { 
        width: auto; 
    }

    .banner-left-content {
        max-width: 768px;
        margin: 0 auto 30px;
        text-align: center;
    }

    .banner-left-content .banner-form { 
        padding: 30px; 
    }

    .banner-right-content{
        max-width: 100%;
        margin: 0 auto; 
    } 

    .home-search-area .search-box {
        margin-top: 0;
        padding: 30px;
    }

    .testimonial-bg { 
        display: none;
    }
    
    .testimonials-title {
        padding-bottom: 200px; 
    }

    .sliders {
        padding: 0;
        margin: 0;
    }  

    .about-img, .download-desc { 
        text-align: center;
    }

    .video-btn a {
        margin: auto;
    }
     
    .our-links {
        padding-left: 0;
        margin-top: 20px;
    }

    .service-links, .footer-about, .contact-links {
        margin-top: 25px;
        padding-left: 0;
    }

    .counterup2-area .counterup-box-wrap .counterup-box {
        grid-template-columns: repeat(2, 1fr); 
    }

    .default-sidebar.tour-sidebar, 
    .default-sidebar.booking-sidebar, 
    .default-sidebar.destinations-detail-sidebar, 
    .default-sidebar.blog-sidebar, 
    .default-sidebar.blog-detail-sidebar, 
    .default-sidebar.faq-sidebar {
        margin-left: 0;
        margin-top: 30px;
    } 

    .page-title { 
        padding: 140px 0 100px 0;
    }  
    
     
    .coming-soon-timer .table-cell {
        position: relative;
        min-width: 100px;
    }
    
    .coming-soon-timer .table-cell .tab-val {
        font-size: 32px; 
    }

    .tour-detail-image .tours-detail-image-slider {
        margin-bottom: 80px !important;
    }

    .tour-detail-image .tours-detail-image-slider .swiper-pagination {
        display: block;
    }

    .blog-pagination .blog-pagination-list.next-post { 
        margin-top: 30px;
    }

    .contact-form {
        margin-top: 30px;
    }

    .footer-widget {
        margin: 0 0 50px 0 !important;
    }

    .footer-top { 
        padding: 100px 0 30px 0; 
    }
    
}

/*--------------------------------------------------------------
4. Responsive Media Query (less than 767px)
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
    .main-logo {
        margin-right: 15px;
    }

    .main-logo img {
        width: 160px; 
    }

    .header-account-btn, 
    .mobile-menu-trigger-btn {
        width: 40px;
        height: 40px;
    }

    .about-img{
        margin-bottom: 45px;
    }

    .about-call, .about-discount, .download-shape-box{
        display: none;
    }    

    .tours-meta { 
        margin: 0 0 20px 0; 
    }   
     
    .tours-item.tours-style-2 .inner{ 
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; 
    } 

    .tours-item.tours-style-2 .tours-thumb { 
        margin-right: 0; 
        width: 100%;
        margin-bottom: 20px;
    }

    .coming-soon-content .coming-soon-title h1 {
        font-size: 62px; 
    }

    .subscribe-content {
        width: 100%;
    }

    .subscribe-form button.buttons {
        min-width: auto;
    }

    .item-shorting .pull-left {
        float: none;
        display: block;
        text-align: center;
    }
    .item-shorting .pull-right {
        max-width: 330px;
        margin: 0 auto;
        float: none;
        clear: both;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .included-area .included-details-box .overview-info-content-list {
        margin: 20px 0 0 0;
    }

    .included-area .included-details-box .overview-info-content-list.included:nth-child(1){
        margin-top: 0;
    }

    .calltoaction-area .calltoaction-content h2 {
        font-size: 32px;
    } 

    .download-desc { 
        padding: 0 30px;
    }  

    .blog-style-list .inner { 
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; 
    }

    .blog-style-list .inner .blog-thumb { 
        margin-right: 0; 
        width: 100%;
        margin-bottom: 20px;
    }      
    
    
}  

/*--------------------------------------------------------------
5. Responsive Media Query (less than 576px)
--------------------------------------------------------------*/
@media only screen and (max-width:576px) {
    .counterup-box-wrap .counterup-box, 
    .counterup2-area .counterup-box-wrap .counterup-box {
        grid-template-columns: repeat(1, 1fr);
    }

    .counterup-area .counterup-item{
        padding: 25px;
    }

    .counterup-box-wrap .counterup-box:before, 
    .counterup-box-wrap .counterup-box:after{
        display: none;
    }

    .progress-wrap{
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .download-store-item .inner { 
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; 

    }

    .download-store-item .inner .sparator {
        margin: 20px;
    }  
    
    .tour-detail-head { 
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; 
        margin-bottom: 30px;
    }

    .tour-detail-price {
        min-width: 100%; 
    }

    .tour-detail-meta { 
        margin-bottom: 0;
    }
    

} 

/*--------------------------------------------------------------
6. Responsive Media Query (less than 400px)
--------------------------------------------------------------*/ 
@media only screen and (max-width:400px) { 
    .copy-right p, .footer-bottom-link ul li a {
        font-size: 13px;
        line-height: 18px;
    }
    
    .item-shorting .pull-right { 
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column; 
    }

    .item-shorting .item-shortby {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    } 

    .destinations-program .destination-program-box .destination-program-day-item{   
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .blog-detail-share-option { 
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        padding: 30px 0 60px 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .blog-detail-share-title { 
        margin-bottom: 5px;
    }

    .blog-detail-social-links a { 
        margin: 0 8px;
    } 

}