:root{
   --main-color:#e2df15;
   --black:#222;
   --white:#fff;
   --light-black: #777;
   --light-white:#fff9;
   --dark-bg: rgba(0,0,0,.7);
   --light-bg: #eee;
   --border: .1rem solid var(--black);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.3);
}



.link{
    position: absolute;
    display: flex;
    left: 0px;
    top: 0px;
    width: 90px;
    height: 90px;
    
 }

 /*   */

 navbar-dark {
   background-color: #343a40 !important;
 }
 
 .navbar-dark .navbar-brand,
 .navbar-dark .navbar-nav .nav-link {
   color: #fff !important;
   font-size: 15px;
   
 }
 
 .navbar-dark .navbar-toggler {
   border-color: #fff;
 }


 section {
   padding-top: 6rem;
 }
 






 .container{
    margin-top: 36px;
 }
  
 .carousel slide .container .carousel-inner .carousel-item img{
   width: 100%;
   height: 85rem;
 }

 /* home about start */
.home-about{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   padding: 5px;
}

.home-about .image{
   flex: 1 1 4rem;

}

.home-about .image img{
   width: 100%;

}

.home-about .content{
   flex: 1 1 4rem;
   padding: 3rem;
   background: var(--light-bg);
}
.home-about .content h3{
   font-size: 3rem; 
   color: var(--black);
   text-transform: uppercase;

}


.home-about .content p{
   font-size: 1.5rem; 
   padding: 1rem 0;
   color: var(--black);
}

/* end of home-about */



/* services */


.services .box-container{
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
}


.services .box-container .box{
   flex: 1 1 25rem;
   border-radius: .5rem;
   padding: 1rem;
   text-align: center;
}

.services .box-container .box i{
  padding: 1rem;
  font-size: 5rem;
  color: orange; 
}

.services .box-container .box h3{
   font-size: 2.5rem;
   color: #333;

}

.services .box-container .box p{
   font-size: 1.5rem;
   color: #666;
   padding: 1rem 0;

}

.services .box-container .box:hover{
   box-shadow: 0 1rem 2rem rgb(0,0,0,.1);
}




/* package start */
.home-package{
   background: var(--light-bg);
}

.heading{
    background-size: cover !important;
    background-position: center !important;
    padding-top: 10rem;
    padding-bottom: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.heading h1{
    font-size: 10rem;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: var(--text-shadow);

}

.home-package .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(25rem,1fr));
   gap: 2rem;
   
}



.home-package .box-container .box{
   border:  var(--border);
   box-shadow: var(--box-shadow);
   background: var(--white);
  

}


.home-package .box-container .box .image{
   height: 25rem;
   overflow: hidden; 
}


.home-package .box-container .box .image img{
   height: 100%;
   width: 100%;
   object-fit: cover;
   transition: .2s linear;

}

.home-package .box-container .box .content{
   padding: 2rem;
   text-align: center;

}

.home-package .box-container .box .content h3{
   font-size: 2.5rem;
   color: var(--black);

}
.home-package .box-container .box .content p{
   font-size: 1.5rem;
   color: var(--light-black);
   line-height: 2;
   padding: 1rem 0;
    

}

.home-package .box-container .box .content .star{
    font-size:1.7rem;
    color:var(--orange);

}

.home-package .box-container .box .content .price{
    font-size: 1.5rem;
    color: #333;
    padding-top: 1rem;
}


.home-package .load-more{
   text-align: center;
   margin-top:2rem;
   margin-bottom: 4rem;
}



.home-offer{
   padding: 4rem;
   text-align: center;
}

.home-offer .content{
   max-width: 70rem;
   margin: 0 auto;

}


.home-offer .content h3{
   font-size: 4rem;
   text-transform:uppercase ;
   color: var(--black);
}

.home-offer .content p{
   font-size: 1.5rem;
   color: var(--light-black); 
   line-height: 2;
   padding: 1rem;
    
   
}



.btn{
   display: inline-block;
   background: var(--black);
   margin-top: 1rem;
   color: var(--white);
   font-size: 1.7rem;
   padding: 1rem 3rem;
   cursor: pointer;
}

.btn:hover{
   background: var(--main-color);
}

/* About page */

.about{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 3rem;

}

.about .image{
   flex:1 1 4rem;
}


.about .image img{
   width: 100%;
}

.about .content{
   flex:1 1 4rem;
   text-align: center;

}

.about .content h3{
   font-size: 3rem;
   color: var(--black);
}


.about .content p{
   font-size: 1.5rem;
   color: var(--black);
   line-height: 2;
   padding: 1rem 0;
}


.about .content .icons-container{
   margin-top: 2rem;
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   align-items: flex-end;
}

.about .content .icons-container .icons{
   background: var(--light-bg);
   padding: 2rem;
   flex:1 1 16rem ;
}


.about .content .icons-container .icons i{
   font-size: 4rem;
   margin-bottom: 2rem;
   color: var(--main-color);
}

.about .content .icons-container .icons span{
   font-size:1.5rem;
   color: var(--black) ;
   display: block;

}




/* booking start */

.heading-title{
   background-size: cover !important;
    background-position: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;

}
.booking .book-form{
   padding: 2rem;
   background: var(--light-bg);

}

.booking .book-form .flex{
   display: flex;
   flex-wrap: wrap;
   gap: 2rem;

}

.booking .book-form .flex .inputBox{
   flex:1 1 30rem;

}

.booking .book-form .flex .inputBox input{
    width: 100%;
    padding: 1.2rem 1.4rem;
    font-size: 1.6rem;
    color: var(--light-black);
    text-transform: none;
    margin-top: 1.5rem;
    


}




.booking .book-form .flex .inputBox input:focus{
   background: var(--black);
   color: var(--white);

}
.booking .book-form .flex .inputBox input:focus::placeholder{
   border: var(--border);
   color: var(--light-white);

}

.booking .book-form .flex .inputBox span{
   font-size: 1.5rem;
   color: var(--light-black);
}


.booking .book-form .btn{
   margin-top: 2rem;

}


/* start package page */

.package .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem,1fr));
   gap: 2rem;
   flex-wrap: wrap;
}



.package .box-container .box{
   border:  var(--border);
   box-shadow: var(--box-shadow);
   background: var(--white);
   
  

}

/* .package .box-container .box:nth-child(1),
.package .box-container .box:nth-child(2),
.package .box-container .box:nth-child(3),
.package .box-container .box:nth-child(4),
.package .box-container .box:nth-child(5),
.package .box-container .box:nth-child(6){
   display: inline-block;
} */


.package .box-container .box .image{
   height: 25rem;
   overflow: hidden; 
}


.package .box-container .box .image img{
   height: 100%;
   width: 100%;
   object-fit: cover;
   transition: .2s linear;

}

.package .box-container .box .content{
   padding: 2rem;
   text-align: center;

}

.package .box-container .box .content h3{
   font-size: 2.5rem;
   color: var(--black);

}
.package .box-container .box .content p{
   font-size: 1.5rem;
   color: var(--light-black);
   line-height: 2;
   padding: 1rem 0;
    

}

.package .box-container .box .content .star{
    font-size:1.7rem;
    color:var(--orange);

}

.package .box-container .box .content .price{
    font-size: 2rem;
    color: #333;
    padding-top: 1rem;
}


.package .load-more{
   text-align: center;
   margin-top:2rem;
   margin-bottom: 2rem;
}







/* footer */

.footer{
   background-color: #222;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   

}

.footer .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(25rem,1fr));
   gap: 3rem;
   display: flex;
   margin-left: 8rem;

}


.footer .box-container .box h3{
   color: var(--white);
   font-size:2.5rem ;
   padding-bottom: 2rem;
   display: inline;
   

}

.footer .box-container .box a{
   color: var(--light-white);
   font-size:1.5rem ;
   padding-bottom: 1rem;
   display: block;

}
.footer .box-container .box a i{
   color: var(--main-color);
   padding-right: 5rem;
   transition:.2s linear ;

}
   
.footer .box-container .box a:hover i{
   padding-right: 2rem;

}


.footer .credit{
   text-align: center;
   padding-top: 3rem;
   margin-top: 3rem;
   border-top: .1rem solid var(--light-white);
   font-size: 2rem;
   color: var(--white);
}
.footer .credit span{
   color: var(--main-color);
}
   


  /* media queries */

  @media (max-width: 1200px){
   section{
       padding: 3rem 5%;
   }
}
@media (max-width: 991px){
   html{
       font-size: 60%;
   }
   section{
       padding: 3rem 5%;
   }
}
@media (max-width: 768px){
   html{
       font-size: 60%;
   }
   section{
       padding: 3rem 2rem;
   }
}

@media (max-width: 450px){
   html{
       font-size: 50%;
   }
   section{
       padding: 2rem 1rem;
   }

   .heading-title{
       font-size:3.5rem ;
   }
}