@import url("https://fonts.googleapis.com/css2?family=Bellefair&family=Catamaran:wght@400;700&display=swap");
@media only screen and (max-width: 1200px) {
  .wrapper {
    width: auto;
    padding: 0 20px; }

  #home-presentation .wrapper {
    padding: 0; }

  footer .top .wrapper {
    padding: 40px 20px; }

  footer .bot .wrapper {
    padding: 20px 20px; }

  footer .top .btn-gototop {
    right: 20px; }

  #banner .swiper-slide .wrapper {
    padding: 120px 20px 120px 20px; }
  #home-highlights .w2-pagination .wrapper {
    width: 100%; }

  #home-highlights .swiper-pagination {
    right: 30px; }

  #home-others .left a, #home-others .right a {
    padding: 70px; }

  #home-others .left a .content, #home-others .right a .content {
    width: 100%; }

  #itinerary-presentation .left {
    padding-right: 50px; }

  #tours-list .grid-item .description, #accommodations-list .grid-item .description {
    font-size: 14px;
    line-height: 17px; }

  #tours-list .grid-item, #accommodations-list .grid-item {
    width: 33.3%; } }
@media only screen and (max-width: 1024px) {
  #banner .mask2,
  #secbanner .mask {
    background-size: 100% auto; }

  #form-contacts .box-howmany .box-title {
    font-size: 14px; }

  #toursdetail-presentation .box-map .right h4 {
    margin-bottom: 10px; }

  #toursdetail-presentation .box-map .right li {
    min-height: 25px;
    margin: 0 0 5px 0;
    font-size: 14px;
    line-height: 18px;
    padding-left: 30px; }

  #toursdetail-presentation .box-map .right ol > li:before {
    width: 20px;
    height: 20px;
    font-size: 13px; } }
@media only screen and (max-width: 960px) {
    header nav,
  header .right {
    display: none; } 

 .switch-btn {
  display: block; /* hidden on desktop */
  font-size: 26px;
  cursor: pointer;
  position: relative;
}

  #mobile-menu-switch,
  #mobile-menu {
    display: block !important; }

  h2, h2 * {
    font-size: 35px;
    line-height: 40px; }

  .btn .text {
    font-size: 12px; }

  footer .top .left ul.lev1 li.lev1 .text,
  footer .top .box-social h4 {
    font-size: 13px; }

  #banner .swiper-slide .content {
    width: 70%; }

  #secbanner .contents {
    width: 80%; }

  #home-presentation .left .img1 {
    width: 200px;
    height: 200px;
    bottom: -20px; }

  #home-presentation .left .img2 {
    width: 200px;
    height: 200px;
    top: -20px; }

  #home-presentation .right {
    width: 60%; }

  #home-presentation .logo {
    height: 150px;
    bottom: -140px; }

  #home-presentation .logo:before {
    width: 100px;
    height: 100px;
    background-size: 100% 100%;
    margin-right: 70px; }

  #home-highlights .swiper-slide .content {
    width: 80%; }

  #home-others .left a, #home-others .right a {
    padding: 50px; }

  #tours-list .grid-item, #accommodations-list .grid-item {
    width: 50%; }

  #itinerary-presentation .left,
  #itinerary-presentation .right {
    width: 50%; }

  #toursdetail-presentation .box-map .right {
    padding: 25px; }

  #toursdetail-days .item .bot .left,
  #toursdetail-days .item .bot .right {
    width: 50%;
    padding: 50px; }

  #testimonials-list .bot {
    flex-direction: column;
    align-items: center; }

  #testimonials-list .bot a {
    width: fit-content;
    border-radius: 25px; }

  #testimonials-list .bot a:last-child {
    border-radius: 25px;
    flex-direction: row;
    margin-top: 20px; }

  #testimonials-list .swiper-pagination {
    display: none; }

  #form-contacts .box1, #form-contacts .box2, #form-contacts .box3 {
    flex-wrap: wrap; }

  #form-contacts .box1 .box {
    margin: 0; }

  #form-contacts .box1 .box-name {
    width: 100%;
    margin-bottom: 20px; }

  #form-contacts .box1 .box-email {
    width: calc(50% - 10px);
    margin-right: 10px; }

  #form-contacts .box1 .box-phone {
    width: calc(50% - 10px);
    margin-left: 10px; }

  #form-contacts .box-howmany {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0; }

  #form-contacts .box-when {
    width: 100%;
    margin: 0 0 20px 0; }

  #form-contacts .box-howmany .box {
    margin: 0 10px; }

  #form-contacts .box-howmany .box-title {
    width: 100%;
    text-align: center;
    margin-bottom: 10px; }

  #form-contacts .box-howmany .box-adults,
  #form-contacts .box-howmany .box-children18,
  #form-contacts .box-howmany .box-children11 {
    width: calc(33.3% - 20px); } }
@media only screen and (max-width: 768px) {
  /* Show mobile navigation */


  .switch-btn .fa-bars {
  display: block;
}
.main-header::before {
   display: none;
} 
.main-header .right {
    flex: 0;   
}

  /* Hide desktop navigation */
  .main-header nav {
    display: none;
  }
  .mobile-main {
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
  }

  .mobile-main > li {
    margin-bottom: 0 !important;
  }

  .mobile-title {
    text-transform: uppercase;
    padding: 20px;
   background-color: #a16b25;
    display: block;
    font-weight: 700;
    font-size: 12px;
    font-family: var(--body-font);
   
    color: #fff;
  }

  .mobile-sub {
    list-style: none;
    align-items: center;
    margin: 0;
    background-color: #c7b299;
    font-size: 10px;
   
    color: #1e0300;
}
 .mobile-sub ul li:not(:last-child){
    margin-bottom: px;
}
  }

  .mobile-sub li {
    /* margin-bottom: 6px; */
  }

  .mobile-sub a,
  .mobile-single a {
    font-size: 12px;
    display: block;
     padding: 10px 0 10px 20px;
    text-decoration: none;
    border-top: 1px solid #fff;
    color: #555;
    text-align: start;
    font-size: 15px;
    
  }

  .mobile-single a {
           text-transform: uppercase;
        padding: 20px;
        background-color: #a16b25;
        display: block;
        font-weight: 700;
        font-size: 12px;
        font-family: var(--body-font);
        color: #fff;
  }

/* ===================== mobile menu end======================== */
  #experience-days .it-out-wrapper {
    width: 600px;
}
.it-out-wrapper {
    max-width: 600px;
    padding: 0 10px;
    margin: 0 auto;
}
  .innerwrapper {
    width: auto;
    padding: 0 15px; }
    #experience-days .it-out-wrapper .it-left .it-day {
    background-color: #fff;
    width: 40px;
    height: 40px;
   
}

  #banner .swiper-slide .content {
    width: 100%; }

  .btn:before, .btn:after {
    width: 10px; }

  .btn.light:before {
    background-position: right 0; }

  .general-section .description blockquote, .general-section .description blockquote * {
    font-size: 30px;
    line-height: 40px; }

  .columns-2 {
    column-count: 1;
    column-gap: 0px; }

  footer .top .wrapper {
    flex-direction: column; }

  footer .top .left ul.lev1 {
    flex-wrap: wrap; }

  footer .top .left ul.lev1 li.lev1 {
    margin-right: 20px;
    margin-bottom: 30px; }

  footer .top .left ul.lev1 li.lev1 .text, footer .top .box-social h4 {
    font-size: 12px; }

  footer .top .box-social {
    align-items: center; }

  footer .top .box-social .content {
    width: 100%;
    justify-content: center; }

  footer .top .box-social .btn-social {
    margin: 05px; }

  #home-presentation {
    padding-bottom: 240px; }

  #home-presentation.afterbanner {
    background-size: auto 100%; }

  #home-presentation .wrapper {
    flex-direction: column; }

  #home-presentation .left {
    width: 100%;
    height: 0;
    padding-bottom: 56%; }

  #home-presentation .left:before {
    background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%); }

  #home-presentation .left .img1 {
    left: 30px; }

  #home-presentation .left .img2 {
    right: 30px; }

  #home-presentation .right {
    width: 100%; }

  #home-presentation .logo {
    bottom: -200px; }

  #home-presentation .logo:before {
    margin-right: 0; }

  #home-others {
    flex-direction: column; }

  #home-others .left,
  #home-others .right {
    width: 100%; }

  #itinerary-presentation .wrapper {
    flex-direction: column; }

  #itinerary-presentation .left h2 {
    text-align: center; }

  #itinerary-presentation .left, #itinerary-presentation .right {
    width: 100%;
    padding: 0; }

  #tours-list .grid-item .info, #accommodations-list .grid-item .info {
    padding: 0 30px 30px; }

  /*#beach-gallery .grid-item {width: 50%;}
  #beach-gallery .grid-item:nth-child(6n+6), #beach-gallery .grid-item:nth-child(1) {width:100%;}*/
  #toursdetail-presentation .box-map {
    flex-direction: column; }

  #toursdetail-presentation .box-map .left {
    width: 100%; }

  #toursdetail-presentation .box-map .right {
    width: 100%;
    padding: 40px; }

  #toursdetail-presentation .box-map .right h4 {
    margin-bottom: 20px; }

  #toursdetail-presentation .box-map .right li {
    min-height: 30px;
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 20px;
    padding-left: 40px; }

  #toursdetail-presentation .box-map .right ol > li:before {
    width: 30px;
    height: 30px;
    font-size: 14px; }

  #toursdetail-presentation h2 {
    font-size: 30px;
    line-height: 40px; }

  #toursdetail-days .item .bot {
    flex-direction: column; }

  #toursdetail-days .item .bot .left .day-container {
    justify-content: flex-start; }

  #toursdetail-days .item .bot .left .day-container h4 {
    margin-left: 70px; }

  #toursdetail-days .item .bot .left, #toursdetail-days .item .bot .right {
    width: 100%;
    padding: 70px; }

  #sep3-container .wrapper .item, #sep3-container .wrapper .item:nth-child(even) {
    flex-direction: column;
    margin-bottom: 20px; }

  #sep3-container .wrapper .item .left, #sep3-container .wrapper .item .right {
    width: 100%; }

  #sep3-container .wrapper .item .left {
    height: 0;
    padding-bottom: 56%; }

  #testimonials-list .swiper-container .info {
    padding: 70px 30px; }

  #faqs-list .accordion-content .contents {
    flex-direction: column; }

  #faqs-list .accordion-content .innerleft {
    width: 100%;
    height: 0;
    min-height: initial;
    padding-bottom: 56.25%; }

  #sep3-container .wrapper .item .right .description.db-content {
    column-count: 1;
    column-gap: 0px; }

  #form-contacts .box1, #form-contacts .box2, #form-contacts .box3 {
    padding: 40px; }

  #form-contacts .box1 .box-email {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px; }

  #form-contacts .box1 .box-phone {
    width: 100%;
    margin-left: 0; }

  #destinations-container {
    overflow: hidden; }

  #destinations-container #destinations-lev2 .toggle-destinations {
    display: block; }

  #destinations-lev2 {
    position: absolute;
    left: -300px !important;
    z-index: 5;
    height: 100%;
    transition: left 0.3s ease; }

  #destinations-lev2.active {
    left: 0 !important; } 
@media only screen and (max-width: 600px) {
  #experience-days .it-out-wrapper .itna-right .it-title {
    color: #a6a6a6;
    text-align: left;
    text-transform: uppercase;
    font-family: "Bellefair", serif;
    line-height: 2.0;
    font-size: 1.0rem;
}
  
  .nav__logo img {
    position: absolute;
    top: 10px;
    left: 0;
    width: 80%;
    height: 80%;
    object-position: center;
    object-fit: contain;
}
  .nav__burger, .nav__close {
    position: absolute;
    width: max-content;
    height: max-content;
    inset: 0;
    margin: auto;
    font-size: 2.5rem;
}
.it-desc .it-wrapper{
  column-count: 2;
  padding: 20px 10px;
  text-align: center;
  column-count: 1;
  max-width: 1200px;
  margin: 0 auto;
}
.cont-wrapper {
    padding-top: 20px;
    padding-bottom: 0px;
}
.welcome-msg h2 {
    text-transform: uppercase;
    margin-bottom: 20px;
    font-size: 20px;
    color: #a16b25;
    font-family: "Bellefair", serif;
}
.welcome-msg p {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 10px;
    text-align: center;
    line-height: 1.5;
    font-family: var(--body-font);
    margin-bottom: 30px;
}
.acc-wrapper {
    max-width: 95%;
    margin: auto;
    padding-bottom: 20px;
}
.accordion {
    background-color: white;
    color: #a16b25;
    font-family: "Bellefair", serif;
    cursor: pointer;
    font-size: 1.2rem;
    width: 100%;
    padding: 1.5rem 1.0rem;
    border: none;
    outline: none;
    transition: 0.4s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}
  .general-section .description blockquote, .general-section .description blockquote * {
    font-size: 25px;
    line-height: 35px; }

  #banner .swiper-slide .title {
    font-size: 50px;
    line-height: 60px; }

  #secbanner .subtitle {
    padding-top: 10px; }

  #secbanner .title {
    font-size: 50px;
    line-height: 60px; }

  #home-presentation .left {
    padding-bottom: 100%; }

  /*#home-highlights .swiper-container { padding-bottom: 50px;}*/
  #home-highlights .swiper-container .swiper-slide {
    padding: 80px 20px; }

  #home-highlights .swiper-slide .title {
    margin-bottom: 20px; }

  #home-highlights .swiper-slide .description {
    line-height: 24px; }

  #home-highlights .swiper-slide .box-knowmore {
    padding-top: 20px; }
    .box-knowmore a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    border-radius: 40px;
    border: 1px solid #a88d62;
    margin: 0 20px;
    flex-shrink: 0;
    text-transform: uppercase;
    position: relative;
}

  /*#home-highlights .swiper-pagination {flex-direction: row; right: auto; left: auto; width: 100%; justify-content: center;}
  #home-highlights .w2-pagination {align-items: flex-end; right: auto; bottom: 10px; top: auto; }
  #home-highlights .w2-pagination .wrapper{padding: 0;}
  #home-highlights .w2-pagination .wrapper .swiper-pagination-bullet {width: auto; height: 10px; flex-direction: row; bottom: 10px;}
  #home-highlights .w2-pagination .wrapper .swiper-pagination-bullet:after {height: 1px; width: 40px;}*/
  #itinerary-presentation .left h2 {
    font-size: 30px;
    line-height: 40px; }

  #tours-list .grid-item, #accommodations-list .grid-item {
    width: 100%;
    margin: 0 0 1px 0;
    padding: 0; }

  #toursdetail-days .item .top {
    padding-bottom: 60%; }

  #toursdetail-days .item .bot .left .day-container h4 {
    margin-left: 50px; }

  #toursdetail-days .item .bot .left, #toursdetail-days .item .bot .right {
    padding: 50px; }

  #faqs-list .accordion-title .text {
    font-size: 18px;
    line-height: 22px; }

  #beach-gallery, #gallery-section {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 0 !important; }

  .grid-item {
    grid-column: span 1 !important;
    grid-row: span 1 !important; }

  #testimonials-list .swiper-container .info {
    padding: 70px 50px; }

  #testimonials-list .swiper-container {
    height: auto; }

  #form-contacts .box1, #form-contacts .box2, #form-contacts .box3 {
    padding: 30px; }

  #form-contacts .box-howmany .box-adults,
  #form-contacts .box-howmany .box-children18,
  #form-contacts .box-howmany .box-children11 {
    width: 100%;
    margin: 0; }

  #form-contacts .box-howmany .box-adults,
  #form-contacts .box-howmany .box-children18 {
    margin-bottom: 20px; }

  #destinations-lev2 h4 {
    font-size: 16px; }

  #destinations-lev2 {
    width: 250px !important;
    left: -250px !important; }
    
.text-p h2 {
    font-size: 1.5rem;
    line-height: 2.0;  
  }
  
.kili-description{
  display: flex;
  flex-direction: column;
  min-height: 450px;
  overflow: hidden;
  padding: 10px 20px;
}

.kil-left ,.kil-right{
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  font-family: "Bellefair", serif;
}

.kil-right h2{
  font-size: 20px;
 
}
.kil-right p{
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: justify;
  
}

.it-out-wrapper {
    max-width: 550px;
    padding: 0 10px;
    margin: 0 auto;
}
.kili-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 450px;
    overflow: hidden;
    padding: 10px 20px;
}
}
@media only screen and (max-width: 480px) {
  * {
    font-size: 14px; }
#experience-days .it-out-wrapper {
    width: 430px;
}
.it-out-wrapper {
    max-width: 430px;
    padding: 0 10px;
    margin: 0 auto;
}
#experience-days .it-out-wrapper .it-left .it-day {
    background-color: #fff;
    width: 30px;
    height: 30px;
}
#experience-days .it-out-wrapper .itna-right{
  width: 350px;
  padding-left: 15px;
  margin-bottom: 20px;
  padding-top: 10px;
  overflow: hidden;
}
#experience-days .it-out-wrapper .itna-right .it-description p {
    line-height: 1.5;
    text-align: justify;
    font-family: "Bellefair", serif;
    font-size: 1.2rem;
}
  #form-contacts input[type="text"], #form-contacts input[type="email"], #form-contacts select, #form-contacts select option, #form-contacts textarea {
    font-size: 16px; }

  #banner .swiper-slide .title {
    font-size: 40px;
    line-height: 50px; }

  #secbanner .subtitle {
    font-size: 18px;
    line-height: 25px; }

  #secbanner .title {
    font-size: 30px;
    line-height: 40px; }

  #home-presentation .left .img1 {
    left: 0; }

  #home-presentation .left .img2 {
    right: 0;
    top: -115px; }

  #home-presentation .right {
    padding: 60px 20px; }

  #home-highlights .swiper-slide .wrapper {
    padding: 0; }

  #home-highlights .swiper-slide .content {
    width: 90%; }

  #home-highlights .swiper-slide .description {
    line-height: 20px; }

  #home-highlights .swiper-pagination {
    right: 10px; }

  #home-others .left a, #home-others .right a {
    padding: 30px; }

  #home-others .left a .title, #home-others .right a .title {
    font-size: 20px; }

  footer .top .left ul.lev1 li.lev1 {
    text-align: center;
    margin: 0 10px 20px 10px;
    max-width: inherit;
    width: 100%; }

  footer .bot .wrapper {
    flex-direction: column;
    align-items: center; }

  footer .bot .wrapper .left {
    margin-bottom: 10px; }

  #itinerary-presentation .left h2 {
    font-size: 25px;
    line-height: 30px; }

  #toursdetail-presentation .wrapper {
    padding: 0; }

  #toursdetail-presentation .box-map .right h4 {
    margin-bottom: 10px; }

  #toursdetail-presentation .box-map .right li {
    min-height: 25px;
    margin: 0 0 5px 0;
    font-size: 14px;
    line-height: 18px;
    padding-left: 30px; }

  #toursdetail-presentation .box-map .right ol > li:before {
    width: 20px;
    height: 20px;
    font-size: 13px; }

  #toursdetail-days .wrapper {
    padding: 0 !important; }

  #toursdetail-presentation h2 {
    font-size: 30px;
    line-height: 40px; }

  #toursdetail-days .item .top {
    padding-bottom: 100%; }

  #toursdetail-days .item .bot .left .day-container h4 {
    margin-left: 40px; }

  #toursdetail-days .item .bot .left, #toursdetail-days .item .bot .right {
    padding: 40px; }

  #toursdetail-days .item .bot .left .title {
    font-size: 20px;
    line-height: 25px; }

  /*#beach-gallery .grid-item a, #gallery-section .grid-item a {padding-bottom: 100% !important;}*/
  #testimonials-list .bot a {
    height: auto;
    padding: 10px 30px;
    border-radius: 50px;
    flex-direction: column; }

  #testimonials-list .bot a .icon {
    margin-right: 0; }

  #testimonials-list .bot a .text {
    font-size: 12px;
    line-height: 15px;
    white-space: normal;
    text-align: center; }

  #testimonials-list .bot a:last-child {
    flex-direction: column;
    border-radius: 50px; }

  #testimonials-list .bot a .icon {
    margin-left: 0; }

  #sep3-container .wrapper .item .left {
    padding-bottom: 56.25%; }

  #sep3-container .wrapper .item .right {
    padding: 30px; }

  #faqs-list .accordion-title .text {
    font-size: 16px;
    line-height: 20px; }

  #faqs-list .accordion-content .innerleft {
    padding-bottom: 100%; } }
@media only screen and (max-width: 340px) {
      #experience-days .it-out-wrapper {
        width: 320px;
    }
  .btn .text {
    font-size: 10px; }
    #experience-days .it-out-wrapper .itna-right{
  width: 240px !important;
  padding-left: 20px;
  margin-bottom: 30px;
  padding-top: 10px;
  overflow: hidden;
}
@media only screen and (max-width: 300px) {
    #experience-days .it-out-wrapper {
        width: 280px;
    }
}
  .general-section .description blockquote, .general-section .description blockquote * {
    font-size: 20px;
    line-height: 30px; }

  #banner .swiper-slide .title {
    font-size: 30px;
    line-height: 40px; }

  #banner .swiper-slide .subtitle {
    padding-top: 5px;
    font-size: 16px;
    line-height: 20px; }

  #banner .swiper-slide .box-knowmore {
    padding-top: 20px; }

  #toursdetail-days .item .bot .left .day-container h4 {
    margin-left: 20px; }

  #toursdetail-days .item .bot .left .title {
    margin-bottom: 0; } }