/* Fonts */
/*@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');*/
/* 


/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff;
  /* Background color for the entire website, including individual sections */
  --default-color: #364d59;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #52565e;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #ec364b;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff;
  /* The contrast color is used for elements 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 */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --body-color: #fafafa;
  --nav-color: rgba(255, 255, 255, 0.55);
  /* The default color of the main navmenu links */
  --nav-hover-color: #ffffff;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #ec364b;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* Color when hovering over the thumb */
}

/* For Firefox */
* {
  scrollbar-width: thin;
  /* Use 'thin' for a thinner scrollbar */
  scrollbar-color: #888 #f1f1f1;
  /* Thumb color and track color */
}

::selection {
  background-color: #8c8788;
  /* Change this to your desired background color */
  color: #ffffff;
  /* Change this to your desired text color */
}

/* For WebKit browsers (Chrome, Safari, etc.) */
::-webkit-selection {
  background-color: #8c8788;
  /* Change this to your desired background color */
  color: #ffffff;
  /* Change this to your desired text color */
}

/*--------------------------------------------------------------
  # General
  --------------------------------------------------------------*/

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

/*--------------------------------------------------------------
  # 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: #000000;
  --heading-color: var(--contrast-color);
  --default-color: var(--contrast-color);

  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 60px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(
    in srgb,
    var(--background-color),
    transparent 30%
  );
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 56px;
  font-weight: 500;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.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 20%);
}

.page-title .breadcrumbs ol li {
  color: var(--accent-color);
}

.page-title .breadcrumbs ol li a {
  color: #ffffff;
}

/*--------------------------------------------------------------
  # Global Sections
  --------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 92px;
  overflow: clip;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 1049.99px) {
  section,
  .section {
    scroll-margin-top: 76px;
  }
}

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

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

.section-title h2:before,
.section-title h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  display: inline-block;
}

.section-title h2:before {
  margin: 0 15px 10px 0;
}

.section-title h2:after {
  margin: 0 0 10px 15px;
}

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

@media (max-width: 425px) {
  .section-title h2 {
    font-size: 28px;
  }

  .section-title h2:before,
  .section-title h2:after {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--accent-color);
    display: inline-block;
  }
}

/*--------------------------------------------------------------
  # mkission Section
  --------------------------------------------------------------*/
.mission {
  padding: 2% 10%;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.mission .img-fluid {
  height: 180px;
}

.mission .container {
  padding: 5% 10%;
  background-color: var(--nav-dropdown-background-color);
}

.mission .row + .row {
  margin-top: 40px;
}

.mission-text {
  align-content: center;
}

.mission h3 i {
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  margin-right: 8px;
  color: #ec364b;
}

.mission h3 {
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
}

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

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

.mission ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #ec364b;
}

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

@media (max-width: 480px) {
  .mission {
    padding: 10% 5%;
    background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  }

  .mission .container {
    padding: 5%;
    background-color: var(--nav-dropdown-background-color);
  }

  .mission .img-fluid {
    height: 150px;
  }
}

/*--------------------------------------------------------------
  # our-recruiters Section
  --------------------------------------------------------------*/

/*--------------------------------------------------------------
  # Testimonials Section
  --------------------------------------------------------------*/

/* @media screen {
    .home-testimonials .nav-tabs .nav-item a { font-size: .8rem;}
      .home-testimonials .testimonials-content { margin-left: 0rem;  margin-right: 0rem;}
      .home-testimonials .swiper-button-prev, .swiper-button-next { bottom: 3%;}
  } */

/*--------------------------------------------------------------
  # Recent Blog Posts Section
  --------------------------------------------------------------*/

/*--------------------------------------------------------------
  # About Section
  --------------------------------------------------------------*/
.about .inner-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 30px 0;
  color: var(--accent-color);
}

@media (min-width: 991px) {
  .about .inner-title {
    max-width: 75%;
    margin: 0 0 50px 0;
  }
}

.about .our-story {
  padding: 5%;
  text-align: justify;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
}

@media (min-width: 991px) {
  .about .our-story {
    min-width: 135%;
    padding-right: 15%;
  }
}

.about .our-story h4 {
  text-transform: uppercase;
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.about .our-story h3 {
  font-size: 2.25rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

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

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

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

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

.about .watch-video i {
  font-size: 2rem;
  transition: 0.3s;
  color: var(--accent-color);
}

.about .watch-video a {
  font-weight: 600;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-left: 8px;
  transition: 0.3s;
}

.about .watch-video:hover a {
  color: var(--accent-color);
}

.about .about-img {
  width: 30%;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 10px #6c757d;
}

@media (min-width: 992px) {
  .about .about-img {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 500px;
    border-radius: 10px;
  }
}

.about .about-img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  border-radius: 10px;
}

@media screen {
}

/*--------------------------------------------------------------
  # Stats Counter Section
  --------------------------------------------------------------*/
.stats-counter .stats-item {
  box-shadow: 0px 0 30px
    color-mix(in srgb, var(--default-color), transparent 92%);
  padding: 30px;
}

.stats-counter .stats-item i {
  color: var(--accent-color);
  font-size: 42px;
  line-height: 0;
  margin-right: 20px;
}
@media (max-width: 585px) {
  .stats-counter .stats-item i {
    margin-right: 0;
  }
}

.stats-counter .stats-item span {
  color: var(--heading-color);
  font-size: 36px;
  display: block;
  font-weight: 600;
}

.stats-counter .stats-item .d-flex div h1 {
  margin: 0;
  margin-left: 5px;
  margin-top: 2px;
  text-align: center;
}

.stats-counter .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
}

/*--------------------------------------------------------------
  # Alt Services 2 Section ###icons color###
  --------------------------------------------------------------*/
.about-disciplines .features-image {
  position: relative;
  min-height: 400px;
}

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

.about-disciplines h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--accent-color);
}

.about-disciplines .icon-box {
  margin-top: 30px;
}

.about-disciplines .icon-box i {
  color: var(--accent-color);
  margin-right: 15px;
  font-size: 24px;
  line-height: 1.2;
}

.about-disciplines .icon-box h4 {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 18px;
}

.about-disciplines .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.about-disciplines ul {
  list-style: none;
  padding: 0;
  font-size: 14px;
  margin-left: 10px;
}

.about-disciplines ul li {
  margin-left: 7px;
  padding: 5px 0;
  display: flex;
  align-items: center;
}

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

/*--------------------------------------------------------------
  # Team Section
  --------------------------------------------------------------*/
.team .member {
  position: relative;
}

.team .member .member-img {
  border-radius: 30%;
  overflow: hidden;
  position: relative;
  /* aspect-ratio: 1/1; */
  width: 150px;
}

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

.team .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;
}

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

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

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

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

.team .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;
}

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

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

/*--------------------------------------------------------------
  # Principal desk
  --------------------------------------------------------------*/
.principal-desk .inner-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 30px 0;
  color: var(--accent-color);
}

@media (min-width: 991px) {
  .principal-desk .inner-title {
    max-width: 75%;
    margin: 0 0 50px 0;
  }

  .principal-desk .mob-inner-tittle h2 {
    display: none;
  }
}

.principal-desk .principal-msg {
  padding: 5%;
  text-align: justify;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
}

@media (min-width: 991px) {
  .principal-desk .principal-msg {
    min-width: 135%;
    padding-right: 15%;
  }
}

.principal-desk .principal-msg h4 {
  /* text-transform: uppercase; */
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.principal-desk .principal-msg h3 {
  font-size: 2.25rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.principal-desk .principal-msg p:last-child {
  margin-bottom: 0;
}

.principal-desk .about-img {
  width: 30%;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 10px #6c757d;
}

@media (min-width: 992px) {
  .principal-desk .about-img {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 400px;
    border-radius: 10px;
  }
}

.principal-desk .about-img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 1;
  border-radius: 10px;
}

.principal-msg h4 {
  color: #444444 !important;
}

.principal-msg p {
  font-size: 13px;
  text-indent: 40px;
}

@media (max-width: 991.98px) {
  .principal-desk .about-img {
    width: 30%;
    min-width: 130px;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 0 10px #6c757d;
  }

  .principal-desk .about-img img {
    position: relative;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1/1;
    z-index: 1;
    border-radius: 10px;
  }

  .principal-desk .mob-inner-tittle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 1% 8%;
  }

  .principal-desk .mob-inner-tittle h2 {
    font-size: 2rem;
    font-weight: 700;
    white-space: pre;
    color: var(--accent-color);
  }

  .principal-desk .inner-title {
    display: none;
  }
}