*{margin: 0px; padding: 0px; box-sizing: border-box;}
img{max-width: 100%;}
a, a:hover, a:focus, a:visited, a:active{text-decoration: none;}
ul, li, p{margin: 0px; padding: 0px;}


::selection{color: #fff; background-color: #203561;}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background-color: #82252d;}


/* header */
header{background-color: #ffffff9a; position: absolute; top: 0; left: 0; right: 0; z-index: 999;}
header .navbar-brand {width: 8%;}
header .nav-link{font-size: 16px; color: black; font-weight: 600; padding: 0px !important; transition: .5s; position: relative;}
header .nav-link:hover{color: #203561;}
header .navbar{padding-top: 0px; padding-bottom: 0px;}
header .navbar .navbar-nav{gap: 20px;}
header .nav-link:before{width: 0; height: 2px; background-color: #203561; content: ''; position: absolute; bottom: -3px; left: 0; transition: .5s;}
header .nav-link:hover:before{width: 100%;}
 header .offcanvas-title{color: #203561;}
header .navbar-toggler{border: #434341 1px solid; padding: 7px 10px; color: #203561; font-size: 23px; font-weight: bold;}
header .navbar-toggler:focus{box-shadow: none;}
header .offcanvas{background-color: #ffffffc5;}

header .book a{font-size: 16px; padding: 10px 25px; border-radius: 100px; display: inline-block; color: #fff; font-weight: 500;
  animation: color-animation 3s linear infinite;}

@keyframes color-animation {
  0%    { background: #203561;
    background: linear-gradient(90deg, #203561 0%, #000000 100%);}

  50%   { background: #000000;
    background: linear-gradient(90deg, #000000 0%, #203561 100%);}

  100%  { background: #203561;
    background: linear-gradient(90deg, #203561 0%, #000000 100%);}
}


/* slider */
#slider .owl-theme .owl-dots .owl-dot.active span, #slider .owl-theme .owl-dots .owl-dot:hover span{background-color: #203561;}
#slider .banner{background-image: url(../images/banner.jpg); background-repeat: no-repeat; background-size: cover; padding: 450px 0px; background-position: center center;}

#slider{position: relative;}
#slider .content{position: absolute; bottom: 30%; z-index: 99; width: 35%; background-color: #ffffffa6; padding: 50px;}
#slider .content h2{color: #434341; font-size: 40px; font-weight: 700;}
#slider .content h2 span{color: #203561; font-weight: 400;}
#slider .content p{color: #000; font-size: 16px;}


/* about */
#about{padding: 50px 0;}
#about .content h2{color: #434341; font-size: 40px; font-weight: 700;}
#about .content h2 span{color: #203561; font-weight: 400;}
/* #about .content .p1{margin: 20px 0 10px; color: #203561; font-size: 18px; font-weight: 500;}  */
#about .content h3{font-weight: 600; color: #434341; font-size: 18px; margin-top: 10px; line-height: 25px;}
.projectFactsWrap{
  gap: 40px;
  display: flex;
  margin-top: 30px;
  flex-direction: row;
  flex-wrap: wrap;
}
.projectFactsWrap .item{
  text-align: center;
}
.projectFactsWrap .item p.number{
  font-size: 40px;
  color: #203561;
  padding: 0;
  font-weight: bold;
}
.projectFactsWrap .item p{
  color: #434341;
  font-size: 18px;
  margin: 0;
}



/* project */
#project{padding: 20px 0 50px;}
#project h2{color: #434341; font-size: 45px; font-weight: 700; text-align: center; margin-bottom: 50px;}
#project h2 span{color: #203561; font-weight: 400;}
#project .row{row-gap: 30px;}
#project .projectinr{box-shadow: 0 0 10px rgba(0, 0, 0, 0.253); overflow: hidden; border-radius: 15px; height: 100%; margin-right: 20px;}
#project .projectinr .img{overflow: hidden;}
#project .projectinr .img img{transition: .5s;}
#project .projectinr:hover .img img{transform: scale(1.1); }
#project .projectinr .content{padding: 20px;}
#project .projectinr .content h5{color: #203561;}
#project .projectinr .content h4{color: #434341;}
#project .projectinr .content p{color: #434341; font-size: 15px; margin: 15px 0;}
#project .projectinr .content  p i{color: #203561; font-size: 18px;}
#project .projectinr .content ul{justify-content: space-between; align-items: center;}
#project .projectinr .content ul li span{color: #434341; font-size: 16px; font-weight: 500;}
#project .projectinr .content ul li span i{color: #203561; font-size: 18px;}
#project .projectinr .content ul li .view{
  display: inline-block; padding: 8px 20px; border-radius: 100px; color: #fff; font-size: 16px; margin-top: 20px;
  background: rgb(32 53 97); 
  background: linear-gradient(90deg, rgb(32 53 97) 0%, rgb(74, 74, 74) 100%);
}
#project .owl-carousel .owl-stage-outer{padding: 10px;}



/* choose */
/* #choose{background-image: url(../images/choose.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;} */
#choose .choosemn{padding: 30px 0 50px;}
#choose .content{padding: 30px;}
#choose .img h3{font-size: 33px; font-weight: 700; color: #434341; margin-bottom: 20px;}
#choose .img h3 span{font-weight: 400; color: #203561; font-size: 42px;}
#choose .img h4{font-size:27px; font-weight: 400; color: #434341;}

#choose .content .p1{font-size: 16px; font-weight: 500; color: #434341; margin-bottom: 20px; }
#choose .content .chooseul li{margin-top: 20px;}
#choose .content .chooseul li ul{gap: 30px;}
#choose .content ul li span{font-size: 50px; color: #203561;}
#choose .content ul li h3{color: #434341; margin-bottom: 10px;}
#choose .content ul li p{color: gray; font-size: 16px;}





/* contact */
#contact{padding: 60px 0px;}
#contact .row{row-gap: 30px;}
#contact .location h2{font-size: 40px; font-weight: 700; color: #434341;}
#contact .location h2 span{font-weight: 400; color: #203561;}
#contact .location p{font-size: 16px; color: grey; margin-bottom: 30px;}
#contact .location ul li a{color: #000; font-size: 13px; font-weight: 500;}
#contact .location ul li{transition: .5s; padding: 15px 20px; border-radius: 20px; height: 90px; margin-bottom: 20px; background-color: #e7e7e7; font-size: 20px; color: #203561;}
#contact .location .Contact{flex-wrap: wrap; gap: 4%;}
#contact .location .Contact li:first-child{width: 100%;}
#contact .location .Contact li:nth-child(2){width: 52%;}
#contact .location .Contact li:nth-child(3){width: 44%;}
#contact .location ul li:hover{background-color: #203561;}
#contact .location ul li:hover a, #contact .location ul li:hover{color: #fff;}
#contact .location .map iframe{border-radius: 20px;}
#contact form{background-color: #434341; padding: 30px 15px; border-radius: 30px; max-width: 100%; margin: auto;}
#contact form .form-control, #contact form .form-select{border: none; border-bottom: 1px solid #ffffff; background-color: #20356100; border-radius: 0px; color: lightgray;}
#contact form .label{color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 10px;}
#contact form .form-control:focus, #contact form .form-select:focus{box-shadow: none; border-color: #1f1a17;}
#contact form .form-control::placeholder, #contact form .form-select::placeholder{color: lightgray;}
#contact form .btn{background-color: #dbdbdb; color: #203561; width: 100%; font-weight: 500;}

/* testimonaiol */

#testimonaiol{padding: 50px 0px; position: relative; overflow: hidden;} 
#testimonaiol .imgs{top: 0; left: 46px; position: absolute; z-index: -1;}
#testimonaiol .owl-carousel .owl-stage-outer {border-radius: 30px;}
#testimonaiol .relative{position: relative;}
#testimonaiol .testimona-inr{background-color: #f5f9f8; padding: 20px 110px; border-radius: 40px;}
#testimonaiol .imgsc .img1{background-color: #434341; border-radius: 30px;}
#testimonaiol .imgsc .img2{position: absolute; left: 0px; bottom: 0px; width: 354px; z-index: 99; border-radius: 30px; -webkit-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.53);
  -moz-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.53);
  box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.53);}
#testimonaiol .content .imgss img{width: 100px; position: absolute; right: 69px;}
#testimonaiol .content h5{font-size: 25px; color: #203561;}
#testimonaiol .content h3{font-size: 36px; color: #434341; margin-bottom: 20px;}
#testimonaiol .content .test-text{font-size: 18px; max-width: 561px; margin-bottom: 25px;}
#testimonaiol .content .text-inso li{color: #203561;}
#testimonaiol .content .text-inso .info{font-size: 18px; font-weight: 500;}
#testimonaiol .owl-carousel .owl-nav .owl-next{position: absolute;
  left: 61px;
  bottom: 179px;
  font-size: 32px;
  height: 35px;
  width: 35px;
  background: #203561; color: #fff;
  text-align: center;
  line-height: 12px;
  border-radius: 50px;
}
#testimonaiol .owl-carousel .owl-nav .owl-next span{    position: absolute;
  top: 7px;
  left: 12px;}

  #testimonaiol .owl-carousel .owl-nav .owl-prev{position: absolute;
    left:2px;
    bottom: 179px;
    font-size: 32px;
    height: 35px;
    width: 35px;
    background: #203561; color: #fff;
    text-align: center;
    line-height: 12px;
    border-radius: 50px;
  }
#testimonaiol .owl-carousel .owl-nav .owl-prev span{position: absolute; top: 7px; left: 12px;}
#testimonaiol .owl-theme .owl-dots .owl-dot{display: none;}  



/* new-later */

#new-later{padding: 120px 0px; background-color: #181818; position: relative;}
#new-later .imgsc{position: absolute; bottom: 0px;}
#new-later .content h2{font-size: 30px; color: #fff;}
#new-later .content a{display: inline-block; color: #fff; font-size: 21px; font-weight: 600; padding: 10px 30px; border-radius: 100px;
  margin-top: 15px;
  background: rgb(32 53 97); 
  background: linear-gradient(90deg, rgb(32 53 97) 0%, rgb(74, 74, 74) 100%);}
#new-later .content .new-text{color: #ac2f39; margin-bottom:20px; font-size: 18px; font-weight: 500;}
#new-later .content .form-control{background-color: transparent; border: 1px solid #fff; color: #fff; padding: 15px 120px 15px 15px; width: 401px; box-shadow: none;}
#new-later .content .form-control::placeholder{color: #fff;}
#new-later .content .btnn{   width: 113px;
  background-color: #203561;
  border-radius: 6px;
  font-weight: 500;
  color: #fff;
  border: none; margin-left: -125px;
  height: 46px;
  margin-top: 5px;
}


    /* footer */

    footer{background-image: url(../images/pattern.webp); background-repeat: no-repeat; background-size: auto; background-position: bottom;     --tw-bg-opacity: 2.1; background-color: rgb(238 238 238/var(--tw-bg-opacity)); padding: 70px 0px 30px;}
    footer .row{row-gap: 20px;}
    footer .footermn .footerbox .footerinr .imgsc img{width: 38%;}
    footer .footermn .footerbox .footerinr .imgsc .imga:hover{padding-left: 0px;}
    footer .footermn .footerbox .footerinr .lorem{width: 329px; display: inline-block;}
    footer .footermn .footerbox .footerinr .lorem:hover{padding: 0px; color: #203561;}
    footer .footermn .footerbox .footerinr li{color: #000; text-align: initial; margin-bottom: 11px; line-height: 24px; font-weight: 600; font-size: 18px;}
    footer .footermn .footerbox .footerinr ul li p{font-size: 16px; color: gray; font-weight: 500;}
    footer .footermn .footerbox .footerinr li a{ transition: .5s; -o-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; font-size: 14px; font-weight: 400; line-height: 24px; color: #000;}
    footer .footermn .footerbox .footerinr li a:hover{color: #203561; }
    footer .footermn .footerbox .footerinr li{color: #203561; font-size: 20px;}
    footer .footermn .footerbox .footerinr .infeoo .iccon a{height: 35px; width: 35px; display: inline-block; border-radius: 50px; text-align: center; line-height: 35px; color: #fff; background: rgb(32 53 97); 
      background: linear-gradient(90deg, rgb(32 53 97) 0%, rgb(74, 74, 74) 100%);}
  
    footer .footerbootem{padding-top: 30px;}
    footer .footerbootem .footerbootemmn .iconin li a img{width: 35px; height: 35px;}
    footer .footerbootem h2{color: #000000; font-size: 16px; font-weight: 400;}

    footer .gdi{text-align: center; border-top: 1px solid #afafaf; padding-top: 20px; margin-top: 30px;}
    footer .gdi a img{width: 20%; margin: auto; background: rgb(32 53 97); padding: 0 15px 8px; border-radius: 100px; 
      background: linear-gradient(90deg, rgb(32 53 97) 0%, rgb(74, 74, 74) 100%);}




      /* quickcontact */
.quickcontact {
  width: 40px;
  position: fixed;
  top: 77%;
  right: 15px;
  z-index: 102;
}


/* modal */
.modal .modal-title{color: #203561;}
.modal .close{color: #203561; font-size: 25px; background-color: transparent; border: none;}
.modal .modal-header{border-color: #203561;}
.modal form{row-gap: 20px;}
.modal .modal-content{background-color: #ffffffd4; padding: 15px; border-radius: 30px;}
.modal form .form-control, .modal form .form-select{border: none; border-bottom: 1px solid #000000; background-color: #20356100; border-radius: 0px; color: #000000;}
.modal form .label{color: #000000; font-size: 16px; font-weight: 600; margin-bottom: 10px;}
.modal form .form-control:focus, .modal form .form-select:focus{box-shadow: none; border-color: #1f1a17;}
.modal form .form-control::placeholder, .modal form .form-select::placeholder{color: #000000;}
.modal form .btn{background-color: #434341; color: #fff; width: 100%; font-weight: 500;}


/* ===========================
          iner page
============================= */


/* heading */
#heading{background-image: url(../images/about-heading.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed;}
#heading .headingmn{padding: 180px 0 140px; }
#heading .headingmn .content{text-align: center; width: 60%; background-color: #ffffffa6; padding: 50px; margin: auto; border-radius: 1000px;}
#heading .headingmn .content span{color: #000000; font-size: 18px; font-weight: 500;}
#heading .headingmn .content h2{font-size: 50px; color: #434341; margin: 15px 0 20px; font-weight: 700;}
#heading .headingmn .content h2 span{font-weight: 400; color: #203561;  font-size: 50px;}
#heading .headingmn .content p{font-size: 17px; color: #000000; font-weight: 500;}



/* about-page */
#about-page{padding: 50px 0;}
#about-page .content h2{color: #434341; font-size: 40px; font-weight: 700;}
#about-page .content h2 span{color: #203561; font-weight: 400;}
/* #about-page .content .p1{margin: 20px 0 10px; color: #203561; font-size: 18px; font-weight: 500;}  */
#about-page .content h3{font-weight: 400; color: #434341; font-size: 16px; margin-top: 10px;}
.projectFactsWrap{
  gap: 40px;
  display: flex;
  margin-top: 30px;
  flex-direction: row;
  flex-wrap: wrap;
}
.projectFactsWrap .item{
  text-align: center;
}
.projectFactsWrap .item p.number{
  font-size: 40px;
  color: #203561;
  padding: 0;
  font-weight: bold;
}
.projectFactsWrap .item p{
  color: #434341;
  font-size: 18px;
  margin: 0;
}


/* project-page */
#project-page{padding: 70px 0 ;}
#project-page .row{row-gap: 30px;}
#project-page .projectinr{box-shadow: 0 0 20px rgba(0, 0, 0, 0.253); overflow: hidden; border-radius: 15px; height: 100%;}
#project-page .projectinr .img{overflow: hidden;}
#project-page .projectinr .img img{transition: .5s;}
#project-page .projectinr:hover .img img{transform: scale(1.1); }
#project-page .projectinr .content{padding: 20px;}
#project-page .projectinr .content h5{color: #203561;}
#project-page .projectinr .content h4{color: #434341;}
#project-page .projectinr .content p{color: #434341; font-size: 15px; margin: 15px 0;}
#project-page .projectinr .content  p i{color: #203561; font-size: 18px;}
#project-page .projectinr .content ul{justify-content: space-between; align-items: center;}
#project-page .projectinr .content ul li span{color: #434341; font-size: 16px; font-weight: 500;}
#project-page .projectinr .content ul li span i{color: #203561; font-size: 18px;}
#project-page .projectinr .content ul li .view{ margin-top: 20px;
  background: rgb(32 53 97); display: inline-block; padding: 8px 20px; border-radius: 100px; color: #fff; font-size: 16px;
  background: linear-gradient(90deg, rgb(32 53 97) 0%, rgb(74, 74, 74) 100%);
}



/* gallery */

#gallery {padding: 50px 0px;}

@media screen and (min-width: 991px) {
  #gallery { 
    padding: 50px 0px;
  }
}

.img-wrapper {
  position: relative;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 11px;
}
.img-wrapper img {
  width: 100%;
}

.img-overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.img-overlay i {
  color: #fff;
  font-size: 3em;
}

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#overlay img {
  margin: 0;
  width: 80%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 5%;
}
@media screen and (min-width: 768px) {
  #overlay img {
    width: 60%;
  }
}
@media screen and (min-width: 1200px) {
  #overlay img {
    width: 50%;
  }
}

#nextButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
}
#nextButton:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #nextButton {
    font-size: 3em;
  }
}

#prevButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
}
#prevButton:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #prevButton {
    font-size: 3em;
  }
}

#exitButton {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
  position: absolute;
  top: 15px;
  right: 15px;
}
#exitButton:hover {
  opacity: 0.7;
}
@media screen and (min-width: 768px) {
  #exitButton {
    font-size: 3em;
  }
}




/* career */
#career{padding: 60px 0px;}
#career .contactmn{row-gap: 40px;}
#career .form{row-gap: 15px; max-width: 100%; margin: auto;}
#career .location h2{font-size: 40px; font-weight: 700; color: #434341;}
#career .location h2 span{font-weight: 400; color: #203561;}
#career .location p{font-size: 18px; color: grey; margin-bottom: 20px;}
#career .location ul{margin-left: 20px;}
#career .img img{border-radius: 40px;}
#career .location ul li{color: #203561; font-size: 25px;}
#career .location ul li span{font-size: 16px; color: grey; font-weight: 500;}
#career form{background-color: #434341; padding: 30px 15px; border-radius: 30px;}
#career form .form-control, #career form .form-select{border: none; border-bottom: 1px solid #ffffff; background-color: #20356100; border-radius: 0px; color: lightgray;}
#career form .label{color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 10px;}
#career form .form-control:focus, #career form .form-select:focus{box-shadow: none; border-color: #1f1a17;}
#career form .form-control::placeholder, #career form .form-select::placeholder{color: lightgray;}
#career form .btn{background-color: #dbdbdb; color: #203561; width: 100%; font-weight: 500;}



/* thanks */
#thanks{padding: 70px 0;}
#thanks .content{text-align: center; border: 6px solid #434341; padding: 100px 0px;}
#thanks .content h1{font-size: 55px; color: #434341; font-weight: bold;}
#thanks .content p{font-size: 18px; font-weight: 500; margin: 20px 0; color: grey;}
#thanks .content a{display: inline-block; padding: 10px 60px; color: #fff; border-radius: 100px; font-size: 18px;  font-weight: 500;
  background: rgb(32 53 97); 
  background: linear-gradient(90deg, rgb(32 53 97) 0%, rgb(74, 74, 74) 100%);
}



/* details */
#details{padding: 70px 0;}
#details .row{row-gap: 40px;}
#details .content h4{color: #203561; font-size: 26px; margin-bottom: 10px;}
#details .content p{color: grey; font-size: 16px; font-weight: 500;}
#details .content p i{font-size: 20px; color: #203561;}
#details .description h3{color: #203561; font-size: 26px; margin-bottom: 10px;}
#details .description p{color: grey; font-size: 16px; font-weight: 500;}
#details h2{color: #203561; font-size: 30px; margin-bottom: 10px; margin: 40px 0 15px;}
#details ul{columns: 4; margin-bottom: 40px;}
#details ul li{font-size: 16px; color: grey; font-weight: 500; margin-bottom: 10px;}
#details ul li i{color: #203561; font-size: 20px;}

.wrapper {
  margin: 0 auto;
  /* width: 80%; */
  text-align: center;
}

.image-gallery {
  margin: 0 auto;
  display: table;
}

.primary,
.thumbnails {
  display: table-cell;
}

.thumbnails {
  width: 300px;

}

.primary {
  width: 100%;
  height: 400px;
  /* background-color: #cccccc; */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


.thumbnail .thumbnail-image, .selected .thumbnail-image {
  border: 2px solid transparent;
}
.thumbnail:hover .thumbnail-image, .selected .thumbnail-image{
  border-color: #203561;
}


.thumbnail-image {
  width: 150px;
  /* height: 100px; */
  margin: 15px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border: 4px solid transparent;
}