:root {
  --blue: #0080ff;
}
* {
  font-family: poppins, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-transform: capitalize;
  text-decoration: none;
  border: none;
  transition: all 0.3s linear;
}
html {
  font-size: 52%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
/* ----------------------------------Start header */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  padding: 2rem 9%;
}
/* ------ Menu-Bar */
#menu-icon{
  font-size: 2.8rem;
  color: #fff;
  cursor: pointer;
  display: none;
}
/***RESPONSIVE */
@media(max-width:940px){
  #menu-icon{
    display: block;

  }
  .navbar{
    display: none;
  }
  html{
    font-size: 50%;
  }
}

 .slide{
  height:75vh;
  width: 180px;
  position: absolute;
  background: #333;
  display: flex;
  flex-direction: column;
  align-items: center; 
  left: -25rem;
  top: 55.1px;
  z-index: 120;
  
} 
.slide.active{
  left: 0;
}


 .slide h1{
    color: var(--blue);
    font-weight: 800;
    text-align: center;
    padding: 10px 0;
    /* padding-right: 30px; */
    pointer-events: none;
 }
 .slide a{
  color: #fff;
  font-weight: 500;
  padding: 5px 0 ;
  display: block;
  text-transform: capitalize;
  transition: 0.2s ease-out;
  font-size: 2rem;
  width: 90%;
  height: auto;
  background: rgb(29, 31, 31);
  margin-bottom:30px ;
  padding-left: 5px;
 }
 .slide a:hover{
  color: var(--blue);
  padding-left: 10px;
 }




header .logo {
  font-size: 2.5rem;
  font-weight: bolder;
  color: #fff;
  text-transform: uppercase;
}
header .logo span {
  color: var(--blue);
}
header .navbar a {
  color: #fff;
  font-size: 2rem;
  margin: 0 0.8rem;
}
header .navbar a:hover {
  color: var(--blue);
}
header .icon {
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
}
header .icon:hover {
  color: var(--blue);
}
header .search-form {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #333;
  display: flex;
  align-items: center;
  z-index: 101;
  padding: 1.5rem 2rem;
  border-top: 0.1rem solid rgba(255, 255, 255, 0.2);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .search-form.active {
  clip-path: polygon(0 0, 100% 0 , 100% 100%, 0 100%);
}
header .search-form #search-bar {
  width: 100%;
  padding: 1rem;
  color: #333;
  font-size: 1.7rem;
  border-radius: 0.5rem;
}
header .search-form label {
  color: #fff;
  cursor: pointer;
  font-size: 3rem;
  margin-left: 1.5rem;
}
header .search-form label:hover {
  color: var(--blue);
}

/* ----------------------------------End - header */
/* -------------------------------------- Start log-in - */
  .login-form{
     position: fixed;
     top: -120%;
     left: 0;
     min-height: 100vh;
     width: 100%;
     background: rgba(0, 0, 0, 0.7);
     display: flex;
     justify-content:center;
     align-items: center;
     z-index: 101;
  }
  .login-form.active{
    top: 0;
  }
  .login-form i{
    font-size: 2.5rem;
    float: right;
    cursor: pointer;
    transition: 0s;

  }
  .login-form i:hover{
    color: red;
  }
 
  .login-form form{
    margin: 2rem;
    padding: 1.5rem 2rem;
    border-radius: .5rem;
    background: #fff;
    width: 50rem;
  }
  .login-form form h3{
    font-size: 3rem;
    color: #444;
    text-transform: uppercase;
    padding: 1rem 0;
    text-align: center;
    }
    .login-form form .box{
      width: 100%;
      padding: 1rem;
      font-size: 1.7rem;
      color: #333;
      margin: .6rem 0;
      border: .1rem solid rgba(0, 0, 0, 0.3);
      text-transform:  none;
    }
    .login-form form .btn{
      display: block;
      width: 100%;
    }
    /* ---global button */
    .btn{
      display: inline-block;
      margin-top: 1rem;
      color: var(--blue);
      padding: .8rem 3rem;
      border: .2rem solid var(--blue);
      cursor: pointer;
      font-size: 1.7rem;
      background: rgba(255, 165, 0, .2);
    }   
    .btn:hover{
      color: #fff;
      background: var(--blue);
    } 
    .login-form form #remember{
      margin: 2rem 0;
    }
    .login-form form label{
      font-size: 1.5rem;
    }
    .login-form form p{
      padding: .5rem 0;
      font-size: 1.5rem;
      color: #666;
    }
    .login-form form p a{
      color: var(--blue);
    }

/* -------------------------------------- End log-in - */
/* ---------------------------------Start slide-section */
  section{
    padding: 2rem 9%;
  }
  .home{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow:column ;
    position: relative;
    z-index: 0;
  }
  .home .content{
    text-align: center;
  }
  .home .content h3{
    font-size: 4.5rem;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 .3rem .5rem rgba(0, 0, 0, 0.2);
  }
  .home .content p{
    font-size: 2.5rem;
    color: #fff;
    padding: .5rem 0;
  }
  .home .video-container video{
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     object-fit:cover ;
     z-index:-1;
  }
  .home .controls{
      padding: 1rem ;
     border-radius:5rem ;
     background: rgba(0, 0, 0, 0.7);
     position: relative;
     top: 10rem; 
  }
  .home .controls .video-btn{
    height: 2rem;
    width: 2rem;
    display: inline-block;
     border-radius:50% ;
     background: #fff;
    cursor: pointer;
    margin:0 .5rem; 
  }
  
  .home .controls .video-btn.blue{
    background:var(--blue) ;
  }
/* ---------------------------------END slide-section */
/* ---------------------------------start book-section */
/* title */
 .heading{
  text-align: center;
  padding:2.5rem 0;
 }
 .heading span{
  font-size: 3.5rem;
  background: var(--blue);
  color: #fff;
  border-radius: .5rem;
  padding:.2rem 1rem ;
 }
 /* img & form */

 .book .row{
    display: flex;
    flex-wrap:wrap ;
    gap: 1.5rem ;
    align-items: center;
 }
 
 .book .row .image{
  flex: 1 1 40rem;
 }
 .book .row .image img{
  width: 100%;
 }
 .book .row form{
  flex: 1 1 40rem;
  padding:2rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  border-radius: .5rem;
 }
 .book .row form .inputdiv h3{
  font-size: 2rem;
  padding: 1rem 0;
  color:#666;
 }
 .book .row form .inputdiv input{
   width: 100%;
   padding: 1rem;
   border: 1rem solid rgba(0, 0, 0, 0.1)  ;
   font-size: 1.7rem;
   color: #333;
   text-transform: none;
 }

/* ---------------------------------END book-section */
/* ---------------------------------START packages */
.packages .container{
  display: flex;
  flex-wrap: wrap;
  /* space between gap ||- */
  gap:4.5rem;
}
.packages .container .box{
  flex: 1 1 30rem;
  border-radius: .5rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.packages .container .box img {
  height: 25rem;
  width: 100%;
  object-fit: cover;
}
.packages .container .box .content{
  padding:2rem;
}
.packages .container .box .content h3{
   font-size: 2rem;
   color: #333;
}
.packages .container .box .content h3 i{
  color: var(--blue);
  margin-right: .7rem;
}
.packages .container .box .content p{
  font-size: 1.7rem;
  color:#666;
  padding: 1rem 0;
}
.packages .container .box .content .star i{
  font-size: 1.7rem;
  color: var(--blue);
}
.packages .container .box .content .price{
   font-size: 2rem;
   color: #333;
   padding-top: 1rem;

}
.packages .container .box .content .price span{
  font-size: 1.5rem;
  color: #666;
  text-decoration: line-through;
}


/* --------------------------------END packages */
/* --------------------------------START   services */
   .services .container{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem ;
   }
   .services .container  .box{
     flex:1 1 30rem;
     border-radius: .5rem;
     padding: 1rem;
     text-align: center;
   }
   .services .container  .box:hover{
     box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
     background: rgb(242, 237, 237);
   }
   .services .container  .box i{
      padding: 1rem;
      font-size: 5rem;
      color: var(--blue);
   }
   .services .container  .box h3{
      font-size: 2.5rem;
      color: #333;
   }
   .services .container  .box p{
    font-size: 1.5rem;
    color: #666;
    padding: 1rem 0;
   }

   
   /* --------------------------------END   services */
   /* --------------------------------START   GALLARY */
     .gallary .container{
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem ;
     }
     .gallary .container .box{
      position: relative;
      overflow:  hidden;
      flex: 1 1 30rem;
      height: 25rem;
      border-radius: .5rem;
      border: 1rem solid #fff;
      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
     }
     
     .gallary .container .box img{
      width: 100%;
      height: 100%;
     }
     .gallary .container .box .content{
         position: absolute;
         width: 100%;
         height: 100%;
         text-align: center;
         background: rgba(0, 0, 0, 0.7);
         padding: 5rem 2rem 2rem;
         top: -100%;
         left: 0;
     }
     .gallary .container .box .content h3{
      font-size: 2.5rem;
      color: var(--blue);
     }
     .gallary .container .box .content p{
      font-size: 1.5rem;
      color: #fff;
      padding: .5rem 0;
     }

   /* -------------------------------END   GALLARY */
   /* -------------------------------START  REVIEW */
     .review .box{
      padding: 2rem;
      text-align: center;
      box-shadow:0 1 2rem rgba(0, 0, 0, 0.1);
      border-radius: .5rem;
     }
     .review .box img{
      width: 13rem;
      height: 13rem;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 1rem;
     }
     .review .box h3{
      color: #333;
      font-size: 2.5rem;
     }
     .review .box p{
       color: #666;
       font-size: 1.5rem;
       padding: 1rem 0;
     }
     .review .box .stars i{
       color: var(--blue);
       font-size: 1.7rem;
     }

  /* -------------------------------END  REVIEW */
 /* -----------------------------START  CONTACT */
   .contact .row{
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      align-items: center;
   }
   .contact .row .image{
      flex:1 1 35rem; 
   }
   .contact .row .image img{
      width: 100%;
   } 
   .contact .row form{
    flex: 1 1 40rem;
    padding:2rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
    border-radius: .5rem;
   }
   .contact .row form .inputbox{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }
   
   .contact .row form .inputbox input , .contact .row form textarea{
      width: 49%;
      margin: 1rem 0 ;
      padding: 1rem;
      font-size: 1.7rem;
      color: #333;
      background: #f7f7f7;
   }
   .contact .row form textarea{
     height: 15rem;
     width: 100%;
   }

 /* -----------------------------END  CONTACT */
  /* -----------------------------START  FOOTER */
   .footer{
      background: #333;
   }
   .footer .box-container{
     display: flex;
     flex-wrap: wrap;
     gap:1.5rem;
   }
   .footer .box-container .box{
     padding: 1rem 0;
     flex: 1 1 25rem;
   }
   .footer .box-container .box h3{
    font-size: 2.5rem;
    padding: .7rem 0;
    color: #fff;
   }
   .footer .box-container .box p{
    font-size: 1.5rem;
    padding: .7rem 0;
    color: #eee;
   }
   .footer .box-container .box a{
     font-size: 1.5rem;
     padding: .7rem 0;
     color: #eee;
     display: block;
   }
   .footer .box-container .box a:hover{
     color: var(--blue);
     text-decoration: underline;
   }
   .footer .created{
     text-align: center;
     padding: 2rem 1rem;
     margin-top: 1rem;
     font-size: 2rem;
      font-weight: normal;
      color: #fff;
   }
   .footer .created span {
     color: var(--blue);
   }
  
  /* -----------------------------END  FOOTER */