/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  background-color: #f9f9fb;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Poppins', sans-serif;
  
  
  /* background: #656467; */
}

::selection {
  background: rgb(30, 20, 61)8;
  color: #fff;
}

::-moz-selection {
  background: rgb(30, 20, 61);
  color: #fff;
}

.section {
  padding-top: 30px;
  margin-top: 120px;
  
}

.section-heading {
  margin-bottom: 60px;
}

.section-heading h2 {
  font-size: 36px;
  font-weight: 600;
  text-transform: capitalize;
  margin: 20px 0;
  line-height: 44px;
}

.section-heading h2 em {
  color: rgb(30, 20, 61);
  font-style: normal;
}

.section-heading h6 {
  color: rgb(30, 20, 61);
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
}


.main-button a {
  display: inline-block;
  background-color: #fff;
  color: rgb(30, 20, 61);
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 25px;
  border-radius: 20px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: rgb(30, 20, 61);
  color: #fff;
}

.container {
  max-width: 90vw; /* Instead of a fixed max-width */
  width: 100%;
  /* padding-left: 2vw;
  padding-right: 2vw; */
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: rgb(30, 20, 61);
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: rgb(30, 20, 61);
  border-radius: 50%;
}

/* Initial state (hidden) */
.scroll-effect {
  
  opacity: 0;
  /* transform: translateY(20px); Moves element slightly downward */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  visibility: hidden; /* Ensures it doesn't affect layout */
  position: relative;

}

/* Visible state (triggered by JavaScript) */
.scroll-effect.scrolled {
  
  opacity: 1;
  visibility: visible;
}

.scroll-effect.fade-in{
  opacity: 1;
  transform: none;
  visibility: visible;
}
.scroll-effect-wrapper {
  margin-bottom: 50px; /* Add spacing around scroll-effect elements */
}

.scroll-effect-left {
  
  opacity: 0;
  transform: translateX(-100px); 
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  visibility: hidden; /* Ensures it doesn't affect layout */
  position: relative;
  
}
.scroll-effect-left.slide-left {
  opacity: 1;
  transform: translateX(0px);
  visibility: visible;
}


.scroll-effect-up {
  
  opacity: 0;
  transform: translateY(80px); 
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  visibility: hidden; /* Ensures it doesn't affect layout */
  position: relative;
  z-index: 1; /* Ensures it stays above */
  will-change: transform, opacity; /* Optimizes animation performance */

}
.scroll-effect-up.slide-up {
  opacity: 1;
  transform: translateY(0px);
  visibility: visible;
  
}

.scroll-effect-down {
  
  opacity: 0;
  transform: translateY(-80px); 
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  visibility: hidden; /* Ensures it doesn't affect layout */
  position: relative;
  z-index: 1; /* Ensures it stays above */
  will-change: transform, opacity; /* Optimizes animation performance */

}
.scroll-effect-down.slide-down {
  opacity: 1;
  transform: translateY(0px);
  visibility: visible;
}



.scroll-effect-right {
  
  opacity: 0;
  transform: translateX(80px); 
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  visibility: hidden; /* Ensures it doesn't affect layout */
  position: relative;
  z-index: 1; /* Ensures it stays above */
  will-change: transform, opacity; /* Optimizes animation performance */

}
.scroll-effect-right.slide-right {
  opacity: 1;
  transform: translateX(0px);
  visibility: visible;
}


/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: rgb(30, 20, 61) !important;
  border-radius: 0px 0px 25px 25px;
  height: 75px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
  padding-left: 0px;
  
}

.header-area {
  position: absolute;
  background-color: rgb(30, 20, 61) !important;
  /* background-color: transparent; */
  /* top: 25px; */
  height: 75px!important;
  left: 0;
  right: 0;
  z-index: 100;
  /* -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s; */
  display: inline;
}

.header-area .main-nav {
  background: transparent;
  display:flex;
 
  
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block;
  /* text-wrap: nowrap; */
}

.header-area .main-nav .logo h1 {
  font-size: 30px;
  text-transform: capitalize;
  color: #fff;
  font-weight: 600;
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid rgba(250, 250, 250, 0.3);
  
}

.header-area .main-nav .logo img {
  display:block;
  width: 170px;
  height: 50px;
  object-fit:contain;
  

}

.background-header .main-nav .logo,
.background-header .main-nav #search {
  margin-top: 18px;
}


.header-area .main-nav ul.nav {
  border-radius: 0px 0px 25px 25px;
  flex-basis: 100%;
  margin-right: 0px;
  justify-content: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  /* position: relative; */
  z-index: 999;
  padding-left: 10px;
  flex-wrap: nowrap;
  text-wrap: nowrap;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 5px;
  padding-right: 5px;
  height: 40px;
  line-height: 40px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  font-weight: 300;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #fff;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: .25px;
}

.background-header .main-nav .nav {margin-top: 20px;}

.background-header .main-nav .nav li {
  height: 80px;
  line-height: 80px;
}

.header-area .main-nav .nav li:hover a {
  opacity: 0.8;
}
.header-area .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  opacity: 1;
}

.background-header .main-nav .nav li:hover a {
  opacity: 0.8;
}
.background-header .main-nav .nav li a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.10);
  opacity: 1;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

.visible{
  display:inline !important;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 2px;
    padding-right: 2px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 10px;
    padding-right: 10px;
  }

}

@media (max-width: 767px) {
  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background-color: #f1f0fe;
  }
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 400;
    color: #1e1e1e;
    background-color: #f1f0fe;
     border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #ddd;
    background-color: #f1f0fe;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li:last-child,
  .header-area .main-nav .nav li:last-child {
    border-radius: 0px 0px 25px 25px;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: rgb(30, 20, 61)!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: transparent;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
    margin-top: 30px;
    
    
  }
  .logoimg{
    display: none;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  
}


.main-banner {
  position: relative; /* Ensures pseudo-element positioning works */
  background: linear-gradient(122deg, rgba(27, 18, 57, 1) 0%, rgba(40, 28, 78, 1) 49%, rgba(92, 73, 154, 1) 100%);
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 0px 10px 0px;
  overflow: hidden; /* Hides pseudo-element overflow if necessary */
  
}

.main-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-image: url(../images/edubg.png); */
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
  opacity: 0.25; /* Adjust opacity here */
  z-index: 0; /* Ensure it stays behind the content */
  
}
.main-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  
}

.main-banner * {
  position: relative; /* Keeps content above the pseudo-element */
  z-index: 1;
}

.main-banner .item-1 {
  background-image: url(../images/te/te1.jpg);
  
}

.main-banner .item-2 {
  background-image: url(../images/te/te2.jpg);
}

.main-banner .item-3 {
  background-image: url(../images/te/te3.jpg);
}

.main-banner .item-4 {
  background-image: url(../images/te/te4.jpg);
}

.main-banner .item-5 {
  background-image: url(../images/te/te5.jpg);
}
.main-banner .item {
  
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
  border-radius: 25px;
  padding: 100px ;
  margin-left: 100px;
  margin-top: 0px;
  height: 640px;
  
}
.main-banner .item::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0,0,0,0.3);
  border-radius: 25px;
}

.main-banner .item span.category {
  background-color: rgb(30, 20, 61);
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  padding: 5px 15px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 50px;
}

.main-banner .item h2 {
  
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 70px;
  width: 60%;
  margin-bottom: 40px;
  
}

.main-banner .item p {
  color: #fff;
  width: 65%;
  font-size: medium;
}

.main-banner .item .buttons {
  display: flex;
  margin-top:150px
}

.main-banner .item .buttons .main-button {
  margin-right: 30px;
}

.main-banner .item .buttons .main-button a {
  font-size: 14px;
  color: rgb(30, 20, 61);
  background-color: #fff;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 0px 25px;
  border-radius: 25px;
  font-weight: 500;
}

.main-banner .item .buttons .icon-button i {
  color: rgb(30, 20, 61);
  background-color: #fff;
  display: inline-block;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 16px;
}

.main-banner .item .buttons .icon-button a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.main-banner .owl-nav {
  position: absolute;
  max-width: 1320px;
  bottom: 23px;
  left: 0;
  text-align: right;
}

.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.main-banner .owl-nav .owl-prev i {
  position: absolute;
  bottom: 65px;
}

.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
}


.event-container{
  padding-top: 80px;
}
.acontainer h1 {
  margin: 0;
  font-size: 2em;
}

.acontainer p {
  font-size: 1.2em;
  margin-top: 5px;
}

/* Content Section */
.ahcontainer {
  width: 90%;
  max-width: 1200px;
  text-align: center;
  margin: 30px auto;
  background: linear-gradient(135deg, #f1f0f2, #f3f0f4); 
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1.2s ease-in-out;
}

.ahcontainer h2 {
  color: #434144;
  font-size: 2.5em;
  margin-bottom: 10px;
}

.ahcontainer p {
  color: #a6a1a1;
  font-size: 1.2em;
}

/* Section Container */
.acontainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    /* transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; */
}

.acontainer:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}

/* Titles */
.acontainer h3 {
  color: rgb(50, 33, 102);
  font-size: 1.8em;
  border-bottom: 3px solid rgb(50, 33, 102);
  padding-bottom: 8px;
  margin-bottom: 15px;
}

.acontainer p {
  text-align: justify;
  font-size: 1.1em;
  color: #555;
  line-height: 1.6;
}

.acontainer ul li{
  text-align: justify;
  font-size: 1.1em;
  color: #555;
  line-height: 1.6;
}

ul {
  list-style: none; /* Remove default bullets */
  padding-left: 20px; /* Add space for bullets */
}

/*ul li::before {
  content: "📌";  
  color: green;   
  font-size: 1.2em; 
  margin-right: 10px; 
}*/

/* Responsive Grid */
.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.grid-container .acontainer {
  flex: 1;
  min-width: 45%;
}
.section-image {
  width: 50%; /* Adjust image size */

  /* max-width: 250px; */
  border-radius: 10px;
  object-fit: cover;
  margin-right: 20px;
}

.left-image {
  flex-direction: row;
}

/* Right Image */
.right-image {
  flex-direction: row-reverse;
}
.text-content {
  flex: 1;
  padding: 0 20px;
}

/* Gallery Container */
.gallery-container {
  width: 90%;
  max-width: 1200px;
  margin: 40px auto;
  text-align: center;
  
}

/* Gallery Title */
.gallery-container h3 {
  font-size: 2em;
  color: rgb(50, 33, 102);
  border-bottom: 3px solid rgb(50, 33, 102);
  padding-bottom: 8px;
  margin-bottom: 20px;
}



/* Individual Gallery Item */
.gallery-item {
  flex: 0 0 calc auto;
  max-width: 150px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

/* Image Styling */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
}

/* Hover Effect */
.gallery-item:hover {
  transform: scale(1.05);
}

.gallery-item img:hover {
  transform: scale(1.1);
}

.gallery-grid {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    scrollbar-width: none; /* Hides scrollbar in Firefox */
    -ms-overflow-style: none; /* Hides scrollbar in IE/Edge */
    width: 100%; /* Ensures it doesn't exceed container */
}
.gallery-grid1 {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
  scrollbar-width: none; /* Hides scrollbar in Firefox */
  -ms-overflow-style: none; /* Hides scrollbar in IE/Edge */
  width: 100%; /* Ensures it doesn't exceed container */
}

.gallery-grid2 {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
  scrollbar-width: none; /* Hides scrollbar in Firefox */
  -ms-overflow-style: none; /* Hides scrollbar in IE/Edge */
  width: 100%; /* Ensures it doesn't exceed container */
}
/* Hide scrollbar for Chrome, Safari */
.gallery-grid::-webkit-scrollbar {
  display: none;
}
/* Prevent empty space at the end */
.gallery-grid::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 1px; /*Makes sure the last image aligns perfectly*/
}
/* Gallery Wrapper */
.gallery-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  max-width: 90%;
  margin: auto;
  overflow: hidden;
}

/* Scroll Buttons */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 20px;
  z-index: 10;
  border-radius: 50%;
}

.scroll-btn.left {
  left: 0;
}

.scroll-btn.right {
  right: 0;
}
/* Lightbox (Hidden by Default) */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Lightbox Content */
.lightbox-content {
    position: relative;
    width: 80%;
    max-width: 800px; /* Uniform max size */
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Lightbox Image */
.lightbox-content img {
    width: 100%;  /* Ensures uniform width */
    height: auto; /* Maintain aspect ratio */
    max-height: 80vh; /* Prevents overflow */
    object-fit: contain; /* Ensures image fits nicely without distortion */
    border-radius: 10px; /* Optional: Add rounded corners */
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}

/* Navigation Buttons */
.lightbox-controls {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.prev-btn, .next-btn {
  font-size: 2rem;
  color: white;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 15px;
  border-radius: 50%;
  transition: 0.3s;
}

.prev-btn:hover, .next-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .gallery-wrapper {
    width: 100%;
}

.gallery-item {
    width: 120px;
    height: 80px;
  }
  .gallery-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .lightbox-content img {
      max-width: 90%;
      max-height: 70vh;
  }
}

@media (max-width: 1440px) {
  .gallery-item {
      flex: 0 0 calc(16.66% - 10px); /* Show 6 images at once */
  }
}
@media (max-width: 1280px) {
  .gallery-item {
      flex: 0 0 calc(20% - 10px); /* Show 5 images at once */
  }
}
@media (max-width: 1024px) {
  .gallery-item {
      flex: 0 0 calc(25% - 10px); /* Show 4 images at once */
  }
}

@media (max-width: 768px) {
  .gallery-item {
      flex: 0 0 calc(33.33% - 10px); /* Show 3 images at once */
  }
}

@media (max-width: 600px) {
  .gallery-item {
      flex: 0 0 calc(50% - 10px); /* Show 2 images at once */
  }
}

@media (max-width: 400px) {
  .gallery-item {
      flex: 0 0 calc(100% - 10px); /* Show 1 image at a time */
  }
}


@media (max-width: 768px) {
  .ahcontainer {
      padding: 25px;
  }
  
  .ahcontainer h2 {
      font-size: 2em;
  }

  .grid-container {
      flex-direction: column;
  }

  .grid-container .acontainer {
      min-width: 100%;
  }

  .acontainer h3 {
      font-size: 1.5em;
  }
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  margin-top: 150px;
  position: relative;
  background-color: rgb(30, 20, 61);
  vertical-align: baseline;
  /* min-height: 150px; */
  
  /* border-radius: 150px 150px 0px 0px; */
}

footer p {
  text-align: center;
  
  line-height: 35px;
  color: #fff;
  font-weight: 400;
}

footer p a {
  color: #fff;
  transition: all .3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.75;
}

/* footer::before {
  background: url(../images/contact-dec-01.png);
  position: absolute;
  left: 30px;
  transform: rotate(180deg);
  opacity: 1;
  bottom: 0;
  width: 318px;
  height: 119px;
  content: '';
  z-index: 2;
} */

/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area {
    top: 0px;
  }
  .header-area .main-nav .logo h1 {
    border-right: none;
  }
  .main-banner .item {
    padding: 80px 30px 120px 30px !important;
  }
  .main-banner .owl-nav {
    left: 30px !important;
  }
  .event_filter  {
    padding: 15px 20px;
  }
  .event_filter li {
    display: inline-block;
    margin: 0px 10px;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav #search input,
  .header-area .main-nav #search i {
    display: none;
  }
  .header-area .main-nav .logo h1 {
    font-size: 34px;
  }
  .header-area .main-nav .logo {
    border-right: none;
  }
  .main-banner {
    padding-top: 100px;
  }
  .main-banner .item {
    padding: 100px 60px 140px 60px;
    margin-left: 0px;
    text-align: center;
  }
  .main-banner .item h2,
  .main-banner .item p {
    width: 100%;
  }
  .main-banner .item h2 {
    font-size: 36px;
    line-height: 50px;
  }
  .main-banner .item .buttons {
    display: inline-block;
    text-align: center;
  }
  .main-banner .item .buttons .main-button {
    margin-right: 0px;
    margin-bottom: 30px;
  }
  .main-banner .owl-nav {
    left: 50% !important;
    transform: translateX(-60px) !important;
    bottom: 60px;
  }
  .main-banner .owl-nav .owl-prev i {
    bottom: 0px;
  }
  .main-banner .owl-nav .owl-next i {
    bottom: 0px;
    position: absolute;
    left: 65px;
  }
  .services {
    margin-top: 80px;
  }
  .about-us {
    margin-top: 100px;
  }
  .accordion {
    padding: 40px 25px 10px 25px;
  }
  .services .service-item .icon {
    width: 170px;
    height: 170px;
    line-height: 170px;
  }
  .about-us .section-heading {
    margin-left: 0px;
    margin-top: 120px;
  }
  .about-us::before,
  .testimonials::before,
  .contact-us::before {
    display: none;
  }
  .about-us .section-heading p,
  .testimonials .section-heading p,
  .contact-us .section-heading p {
    margin-top: 30px;
  }
  .about-us .section-heading .main-button {
    margin-top: 30px;
  }
  .about-us .main-button a {
    background-color: #7a6ad8;
    color: #fff;
  }
  .courses {
    margin-top: 100px;
  }
  .event_filter ul li {
    display: block;
    margin: 12px 5px;
  }
  .fun-facts {
    margin-top: 70px;
  }
  .fun-facts::before {
    width: 95%;
  }
  .team {
    margin-top: 160px;
  }
  .team-member {
    margin-bottom: 140px;
  }
  .testimonials {
    margin-top: -50px;
    padding: 0px;
  }
  .testimonials .section-heading {
    margin-left: 0px;
    margin-top: 40px;
  }
  .testimonials .item {
    padding: 40px 40px 60px 40px;
  }
  .testimonials .item h4 {
    font-size: 17px;
  }
  .testimonials .item img {
    margin-right: 15px;
  }
  .testimonials .owl-nav {
    display: none;
  }
  .events {
    margin-top: 80px;
  }
  .events .item {
    margin-bottom: 66px;
  }
  .events .item .image img {
    position: relative;
    max-width: 100%;
  }
  .events .item ul {
    margin-top: -40px;
  }
  .events .item ul li:first-child {
    width: 100% !important;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
  }
  .events .item ul li:nth-child(2) {
    width: 40% !important;
  }
  .events .item ul li {
    display: inline-block;
    width: 28% !important;
  }
  .events .item ul li:last-child {
    text-align: right;
  }
  .events .item a {
    bottom: 150px;
    top: auto;
  }
  .events .item ul li h6 {
    font-size: 14px;
  }
  .contact-us {
    padding-top: 20px;
  }
  .contact-us .section-heading {
    margin-right: 0px;
  }
  .contact-us .special-offer {
    background-color: #f1f0fe;
    margin-bottom: 60px;
    padding: 34px 30px 34px 100px;
    width: 100%;
  }
  .contact-us .special-offer h4 {
    font-size: 17px;
  }
  .contact-us .special-offer a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 15px;
    right: 15px;
  }
  .contact-us .contact-us-content {
    padding: 30px;
  }
  footer {
    margin-top: 30px;
  }
}

@media (max-width: 1200px) {
  .header-area .main-nav #search input {
    width: 200px;
  }
  .header-area .main-nav .nav li.has-sub:after {
    right: 15px;
  }
  .fun-facts:before {
    width: 95%;
  }
}

.floating-whatsapp {
  position: fixed;
  bottom: 20px; /* Distance from the bottom of the screen */
  right: 20px; /* Distance from the right side of the screen */
  z-index: 1000;
  background-color: #25d366;
  border-radius: 30px; /* Rounded edges */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px; /* Space between icon and text */
  padding: 10px 15px; /* Adjust padding around content */
  color: white; /* Text color */
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-whatsapp img {
  width: 30px; /* Icon size */
  height: auto;
}

.floating-whatsapp span {
  margin-left: 5px; /* Space between icon and text */
}

.floating-whatsapp:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhance the shadow */
}

@media screen and (max-width: 600px) {
  .floating-whatsapp span {
    display: none; /* Hide the text on smaller screens */
  }

  .floating-whatsapp {
    border-radius: 50%; /* Make the button circular */
    padding: 10px; /* Adjust padding for the circular button */
  }
}