/* Prevent horizontal scrolling */
html {
  overflow-x: hidden;
}

/* Define the font face */
@font-face {
  font-family: 'Product Sans';
  src: url('assets/fonts/Product Sans Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Basic Styles */
/* Basic Styles */
body {
  background: #fff;
  font-size: 15px;
  font-weight: 400;
  font-family: 'Product Sans', sans-serif; /* Ensure font-family matches @font-face */
  box-sizing: border-box;
  /* Font smoothing for better text appearance */
  -webkit-font-smoothing: antialiased; /* For WebKit browsers (Chrome, Safari) */
  -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
  color: #212121;
  line-height: 25px;
  backface-visibility: hidden;
  overflow-x: hidden;
}


/* Headings */
h1, h2, h3, h4, h5 {
  font-size: 36px;
  font-weight: 700;
  font-family: 'Product Sans', sans-serif;
}

/* Links */
a {
  transition: all 0.2s linear;
}

a:hover {
  text-decoration: none;
}

a:focus {
  outline: none;
}

/* Paragraphs */
p {
  font-weight: 400;
  font-family: 'Product Sans', sans-serif;
  margin: 0;
  font-size: 14px;
}

/* Lists */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li, ol li {
  list-style: none;
}

/* Colored Letters */
.colored-letter {
  text-transform: uppercase;
  letter-spacing: -0.2em;
  font-family: "Product Sans", sans-serif;
  font-weight: bold;
  display: inline;
  margin: 0;
  padding: 0;
}

/* Colored Letter Classes */
.g { color: #4285F4; }
.o1 { color: #EA4335; }
.o2 { color: #FBBC05; }
.g2 { color: #4285F4; }
.l { color: #34A853; }
.e { color: #EA4335; }

/* Hero Section */
.hero-heading {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
  line-height: 70px;
  letter-spacing: 0.1rem;
}

.hero-sub-heading {
  font-size: 20px;
  font-weight: 400;
  color: #e6e6e6;
  line-height: 45px;
  letter-spacing: 0.1rem;
}

/* Section Title Background */
.section-title-bg {
  display: inline;
  font-size: 115px;
  font-weight: 700;
  height: 100%;
  left: -173px;
  opacity: 0.1;
  position: absolute;
  top: -14px;
  width: 100%;
  text-align: center;
}

/* Section Title Header */
.section-title-header .subtitle {
  font-size: 20px;
  color: #4285f4;
  margin-bottom: 10px;
  font-style: italic;
}

.section-title-header p {
  text-align: center;
  font-weight: 400;
  line-height: 26px;
  padding-bottom: 36px;
}

/* Section Title */
.section-title {
  font-size: 30px;
  color: #111111;
  line-height: 52px;
  font-weight: 700;
  text-align: center;
  position: relative;
  margin-bottom: 10px;
}

.section-title:before {
  content: "[";
  color: #4285f4;
  padding-right: 10px;
}

.section-title:after {
  content: "]";
  color: #4285f4;
  padding-left: 10px;
}

/* Section Subcontent */
.section-subcontent {
  font-size: 16px;
  text-align: center;
  font-weight: 400;
  line-height: 26px;
  padding-bottom: 36px;
}

/* Section Subtitle */
.section-sub {
  text-transform: uppercase;
  font-size: 24px;
  line-height: 52px;
  padding-bottom: 15px;
  margin-bottom: 30px;
  position: relative;
}

.section-sub:before {
  position: absolute;
  content: '';
  height: 1px;
  width: 45px;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  background-color: #4285f4;
}

/* Subtitle */
.subtitle {
  font-size: 15px;
  margin-top: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}

/* Inner Title */
.inner-title {
  font-size: 24px;
  font-weight: 700;
  text-transform: capitalize;
}

/* Page Tagline */
.page-tagline {
  font-size: 24px;
  font-weight: 400;
  color: #ddd;
}

/* Page Title */
.page-title {
  font-size: 62px;
  font-weight: 700;
  color: #fff;
}

/* Overlay */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

/* Buttons */
.btn {
  font-size: 14px;
  padding: 10px 30px;
  line-height: 22px;
  border-radius: 30px;
  font-family: 'Product Sans', sans-serif;
  cursor: pointer;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  transition: all 0.2s linear;
  display: inline-block;
}

.btn i {
  margin-right: 5px;
}

.btn:focus,
.btn:active {
  box-shadow: none;
  outline: none;
  color: #fff;
}

/* Button Types */
.btn-common {
  background-image: linear-gradient(65deg, #4285f4 0, #4178cf 100%);
  box-shadow: 0 8px 16px #1d117f40;
  position: relative;
  z-index: 1;
}

.btn-common:hover {
  color: #fff;
  background-image: linear-gradient(65deg, #4285f4 0, #4178cf 100%);
  box-shadow: 0 8px 16px rgba(12, 15, 89, 0.4);
  transition: all .2s ease-in-out;
}

.btn-border {
  color: #212121;
  background-color: transparent;
  border: 1px solid rgba(36, 36, 36, 0.2);
}

.btn-border:hover {
  color: #4285f4;
  border-color: #4285f4;
  background-color: rgba(255, 255, 255, 0.2);
}

.btn-fill {
  background: #fff;
  color: #212121;
}

.btn-fill:hover {
  color: #4285f4;
}

.btn-lg {
  padding: 12px 34px;
  text-transform: uppercase;
  font-size: 14px;
}

.btn-rm {
  padding: 7px 10px;
  text-transform: capitalize;
}

/* Focused Button Styles */
button:focus {
  outline: none !important;
}

/* Icon Colors */
.icon-close, .icon-check {
  color: #4285f4;
}

/* Background Colors */
.bg-dark {
  background: #f1f1f1;
}

.bg-white {
  background: #fff;
}

/* Margin Utilities */
.mb-30 {
  margin-bottom: 30px;
}

.mt-30 {
  margin-top: 30px;
}


/* ScrollToTop */
a.back-to-top {
  display: none;
  position: fixed;
  bottom: 18px;
  right: 15px;
  text-decoration: none;
}

a.back-to-top i {
  display: block;
  font-size: 22px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  background-image: linear-gradient(65deg, #4285f4 0, #79a5eb 100%);
  border-radius: 30px;
  text-align: center;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

a.back-to-top:hover, a.back-to-top:focus {
  text-decoration: none;
}

#preloader {
  position: fixed;
  background: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999999;
}

.sk-circle {
  margin: 0px auto;
  width: 40px;
  height: 40px;
  top: 45%;
  position: relative;
}

.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #4285f4;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}

.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}

.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}

.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}

.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.section-padding {
  padding: 60px 0;
}

.no-padding {
  padding: 0 !important;
}

.padding-left-none {
  padding-left: 0;
}

.padding-right-none {
  padding-right: 0;
}

#page-banner-area {
  background: url(../img/background/banner.jpg) no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.page-banner {
  position: relative;
  min-height: 250px;
  color: #fff;
}

.page-banner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.page-banner .page-banner-title {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
}

.page-banner .page-banner-title h2 {
  color: #fff;
  font-size: 40px;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

#white-bg {
  background: #fff;
}

.navbar-brand {
  position: relative;
  padding: 0px;
}

.navbar-brand img {
  width: 75%;
}

.top-nav-collapse {
  background: #fff;
  z-index: 999999;
  top: 0px !important;
  min-height: 58px;
  box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06);
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  background: #fff !important;
}

.top-nav-collapse .navbar-brand {
  top: 0px;
}

.top-nav-collapse .navbar-nav .nav-link {
  color: #212121 !important;
}

.top-nav-collapse .navbar-nav .nav-link:hover {
  color: #4285f4 !important;
}

.top-nav-collapse .navbar-nav li.active a.nav-link {
  color: #4285f4 !important;
}

.navbar-expand-lg .navbar-toggler {
  background: transparent;
  border: 1px solid #4285f4;
  background-image: linear-gradient(65deg, #4285f4 0, #6095ea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-radius: 4px;
  cursor: pointer;
}

.indigo {
  background: transparent;
}

.navbar-expand-lg .navbar-nav .nav-link {
  color: #fff;
  font-size: 14px;
  padding: 0 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: 'Product Sans', sans-serif;
  font-weight: 500;
  line-height: 40px;
  text-transform: uppercase;
  background: transparent;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: relative;
}

.navbar-expand-lg .navbar-nav li > a:before {
  content: '';
  position: absolute;
  top: 19px;
  left: 5%;
  margin-left: -10px;
  width: 15px;
  height: 2px;
  background: #4285f4;
  -webkit-transform: scale3d(0, 1, 1);
  -moz-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transition: -webkit-transform 0.1s;
  -moz-transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
}

.navbar-expand-lg .navbar-nav .active a:before {
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.navbar-expand-lg .navbar-nav li a:hover,
.navbar-expand-lg .navbar-nav li .active > a,
.navbar-expand-lg .navbar-nav li a:focus {
  background-image: linear-gradient(65deg, #4285f4 0, #5893f3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  outline: none;
}

.navbar-expand-lg .navbar-nav .nav-link:focus,
.navbar-expand-lg .navbar-nav .nav-link:hover {
  background-image: linear-gradient(65deg, #4285f4 0, #578fe9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text !important;
}

.navbar {
  padding: 0;
}

.navbar li.active a.nav-link {
  background-image: linear-gradient(65deg, #4285f4 0, #5e8fde 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text !important;
}

.dropdown-toggle::after {
  display: none;
}

.dropdown-menu {
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  z-index: 99;
  min-width: 210px;
  background-color: #fff;
  white-space: nowrap;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  animation: fadeIn 0.4s;
  -webkit-animation: fadeIn 0.4s;
  -moz-animation: fadeIn 0.4s;
  -o-animation: fadeIn 0.4s;
  -ms-animation: fadeIn 0.4s;
}

.dropdown-menu:before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 100%;
  left: 20%;
  margin-left: -5px;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #f5f5f5;
}

.dropdown:hover .dropdown-menu {
  display: block;
  position: absolute;
  text-align: left;
  top: 100%;
  border: none;
  animation: fadeIn 0.4s;
  -webkit-animation: fadeIn 0.4s;
  -moz-animation: fadeIn 0.4s;
  -o-animation: fadeIn 0.4s;
  -ms-animation: fadeIn 0.4s;
  background: #f5f5f5;
}
.dropdown .dropdown-menu .dropdown-item {
  width: 100%;
  padding: 12px 20px;
  font-size: 14px;
  color: #212121;
  border-bottom: 1px solid #f1f1f1;
  text-decoration: none;
  display: block; /* Ensures full width */
  position: relative;
  outline: 0;

  /* Transition properties */
  transition: all 0.3s ease-in-out; /* Standard syntax */
  -webkit-transition: all 0.3s ease-in-out; /* For older WebKit browsers */
  -moz-transition: all 0.3s ease-in-out; /* For older Firefox versions */
  -o-transition: all 0.3s ease-in-out; /* For older Opera browsers */
  -ms-transition: all 0.3s ease-in-out; /* For older Internet Explorer */
}

.dropdown .dropdown-menu .dropdown-item:hover {
  background-color: #f1f1f1; /* Background color on hover */
}


.dropdown .dropdown-menu .dropdown-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.dropdown .dropdown-menu .dropdown-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.dropdown .dropdown-item:focus,
.dropdown .dropdown-item:hover,
.dropdown .dropdown-item.active {
  color: #4285f4;
}

.dropdown-item.active, .dropdown-item:active {
  background: transparent;
}

.fadeInUpMenu {
  -webkit-animation-name: fadeInUpMenu;
  animation-name: fadeInUpMenu;
}

/* only small tablets */
@media (min-width: 768px) and (max-width: 991px) {
  .bg-inverse {
    background: #fff !important;
    box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06);
  }
  .navbar-expand-lg .navbar-brand, .navbar-expand-lg .navbar-toggler {
    margin: 0px 15px;
  }
  .navbar-nav {
    padding: 5px 15px;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0px 40px;
    color: #212121;
  }
}
@media (max-width: 991px) {
  .bg-inverse {
    background: #000000 !important;
    box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06);
  }
  .navbar-expand-lg .navbar-brand, .navbar-expand-lg .navbar-toggler {
    margin: 0px 15px;
  }

  .navbar-expand-lg .navbar-toggler {
    margin-top: 0px; /* Adjust this value to lower the toggler */
}


  .navbar-nav {
    padding: 5px 15px;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0px 40px;
    color: #212121;
  }
  /* Add this to position the navbar lower */
  .navbar {
    margin-top: 0px; /* Adjust the value as needed */
  }
}


#about {
  background: #F6F9F9;
}

.about-content {
  height: 100%;
  display: table;
}

.about-content > div {
  vertical-align: middle;
  display: table-cell;
}

.about-content .about-text h2 {
  font-size: 40px;
  font-weight: 700;
}

.about-content .about-text h6 {
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  margin-top: 20px;
}

.about-content .about-text p {
  margin-top: 20px;
  margin-bottom: 20px;
}

.about-content ul {
  margin-bottom: -8px;
}

.about-content ul li {
  list-style: none;
  line-height: 30px;
  position: relative;
  padding-left: 25px;
}

.about-content ul li i {
  position: absolute;
  left: 0;
  top: 7px;
  font-size: 16px;
  color: #4285f4;
}

.about-content .btn-about {
  margin-top: 30px;
}

.about-content .btn-about .btn {
  margin-right: 10px;
}
#event-up .event-item {
  position: relative;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow with increased blur and opacity */
}

#event-up .event-item .overlay-text {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

#event-up .event-item .content {
  position: absolute;
  top: 30%;
  width: 100%;
  color: #fff;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Larger shadow with increased blur and opacity */
}

#event-up .event-item .content h3 {
  font-size: 16px;
  text-transform: uppercase;
}

#event-up .event-item .content a {
  color: #4285f4;
  margin-top: 10px;
}

#event-up .event-item:hover .content {
  top: 50%;
}

#event-up .event-item .overlay-text:hover {
  opacity: 1;
}

#event-up .event-item {
  position: relative;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  height: 140px; /* 🔧 Smaller height for the image area */
  overflow: hidden;
}

#event-up .event-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}




/* ==========================================================================
   Video Section Style
   ========================================================================== */
.ready-to-play {
  height: 560px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.ready-to-play:before {
  content: '';
  background-image: linear-gradient(0deg, #4285f4 0, #75a3ed 100%);
  position: absolute;
  display: block;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.7;
}

video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  transition: 1s opacity;
}

.stop {
  opacity: 1;
}

.stopfade .ready-to-play:before {
  opacity: 1;
}

h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}

.video-text {
  background-size: cover;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
  color: #fff;
}

.video-text {
  text-align: center;
}

.video-text h4 {
  margin-bottom: 15px;
  color: #fff;
  text-transform: uppercase;
}

.video-text h1 {
  margin-bottom: 25px;
  color: #fff;
}

.video-text p {
  color: #fff;
}

.tb-t {
  display: table;
  height: 100%;
  margin: auto;
}

.tb-t .tb-c {
  display: table-cell;
  vertical-align: middle;
}

.tb-t .tb-c button {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

.tb-t .tb-c button i {
  font-size: 30px;
  color: #fff;
  line-height: 70px;
}

.tb-t .tb-c button:focus {
  outline: none;
}

.counter-section {
  background: url(../img/background/countdown.jpg) no-repeat center;
  background-size: auto auto;
  padding: 80px 0;
  background-size: cover;
  background-attachment: relative;
  position: relative;
}

.counter-section:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.counter-section .counter {
  position: relative;
  background: rgba(255, 255, 255, 0.3);
  padding: 35px 0;
  border-radius: 4px;
  padding-left: 45px;
  margin-left: 20px;
}

.counter-section .counter .icon {
  background-image: linear-gradient(0deg, #4285f4 0, #7ea8ea 100%);
  color: #fff;
  text-align: center;
  line-height: 50px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  top: 47%;
  left: -30px;
  margin-top: -25px;
}

.counter-section .counter .icon i {
  font-size: 24px;
  line-height: 60px;
  color: #fff;
}

.counter-section .counter p {
  font-size: 15px;
  color: #fff;
  font-weight: 400;
}

.counter-section .counter .counterUp {
  color: #fff;
  font-size: 50px;
  margin-bottom: 20px;
  font-weight: 700;
}
/* Sponsors Area */
#sponsors {
  background: url(../img/background/countdown.jpg) no-repeat center;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
  padding: 20px; /* Optional: Add padding for spacing */
}

#sponsors .section-title-header .section-title,
#sponsors .section-title-header p {
  color: #fff;
}

#sponsors .sponsors-logo {
  display: flex; /* Use Flexbox for row layout */
  flex-wrap: wrap; /* Allow wrapping if needed */
 
   justify-content: center;
   align-items: center;
}

#sponsors .sponsor-item {
  flex: 1 0 16%; /* Set each sponsor item to take 16% of the width (6 items per row) */
  max-width: 16%; /* Prevent item from exceeding this width */
  margin: 10px; /* Optional: Add margin for spacing */
  text-align: center !important; /* Center text */
  display: flex; /* Use flexbox for vertical centering */
  flex-direction: column; /* Align children vertically */
  justify-content: center;
  align-items: center; /* Center children horizontally */
}
/* Golden Sponsors */
/* Golden Sponsors */
#sponsors .golden-sponsor {
  background: linear-gradient(145deg, #ffcc00, #ff9900);
  border: 1px solid #f5c000;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  /* 🔥 Center the element itself */
  margin: 0 auto;
  width: fit-content; /* optional: shrink to content */
}

/* Hover effect for Golden Sponsors */
#sponsors .golden-sponsor:hover {
  transform: translateY(-5px); /* Slight lift effect on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover for a more prominent look */
}

/* Golden Sponsors Text */
#sponsors .golden-sponsor .sponsor-name {
  color: #fff; /* White text for contrast */
  font-weight: bold; /* Bold text to make the name stand out */
  font-size: 18px; /* Slightly larger text size for better visibility */
  margin-top: 15px; /* Spacing above the sponsor name */
  text-transform: uppercase; /* Uppercase text for a stronger appearance */
}

/* Golden Sponsors Button */
/* Golden Sponsors Button */
#sponsors .golden-sponsor .read-more-button {
  background-color: #ffcc00; /* Gold color for the button */
  color: #ae9c9c; /* Dark text color for contrast */
  border: none; /* Remove border for a cleaner look */
  padding: 6px 20px; /* Reduce the vertical padding for a shorter height */
  font-size: 10px; /* Slightly smaller font size */
  border-radius: 50px; /* Rounded corners */
  margin-top: 25px; /* Spacing above the button */
  text-decoration: none; /* Remove underline */
  display: flex; /* Enables flexbox layout */
  justify-content: center; /* Center text horizontally */
  align-items: center; /* Vertically center text */
  width: auto; /* Button width adjusts based on content */
  min-width: 130px; /* Minimum width */
  max-width: 200px; /* Maximum width */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */
  text-align: center; /* Ensure multiline text is centered */
  line-height: normal; /* Adjust line-height to fit text */
  cursor: pointer; /* Optional: make it look clickable */
}

/* Hover state */
#sponsors .golden-sponsor .read-more-button:hover {
  background-color: #e6b800; /* Darken gold when hovered */
  transform: translateY(-2px); /* Lift effect on hover */
}




/* Adding animation for golden sponsor items to appear elegantly */
#sponsors .golden-sponsor {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Support by USAID */
#sponsors .support-by .sponsor-name {
  font-weight: bold;
  font-size: 13px;
  color: #fbfbfa; /* USAID is usually associated with a yellow/gold color */
}

/* Sponsor Categories */
#sponsors .sponsor-category-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20px;
}

/* Sponsor Item Styles */
#sponsors .sponsor-item a {
  display: flex; /* Ensure the container is flex to center the image */
  justify-content: center !important; 
  align-items: center !important;
  height: 150px; /* Fixed height for the logo container */
  width: 150px; /* Fixed width for the logo container */
  border-radius: 50%; /* Make the container circular */
  overflow: hidden; /* Ensure the image fits within the circular container */
  border: 2px solid #fff; /* Optional: Add border for better visibility */
}

#sponsors .sponsor-item a img {
  width: 100%; /* Make the image fill the container */
  height: auto; /* Maintain aspect ratio */
  max-height: 100%; /* Ensure image doesn't exceed container height */
  object-fit: cover; /* Cover the area while maintaining aspect ratio */
}

#sponsors .sponsor-name {
  margin: 10px 0; /* Space between image and name */
  color: #fff; /* Text color */
  text-align: center; /* Center the text */
  width: 100%; /* Ensure it takes the full width for centering */
}

#sponsors .read-more-button {
  display: inline-block !important;
  width: 80px !important;
  height: 30px !important;
  background-color: #007bff !important;
  color: #fff !important;
  text-align: center !important;
  line-height: 30px !important;
  text-decoration: none !important;
  border: 2px solid #007bff !important;
  border-radius: 0 !important;
  margin: 10px 0 !important;
  font-size: 12px !important;
  justify-content: center !important; 
  align-items: center !important;
}

/* Sponsors Area */
#sponsors1 {
  background: none; /* Remove background */
  padding: 20px; /* Optional: Add padding for spacing */
  justify-content: center !important; 
  align-items: center !important;
}

/* Sponsors Logos */
#sponsors1 .sponsors-logo {
  display: flex; /* Use Flexbox for row layout */
  gap: 20px; /* Space between logos */
  flex-wrap: nowrap; /* Prevent items from wrapping */
  justify-content: center !important; 
  align-items: center !important;
}

/* Sponsor Item Styles */
#sponsors1 .sponsor-item {
  flex: 0 0 auto; /* Prevent the item from shrinking or growing */
  width: 18%; /* Set each sponsor item to take 18% of the row width */
  margin: 10px 0; /* Optional: Add margin for spacing */
  text-align: center; /* Center text */
  justify-content: center !important; 
  align-items: center !important;
}

#sponsors1 .sponsor-item a {
  display: flex;
  justify-content: center !important; 
  align-items: center !important;
  height: 100px; /* Fixed height for logos */
  width: 100px; /* Fixed width for logos */
  border-radius: 50%; /* Make the container circular */
  overflow: hidden; /* Ensure the image fits within the circular container */
  margin: 0 auto; /* Center the sponsor item */
}

#sponsors1 .sponsor-item a img {
  width: 100%; /* Make the image fill the container */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Cover the area while maintaining aspect ratio */
}

#sponsors1 .sponsor-name {
  margin-top: 10px; /* Space between image and name */
  color: #000; /* Text color */
  text-align: center; /* Center the text */
  font-size: 10px; /* Smaller font size */
  font-weight: bold;
}

#sponsors1 .read-more-button {
  display: inline-block !important;
  width: 50px !important;
  height: 50px !important;
  background-color: #007bff !important;
  color: #fff !important;
  text-align: center !important;
  line-height: 30px !important;
  text-decoration: none !important;
  border: 2px solid #007bff !important;
  border-radius: 0 !important;
  margin: 10px 0 !important;
  font-size: 10px !important;
}

#sponsors1 .read-more-button:hover {
  background-color: #007bff;
  color: white;
}

/* Sponsor Categories */
#sponsors1 .sponsor-category-title {
  font-size: 20px;
  font-weight: bold;
  color: #333; /* Darker text color */
  margin-bottom: 20px;
}

#sponsors .golden-sponsor .read-more-button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: auto !important;
  min-width: 130px !important;
  max-width: 200px !important;
  line-height: normal !important;
  background-color: #007bff !important;
  color: white !important;
  border-radius: 1px !important;
  padding: 6px 20px !important;
  font-size: 15px !important;
  margin-top: 10px !important;
}


/* ---- Platinum Sponsor (correct platinum color + centered) ---- */
#sponsors .platinum-sponsor {
  background: linear-gradient(145deg, #f7f7f7, #d9d9d9, #bfbfbf); /* Platinum gradient */
  border: 1px solid #cfcfcf; 
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  /* Center the card */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#sponsors .platinum-sponsor:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

#sponsors .platinum-sponsor .sponsor-name {
  color: #333;
  font-weight: bold;
  font-size: 18px;
  margin-top: 15px;
  text-transform: uppercase;
}

#sponsors .platinum-sponsor .read-more-button {
background-color: #dcdcdc; /* Platinum/silver color */
  color: #ffffff !important; 
  border: none!important;
  padding: 6px 20px !important; 
  font-size: 15px !important;
  border-radius: 1px !important; 
  margin-top: 25px !important;
  text-decoration: none !important;
  display: flex !important; 
  justify-content: center !important; 
  align-items: center !important; 
  width: auto !important; 
  min-width: 130px !important; 
  max-width: 200px !important; 
  transition: background-color 0.3s ease, transform 0.3s ease !important; 
  text-align: center !important; 
  line-height: normal !important; 
  cursor: pointer !important;
}

#sponsors .platinum-sponsor .read-more-button:hover {
  background-color: #c0c0c0;
  transform: translateY(-2px);
}

/* Animation */
#sponsors .platinum-sponsor {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
}

/* ---- Ensure all sponsor sections stay centered ---- */
.sponsors-logo {
  display: flex;
  justify-content: center;  /* FULL CENTER */
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}



/* Schedule Area */
/* Ensure the section takes up enough space */
#schedules {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 0; /* Adjust padding to control spacing within the section */

}

#schedules .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#schedules .section-title-header {
  margin-bottom: 20px;
}

#schedules .btn-common {
  margin-top: 10px;
}


#schedule-tab {
  position: relative;
}

.schedule .nav-tabs {
  display: block;
  border-bottom: none;
}

.schedule .nav-tabs .nav-item {
  margin-bottom: 16px;
  text-align: center;
  margin: 0 10px;
  display: inline-block;
}

.schedule .nav-tabs .nav-link {
  padding: 12px 15px;
  background: #fff;
  padding-top: 16px;
  border-radius: 4px;
  box-shadow: 0 8px 24px #E2E8ED;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.schedule .nav-tabs .nav-item.show .nav-link, .schedule .nav-tabs .nav-link.active,
.schedule .nav-tabs .nav-item .nav-link:hover {
  border-color: transparent;
  position: relative;
  background-image: linear-gradient(65deg, #4285f4 0, #7facf3 100%);
}

.schedule .nav-tabs .nav-item.show .nav-link h4, .schedule .nav-tabs .nav-link.active h4,
.schedule .nav-tabs .nav-item .nav-link:hover h4 {
  color: #fff;
}

.schedule .nav-tabs .nav-item.show .nav-link h5, .schedule .nav-tabs .nav-link.active h5,
.schedule .nav-tabs .nav-item .nav-link:hover h5 {
  color: #fff;
}

.schedule .nav-tabs .nav-item.show .nav-link:before, .schedule .nav-tabs .nav-link.active:before {
  content: '';
  position: absolute;
  left: 42%;
  bottom: -24px;
  border-width: 12px;
  border-style: solid;
  border-color: #4285f4 transparent transparent transparent;
}

.schedule .item-text {
  border-radius: 4px;
  position: relative;
}

.schedule .item-text h4 {
  font-size: 15px;
  color: #2f323c;
  line-height: 22px;
  font-weight: 400;
  text-transform: uppercase;
}

.schedule .item-text h5 {
  font-size: 14px;
  color: #848484;
  line-height: 16px;
  font-weight: 400;
  text-transform: capitalize;
}

.schedule .schedule-tab-content .tab-content {
  box-shadow: 0 8px 24px #E2E8ED;
}

.schedule .schedule-tab-content .card {
  border: none;
}

.schedule .show .card-body {
  background: #f3f4f3;
}

.schedule .card .schedule-slot-time {
  background-image: linear-gradient(65deg, #4285f4 0, #7da8ef 100%);
  color: #fff;
  padding: 38px 28px;
  float: left;
  font-size: 18px;
  font-weight: 700;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 18%;
  flex: 0 0 18%;
  max-width: 18%;
}

.schedule .card-header {
  position: relative;
  padding: 35px 40px 35px 224px;
  border-bottom: 1px dashed #e5e5e5;
  cursor: pointer;
  border-left: none;
  width: 100%;
}

.schedule .card-header .images-box {
  width: 70px;
  height: 70px;
  float: left;
  margin-right: 20px;
}

.schedule .card-header .images-box img {
  border-radius: 50%;
}

.schedule .card-header .time {
  color: #777777;
  font-size: 13px;
  margin-bottom: 5px;
}

.schedule .card-header h4 {
  font-weight: 700;
  font-size: 18px;
  color: #212121;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.schedule .card-header .name {
  position: relative;
  font-size: 14px;
  color: #777777;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 5px;
}

.schedule .card-body {
  padding: 30px 45px 30px 45px;
  background: #fff;
}

.schedule .card-body .location {
  margin-top: 8px;
  font-size: 13px;
  color: #777777;
}

.schedule .card-body .location span {
  color: #4285f4;
  margin-right: 5px;
}

.accordion .card {
  border-radius: 0px;
  margin-bottom: -2px;
}

.accordion .header-title {
  position: relative;
}

.accordion .header-title:after {
  font-family: "LineIcons";
  content: "";
  display: none;
  position: absolute;
  right: 10px;
  color: #999;
  top: 50%;
  line-height: 1;
  padding: 0px 5px;
  margin-top: -7px;
}

.accordion .collapsed:after {
  content: "";
}

.accordion .card-header {
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.accordion .card-header i {
  color: #4285f4;
  width: 40px;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  margin-right: 10px;
  border-right: 1px solid #ddd;
}

.accordion .card-body {
  padding-left: 56px;
}

/* Inforamation Bar */
#information-bar {
  background: #ffffff;
  position: relative;
}

#information-bar .inforation-wrapper {
  background: #f8fafb;
  border-radius: 4px;
  box-shadow: 0 8px 24px #0f5086;
  margin-bottom: -35px;
  margin-top: -35px;
  padding: 45px 0;
  position: relative;
  top: -40px;
  z-index: 999;
}

#information-bar ul {
  text-align: center;
}

#information-bar ul li {
  display: inline-block;
}

#information-bar ul li i {
  text-align: center;
  padding: 0 12px;
  font-size: 32px;
  vertical-align: middle;
  background-image: linear-gradient(0deg, #4285f4 0, #87b0f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#information-bar ul li span {
  font-size: 13px;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

#information-bar ul li span b {
  font-size: 20px;
  color: #374045;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

/* Services Item */
.intro {
  background: #fff;
}

.single-intro-text {
  padding: 45px 50px 40px 60px;
  -webkit-box-shadow: 0 8px 24px #E2E8ED;
  box-shadow: 0 8px 24px #E2E8ED;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin: 15px 0;
  background: #fff;
  z-index: 2;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.single-intro-text:hover {
  box-shadow: 0 16px 48px #E2E8ED;
}

.single-intro-text i {
  position: absolute;
  left: -10px;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  top: 20px;
  font-size: 55px;
  color: #bababa;
}

.single-intro-text h3 {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 700;
}

.single-intro-text p {
  margin-bottom: 0;
}

.single-intro-text .count-number {
  position: absolute;
  right: -55px;
  bottom: -55px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  background-image: linear-gradient(0deg, #4285f4 0, #83aef5 100%);
  color: #fff;
  display: block;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  padding: 25px 30px;
}

.single-intro-text:hover i {
  background-image: linear-gradient(65deg, #4285f4 0, #81adf3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* For WebKit browsers like Safari */
  background-clip: text; /* Standard property for clipping background to text */
  color: transparent; /* Fallback for other browsers */
}

/* Gallery Section */
#gallery {
  background: #a4c4f9;
  position: relative;
}

#gallery .gallery-box {
  position: relative;
  margin-bottom: 30px;
  padding: 10px;
  box-shadow: 0 8px 24px #E2E8ED;
}

#gallery .gallery-box .overlay-box {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding-top: 35%;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

#gallery .gallery-box .overlay-box i {
  background: #ffffff;
  color: #4285f4;
  font-size: 30px;
  width: 50px;
  height: 50px;
  display: inline-block;
  line-height: 50px;
  border-radius: 50%;
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

#gallery .gallery-box:hover .overlay-box {
  background: rgba(23, 14, 145, 0.69);
  transform: scale(1, 1);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

#gallery .gallery-box:hover .overlay-box i {
  transform: scale(1, 1); /* Standard syntax */
  -webkit-transform: scale(1, 1); /* For older WebKit browsers like Safari */
  -moz-transform: scale(1, 1); /* For older Firefox versions */
  -ms-transform: scale(1, 1); /* For older Internet Explorer versions */
  -o-transform: scale(1, 1); /* For older Opera versions */
}

.membership-frame {
  border: 2px solid #4285f4; /* Blue border color */
  padding: 20px;             /* Padding inside the frame */
  border-radius: 10px;       /* Rounded corners */
  background-color: #f9f9f9; /* Light background color */
  max-width: 600px;          /* Limit the frame width */
  margin: 0 auto;            /* Center the frame */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
  text-align: center;        /* Center-align the text */
}

.membership-frame p {
  margin-bottom: 20px; /* Space between text and button */
}

.membership-frame .btn {
  margin-top: 10px; /* Additional space above the button */
  display: inline-block; /* Ensure the button doesn't take up full width */
  text-align: center;    /* Center text inside the button */
}



/* Team Item */
.team-item:hover {
  box-shadow: 0 16px 48px #E2E8ED;
}
.team-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch; /* Ensures all items stretch to the same height */
}
.team-item {
  margin: 15px 0;
  padding: 15px;
  border-radius: 4px;
  position: relative;
  box-shadow: 0 8px 24px #E2E8ED;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

.team-item .team-img {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.team-item .team-overlay {
  text-align: center;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.team-item .overlay-social-icon {
  position: absolute;
  top: 50%;
  width: 100%;
  color: #fff;
  transform: translateY(-50%);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.team-item .overlay-social-icon .social-icons {
  padding-left: 0;
  width: 120px;
  height: 120px;
  margin: 0 auto;
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  transform: translateY(-30px);
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

.team-item .overlay-social-icon .social-icons li {
  float: left;
}

.team-item .overlay-social-icon .social-icons li a {
  letter-spacing: 0px;
  outline: 0 !important;
}

.team-item .overlay-social-icon .social-icons li a i {
  font-size: 20px;
  color: #fff;
  width: 60px;
  height: 60px;
  background: #4285f4;
  display: block;
  border-radius: 0px;
  line-height: 60px;
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
}

.team-item .overlay-social-icon .social-icons li .lni-facebook-filled {
  background: rgba(188, 216, 28, 0.7);
}

.team-item .overlay-social-icon .social-icons li .lni-facebook-filled:hover {
  background: #9dc71f;
}

.team-item .overlay-social-icon .social-icons li .lni-twitter-filled {
  background: rgba(29, 161, 242, 0.7);
}

.team-item .overlay-social-icon .social-icons li .lni-twitter-filled:hover {
  background: #1da1f2;
}

.team-item .overlay-social-icon .social-icons li .lni-google-plus {
  background: rgba(9, 63, 11, 0.7);
}

.team-item .overlay-social-icon .social-icons li .lni-google-plus:hover {
  background: #0a3b0d;
}

.team-item .overlay-social-icon .social-icons li .lni-pinterest {
  background: rgba(195, 8, 8, 0.7);
}

.team-item .overlay-social-icon .social-icons li .lni-pinterest:hover {
  background: #bd081c;
}

.team-item .info-text {
  padding: 20px 0px 5px;
}

.team-item .info-text h3 {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 5px;
}

.team-item .info-text h3 a {
  color: #212121;

}

.team-item .info-text h3 a:hover {
  color: #4285f4;
}

.team-item .info-text p {
  margin: 0;
  color: #888;
}

.team-item:hover .team-overlay {
  opacity: 1;
}

.team-item:hover .social-icons {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  transform: translateY(0px);
}

.blog-item {
  background-color: #fff;
  border-radius: 7px;
  margin-bottom: 30px;
  text-align: center;
  box-shadow: 0 8px 24px #E2E8ED;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.blog-item .blog-image {
  width: 100%;
  max-width: 370px;
  position: relative;
  overflow: hidden;
}

.blog-item .blog-image img {
  background: #000;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.blog-item .icon {
  position: absolute;
  top: -25px;
  left: 42%;
  background-image: linear-gradient(65deg, #4285f4 0, #81abef 100%);
  color: #ffffff;
  display: block;
  font-size: 26px;
  box-shadow: 0 16px 48px #E2E8ED;
  width: 60px;
  height: 60px;
  line-height: 65px;
  border-radius: 30px;
}

.blog-item .descr {
  padding: 50px 25px 20px;
  color: #212121;
  position: relative;
}

.blog-item .descr h3 {
  line-height: 22px;
  margin-bottom: 15px;
}

.blog-item .descr h3 a {
  font-weight: 400;
  text-align: center;
  font-size: 20px;
  color: #212121;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.blog-item .descr h3 a:hover {
  color: #4285f4;
}

.blog-item .meta-tags {
  background: #f5f6f6;
  padding: 10px;
}

.blog-item .meta-tags span {
  font-size: 14px;
  color: #999;
  margin: 15px;
}

.blog-item .meta-tags span i {
  margin-right: 5px;
  color: #4285f4;
}

.blog-item .meta-tags span a {
  color: #999;
}

.blog-item .meta-tags span a:hover {
  color: #4285f4;
}

.blog-item:hover {
  box-shadow: 0 16px 48px #E2E8ED;
}

.blog-item:hover .blog-image img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.blog-item .btn-register {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  font-size: 16px;
  color: #ffffff;
  background-color: #4285f4;
  border-radius: 5px;
  text-decoration: none;
  text-transform: capitalize; /* Capitalize only the first letter */

  transition: background-color 300ms ease-in-out;
}

.blog-item .btn-register:hover {
  background-color: #357ae8;
}




/* Conact Home Page Section */
.contact {
  background: #111111;
}

#conatiner-map {
  width: 100%;
  height: 580px;
}

#contact-title .section-title {
  color: #ffffff; /* White color for the title text */
}


.title-forme {
  font-size: 28px;
  margin-bottom: 20px;
}

.contact-item {
  position: relative;
  text-align: center;
}

.contact-item i {
  width: 70px;
  height: 70px;
  display: inline-block;
  line-height: 70px;
  font-size: 24px;
  text-align: center;
  margin-bottom: 30px;
  background: #2d2d2d;
  color: #fff;
  border-radius: 4px;
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
}

.contact-item .contact-info h3 {
  color: #4285f4;
  font-size: 18px;
  margin-bottom: 10px;
}

.contact-item .contact-info p {
  color: #fff;
}

/* Contact Forme */
#google-map-area {
  position: relative;
}

#google-map-area .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.container-form {
  left: 0%;
  padding: 40px 15px;
  margin-left: -15px;
  z-index: 99;
}

.container-form .form-wrapper {
  background-color: white;
  padding: 56px;
  box-shadow: 0 8px 24px #1576c5;
}

.container-form .form-wrapper .form-group {
  margin-bottom: 30px;
}

.container-form .form-wrapper .form-control {
  display: block;
  width: 100%;
  line-height: 26px;
  font-size: 14px;
  box-shadow: none;
  color: #4a4848;
  background: #f7f7f7;
  border: 1px solid transparent;
  padding: 7px 19px;
  border-radius: 30px;
  background-image: none;
  background-clip: padding-box;
}

.container-form .form-wrapper .form-control:focus {
  color: #212121;
  background-color: #dbd6d6;
  border-color: #4285f4;
  box-shadow: none;
  outline: 0;
}

.container-form textarea {
  border-radius: 4px !important;
}

.form-submit .btn-common {
  width: 100%;
}

.list-unstyled li {
  margin-top: 10px;
  color: #2961bb !important;
}

.text-danger {
  margin-top: 20px;
  font-size: 18px;
}

.form-control {
  display: block;
  width: 100%;
  line-height: 27px;
  font-size: 14px;
  box-shadow: none;
  color: #848080;
  background: #5b5959;
  padding: 7px 19px;
  border: 1px solid #575656;
  border-radius: 0px;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}

.form-control:focus {
  border-color: #4285f4;
  box-shadow: none;
  outline: 0;
}

/* Inforamation Bar */
#contact-text {
  background: #181818;
}

#contact-text .contact-wrapper {
  background: #fff;
  margin-bottom: -35px;
  margin-top: -20px;
  padding: 30px 0;
  border-radius: 4px;
  position: relative;
  top: -40px;
  z-index: 999;
}

#contact-text ul {
  text-align: center;
}

#contact-text ul li {
  display: inline-block;
}

#contact-text ul li i {
  text-align: center;
  padding: 0 12px;
  font-size: 28px;
  vertical-align: middle;
  color: #4285f4;
}

#contact-text ul li span {
  font-size: 14px;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

#contact-text ul li span b {
  font-size: 20px;
  color: #192228;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}
/* Full-page video background */
#contact-map {
  position: relative;
  overflow: hidden; /* Ensure video does not overflow its container */
  min-height: 100vh; /* Ensure the section covers the full height of the viewport */
}

#contact-map #bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 300vw; /* Full viewport width */
  height: 300vh; /* Full viewport height */
  object-fit: cover; /* Scale the video to cover the entire area without distortion */
  z-index: -1; /* Place the video behind the content */
}

/* Additional styling for better content visibility */
#contact-map .container {
  position: relative;
  z-index: 2;
  color: #ffffff; /* Adjust text color for readability */
  text-align: center;
}

/* Adjust container-form positioning */
.container-form {
  position: relative;
  z-index: 2; /* Ensure form is above the video */
}

/* Footer Area Start */
footer {
  background: #161E26;
  text-align: center;
}

.site-info {
  position: relative;
  padding: 30px 0;
  margin-bottom: 30px;
}

.site-info p {
  font-size: 13px;
  color: #9e9e9e;
}

.site-info a {
  color: #fff;
}

.site-info a:hover {
  color: #4285f4;
}

.social-icons-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-icons-footer ul li {
  display: inline-block;
}

.social-icons-footer a {
  color: #888;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 15px;
  border-radius: 4px;
  border: 1px solid rgba(255, 254, 254, 0.07);
  line-height: 40px;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 16px;
}

.social-icons-footer .facebook a:hover {
  border-color: #4867aa;
  color: #4867aa;
}

.social-icons-footer .twitter a:hover {
  border-color: #1da1f2;
  color: #1da1f2;
}

.social-icons-footer .linkedin a:hover {
  border-color: #0077B5;
  color: #0077B5;
}

.social-icons-footer .google a:hover {
  border-color: #17580e;
  color: #17580e;
}

.social-icons-footer .pinterest a:hover {
  border-color: #bd081c;
  color: #bd081c;
}

.link-list {
  margin: 15px;
}

.link-list li {
  display: inline-block;
  padding: 7px 10px;
}

.link-list li a {
  color: #9e9e9e;
}

.link-list li a:hover {
  color: #4285f4;
}

.social-links {
  margin-top: 1rem;
}

.social-links a {
  color: #003366; /* Dark blue */
  margin: 0 0.5rem;
  font-size: 1.5rem; /* Increased size for better visibility */
  text-decoration: none;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #007bff; /* Blue on hover */
}
/* Subscribe Form */
.subscribe-inner {
  padding: 50px 0;
  text-align: center;
}

.subscribe-inner .subscribe-title {
  color: #fff;
  font-size: 26px;
  text-align: center; /* Correct property for centering text */
  margin-bottom: 50px;
  position: relative;
}

.subscribe-inner p {
  color: #888;
  margin-bottom: 30px;
}

.subscribe-inner .sub-btn {
  margin: 0;
  width: 12rem;
  padding: 18px 40px;
  border-radius: 30px;
  min-width: 12rem;
  position: absolute;
  top: 0;
  border: none;
  bottom: 0;
  right: 0;
}

.subscribe-inner .sub-btn i {
  margin-right: 5px;
}

.subscribe-inner .form-control {
  position: relative;
  background: #252D37;
  border: 1px solid #252D37;
  border-radius: 0px;
  box-shadow: none;
  color: #fff !important;
  border-radius: 30px;
  height: 55px;
  margin-right: -1px;
  width: 90%;
}

.subscribe-inner .form-control:focus {
  color: #212121;
  border-color: #4285f4;
  outline: 0;
}

.subscribe-inner .form-inline {
  position: relative;
  margin-bottom: 30px;
  margin: 0 auto;
  width: 100%;
}

.footer-logo {
  margin-bottom: 50px;
}

/* ==========================================================================
   Countdown Style Start
   ========================================================================== */
#count {
  background: #F6F9F9;
}

/* Default styles for larger screens */
#count .count-wrapper {
  background-image: linear-gradient(65deg, #4285f4 0, #8cb1ec 100%);
  border-radius: 4px;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  margin-bottom: -35px;
  margin-top: -35px;
  padding: 15px 0;
  position: relative;
  top: -40px;
  z-index: 999;
  display: inline-block;
  width: 100%;
}
/* Styles for screens 991px and smaller */
@media (max-width: 991px) {
  #count .count-wrapper {
    padding: 10px 0; /* Reduce padding for smaller screens */
    font-size: 12px; /* Reduce font size to fit smaller space */
  }
}

/* Styles for screens 767px and smaller */
@media (max-width: 767px) {
  #count .count-wrapper {
    padding: 5px 0; /* Further reduce padding for very small screens */
    font-size: 10px; /* Further reduce font size for very small screens */
    margin: 0 auto; /* Center the wrapper if necessary */
    width: 100%; /* Ensure full width */
  }
}


.time-count div {
  text-align: center;
}

.time-entry {
  display: block;
  margin: 15px 0;
  width: 24%;
  float: left;
  margin-right: 0;
  border: none;
  position: relative;
  height: auto;
  font-family: 'Product Sans', sans-serif;
  border-radius: 4px;
  text-align: center;
  font-weight: 400;
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 22px;
}

.time-entry span {
  font-size: 60px;
  line-height: 45px;
  font-weight: 700;
  letter-spacing: 0.3;
  font-family: 'Product Sans', sans-serif;
  display: block;
  color: #fff;
  margin-bottom: 10px;
}

.time-entry b {
  position: absolute;
  right: 0;
  top: 50%;
  bottom: 0;
  margin: auto;
  font-size: 30px;
  -webkit-transform: translateY(-18%);
  -ms-transform: translateY(-18%);
  transform: translateY(-18%);
}

.time-entry:first-child {
  border-left: none;
}

/* Pricing Ticket */
#pricing {
  background: #f8fafa;
  position: relative;
}

#pricing .price-block-wrapper {
  display: inline-block;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 24px #1d5bb1;
  border-radius: 4px;
  background: #ffffff;
  padding: 50px 40px;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

#pricing .price-block-wrapper .icon {
  padding: 20px;
}

#pricing .price-block-wrapper .icon i {
  font-size: 60px;
  color: #1d5bb1;
}

#pricing .price-block-wrapper .colmun-title h5 {
  font-size: 20px;
  color: #212121;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 700;
}

#pricing .price-block-wrapper .price {
  padding-top: 10px;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
}

#pricing .price-block-wrapper .price h2 {
  font-size: 38px;
  background-image: linear-gradient(65deg, #1d5bb1 0, #1d5bb1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 42px;
  margin-bottom: 7px;
}

#pricing .price-block-wrapper .price span {
  text-transform: uppercase;
  font-size: 13px;
}

#pricing .price-block-wrapper .price p {
  font-size: 15px;
  color: #5c5c5c;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 30px;
  text-transform: uppercase;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
}

#pricing .price-block-wrapper .pricing-list {
  padding: 15px 0;
}

#pricing .price-block-wrapper .pricing-list ul {
  padding-bottom: 15px;
}

#pricing .price-block-wrapper .pricing-list ul li {
  position: relative;
  line-height: 40px;
  font-size: 15px;
  font-weight: 400;
  padding: 2px 0px;
}

#pricing .price-block-wrapper .pricing-list ul li i {
  margin-right: 7px;
  font-size: 12px;
  color: #1d5bb1;
}



#pricing .price-block-wrapper .btn i {
  font-size: 12px;
  margin-right: 5px;
}

#pricing .price-block-wrapper:hover {
  box-shadow: 0 16px 48px #1d5bb1;
}

#pricing .active {
  background-image: linear-gradient(65deg, #ffffff 0, #ffffff 100%);
  box-shadow: 0 16px 48px #1d5bb1;
}

#pricing .active .icon i {
  color: #1d5bb1;
}

#pricing .active .colmun-title h5 {
  color: #0b0b0b;
}

#pricing .active .price h2 {
  background-image: linear-gradient(120deg, #1d5bb1 0%, #1d5bb1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#pricing .active .price span {
  color: #080606;
}

#pricing .active .price p {
  color: #0b0b0b;
}

#pricing .active .pricing-list ul li {
  color: #080808;
}

#pricing .active .pricing-list ul li i {
  color: #2210a5;
}

#pricing .active .btn {
  background: #1d5bb1;
  color: #ffffff;
}

/* Add this to your existing CSS */
#pricing .row {
  display: flex;
  justify-content: center;
  align-items: stretch; /* Ensure columns are aligned properly */
}

#pricing .col-lg-4,
#pricing .col-md-6,
#pricing .col-xa-12 {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
3. Hero Area
========================================================================== */
.hero-area-bg {
  background: url(../img/foto.jpg) no-repeat;
  background-size: cover;
}

#hero-area {
  color: #fff;
  overflow: hidden;
  position: relative;
}

#hero-area .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.7);
}

#hero-area .contents {
  padding: 160px 20px 180px;
}

#hero-area .contents .icon {
  margin-bottom: 30px;
}

#hero-area .contents .icon {
  width: 50px; /* Adjust size as needed */
  height: 50px; /* Adjust size as needed */
 
  display: flex; /* Center content */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
}

#hero-area .contents .icon img {
  max-width: 100%; /* Ensure the image does not overflow */
  max-height: 100%; /* Ensure the image does not overflow */
  object-fit: contain; /* Maintain aspect ratio */
}


.contents {
  text-align: center; /* Center text and contents inside */
}

.icon {
  width: 100px; /* Adjust size as needed */
  height: 100px; /* Adjust size as needed */
  display: flex; /* Use flexbox for centering */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  margin: auto; /* Center the .icon itself if needed */
}

.icon img {
  max-width: 100%; /* Ensure the image scales with the container */
  max-height: 100%; /* Ensure the image scales with the container */
  object-fit: contain; /* Maintain aspect ratio */
}

#hero-area .contents .banner-info {
  font-size: 18px;
  font-style: italic;
  margin-bottom: 22px;
  line-height: 24px;
  color: #fff;
}

#hero-area .contents .head-title {
  color: #fff;
  font-size: 48px;
  line-height: 48px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 22px;
}

#hero-area .contents .banner-desc {
  font-size: 17px;
  font-weight: 400;
  color: #fff;
  line-height: 30px;
  margin-bottom: 30px;
  padding: 0px 70px;
}

#hero-area .contents .btn {
  margin: 0px 10px 0px;
  font-size: 16px;
  padding: 12px 40px;
  text-transform: uppercase;
}
/* Responsive styles for smaller screens */
@media (max-width: 991px) {
  .hero-area-bg {
    background-size: cover; /* Keep the image covering the entire area */
    background-position: center center; /* Ensure the image stays centered */
    background-attachment: scroll; /* Ensure the image scrolls with the content */
  }
  
  #hero-area .contents {
    padding: 100px 20px 120px;
  }
}

@media (max-width: 768px) {
  .hero-area-bg {
    background-size: cover; /* Cover the area while maintaining proportions */
    background-position: center center; /* Keep the image centered */
  }

  #hero-area .contents {
    padding: 80px 15px 100px;
  }
}

@media (max-width: 576px) {
  .hero-area-bg {
    background-size: cover; /* Ensure the image fills the whole section */
    background-position: center center; /* Keep it centered */
  }

  #hero-area .contents {
    padding: 60px 10px 80px;
  }
}



/* ===== MOBILE FIXES ===== */
@media (max-width: 768px) {

  /* Make rows stack and center */
  #sponsors .sponsors-logo,
  #sponsors1 .sponsors-logo {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  /* Each sponsor takes ~45% width on tablet */
  #sponsors .sponsor-item,
  #sponsors1 .sponsor-item {
    flex: 1 0 45%;
    max-width: 45%;
  }

  /* Images shrink on smaller screens */
  #sponsors .sponsor-item a,
  #sponsors1 .sponsor-item a {
    width: 120px;
    height: 120px;
  }

  /* Text smaller */
  #sponsors .sponsor-name,
  #sponsors1 .sponsor-name {
    font-size: 12px;
  }

  /* Buttons scale down */
  #sponsors .read-more-button,
  #sponsors1 .read-more-button {
    min-width: 100px !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
  }

  /* Golden & Platinum cards take full width */
  #sponsors .golden-sponsor,
  #sponsors .platinum-sponsor {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }
}

/* ----- Extra small screens (phones) ----- */
@media (max-width: 480px) {

  /* Each logo item becomes full width */
  #sponsors .sponsor-item,
  #sponsors1 .sponsor-item {
    flex: 1 0 100%;
    max-width: 100%;
  }

  #sponsors .sponsor-item a,
  #sponsors1 .sponsor-item a {
    width: 100px;
    height: 100px;
  }

  #sponsors .sponsor-name,
  #sponsors1 .sponsor-name {
    font-size: 11px;
  }
}