.custom-swiper-navigation {
  text-align: center;
  margin-top: 20px;
}

.custom-swiper-navigation .btn {
  margin: 0 10px;
}

.custom-swiper-navigation .fa {
  margin-right: 5px;
}

.swiper-container {
  position: relative;
}

.custom-nav-buttons {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
  /* This ensures that the buttons don't block the slider */
}

.custom-nav-buttons .swiper-button-prev,
.custom-nav-buttons .swiper-button-next {
  pointer-events: auto;
  /* Make sure buttons are clickable */
  background-color: #fff;
  /* Button background */
  border-radius: 50%;
  padding: 10px;
  font-size: 18px;
  color: #000;
  /* Icon color */
  cursor: pointer;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.custom-nav-buttons .swiper-button-prev {
  left: -40px;
  /* Move button to the left outside the slider */
}

.custom-nav-buttons .swiper-button-next {
  right: -40px;
  /* Move button to the right outside the slider */
}

#custom-prev {
  box-shadow: -4px 0px 6px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
  border-radius: 20% !important;
}

#custom-next {
  box-shadow: 4px 0px 6px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
  border-radius: 20% !important;
}

#custom-prev:hover {
  box-shadow: -6px 0px 8px rgba(0, 0, 0, 0.5);
}

#custom-next:hover {
  box-shadow: 6px 0px 8px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey !important;
  border-radius: 10px !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: red !important;
  border-radius: 10px !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000 !important;
}

/* Fonts */
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;
  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #444444;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #545454;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #742d2b;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: #444444;

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #742d2b;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: #ffffff;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #444444;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #e96b56;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

.main-cap {
  color: #000000bd !important;
  font-size: 16px !important;
}

.theme-color {
  color: var(--accent-color) !important;
}

.theme-color-bg {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.smooth-bg-color {
  background-color: #f0ebeb !important;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
  box-shadow: 0px 0px 20px 0px color-mix(in srgb, var(--default-color), transparent 90%);
}

.header .topbar {
  background-color: var(--accent-color);
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--contrast-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--contrast-color);
}

@media (max-width: 575px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: color-mix(in srgb, var(--contrast-color), transparent 0%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: white;
}

.header .branding {
  /* padding: 10px 0; */
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 65px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 26px;
  padding: 0 0 0 8px;
  margin: 11px 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  /* border-left: 8px solid var(--accent-color); */
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 14px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
    background-color: var(--nav-hover-bg);
    /* font-weight: bold; */
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -138% !important;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

.bi-chevron-right,
.bi-chevron-left {
  color: var(--accent-color) !important;
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: #3c3c3c;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  /* padding-bottom: 50px; */
  position: relative;
}

.footer .footer-newsletter {
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  padding: 50px 0;
}

.footer .footer-newsletter h4 {
  font-size: 24px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  background-color: var(--contrast-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  display: flex;
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type="email"] {
  border: 0;
  padding: 4px 8px;
  width: 100%;
  background-color: var(--contrast-color);
  color: var(--background-color);
}

.footer .footer-newsletter .newsletter-form input[type="email"]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type="submit"] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -9px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form input[type="submit"]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: subscription-loading 1s linear infinite;
}

@keyframes subscription-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

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

.footer .footer-links ul i {
  margin-right: 3px;
  font-size: 12px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-about a {
  color: var(--heading-color);
  font-size: 24px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 40px 0px !important;
  position: relative;
}

.forgot-pass {
  max-width: 400px !important;
}

.blog-details {
  text-decoration: none !important;
  color: inherit !important;
}

.bg-trans {
  background-color: transparent !important;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 40px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 20px;
  position: relative;
}

.hel {
  text-align: left !important;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  padding: 0;
}

.hero .carousel {
  width: 100%;
  min-height: 81vh;
  padding: 0;
  margin: 0;
  background-color: var(--background-color);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

@media (max-height: 400px) {
  .hero .carousel {
    min-height: 100vh;
  }
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .carousel-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero .carousel-item:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 20%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .carousel-item::before {
  content: "";
  background-color: color-mix(in srgb,
      var(--background-color),
      transparent 20%);
  position: absolute;
  inset: 0;
}

.hero .carousel-container {
  position: absolute;
  inset: 90px 64px 64px 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 3;
  text-align: center;
}

.hero .carousel-item h2 {
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
  animation: fadeInDown 1s both;
}

.hero .carousel-item h2 span {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .hero .carousel-item h2 {
    font-size: 30px;
  }
}

.hero .carousel-item p {
  animation: fadeInDown 1s both 0.2s;
}

@media (min-width: 1024px) {

  .hero h2,
  .hero p {
    max-width: 60%;
  }
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  animation: fadeInUp 1s both 0.4s;
}

.hero .btn-get-started:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 15%;
  transition: 0.3s;
  opacity: 0.4;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
  opacity: 0.5;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  opacity: 0.9;
}

@media (min-width: 1024px) {

  .hero .carousel-control-prev,
  .hero .carousel-control-next {
    width: 5%;
  }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: none;
  color: var(--default-color);
  font-size: 48px;
  line-height: 1;
}

.hero .carousel-indicators li {
  list-style-type: none;
  cursor: pointer;
  background: var(--accent-color);
  overflow: hidden;
  border: 0;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  margin-bottom: 180px;
  opacity: 0.2;
}

.hero .carousel-indicators li.active {
  opacity: 1;
}

@media (max-height: 768px),
(max-width: 1024px) {
  .hero .carousel-indicators li {
    margin-bottom: 20px;
  }
}

.hero .featured {
  margin-top: -150px;
  padding-top: 30px;
  padding-bottom: 30px;
  position: relative;
  z-index: 2;
}

@media (max-height: 768px),
(max-width: 1024px) {
  .hero .featured {
    margin-top: 0;
  }
}

.hero .featured-item {
  background-color: var(--contrast-color);
  box-shadow: 0px 0 25px 0 color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 40px 30px;
  transition: all 0.3s ease-in-out;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero .featured-item:before {
  content: "";
  position: absolute;
  background: var(--accent-color);
  inset: 100% 0 0 0;
  transition: all 0.3s;
  z-index: -1;
}

.hero .featured-item .icon {
  margin-bottom: 10px;
}

.hero .featured-item .icon i {
  color: var(--accent-color);
  font-size: 36px;
  transition: ease-in-out 0.3s;
}

.hero .featured-item h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.hero .featured-item h4 a {
  color: var(--heading-color);
  transition: ease-in-out 0.3s;
}

.hero .featured-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
  transition: ease-in-out 0.3s;
}

.hero .featured-item:hover h4 a,
.hero .featured-item:hover h5,
.hero .featured-item:hover h6,
.hero .featured-item:hover .icon i,
.hero .featured-item:hover p {
  color: var(--contrast-color);
}

.hero .featured-item:hover:before {
  background: var(--accent-color);
  inset: 0;
  border-radius: 0px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

.about .content .fst-italic {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 10px 0 0 0;
  display: flex;
}

.about .content ul i {
  color: var(--accent-color);
  margin-right: 0.5rem;
  line-height: 1.2;
  font-size: 1.25rem;
}

.about .content p:last-child {
  margin-bottom: 0;
}

.abt-img1 {
  box-shadow: -5px 5px 10px 0px;
  /* border-left: 0.5px solid black;
  border-top: 1px solid black; */
}

.abt-img2 {
  box-shadow: 5px 5px 10px 0px;
  /* border-left: 0.5px solid black;
  border-top: 1px solid black; */
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.serviceBox {
  position: relative;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  margin-bottom: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.serviceBox .service-icon {
  font-size: 50px;
  margin-bottom: 15px;
  color: var(--default-color);
}

.serviceBox .title {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.serviceBox .description {
  font-size: 16px;
  color: #777;
}

.serviceBox .more-content {
  display: none;
  /* margin-top: 15px; */
}

.serviceBox .view-more-btn {
  display: inline-block;
  /* margin-top: 10px; */
  /* padding: 10px 20px; */
  margin-left: -5px;
  font-size: 14px;
  color: var(--accent-color);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  position: relative;
  /* Ensure button stays within its context */
  z-index: 1;
  /* Ensure button is above other elements */
}

.more-cont {
  font-size: 14px !important;
  font-family: var(--heading-font) !important;
}

.serviceBox .view-more-btn:hover {
  background-color: transparent;
}

.serviceBox:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.serviceBox:hover .service-icon,
.serviceBox:hover .title,
.serviceBox:hover .description {
  z-index: 0;
}

.upward {
  position: absolute;
  z-index: 1;
}

/* .services .service-item:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.services .service-item:hover .icon {
  background: var(--contrast-color);
}

.services .service-item:hover .icon i {
  color: var(--accent-color);
}

.services .service-item:hover .icon::before {
  background: color-mix(in srgb, var(--background-color), transparent 70%);
}

.services .service-item:hover h3,
.services .service-item:hover p {
  color: var(--contrast-color);
} */

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
  filter: grayscale(100);
}

.clients .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}

.insightswipe1 {
  width: 231px !important;
  height: 320px !important;
  background-image: url(../img/blog/blog-author.jpg);
  background-position: center;
  margin-right: 54px !important;
}

.insightswipe2 {
  width: 231px !important;
  height: 320px !important;
  background-image: url(../img/blog/blog-2.jpg);
  background-position: center;
  margin-right: 54px !important;
}

.insightswipe3 {
  width: 231px !important;
  height: 320px !important;
  background-image: url(../img/blog/blog-recent-3.jpg);
  background-position: center;
  margin-right: 54px !important;
}

.insightswipe4 {
  width: 231px !important;
  height: 320px !important;
  background-image: url(../img/blog/comments-2.jpg);
  background-position: center;
  margin-right: 54px !important;
}

.insightswipe5 {
  width: 231px !important;
  height: 320px !important;
  background-image: url(../img/blog/comments-3.jpg);
  background-position: center;
  margin-right: 54px !important;
}

.insightswipe6 {
  width: 405px !important;
  height: 400px !important;
  background-image: url(../img/Board/Petrick.jpg);
  /* background-position: center; */
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 54px !important;
}

.insightswipe7 {
  width: 405px !important;
  height: 400px !important;
  background-image: url(../img/Board/gregoire.png);
  /* background-position: center; */
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 54px !important;
}

.insightswipe8 {
  width: 405px !important;
  height: 400px !important;
  background-image: url(../img/Board/maurizio.jpg);
  /* background-position: center; */
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 54px !important;
}

.insightswipe9 {
  width: 405px !important;
  height: 400px !important;
  background-image: url(../img/Board/AnaBer.jpg);
  /* background-position: center; */
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 54px !important;
}

.insightswipe10 {
  width: 405px !important;
  height: 400px !important;
  background-image: url(../img/Board/Dirk.png);
  /* background-position: center; */
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 54px !important;
}

.insightswipe11 {
  width: 405px !important;
  height: 400px !important;
  background-image: url(../img/Board/pierina.png);
  /* background-position: center; */
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 54px !important;
}

.insightswipeall {
  width: 405px !important;
  height: 400px !important;
  /* background-image: url(../img/Board/Petrick.jpg); */
  /* background-position: center; */
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 54px !important;
}

.board-head {
  margin-top: 18rem !important;
  color: white !important;
}

/* .insightswipe7 {
  width: 231px !important;
  height: 320px !important;
  background-image: url(../img/Board/gregoire.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 54px !important;
}

.insightswipe8 {
  width: 231px !important;
  height: 320px !important;
  background-image: url(../img/blog/comments-1.jpg);
  background-position: center;
  margin-right: 54px !important;
}

.insightswipe9 {
  width: 231px !important;
  height: 320px !important;
  background-image: url(../img/blog/comments-6.jpg);
  background-position: center;
  margin-right: 54px !important;
}

.insightswipe10 {
  width: 231px !important;
  height: 320px !important;
  background-image: url(../img/blog/blog-recent-4.jpg);
  background-position: center;
  margin-right: 54px !important;
} */

.interm-slider {
  color: black !important;
}

.approach-main {
  font-size: 60px;
}

.insightswipe-text {
  background-color: rgba(255, 255, 255, 0.381);
  margin-top: 160px;
}

.tem-prov-img {
  font-size: 50px;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.clients .swiper-button-next,
.clients .swiper-button-prev {
  color: #752b29;
  /* background-color: #752b297a; */
  /* padding: 20px; */
  transition: color 0.3s;
}

.card-bodies {
  height: 215px !important;
  box-shadow: 0px 0px 7px black;
}

.clients .swiper-button-next:hover,
.clients .swiper-button-prev:hover {
  color: #752b29;
  background-color: #752c2941;
  padding: 20px;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item i {
  color: var(--accent-color);
  display: block;
  font-size: 44px;
  float: left;
  line-height: 0;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 54px;
  line-height: 40px;
  display: block;
  font-weight: 700;
  /* margin-left: 60px; */
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0 0 0 60px;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
  box-shadow: 0px 2px 12px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  position: relative;
  height: 100%;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.skills .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.skills .content p:last-child {
  margin-bottom: 0;
}

.skills .content ul {
  list-style: none;
  padding: 0;
}

.skills .content ul li {
  padding-bottom: 10px;
}

.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  color: var(--default-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-content img {
  transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  position: relative;
  border-radius: 5px;
  transition: 0.5s;
  padding: 30px;
  height: 100%;
}

@media (max-width: 468px) {
  .team .team-member {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
  }
}

.team .team-member .pic {
  overflow: hidden;
  width: 150px;
  border-radius: 50%;
  flex-shrink: 0;
}

.team .team-member .pic img {
  transition: ease-in-out 0.3s;
}

.team .team-member:hover {
  transform: translateY(-10px);
}

.team .team-member .member-info {
  padding-left: 30px;
}

@media (max-width: 468px) {
  .team .team-member .member-info {
    padding: 30px 0 0 0;
    text-align: center;
  }
}

.team .team-member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
}

.team .team-member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.team .team-member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
  bottom: 0;
  left: 0;
}

@media (max-width: 468px) {
  .team .team-member span::after {
    left: calc(50% - 25px);
  }
}

.team .team-member p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.team .team-member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
}

@media (max-width: 468px) {
  .team .team-member .social {
    justify-content: center;
  }
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--default-color), transparent 94%);
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 36px;
  height: 36px;
}

.team .team-member .social a i {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  margin: 0 2px;
}

.team .team-member .social a:hover {
  background: var(--accent-color);
}

.team .team-member .social a:hover i {
  color: var(--contrast-color);
}

.team .team-member .social a+a {
  margin-left: 8px;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.teamssss {
  --background-color: #f4f4f4;
}

.teamssss .member {
  position: relative;
}

.teamssss .member .member-imgssss {
  margin: 0 80px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 4px solid var(--background-color);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1024px) {
  .teamssss .member .member-imgssss {
    margin: 0 60px;
  }
}

.teamssss .member .member-imgssss img {
  position: relative;
  z-index: 1;
}

.teamssss .member .member-imgssss .social {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding-bottom: 20px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}

.teamssss .member .member-imgssss .social a {
  transition: 0.3s;
  color: var(--contrast-color);
  font-size: 20px;
  margin: 0 8px;
}

.teamssss .member .member-imgssss .social a:hover {
  color: var(--accent-color);
}

.teamssss .member .member-info {
  margin-top: 30px;
}

.teamssss .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 18px;
}

.teamssss .member .member-info span {
  font-style: italic;
  display: block;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.teamssss .member .member-info p {
  margin-bottom: 0;
  font-size: 14px;
}

.teamssss .member:hover .member-imgssss .social {
  padding-bottom: 0;
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.teamss {
  --background-color: #f4f4f4;
}

.teamss .member {
  position: relative;
}

.teamss .member {
  position: relative;
  overflow: hidden;
  /* Ensure the image doesn't overflow outside the container */
}

.teamss .member .member-img partimg {
  transition: transform 0.3s ease !important;
  /* Smooth transition for the zoom effect */
}

.teamss .member:hover .member-img partimg {
  transform: scale(0.8) !important;
  /* Zoom the image slightly */
}

.teamss .member-partner {
  border: 1px solid #0000001f;
  padding: 30px;
  box-shadow: 0px 11px 12px -7px #762a29;
}

.teamss .member .member-img {
  /* padding: 30px; */
  /* margin: 0 80px; */
  /* border-radius: 50%; */
  overflow: hidden;
  position: relative;
  border: 4px solid var(--background-color);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.2);
  width: 81%;
  margin-left: 32px;
}

.teamss .member .member-imgs {
  /* padding: 30px; */
  margin: 0 80px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 4px solid var(--background-color);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.2);
  /* width: 81%;
    margin-left: 32px; */
}

/* Styles for medium devices and above (≥768px) */
@media (min-width: 768px) {
  .teamss .member .member-img {
    /* padding: 30px; */
    /* margin: 0 80px; */
    /* border-radius: 50%; */
    overflow: hidden;
    position: relative;
    border: 4px solid var(--background-color);
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.2);
    width: 81%;
    margin-left: 20px !important;
  }
}

/* Styles for small devices and above (≥576px) */
@media (min-width: 576px) {
  .teamss .member .member-img {
    /* padding: 30px; */
    /* margin: 0 80px; */
    /* border-radius: 50%; */
    overflow: hidden;
    position: relative;
    border: 4px solid var(--background-color);
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.2);
    width: 81%;
    margin-left: 32px;
  }
}

@media (max-width: 1024px) {
  /* .teamss .member .member-img {
    margin: 17px;
  } */

  .teamss .member .member-imgs {
    margin: 0 60px;
  }
}

/* .teamss .member .mem-img {
  max-width: 256px !important;
  max-height: 256px !important;
} */

.teamss .member .member-img img {
  position: relative;
  z-index: 1;
}

.teamss .member .member-imgs img {
  position: relative;
  z-index: 1;
  height: 195px;
  width: 249px;
}

.teamss .member .member-img .social {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding-bottom: 20px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}

.teamss .member .member-imgs .social {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding-bottom: 20px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}

.teamss .member .member-img .social a {
  transition: 0.3s;
  color: var(--contrast-color);
  font-size: 20px;
  margin: 0 8px;
}

.teamss .member .member-imgs .social a {
  transition: 0.3s;
  color: var(--contrast-color);
  font-size: 20px;
  margin: 0 8px;
}

.teamss .member .member-img .social a:hover {
  color: var(--accent-color);
}

.teamss .member .member-imgs .social a:hover {
  color: var(--accent-color);
}

.teamss .member .member-info {
  margin-top: 30px;
}

.teamss .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 18px;
}

.teamss .member .member-info span {
  font-style: italic;
  display: block;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.teamss .member .member-info p {
  margin-bottom: 0;
  font-size: 14px;
}

.teamss .member:hover .member-img .social {
  padding-bottom: 0;
  visibility: visible;
  opacity: 1;
}

.teamss .member:hover .member-imgs .social {
  padding-bottom: 0;
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {
  .teamss .member .team-member {
    margin: 0 95px;
    /* Reduced margin for mobile */
  }
}

@media (max-width: 768px) {
  .teamss .member .member-imgs {
    margin: 0px 104px;
  }
}

@media (max-width: 768px) {
  .teamss .member .member-imgs {
    margin: 0px 154px;
  }
}

@media (max-width: 768px) {
  .teamss .member .team-member {
    margin: 0 154px;
    /* Adjusted margin for medium screens */
  }
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing {
  padding: 120px 0;
}

.pricing .section-title {
  margin-bottom: 40px;
}

.pricing .pricing-item {
  box-shadow: 0 3px 20px -2px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 60px 40px;
  height: 100%;
  position: relative;
  border-radius: 15px;
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
  text-align: center;
}

.pricing .icon {
  margin: 30px auto 20px auto;
  width: 70px;
  height: 70px;
  background: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.pricing .icon i {
  color: var(--background-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
  line-height: 0;
}

.pricing .icon::before {
  position: absolute;
  content: "";
  height: 86px;
  width: 86px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.pricing .icon::after {
  position: absolute;
  content: "";
  height: 102px;
  width: 102px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-2px);
}

.pricing h4 {
  font-size: 48px;
  color: var(--accent-color);
  font-weight: 700;
  font-family: var(--heading-font);
  margin-bottom: 25px;
  text-align: center;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
  font-weight: 400;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: var(--background-color);
  display: inline-block;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.pricing .buy-btn:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .featured {
  z-index: 10;
  border: 3px solid var(--accent-color);
}

@media (min-width: 992px) {
  .pricing .featured {
    transform: scale(1.15);
  }
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts {
  padding-top: 1px;
}

.blog-postss {
  height: 100% !important;
}

.blog-posts article {
  box-shadow: 6px 5px 6px color-mix(in srgb, var(--default-color), #0000008c 90%);
  padding: 30px;
  height: 100%;
  border-radius: 30px 30px 30px 30px;
}

@media (max-width: 576px) {
  .blog-posts article {
    box-shadow: 0 0px 0px color-mix(in srgb, var(--default-color), #0000008c 0%) !important;
    border-bottom: 1px solid black;
    border-radius: 0% !important;
    padding: 0px !important;
    height: 100%;
    margin-left: -12px;
    width: 107%;
  }

  .training-cardz {
    /* padding: 0px 10px !important; */
    padding: 0px 15px;
  }
}

.blog-posts .post-img {
  max-height: 200px;
  margin: -30px -30px 0 -30px;
  overflow: hidden;
  border-radius: 30px 30px 30px 30px;
}

.blog-contmain {
  transition: transform 0.3s ease;
}

.blog-contmain:hover {
  transform: scale(1.04);
}

@media (max-width: 576px) {
  .blog-posts .post-img {
    max-height: 440px;
    margin: 15px -30px 0 -30px;
    overflow: hidden;
  }
}

.blog-posts .title {
  font-size: 17px;
  font-weight: 700;
  padding: 0px 15px;
  margin: 15px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-posts .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-posts .meta-top ul li+li {
  padding-left: 20px;
}

.blog-posts .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-posts .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-posts .content {
  margin-top: 20px;
}

.blog-posts .content .read-more {
  text-align: right;
}

.blog-posts .content .read-more a {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 30px;
  transition: 0.3s;
  font-size: 14px;
  border-radius: 4px;
}

.blog-posts .content .read-more a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-top: 30px;
  padding-bottom: 0;
}

.blog-details .article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
}

@media (max-width: 576px) {
  .blog-details .article {
    padding: 0;
    /* Remove padding for small screens */
  }
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
  overflow: overlay !important;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  /* padding-top: 30px; */
  padding: 0px !important;
}

.blog-author .author-container {
  width: 100%;
  padding: 20px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding-top: 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

.blog-comments .reply-form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-comments .reply-form h4 {
  font-weight: bold;
  font-size: 22px;
}

.blog-comments .reply-form p {
  font-size: 14px;
}

.blog-comments .reply-form input {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.blog-comments .reply-form input:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form textarea {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.blog-comments .reply-form textarea:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form .form-group {
  margin-bottom: 25px;
}

.blog-comments .reply-form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.blog-comments .reply-form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  padding: 20px 0 30px 0;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  height: 200px !important;
}

.contact .info-item i {
  font-size: 20px;
  color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
}

.contact .info-item h3 {
  font-size: 20px;
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type="text"],
.contact .php-email-form input[type="email"],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb,
      var(--background-color),
      transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type="text"]:focus,
.contact .php-email-form input[type="email"]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type="text"]::placeholder,
.contact .php-email-form input[type="email"]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type="submit"] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type="submit"]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  padding: 30px;
  margin: 5px 0;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 576px) {
  .widgets-container {
    padding: 0px !important;
    margin: 5px 0;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  }
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
}

.search-widget form input[type="text"] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type="text"]:focus {
  outline: none;
}

.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget {
  margin-bottom: -10px;
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}

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

.fs-random {
  font-size: 1rem !important;
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .features-item {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.features .features-item+.features-item {
  margin-top: 100px;
}

@media (max-width: 768px) {
  .features .features-item+.features-item {
    margin-top: 40px;
  }
}

.features .features-item h3 {
  font-weight: 700;
  font-size: 26px;
}

.features .features-item .btn-get-started {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 8px 30px 10px 30px;
  border-radius: 4px;
}

.features .features-item .btn-get-started:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
}

.features .features-item ul {
  list-style: none;
  padding: 0;
}

.features .features-item ul li {
  padding-bottom: 10px;
  display: flex;
  align-items: flex-start;
}

.features .features-item ul li:last-child {
  padding-bottom: 0;
}

.features .features-item ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.features .features-item img {
  border: 6px solid var(--contrast-color);
  box-shadow: 0 15px 30px -10px color-mix(in srgb, var(--default-color), transparent 75%);
}

.features .features-item .features-img-bg {
  position: relative;
  min-height: 500px;
  object-fit: cover;
}

@media (max-width: 640px) {
  .features .features-item .features-img-bg {
    min-height: 300px;
  }
}

.features .features-item .features-img-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.features .features-item .image-stack {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
}

.features .features-item .image-stack .stack-back {
  grid-column: 4/-1;
  grid-row: 1;
  width: 100%;
  z-index: 1;
}

.features .features-item .image-stack .stack-front {
  grid-row: 1;
  grid-column: 1 / span 8;
  margin-top: 20%;
  width: 100%;
  z-index: 2;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  --default-color: #444444;
  /* background-color: #f0ebeb; */
  position: relative;
  padding: 15px 0;
}

.statss:before {
  content: "";
  background: linear-gradient(to right, #000000bf 40%, transparent);
  position: absolute;
  inset: 0;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .statss:before {
    content: "";
    background: linear-gradient(to bottom, #000000bf 50%, transparent);
    position: absolute;
    inset: 0;
    z-index: 2;
  }
}

.stats img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.stats:before {
  content: "";
  /* background: linear-gradient(to right, #000000bf 40%, transparent); */
  position: absolute;
  inset: 0;
  z-index: 2;
}

.stats .container {
  position: relative;
  z-index: 3;
}

.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  font-size: 18px;
  display: block;
  color: var(--default-color);
  font-weight: 700;
}

.stats .stats-item p {
  padding: 0;
  margin-top: 20px;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.statsss {
  --default-color: #ffffff;
  --background-color: #000000;
  position: relative;
  padding: 50px 0;
}

.statsss img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.statsss:before {
  content: "";
  background: linear-gradient(to left, #000000bf 40%, transparent);
  position: absolute;
  inset: 0;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .statsss:before {
    content: "";
    background: linear-gradient(to top, #000000bf 50%, transparent);
    position: absolute;
    inset: 0;
    z-index: 2;
  }
}

.interm-img {
  margin-left: 200px;
}

/* For tablet view (768px to 991px) */
@media (max-width: 991px) {
  .interm-img {
    margin-left: 112px;
  }
}

@media screen and (max-width: 768px) {
  .interm-img {
    margin-left: 0px !important;
  }
}

.statsss .container {
  position: relative;
  z-index: 3;
}

.statsss .statsss-item {
  padding: 30px;
  width: 100%;
}

.statsss .statsss-item span {
  font-size: 48px;
  display: block;
  color: var(--default-color);
  font-weight: 700;
}

.statsss .statsss-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.serviceBox {
  padding: 35px 20px 35px 90px;
  position: relative;
  height: 300px;
}

/* Styles for medium screens (md) - 768px to 991px */
@media (max-width: 991px) {
  .serviceBox {
    padding: 35px 20px 35px 90px;
    /* Adjust padding as needed */
    height: 95%;
    /* Adjust height as needed */
  }
}

/* Styles for small screens (sm) - 576px to 767px */
@media (max-width: 767px) {
  .serviceBox {
    padding: 35px 20px 35px 90px;
    /* Adjust padding as needed */
    height: 100%;
    /* Adjust height as needed */
  }
}

.serviceheight {
  height: 250px !important;
}

.serviceBox:before {
  content: "";
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px 0 rgba(119, 94, 28, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale3d(1.08, 1.08, 1.08);
  transition: all 0.33s ease 0s;
}

.serviceBox:hover:before {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}

.serviceBox .service-icon {
  width: 50px;
  height: 60px;
  line-height: 60px;
  font-size: 30px;
  color: var(--accent-color);
  text-align: center;
  border: 2px solid var(--accent-color);
  position: absolute;
  top: 55px;
  left: 20px;
  transition: all 0.3s ease 0s;
}

.serviceBox:hover .service-icon {
  transform: translateY(20px);
}

.serviceBox .service-icon:before,
.serviceBox .service-icon:after {
  content: "";
  height: 2px;
  background: var(--accent-color);
  position: absolute;
  top: -20px;
  left: 10px;
  right: 10px;
  transition: all 0.3s ease 0s;
}

.serviceBox .service-icon:after {
  top: auto;
  bottom: -20px;
  left: 10px;
  right: 10px;
}

.serviceBox:hover .service-icon:before {
  top: -25px;
  transform: rotate(90deg);
}

.serviceBox:hover .service-icon:after {
  transform: rotate(-90deg);
  bottom: -25px;
}

.serviceBox .title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-color);
  text-transform: uppercase;
  margin: 0 0 12px 0;
  position: relative;
}

.serviceBox .description {
  font-size: 13px;
  color: #807d7d;
  line-height: 27px;
  letter-spacing: 1px;
  margin: 0;
}

@media only screen and (max-width: 990px) {
  .serviceBox {
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .serviceBox:before {
    transform: scale3d(1, 1, 1);
  }

  .serviceBox .service-icon {
    top: 30px;
  }
}

@media only screen and (max-width: 480px) {
  .serviceBox .service-icon {
    top: 40px;
  }
}

.customServiceBox {
  border: 1px solid var(--accent-color);
  padding: 30px 30px 30px 30px;
  position: relative;
  transition: all 0.5s ease 0s;
}

.customServiceBox:hover {
  border-color: var(--accent-color);
}

.customServiceBox:before,
.customServiceBox:after {
  content: "";
  display: block;
  width: 50px;
  height: 5px;
  background: var(--accent-color);
  position: absolute;
  left: 0;
  opacity: 0;
  transition: all 0.5s ease 0s;
}

.customServiceBox:before {
  top: -3px;
}

.customServiceBox:after {
  bottom: -3px;
}

.customServiceBox:hover:before,
.customServiceBox:hover:after {
  left: 40px;
  opacity: 1;
}

.customServiceBox .customService-icon {
  display: inline-block;
  position: absolute;
  top: 33%;
  left: 23px;
  font-size: 45px;
  color: var(--accent-color);
  opacity: 0.3;
  transition: all 0.5s ease-in 0s;
}

.customServiceBox:hover .customService-icon {
  opacity: 1;
}

.customServiceBox .customTitle {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 15px;
}

.customServiceBox .customDescription {
  font-size: 13px;
  color: #666;
  line-height: 20px;
}

@media only screen and (max-width: 990px) {
  .customServiceBox {
    margin-bottom: 30px;
  }
}

.last-icon {
  font-size: 80px;
  color: var(--accent-color);
}

.customService-Content {
  text-align: center;
}

.techgeering-decoration {
  text-decoration: none;
  color: #06f7fc;
}

.techgeering-decoration:hover {
  color: #dc3545 !important;
}

.e-color {
  color: #dc3545;
}

.e-color:hover {
  color: #06f7fc;
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.aboutss {
  --background-color: #f4f4f4;
}

.aboutss .content h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
  border-radius: 7px;
  display: inline-block;
}

.aboutss .content h2 {
  font-weight: 700;
}

.aboutss .content p:last-child {
  margin-bottom: 0;
}

.aboutss .content .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aboutss .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.aboutss .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  padding-right: 19px;
}

.aboutss .content .read-more:hover i {
  margin-left: 10px;
}

.aboutss .icon-box {
  background-color: #fff;
  padding: 50px 40px;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: all 0.3s ease-out 0s;
}

.aboutss .icon-box i {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 32px;
  line-height: 0;
  transition: all 0.4s ease-out 0s;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.aboutss .icon-box h3 {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
}

.aboutss .icon-box p {
  margin-bottom: 0;
}

.aboutss .icon-box:hover i {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.aboutss .icon-boxes .col-md-6:nth-child(2) .icon-box,
.aboutss .icon-boxes .col-md-6:nth-child(4) .icon-box {
  margin-top: -40px;
}

@media (max-width: 768px) {

  .aboutss .icon-boxes .col-md-6:nth-child(2) .icon-box,
  .aboutss .icon-boxes .col-md-6:nth-child(4) .icon-box {
    margin-top: 0;
  }
}

.card-bodies {
  transition: transform 0.3s ease-in-out !important;
}

.card-bodies:hover .member-img {
  transform: scale(1.09) !important;
}

.member-img {
  transition: transform 0.3s ease-in-out !important;
}

.log-btn {
  /* cursor: progress; */
  background-color: var(--accent-color) !important;
  color: white !important;
  border: brown !important;
}

/* Custom CSS for unique class names */
.job-search-container {
  padding: 20px;
}

.filter-section {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.filter-button {
  width: 100%;
  text-align: left;
  background-color: #e9ecef;
  border: none;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

.filter-button:focus {
  outline: none;
}

.filter-options {
  display: none;
  margin-top: 10px;
}

.filter-options.show {
  display: block;
}

.job-listings {
  padding: 20px;
}

.job-card {
  padding: 15px;
  /* border: 1px solid #dee2e6; */
  border-radius: 8px;
  margin-bottom: -10px;
  background-color: #fff;
}

.job-card h5 {
  margin-top: 0;
}

/* Custom CSS for unique class names */
.course-details-container {
  padding: 20px;
}

.course-info {
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background-color: #fff;
}

.registration-form {
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.form-control {
  margin-bottom: 10px;
}

.filter-options {
  display: none;
}

.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: #742d2b;
  border-color: #742d2b;
}

.wpfloat {
  position: fixed;
  width: 40px;
  height: 40px;
  bottom: 70px;
  right: 16px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100;
}

.wpmy-float {
  margin-top: 16px;
}

.veniam {
  margin-left: -90px;
}

.interm-img {
  margin-top: 30px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* min-height: 400px; */
  /* Adjust as necessary */
}

.accordion {
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid #ccc;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-item input[type="checkbox"] {
  display: none;
}

.accordion-item label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  background: #f1f1f1;
  font-weight: bold;
  transition: background 0.3s ease;
}

.accordion-item label:hover {
  background: #ddd;
}

.accordion-item .content {
  display: none;
  padding: 15px;
  background: #fff;
  transition: all 0.3s ease;
}

.accordion-item input[type="checkbox"]:checked~.content {
  display: block;
}

.content ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.content ul li {
  margin: 5px 0;
}

.icon {
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.accordion-item input[type="checkbox"]:checked+label .icon {
  transform: rotate(90deg);
}

.label-bg-1 {
  background: #e6f7ff;
}

.label-bg-2 {
  background: #fff0f6;
}

.label-bg-3 {
  background: #f9f0ff;
}

.label-bg-4 {
  background: #f6ffed;
}

.label-bg-5 {
  background: #fff7e6;
}

/* VISIT LINK  */

.visit-link {
  display: inline-block;
  text-decoration: none;
  color: #762a2e !important;
  transition: transform 0.2s ease-out;
}

.visit-link:hover {
  transform: scale(1.05);
  /* Zoom in slightly on hover */
}

.visit-link h6 {
  display: inline-block;
  transition: margin-left 0.2s ease-out;
}

.visit-link:hover h6 {
  margin-left: 10px;
  /* Move text slightly to the right on hover */
  color: #762a2e !important;
}

.visit-link i.bi-arrow-right {
  transition: margin-left 0.2s ease-out;
}

.visit-link:hover i.bi-arrow-right {
  margin-left: 5px;
  /* Move arrow icon to the right on hover */
}

.portfolio-filters {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 1rem;
  /* Adjust the gap as needed */
}

.portfolio-filters li {
  display: inline-block;
}

.cursor-pointer {
  cursor: pointer;
}

.unique-content {
  display: none;
}

.unique-content.active {
  display: block;
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq {
  padding: 0px !important;
}

.faq .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.faq .content p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.faq .faq-container .faq-item {
  position: relative;
  /* padding: 20px; */
  margin-bottom: 20px;
  box-shadow: 0px 5px 25px 0px color-mix(in srgb, var(--default-color), transparent 90%);
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  display: flex;
  align-items: flex-start;
}

.faq .faq-container .faq-item h3 .num {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item .faq-content {
  display: block;
  visibility: visible;
  opacity: 1;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/* Default styles for larger screens */
.serviceBox1 {
  color: var(--main-color);
  background: linear-gradient(to bottom,
      var(--main-color),
      var(--main-color) 8%,
      #fff 8%,
      #fff 92%,
      var(--main-color) 92%);
  font-family: "Poppins", sans-serif;
  text-align: center;
  padding: 55px 15px 35px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px black;
  height: 520px !important;
  position: relative;
}

/* Styles for medium screens (md) - 768px to 991px */
@media (max-width: 991px) {
  .serviceBox1 {
    color: var(--main-color);
    background: linear-gradient(to bottom,
        var(--main-color),
        var(--main-color) 8%,
        #fff 8%,
        #fff 92%,
        var(--main-color) 92%);
    font-family: "Poppins", sans-serif;
    text-align: center;
    padding: 55px 15px 35px;
    border-radius: 15px;
    box-shadow: -5px 5px 10px black;
    height: 540px !important;
    position: relative;
  }
}

/* Styles for small screens (sm) - 576px to 767px */
@media (max-width: 767px) {
  .serviceBox1 {
    color: var(--main-color);
    background: linear-gradient(to bottom,
        var(--main-color),
        var(--main-color) 8%,
        #fff 8%,
        #fff 92%,
        var(--main-color) 92%);
    font-family: "Poppins", sans-serif;
    text-align: center;
    padding: 55px 15px 35px;
    border-radius: 15px;
    box-shadow: -5px 5px 10px black;
    height: 540px !important;
    position: relative;
  }
}

.serviceBox1:before,
.serviceBox1:after {
  content: "";
  background-color: var(--main-color);
  height: 18px;
  width: 90%;
  border-radius: 50px;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: 4%;
}

.serviceBox1:after {
  /* background-color: #fff;
  top: auto;
  bottom: 4%; */
}

.serviceBox1 .service-icon {
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 15px;
}

.serviceBox1 .title {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 10px;
}

.serviceBox1 .description {
  color: #555;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 24px;
  margin: 0;
}

.serviceBox1.green {
  --main-color: #10be81;
}

.serviceBox1.pink {
  --main-color: #f1679a;
}

.serviceBox1.blue {
  --main-color: #02a7b6;
}

@media only screen and (max-width: 1199px) {
  .serviceBox1 {
    margin: 0 0 30px;
  }
}

.consult-icon {
  font-size: 70px;
}

.image-cont {
  width: 100%;
  /* Set the desired width */
  height: 100%;
  /* Set the desired height */
  overflow: hidden;
  /* Hide any overflow to ensure the image doesn't exceed the container */
}

.image-cont img {
  width: 100%;
  height: 100%;
  object-position: center;
  /* Centers the image within the container */
  display: block;
  /* Removes the default inline spacing for images */
}

.modal-di {
  perspective: 1000px;
}

.modal-cont {
  width: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

.modal-cont .front,
.modal-cont .back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.modal-cont .back {
  transform: rotateY(180deg);
}

.flipped .modal-cont {
  transform: rotateY(180deg);
}

.training-modal {
  overflow: hidden !important;
}

.c-col-item {
  transition: transform 0.3s ease;
  box-shadow: 2px 7px 15px black;
}

.c-inner {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px #00000075;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s;
  height: 380px;
  /* Added max-height */
  overflow: hidden;
  /* Optional: to handle overflow content */
}

.c-col-item:hover .c-inner {
  transform: translateY(-10px);
}

.c-img img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.c-content h3 {
  font-size: 1.5em;
  color: #333;
}

.c-content p {
  font-size: 1em;
  color: #666;
}

.c-text {
  padding: 10px 0;
}

.c-logo-wrapper {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}

.c-logo-wrapper:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.c-logo-wrapper img {
  max-width: 100px;
  height: auto;
  margin: 0 auto;
}

.c-text {
  padding: 10px 0;
  color: #333;
}

.c-text p {
  font-size: 1em;
  color: #666;
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.pop-in .col-6 {
  animation: pop-in 0.5s ease forwards;
}

.accordion-button:not(.collapsed) {
  color: #792a29 !important;
  background-color: #792a293b !important;
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color) !important;
}

.plus-icon {
  font-size: 1.5em;
  /* Adjust size as needed */
  color: #000;
  /* Adjust color as needed */
  vertical-align: top;
  /* Adjust alignment as needed */
  margin-left: 5px;
  /* Adjust spacing as needed */
  /* margin-left: 4rem !important; */
}

.provides {
  box-shadow: 0px 0px 4px black !important;
  height: 250px !important;
}

/* Styles for medium screens (md) and up */
@media (min-width: 768px) and (max-width: 991.98px) {
  .provides {
    box-shadow: 0px 0px 4px black !important;
    /* Example adjustment */
    height: 220px !important;
    /* Example adjustment */
  }
}

/* Styles for small screens (sm) and up */
@media (max-width: 767.98px) {
  .provides {
    box-shadow: 0px 0px 2px black !important;
    /* Example adjustment */
    height: 195px !important;
    /* Example adjustment */
  }
}

.trans-gg {
  margin-top: 18px;
}

.goog-te-gadget {
  color: transparent !important;
}

.VIpgJd-ZVi9od-l4eHX-hSRGPd {
  display: none !important;
}

.approach-div {
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin-bottom: 20px;
  /* height: 316px; */
  height: 100%;
}

.number-background {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 40px;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 1.2rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.testimonial {
  margin-bottom: 4rem;
}

.testimonial .part-img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-text {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.5rem;
}

.testimonial-row {
  align-items: center;
}

.board-interm {
  height: 557px;
  /* Set your desired height */
  object-fit: cover;
  /* Ensures the image covers the area while maintaining aspect ratio */
}

.board-interm2 {
  height: 400px;
  /* Set your desired height */
  object-fit: cover;
  /* Ensures the image covers the area while maintaining aspect ratio */
}

.card-img-overlay {
  bottom: 0;
  top: auto;
}

.profile-section {
  background-color: #f8f9fa;
  padding: 50px 0;
}

.user-image {
  max-width: 70%;
  height: auto;
  /* border-radius: 50%; */
  margin-bottom: 20px;
  margin-top: 110px !important;
  box-shadow: -7px 7px 14px black;
}

/* For medium screens (768px to 991px) */
@media (max-width: 991px) {
  .user-image {
    max-width: 60%;
    margin-top: 0px !important;
    box-shadow: -5px 5px 10px black;
  }
}

/* For small screens (576px to 767px) */
@media (max-width: 767px) {
  .user-image {
    max-width: 50%;
    margin-top: 0px !important;
    box-shadow: -3px 3px 6px black;
  }
}

.user-img {
  max-width: 70%;
  height: auto;
  /* border-radius: 50%; */
  margin-bottom: 20px;
  margin-top: 210px !important;
  box-shadow: -7px 7px 14px black;
}

/* For medium screens (768px to 991px) */
@media (max-width: 991px) {
  .user-img {
    max-width: 70%;
    height: auto;
    /* border-radius: 50%; */
    margin-bottom: 20px;
    margin-top: 0px !important;
    box-shadow: -7px 7px 14px black;
  }
}

/* For small screens (576px to 767px) */
@media (max-width: 767px) {
  .user-img {
    max-width: 70%;
    height: auto;
    /* border-radius: 50%; */
    margin-bottom: 20px;
    margin-top: 0px !important;
    box-shadow: -7px 7px 14px black;
  }
}

.user-imgd {
  max-width: 70%;
  height: auto;
  /* border-radius: 50%; */
  margin-bottom: 20px;
  /* margin-top: 210px !important; */
  box-shadow: -7px 7px 14px black;
}

.profile-section .user-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.profile-section .company-logo {
  max-width: 80px;
  margin-bottom: 10px;
}

.profile-section .btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

.profile-section .btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

.animated-shadow {
  box-shadow: 0 4px 20px rgba(116, 45, 43, 0.2);
  animation: shadow-move 3s infinite alternate;
}

@keyframes shadow-move {
  0% {
    box-shadow: 0 4px 20px rgba(116, 45, 43, 0.2);
  }

  50% {
    box-shadow: 0 8px 40px rgba(116, 45, 43, 0.4);
  }

  100% {
    box-shadow: 0 12px 60px rgba(116, 45, 43, 0.6);
  }
}

.partner-sec {
  margin-top: 5rem !important;
}

.yt-sec {
  height: 330px;
}

.active-btn {
  background-color: #007bff;
  /* Change color as needed */
  color: white;
  /* Text color */
  border-color: #007bff;
  /* Border color */
}

/* .swiper-bg {
  background-color: #00000036;
} */

/* -------------------------------------------------------------------------- */

/* FLOAT WHATSAPP ICON */

.nav-whatsapp {
  position: fixed;
  bottom: 59px;
  right: 15px;
  z-index: 1000;
  padding: 12px 0;
}

.nav-whatsapp.active .wrapperWA {
  opacity: 1;
  visibility: visible;
  width: 400px;
  height: auto;
  z-index: 6;
  display: block;
}

.nav-whatsapp.active .whatsapp-float {
  opacity: 0;
  visibility: hidden;
}

.wrapperWA {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  padding: 25px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  height: 60px;
  margin: 12px 0;
  background: #fff;
  display: none;
}

.wrapperWA-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: center;
  position: relative;
}

.wrapperWA-header h2 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #332902;
  font-size: 1rem;
  flex: 1 1 auto;
  margin: 0;
}

.wrapperWA-header .closeWA svg {
  width: 20px;
  height: 20px;
  float: right;
}

.form-container .formC:nth-child(1) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
  gap: 1rem;
  --gap: 1rem;
}

.form-container .formC:nth-child(2) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}

.form-container .formC .Fcontrol {
  position: relative;
}

.form-container .formC .Fcontrol input:focus,
.form-container .formC .Fcontrol textarea:focus {
  border-color: #4caf50;
}

.Fcontrol input[type="text"],
.Fcontrol input[type="email"],
.Fcontrol .cSubject,
.Fcontrol textarea {
  width: 100%;
  height: calc(3.5rem + calc(1px * 2));
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  padding-top: 1.625rem;
  border-radius: 5px;
  margin-bottom: 15px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #fff;
}

.Fcontrol textarea {
  height: 100px;
}

.Fcontrol input:focus~.nameC,
.Fcontrol input:focus~.emailC,
.Fcontrol textarea:focus~.messageC {
  top: -5px;
}

.Fcontrol input[type="text"],
.Fcontrol input[type="email"],
.Fcontrol textarea {
  padding: 0.75rem;
  padding-top: 1.625rem;
}

.Fcontrol .nameC,
.Fcontrol .emailC,
.Fcontrol .subjectC,
.Fcontrol .messageC {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: auto;
  padding: 1rem 0.75rem;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  transform-origin: 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  white-space: nowrap;
  color: rgba(33, 37, 41, 0.65);
  transition: 0.1s ease;
}

.formC .Fcontrol .cSubject {
  display: block;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.valid[data-text]:before {
  position: absolute;
  bottom: 100%;
  left: 12px;
  content: "";
  border: 8px solid;
  border-color: transparent transparent #ffd91a transparent;
  top: calc(100% - 21px);
}

.valid[data-text]:after,
.valid[data-text]:before {
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 3;
}

.valid[data-text]:after {
  content: attr(data-text);
  position: absolute;
  background: #ffd91a;
  left: 0;
  top: calc(100% - 5px);
  font-size: 12px;
  padding: 5px;
  box-shadow: 0 5px 10px rgb(0 0 0 / 8%);
  border-radius: 5px;
}

.show#cName~.valid:after,
.show#cEmail~.valid:after,
.show#cMessage~.valid:after,
.show#cName~.valid[data-text]:before,
.show#cEmail~.valid[data-text]:before,
.show#cMessage~.valid[data-text]:before {
  opacity: 0;
}

.none#cName~.valid:after,
.none#cEmail~.valid:after,
.none#cMessage~.valid:after,
.none#cName~.valid[data-text]:before,
.none#cEmail~.valid[data-text]:before,
.none#cMessage~.valid[data-text]:before {
  opacity: 1;
}

.whatsapp-send {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 10px 20px;
  background-color: #4caf50;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
  cursor: default;
  height: auto;
  width: auto;
}

.whatsapp-send svg {
  fill: #fff;
  width: 22px;
  height: 22px;
}

.whatsapp-send:hover {
  background-color: #45a049;
}

.whatsapp-float {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.2rem;
}

.whatsapp-float .whatsapp-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #4caf50;
  display: flex;
  justify-content: center;
  align-items: center;
  animation-name: waAnimation;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes waAnimation {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 175, 80, 0.5);
  }

  80% {
    box-shadow: 0 0 0 14px rgba(74, 175, 80, 0);
  }
}

.whatsapp-float .whatsapp-icon svg {
  fill: #fff;
  width: 30px;
  height: 30px;
}

select:focus {
  outline: none;
}

select::-ms-expand {
  display: none;
}

@media screen and (max-width: 620px) {
  .formC:nth-child(1) {
    gap: 0;
  }

  .nav-whatsapp.active .wrapperWA {
    width: auto;
    height: auto;
    right: 0;
    left: 0;
    bottom: 0;
    top: auto;
    margin: 0;
    transition: all 0.3s ease;
  }

  .form-container .formC:nth-child(1) {
    grid-template-columns: auto;
    gap: 0;
  }
}

.drK .wrapperWA {
  background: #202426;
}

.drK .Fcontrol input[type="text"],
.drK .Fcontrol input[type="email"],
.drK .Fcontrol .cSubject,
.drK .Fcontrol textarea {
  background: #272b2d;
}

.drK .wrapperWA-header h2,
.drK .Fcontrol .nameC,
.drK .Fcontrol .emailC,
.drK .Fcontrol .subjectC,
.drK .Fcontrol .messageC {
  color: #fff;
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
}

/* Styles for active button */
.log-btn {
  position: relative;
  border: none;
  background-color: transparent;
  color: inherit;
}

.log-btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 6px;
  background-color: #742d2b;
  box-shadow: 2px 6px 6px black;
}

.form-select option:hover {
  background-color: brown !important;
  /* Brown background color for hover effect */
  color: brown !important;
  /* Text color for better readability */
}

.custom-margin {
  margin-right: 5px;
  /* Adjust this value as needed */
}

.profile-cards {
  height: 285px !important;
}

.blog-border {
  border-radius: 0% !important;
  width: 292px !important;
}

.wp_size {
  width: 174%;
  /* Default for smaller screens */
}

@media (max-width: 430px) {
  .wp_size {
    width: 128%;
  }
}

@media (min-width: 576px) {
  .wp_size {
    width: 169%;
  }
}

@media (min-width: 768px) {
  .wp_size {
    width: 171%;
  }
}

@media (min-width: 992px) {
  .wp_size {
    width: 169%;
  }
}

@media (min-width: 1200px) {
  .wp_size {
    width: 169%;
  }
}

.wp_size5 {
  width: 136%;
  /* Default for smaller screens */
}

@media (min-width: 430px) {
  .wp_size5 {
    width: 135%;
  }
}

@media (min-width: 576px) {
  .wp_size5 {
    width: 169%;
  }
}

@media (min-width: 768px) {
  .wp_size5 {
    width: 169%;
  }
}

@media (min-width: 992px) {
  .wp_size5 {
    width: 277%;
  }
}

@media (min-width: 1200px) {
  .wp_size5 {
    width: 274%;
  }
}

/* ----------------------------------------------------- */
@media (min-width: 1200px) {
  .wp_size1 {
    width: 101% !important;
  }
}

/* -------------------------------------------------------- */
.wp_size2 {
  width: 112% !important;
  /* Default for smaller screens */
}

.wp_size4 {
  width: 100%;
}

@media (max-width: 576px) {
  .wp_size4 {
    width: 122%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .wp_size4 {
    width: 110%;
  }
}

@media (min-width: 1200px) {
  .wp_size5 {
    width: 274% !important;
  }
}

/* @media (min-width: 576px) {
  .wp_size4 {
    width: 131% !important;
  }
} */

/* .wp_size3 {
  width: 166% !important;
} */

@media (max-width: 576px) {
  .wp_size2 {
    width: 118% !important;
  }

  .wp_size3 {
    width: 111.5%;
  }
}

@media (min-width: 768px) {
  .wp_size2 {
    width: 100% !important;
  }

  .wp_size3 {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .wp_size2 {
    width: 100% !important;
  }

  .wp_size3 {
    width: 143%;
  }
}

@media (min-width: 1200px) {
  .wp_size2 {
    width: 132% !important;
  }

  .wp_size3 {
    width: 174%;
  }
}

@media (min-width: 1400px) {
  .wp_size2 {
    width: 166% !important;
  }

  .wp_size3 {
    width: 210%;
  }
}

.intro-header {
  padding: 40px !important;
}

.input-group-text {
  cursor: pointer;
  height: 37px;
}

.contact-map {
  height: 250px;
  border: 0;
}

/* JOB SEARCH  */
.description-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  /* Number of lines to show */
  line-clamp: 2;
  max-height: 3em;
  /* Adjust this value based on your line height */
  line-height: 1.5em;
  /* Adjust this value to match the line height of your text */
}

/* Set the filter section to be sticky */
.filter-section {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding-right: 10px;
  background-color: #f8f9fa;
}

/* Make the job listings scrollable */
.job-listings {
  max-height: 80vh;
  /* Adjust this value as needed */
  overflow-y: auto;
  padding-left: 15px;
}

/* Adjust any padding or spacing if needed */
.job-search-container {
  padding-top: 20px;
}

.counter-para {
  font-size: 16px !important;
}

.main-map {
  fill: #b9b9b9;
  height: auto;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 991px) {
  .main-map {
    fill: #b9b9b9;
    /* Keep the same fill color */
    height: auto;
    /* Adjust the height for medium screens */
    width: 100%;
    /* Keep the width at 100% */
  }
}

/* Styles for screens between 576px and 767px */
@media (min-width: 576px) and (max-width: 767px) {
  .container .main-map {
    fill: #b9b9b9;
    height: auto;
    width: 100%;
  }
}

/* Styles for screens smaller than 576px */
@media (max-width: 575px) {
  .container .main-map {
    fill: #b9b9b9;
    height: auto;
    width: 100%;
  }
}

/* for pdf download section */
.profile-section {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  padding: 1.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.profile-section .btn-download {
  background-color: #007bff;
  color: white;
  border-radius: 2rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  text-align: center;
  border: none;
  width: 224px;
}

.profile-section .btn-download:hover {
  background-color: #0056b3;
}

.prof {
  background-color: #f8f9fa !important;
  padding: 50px 67px !important;
}

.profile-section .divider {
  border-left: 1px solid #dee2e6;
  height: 2rem;
  margin: 0 1.5rem;
}

.profile-section .description {
  font-size: 1rem;
  color: #495057;
  margin: 0;
}

/* for english and franch pdf download */
.language-popup {
  position: absolute;
  bottom: 76%;
  /* Place the popup above the button */
  left: 62px;
  width: 180px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 15px;
  text-align: center;
  display: none;
  z-index: 10;
  animation: slide-down 0.4s ease-out;
  opacity: 0;
  border-radius: 16px;
}

.language-popup h5 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  font-weight: bold;
}

/* Arrow styling */
.arrow {
  position: absolute;
  bottom: 66%;
  left: 13%;
  transform: translateX(-50%);
  width: 0;
  height: 10px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #742d2b;
  /* Arrow color matches button */
  display: none;
}

/* Show arrow when popup is visible */
.language-popup.show-arrow+.arrow {
  display: block;
}

@keyframes slide-down {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.blog-description {
  color: inherit;
}


/* Custom CSS By Loresh */
.theme-clr {
  color: #84200c !important;
  font-size: 16px !important;
}

.light-theme-bg {
  background-color: #ffa4912e !important;
}

.modal-80w {
  width: 80%;
  max-width: 80%;
  height: 80%;
  max-height: 80%;
}

.modal-80w .modal-content {
  height: 100%;
}

#expertiseTabs .nav-link {
  color: black !important;
}

#expertiseTabs .nav-link.active {
  background-color: #84200c !important;
  color: white !important;
}

.qlimg {
  width: 70%;
  object-fit: cover;
}

/* End custom Css By Loresh */

.description-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  /* Number of lines to show */
  line-clamp: 2;
  max-height: 3em;
  /* Adjust this value based on your line height */
  line-height: 1.5em;
  /* Adjust this value to match the line height of your text */
}

path {
        transition: fill .1s linear
      }

      path:hover {
        fill: #742d2b
      }

      /* for loader animation */
      .loading {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
      }

      .loader {
        border: 5px solid #f3f3f3;
        border-top: 5px solid #742d2b;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }