/* Fonts */
:root {
  --default-font: "Roboto", 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: "Nunito", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* 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: #292525;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #24A65C;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #24A65C;
  /* 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 {
  --nav-color: #ffffff;
  /* 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. */
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

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

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

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

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

h1,
h2,
h3,
h4,
h5,
h6 {

  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0;
  transition: all 0.5s;
  z-index: 997;
}

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

.header .logo img {
  max-height: 55.99px;
  margin-right: 8px;
  width: 133.81px;

  top: 48px;
  left: 72px;
  gap: 0px;
  opacity: 0px;


}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 15px;
  padding: 8px 35px;
  margin: 0 0 0 55px;
  border-radius: 4px;
  transition: 0.3s;
  font-weight: 500;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}
.index-page.scrolled .header .btn-getstarted{
  color: var(--accent-color);
    background: var(--contrast-color);
    font-size: 15px;
    padding: 8px 35px;
    margin: 0 0 0 55px;
    border-radius: 4px;
    transition: 0.3s;
    font-weight: 500;
    border: 2px solid var(--accent-color);
    

}
@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 20px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);

}

/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgba(255, 255, 255, 0);
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: var(--accent-color);
  color: #ffffff;
}

/*--------------------------------------------------------------
# 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: 14px 36px;

    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    font-family: Poppins;
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: 0.04em;
    text-align: left;

  }

  .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: rgb(248, 243, 243);
    font-weight: 500;
    font-size: 20px;
    position: relative;
    /* Needed for the pseudo-element positioning */
  }

  .navmenu li:hover>a::after,
  .navmenu .active::after,
  .navmenu .active:focus::after {
    content: '';
    display: block;
    width: 30%;
    /* Adjust width as needed */
    height: 5px;
    /* Adjust height for the desired thickness */
    background-color: rgba(255, 255, 255, 0.4);
    /* Set color with transparency */
    position: absolute;
    bottom: -0.2px;
    /* Adjust to position the underline */
    left: 50%;
    /* Start at the middle of the text */
    transform: translateX(-50%);
    /* Center the underline */
    border-radius: 50% / 100%;
    /* Creates an ellipse shape */
    z-index: -2;
    /* Places the pseudo-element behind the text */
  }


  .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: -90%;
    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);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .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%);
    width: 160px;
    height: 48px;
    top: 52px;
    left: 1208px;
    gap: 0px;
    border-radius: 4px 0px 0px 0px;
    opacity: 0px;

  }

  .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);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    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;
  }
}

/* Listing Dropdown - Desktop */
@media (min-width: 1200px) {
  .navmenu .listing-dropdown {
    position: static;
  }

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

  .navmenu .listing-dropdown ul li {
    flex: 1;
  }

  .navmenu .listing-dropdown ul li a,
  .navmenu .listing-dropdown ul li:hover>a {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--nav-dropdown-color);
    background-color: var(--nav-dropdown-background-color);
  }

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

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

/* Listing Dropdown - Mobile */
@media (max-width: 1199px) {
  .navmenu .listing-dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

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

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

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);

  font-size: 14px;
  padding-bottom: 5px;
  position: relative;
}

.footer .container {
  max-width: 1260px;
  padding: 50px
}

.footer .footer-top {
  padding-top: 50px;
  background-color: #BCB6A1;
  padding: 50px;
}

.footer .footer-top .fsearch {
  max-width: 280px;
}

.footer .footer-top .btn-success {
  background-color: var(--accent-color);
  border: 1px;
  border-color: var(--accent-color);
}

.footer .footer-top .fsearch i {
  color: white;

  font-size: 20px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  font-size: 16px;
  margin-right: 10px;
  transition: 0.3s;
}

.footer .fa-pinterest {
  color: #cb2027;

}

.footer .fa-pinterest:hover {
  font-size: 30px;

}

.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: 10px;
  font-size: 17px;
  line-height: 0;
  color: #111;
}

.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: 1px;
}

.footer .copyright {
  padding: 50px;
  padding: 15px;
  font-family: Roboto;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--accent-color);
  color: #fff;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright .left-content {
  display: flex;
  align-items: center;

}

.footer .copyright .left-content a {
  color: #fff;
}

.footer .copyright .right-content {
  display: flex;
  align-items: center;
  margin-right: 15px;
}


.footer .copyright .right-content p {
  margin-right: 20px;
}


.footer .copyright .right-content p:last-child {
margin-right: 20px;
  /* Remove margin from the last element */
}

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


}

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

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
bottom: 22px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  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;
  }

  .page-title {
    height: 50vh !important;
  }

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

  .footer .footer-links .social {
    padding: 0px 6px 0px 32px;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
  height: 70vh
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  text-align: center;
  /* Ensure text alignment */
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 20px 0;
  /* Adjust padding as needed */
  text-align: center;
  /* Center align contents */
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  /* Center align list items horizontally */
}

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

.page-title nav 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: 60px 0;
  scroll-margin-top: 98px;
  overflow: clip;
}

@media (max-width: 1199px) {

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

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

.section-title h2 {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 8px 20px;
  margin: 0;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  display: inline-block;
  text-transform: uppercase;
  border-radius: 50px;
  font-family: var(--default-font);
}

.section-title h3 {
  font-family: Poppins;
  font-size: 40px;
  font-weight: 600;
  line-height: 65px;
  text-align: center;
  color: #101A24;

}

.section-title p {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
  text-align: left;
  color: #5C6574;
  text-align: center;


}

.section-title p .description-title {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 80px 0 60px 0;
  display: flex;
  align-items: center;
  background: url(../img/hero-bg.png) top center no-repeat;
  background-size: cover;
}

.hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: #fff;
  font-family: Abhaya Libre;
}

.hero p {
  color: #fff;
  margin: 5px 0 30px 0;
  font-size: 20px;
  font-weight: 400;
  font-family: Poppins;

}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-size: 15px;
  letter-spacing: 1px;
  margin: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 4px;
  transition: 0.5s;
  font-family: Roboto;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.hero .btn-get-started1 {
  color: var(--accent-color);
  background: var(--contrast-color);
  font-family: var(--heading-font);
  font-size: 15px;
  letter-spacing: 1px;
  margin: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 4px;
  transition: 0.5s;
  font-weight: 500;
  font-family: Roboto;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.hero .btn-get-started i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.hero .btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, #24A65C, transparent 15%);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 55%);
}

.hero .btn-get-started:hover i {
  transform: translateX(5px);
}


.hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 1199px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero {

    min-height: 60vh;


  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero {

    min-height: 60vh;


  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .container {
  padding: 20px;
  max-width: 1280px;
}

.about .content {

  padding: 40px;
}

.about .content h3 {

  color: var(--accent-color);
  font-family: Alata;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  text-align: left;
  display: flex;
  flex-direction: row;

}

.about .content h3:after {
  content: "";
  flex: 1 1;
  border-bottom: 1.5px solid var(--accent-color);
  margin: auto;
  margin-left: 10px;
  max-width: 40px;
}

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

.about .content p {
  margin: 15px 0 30px 0;
  line-height: 24px;
  color: #828282;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;

}

.about .content .btn-read-more {
  color: var(--contrast-color);
  background: var(--accent-color);
  line-height: 0;
  padding: 15px 40px;
  border-radius: 4px;
  transition: 0.5s;
  box-shadow: 0px 5px 25px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.about .content .btn-read-more span {
  font-family: var(--default-font);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}

.about .content .btn-read-more i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.about .content .btn-read-more:hover i {
  transform: translateX(5px);
}

.about .feature-box {
  padding: 20px 15px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: 0.3s;
  height: 100%;
  Width: 216.44px;
  border-left: 4px solid var(--accent-color);
}

.about .feature-box h3 {
  font-size: 15px;
  font-family: Poppins;
  font-weight: 300;
  margin: 0;
  color: #212529;
}

.about .feature-box i {

  color: #212529;
  line-height: 0;
  padding: 4px;
  margin-right: 10px;
  font-size: 24px;
  border-radius: 3px;
  transition: 0.3s;
}

.about .event {
  background-color: #101A24;
}

.about .event .content {
  color: #fff;
  padding-top: 40px;

  margin-left: 3.5rem;


}

.about .event .content p,
.about .event .content h2 {
  color: #fff;

}

.about .event .content ul {
  list-style-type: none;
  padding: 0;
  margin-right: 3rem;
  color: #7f7f7f;

}

.about .nav-pills .nav-link {


  color: #7f7f7f;
}

.about .event .content ul li {
  padding: 8px 20px;
  border-bottom: 1px solid #ddd;
  width: 19rem;
}

/* .about .event .content ul li:hover {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
  margin-left: 3.6rem;
  color: #ffff;
  font-family: Poppins;
font-size: 21px;
font-weight: 600;
line-height: 26px;
letter-spacing: 0.04em;
text-align: left;
text-transform: uppercase;
} */
.about .nav-pills .nav-link.active,
.about .nav-pills .show>.nav-link {
  padding: 8px 16px;
  /* border-bottom: 1px solid #ddd; */
  margin-left: 1.6rem;
  color: #ffff;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  background-color: #101A24 !important;
}


@media (max-width: 768px) {
  .section-title h3 {
    font-family: Poppins;
    font-size: 33px;
    font-weight: 600;
    line-height: 65px;
    text-align: center;
    color: #101A24;
  }

  .about .feature-box {
    padding: 18px 0px;
    box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
    transition: 0.3s;
    height: 100%;
    Width: 162.44px;
    border-left: 4px solid var(--accent-color);
  }

  .about .feature-box h3 {
    font-size: 12px;
    font-family: Poppins;
    font-weight: 300;
    margin: 0;
    color: #212529;
  }

  .align-items-center {
    align-items: center !important;
  }

  .about .event .content {
    color: #fff;
    /* padding-top:40px; */
    margin-left: .2rem;
    padding: 40px 1px 1px 1px;

  }

  .about .content {
    padding: 10px;
  }
}



/*---------------------------------------------
vision
----------------------------------------------*/
.vision {
  padding: 10px;
}

.vision .content h3 {

  color: var(--accent-color);
  font-family: Alata !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  text-align: center;

  flex-direction: row;

}

.vision .content h3:after {
  content: "";
  flex: 1 1;
  border-bottom: 1.5px solid var(--accent-color);
  margin: auto;
  margin-left: 10px;
  max-width: 40px;
}

.vision .content h2 {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  color: #828282;
}

.vision p {
  padding: 20px;
  text-align: center;
}

.btn-get-started {
  color: #ffff;
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-size: 15px;
  letter-spacing: 1px;
  margin: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 4px;
  transition: 0.5s;
  font-family: Roboto;
  border: 2px solid;
  border-color: var(--accent-color);
}
.btn-get-started:hover {
  color:var(--accent-color);
  background: #fff;
  font-family: var(--heading-font);
  border-color: var(--accent-color);
  font-size: 15px;
  letter-spacing: 1px;
  margin: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 4px;
  transition: 0.5s;
  font-family: Roboto;
  border: 2px solid;
  border-color: var(--accent-color);
}

/*------------------------------------------------------
menu section 
--------------------------------------------------------*/
.menu{
padding:10px 0px;
}
.menul{
  padding: 20px 0px;
}
.menu .content {

  padding: 40px;
}

.menu .content h3 {

  color: var(--accent-color);
  font-family: Alata;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  text-align: left;
  display: flex;
  flex-direction: row;

}

.menu .content h3:after {
  content: "";
  flex: 1 1;
  border-bottom: 1.5px solid var(--accent-color);
  margin: auto;
  margin-left: 10px;
  max-width: 40px;
}

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

.mast {
  border: none;
  color: var(--accent-color);
  /* Default text color */
  padding: 16px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 12px 3px;
  cursor: pointer;
  width: 100%;
  background-color: white;
  /* Default background color */
  border: 2px solid var(--accent-color);
  font-weight: 400;
  /* Correct font-weight */
}
.mast.active {
  background-color: var(--accent-color);
  color: #ffffff;
}
.section1 {
  display: none;
}
.mast-link.active .mast {
  background-color: var(--accent-color);
  color: #ffffff;
}
.section1.default {
  display: block;
  /* Show default section */
}
.mast:hover {
  background-color: var(--accent-color);
  color: #ffffff;
}

.menu .content p {
  margin: 15px 0 30px 0;
  line-height: 24px;
  color: #828282;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;

}

.menu .list {
  padding: 15px;

}

.menu .list .fname {
  padding: 7px;
  transition: padding 0.3s ease, margin-left 0.3s ease;
}

.menu .list .fname i {
  font-size: 30px;
  color: var(--accent-color);
  transition: transform 0.3s ease;
}

.menu .list .fname:hover {
  padding: 7px;
  margin-left: 10px;
}

.menu .list .fname:hover i {
  transform: translateX(10px) rotate(-45deg);
}

.menu .list .fname h5 {
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;
  line-height: 31.42px;
  text-align: left;

}

.menu .list .fname p {
  color: #4F4F4F;
  font-size: 16px;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.menu .list hr.new2 {
  border-top: 1px dashed rgb(23, 2, 2);
}

/*-----------------------------------------
menulist
-------------------------------------------*/
.menulist {
  padding: 10px;
}

.menulist fieldset {
  all: revert;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 1px solid;
  border-style: groove;
  border-color: rgb(192, 192, 192) !important;

}

.menulist fieldset .cataright {
  position: absolute;
  left: 520px;
  font-family: Poppins;
  font-size: 17px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  color: #828282;
  padding: 5px 20px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;

}

.menulist fieldset,
legend {
  all: revert;
  font-family: Poppins;
  font-size: 40px;
  font-weight: 600;
  line-height: 44px;
  text-align: left;
  color: #333333;
}

.menulist fieldset,
legend span {
  font-family: Poppins;
  font-size: 32px;
  font-weight: 500;
  line-height: 35.2px;
  text-align: left;
  color: var(--accent-color);

}

.menulist fieldset p {
  font-family: Poppins;
  font-family: Poppins;
  font-size: 17.48px;
  font-weight: 500;
  text-align: left;
  padding: 0px 40px;
  color: #828282;
}

.menulist fieldset .con {
  padding: 0px 35px;
  height: 70px;
  /* Set your desired fixed height here */

}

.menulist fieldset .con h5 {
  font-family: Poppins;
  font-size: 23px;
  font-weight: 500;
  line-height: 31.42px;
  text-align: left;
  color: #333333;
  padding: 0px 10px;
}

.menulist fieldset .con p {
  font-family: Poppins;
  font-size: 13px;
  font-weight: 400;
  line-height: 23.56px;
  text-align: left;
  color: #333333;
  padding-left: 10px;
}

.menulist fieldset hr.new2 {
  border-top: 1px dashed rgb(23, 2, 2);
  margin-right: 7rem !important;
  margin-left: 2rem !important;
}


@media (max-width: 575.98px) {
  .col-12-mobile {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .menulist fieldset .cataright {
    position: absolute;
    font-size: 10px;
    left: 150px;
    font-weight: bold;

  }

  .menulist fieldset .con {
    height: auto !important;
    overflow: visible;
    padding: 0px !important;
    /* Set your desired fixed height here */

  }

  .menulist fieldset .con h5 {
    padding: 0px;
    font-size: 15px !important;
    line-height: 20px !important;
  }

  .menulist fieldset .con p {
    padding: 0px;
    font-size: 12px !important;
    line-height: 20px !important;
  }

  .menulist fieldset p {
    padding: 2px !important;
    font-size: 15.48px !important;
  }

  .menulist fieldset,
  legend {

    font-size: 30px;

  }

  .menulist fieldset,
  legend span {

    font-size: 22px;


  }
}


/* ---------------------------------------------------
commnets
----------------------------------------------------- */
.reviewtesto .content h3 {
  color: var(--accent-color);
  font-family: Alata;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  display: flex;
  justify-content: center;
  /* Center the content of the h3 */
}

.reviewtesto .content h3:after {
  content: "";
  flex: 1;
  border-bottom: 1.5px solid var(--accent-color);
  margin-left: 10px;
  max-width: 40px;
}

.reviewtesto .content h2 {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  /* Center the text */
}

.reviewtesto .reviewtesto-item {

  box-sizing: content-box;
  padding: 25px;
  margin: 25px 35px;
  background: #F9F9F9;
  Height: 300px;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: 0.3s;
}

.reviewtesto .reviewtesto-item .stars {
  margin-bottom: 15px;
}

.reviewtesto .reviewtesto-item .stars i {
  color: var(--accent-color);
  margin: 0 1px;
}

.reviewtesto .reviewtesto-item .reviewtesto-img {
  width: 70px;
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 3px;
  margin-right: 10px;
}

.reviewtesto .reviewtesto-item h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

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


.reviewtesto .reviewtesto-item h5 {

  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;



}

.reviewtesto .reviewtesto-item h6 {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;



}

.reviewtesto .reviewtesto-item p {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  color: #828282;
  text-align: left;

  margin: 0 auto 15px auto;
}

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

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

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

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



@media (max-width: 1199px) {


  .reviewtesto .swiper-pagination {
    margin-top: 0;
  }

  .reviewtesto .reviewtesto-item {
    margin: 40px 20px;
  }
}

/*--------------------------------------------------------------
# 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;
}

.portfolio .btn-get-started {
  color: var(--accent-color);
  background: #ffff;
  font-family: var(--heading-font);
  font-size: 15px;
  letter-spacing: 1px;
  margin: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 4px;
  transition: 0.5s;
  font-family: Roboto;
  border: 2px solid;
  border-color: var(--accent-color);
}


@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 h5 {
  position: absolute;
  bottom: 27px;
  text-align: left;
  display: inline-block;
  padding: 10px;
  left: 0;
  right: 0;
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 1px;
  text-align: left;
  padding: 10px;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 12px;
  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);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
  /* box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 90%); */
  box-sizing: content-box;
  padding: 30px;
  margin: 40px 30px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}





.testimonials .testimonial-item .content h3 {

  color: var(--accent-color);
  font-family: 'Alata', cursive;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  text-align: left;
  display: flex;
  flex-direction: row;

}




.testimonials .testimonial-item .content h3:after {
  content: "";
  flex: 1 1;
  border-bottom: 1.5px solid var(--accent-color);
  margin: auto;
  margin-left: 10px;
  max-width: 40px;
}

.testimonials .testimonial-item .content h2 {
  font-size: 40px;
  font-weight: 700;
}


.testimonials .testimonial-item .content p {
  margin: 15px 0 30px 0;
  line-height: 24px;
  color: #828282;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;

}

.container1 {
  overflow: hidden;
  padding: 40px;
  transition: 0.3s;
}

.container1 img {

  transition: 0.5s;
}

.container1:hover img {
  transform: scale(1.1);
}

.container1 .text-block {
  position: relative;
  padding: 20px;
  bottom: 25px;
  left: -30px;
  width: 400px;
  height: 89px;
  gap: 0px;
  opacity: 0px;
  box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 90%);
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  padding-left: 20px;
  padding-right: 20px;
}

.container1 .text-block h4 {
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  color: #333333 !important;

}

.container1 .text-block p {
  font-family: Poppins !important;
  font-size: 14px !important;
  font-weight: 400 !important;


}

.testimonials .testimonial-item .stars i {
  color: var(--accent-color);
  margin: 0 1px;


}

.testimonials .testimonial-item .testimonial-img {
  width: 80px;
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 3px;
  margin-right: 10px;
}

.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 40%);
  margin: 0;
}

.testimonials .testimonial-item h5 {

  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;



}

.testimonials .testimonial-item h6 {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;



}

.testimonials .testimonial-item p {

  margin: 0 auto 15px auto;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;

}

.testimonials .swiper-button-prev,
.testimonials .swiper-button-next {
  position: absolute;
  bottom: 10px;
  color: #898989;
  --swiper-navigation-size: 20px;
  font-weight: 600;
  margin: 20px;
}

.testimonials .swiper-button-prev {
  left: 35%;
    top: 85%


}

.testimonials .swiper-button-next {


  left: 40%;
    top: 85%;
}

.testimonials .swiper-button-prev:after,
.testimonials .swiper-rtl .swiper-button-next:after {
  content: none;
}

.testimonials .swiper-button-next:after,
.testimonials .swiper-rtl .swiper-button-prev:after {
  content: none;
}

.testimonials .swiper-button-next::before {
  content: '\F138';
  font-family: 'bootstrap-icons';

  font-size: 30px;
}

.testimonials .swiper-button-prev::before {
  content: '\F12F';
  font-family: 'bootstrap-icons';


  font-size: 30px;
}

/* Hover effect */


/* Hover effect */



@media (max-width: 768px) {
  .testimonials .testimonial-item {
    padding: 10px;
    margin: 40px 30px;
  }

  .container1 .text-block {
    position: relative;
    padding: 20px;
    bottom: 2px;
    left: 0px;
    width: auto;
    height: 120px;
    gap: 0px;
    opacity: 0px;
    box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 90%);
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding-left: 20px;
    padding-right: 20px;
  }

  .container1 .text-block h4 {

    font-size: 15px;


  }

  .container1 .text-block p {

    font-size: 12px !important;

  }

  .swiper-button-prev {
    left: 40%;
    top: 95%;



  }

  .testimonials .swiper-button-prev,
  .testimonials .swiper-button-next {
    position: absolute;
    bottom: 10px;
    color: #898989;
    --swiper-navigation-size: 20px;
    font-weight: 600;
    margin: 100px 20px;
  }

  .container1 {

    padding: 0px;
    transition: 0.3s;
  }

  .swiper-button-next {
    right: 60%;
    top: 95%
  }

  .testimonials .testimonial-item .stars i {
    color: var(--accent-color);
    margin: 0 1px;
    font-size: 10px !important;

  }
}

/* Additional CSS for ensuring col-lg-6 columns display correctly in testimonial-item */
.testimonials .testimonial-item .col-lg-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonials .testimonial-item .profile {
  text-align: center;
}


/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .content {
  padding: 50px;
}

.team .content h3 {
  color: #fff;
  font-family: Alata;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  text-align: center;
  margin-top: 11rem;
  flex-direction: row;
}

.team .content h3:after {
  content: "";
  flex: 1 1;
  border-bottom: 1.5px solid var(--accent-color);
  margin: auto;
  margin-left: 10px;
  max-width: 40px;
}

.team .content h2 {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  color: #f4f4f4
}

.team .teams {
  padding: 0px 50px;
}

.team .team-member {

  padding: 20px;
  text-align: center;
  border-radius: 5px;
  transition: 0.3s;


  align-items: center;
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.team .team-member .member-img img {
  width: 100%;
  height: auto;
  display: block;
}

.team .team-member .member-info {
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 92%);
  padding: 10px 20px;
  width: 100%;
}

.team .team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 16px;
  color: #111;
}

.team .team-member:hover {
  transform: scale(1.08);

}

.team .team-member:hover .social {
  right: 8px;
  opacity: 1;
}

.team .team-member .social {
  position: absolute;
  right: -100%;
  top: 30px;
  opacity: 0;
  border-radius: 4px;
  transition: 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 60%);
  z-index: 2;
}

.team .team-member .social a {
  transition: color 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin: 15px 12px;
  display: block;
  line-height: 0;
  text-align: center;

}

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

.team .team-member .social i {
  font-size: 18px;
}


/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  background-color: #232220;
}

.clients .swiper-slide img {
  transition: 0.3s;
  opacity: 1;
  padding: 10px;
}

.clients .content h3 {
  color: var(--accent-color);
  font-family: Alata;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;

  text-align: left;
  display: flex;
  flex-direction: row;
}

.clients .content h3:after {
  content: "";
  flex: 1;
  border-bottom: 1.5px solid var(--accent-color);
  margin-left: 10px;
  max-width: 40px;
}

.clients .content h2 {
  font-size: 40px;
  font-weight: 700;
  text-align: left;
  color: #fff;
  /* Center the text */
}


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

  border: 3px solid;
  border-color: var(--accent-color);
}

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

/*---------------------------------------------------------
classic menu-----------------------------------------------*/
.classicM {
  position: relative;
  /* Ensure positioning context for absolute positioning */
  overflow: hidden;
  background-color: #e4e3e3;
  /* Hide any overflow */
}



.classicM .swiper-slide img {
  transition: 0.3s;
  opacity: 1;
  padding: 0px 50px;
  text-align: center;
}

.classicM .content h2 {
  font-size: 40px;
  font-weight: 700;
  text-align: left;
  color: #333333;
  /* Center the text */
}

.classicM .card {
  border: 2px solid #ffffff;
  border-radius: 6px;
  max-width: 270px;
  height: 275px;
  text-align: center;
  margin-top: 60px;
  border-radius: 5px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  background-color: #ffffff;
}

.classicM .card:hover {

  background-color: #ffffff;
}

.classicM .card_img {
  width: 160px;
  height: 160px;
  overflow: hidden;
  border-radius: 100%;
  margin: -60px auto 0;
}

.classicM .card_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.classicM .card_info {
  padding-top: 28px;
  padding-bottom: 20px;
}

.classicM .card_info h2 {
  /* padding-bottom:10px;
  margin-top:7px; */
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  line-height: 25.23px;
  text-align: center;

}

.classicM li {
  text-decoration: none;
  font-family: Poppins;
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 5px;
  text-align: left;
  color:
    rgba(92, 101, 116, 1);
}

@media (max-width: 640px) {

  .classicM .card_info h2 {
    /* padding-bottom:10px;
  margin-top:7px; */
    font-family: Poppins;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.23px;
    text-align: center;

  }

  .classicM .swiper-slide img {
    transition: 0.3s;
    opacity: 1;
    padding: 0px;
    text-align: center;
  }

  .classicM .swiper-button-prev,
  .classicM .swiper-button-next {
    position: absolute;
    bottom: 10px;
    color: #898989;
    --swiper-navigation-size: 40px;
    font-weight: 600;
    margin: -547px 118px -263px 194px;

  }

  .classicM li {
    text-decoration: none;
    font-family: Poppins;
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 5px;
    text-align: left;
    color:
      rgba(92, 101, 116, 1);
  }
}

@media screen and (max-width: 768px) {

  .classicM .content h2 {
    /* padding-bottom:10px;
      margin-top:7px; */
    font-family: Poppins;
    font-size: 18px !important;
    font-weight: 600;
    line-height: 25.23px;
    text-align: center;

  }

  .classicM .swiper-slide img {
    transition: 0.3s;
    opacity: 1;
    padding: 0px;
    text-align: center;
  }

  .classicM .swiper-button-prev,
  .classicM .swiper-button-next {
    position: absolute;
    bottom: 10px;
    color: #898989;
    --swiper-navigation-size: 40px;
    font-weight: 600;
    margin: -547px 118px -263px 194px;

  }
}

@media (max-width: 1199px) {

  .classicM .content h2 {
    /* padding-bottom:10px;
    margin-top:7px; */
    font-family: Poppins;
    font-size: 13px;
    font-weight: 600;
    line-height: 25.23px;
    text-align: center;

  }

  .classicM .swiper-button-prev,
  .classicM .swiper-button-next {
    position: absolute;
    bottom: 10px;
    color: #898989;
    --swiper-navigation-size: 40px;
    font-weight: 600;
    margin: -263px 235px -263px 385px;

  }

  .classicM .card_info {
    padding-top: 16px;
    padding-bottom: 10px;
  }

  .classicM li {
    text-decoration: none;
    font-family: Poppins;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 5px;
    text-align: left;
    color: rgba(92, 101, 116, 1);
  }

  .classicM .card {
    border: 2px solid #ffffff;
    border-radius: 2px;
    max-width: 270px;
    height: 200px;
    text-align: center;
    margin-top: 60px;
    border-radius: 5px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background-color: #ffffff;
  }
}

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

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

.classicM .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: #e4e3e3;
  border: 1px solid;
  border-color: var(--accent-color);
}

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

}

.classicM .swiper-button-next,
.classicM .swiper-button-prev {
  color: rgba(92, 101, 116, 0.5);
}

/*--------------------------------------------------------------
# Recent Posts Section
--------------------------------------------------------------*/
.recent-posts .post-item {
  padding: 0px 20px 20px 20px;
  transition: 0.3s;
}



.recent-posts .post-item .post-date {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
}

.recent-posts .post-item .post-content {
  padding: 10px;
}

.recent-posts .post-item .post-title {
  color: #111;
  font-size: 16px;
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
  margin-top: 15px;
}

.recent-posts .post-item .meta i {
  font-size: 15px;
  color: var(--accent-color);
}

.recent-posts .post-item .meta span {
  font-family: Poppins;
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.recent-posts .post-item hr {
  color: color-mix(in srgb, var(--default-color), transparent 80%);
  margin: 20px 0;
}

.recent-posts .post-item .readmore {
  color: var(--accent-color);
  background: var(--contrast-color);
  font-family: var(--heading-font);
  font-size: 15px;
  letter-spacing: 1px;
  margin: 7px;
  display: flex;
  align-items: left;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 4px;
  border: 1px solid;
  border-color: var(--accent-color);
  transition: 0.5s;
  font-family: Roboto;
  margin-right: 9rem;

}

.recent-posts .post-item .readmore i {
  line-height: 0;
  margin-left: 6px;
  font-size: 16px;
}


/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {

  padding: 55px;
}

.contact .content {

  padding: 0px 40px;
}

.contact .content h3 {

  color: var(--accent-color);
  font-family: Alata;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  text-align: left;
  display: flex;
  flex-direction: row;

}

.contact .content h3:after {
  content: "";
  flex: 1 1;
  border-bottom: 1.5px solid var(--accent-color);
  margin: auto;
  margin-left: 10px;
  max-width: 40px;
}

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

.contact .info-item {
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  padding: 35px;
  height: 470px;

}

@media screen and (max-width: 768px) {

  .contact .info-item {

    padding: 15px;

  }

  .contact {

    padding: 100px 15px;
  }
}

.contact h6 a {
  display: inline-flex;
  align-items: center;
  color: #000;
  font-size: 16px;
  text-decoration: none;
}

.contact h6 a:hover {
  color: #007BFF;
  /* Hover color for text */
}

.contact h6 a i {
  background-color: #000;
  /* Black background for the icon */
  color: #fff;
  /* Icon color */
  border-radius: 50%;
  /* Rounded shape */
  padding: 8px;
  /* Padding around the icon */
  margin-right: 8px;
  /* Space between icon and text */
  font-size: 20px;
  /* Adjust icon size */
  display: flex;
  /* Flex display for alignment */
  align-items: center;
  /* Center icon vertically */
  justify-content: center;
  /* Center icon horizontally */
  width: 32px;
  /* Width of the icon container */
  height: 32px;
  /* Height of the icon container */
}

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

.contact .info-item p {
  font-family: Poppins;
  font-size: 18px;
  font-weight: 400;
  line-height: 22.77px;
  text-align: left;

}

.contact .info-item h6 {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.24px;
  text-align: left;
  padding: 7px;
}

.contact .php-email-form {
  /* background: color-mix(in srgb, var(--default-color), transparent 96%); */
  padding: 20px;
  height: 496.35px;

}

.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] {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

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

/*----------------------------------------------------------
branches css
------------------------------------------------------------*/
.branch {
  padding: 10px;
}

.branch .content h3 {
  color: var(--accent-color);
  font-family: Alata;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  display: flex;
  justify-content: center;
}

.branch .content h3:after {
  content: "";
  flex: 1;
  border-bottom: 1.5px solid var(--accent-color);
  margin-left: 10px;
  max-width: 40px;
}

.branch .content h2 {
  font-size: 38px;
  font-weight: 600;
  text-align: center;
  font-family: Poppins;
}

.branch .add {
  border: 1px solid #000;
  display: flex;
  flex-wrap: wrap;
}

.branch .add .image-content {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.branch .add .text-content {
  flex: 1 1 50%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.branch .add .text-content p {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 400;
  line-height: 20.24px;
  text-align: left;
  color: rgba(74, 74, 74, 1);
}

.branch .add .text-content h5 {
  font-family: Poppins;
  font-size: 22px;
  font-weight: 500;
  line-height: 28.8px;
  text-align: left;
  color: rgba(41, 46, 54, 1);
}

.branch .add .text-content i {
  color: var(--heading-color);
}

.branch .add .img-fluid {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .branch .add {
    flex-direction: column;
  }

  .branch .add .text-content,
  .branch .add .image-content {
    flex: 1 1 100%;
    padding: 5px;
  }
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
}

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

.blog-posts .title {
  padding: 0;
  font-family: Poppins;
  font-size: 24px;
  font-weight: 600;


  margin: 30px 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: 14px;
  margin-right: 8px;
  line-height: 0;
  color: var(--heading-color);
}

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

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

.blog-posts .content p {
  margin-top: 20px;
  font-family: Poppins;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;


}

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

.blog-posts .content .read-more a {

  color: var(--heading-color);
  display: inline-block;
  padding: 8px 30px;
  transition: 0.3s;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid;
  border-color: var(--heading-color);
}

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

/*--------------------------------------------------------------
# Pagination 2 Section
--------------------------------------------------------------*/
.pagination-2 {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.pagination-2 ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination-2 li {
  margin: 0 5px;
  transition: 0.3s;
}

.pagination-2 li a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-2 li.active,
.pagination-2 li:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pagination-2 li.active a,
.pagination-2 li:hover a {
  color: var(--contrast-color);
}

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

@media (min-width: 1200px) {

  .blog-details .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1155px;
  }
}

.blog-details .container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 0.5rem;
}

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

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

.blog-details .content1 {
  margin-top: 20px;
}

.blog-details .content1 p {
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: #828282;

}

.blog-details .content1 img {
  width: 398px;
  height: 486px;
  top: 1657px;
  left: 512px;
  gap: 0px;
  opacity: 0px;
}


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

.blog-details .content1 blockquote {
  overflow: hidden;
  background-color: var(--heading-color);
  padding: 20px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content1 blockquote p {
  color: #fff;

  margin-bottom: 0;

  font-weight: 500;
  font-size: 22px;
  font-family: Poppins;


}

.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: 10px;
  border: 1px solid #E0E0E0;
}

.blog-details .meta-bottom p {
  margin-bottom: 0rem;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.59px;
  text-align: left;
  color: #828282;
}

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

.blog-details .meta-bottom a {
  color: #333333;
  transition: 0.3s;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 600;
  line-height: 23.59px;
  text-align: left;

}

.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: 10px 0 40px 0;
}

.blog-author .author-container {
  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: 10px;
}

.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;
  border-radius: 50%;
}

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

.blog-comments .comment h5 a {

  color: #333333;
  transition: 0.3s;
  font-family: Roboto;
  font-size: 15.72px;
  font-weight: 700;
  line-height: 23.59px;
  text-align: left;

}

.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 time i {

  color: var(--heading-color);

}

.blog-comments .comment p {
  font-family: Roboto;
  font-size: 15.72px;
  font-weight: 400;


}

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

.blog-comments .comment .comment-reply .reply {
  padding-left: 10px;
  color: var(--heading-color);
}

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

/*--------------------------------------------------------------
# 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%);
}

/*--------------------------------------------------------------
# services Section Section
----------------------------------------------------------------*/
.service {}

.service .content h3 {
  color: var(--accent-color);
  font-family: Alata;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  display: flex;
  justify-content: center;
}

.service .content h3:after {
  content: "";
  flex: 1;
  border-bottom: 1.5px solid var(--accent-color);
  margin-left: 10px;
  max-width: 40px;
}

.service .content h2 {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
}

.service .content p {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #828282;
}

.service .card {
  background-color: #F3F4F4;
}

.service .card .row>* {
  padding-right: calc(var(--bs-gutter-x)* 0);
  padding-left: calc(var(--bs-gutter-x)* 0);
}

.service .card .serlist {
  padding: 40px;
}

.service .nav-pills {
  padding: 45px;
  /* margin:1px  5px;
  background-color: #EEEEEE; */
}

.service .nav-pills .nav-link.active,
.service .nav-pills .show>.nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: #FFFFFF;
}

.service .nav-pills .nav-link.active .nav-item,
.service .nav-pills .show>.nav-link .nav-item {
  background-color: #FFFFFF !important;
}

.service .nav-pills .nav-item {
  margin: 1px 6px;
}

.service .nav-pills .nav-link {
  padding: 28px;
  width: 9rem;
  height: 8rem;
  position: relative;
  background-color: #EEEEEE;
}

.service .card .serlist .info {
  background: var(--accent-color);
  text-align: center;
  padding: 40px 55px;
  font-size: 14px;
  color: #fff;
  font-family: Poppins;
}

@media (max-width: 768px) {
  .service .card .serlist .info {
    font-size: 15px;
    padding: 7px;

  }

  .service .card .serlist {
    display: flex;

  }

  .service .nav-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .service .nav-pills .nav-link {
    padding: 0;
    width: 5rem;
    height: 5rem;
    flex: 0 0 auto;
  }



}

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

.widgets-container .photo {
  position: relative;
  margin-bottom: 20px;
}

.widgets-container .photo-item {
  position: relative;
  display: inline-block;
  padding: 3px;
}

.widgets-container .photo-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.5s ease;
}

.widgets-container .photo-item img:hover {
  opacity: 0.5;
}

.widgets-container .photo-item .middle {
  transition: opacity 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.widgets-container .photo-item:hover .middle {
  opacity: 1;
}

.widget-title {
  color: #333333;
  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;
  font-family: Poppins;
  color: #4F4F4F;
  font-weight: 400;
  margin-top: 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: Poppins;
  font-size: 14px;
  color: #828282;
}

.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: #333333;
  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(--heading-color);
  color: var(--contrast-color);
  border: 1px solid var(--heading-color);
}

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

y {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.container-wrapper {
  display: flex;
  overflow-x: auto;
  /* Enable horizontal scrolling if necessary */
}

/*history part css*/

.history {
  padding: 50px;
    background: #F3F4F4;
}

.content {

  padding: 20px;
}

.history .content h3 {

  color: var(--accent-color);
  font-family: Alata;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  text-align: left;
  display: flex;
  flex-direction: row;

}

.history .content h3:after {
  content: "";
  flex: 1 1;
  border-bottom: 1.5px solid var(--accent-color);
  margin: auto;
  margin-left: 10px;
  max-width: 40px;
}

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

.history .timeline {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  width: 100%;
  background: #F3F4F4;
  overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.experience {
  margin-top: 5%;
  width: 100%;
  height: auto;
}

.experience h4 {
  text-align: center;
}

.experience h5 {
  color:var(--accent-color);
  font-size: 22px;
  text-transform: uppercase;
}

.experience ol,
.experience ul {
  list-style: none;
}

.experience a {
  text-decoration: none;
}
.experience p {
  padding: 20px;
}

.cd-horizontal-timeline {
  opacity: 0;
  margin: 2em auto;
  transition: opacity 0.2s;
    font-family: 'Lato', sans-serif;
      font-size: 15px;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
}
.cd-horizontal-timeline.loaded {
  opacity: 1;
}
.cd-horizontal-timeline .timeline {
  position: relative;
  height: 100px;
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}
.cd-horizontal-timeline .events-wrapper ol {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}

.cd-horizontal-timeline .events-wrapper ol li {
  flex: 0 0 auto;
  width: 7.5%;
  text-align: center;
}

.cd-horizontal-timeline .events-content li {
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
}
.cd-horizontal-timeline .events-wrapper {
  position: relative;
  height: 100%;
margin: 0 20px;
  overflow-x: auto;
    overflow-y: hidden;
      -ms-overflow-style: none;
        /* Internet Explorer 10+ */
        scrollbar-width: none;
    white-space: nowrap;
}
.cd-horizontal-timeline .events-wrapper::-webkit-scrollbar {
  display: none;
}
.cd-horizontal-timeline .events-wrapper::after,
.cd-horizontal-timeline .events-wrapper::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 10px;
}

.cd-horizontal-timeline .events-wrapper::before {
  left: 0;
  /* background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0)); */
}

.cd-horizontal-timeline .events-wrapper::after {
  right: 0;
  /* background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0)); */
}

.cd-horizontal-timeline .events {
  position: absolute;
  z-index: 1;
  /* left: 10%; */
  top: 49px;
  height: 2px;
  background: #dfdfdf;
  transition:scaleX(0);
}

.cd-horizontal-timeline .filling-line {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: var(--accent-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s;
}

.cd-horizontal-timeline .events a {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  font-size: 1.3rem;
  padding-bottom: 15px;
  color: #383838;
  transform: translateZ(0);
}

.cd-horizontal-timeline .events a::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  background-color: #f8f8f8;
  transition: background-color 0.3s, border-color 0.3s;
}

.no-touch .cd-horizontal-timeline .events a:hover::after {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.cd-horizontal-timeline .events a.selected {
  pointer-events: none;
}

.cd-horizontal-timeline .events a.selected::after {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.cd-horizontal-timeline .events a.older-event::after {
  border-color: var(--accent-color);
}



.cd-timeline-navigation a {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  transition: border-color 0.3s;
}



.no-touch .cd-timeline-navigation a:hover {
  border-color: var(--accent-color);
}

.cd-timeline-navigation a.inactive {
  cursor: not-allowed;
}

.cd-timeline-navigation a.inactive::after {
  background-position: 0 -16px;
}

.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin: 2em 0;
  overflow: hidden;
  transition: height 0.4s;
}

.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  padding: 0 5%;
  opacity: 0;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}

.cd-horizontal-timeline .events-content li.selected {
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
}

.cd-horizontal-timeline .events-content li.enter-right,
.cd-horizontal-timeline .events-content li.leave-right {
  animation-name: cd-enter-right;
}

.cd-horizontal-timeline .events-content li.enter-left,
.cd-horizontal-timeline .events-content li.leave-left {
  animation-name: cd-enter-left;
}

.cd-horizontal-timeline .events-content li.leave-right,
.cd-horizontal-timeline .events-content li.leave-left {
  animation-direction: reverse;
}

.cd-horizontal-timeline .events-content li>* {
  width: auto;
  margin: 0 auto;
}

.cd-horizontal-timeline .events-content em {
  display: block;
  font-style: italic;
  margin: 10px auto;
  font-size: 16px;
  color: #778899;
}

.cd-horizontal-timeline .events-content p {
  font-size: 22px;
  color: #333;
  padding: 10px;
    margin: 0;
white-space: normal;
}

.cd-horizontal-timeline .events-content em,
.cd-horizontal-timeline .events-content p {
  line-height: 1.6;
}

@media only screen and (min-width: 768px) {
  .cd-horizontal-timeline .events-content h4 {
    font-size: 22px;
  }

  .cd-horizontal-timeline .events-content em {
    font-size: 16px;
  }

  .cd-horizontal-timeline .events-content p {
    font-size: 22px;
  
  }
}

@media only screen and (max-width: 535px) {
  .experience img {
    display: none;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 0px;
  }
}
/*  */