/********** Template CSS **********/
:root {
  --primary: #feb147;
  --light: #f0fbfc;
  --dark: #181d38;
  --bs-blue: #027dbf;
}

@font-face {
  font-family: 'cabin';
  src: url('../font/cabin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Apply the font to your elements */
body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'cabin', sans-serif !important;
}

.fw-medium {
  font-weight: 600 !important;
}

.fw-semi-bold {
  font-weight: 700 !important;
}

.back-to-top {
  position: fixed !important;
  display: none;
  right: 45px;
  bottom: 45px;
  z-index: 99;
}

/*** Spinner ***/
#spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
  z-index: 99999;
}

#spinner.show {
  transition: opacity 0.5s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 1;
}

/*** Button ***/
.btn {
  font-family: 'cabin', sans-serif;
  transition: 0.5s;
}

.btn.btn-primary,
.btn.btn-secondary {
  color: #ffffff;
}

.btn-square {
  width: 38px;
  height: 38px;
}

.btn-sm-square {
  width: 32px;
  height: 32px;
}

.btn-lg-square {
  width: 48px;
  height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  border-radius: 0px;
}

/*custom css starts*/

.text-primary {
  color: #feb147 !important;
}

.bg-dark {
  background: linear-gradient(to right, #015f91, #027dbf) !important;
  background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(to right, #015f91, #027dbf) !important;
  background-blend-mode: overlay, normal !important;
}

.blog p {
  text-align: justify;
}

.taj {
  text-align: justify;
}

.st_goal {
  height: auto;
  background: url("../img/bg1.png");
  background-size: cover;
  padding: 50px 0;
}
.st_goal p {
  text-align: center;
}

.box {
  border-top: 3px solid #027dbf;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 0 40px #ddd;
  height: 100%;
}

.box h6 {
  color: #fff;
  font-size: 25px;
  float: none;
  margin: 0 auto;
  text-align: center;
  position: relative;
  width: 60px;
  height: 60px;
  line-height: 60px;
  background-color: #027dbf;
  box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    100px 100px 80px rgba(0, 0, 0, 0.07);
  border-radius: 100%;
  margin-bottom: 30px;
  transition: transform 1.2s, background-color 0.2s;
  transform-origin: center;
}

.box:hover h6 {
  background: var(--primary);
  transform: rotateY(360deg);
}

.btn-light {
  position: relative;
  display: inline-block;
  background: linear-gradient(to right, #027dbf, #027dbf);
  /* Initial blue gradient */
  color: #fff;
  /* Text color */
  border: 2px solid #027dbf;
  /* Match initial color */
  text-decoration: none;
  /* Remove underline */
  overflow: hidden;
  /* Clip the hover effect */
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  /* Smooth text & border transitions */
}

.btn-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #feb147, #fea120);
  /* Hover gradient */
  transform: translateX(-100%);
  /* Start outside the button */
  transition: transform 0.2s ease-in-out;
  /* Smooth slide-in effect */
  z-index: 1;
  /* Place behind the text */
}

.btn-light:hover::before {
  transform: translateX(0);
  /* Slide in the gradient */
}

.btn-light:hover {
  border-color: #e27304;
  /* Change border to orange */
  color: #fff;
}

.btn-light span {
  position: relative;
  z-index: 2;
  /* Keep text above gradient */
}

.btn-primary {
  position: relative;
  display: inline-block;
  background: linear-gradient(to right, #feb147, #fea120);
  /* Initial orange gradient */
  color: #fff;
  /* Text color */
  border: 2px solid #f78c20;
  /* Match initial color */
  text-decoration: none;
  /* Remove underline */
  overflow: hidden;
  /* Clip the hover effect */
  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  /* Smooth text & border transitions */
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #027dbf, #02679d);
  /* Hover gradient (blue to darker blue) */
  transform: translateX(-100%);
  /* Start outside the button */
  transition: transform 0.2s ease-in-out;
  /* Smooth slide-in effect */
  z-index: 1;
  /* Place behind the text */
}

.btn-primary:hover::before {
  transform: translateX(0);
  /* Slide in the blue gradient */
}

.btn-primary:hover {
  border-color: #027dbf;
  /* Change border to blue */
  color: #fff;
  /* Text stays white */
}

.btn-primary span {
  position: relative;
  z-index: 2;
  /* Ensure text stays above the gradient */
}

@media (min-width: 1200px) {
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
}

/*custom css ends*/

/*** Navbar ***/
.navbar .dropdown-toggle::after {
  border: none;
  content: "\f107";
  font-family: "FontAwesome";
  font-weight: 900;
  vertical-align: middle;
  margin-left: 8px;
}

.navbar-light .navbar-nav .nav-link {
  padding: 25px 12px;
  color: #ffffff;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--primary);
}

.nav-link:hover {
  background: #b8c730;
  color: #fff !important;
}

@media (max-width: 991.98px) {
  .navbar-light .navbar-nav .nav-link {
    margin-right: 0;
    padding: 10px 0;
  }

  .navbar-light .navbar-nav {
    border-top: 1px solid #eeeeee;
  }
}

.navbar-light .navbar-brand,
.navbar-light a.btn {
  height: 76px;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--dark);
  font-weight: 500;
}

.navbar-light.sticky-top {
  top: -100px;
  transition: 0.5s;
}

@media (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: block;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
  }

  .navbar .dropdown-menu.fade-down {
    top: 100%;
    transform: rotateX(-75deg);
    transform-origin: 0% 0%;
  }

  .navbar .nav-item:hover .dropdown-menu {
    top: 100%;
    transform: rotateX(0deg);
    visibility: visible;
    transition: 0.5s;
    opacity: 1;
  }
}

/*** Header carousel ***/
@media (max-width: 768px) {
  .header-carousel .owl-carousel-item {
    position: relative;
    min-height: 500px;
  }

  .header-carousel .owl-carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.header-carousel .owl-nav {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
  margin: 7px 0;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: transparent;
  border: 1px solid #ffffff;
  font-size: 22px;
  transition: 0.5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
  background: var(--primary);
  border-color: var(--primary);
}

.page-header {
  background: linear-gradient(rgba(24, 29, 56, 0.7), rgba(24, 29, 56, 0.7)),
    url(../img/carousel-1.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-header-inner {
  background: rgba(15, 23, 43, 0.7);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--light);
}

/*** Section Title ***/
.section-title {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
}

.section-title::before {
  position: absolute;
  content: "";
  width: calc(100% + 80px);
  height: 2px;
  top: 4px;
  left: -40px;
  background: #b8c730;
  z-index: -1;
}

.about_us .fa {
  color: #b8c730;
}

.section-title::after {
  position: absolute;
  content: "";
  width: calc(100% + 120px);
  height: 2px;
  bottom: 5px;
  left: -60px;
  background: #b8c730;
  z-index: -1;
}

.logo_scroll {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}

.logo_scroll_outer {
  overflow: hidden;
}

.logo_scroll img {
  margin-right: 20px;
  height: 100px;
  /* Adjust as needed */
}

@keyframes scroll {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}

h1 {
  color: var(--bs-blue);
}

.nav-bar-top {
  background: #027dbf;
  color: #fff;
  text-align: right;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 14px;
}

.my-banner {
  background: url("../img/banner2.png");
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #cee;
}

.nav-bar-top a {
  color: #fff;
  padding-right: 15px;
}

.nav-bar-top a:hover {
  text-decoration: underline;
}

.b1 {
  border: 1px solid #ccc;
}

.section-title.text-start::before {
  width: calc(100% + 40px);
  left: 0;
}

.section-title.text-start::after {
  width: calc(100% + 60px);
  left: 0;
}

/*** Service ***/
.service-item {
  background: var(--light);
  transition: 0.5s;
  flex: 1 1 calc(25% - 16px); /* 25% width minus gutter space */
  display: flex;
  flex-direction: column; /* Ensures content stacks vertically */
  justify-content: space-between; /* Distributes space evenly */
  height: 100%; /* Ensures equal height */
}

.service-item .fa {
  color: #b8c730;
}

.about_us .service-item {
  border: 1px solid var(--bs-blue);
}

.service-item:hover {
  margin-top: -10px;
  background: var(--primary);
}

.service-item * {
  transition: 0.5s;
}

.service-item:hover * {
  color: #02679d !important;
}

/*** Categories & Courses ***/
.category img,
.course-item img {
  transition: 0.5s;
}

.category a:hover img,
.course-item:hover img {
  transform: scale(1.1);
}

/*** Team ***/
.team-item img {
  transition: 0.5s;
}

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

.page_desc {
  font-style: italic;
}

.testimonials {
  overflow: hidden;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.testimonial_outer {
  background: url("../img/testmonial.png");
  position: relative;
}

.testimonial_outer:before {
  position: absolute;
  content: " ";
  background-color: #000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

/* Ensure .owl-nav is positioned correctly */
.owl-nav {
  width: 100%; /* Span the full width of the container */
  pointer-events: none; /* Ensure custom buttons handle the clicks */
}

/* Style the .owl-prev button */
.owl-prev {
  position: absolute;
  left: -10px; /* Position it outside the container */
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
  pointer-events: all; /* Allow clicks */
  z-index: 10;
  padding: 10px 19px;
  border-radius: 50%;
  background: #b8c730;
}

/* Style the .owl-next button */
.owl-next {
  position: absolute;
  right: -10px; /* Position it outside the container */
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
  pointer-events: all; /* Allow clicks */
  z-index: 10;
  padding: 10px 19px;
  border-radius: 50%;
  background: #b8c730;
}

.owl-next:hover,
.owl-prev:hover {
  background: #f78c20;
}

/* Style the custom buttons inside the .owl-prev and .owl-next */
.custom-prev,
.custom-next {
  background-color: #fff; /* Button background color */
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  color: #000; /* Button text color */
  cursor: pointer;
  border-radius: 50%; /* Make them circular */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

/* Prevent .owl-nav default styling */
.owl-nav button {
  all: unset; /* Reset default button styles */
}

.testi_carousel h5,
.testi_carousel p {
  color: #fff;
}

.logo {
  max-width: 228px;
}

#courseTabs button:hover,
#courseTabs button.active {
  background: #b8c730;
  color: #fff;
}

/*** Testimonial ***/
/* .testimonial-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.testimonial-carousel::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
} */

@media (min-width: 768px) {
  .testimonial-carousel::before,
  .testimonial-carousel::after {
    width: 200px;
  }
}

@media (min-width: 992px) {
  .testimonial-carousel::before,
  .testimonial-carousel::after {
    width: 300px;
  }
}

.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item.center .testimonial-text * {
  transition: 0.5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
  background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
  color: #ffffff !important;
}

.testimonial-carousel .owl-dots {
  margin-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.testimonial-carousel .owl-dot {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  width: 15px;
  height: 15px;
  border: 1px solid #cccccc;
  transition: 0.5s;
}

.testimonial-carousel .owl-dot.active {
  background: var(--primary);
  border-color: var(--primary);
}

/*** Footer ***/
.footer .btn.btn-social {
  margin-right: 5px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  font-weight: normal;
  transition: 0.3s;
}

.footer .btn.btn-link {
  display: block;
  margin-bottom: 5px;
  padding: 0;
  text-align: left;
  color: #ffffff;
  font-size: 15px;
  font-weight: normal;
  text-transform: capitalize;
  transition: 0.3s;
}

.features .fa,
.about_uss .fa {
  font-size: 3em;
  margin-bottom: 1.5rem;
}

.footer .btn.btn-link::before {
  position: relative;
  content: "\f105";
  font-family: "FontAwesome";
  font-weight: 900;
  margin-right: 10px;
}

p.ql-align-justify {
  text-align: justify !important;
}

.footer .btn.btn-link:hover {
  letter-spacing: 1px;
  box-shadow: none;
}

.footer .copyright {
  padding: 25px 0;
  font-size: 15px;
  border-top: 1px solid rgba(256, 256, 256, 0.1);
}

.footer .copyright a {
  color: var(--light);
}

.footer .footer-menu a {
  margin-right: 15px;
  padding-right: 15px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .footer-menu a:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

.footer .btn.btn-social:hover {
  color: red;
}

.course-item {
  overflow: hidden;
}

.footer .btn.btn-social:hover .fa-twitter {
  color: #329dfe;
}
.footer .btn.btn-social:hover .fa-facebook-f {
  color: #3747c0;
}
.footer .btn.btn-social:hover .fa-youtube {
  color: #dc0101;
}
.footer .btn.btn-social:hover .fa-linkedin-in {
  color: #02588a;
}

.checkbox-modal {
  width: 20px;
  height: 20px;
  accent-color: #b8c730;
  border: 1px solid #02588a;
  cursor: pointer;
  margin-right: 10px;
}

.checkbox-modal {
  appearance: none;
  background-color: white;
  border: 2px solid #02588a;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.checkbox-modal:checked {
  padding: 2px;
  border-color: #02588a;
}

.checkbox-modal:checked::after {
  content: "✔";
  color: #02588a;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  left: 3px;
  top: -2px;
}
.modal-bg-title {
  background-color: var(--bs-blue);
  color: #fff !important;
}
.modal-bg-title h6 {
  color: #fff !important;
}

.modal-bg-title button {
  background-color: transparent;
  color: #fff !important;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 2px solid #fff;
  font-size: 20px;
}
.modal-bg-title button:hover {
  border: 2px solid var(--primary);
  color: var(--primary) !important;
}
.close-btn-x {
  position: relative !important;
  top: -1.5px !important;
}
.modal {
  top: 5%;
}

.posts h2 {
  background: #027dbf;
  padding: 12px 15px;
  width: 100%;
  display: block;
  color: #fff;
  margin-bottom: 10px;
  font-size: 26px;
}
.dropdown-menu
{
  min-width: 215px;;
}

.wp-sticky
{
    position: fixed !important;
    right: 45px;
    bottom: 100px;
    z-index: 99;
}

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


@media (min-width: 1200px) {
  .display-3 {
      font-size: 50px;
  }
}