/* responsive ******************************************************************************/

@media (max-width: 1440px) {
    #mainBanner .pagination-list .btn-common { font-size: 35px; width: 400px; }
}

@media (max-width: 1399px) {

    #header .main-nav nav ul li {

        margin-right: 60px;

    }

    #header .main-nav nav ul li a {

        font-size: 18px;

    }

    #header .btn-common {

        font-size: 18px;

    }

    #header .btn-common img {

        max-width: 40px;

    }

    #destinationTabbing .explore-button {

        padding-top: 50px;

    }

    #destinationTabbing .content-box {

        padding: 40px 40px 80px;

    }

    #destinationTabbing .explore-button img {

        max-width: 40px;

    }

    #destinationTabbing .owl-nav button.owl-prev {

        left: 36.3%;

    }

    #destinationTabbing .owl-nav button {

        bottom: 0px;

    }

    #destinationTabbing .gallery-box {

        padding-top: 30px;

    }

    .theBestOfUae .activitiesBox {

        margin: 0 20px;

    }

    #mainBanner .pagination-list .btn-common {

        font-size: 40px;

        width: 400px;

    }
    #mainBanner .pagination-list .logo {
        max-width: 250px;
    }

    #destinationTabbing .gallery-box img {
        max-width: 185px;
    }

}

@media (max-width: 1199px) {

    h1 {

        font-size: 54px;

    }

    h2 {

        font-size: 46px;

    }

    h3 {

        font-size: 38px;

    }

    h4 {

        font-size: 30px;

    }

    h5 {

        font-size: 22px;

    }

    h6 {

        font-size: 18px;

    }

    /* p {

        font-size: 22px;

    } */

    .small {

        font-size: 18px;

    }

    .headingSpan {

        font-size: 80px;

    }

    section {

        padding-bottom: 80px;

    }

    .section-heading {

        margin-bottom: 40px;

    }

    .bg {

        padding: 80px 0;

    }

    .btn-common {

        font-size: 22px;

        padding: 12px 40px;

    }

    .btn-white-transparent {

        font-size: 20px;

        padding: 18px 40px;

    }

    .btn-common img {

        max-width: 20px;

        margin-left: 20px;

        margin-right: -20px;

    }

    #header .logo-box img {

        max-width: 180px;

    }

    #header .main-nav nav ul li a {

        font-size: 16px;

    }

    #header .main-nav nav ul li {

        margin-right: 40px;

    }

    #header .btn-common {

        font-size: 16px;

    }

    #header {

        padding: 15px 15px;

    }

    .innerBanner .button-box {

        padding-top: 40px;

    }

    #destinationTabbing .content-box {

        padding: 40px 20px 60px;

    }

    #destinationTabbing .gallery-box {

        padding-top: 20px;

    }

    #destinationTabbing .explore-button {

        padding-top: 30px;

    }

    #destinationTabbing .owl-nav button.owl-prev {

        left: 36.3%;

    }

    #destinationTabbing .owl-nav button.owl-next {

        left: 40%;

    }

    #destinationTabbing .owl-nav button {

        width: 30px;

        height: 30px;

    }

    #destinationTabbing .owl-nav button img {

        max-width: 12px;

    }

    #footer .logo-box img {

        max-width: 180px;

    }

    #footer .logo-box, #footer .footer-top, #footer .footer-center {

        padding: 30px 0;

    }

    #footer a, #footer p {

        font-size: 16px;

    }

    #footer .center-box .link-box ul a {

        font-size: 22px;

    }

    #footer .allrights {

        padding: 20px 12px 160px;

    }

    #footer .footer-top .link-box li:not(:last-child) {

        padding-right: 80px;

    }

    #footer .center-box li:not(:last-child) {

        margin-right: 50px;

        padding-right: 50px;

    }

    .nav-tabs .nav-link {

        font-size: 35px;

    }

    .nav-tabs .nav-item.show .nav-link::after, .nav-tabs .nav-link.active::after {

        bottom: -1px;

    }

    .theBestOfUae .activitiesBox {

        margin: 0 10px;

    }

    .theBestOfUae .nav-tabs .nav-link {

        font-size: 26px;

    }

    .theBestOfUae .nav-tabs .nav-item:not(:last-child) {

        margin-right: 50px;

    }

    .theBestOfUae .nav-tabs {

        margin-bottom: 80px;

    }

    .theBestOfUae .activitiesBox .text-box .button-box a {

        font-size: 18px;

    }

    #aboutUae .button-box {

        padding-top: 20px;

    }

    #aboutUae .button-box a {

        font-size: 22px;

    }

    .theBestOfUae .citiesBox.right {

        padding: 20px 30px 30px;

    }

    .theBestOfUae .citiesContainer {

        margin-bottom: 80px;

    }

    #mainBanner .pagination-list .btn-common {

        font-size: 35px;

        width: 340px;

    }

    #mainBanner .pagination-list .logo {
        max-width: 200px;
    }
    #mainBanner .pagination-list::before, #mainBanner .pagination-list::after {
        height: calc(50% - 100px);
    }

    #destinationTabbing .gallery-box img {
        max-width: 160px;
    }
    .modal .btn-common.orange {
        margin: 40px auto 0;
    }

    #letsTalkModal .modal-body {
        padding: 40px 80px;
    }
    #letsTalkModal .modal-dialog {
        max-width: 900px;
    }
    #letsTalkModal select {
        background-size: 20px !important;
    }
    #letsTalkModal .wpcf7-response-output {
        top: -130px;
    }


}

@media (max-width: 991px) {

    h1 {

        font-size: 50px;

    }

    h2 {

        font-size: 42px;

    }

    h3 {

        font-size: 34px;

    }

    h4 {

        font-size: 26px;

    }

    h5 {

        font-size: 22px;

    }

    h6 {

        font-size: 18px;

    }

    p {

        font-size: 18px;

    }

    .headingSpan {

        font-size: 70px;

    }

    section {

        padding-bottom: 60px;

    }

    .bg {

        padding: 60px 0;

    }

    .section-heading {

        margin-bottom: 30px;

    }

    .btn-common {

        font-size: 20px;

    }

    /* header responsive */

    #header .main-nav .main-inner {

        position: fixed;

        top: 0;

        left: -50%;

        width: 100%;

        height: 100vh;

        background: #000;

        opacity: 0;

        visibility: hidden;

        transition: .5s all ease-in-out;

        z-index: 111;

        padding-top: 60px;

    }

    #header .main-nav .main-inner.show {

        left: 0;

        opacity: 1;

        visibility: visible;

    }

    #header .main-nav nav ul li {

        display: block;

        text-align: left;

        padding: 10px 20px;

        margin-right: 0;

    }

    #header .main-nav .cancel-menu {

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        justify-content: center;

    }

    #header .main-nav .cancel-menu {

        position: fixed;

        top: 30px;

        left: -100%;

        max-width: 30px;

        width: 100%;

        text-align: center;

        z-index: 222;

        transition: .5s;

        opacity: 0;

        visibility: hidden;

        cursor: pointer;

    }

    #header .main-nav .click-menu, #header .main-nav .cancel-menu {

        display: flex;

    }

    #header .main-nav .cancel-menu.show {

        opacity: 1;

        visibility: visible;

        left: calc(100% - 50px);

    }

    #header .main-nav {

        position: unset;

        transform: none;

        width: auto;

    }

    #header .button-box {

        margin: 0;

        padding: 10px 20px;

    }

    #header .button-box.desktop {

        display: none !important;

    }

    #header .button-box.mobile {

        display: block !important;

    }

    #destinationTabbing .img-box img {

        max-height: 350px;

        object-fit: cover;

    }

    #destinationTabbing .content-box {

        padding: 40px 20px 20px;

        margin-left: 0;

    }

    #destinationTabbing .content-box {

        padding: 40px 40px;

        margin-left: 0;

    }

    #destinationTabbing .owl-nav button.owl-prev {

        left: 5%;

    }

    #destinationTabbing .owl-nav button.owl-next {

        left: 10%;

    }

    #destinationTabbing .owl-nav button {

        bottom: 20px;

    }

    #destinationTabbing .nav-tabs .nav-item:not(:last-child) {

        margin-right: 80px;

    }

    #aboutUae .button-box a {

        font-size: 20px;

    }

    .theBestOfUae .citiesContainer .img-box {

        margin: 0;

    }

    .theBestOfUae .citiesContainer {

        padding: 0;

        margin-bottom: 60px;

    }

    .theBestOfUae .citiesContainer.textLeft .row {

        flex-direction: column-reverse;

    }

    #header.main .main-inner {

        position: unset;

        height: auto;

        opacity: 1;

        visibility: visible;

        padding-top: 0;

    }

    #header.main .main-nav {

        position: unset;

        transform: none;

        width: 100%;

        display: block;

    }

    #header.main .main-inner ul {

        display: flex;

        justify-content: center;

    }

    #mainBanner .pagination-list {
        display: block;
    }

    #mainBanner .pagination-list .col-6 {
        width: 100%;
        height: 50%;
    }
    #mainBanner .pagination-list::before, #mainBanner .pagination-list::after {
        height: 1px;
        width: calc(50% - 150px);
        top: 50%;
        transform: translateY(-50%);
    }
    #mainBanner .pagination-list::before {
        left: 0;
    }
    #mainBanner .pagination-list::after {
        right: 0;
        left: auto;
    }

       /******/
       #header .main-nav nav ul li {
        height: auto;
        line-height: 1;
    }
    #header .main-nav nav ul li .sub-menu {
        position: unset;
        top: unset;
        margin-top: 15px;
    }

    #header.main {

        padding: 20px 0;

    }

    .aboutUaeModal .box.right-box {

        padding: 0;

    }

    .theBestOfUae .citiesContainer .img-box img {
        height: 352px;
    }
    #letsTalkModal  .modal-dialog {
        max-width: 700px;
    }
    #letsTalkModal .modal-body {
        padding: 30px 50px;
    }

    #letsTalkModal .wpcf7-response-output {
        top: -120px;
        margin: 0;
    }

}

@media (max-width: 767px) {

    .mobile {

        display: block !important;

    }

    .desktop {

        display: none !important;

    }

    br {

        display: none;

    }
/* 
    .row {

        row-gap: 30px;

    } */

    h1 {

        font-size: 42px;

    }

    h2 {

        font-size: 34px;

    }

    h3 {

        font-size: 26px;

    }

    h4 {

        font-size: 22px;

    }

    h5 {

        font-size: 20px;

    }

    h6 {

        font-size: 18px;

    }

    p {

        font-size: 18px;

    }

    .headingSpan {

        font-size: 60px;

    }

    #header .logo-box img {

        max-width: 150px;

    }
    
    /******/
    #header .main-nav nav ul li {
        display: block;
        height: auto;
        line-height: 1;
    }
    #header .main-nav nav ul li .sub-menu {
        position: unset;
        top: unset;
      
    }

    .innerBanner h1 {

        font-size: 50px;

    }

    .innerBanner h1 .headingSpan {

        font-size: 70px;

        display: block;

    }

    #destinationTabbing .owl-nav button.owl-prev {

        left: 7%;

    }

    #destinationTabbing .owl-nav button.owl-next {

        left: 14%;

    }

    #destinationTabbing .row {

        row-gap: 0;

    }

    #footer .logo-box {

        position: unset;

        transform: none;

    }

    #footer .footer-box {

        flex-direction: column;

    }

    #footer .link-box ul li:nth-child(2) {

        margin-left: unset;

    }

    #footer .link-box ul, #footer .social-box ul {

        justify-content: center;

    }

    #footer .allrights {

        padding: 20px 12px 130px;

    }

    #footer .logo-box img {

        max-width: 150px;

    }

    #footer .footer-top .link-box li:not(:last-child) {

        padding-right: 50px;

    }

    #footer .center-box li:not(:last-child) {

        margin-right: 30px;

        padding-right: 30px;

    }

    #footer a, #footer p {

        font-size: 14px;

    }

    #footer .center-box .link-box ul a {

        font-size: 20px;

    }

    #footer .footer-top .social-box {

        position: unset;

        transform: none;

        padding-left: 50px;

    }

    #footer .top-box {

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .nav-tabs .nav-link {

        font-size: 30px;

    }

    .nav-tabs .nav-item.show .nav-link::after, .nav-tabs .nav-link.active::after {

        width: 70px;

    }

    .innerBanner .banner-heading {

        width: auto;

    }

    .innerBanner .innerBanner-part {

        padding-top: 100%;

        min-height: 500px;

    }

    .innerBanner .banner-heading {

        width: 90%;

    }

    .innerBanner .button-box {

        padding-top: 30px;

    }

    .btn-white-transparent {

        font-size: 18px;

        padding: 16px 35px;

    }

    .theBestOfUae .nav-tabs {

        margin-bottom: 60px;

    }

    .theBestOfUae .activitiesBox .text-box {

        padding: 20px 20px 40px;

    }

    .theBestOfUae .row {

        row-gap: 0;

    }

    .theBestOfUae .nav-tabs .nav-link {

        font-size: 22px;

    }

    .theBestOfUae .nav-tabs .nav-item:not(:last-child) {

        margin-right: 30px;

    }

    .theBestOfUae .activitiesBox {

        margin: 0 0px;

    }

    #footer.main .footer-box {

        flex-direction: column-reverse;

        row-gap: 10px;

    }

    #mainBanner .pagination-list {
        height: calc(100vh - 183.5px);
    }

    #footer.main {

        padding: 20px 0px;

    }

    .aboutUaeModal .modal-body {

        padding: 40px 20px;

    }

    .aboutUaeModal .modal-dialog {

        margin: 60px 40px;

    }

    #letsTalkModal .modal-dialog {
        margin: 20px 20px;
    }
    #letsTalkModal .wpcf7-response-output {
        top: 0;
    }
    .col-md-6.date-box {
    flex-direction: column;
}

    .date-box .col-md-6 {
    width: 100% !important;
    }
    
    .date-box .col-md-6 input#end-date, .date-box .col-md-6 input#start-date {
        font-size: 18px;
        line-height: 1;
    }



}


@media (max-width: 575px) {
    #destinationTabbing .gallery-box img {
        max-width: 138px;
    }
    .modal .btn-common.orange {
        margin: 20px auto 0;
    }

}

@media (max-width: 479px) {

    h1 {

        font-size: 34px;

    }

    h2 {

        font-size: 26px;

    }

    h3 {

        font-size: 22px;

    }

    h4 {

        font-size: 18px;

    }

    h5 {

        font-size: 16px;

    }

    h6 {

        font-size: 14px;

    }

    p {

        font-size: 14px;

    }

    .small {

        font-size: 14px;

    }

    .headingSpan {

        font-size: 50px;

    }

    .btn-common {

        font-size: 16px;

        padding: 10px 30px;

        border-radius: 15px;

    }

    section {

        padding-bottom: 40px;

    }

    .bg {

        padding: 40px 0;

    }

    .section-heading {

        margin-bottom: 20px;

    }

    #header .logo-box img {

        max-width: 120px;

    }

    .headingSpan {

        font-size: 50px;

    }

    .innerBanner h1 {

        font-size: 40px;

    }

    .innerBanner h1 .headingSpan {

        font-size: 60px;

    }

    #unforgettable .list li:not(:last-child) {

        margin-bottom: 30px;

    }

    #destinationTabbing .img-box img {

        max-height: 200px;

    }

    #destinationTabbing .content-box {

        padding: 20px 20px;

    }

    #destinationTabbing .owl-nav button.owl-prev {

        left: 5%;

    }

    #destinationTabbing .owl-nav button.owl-next {

        left: 15%;

    }

    #destinationTabbing .owl-nav button {

        bottom: 10px;

    }

    #destinationTabbing .explore-button img {

        max-width: 30px;

    }

    /* #bookNow {

        padding: 40px 0;

    } */

    #footer .center-box li:not(:last-child) {

        padding-right: 20px;

        margin-right: 20px;

    }

    #footer .logo-box img {

        max-width: 120px;

    }

    #footer .footer-top .link-box li:not(:last-child) {

        padding-right: 30px;

    }

    #footer .footer-top .social-box {

        padding-left: 30px;

    }

    #footer .center-box .link-box ul a {

        font-size: 14px;

    }

    #footer a, #footer p {

        font-size: 12px;

    }

    #footer .allrights {

        padding: 20px 12px 100px;

    }

    #footer .footer-top .social-box img {

        max-width: 22px;

    }

    .nav-tabs .nav-link {

        font-size: 22px;

    }

    #destinationTabbing .nav-tabs {

        margin-bottom: 30px;

    }

    #destinationTabbing .nav-tabs .nav-item:not(:last-child) {

        margin-right: 50px;

    }

    .btn-white-transparent {

        font-size: 16px;

        padding: 15px 30px;

    }

    .theBestOfUae .activitiesBox .text-box .button-box a {

        font-size: 14px;

    }

    .theBestOfUae .nav-tabs {

        margin-bottom: 40px;

    }

    .theBestOfUae .nav-tabs .nav-link {

        font-size: 18px;

    }

    .theBestOfUae .nav-tabs .nav-item:not(:last-child) {

        margin-right: 20px;

    }

    #aboutUae .button-box a {

        font-size: 16px;

    }

    .theBestOfUae .citiesContainer {

        margin-bottom: 40px;

    }

    .theBestOfUae .citiesBox.right {

        padding: 20px 20px 30px;

    }

    #mainBanner .pagination-list .btn-common {

        font-size: 25px;

        width: 80%;

        padding: 10px;

    }

    #header.main {

        padding: 10px 0;

    }

    #mainBanner .pagination-list {

        min-height: calc(100vh - 180px);

    }

    .aboutUaeModal .btn-close {

        font-size: 15px;

    }

    .aboutUaeModal .modal-dialog {

        margin: 50px 30px;

    }

    #mainBanner .pagination-list::before, #mainBanner .pagination-list::after {
        width: calc(50% - 120px);
    }

    .theBestOfUae .citiesContainer .img-box img {
        height: 250px;
    }
    .input-group {
        margin-bottom: 15px;
    }
    #letsTalkModal .modal-body{
        padding: 20px 20px;
    }
    #letsTalkModal .form-control-common {
        font-size: 14px;
        padding: 10px;
        border-radius: 5px !important;
    }
    #letsTalkModal .modal-header {
        padding: 20px 10px;
    }
    #letsTalkModal select {
        background-size: 15px !important;
    }
    .modal-header .btn-close {
        right: 15px;
    }
    .date-box .col-md-6 input#end-date, 
    .date-box .col-md-6 input#start-date {
        font-size: 14px;
        line-height: 1;
    }

}

@media (max-width: 375px) {

    #mainBanner .pagination-list .logo {
        max-width: 160px;
    }

    #mainBanner .pagination-list .btn-common {
        font-size: 20px;
        width: 80%;
        padding: 6px;
    }

}

@media (max-width: 320px) {
    #mainBanner .pagination-list .logo {
        max-width: 150px;
    }
    
}