@import url('https://fonts.googleapis.com/css?family=Mukta:300,400,500,600,700,800|Teko:400,500,600,700&display=swap');

/*@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');*/

:root{
  --orange:#ff9500;
  --mainblue:#09405d;
  --products:#09405d;
  --footer:#09405d;
  --lighterblue:#176b97;
  --black:#222;
  --darkgrey:#555;
  --lightgrey:#888;
  --white:#fff;
  --header:#10587e;
  --subheader:#333;
}

*{
  font-family: 'Mukta', sans-serif;
  margin:0; padding:0;
  box-sizing: border-box;
  text-transform: capitalize;
  outline: none; border:none;
  text-decoration: none;
  transition: all .2s linear;
}

*::selection{
  background:var(--orange);
  color:#fff;
}

html{
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
}


.app{
	position:relative;
	overflow-x:hidden;
	min-height:100vh;}

.app.fixed{
	width:100%;
	height:100%;
	position:fixed;
	overflow:hidden;}

section{
  padding:2rem 9%;
}

.heading{
  text-align: center;
  padding:2.5rem 0
}

.heading span{
  font-size: 3.5rem;
  background:#08b;
  color:#fff;
  border-radius: .5rem;
  padding:.2rem 1rem;
}

.heading span.space{
  background:none;
}

.btn{
  display: inline-block;
  margin-top: 1rem;
  background:var(--orange);
  color:#fff;
  padding:.8rem 3rem;
  border:.2rem solid var(--orange);
  border-radius: .5rem;
  cursor: pointer;
  font-size: 1.7rem;
  margin-bottom:.5rem;
}

.btn:hover{
  background:rgba(255, 165, 0,.2);
  color:var(--orange);
}


.btn-phone{
  display: inline-block;
  background:var(--orange);
  color:#fff;
  padding:.5rem 1rem;
  border:.2rem solid var(--orange);
  border-radius: .5rem;
  cursor: pointer;
  font-size: 1.4rem;
  margin: auto;
}

.btn-phone:hover{
  background:rgba(255, 165, 0,.2);
  color:var(--orange);
}

.btn-phone i{
  color:#fff;
  cursor: pointer;
}


header{
  position: fixed;
  top:0; left: 0; right:0;
  background:var(--mainblue);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:1.3rem 9%;
}

header .logo{
  font-size: 2.5rem;
  font-weight: bolder;
  color:#fff;
  text-transform: uppercase;
}

header .logo img{
  width:12rem;
  height: auto;
}

header .logo span{
  color:var(--orange);
}

header .navbar a{
  color:#fff;
  font-size: 2rem;
  margin:0 .8rem;
}

header .navbar a:hover{
  color:var(--orange);
}

header .icons i{
  font-size: 2rem;
  color:#fff;
  cursor: pointer;
  margin-right: 1rem;
}

header .icons i:hover{
  color:var(--orange);
}



header .search-bar-container{
  position: absolute;
  top:100%; left: 0; right:0;
  padding:1.5rem 2rem;
  background:var(--mainblue);
  border-top: .1rem solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  z-index: 1001;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

header .search-bar-container.active{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

header .search-bar-container #search-bar{
  width:100%;
  padding:1rem;
  text-transform: none;
  color:#333;
  font-size: 1.7rem;
  border-radius: .5rem;
}

header .search-bar-container label{
  color:#fff;
  cursor: pointer;
  font-size: 3rem;
  margin-left: 1.5rem;
}

header .search-bar-container label:hover{
  color:var(--orange);
}



.login-form-container{
  position: fixed;
  top:-120%; left: 0;
  z-index: 10000;
  min-height: 100vh;
  width:100%;
  background:rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form-container.active{
  top:0;
}

.login-form-container form{
  margin:2rem;
  padding:1.5rem 2rem;
  border-radius: .5rem;
  background:#fff;
  width:50rem;
}

.login-form-container form h3{
  font-size: 3rem;
  color:#444;
  text-transform: uppercase;
  text-align: center;
  padding:1rem 0;
}

.login-form-container form .box{
  width:100%;
  padding:1rem;
  font-size: 1.7rem;
  color:#333;
  margin:.6rem 0;
  border:.1rem solid rgba(0,0,0,.3);
  text-transform: none;
}

.login-form-container form .box:focus{
  border-color: var(--orange);;
}

.login-form-container form #remember{
  margin:2rem 0;
}

.login-form-container form label{
  font-size: 1.5rem;
}

.login-form-container form .btn{
  display: block;
  width:100%;
}

.login-form-container form p{
  padding:.5rem 0;
  font-size: 1.5rem;
  color:#666;
}

.login-form-container form p a{
  color:var(--orange);
}

.login-form-container form p a:hover{
  color:#333;
  text-decoration: underline;
}

.login-form-container #form-close{
  position: absolute;
  top:2rem; right:3rem;
  font-size: 5rem;
  color:#fff;
  cursor: pointer;
}

#menu-bar{
  color:#fff;
  border:.3rem solid #fff;
  border-radius:0.5rem;
  font-size: 3rem;
  padding:.8rem 1rem;
  cursor: pointer;
  display: none;
}

.home{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  position: relative;
  border-bottom: 10px solid var(--mainblue);
  z-index: 0;
}

.home .content{
  text-align: center;
  background:rgba(23, 107, 151,.6);;
  padding: 1rem;
  border-radius: 0.6rem;
}



.home .content h3{
  font-size: 4.5rem;
  color:#fff;
  text-transform: uppercase;
  text-shadow: 0 .3rem .5rem rgba(0,0,0,.1);
}



.home .content p{
  font-size: 2.5rem;
  color:#fff;
  padding:.5rem 0;
}

.home .video-container video{
  position: absolute;
  top:0; left: 0;
  z-index: -1;
  height: 100%;
  width:100%;
  object-fit: cover;
}



video {
  object-fit: cover;
  background-position: center;
  width: 100vw;
  height: 110vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  /*filter: grayscale(.8) brightness(.5);*/
}

.home .controls{
  padding:1rem;
  border-radius: 5rem;
  background:rgba(0,0,0,.7);
  position: relative;
  top:10rem;
}

.home .controls .vid-btn{
  height:2rem;
  width:2rem;
  display: inline-block;
  border-radius: 50%;
  background:#fff;
  cursor: pointer;
  margin:0 .5rem;
}

.home .controls .vid-btn.active{
  background:var(--orange);
}




/*title starts  here*/


.link-gap{
  width:90%;
  height:30px;
  background:none;
  display: grid;
  grid-template-columns:1fr;
  align-items: top center;
  justify-content: space-between;
  padding-top:2rem;
  position: relative;
  margin: auto;
}

.link-gap .item{
  width:100%;
  height:30px;
  background:none;
  display: grid;
  justify-content: space-between;
  position: relative;
  margin: auto;
}


.hr{
  width: 90%;
  height:3px;
  background:var(--mainblue);
  display: grid;
  grid-template-columns:1fr;
  align-items: top center;
  justify-content: space-between;
  padding:.5rem;
  position: relative;
  margin: auto;
}

.separator{
  width: 90%;
  height:1px;
  background:var(--mainblue);
  display: grid;
  grid-template-columns:1fr;
  align-items: top center;
  justify-content: space-between;
  position: relative;
  margin:auto;
}


.gap{
  width: 90%;
  height:3rem;
  display: grid;
  grid-template-columns:1fr;
  align-items: top center;
  justify-content: space-between;
  padding:.5rem;
  position: relative;
  margin: auto;
}


.title{
  width: 90%;
  background:#fff;
  display: grid;
  grid-template-columns:1fr;
  align-items: top center;
  justify-content: space-between;
  padding-top:3rem;
  position: relative;
  margin: auto;
}



.title h2 {
  font-size: 3rem;
  margin-top:1.5rem;
  font-weight: bold;
  color:var(--header);
  text-transform: uppercase;
  letter-spacing: 2px;
}



.title h4 {
  font-size: 1.2rem;
  margin-top:0;
  padding-left:1rem;
  padding-top: .5rem;
  padding-bottom: 1rem;
  font-weight: normal;
  color: var(--subheader);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/*title ends here*/


/*about us starts here*/

.about-us{
  width: 90%;
  background:#fff;
  display: grid;
  grid-template-columns:40% 1fr;
  gap: 20px;
  align-items: top center;
  justify-content: space-between;
  padding:2rem;
  position: relative;
  margin: auto;
}

.about-us .item {
  padding: 1rem;
  line-height: 1.3;

}


.about-us .item img {
  width: 35rem;
  height: auto;
  margin-top: 1rem;
  margin-left:1 rem;
  border-radius:3rem;

}



.about-us .item h3 {
  font-size: 2rem;
  margin-top:1rem;
  font-weight: bold;
  color: var(--header);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.about-us .item h3 span {
  color: var(--subheader);
 text-transform: uppercase;
}


.about-us .item h5 {
font-size: 1.2rem;
  margin-top:1rem;
  padding-top: .5rem;
  font-weight: bold;
  color: var(--subheader);
  letter-spacing: 2px;
}
  


.about-us .item p {
  font-size: 1.4rem;
  margin-top:1rem;
  text-transform: none;
  font-weight: normal;
  color: var(--darkgrey);
  letter-spacing: none;
  line-height: 1.7;
}


.about-us .item li {
  font-size: 1.2rem;
  margin-top:1rem;
  margin-left: 2rem;
  font-weight: normal;
  color: var(--lighterblue);
  letter-spacing: 1px;
  line-height: 1.5;
}

/*about us ends here*/







/*about us ends here*/






.book .row{
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
  align-items: center;
  margin: auto;
}

/*testimonials slider starts here*/

.blog-slider {
   width: 95%;
   position: relative;
   max-width: 800px;
   margin: auto;
   background: var(--products);
   padding: 25px;
   border-radius: 25px;
   height: 400px;
   transition: all 0.3s;
}
 @media screen and (max-width: 992px) {
   .blog-slider {
     max-width: 680px;
     height: 400px;
  }
}
 @media screen and (max-width: 768px) {
   .blog-slider {
     min-height: 500px;
     height: auto;
     margin:130px auto 50px auto;
  }
}
 @media screen and (max-height: 500px) and (min-width: 992px) {
   .blog-slider {
     height: 350px;
  }
}
 .blog-slider__item {
   display: flex;
   align-items: center;
}
 @media screen and (max-width: 768px) {
   .blog-slider__item {
     flex-direction: column;
  }
}
 .blog-slider__item.swiper-slide-active .blog-slider__img img {
   opacity: 1;
   transition-delay: 0.3s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > * {
   opacity: 1;
   transform: none;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
   transition-delay: 0.3s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
   transition-delay: 0.4s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
   transition-delay: 0.5s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
   transition-delay: 0.6s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
   transition-delay: 0.7s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
   transition-delay: 0.8s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
   transition-delay: 0.9s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
   transition-delay: 1s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
   transition-delay: 1.1s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
   transition-delay: 1.2s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
   transition-delay: 1.3s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
   transition-delay: 1.4s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
   transition-delay: 1.5s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
   transition-delay: 1.6s;
}
 .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
   transition-delay: 1.7s;
}
 .blog-slider__img {
   width: 250px;
   flex-shrink: 0;
   height: 250px;
   background:var(orange);
   border-radius: 20px;
   transform: translateX(-80px);
   overflow: hidden;
}
 .blog-slider__img:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 20px;
   opacity: 0.8;
}
 .blog-slider__img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   opacity: 0;
   border-radius: 50%;
   border:10px solid var(--orange);
   transition: all 0.3s;
}
 @media screen and (max-width: 768px) {
   .blog-slider__img {
     transform: translateY(-50%);
     width: 280px;
     height:280px;
  }
}
 @media screen and (max-width: 576px) {
   .blog-slider__img {
     width: 280px;
     height: 280px;
 
  }
 }
   @media screen and (max-width: 450px) {
   .blog-slider__img {
     width: 250px;
     height: 250px;
  }
}

 @media screen and (max-height: 500px) and (min-width: 992px) {
   .blog-slider__img {
     height: 270px;
     width: 270px;
  }
}
 .blog-slider__content {
   padding-right: 25px;
}



 @media screen and (max-width: 768px) {
   .blog-slider__content {
     margin-top: -80px;
     text-align: center;
     padding: 0 30px;
  }
}

 @media screen and (max-width: 576px) {
   .blog-slider__content {
     padding: 0;
  }
}
 .blog-slider__content > * {
   opacity: 0;
   transform: translateY(25px);
   transition: all 0.4s;
}
 .blog-slider__code {
   color:var(--white);
   font-size: 1.3rem;
   margin-bottom: 15px;
   display: block;
   font-weight: 500;
}
 .blog-slider__title {
   font-size: 2.4rem;
   font-weight: 700;
   color: var(--orange);
   margin-bottom: 20px;
}
 .blog-slider__text {
   color:var(--white);
   font-size:1.5rem;
   margin-bottom: 30px;
   line-height: 1.5em;
}

.star-rating {
color: var(--orange);
}
.star-rating span{
color: var(--lighterblue);
}



 .blog-slider__button {
   display: inline-flex;
   background: var(--orange);
   /*background-image: linear-gradient(147deg, #fe8a39 0%, #fd3838 74%);*/
   padding: 15px 35px;
   border-radius: 10px;
   color:var(--mainblue);
   box-shadow: 0px 14px 80px rgba(252, 56, 56, 0.4);
   text-decoration: none;
   font-weight: 500;
   justify-content: center;
   text-align: center;
   letter-spacing: 1px;
}
 @media screen and (max-width: 576px) {
   .blog-slider__button {
     width: 100%;
  }
}
 .blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
   bottom: 10px;
   left: 0;
   width: 100%;
}
 .blog-slider__pagination {
   position: absolute;
   z-index: 21;
   right: 20px;
   width: 11px !important;
   text-align: center;
   left: auto !important;
   top: 50% !important;
   bottom: auto !important;
   transform: translateY(-50%);
}

 @media screen and (max-width: 768px) {
   .blog-slider__pagination {
     transform: translateX(-50%);
     left: 50% !important;
     top: 205px !important;
     width: 100% !important;
     display: flex;
     justify-content: center;
     align-items: center;
  }
}


 @media screen and (max-width: 450px) {
   .blog-slider__pagination {
     transform: translateX(-50%);
     left: 50% !important;
     top: 165px !important;
     width: 100% !important;
     display: flex;
     justify-content: center;
     align-items: center;
  }
}


 .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 8px 0;
}
 @media screen and (max-width: 768px) {
   .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
     margin: 0 5px;
  }
}
 .blog-slider__pagination .swiper-pagination-bullet {
   width: 11px;
   height: 11px;
   display: block;
   border-radius: 10px;
   background:var(--lighterblue);
   opacity: 0.8;
   transition: all 0.3s;
}
 .blog-slider__pagination .swiper-pagination-bullet-active {
   opacity: 1;
   background:var(--orange);
   height: 30px;
   box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
 @media screen and (max-width: 768px) {
   .blog-slider__pagination .swiper-pagination-bullet-active {
     height: 11px;
     width: 30px;
  }
}
 



/*testimonials slider ends here*/



.packages .box-container{
  display: flex;
  flex-wrap: wrap;
  gap:2rem;
}

.packages .box-container .box{
  flex:1 1 30rem;
  border-radius: 3rem;
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
  /*border:0.2rem solid var(--lighterblue);*/
  background:var(--products);
}

.packages .box-container .box img{
  height: 30rem;
  width:100%;
  object-fit: cover;
}

.packages .box-container .box .content{
  padding:2rem;
}

.packages .box-container .box .content h3{
  font-size:2rem;
  color:#fff;
}

.packages .box-container .box .content h3 i{
  color:#fff;
}

.packages .box-container .box .content p{
  font-size:1.5rem;
  color:#fff;
  text-transform: none;
  padding:1rem 0;
}

.packages .box-container .box .content ul{
  padding-left:2rem;
}



.packages .box-container .box .content li{
  font-size:1.4rem;
  color:#fff;
  text-transform: none;
  padding:.3rem ;
}

.packages .box-container .box .content .stars i{
  font-size:1.7rem;
  color:var(--orange);
}

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

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






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

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

.services .box-container .box i{
  padding:1rem;
  font-size: 5rem;
  color:var(--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 rgba(0,0,0,.1);
}

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

.gallery .box-container .box{
  overflow: hidden;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
  border:1rem solid #fff;
  border-radius: .5rem;
  flex:1 1 30rem;
  height: 25rem;
  position: relative;
}

.gallery .box-container .box img{
  height: 100%;
  width:100%;
  object-fit: cover;
}

.gallery .box-container .box .content{
  position: absolute;
  top:-100%; left:0;
  height: 100%;
  width:100%;
  text-align: center;
  background:rgba(0,0,0,.7);
  padding:2rem;
  padding-top: 5rem;
}

.gallery .box-container .box:hover .content{
  top:0;
}

.gallery .box-container .box .content h3{
  font-size: 2.5rem;
  color:var(--orange);
}

.gallery .box-container .box .content p{
  font-size: 1.5rem;
  color:#eee;
  padding:.5rem 0;
}

.review .review-slider{
  padding-bottom: 2rem;
}

.review .box{
  padding:2rem;
  text-align: center;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
  border-radius: .5rem;
  background: var(--mainblue);
}

.review .box img{
  height:13rem;
  width: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(--orange);
  font-size: 1.7rem;
}



.contact .row{
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
  align-items: center;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
  margin: auto;
  padding: 0.5rem 1rem;
}

.contact .row .image{
  flex:1 1 35rem;
  padding: 2rem;
  margin: auto;
 
}

.contact .row .image h2{
  flex:1 1 35rem;
  color:#777;
  font-size: 2rem;
  padding: 0rem 1rem;
}


.contact .row .image p{
  flex:1 1 35rem;
  color:#777;
  font-size: 1.4rem;
  padding: 0.5rem 1rem;
}



.contact .row .image img{
  width:100%;
}

.contact .row form{
  flex:1 1 50rem;
  padding:2rem;
  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;
  text-transform: none;
}

.contact .row form textarea{
  height: 15rem;
  resize: none;
  width:100%;
}



.brand-container{
  text-align: center;
}



.footer{
  background:var(--mainblue);
}

.footer .box-container{
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
  margin: auto;
}

.footer .box-container .box{
  padding:1rem 0;
  flex:1 1 25rem;
}

.footer .box-container .box .logo{
  font-size: 2.5rem;
  font-weight: bolder;
  color:#fff;
  text-transform: uppercase;
}

.footer .box-container .box .logo img{
  width:12rem;
  height: auto;
}

.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{
  display: block;
  font-size: 1.5rem;
  padding:.7rem 0;
  color:#eee;
}




.footer .box-container .box a:hover{
  color:var(--orange);
  text-decoration: none;
}

.footer .credit{
  text-align: center;
  padding:2rem 1rem;
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: normal;
  color:#fff;
  border-top: .1rem solid rgba(255,255,255,.2);
}

.footer .credit span{
  color:var(--orange);
}
















/* media queries  */

@media (max-width:1200px){

  html{
    font-size: 55%;
  }

}

@media (max-width:991px){

  header{
    padding:2rem;
  }

  section{
    padding:2rem;
  }

}

@media (max-width:768px){

 #menu-bar{
    display: initial;
    color:#fff;
    border:.25rem solid #fff;
    border-radius:0.5rem;
    font-size: 2.5rem;
    padding:.7rem .85rem;
    cursor: pointer;
  }





  header .navbar{
    position: absolute;
    top:100%; right:0; left: 0;
    background:var(--mainblue);
    border-top: .1rem solid rgba(255,255,255,.2);
    padding:1rem 2rem;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }

  header .navbar.active{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  header .navbar a{
    display: block;
    border-radius: .5rem;
    padding:1.5rem;
    margin:1.5rem 0;    
    background:var(--lighterblue);
  }


header .icons i{
  font-size: 1.8rem;
  color:#fff;
  cursor: pointer;
  margin-right: .5rem;
}

.home .content{
  text-align: center;
  background:rgba(23, 107, 151,.6);;
  padding: 1rem;
  border-radius: 0.6rem;
}



.home .content h3{
  font-size: 2.5rem;
  color:#fff;
  text-transform: uppercase;
  text-shadow: 0 .3rem .5rem rgba(0,0,0,.1);
}



.home .content p{
  font-size: 1.5rem;
  color:#fff;
  padding:.5rem 0;
}



/*about us starts here*/
.about-us{
  width: 90%;
  background:#fff;
  display: grid;
  grid-template-columns:1fr;
  gap: 20px;
  align-items: top center;
  justify-content: space-between;
  padding:2rem;
  position: relative;
  margin: auto;
}


.about-us .item img {
  width: 33rem;
  height: auto;
  margin-top: 1rem;
  margin-left:1rem;
  border-radius:3rem;

}


}

@media (max-width:450px){

  html{
    font-size: 50%;
  }

  .heading span{
    font-size: 2.5rem;
  }
  
  
  
  
  .about-us{
  width: 90%;
  background:#fff;
  display: grid;
  grid-template-columns:1fr;
  gap: 20px;
  align-items: top center;
  justify-content: space-between;
  padding:1rem;
  position: relative;
  margin: auto;
}
  
  .about-us .item {
  padding: .5rem;
  line-height: 1.3;

}
  
  .about-us .item img {
  width: 32.5rem;
  height: auto;
  margin-top: 1rem;
  margin-left:0;
  border-radius:3rem;

}


.about-us .item h3 {
  font-size: 2rem;
  margin-top:1rem;
  font-weight: bold;
  color: var(--header);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.about-us .item h3 span {
  color: var(--subheader);
 text-transform: uppercase;
}


.about-us .item h5 {
font-size: 1.6rem;
  margin-top:1rem;
  padding-top: .5rem;
  font-weight: bold;
  color: var(--subheader);
  letter-spacing: 2px;
}
  


.about-us .item p {
  font-size: 1.65rem;
  margin-top:1rem;
  text-transform: none;
  font-weight: normal;
  color: var(--darkgrey);
  letter-spacing: none;
  line-height: 1.5;
}


.about-us .item li {
  font-size: 1.2rem;
  margin-top:1rem;
  margin-left: 2rem;
  font-weight: normal;
  color: var(--lighterblue);
  letter-spacing: 1px;
  line-height: 1.5;
}





  .contact .row form .inputBox input{
    width:100%;
  }

}