:root{

  --swiper-pagination-color: #ffffff;

  --swiper-pagination-bullet-inactive-color: transparent;

  --swiper-pagination-bullet-inactive-opacity: 1;

  --swiper-pagination-bullet-size: 14px;

  --swiper-pagination-bullet-horizontal-gap: 6px;

}

main{

  position: relative;

}

.main-left{

  width: 100%;

}

.main-right{

  position: fixed;

  right: 0;

  top: 100px;

  width: 30%;

  z-index: 2;

  height: 50vh;

  padding: 30px 40px 30px 0;

}



.main-right .cont{

  box-shadow: 0 0 2px 3px #00000030;

  background: #fff;

  padding: 30px 20px;

}

.main-right .input-field{

  display: flex; 

  align-items: center;

  border-bottom: 2px solid #00000080;

  margin-bottom: 15px;

}

.main-right .form-control{

  background: transparent;

  box-shadow: none;

  border: none;

  border-radius: 0;

}

.main-right .form-control::placeholder{

  color: #000000;

}

.btn-submit{

  background: #b88a44;

  color: #fff;

  width: 100%;

}



.page-section{

  padding: 50px 40px;

}



.banner{

  position: relative;

}

.banner .layer{

  background: #00000040;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

}



.hero-image{

  max-height: calc(50vh);

  min-height: calc(35vh);

  object-fit: cover;

  object-position: center;

  width: 100%;

}



.banner .content{

  padding: 50px;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 2;

  color: #fff;

  text-align: start;

  width: 100%;

  padding: 40px 50px;

}

.banner .content h2{

  font-size: 3.8rem;

  font-weight: 700;

  text-shadow: 3px 4px 7px #00000080;

  margin-bottom: 10px;

  text-transform: uppercase;

}



.banner .content p{

  font-size: 1.2rem;

  text-shadow: 2px 3px 5px #00000080;

  margin-bottom: 0;

  display: inline-block;

  text-transform: uppercase;

}

.banner .content p a{

  font-size: 1.2rem;

  text-shadow: 2px 3px 5px #00000080;

  margin-bottom: 0;

  display: inline-block;

  text-transform: uppercase;

  color: #fff;

}

.banner .content p a:hover{

  font-size: 1.2rem;

  text-shadow: 2px 3px 5px #000000;

  margin-bottom: 0;

  display: inline-block;

  text-transform: uppercase;

  color: #b88a44;

  font-weight: 700;

}



/* Galery */

.swiper-button-next1:after, .swiper-rtl .swiper-button-prev1:after {

  content: 'next';

  font-size: 1.2rem;

}

.swiper-button-prev1:after, .swiper-ltr .swiper-button-prev1:after {

  content: 'prev';

  font-size: 1.2rem;

}

.swiper-cont .swiper0 img{

  width: 100%;

  object-fit: cover;

  height: 100%;

  object-position: center;

}

#slide-back1{

  font-size: 1.5rem;

  background: transparent;

  color: #fff;

  border: none;

  left: 10px;

  position: absolute;

  top: 50%;

  transform: translateY(-48%);

  z-index: 10;

  border-radius: 50%;

}

#slide-forward1{

  font-size: 1.5rem;

  background: transparent;

  color: #fff;

  border: none;

  right: 10px;

  position: absolute;

  top: 50%;

  transform: translateY(-48%);

  z-index: 10;

  border-radius: 50%;

}

#slide-back1.in-active, #slide-forward1.in-active{

  opacity: 0.5;

}



.swiper-pagination1{

  margin-top: -50px;

  z-index: 10;

  position: relative;

}

.swiper-pagination-bullet{

  border: 2px solid #fff;

  box-shadow: 0 0 3px 3px #00000080;

}



/* Amenities */

/* .amenities .list{

  padding: 10px;

  box-shadow: 0 0 2px 3px #ededed;

  display: flex;

  align-items: center;

  border-bottom: 2px solid #ededed;

} */

/* .amenities .list:hover{

  padding: 10px;

}



.icon-cont{

  font-size: 1.1rem;

  font-weight: 500;



} */

.amenities .list{

  padding: 10px;

  /* box-shadow: 0 0 2px 3px #ededed; */

  display: flex;

  align-items: center;

  border-bottom: 2px solid #ededed;

}

.amenities .list:hover{

  padding: 10px;

  /* box-shadow: 0 0 2px 3px #b88a4460; */

}

.amenities .icon-cont{

  width: 50px;

  height: 50px;

  /* background: #00264C; */

  background: #b88a44;

  color: #fff;

  border-radius: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 10px;

  overflow: hidden;

}

.amenities .icon-cont i{
  font-size: 30px;
}

.icon-cont img{

  height: 45px;

  width: 45px;

}

.page-section .icon-cont img:hover{

  filter: none;

}

/* Specifications */

.spec-card{

  box-shadow: 0 0 2px 4px #ededed;

  padding: 20px;

}

.spec-card:hover{

  box-shadow: 0 0 2px 4px #b88a4460;

}

.spec-card h4{

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 1.3rem;

  color: #00264C;

  font-weight: 700;

}

.spec-card:hover h4{

  margin-bottom: 20px;

}

.spec-card h4 .in-active{

  display: inline;

  color: #b88a44;

}

.spec-card:hover .in-active{

  display: none;

}

.spec-card h4 .active{

  display: none;

  color: #b88a44;

}

.spec-card:hover .active{

  display: inline;

}

.spec-content{

  display: none;

}

.spec-card:hover .spec-content{

  display: block;

}

.spec-table .bb-2{

  padding: 10px 0;

}

.spec-table .bb-2:not(:last-child){

  border-bottom: 2px solid #ededed;

}

.spec-table .left{

  width: 130px;

  font-weight: 500;

}

.spec-table .right{

  flex: 1;

}



/* Projects */

.swiper-cont{

  position: relative;

}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {

  content: 'next';

  font-size: 1.2rem;

}

.swiper-button-prev:after, .swiper-ltr .swiper-button-prev:after {

  content: 'prev';

  font-size: 1.2rem;

}

.swiper-cont img{

  width: 100%;

  object-fit: cover;

  height: 35vh;

  object-position: center;

}

#slide-back{

  background: #b88a44;

  border: none;

  left: -40px;

  position: absolute;

  top: 50%;

  transform: translateY(-48%);

  z-index: 10;

  border-radius: 50%;

}

#slide-forward{

  background: #b88a44;

  border: none;

  right: -40px;

  position: absolute;

  top: 50%;

  transform: translateY(-48%);

  z-index: 10;

  border-radius: 50%;

}

#slide-back.in-active, #slide-forward.in-active{

  opacity: 0.3;

}



.swiper-breads{

  font-size: 0.9rem;

  text-transform: uppercase;

}

.swiper-heading{

  font-size: 1.5rem;

  font-weight: 700;

}



.swiper-para{

  font-size: 1rem;

}



footer{

  position: relative;

  z-index: 10;

}

.swiper-slide.gallery{

  height: 100vh;

}

.video-height{

  height: 70vh;

}

.sec3-image.shikaara{

  height: 100vh;

}

/* .images-height{

  height: 100vh !important;

  object-fit: cover;

  width: 100%;

} */

background-filter {

  background-color: #494d4f8a;

}

.section-paragraph {

  font-size: 1.5rem;

  /* padding-top: 100px; */

}

.sec1-achortag {

  text-decoration: none;

  font-size: 3rem;

  font-weight: 300;

}

.btn.btn-light {

  border-radius: 0px;

  padding: 10px;

  font-size: 1.1rem;

}

@keyframes fadeIn {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

.animate__fadeIn {

  visibility: hidden;

}

.active .animate__fadeIn {

  visibility: visible;

  animation-name: fadeIn;

  animation: fadeIn 1s ease-in 0.2s forwards;

}



@keyframes fadeInLeft {

  0% {

    opacity: 0;

    transform: translateX(-100%);

  }

  100% {

    opacity: 1;

    transform: translateX(0);

  }

}

.animate__fadeInLeft {

  visibility: hidden;

}

.active .animate__fadeInLeft {

  visibility: visible;

  animation-name: fadeInLeft;

  animation: fadeInLeft 1s ease-in 0.2s forwards;

}

@keyframes fadeInUp {

  0% {

    transform: translateY(100%);

    opacity: 0;

  }

  100% {

    transform: translateY(0);

    opacity: 1;

  }

}



.animate__fadeInUp {

  visibility: hidden;

}

.active .animate__fadeInUp {

  visibility: visible;

  animation: fadeInUp 0.5s ease-in forwards;



}

.shikaara-image{

  position: relative;

}

.shikaara-image:hover{

  width: 100%;

  height: auto;

}





#modalImg {

  max-width: 100%; 

  height: 60vh;

}



/* #galleryModal {

  background: #00000099;

}

.icon-close {

  background: transparent; 

  border: none; 

  outline: none;

}

.fas.fa-close {

  font-size: 20px;

}  */

.modal-content {

  height: 90vh;

  width: 90vw; 

  background: transparent; 

  border: none;

}

.modal-body {

  height: 90vh; 

  width: 90vw;

}

#galleryModal {

  background: #00000099;

}

.icon-close {

  background: transparent; 

  border: none; 

  outline: none;

}

.fas.fa-close {

  font-size: 20px;

}

.fas.fa-chevron-left,

.fas.fa-chevron-right{

  cursor: pointer;

}

#galleryImg {

  max-width: 80%;

  height: auto;

}



.page-section img{

  cursor: pointer;

}

/* .page-section img:hover{

  filter: brightness(50%);

} */

.swiper .swiper4{

  overflow: visible;

}

#slide-back4{

  background: transparent;

  border: none;

  left: 0px;

  position: absolute;

  top: 50%;

  transform: translateY(-48%);

  z-index: 10;

  border-radius: 50%;

  font-size: 1.5rem;

}

#slide-forward4{

  background: transparent;

  border: none;

  right: 0px;

  position: absolute;

  top: 50%;

  transform: translateY(-48%);

  z-index: 10;

  border-radius: 50%;

  font-size: 1.5rem;

}

#slide-back4.in-active, #slide-forward4.in-active{

  opacity: 0.3;

}

.imagecard{

  overflow: hidden;

  border-radius: 5px;

}

.imagecard img{

  width: 100%;

  object-position: center;

  object-fit: cover;

}

.imagecard img:hover{

  transform: scale(1.1);

  filter: none;

}



@media screen and (max-width:992px) {
  :root{
  
    --swiper-pagination-bullet-size: 8px;
  
    --swiper-pagination-bullet-horizontal-gap: 4px;
  
  }

  .main-left{

    width: 100%;

  } 

  .main-right {

    position: unset;

    right: 0;

    top: 100px;

    width: 100%;

    z-index: 2;

    height: unset;

    padding: 30px 20px 30px;

  } 

  .banner .content {

    padding: 20px;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    color: #fff;

    text-align: start;

    width: 100%;

  }

  .page-section {

    padding: 30px 15px;

  }

  .page-section.projects-section{

    padding: 0 10px;

  }

  .banner .content h2 {

    font-size: 2rem;

    font-weight: 700;

    text-shadow: 3px 4px 7px #00000080;

    margin-bottom: 10px;

    text-transform: uppercase;

  }

  .swiper-slide.gallery{

    height: unset;

  }

  .sec3-image.shikaara{

    height: 50vh;

  }

  .video-height{

    height: 20vh;

  }

  .images-height{

    height: unset;

    object-fit: cover;

  }

  .hero-image {

    max-height: calc(50vh);

    object-fit: cover;

    object-position: right;

    width: 100%;

    height: 30vh;

  }

  #galleryImg {

    max-width: 95%; 

    height: auto;

  }

}