@media only screen and (max-width: 1400px)  {
    
    .topMenu .megaMenu {
        width: 700px;
    }
}

@media only screen and (max-width: 1200px)  {
    
    .topMenu .megaMenu {
        width: 600px;
    }
    .topMenu .megaMenu > li > ul li a {
        line-height: 16px;
        font-size: 13px;
    }
    .headerTop .callUs span {
        text-align: right
    }
    .headerTop .callUs strong {
        display: block;
        text-align: right
    }
    .headerTop .topDeals .countDown {
        max-width: 220px;
        margin-left: 0;
    }
    .bookVillas .time {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .bookVillas .time .timeRadios {
        margin-left: 0;
    }
}

@media only screen and (max-width: 1024px)  {
    
    .hc-nav-trigger {
        position: relative;
        top: auto;
        z-index: 1;
    }
    .headerBottom {
        padding: 15px 0;
    }
    .hc-nav-trigger span, .hc-nav-trigger span::before, .hc-nav-trigger span::after ,   header.absoluteHeader:hover .hc-nav-trigger span, header.absoluteHeader:hover .hc-nav-trigger span::before, header.absoluteHeader:hover .hc-nav-trigger span::after{
        height: 2px;
        background-color: #000;
    }
    header.absoluteHeader .hc-nav-trigger span,     header.absoluteHeader .hc-nav-trigger span::before,     header.absoluteHeader .hc-nav-trigger span::after {
       background-color: #fff;
    }
    .hc-nav-trigger span {
        width: 18px;
    }
    .hc-nav-trigger span::before{
        top: -7px;
    }
    .hc-nav-trigger span::after {
        bottom: -7px;
    }
    .hc-nav-trigger.toggle-open span::after {
        bottom:-10px;
    }
.hc-nav-trigger.toggle-open span::before { 
    top:-10px}
    .hc-offcanvas-nav .nav-container, .hc-offcanvas-nav .nav-wrapper, .hc-offcanvas-nav ul {
        background: #222
    }
    .hc-offcanvas-nav .nav-content>.nav-close:first-child a, .hc-offcanvas-nav .nav-title+.nav-close a.has-label, .hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav .nav-back a {
           background: #222;
        border-color:#222;
    }
    .hc-offcanvas-nav .nav-wrapper-0>.nav-content>ul:first-of-type>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link {
        border-color: #222;
    }
    .hc-offcanvas-nav .nav-wrapper-0>.nav-content>ul:first-of-type>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link+a {
         border-color: #222;
    }
    .hc-offcanvas-nav .nav-item-link, .hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav .nav-back a {
        border-top:1px solid #333;
        border-bottom: 0;
        font-size: 14px;
    }
    .hc-offcanvas-nav a.nav-next {
        border-color: #222;
      border-top:1px solid #333;
         border-bottom:1px solid #333;
    }
    .hc-offcanvas-nav:not(.touch-device) li:not(.nav-item-custom) a:not([disabled]):hover , .hc-offcanvas-nav .nav-content>.nav-close:first-child a:hover, .hc-offcanvas-nav .nav-title+.nav-close a.has-label:hover, .hc-offcanvas-nav li.nav-close a:hover, .hc-offcanvas-nav .nav-back a:hover{
        background: #222;
    }
    #homeSectionThree .homeSectionThreeContent .homeSectionThreeBox {
        max-width: 50%;
    }
    #homeComments .homeCommentsBox {
        max-width: 50%;
    }
    #pageBanner .pageTitle {
        font-size: 48px;
    }
    .aboutPhoto .aboutPhotoBox {
        right: 0;
    }
     .bannerLink .bannerPhoto img {
        width: 100%;
    }
}
@media only screen and (max-width: 992px)  {
    .villasFilterField {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .villasFilterSearch .btn-filterSearch {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #homeTopBanner .homeTopText span {
        font-size: 40px;
    }
    .sectionTitle {
        font-size: 40px;
    }
    #aboutTop .aboutTopText {
        display: block;
        margin-top: 20px;
    }
    #aboutTop .aboutTopText:before {
        display: block;
        margin-bottom: 20px;
    }
    .aboutPhoto .aboutPhotoBox {
        width: 100%;
        position: relative;
    }
    #numbers .numberItem {
        margin: 30px 0;
    }
    footer .footerTop {
        padding: 50px 0;
    }
    footer .footerTitle {
        margin-top: 50px;
    }
     #reviews .sliderArrow {
        display: none;
    }
    #pagevillasFilter {
        margin: 20px auto 30px;
    }
    #pageBanner.mini {
    padding: 33px 0;
} 
    #comments .commentPhoto  {
        display: none;
    }
    .contactForm {
        padding-right: 0;
        border-right: 0;
    }
    .blogContent {
        padding: 20px;
    }
    blockquote {
        padding: 25px 25px 25px 85px;
    }
    blockquote:before {
        font-size: 36px;
        left: 25px;
    }
    #detailPage .detailMeta .metaItem {
        margin-bottom: 20px;
        margin-right: 15px;
        padding-right: 15px;
    }
    #detailPage .detailMeta .metaItem > strong {
        font-size: 13px;
    }
    #detailPage .detailMeta .metaItem:last-child {
        margin-bottom: 20px;
    }
    
}
@media only screen and (max-width: 767px)  { 
   #homeTopBanner .homeTopText span {
        font-size: 34px;
    }
    #homeTopBanner .homeTopText strong {
        font-size: 30px;
    }
    .sectionTitle {
        font-size: 34px;
            text-align: center;
    }
    .sectionSubTitle {
        text-align: center;
    
    }
    .divider span{
    margin: auto;
    }
    #ourDestinations p.sectionDesc {
        text-align: center;
        width: 50% !important;
        margin: 0 auto 20px;;
    }
    #ourDestinations .btn-outline {
        display: block;
        max-width: 215px;
        margin: 0 auto 30px;
    }
    .locationItem .locationItemPhoto {
        height: 350px;
    }
    #homeSectionThree .homeSectionThreeContent {
        padding: 20px;
    }
    #popularTour {
        padding: 60px 0 30px;
    }
    #homeSectionThree .homeSectionThreeContent .homeSectionThreeBox {
        max-width: 100%;
    }
    #savingBanner {
        margin-bottom: 30px;
    }
    #homeComments .homeCommentsBox {
        max-width: 100%;
    }
    .blogPost.post-fullphoto .blogPhoto {
        padding-top: 445px;
    }
    .blogPost.post-photo .blogPhoto {
        padding-top: 335px;
    }
    #pageBanner .pageTitle {
        font-size: 36px;
    }
    .aboutPhoto  {
        margin-bottom: 30px;
    }
    .aboutPhoto .aboutPhotoBox {
        width: 100%;
    }
    #process {
        background-image: none;
    }
    #process .processList .processItem:before {
        display: none;
    }
    #process .sectionTitle {
        text-align: left !important;
    }
    #process .sectionSubTitle {
      text-align: left !important;  
    }
    #process .divider span {
        margin-left: 0 !important;
    }
    #process .processList .processItem p {
        max-width: 60%;
    }
    .teamUser {
        margin-bottom: 50px;
    }
    #reviews {
        background: none;
        padding: 0;
    }
    #reviews:before {
        display: none;
    }
   
    .newsletterBox {
        display: block;
    }
    .newsletterBox a {
        position: relative;
        display: block;
    }
    .customerSupportBox {
        display: block !important;
    }
    .btn-darkGreen {
        margin-top: 10px;
    }
   
    #customerSupport .customerSupportContent {
        max-width: 100%;
    }
    #comments .commentPhoto {
        display: none;
    }
    #comments .commentsItem .commentsItem {
        padding-left: 30px;
    }
    .contactFormBox .btn-orange {
        display: block;
        width: 100%;
        margin-bottom: 50px;
    }
    .contactBox {
        text-align: center;
        padding: 0;
    }
    .breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a {
        font-size: 10px;
    }
       blockquote {
        padding: 15px 15px 15px 55px;
    }
    blockquote:before {
        font-size: 18px;
        left: 15px;
        top: 15px;
    }
    .orderList .orderPhoto {
        display: block;
        margin-bottom: 20px;
    }
    .orderList .orderPhoto img {
        max-width: 100px;
        
    }
    .paymentPrice {
        text-align: left;
    }
    .cardForm img {
        max-width: 50%;
        margin-bottom: 20px;
    }
    .detailTab .nav-tabs {
        display: flex;
    }
 .detailTab  .nav-tabs .nav-item {
        width: 50%;
     margin-bottom: 20px;
     padding: 0 10px;
    }
    .detailTab  .nav-tabs .nav-item button {
        width: 100%;
    }
}