@import url("https://fonts.googleapis.com/css2?family=Bellefair&family=Catamaran:wght@400;700&display=swap");
:root{
   /* ============ colors================ */
   --clr-primary:#fff;
   --clr-h1-h2:#c39b78;
   --clr-secondary:#f4f0eb;
   --clr-whtesmoke:#f2f2f2;
   --clr-bg:#f9f9ff;
   --clr-btn:#AB8F63;
   --text-clr :#404040;
   /* ============ font family================ */
   --ff-beller:"Bellefair", serif;
   /* ============ font size================ */
   --h1-lg:60px;
   --h2-lg:40px;
 --p-x-y:100px 5%;  
 --shadow:0 2px 8px rgba(0,0,0,0.4);
 --shadow-1:-1rem 1rem 1.2rem 0 rgba(157,157,157,.5);
 --transition: all .4s ease;
 --width-lg:80%;
 --width-md:90%;
 --width-sm:95%;
}

@media only screen and (max-width: 1200px) {
   h1, h1 * {
      font-size: 45;
      line-height: 50;
      margin-bottom: 10px;
   }
 
     }
@media only screen and (max-width: 1024px) {
.container{
   width:var(--width-md);
}
    

   }
@media only screen and (max-width: 960px) {
   .baner-details{
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%,-50%);
    }
    .baner-details p{
      font-size: 20px;
      color: #fff;
      text-transform: uppercase;
      font-family: var(--ff-beller);
    }
    .baner-details h1{
      font-size: 40px;
      text-transform: uppercase;
      line-height: 50px;
      color: #fff;
    }
   .nt-left a:first-child{
      display: none;
   }
   .nt-left a span{
      display: none;
   }
   .n-bottom ul li:last-child{
      display: block;
    }
   .menu-btn{
      display: block;
   }
   .nav-links{
      position: fixed;
      top: 117px;
      right: -250px;
      width: 250px;
      height: 0;
      z-index: 100;
      padding-left:20px ;
      padding-right: 30px;
      padding-top: 30px;
      background: var(--clr-secondary);
      box-shadow: 0 0 5px rgba(157, 157, 157, .4);
      transition: var(--transition);
   }
   .nav-links.open-menu{
      right: 0px;
      height: 100%;
   }
   .n-bottom ul li {
      display: block;
      width: 100%;
     
      
      text-align: left;
      font-size: 16px;
      
   }
   .n-bottom ul li a {
      font-size: 14px;
      font-weight: 500;
      display: block;
      width: 100%;
      padding: 10px 0;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      text-align: left;
   }
   .btn-cta a {
      display: none;
   }
   .slide-container{
      position: relative;
    }
    .baner-details{
    top: 20%;
    left: 20%;
    z-index: 100;
    transform: translateY(10px);
    height: auto;
    }
   .why-us-wrapper{
      grid-template-columns: repeat(2,1fr);
      gap: 10px;
    }
    .c-about-us{
      display: grid;
      grid-template-columns: repeat(1,1fr);
      column-gap: 10px;
      row-gap: 10px;
    }
    .c-footer .f-row{
    grid-template-columns: 1fr  1fr 1fr;
    }
    .box-title span{
      font-size: 20px;
      font-weight: 400;
    }
    .tour-container{
      flex-direction: column;
         padding: 30px 2%;
       
    }
    .tour-left{
      flex-basis: 100%;
    }
    .tour-right{
      flex-basis: 100%;
    }
    .contact-section{
      flex-direction: column;
    }
    .contact-form ,.contact-info{
      padding: 30px 50px;
    }
    .contact .text-box{
      width: 100%;
    }
    
}
 
@media only screen and (max-width: 768px) {
  
   h1 {
      margin-bottom: 20px; }
    
    h1, h1 * {
      color: var(--clr-h1-h2);
      font-size: var(--h1-lg);
      line-height: 65px;
      font-family: var(--ff-beller); }
   .our-tour {
      
      padding-bottom: 30px;
  }
   .tour-g-c{
       grid-template-columns: repeat(1,1fr);
       grid-template-rows: repeat(4,1fr);
       height: auto !important;
    
   }
   .tour-g-c .tour-box{
      position: relative;
      width: 100%;
      height: 400px;
      overflow: hidden;
    }
   .tour-g-c .tour-box:nth-child(1){
      grid-row: span 1;
    }
    .tour-g-c .tour-box:nth-child(4){
      grid-column: span 1;
    }
   .day-ic-ex{
      flex-direction: column;
    }
    .side-inc,.side-ex{
      flex-basis: 100%;
      padding: 20px;
    }
    .side-inc h4,.side-ex h4{
      font-size: 20px;
     margin: 20px 0;
    }
   .packages-container.kil .p-box:nth-child(1){
      grid-column: span 1;
      
    }
    .packages-container.kil .p-box:nth-child(4){
      grid-column: span 1;
      
    }

   .c-footer .f-row{
      grid-template-columns:  1fr 1fr;
      }
  }

@media only screen and (max-width: 600px) {
   .baner-details{
      top: 20%;
      left: 10%;
      z-index: 100;
      transform: translateY(10px);
      height: auto;
      }
      .baner-details h1{
         font-size: 30px;
      }

}

@media only screen and (max-width: 480px) {
   
   .c-footer .f-row{
      grid-template-columns: 1fr;
      }

 }
@media only screen and (max-width: 340px) {
 
   .c-footer .f-row{
      grid-template-columns:  1fr;
      }
   }