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


body{font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}


.no-scroll-y {
	overflow-y: hidden;
}

/* Preloader */
.ctn-preloader {
	align-items: center;
    cursor: none;
	display: flex;
    height: 100%;
    justify-content: center;
	position: fixed;
	left: 0;
    top: 0;
	width: 100%;
    z-index: 900;
}

.ctn-preloader .animation-preloader {
	position: absolute;
  z-index: 100;
}


/* Texto cargando */
.ctn-preloader .animation-preloader .txt-loading {
  font: bold 50px 'Montserrat', sans-serif;
	text-align: center;
	user-select: none;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
  animation: letters-loading 4s infinite;
  color: #000000;
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: rotateY(-90deg);
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading {
	color: rgba(0, 0, 0, 0.2);
	position: relative;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
  animation-delay: 0.2s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
  animation-delay: 0.4s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
  animation-delay: 0.6s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
  animation-delay: 0.8s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
  animation-delay: 1s;
}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
  animation-delay: 1.2s;
}

.ctn-preloader .loader-section {
  background-color: #ffffff;
  height: 100%;
	position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.ctn-preloader .loader-section.section-left {
  left: 0;
}

.ctn-preloader .loader-section.section-right {
  right: 0;
}

/* Efecto de fade en la animación de cargando */
.loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}

/* Efecto de cortina */
.loaded .loader-section.section-left {
  transform: translateX(-101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}

.loaded .loader-section.section-right {
  transform: translateX(101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1.000);
}

.spinner{text-align: center;}
.spinner img{
  width: 300px;
  margin: auto;
}


.spinner img{
  animation: img-loading 4s infinite; 
  opacity: 0; 
  transform: rotatex(-90deg);
}

/* Animación de las letras cargando del preloader */
@keyframes letters-loading {
  0%,
  75%,
  100% {
  	opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* img-loading */
@keyframes img-loading {
  0%,
  75%,
  100% {
  	opacity: 0;
    transform: rotatex(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotatex(0deg);
  }
}




header .header-bottom{padding: 20px 0px; background-color: #fff;} 
header .header-bottom .offcanvas-body{align-items: center;}
header .header-bottom .navbar{padding: 0px;}
header .header-bottom .navbar .navbar-brand{width:22%; padding: 0px;}
header .header-bottom .navbar .navbar-nav{align-items: center; justify-content: center; gap: 5px;}
header .header-bottom .navbar .navbar-nav .nav-link{font: 400 14px / 20px "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; color: #000; font-size: 14px; font-weight: 400; position: relative; transition: .5s;}
header .header-bottom .navbar .navbar-nav .nav-link:hover{color: #f7be16}
header .header-bottom .navbar .navbar-nav .nav-link::before{position: absolute; content: ''; width: 0px; height: 2px; background-color: #f7be16; bottom: 7px; transition: .5s; z-index: 1;}
header .header-bottom .navbar .navbar-nav .nav-link:hover::before{width: 100%;}
header .header-bottom .navbar .navbar-toggler{color: #f7be16; box-shadow: none; border: transparent; border-radius:0px;}
header .header-bottom .navbar .offcanvas{width: 280px; height:100vh;}

header .dropdown-menu{border-radius: 0; border: 0; padding: 15px 0; box-shadow: 0 0 5px #0000002f;}
header .dropdown-menu li .dropdown-item{padding: 6px 20px; font-size: 18px; font-weight: 500; font-family: initial;}
header .dropdown-menu li .dropdown-item:hover{background-color: #dc0100; color: #fff;}

header .header-bottom .enquiry-info li a{padding: 11px 18px; border-radius: 3px; background-color: #f7be16; border: 1px solid #f7be16; color: #fff; transition: .5s;}
header .header-bottom .enquiry-info li a:hover{background-color: transparent; color: #f7be16;}

.sticky .header-bottom .navbar .navbar-nav .nav-link{color: #000;}
.sticky .header-bottom{background-color: #fff; box-shadow: 0px 0px 20px #0000003b; padding: 10px 0px !important;}
.sticky{left: 0; right: 0; z-index: 999; position: fixed !important; top:0px; animation: slideDown .5s ease-out;}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(10);
  }
}
header .heaberbooyem .offcanvas-title{color: #020202; }


/* slider */

#slider{position: relative;}
#slider .owl-item{background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 100px 0px; position: relative; z-index: 1;}
#slider .owl-item::before{content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: .4; z-index: -1;}
#slider .owl-carousel button.owl-dot{display: none;} 
#slider .content h2{font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;     letter-spacing: 0; line-height: 1.2; text-transform: uppercase; font-size: 90px; color: #fff; font-weight: bold;}
#slider .content h3{letter-spacing: 0; line-height: 1.2; text-transform: uppercase; font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 85px; color: #fff; font-weight: 300;}

#slider .content .btn{padding:12px 50px; display:inline-block; background-color: #f7be16; border: 1px solid #f7be16; color: #fff; margin-top: 20px;}


/* about */

#about{padding: 70px 0; background-color: #fff; overflow: hidden;}
#about .row{row-gap: 20px; align-items: center;}
#about .imgs{position: relative; z-index: 1;}
#about .imgs::before{content: ''; position: absolute; top: -53px; bottom: -53px; left: -100vw; right: 70px; background-color: #f5f6fa; z-index: -1;}
#about .content{padding-left: 20px;}
#about .content .heading{position: relative; padding-left: 25px;}
#about .content .info{position: absolute; top: 0px; left: 0px; font-weight: 900; line-height: .51em; opacity: .06; font-size: 77px;}
#about .content h2{color: #000000; font-size: 33px; font-weight: bold; margin: 10px 0 30px;}
#about .content p{color: #74757f; font-size: 18px; margin-bottom: 20px; font-weight: 300; line-height: 24px;}
#about .content a{color: #ffffff; display: inline-block; font-size: 18px; font-weight: bold; transition: .5s; margin-top: 30px; border-radius: 5px; background-color: #f7be16; border: 1px solid #f7be16; padding: 13px 50px;}
#about .content a:hover{background-color:transparent; color: #f7be16;}

/* service */

#service{padding: 50px 0px 80px; background-image: linear-gradient(24deg, #262a5e, #fa9046);}

 #service .heading{position: relative; text-align: center;} 
 #service .heading .info{position: absolute; top: 0px; left: 0px; font-weight: 900; line-height: .51em; opacity: .08; font-size: 65px;
right: 256px; text-align: center; bottom: 0px; color: #Fff;}
 #service .heading h2{color: #ffffff; font-size: 35px; font-weight: bold; margin: 10px 0 30px;}
 #service .text{color: #fff; text-align: center; width: 49%; margin: auto;}
 /* #service .bg{background-color: #fff; margin-top: 50px; border: 1px solid #aeb1be; border-radius: 6px;}
 #service .bg .iner.iner-1{border: none;}
 #service .bg .iner{text-align: center; padding: 60px 36px 30px; border-right: 1px solid #dadada;}
 #service .bg .iner .icon i{font-size: 35px; color: #f7be16; margin-bottom: 20px;}
 #service .bg .iner h5{font-weight: bold; font-size: 20px; margin-bottom: 22px;}
 #service .bg .iner .content li{margin-bottom: 15px; color: #74757f;}
 #service .bg .iner .btn{padding: 7px 45px; display: inline-block; background-color: #f7be16; border: 1px solid #f7be16; color: #fff; transition: .5s; margin-top: 15px;}
 #service .bg .iner .btn:hover{background-color: transparent; color: #f7be16;} */

 #service .bg .iner{background-color: #fff; margin-top: 60px;}
 #service .bg .iner h5{margin: 5px 0px; padding: 15px; font-size: 17px; color: #000;}

 /* why-choose */

 #why-choose {overflow: hidden; padding: 0px 0px 0px 0px;}
 #why-choose .imgs img{width: 100%; height: 500px; object-fit: cover; object-position: 100% center;}
 #why-choose .row{align-items: center;}
 #why-choose .col-in{padding: 0;}
 #why-choose .content{padding-left: 80px;}
 #why-choose h6{font-size: 20px; font-weight: 300; margin-bottom: 20px;}
 #why-choose .heading{position: relative; width: 70%;} 
 #why-choose .heading .info{position: absolute; top: 0px; left: 0px; font-weight: 900; line-height: .51em; opacity: .08; font-size: 65px;
right: 256px; bottom: 0px; color: #000;}
 #why-choose .heading h2{color: #000; font-size: 35px; font-weight: bold; margin: 10px 15px 30px; line-height: 45px;}
 #why-choose .text{color: #74757f; width: 82%;}
 #why-choose .btn{padding: 7px 45px; display: inline-block; background-color: #f7be16; border: 1px solid #f7be16; color: #fff; transition: .5s; margin-top: 15px;}
 #why-choose .btn:hover{background-color: transparent; color: #f7be16;}

 /* progras-bar */

 #progras-bar{overflow: hidden;}
 #progras-bar .inr{background-image: -webkit-linear-gradient(24deg, #262a5e, #fa9046);
  background-image: linear-gradient(24deg, #262a5e, #fa9046);}
 #progras-bar .inr .content{padding: 60px 105px;}
 #progras-bar .inr .heading{position: relative; width: 70%;} 
 #progras-bar .inr .heading .info{position: absolute; top: 0px; left: 0px; font-weight: 900; line-height: .51em; opacity: .08; font-size: 65px;
right: 256px; bottom: 0px; color: #fff;}
 #progras-bar .inr .heading h2{color: #fff; font-size: 35px; font-weight: bold; margin: 10px 15px 30px; line-height: 45px;}
 #progras-bar .inr .text{color: #fff;}

 /* #progras-bar .iner{background-image: url(../images/gyanshala/map.png); padding: 50px 0px 10px; background-repeat: no-repeat;
  top: 10px; background-position-y: 337px; background-position-x: -76px;} */
  
 #progras-bar .iner .img-map{position: relative;}
 #progras-bar .iner .img-map img{margin-left: -160px; height: 299px; opacity: .3;}
 #progras-bar .progress_bar{margin-top: 50px;}
  #progras-bar .ce_ixelgen_progress_bar {
    margin: 0 auto;
    position: absolute;
    top: -10px;
    width: 100%;

 }
  #progras-bar .ce_ixelgen_progress_bar .progress_bar_item {
   margin-bottom: 2rem;
 }
  #progras-bar .ce_ixelgen_progress_bar .item_label,
  #progras-bar .ce_ixelgen_progress_bar .item_value {
   font-size: 17px;
   font-weight: 600;
   color: #fff;
   margin-bottom: 0.5rem;
 }
  #progras-bar .ce_ixelgen_progress_bar .item_value {
   font-weight: 400;
 }
  #progras-bar .ce_ixelgen_progress_bar .item_bar {
   position: relative;
   height: 4px;
   background: #f5f6fa4d;
   width: 100%;
   border-radius: 4px;
 }
  #progras-bar .ce_ixelgen_progress_bar .item_bar .progress {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 0;
   height: 4px;
   background: #f7be16;
   margin: 0;
   border-radius: 4px;
   transition: width 100ms ease;
 }

 #progras-bar .btn{padding: 10px 45px; display: inline-block; background-color: #f7be16; border: 1px solid #f7be16; color: #000; transition: .5s; margin-top: 15px;}
 #progras-bar .btn:hover{background-color: transparent; color: #f7be16;}
 #progras-bar .imgs img{width: 100%; height: 713px; object-fit: cover; object-position: top center;}

 /*  */
 #faqs{padding: 70px 0px;}
 #faqs h3{text-align: center; margin-bottom: 60px;}
 #faqs .accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed{box-shadow: none;}

 /* gyanshala */

#gyanshala{padding: 10px 0px;}
#gyanshala .heading{position: relative; text-align: center;} 
#gyanshala .heading .info{position: absolute; top: 0px; left: -136px; font-weight: 900; line-height: .51em; opacity: .08; font-size: 65px;
right: 256px; text-align: center; bottom: 0px; color: #000;}
#gyanshala .heading h2{color: #000; font-size: 37px; font-weight: bold; margin: 10px 0 100px;}
#gyanshala .iner{background-color: #fff; border-radius: 10px; position: relative; padding: 50px 20px 0; text-align: center; overflow: hidden; margin: 10px;
  height: 300px; border: 1px solid #cccccc; transition: .5s;}
#gyanshala .iner:hover{transition: .5s; border: transparent; transform: translateY(5px); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.178);}
#gyanshala .iner .icon{width: 85px; height: 85px; text-align: center; line-height: 105px; margin: auto; border: 1px solid #f7be16; border-radius: 5px;}
#gyanshala .iner .icon i{font-size: 50px; color: #f7be16;}
#gyanshala .iner h3{font-size: 22px; font-weight: bold; margin: 20px 0px 10px;}

/* our-team */

#our-team{padding: 10px 0px 30px;}
#our-team .heading{position: relative;} 
#our-team .heading .info{position: absolute; top: 3px; left: 0px; font-weight: 900; line-height: .51em; opacity: .08; font-size: 65px;
right: 138px; bottom: 0px; color: #000; text-align: center;}
#our-team .heading h2{color: #000; font-size: 35px; font-weight: bold; margin: 10px 15px 50px; line-height: 45px; text-align: center;}
#our-team .iner{text-align: center;}
#our-team .iner .imgs{overflow: hidden;}
#our-team .iner .imgs img{transition: .5s;}
#our-team .iner .imgs:hover img{transform: scale(1.1);}
#our-team .iner h5{font-size: 21px; font-weight: bold; margin: 20px 0px 3px 0px;}
#our-team .iner h6{font-size: 15px;}
#our-team .row{row-gap: 25px;}


/* testimonials */

#testimonials{padding: 60px 0px 40px; background-color: #f5f6fa;}
#testimonials .row{row-gap: 40px;}

#testimonials .heading{position: relative; text-align: center;} 
#testimonials .heading .info{position: absolute; top: 0px; left: 0px; font-weight: 900; line-height: .51em; opacity: .08; font-size: 65px;
right: 256px; text-align: center; bottom: 0px; color: #000;}
 #testimonials .heading h2{color: #000; font-size: 37px; font-weight: bold; margin: 10px 0 30px;}

#testimonials .iner{transition: all .5s; padding: 20px 4px; position: relative;}
#testimonials .iner::before{border-left: 62px solid transparent; border-top: 50px solid #fff; position: absolute; content: ''; z-index: 2; bottom: -31px; left: 30px;}
#testimonials .iner .text{font-size: 14px; color: #404d60; line-height: 24px; font-weight: 300}
#testimonials .imag{margin-top: 30px;}
#testimonials .imag li img{width: 60px; border-radius: 50px;}
#testimonials .imag li H6{font-size: 14px; font-weight: 700; color: #404d60; margin-bottom: 0px;}
#testimonials .imag li span{font-size: 14px; font-weight: 700; color: #df595b;}
#testimonials .owl-theme .owl-dots .owl-dot{display: none;}
#testimonials h5{font-size: 17px; font-weight: bold; margin-top: 15px; margin-bottom: 3px;}

/* contact */

#contact{background-color: #f5f6fa; overflow: hidden;} 
#contact .iner{padding: 60px 105px;}
#contact .iner .heading{position: relative; width: 70%;} 
#contact .iner .heading .info{position: absolute; top: -20px; left: -7px; font-weight: 900; line-height: .51em; opacity: .08; font-size: 102px;
  right: 256px; bottom: 0px; color: #000;}
#contact .iner .heading h2{color: #000; font-size: 35px; font-weight: bold; margin: 10px 15px 30px; line-height: 45px;}
#contact .form-control{padding: 20px 20px; background-color: #fff; border: 1px solid #b4b4b4; box-shadow: none; font-size: 16px; margin-bottom: 30px;}
#contact .btn{padding: 10px 45px; display: inline-block; background-color: #f7be16; border: 1px solid #f7be16; color: #000; transition: .5s; margin-top: 15px;}
#contact .btn:hover{background-color: transparent; color: #f7be16;}

/* footer */

footer{padding: 50px 0px 20px; background-image: #fff;}
footer .footer-top h3{font-size: 18px; font-weight: bold; margin-bottom: 15px; color: #f7be16;}
footer .footer-top h3 img{width: 80%;}
footer .footer-top .text{font-size: 16px; width: 82%; color: #000; text-align: justify; margin-bottom: 20px;}
footer .footer-top .icon li a{width: 40px; height: 40px; display: inline-block; border-radius: 50px; color: #000; text-align: center; line-height: 40px;}
footer .footer-top .info li{color: #000; margin-bottom: 10px; font-size: 16px;} 
footer .footer-top .info li i{font-size: 22px; color: #f7be16;}
footer .footer-top .info li a{color: #000; font-size: 16px; display: inline-block;}

.logoicon{border-top: 1px solid #bebebe; margin-top: 27px; padding-top: 15px;}
.logoicon .imgsc{text-align: center;}
.logoicon .imgsc img {width: 244px; padding: 5px 20px 12px; display: inline-block; background-color: #dc0100; border-radius: 30px;}

/* model */


.modal .form-control {background-color: #fff; padding: 10px 10px; box-shadow: none; border: transparent;
border-radius: 2px; margin-bottom: 15px; font-size: 18px; border: 1px solid #acacac; font-size: 15px;}
.modal .btn {padding: 10px 30px; background-color: #f7be16; color: #000; border-radius: 4px; margin-top: 20px;}


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

/* about start */

#about-header{padding: 40px 0px; background-color: #fff;}

#about-bg{background-image: url(../images/gyanshala/about-bg.jpg); background-size: cover; background-repeat: no-repeat; padding: 80px 0px; }
#about-bg .heading{position: relative;} 
#about-bg .heading .info{position: absolute; top: -17px; left: -34px; font-weight: 900; line-height: .51em; opacity: .08; font-size: 115px; bottom: 0px;
color: #fff;}
#about-bg .heading h2 {color: #fff; font-size: 45px; font-weight: bold; margin: 10px 15px 50px; line-height: 45px; text-transform: uppercase;
font-weight: bold;}
#about-bg p, #about-bg p a{color: #fff;}

/* contact-info */

#contact-info{padding: 50px 0px;}
#contact-info .row{row-gap: 25px;}
#contact-info .iner{text-align: center; padding: 0px 30px; position: relative;}
#contact-info .iner.iner-1::before{position: absolute; content: ''; height: 90px; right: 5px; width: 1px; background-color: #d3d5db;}
#contact-info .iner .icon{color: #f7be16; margin-bottom: 15px; font-size: 20px;}
#contact-info .iner p, #contact-info .iner p a{color: #000; transition: .5s;}

/* blog */
#blog{padding: 60px 0;}
#blog h6{color: #ffa002; text-align: center;}
#blog .row{row-gap: 25px;}
#blog h2{text-align: center; font-weight: bold; font-size: 36px; color: #000; margin-bottom: 50px;}
#blog .inner img{box-shadow: 0px 0px 20px #00000034; border-radius: 20px; transition: .5s; height: 250px; object-fit: cover;}
#blog .inner:hover img{box-shadow: 10px 10px 0px #afafaf;}
#blog .inner p{color: #000; font-size: 16px; font-weight: 500; margin: 20px 0;}
#blog .inner p i{color: grey;}
#blog .inner h4 a{color: #000; font-size: 20px; transition: .5s;}
#blog .inner h4 a:hover{color: #dc0100;}
#blog .inner .read{display: inline-block; font-size: 16px; font-weight: 500; color: #dc0100; margin-top: 20px;}

#contact-info .iner p a:hover{color: #f7be16}

/* blog-detail */
#blog-detail{padding: 70px 0;}
#blog-detail .row{row-gap: 30px; justify-content: center;}
#blog-detail .img img{width: 100%;}
#blog-detail .content h5 a{color: #000; font-size: 22px; display: inline-block; margin-bottom: 10px;}
#blog-detail .content span{color: #6d6d6d; display: inline-block; margin: 15px 0; font-size: 15px;}
#blog-detail .content span i{color: #f7be16;}
#blog-detail .content p{color: #6d6d6d; font-size: 16px;}

#blog-detail .blog{background-color: #f7be1613; padding: 15px 30px 30px; border: 1px solid #f7be16; position: sticky; top: 100px;}
#blog-detail .blog h4{color: #f7be16; margin-bottom: 15px; text-align: center; font-size: 28px; font-weight: bold;}
#blog-detail .blog ul{list-style: none; background-color: #fff; border: 1px solid #e4e4e4; padding: 10px;}
#blog-detail .blog ul li{margin-bottom: 15px; align-items: center;}
#blog-detail .blog ul li:last-child{margin-bottom: 0;}
#blog-detail .blog a{color: #000; font-size: 13px; display: inline-block;}
#blog-detail .blog p{color: #6d6d6d; display: inline-block; font-size: 14px;}
#blog-detail .blog p i{color: #f7be16;}

/* study-jrmany */
#ytvideo iframe{height:760px;}
#study-jrmany{padding: 50px 0px;}
#study-jrmany .row{row-gap: 30px;}
#study-jrmany .imgs{overflow: hidden; position: sticky; top: 100px;}
#study-jrmany .imgs img{transition: .5s;}
#study-jrmany .imgs:hover img{transform: scale(1.1);}
#study-jrmany .text{text-align: justify;}
#study-jrmany h3{font-size: 22px;}

/* service-det */

#service-det{padding: 50px 0px;}
#service-det h3{font-size: 25px; font-weight: bold;}
#service-det .imgs{overflow: hidden; border-radius: 15px;}
#service-det .imgs img{transition: .5s;}
#service-det .imgs:hover img{transform: scale(1.2);}
#service-det .text{font-size: 18px; margin: 5px 0px 7px;}
#service-det .det-info li .text-1{margin-bottom: 5px;}
#service-det .det-info li .text-1.text-2{font-weight: bold;}
#service-det .content{padding: 20px 0px;}
#service-det .content h3{font-weight: 300;}
#service-det .content .text{font-size: 18px; margin-bottom: 15px;}
#service-det .content h4{margin-top: 15px;}
#service-det .content .info{margin-left: 20px;}
#service-det .content .info li{margin-bottom: 15px; font-size: 17px;}

/* gallery */

#gallery {padding: 40px 0px 70px; background-image: linear-gradient(24deg, #262a5e, #fa9046);}
#gallery .iner{margin-top:40px;}
.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: 80%;
}
}

#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;
}
}