/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* 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: "Nunito", sans-serif
}

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: ##00bf63;

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

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

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

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

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

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

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

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

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

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

a {
  color: #0F56AA;
  text-decoration: none;
  transition: 0.3s;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000;
  font-family: Poppins;
  line-height: normal;
}

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

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

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

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

@media (max-width: 480px) {
  .header .logo img {
    max-height: 24px;
  }

  .header .logo h1 {
    font-size: 24px;
  }
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: #00bf63;
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 15px;
  border-radius: 50px;
  transition: 0.3s;
  font-weight: 600;
}


.btn-getstart {
  color: #0F56AA;
  background: #fff;
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 15px;
  border-radius: 50px;
  transition: 0.3s;
  border: 1px solid;
  font-weight: 600;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, #0F56AA, transparent 15%);
}

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

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

  .header .navmenu {
    order: 3;
  }
  .card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    width: 100%;
    max-width: 335px;
}
}

.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: #ffffff;
}

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

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

  .navmenu li {
    position: relative;
  }

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

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

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

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: #0F56AA;
  }

  .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 .megamenu {
    position: static;
  }

  .navmenu .megamenu 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 .megamenu ul li {
    flex: 1;
  }

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

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

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

/* Mobile Navigation */
@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: Poppins;
    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, #0F56AA, transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: #0F56AA;
    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: #0F56AA;
    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%);
    transition: all 0.5s ease-in-out;
    box-shadow: none;
  }

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

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: color-mix(in srgb, #0F56AA, transparent 97%);
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

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

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: Poppins;
  color: var(--heading-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: Poppins;
}

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

.footer .social-links a:hover {
  color: #0F56AA;
  border-color: #0F56AA;
}

.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 {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.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 {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: #0F56AA;
}

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

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

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: #0F56AA;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid #0F56AA;
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

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

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

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

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

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

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

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

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

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

@media (max-width: 1199px) {

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

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

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

/*.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: #0F56AA;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}*/

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 70vh;
  position: relative;
  padding: 75px 0 40px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

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

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

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

.hero h1 {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
  font-family: poppins;
  text-align: left;
}

.hero h1 span {
  color: #00bf63;
}

.hero p {
  color: #000;
  margin: 5px 0 30px 0;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}

@media (min-width: 768px) {
  .hero .hero-img {
    max-width: 600px;
  }
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: #00bf63;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 50px;
  transition: 0.5s;
  box-shadow: 0 8px 28px color-mix(in srgb, #0F56AA, transparent 80%);
}

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

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  color: var(--default-color);
  font-weight: 600;
}

.hero .btn-watch-video i {
  color: #0F56AA;
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero .btn-watch-video:hover {
  color: #0F56AA;
}

.hero .btn-watch-video:hover i {
  color: color-mix(in srgb, #0F56AA, transparent 15%);
}

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

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

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 13px;
  }
}

/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services {
  /*  --background-color: color-mix(in srgb, #0F56AA, transparent 94%);*/
  padding: 40px 0;
}

.featured-services .service-item {
  position: relative;
  padding-top: 20px;
}

.featured-services .service-item .icon {
  background-color: color-mix(in srgb, #0F56AA, transparent 80%);
  width: 72px;
  height: 72px;
  position: relative;
  margin-right: 15px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  border-radius: 10px;
}

.featured-services .service-item .icon i {
  color: #0F56AA;
  font-size: 32px;
  z-index: 2;
  position: relative;
}

.featured-services .service-item .title {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
}

.featured-services .service-item .title a {
  color: var(--heading-color);
}

.featured-services .service-item .title a:hover {
  color: #0F56AA;
}

.featured-services .service-item .description {
  font-size: 14px;
}

.featured-services .service-item:hover .icon {
  background-color: color-mix(in srgb, #0F56AA, transparent 80%);
}

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

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  padding-bottom: 20px;
}

.about .content .who-we-are {
  text-transform: uppercase;
  margin-bottom: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.about .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

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

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

.about .content ul i {
  font-size: 1.25rem;
  margin-right: 4px;
  color: #0F56AA;
}

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

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

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

.about .content .read-more:hover {
  background: color-mix(in srgb, #0F56AA, transparent 20%);
  padding-right: 19px;
}

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

.about .about-images img {
  border-radius: 10px;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  opacity: 0.5;
  filter: grayscale(100);
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .nav-tabs {
  border: 0;
}

.features .nav-item {
  width: 100%;
  margin-bottom: 15px;
}

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

.features .nav-link {
  color: var(--heading-color);
  border: 0;
  padding: 15px 10px 10px 20px;
  transition: 0.3s;
  border-radius: 10px;
  display: flex;
  cursor: pointer;
  align-items: flex-end;
}

.features .nav-link i {
  background-color: var(--contrast-color);
  color: #0F56AA;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  width: 48px;
  height: 48px;
  font-size: 22px;
  flex-shrink: 0;
  border-radius: 50px;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--default-color), transparent 85%);
}

.features .nav-link h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px 0;
  transition: 0.3s;
}

.features .nav-link p {
  font-size: 15px;
  margin: 0;
}

.features .nav-link:hover {
  background: color-mix(in srgb, #0F56AA, transparent 96%);
}

.features .nav-link.active {
  background: color-mix(in srgb, #0F56AA, transparent 92%);
}

.features .tab-pane img {
  border-radius: 15px;
}

/*--------------------------------------------------------------
# Features Details Section
--------------------------------------------------------------*/
.features-details .features-item+.features-item {
  margin-top: 60px;
}

.features-details .features-item .content {
  background-color: color-mix(in srgb, #0F56AA, transparent 95%);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 30px;
  border-radius: 10px;
}

.features-details .features-item h3 {
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 15px;
}

.features-details .features-item .more-btn {
  background-color: #0F56AA;
  color: var(--contrast-color);
  padding: 10px 30px;
  border-radius: 6px;
}

.features-details .features-item .more-btn:hover {
  background-color: color-mix(in srgb, #0F56AA, transparent 20%);
}

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

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

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

.features-details .features-item ul i {
  font-size: 20px;
  margin-right: 10px;
  color: #0F56AA;
}

.features-details .features-item img {
  border-radius: 15px;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  /*  --background-color: color-mix(in srgb, #0F56AA, transparent 97%);*/
}

.services .service-item {
  background-color: var(--contrast-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  height: 100%;
  padding: 30px;
  transition: 0.3s;
  border-radius: 10px;
  display: flex;
}

.services .service-item .icon {
  font-size: 32px;
  border-radius: 10px;
  position: relative;
  margin-right: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.services .service-item h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 25%);
  font-weight: 700;
  font-size: 15px;
  transition: 0.3s;
}

.services .service-item p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
  font-size: 15px;
}

.services .service-item .read-more {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  transition: 0.3s;
  font-size: 14px;
}

.services .service-item .read-more i {
  margin-left: 10px;
}

.services .service-item.item-cyan .icon {
  color: #0dcaf0;
  border: 1px solid #0dcaf0;
  background: rgba(13, 202, 240, 0.1);
}

.services .service-item.item-orange .icon {
  color: #fd7e14;
  border: 1px solid #fd7e14;
  background: rgba(253, 126, 20, 0.1);
}

.services .service-item.item-teal .icon {
  color: #20c997;
  border: 1px solid #20c997;
  background: rgba(32, 201, 151, 0.1);
}

.services .service-item.item-red .icon {
  color: #df1529;
  border: 1px solid #df1529;
  background: rgba(223, 21, 4, 0.1);
}

.services .service-item.item-indigo .icon {
  color: #6610f2;
  border: 1px solid #6610f2;
  background: rgba(102, 16, 242, 0.1);
}

.services .service-item.item-pink .icon {
  color: #f3268c;
  border: 1px solid #f3268c;
  background: rgba(243, 38, 140, 0.1);
}

.services .service-item:hover {
  box-shadow: 0px 2px 25px color-mix(in srgb, var(--default-color), transparent 90%);
}

.services .service-item:hover h3 {
  color: var(--heading-color);
}

.services .service-item:hover p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

/*--------------------------------------------------------------
# More Features Section
--------------------------------------------------------------*/
.more-features .features-image {
  position: relative;
  min-height: 400px;
}

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

.more-features h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.more-features .icon-box {
  margin-top: 30px;
}

.more-features .icon-box i {
  color: #0F56AA;
  margin-right: 15px;
  font-size: 24px;
  line-height: 1.2;
}

.more-features .icon-box h4 {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 15px;
}

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

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: color-mix(in srgb, #0F56AA, transparent 96%);
  padding: 40px 40px;
  height: 100%;
  border-radius: 15px;
}

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

.pricing h4 {
  color: #0F56AA;
  font-size: 48px;
  font-weight: 700;
  font-family: Poppins;
  margin-bottom: 0;
}

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

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

.pricing .description {
  font-size: 14px;
}

.pricing .cta-btn {
  background-color: var(--default-color);
  color: var(--contrast-color);
  display: block;
  text-align: center;
  padding: 10px 35px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  font-family: Poppins;
  transition: 0.3s;
  margin-top: 20px;
  margin-bottom: 6px;
}

.pricing .cta-btn:hover {
  background: #0F56AA;
  color: var(--contrast-color);
}

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

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

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

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

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

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

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

.pricing .featured {
  position: relative;
}

.pricing .featured .popular {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #0F56AA;
  color: var(--contrast-color);
  padding: 5px 15px;
  margin: 0;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
}

.pricing .featured .cta-btn {
  background: #0F56AA;
  color: var(--contrast-color);
}

@media (max-width: 992px) {
  .pricing .box {
    max-width: 60%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 767px) {
  .pricing .box {
    max-width: 80%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 420px) {
  .pricing .box {
    max-width: 100%;
    margin: 0 auto 30px auto;
  }
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .section-title {
  padding-bottom: 20px;
}

.faq .faq-container .faq-item {
  position: relative;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 5px;
  overflow: hidden;
}

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

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

.faq .faq-container .faq-item h3 .num {
  color: #0F56AA;
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: #0F56AA;
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

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

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

.faq .faq-container .faq-item .faq-toggle:hover {
  color: #0F56AA;
}

.faq .faq-container .faq-active {
  background-color: color-mix(in srgb, #0F56AA, transparent 97%);
  border-color: color-mix(in srgb, #0F56AA, transparent 80%);
}

.faq .faq-container .faq-active h3 {
  color: #0F56AA;
}

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

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: #0F56AA;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  --background-color: color-mix(in srgb, #0F56AA, transparent 97%);
}

.testimonials .testimonial-item {
  background-color: var(--contrast-color);
  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;
  text-align: center;
  transition: 0.3s;
}

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

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

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 0 auto;
}

.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 p {
  font-style: italic;
  margin: 0 auto 15px auto;
  font-size: 15px;
}

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

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

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

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #0F56AA;
}

.testimonials .swiper-slide {
  opacity: 0.3;
}

@media (max-width: 1199px) {
  .testimonials .swiper-slide-active {
    opacity: 1;
  }

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

  .testimonials .testimonial-item {
    margin: 40px 20px;
  }
}

@media (min-width: 1200px) {
  .testimonials .swiper-slide-next {
    opacity: 1;
    transform: scale(1.12);
  }
}

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

.contact .info-item i {
  color: #0F56AA;
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  box-shadow: 0 2px 3px color-mix(in srgb, var(--default-color), transparent 85%);
}

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

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

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

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

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

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

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

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #0F56AA;
  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: #0F56AA;
}

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

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

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

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

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

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-box {
  padding: 20px;
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 88%);
}

.service-details .service-box+.service-box {
  margin-top: 30px;
}

.service-details .service-box h4 {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.service-details .services-list a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-top: 15px;
  transition: 0.3s;
}

.service-details .services-list a:first-child {
  margin-top: 0;
}

.service-details .services-list a i {
  font-size: 16px;
  margin-right: 8px;
  color: #0F56AA;
}

.service-details .services-list a.active {
  color: var(--contrast-color);
  background-color: #0F56AA;
}

.service-details .services-list a.active i {
  color: var(--contrast-color);
}

.service-details .services-list a:hover {
  background-color: color-mix(in srgb, #0F56AA, transparent 95%);
  color: #0F56AA;
}

.service-details .download-catalog a {
  color: var(--default-color);
  display: flex;
  align-items: center;
  padding: 10px 0;
  transition: 0.3s;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .download-catalog a:first-child {
  border-top: 0;
  padding-top: 0;
}

.service-details .download-catalog a:last-child {
  padding-bottom: 0;
}

.service-details .download-catalog a i {
  font-size: 24px;
  margin-right: 8px;
  color: #0F56AA;
}

.service-details .download-catalog a:hover {
  color: #0F56AA;
}

.service-details .help-box {
  background-color: #0F56AA;
  color: var(--contrast-color);
  margin-top: 30px;
  padding: 30px 15px;
}

.service-details .help-box .help-icon {
  font-size: 48px;
}

.service-details .help-box h4,
.service-details .help-box a {
  color: var(--contrast-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

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

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

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: #0F56AA;
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}


.but {
  background-color: #0F56AA;
  color: var(--contrast-color);
  padding: 10px 30px;
  border-radius: 6px;
  border: none;
}

.buts {
  background-color: #ffffff;
  color: #0F56AA;
  padding: 10px 30px;
  border-radius: 6px;
  border: 1px solid #0F56AA;
}

.sel {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: #3d434861;
  background-color:
    color-mix(in srgb, var(--background-color), transparent 50%);
  border-color:
    color-mix(in srgb, var(--default-color), transparent 80%);
}


.count {
  font-size: 40px;
  font-weight: bold;
}

.counter-wrapper {
  /*background: #333;
         background-image:url('https://images.unsplash.com/photo-1568563643102-37d43956d1d3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');*/
  /*background: cover;
         background-position: center center;
         position: relative;*/
}

.counter-wrapper:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /*  background: rgba(0,0,0,.5);*/
}

.counter-inner {
  position: relative;
  z-index: 2;
}

.count-icon {
  font-size: 48px;
}

.text-white {
  --bs-text-opacity: 1;
  color: #3e5055 !important;
}


.count {
  font-size: 40px;
  font-weight: bold;
}

.counter-wrapper {
  /*background: #333;
         background-image:url('https://images.unsplash.com/photo-1568563643102-37d43956d1d3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');*/
  /*background: cover;
         background-position: center center;
         position: relative;*/
}

.counter-wrapper:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /*  background: rgba(0,0,0,.5);*/
}

.counter-inner {
  position: relative;
  z-index: 2;
}

.count-icon {
  font-size: 48px;
}

.text-white {
  --bs-text-opacity: 1;
  color: #3e5055 !important;
}

/* RESET RULES
         –––––––––––––––––––––––––––––––––––––––––––––––––– */
/*@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap");*/

:root {
  --white: white;
  --gray: #999;
  --lightgray: whitesmoke;
  --darkgreen: #2a9d8f;
  --popular: #ffdd40;
  --starter: #f73859;
  --essential: #00aeef;
  --professional: #ff7f45;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  background: #fff;
  border: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

/*body {
         font: 18px/1.5 "Noto Sans", sans-serif;
         background: var(--lightgray);
         margin-bottom: 100px;
         }*/
h1 {
  font-size: 2.5rem;
}

.con {
  max-width: 1140px;
  text-align: center;
  padding: 0 10px;
  margin: 0 auto;
}

.intro-text {
  padding: 50px 0;
}

.intro-text a {
  text-decoration: underline;
}

/* SWITCH STYLES
         –––––––––––––––––––––––––––––––––––––––––––––––––– */
.switch-wrapper {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid lightgrey;
  margin-bottom: 10px;
  border-radius: 30px;
  background: var(--white);
}

.switch-wrapper [type="radio"] {
  position: absolute;
  left: -9999px;
}

.switch-wrapper [type="radio"]:checked#monthly~label[for="monthly"],
.switch-wrapper [type="radio"]:checked#yearly~label[for="yearly"] {
  color: var(--white);
}

.switch-wrapper [type="radio"]:checked#monthly~label[for="monthly"]:hover,
.switch-wrapper [type="radio"]:checked#yearly~label[for="yearly"]:hover {
  background: transparent;
}

.switch-wrapper [type="radio"]:checked#monthly+label[for="yearly"]~.highlighter {
  transform: none;
}

.switch-wrapper [type="radio"]:checked#yearly+label[for="monthly"]~.highlighter {
  transform: translateX(100%);
}

.switch-wrapper label {
  font-size: 16px;
  z-index: 1;
  min-width: 100px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 30px;
  transition: color 0.25s ease-in-out;
}

.switch-wrapper label:hover {
  background: var(--lightgray);
}

.switch-wrapper .highlighter {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 30px;
  background: #0F56AA;
  transition: transform 0.25s ease-in-out;
}

/* TABLE STYLES
         –––––––––––––––––––––––––––––––––––––––––––––––––– */
.table-wrapper {
  /*  background: var(--white);*/
  /*  overflow-x: hidden;*/
}

table {
  width: 100%;
  font-size: 14px;
}

/*table tr {
         display: flex;
         }*/
table th,
table td {
  /*width: 20%;
  min-width: 150px;*/
  font-size: 14px;
  padding: 7px 20px 0px 7px;
}

table th {
  font-size: 18px;
}

/*table th:nth-child(1) {
         display: flex;
         flex-direction: column;
         font-size: 1.5rem;
         line-height: 1.3;
         padding: 1rem 10px;
         }
         table th:nth-child(1) .svg-wrapper {
         margin-top: 10px;
         }
         table th:nth-child(1) svg {
         width: 22px;
         height: 22px;
         }*/
table th .heading {
  padding: 1rem;
  color: var(--white);
}

table th:nth-child(1) .heading {
  background: #01bd6f;
  border-radius: 10px 10px 0px 0px;
  /*border-left: 1px solid var(--lightgray);
    border-right: 1px solid var(--lightgray);
    box-shadow: 1px 0px 5px 5px #00000059;*/
}

table th:nth-child(2) .heading {
  background: #ff6038;
  border-radius: 10px 10px 0px 0px;
  /*border-left: 1px solid var(--lightgray);
    border-right: 1px solid var(--lightgray);
box-shadow: 1px 0px 5px 5px #00000059;*/
}

table th:nth-child(3) .heading {
  background: #ffb828;
  border-radius: 10px 10px 0px 0px;
  /*border-left: 1px solid var(--lightgray);
    border-right: 1px solid var(--lightgray);
box-shadow: 1px 0px 5px 5px #00000059;*/
}

table th:nth-child(4) .heading {
  background: #0F56AA;
  border-radius: 10px 10px 0px 0px;
  /*border-left: 1px solid var(--lightgray);
    border-right: 1px solid var(--lightgray);
box-shadow: 1px 0px 5px 5px #00000059;*/
}

table th:nth-child(5) .heading {
  background: #d0c435;
  border-radius: 10px 10px 0px 0px;
  /*border-left: 1px solid var(--lightgray);
    border-right: 1px solid var(--lightgray);*/
  /*    box-shadow: 1px 0px 5px 5px #00000059;*/
}

table th .info {
  position: relative;
  /*    padding: 1.5rem 0;*/
  border-left: 1px solid var(--lightgray);
  border-right: 1px solid var(--lightgray);
  background-color: #394258;
  color: #fff;
  box-shadow: 7px 8px 10px 7px #00000059;
  border-radius: 10px 10px 10px 10px;

}

table th .popular {
  position: absolute;
  top: 10px;
  right: 0;
  font-size: 14px;
  background: var(--popular);
  padding: 4px 8px;
  border-radius: 15px 0px 15px 0px;
  color: #000;
}

table th .amount {
  font-size: 2rem;
}

table th .amount span {
  display: block;
  transform: translateY(-8px);
}

table th:nth-child(1) .amount {
  color: #fff;
}

table th:nth-child(2) .amount {
  color: #fff;
}

table th:nth-child(3) .amount {
  color: #fff;
}

table th:nth-child(4) .amount {
  color: #fff;
}

table th:nth-child(5) .amount {
  color: #fff;
}

table th .billing-msg,
table th .amount span {
  font-weight: normal;
  font-size: 0.8rem;
}

table th button {
  border-radius: 20px;
  padding: 8px 20px;
  margin-top: 10px;
  transition: all 0.2s;
}

table th:nth-child(1) button {
  color: #01bd6f;
  border: 1px solid #01bd6f;
}

table th:nth-child(1) button:hover {
  background: #01bd6f;
}

table th:nth-child(2) button {
  color: #ff6038;
  border: 1px solid #ff6038;
}

table th:nth-child(2) button:hover {
  background: #ff6038;
}

table th:nth-child(3) button {
  color: #ffb828;
  border: 1px solid #ffb828;
}

table th:nth-child(3) button:hover {
  background: #ffb828;
}

table th:nth-child(4) button {
  color: #0F56AA;
  border: 1px solid #0F56AA;
}

table th:nth-child(4) button:hover {
  background: #0F56AA;
}

table th:nth-child(5) button {
  color: #d0c435;
  border: 1px solid #d0c435;
}

table th:nth-child(5) button:hover {
  background: #d0c435;
}

table th button:hover {
  color: var(--white);
}

table td {
  padding: 10px;
}

table td:not(:first-child) {
  border-left: 1px solid var(--lightgray);
  background-color: #394258;
  color: #fff;
  border-right: 16px solid var(--lightgray);
  border-left: 16px solid var(--lightgray);
}

table td:first-child {
  font-size: 14px;
  text-align: center;
  background-color: #394258;
  color: #fff;
  border-right: 16px solid var(--lightgray);
  border-left: 16px solid var(--lightgray);
}

table svg {
  width: 18px;
  height: 18px;
}

table svg.not-included {
  fill: var(--gray);
}

table svg.starter {
  fill: var(--starter);
}

table svg.essential {
  fill: var(--essential);
}

table svg.professional {
  fill: var(--professional);
}

table .hide {
  display: none;
}

.bor {
  border-bottom: 1px solid #ffffff3d;
  font-size: 14px;
  padding: 14px;

}

.bord {
  /*         border-bottom: 1px solid #4444442b; */
  box-shadow: 0px 2px 25px color-mix(in srgb, var(--default-color), transparent 90%);
}

/* MQ
         –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 780px) {
  table td {
    padding: 20px;

  }
}

/* FOOTER STYLES
         –––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  z-index: 1;
  font-size: 16px;
  background: var(--lightgray);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}


* {
  box-sizing: border-box
}

.tablink {
  background-color: #fff;
  color: #000;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 14px;
  width: 16%;
  border-radius: 10px 10px 0px 0px;
}

.tablink:hover {
  background-color: #0F56AA;
}

.tabcontent {
  color: white;
  display: none;
  padding: 20px 20px;
  height: 100%;
  border-radius: 0px 0px 10px 10px;
}

#Signatures {
  background-color: #d1e6ff;
}

#Payment {
  background-color: #d1e6ff;
}

#Generated {
  background-color: #d1e6ff;
}

#Workflow {
  /*          background-color: #d1e6ff;*/
}

#Data {
  background-color: #d1e6ff;
}

#Approvals {
  background-color: #d1e6ff;
}


header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/*.logo img {
    width: 100px; 
}*/

/* Hide mobile logo on desktop view */
.mobile-logo {
  display: none;
}

/* Media query for mobile view */
@media (max-width: 768px) {
  .desktop-logo {
    display: none;
    /* Hide desktop logo on mobile view */
  }

  .mobile-logo {
    display: block;
    /* Show mobile logo on mobile view */
    /*    width: 70px;*/
    /* Adjust size if needed */
  }
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 14px;
  color: #000;
}


.image-box {
  /*    background-color: aliceblue;*/
  width: fit-content;
  overflow: hidden;
}

.img1 {
  z-index: -1;
  animation-duration: 1s;
  animation-name: slideUp;

  margin-left: -110px;
}

.img2 {
  margin-left: -264px;
  z-index: 0;
  animation-duration: 1s;
  animation-name: slideUp;
  width: 80%;
  position: absolute;
  margin-top: 20px;
}

.img3 {
  margin-left: -160px;
  z-index: -1;
  animation-duration: 1s;
  animation-name: slideUp;
  position: absolute;
  margin-top: -25px;
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: #ffffff;
  background-color: #0F56AA;
  margin: 10px;
  border-radius: 10px;
}

.tab.active {
  border-bottom: 2px solid #007bff;
  color: #007bff;
  border-bottom: 2px solid #ffffff;
  color: #000000;
  background-color: #ff5400d6;
  border-radius: 10px;
}

.content {
  margin-top: 20px;
  overflow: hidden;
}

.tab-content {
  display: none;
  padding: 20px;
  /*    border: 1px solid #ddd;*/
  border-top: none;
  border-radius: 5px;
}

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

button {
  padding: 10px 20px;
  /*         background-color: #007bff;*/
  color: #000;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.timesheet-tab-content {
  display: flex;
  justify-content: space-between;
}

.card {
  
  margin: 15px;
  
}

.card h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.card p {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #fff;
  margin-top: -4px;
}

.bon {
  color: #ff5400;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.image-container {
  position: relative;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

.image-container:hover img {
  transform: translateY(-15%);
  /* Adjust the percentage to control the scroll distance */
}


.card1 {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  /* border: 1px solid #ddd; */
  border-radius: 10px 10px 0px 0px;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
  /*    margin: 5px;*/
  background-color: #ddebff;
}

.card1 img {
  width: 100%;
  height: auto;
  /*      position: absolute;*/
  top: 0;
  transition: transform 8s linear;
  padding: 15px;
  border-radius: 10px;
}

.card1:hover img {
  transform: translateY(-50%);
}


/* Responsive Styles */
@media screen and (max-width: 768px) {
  .tabs {
    flex-direction: column;
    align-items: center;
  }

  .tabs li {
    /*    width: 100%;*/
    margin: 5px 0;
  }

  .timesheet-tab-content {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 90%;
  }

  .section-title h2 {
    font-size: 24px;
  }

  .section-title p {
    font-size: 14px;
  }

  .hero {
    width: 100%;
    min-height: 50vh;
    position: relative;
    padding: 120px 0 40px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .banner {
    width: 180%;
  }


}


@media (min-width: 1200px) and (max-width: 1439px) {
  .banner {
    width: 100%;
  }

}

@media screen and (max-width: 480px) {
  .section-title h2 {
    font-size: 20px;
  }

  .section-title p {
    font-size: 12px;
  }

  .tabs li {
    padding: 10px;
    font-size: 14px;
  }

  .card button {
    padding: 8px 12px;
    font-size: 14px;
  }


  .hero {
    width: 100%;
    min-height: 70vh;
    position: relative;
    padding: 75px 0 40px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .banner {
    width: 180%;
  }
}

.butt {
  background-color: #ffffff;
  color: #0F56AA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 0px 40px 10px 40px;
  border: 1px solid #0F56AA;
}


.ico {
  width: 100px;
  border-radius: 100px;
  padding: 10px;
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}


.popup {
  /*display: none;
  position: fixed;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 50%;
  z-index: 3;*/
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  z-index: 1000;
  height: auto;
  border-radius: 10px;
  width: 50%;
}

/*.popup-content {
  grid-template-columns: 2fr 1fr;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}*/

.form-container,
.info-container {
  padding: 20px;
}

.closePopup {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}

.popup-content {

  /*  display: grid;*/
  grid-template-columns: 2fr 1fr;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
  display: none;
}


.bt {
  background-color: #ffffff;
  color: #0F56AA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  /*    margin: 0px 40px 10px 40px;*/
  border: 1px solid #0F56AA;
}

/*@media (min-width: 1200px) and (max-width: 1439px) {
  .table-wrapper {
    background: var(--white);
    overflow-x: hidden;
  }
}*/

/*@media (min-width: 1440px)  {
  .table-wrapper {
    background: var(--white);
    overflow-x: hidden;
  }
}*/


@media (max-width: 576px) {
  button {
    font-size: 12px;
    padding: 8px 12px;
    width: 50%;
  }

  .table-wrapper {
    overflow-x: auto;
  }
}


.table-wrapper table {
  grid-template-columns: repeat(2, 1fr);
  /* 2 columns */
}

th {
  padding: 18px;
}
}

/* Medium Devices (768px - 992px) */
@media (min-width: 768px) and (max-width: 992px) {
  .table-wrapper table {
    grid-template-columns: repeat(3, 1fr);
    overflow: auto;
    /* 3 columns */
  }

  th {
    padding: 20px;
  }
}


@media (min-width: 992px) {
  .table-wrapper table {
    grid-template-columns: repeat(4, 1fr);
    /* Full grid for larger screens */
  }
}


element {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

element::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, and Edge */
}

th:nth-child(2) {
  transform: scale(1.02);
}


th:hover {
  transform: scale(1.01);
}


th:hover:nth-child(2) {
  transform: scale(1.02);
}


/* Container for header */
.header1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0px 35px 0px 35px;
}

/* Left side: Sort by Dropdown */
.sort-by {
  display: flex;
  align-items: center;
}

.sort-by select {
  margin-left: 10px;
  padding: 5px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* Right side: Search Box */
.search-box input {
  padding: 8px;
  width: 200px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
}

.search-box input:focus {
  border-color: #007bff;
}

/* Card Styling */
/*.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}*/

.timesheet-tab-content1 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

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

.img-fluid {
  animation: slideIn 1.5s ease-out;
}


.d-flex {
  display: flex !important;
    justify-content: space-between !important;
}
}


@media (min-width: 480px) and (max-width: 768px) {
  .img1 {
    z-index: -1;
    animation-duration: 1s;
    animation-name: slideUp;
    margin-left: -112px;
    width: 80%;
  }

  .img2 {
    margin-left: -160px;
    z-index: 0;
    animation-duration: 1s;
    animation-name: slideUp;
    width: 68%;
    position: absolute;
    margin-top: 0px;
  }

  .img3 {
    margin-left: -60px;
    z-index: -1;
    animation-duration: 1s;
    animation-name: slideUp;
    position: absolute;
    margin-top: -40px;
    width: 65%;
  }
}


@media (max-width: 480px) {
  .img1 {
    z-index: -1;
    animation-duration: 1s;
    animation-name: slideUp;
    margin-left: -140px;
    width: 80%;
    margin-top: 0;
  }

  .img2 {
    margin-left: -125px;
    z-index: 0;
    animation-duration: 1s;
    animation-name: slideUp;
    width: 65%;
    position: absolute;
    margin-top: 0px;
  }

  .img3 {
    margin-left: -60px;
    z-index: -1;
    animation-duration: 1s;
    animation-name: slideUp;
    position: absolute;
    margin-top: -20px;
    width: 65%;
  }
}


.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1* var(--bs-gutter-y));
  margin-right: calc(-.5* var(--bs-gutter-x));
  margin-left: calc(-.5* var(--bs-gutter-x));
}

/*.tabs {
  display: flex;
  background-color: #FF6600;
  width: 100px;
  padding: 1em;
  border-radius: 10px;
}*/

.menu {
  display: flex;
  width: 100%;
  /* background-color: #007bff; */
  justify-content: center;
  gap: 10px;
}

.wh {
  background-color: #fff;
}

.cards {
  display: flex;
  gap: 2em;
  width: 100%;
  justify-content: center;
}

.card {
  /*width: 20em;
  height: 33em;*/
  overflow: visible;
      overflow: visible;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 30%;
    padding: 15px;
}

.title {
  display: flex;
  /* background-color: #007bff; */
  justify-content: space-between;
}

.brand {
  background-color: white;
  border-right: lightgray solid 1px;
  padding-right: 10px;
}

.price {
  background-color: #00bf63;
  display: flex;
  width: auto;
  justify-items: center;
  border-radius: 50px;
  align-items: center;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 14px;
  /*  padding: 0px 100px;*/
}

h1 {
  font-size: 1.5em;
  font-weight: 900;

}

.feature {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5em;
}

.fl-st {
  align-items: flex-start !important;
}

.features {
  width: 28%;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.specification {
  display: flex;
  gap: 5em;
  justify-content: center;
}

.achievements {
  display: flex;
  gap: 1em;
  justify-content: space-between;
}

.achieve {
  border-right: solid 1px grey;
  width: 8em;
}

.achieves {
  border-right: solid 1px grey;
  width: 30%;
  text-align: center;
}

.br-0 {
  border-right: 0px;
}

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

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #FF6600;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #000;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #FF6600;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #FF6600;
  border: 1px solid #FF6600;
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 1em;
  font-size: 14px;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 18px;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}

.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded='true'] {
  color: #FF6600;
}

.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}

.accordion button[aria-expanded='true']+.accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}

.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}

.accordion .accordion-content p {
  font-size: 14px;
  font-weight: 300;
  margin: 2em 1em;
}

/*.promo{
  width: 100%;
}*/
.company {
  width: 20%;
  font-size: 14px;
}

.contact {
  display: flex;
  gap: 1em;
  align-items: flex-start;
  margin-top: 1em;
}

.copyrights {
  width: 100%;
  text-align: center;
}

.ft-img {
  position: absolute;
  bottom: 0;
  /*  right: 0;*/
  left: 0;
  width: 170px;
}


/* General Styling */
#featured-services {
  padding: 20px;
  /*  background-color: #FFF0E6;*/
  border-radius: 20px;
  margin: 0 auto;
  width: 87%;
  max-width: 1320px;
}

#featured-services .section-title {
  text-align: center;
  margin-bottom: 20px;
}

#featured-services .menu {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

#featured-services .menu .tabs img {
  width: 50px;
  height: auto;
  cursor: pointer;
}

/* Cards Styling */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/*.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  width: calc(50% - 20px);
  max-width: 300px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: left;
  padding: 15px;
}*/

.card img {
  border-radius: 10px;
  margin-bottom: 10px;
}

.card .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card .price {
  background: #0F56AA;
  border-radius: 25px;
  padding: 5px 10px;
  text-align: center;
  color: #fff;
  width: auto;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .cards {
    gap: 15px;
  }

  .card {
    width: calc(50% - 15px);
  }

  #featured-services .menu {
    flex-wrap: wrap;
    gap: 15px;
  }

  #featured-services .menu .tabs img {
    width: 40px;
  }
}

@media (max-width: 576px) {
  .card {
    width: 100%;
  }

  #featured-services .section-title h2 {
    font-size: 1.5em;
  }

  #featured-services .menu .tabs img {
    width: 35px;
  }

  .card h6 {
    font-size: 0.9em;
  }

  .card .price h6 {
    font-size: 0.9em;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .specification {
    display: flex;
    gap: 5em;
    justify-content: center;
  }

  .acc {
    display: flex;

    justify-content: center;
  }

  .al {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /*.wi {
    width: 50%;
  }*/

  .popup {
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
    z-index: 1000;
    height: auto;
    border-radius: 10px;
    width: 50%;
  }

}

@media (max-width: 992px) {
  .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .card {

    height: 31em;
    overflow: visible;
  }

  .specification {
    display: flex;
    flex-wrap: wrap;
  }

  .features {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2em;
  }

  .top1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 14px;
    /* padding: 0px 100px; */
    flex-wrap: wrap;
  }

  .acc {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .al {
    display: flex;
    flex-direction: column;
  }

  .promo {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .card {

    height: 37em;
    overflow: visible;
  }

  .specification {
    display: flex;
    flex-wrap: wrap;
  }

  .features {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2em;
  }

  .top1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 14px;
    /* padding: 0px 100px; */
    flex-wrap: wrap;
  }

  .acc {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .al {
    display: flex;
    flex-direction: column;
  }

  .promo {
    width: 100%;
  }

  .achievements {
    display: flex;
    gap: 1em;
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .card {

    height: 36em;
    overflow: visible;
  }

  .specification {
    display: flex;
    flex-wrap: wrap;
  }

  .features {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2em;
  }

  .top1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 14px;
    /* padding: 0px 100px; */
    flex-wrap: wrap;
  }

  .acc {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .al {
    display: flex;
    flex-direction: column;
  }

  .promo {
    width: 100%;
  }

  .achievements {
    display: flex;
    gap: 1em;
    justify-content: space-between;
    width: 100%;
  }
}


/* General Section Styling */
.featured-services {
  padding: 0px;
  width: 100%;
}

.section-title {
  text-align: center;
  margin-bottom: 20px;
}

.highlight {
  color: #FF6600;
}

.divider-img {
  max-width: 100px;
  margin-bottom: 10px;
}

.title {
  font-size: 1.5rem;
  /*    margin-bottom: 20px;*/
  text-align: center;
}

.images-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.responsive-img {
  max-width: 100%;
  height: auto;
  flex: 1 1 30%;
}

/* Description Section */
.description {
  font-size: 14px;
  line-height: 1.6;
  text-align: justify;
  margin: 20px 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .title {
    font-size: 1.2rem;
    text-align: center;
  }

  .images-group {
    flex-direction: column;
    align-items: center;
  }

  .responsive-img {
    width: 80%;
    margin-bottom: 15px;
  }

  .description {
    font-size: 13px;
  }

  .popup {
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
    z-index: 1000;
    height: auto;
    border-radius: 10px;
    width: auto;
  }

  .achievements {
    display: flex;
    gap: 1em;
    justify-content: space-between;
    width: 100%;
  }
}

@media (max-width: 667px) {
  .achievements {
    display: flex;
    gap: 1em;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 1rem;
  }

  .responsive-img {
    width: 100%;
  }

  .description {
    font-size: 12px;
  }

  .popup {
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
    z-index: 1000;
    height: auto;
    border-radius: 10px;
    width: auto;
  }

  .achievements {
            display: flex;
        gap: 1em;
        justify-content: space-between;
        width: 100%;
        flex-direction: row;
        margin-bottom: 100px;
  }

  widd{
    width: auto;
  }
}


.h6,
h6 {
  font-size: 14px;
}


/* Mobile Responsiveness */
@media (max-width: 768px) {
  .container.footer-top {
    flex-direction: column;
    align-items: center;
  }

  .company {
    width: 100%;
    margin-bottom: 20px;
    text-align: left;
  }

  .company h4 {
    font-size: 18px;
  }

  .contact p {
    font-size: 14px;
  }

  .social-links {
    display: flex;
    justify-content: left;
  }

  .social-links a {
    margin-right: 15px;
    font-size: 20px;
  }

  .copyrights p {
    font-size: 14px;
    margin-top: 10px;
  }

  .popup {
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
    z-index: 1000;
    height: auto;
    border-radius: 10px;
    width: 90%;
  }
}

@media (max-width: 480px) {
  .company h4 {
    font-size: 16px;
  }

  .company p {
    font-size: 12px;
  }

  .social-links a {
    font-size: 18px;
  }

  .copyrights p {
    font-size: 12px;
  }

  .popup {
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #ccc;
    padding: 20px;
    z-index: 1000;
    height: auto;
    border-radius: 10px;
    width: 90%;
  }
}


hr {
  margin: 5px;
  color: inherit;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: .25;
}


.swiper-pagination {
  position: relative;
  text-align: center;
  transition: .3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}


dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 14px;
  color: #000;
}


.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  display: none;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {

  display: none;
}


.swiper-container {
  width: 100%;
  padding: 20px 0;
  position: relative;
}

.swiper-slide {
  display: flex;
  justify-content: center;
}

.swiper-button-next,
.swiper-button-prev {
  color: #FF6600;
  /* Customize navigation button colors */
}

.swiper-pagination {
  position: relative;
  bottom: 10px;
  /* Adjust the position of the pagination to the bottom */
  width: 100%;
  text-align: center;
}

.swiper-pagination-bullet {
  background-color: transparent;
  border: none;
  display: inline-block;
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
  font-weight: bold;
  color: #FF6600;
  border: 1px solid #FF6600;
  border-radius: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50px;
}

.swiper-pagination-bullet-active {
  background-color: #FF6600;
  color: #fff;
  /* Active page number style */
  width: 30px;
  height: 30px;
  border-radius: 50px;
}

.swiper-pagination-bullet:hover {
  background-color: #FF6600;
  color: #fff;
  /* Hover effect for page numbers */
  width: 30px;
  height: 30px;
  border-radius: 50px;
}

/*.card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;
  width: 100%;
  
  max-width: 385px;
  
}*/


/* Style the tab */
.tabb {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: #ffffff;
}


/*popup1*/

/* Style the buttons inside the tab */
.tabb button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 14px;
}

/* Change background color of buttons on hover */
.tabb button:hover {
  background-color: #ddd;
  border-radius: 10px 10px 0px 0px;
}

/* Create an active/current tablink class */
.tabb button.active {
  background-color: #ccc;
  border-radius: 10px 10px 0px 0px;
}

/* Style the tab content */
.tabbcontent {
  display: none;
  padding: 6px 12px;
  /*  border: 1px solid #ccc;*/
  border-top: none;
}

.tabbcontent.active {
  display: block;
}


.tab1 {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: #ffffff;
}

/*poppup2*/
/* Style the tab */
.tab1 {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: #ffffff;
}

/* Style the buttons inside the tab */
.tab1 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 14px;
}

/* Change background color of buttons on hover */
.tab1 button:hover {
  background-color: #ddd;
  border-radius: 10px 10px 0px 0px;
}

/* Create an active/current tablink class */
.tab1 button.active {
  background-color: #ccc;
  border-radius: 10px 10px 0px 0px;
}

/* Style the tab content */
.tab1content {
  display: none;
  padding: 6px 12px;
  /*  border: 1px solid #ccc;*/
  border-top: none;
}

.tab1content.active {
  display: block;
}


.jic {
  justify-items: center;
}

.alc {
  align-items: center;
}

.hero_col {
  color: #0F56AA;
}

.hero_colo {
  color: #00bf63;
}

.mar-10 {
  margin: 10px;
}

.wid-250 {
  width: 250px;
}

.callus {
  background-color: #d2bde982;
  padding: 10px;
  border-radius: 10px;
  margin: 10px;
  height: 220px;
}

.wid-50 {
  width: 50px;
}

.wid-75 {
  width: 75px;
}

.bg1 {
  background-color: #FF66001A;
}

.tit1 {
  justify-content: left;
  gap: 10px;
}

.tal {
  text-align: left;
}

.titl {
  justify-content: right;
  gap: 10px;
}

.pri {
  color: #fff;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.view {
  background-color: #0F56AA;
  color: #fff;
  border-radius: 50px;
}

.h1-wid {
  width: 32%;
}

.abt-con {
  /*  width: 64%;*/
  text-align: justify;
  font-size: 14px;
}

.tar {
  text-align: right;
  "

}

.pad-t-b {
  padding-top: 50px;
  padding-bottom: 50px;
}

.f-s {
  font-size: 2em;
}

.mission {
  color: #0F56AA;
  font-weight: 900;
}

.f-s-18 {
  font-size: 18px;
}

.m-b {
  margin-bottom: 10px;
}

.mar-15 {
  margin: 15px;
}

.foot {
  background-color: #E7EEF7;
  padding-bottom: 1em;
  padding-top: 6em;
}

.conta {
  background-image: url(assets/img/promobg.svg);
  width: 80%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  position: absolute;
  margin-top: -4em;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pro {
  color: #fff;
  font-size: 2em;
}

.co-whit {
  color: #fff;
}

.call {
  font-size: 18px;
  color: #fff;
}

.foot_con {
  display: flex;
  justify-content: space-between;
}

.foot_lo {
  width: 10em;
}

.f-s-14 {
  font-size: 14px;
  margin-bottom: 0px;
}

.quick_link {
  font-size: 14px;
  display: flex;
  flex-direction: column;
}

.ti {
  justify-content: right;
  gap: 10px;
  position: relative;
  bottom: -25px;
  right: 10px;
}


.hidden {
  display: none;
}

.tabs,
.popup-tabs {
  list-style: none;
  padding: 0;
  display: flex;
}

.tab,
.popup-tab {
  cursor: pointer;
  padding: 15px;
  margin: 0 5px;
  background: #00bf63;
  border-radius: 5px;
  width: auto;
  text-align: center;
}

.tab.active,
.popup-tab.active {
  background: #ff6600;
  color: #fff;
  width: auto;
  text-align: center;
}

/*  .popup-content { max-width: 500px; }*/
.closePopup {
  margin-top: 10px;
  background: #f00;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 50px;
  font-size: 14px;
  width: 30px;
}

.wit {
  width: 100px;
}

/*whatsapp*/
.WhatsAppfloat {
         position: fixed;
         width: 60px;
         height: 60px;
         bottom: 85px;
         right: 40px;
         background-color: #25d366;
         color: #FFF;
         border-radius: 90px;
         text-align: center;
         font-size: 40px;
         box-shadow: 2px 2px 3px #999;
         z-index: 100;
      }

      .WhatsApp-float {
         margin-top: 12px;
      }


      @media (max-width: 480px) {
    .ft-img { 
        display: none;
    }
}


@media (max-width: 768px) {
    .ft-img { 
        display: none;
    }
}


@media (max-width: 480px) {
    .achievements {
        display: flex;
        gap: 1em;
        justify-content: space-between;
        width: 100%;
        flex-direction: column;
        margin-bottom: 100px;
    }
}



.carousel-container {
         width: 100%; 
         overflow: hidden;
         position: relative;
         }
         .carousel-container1 {
         width: 100%;
         overflow: hidden;
         position: relative;
         }
         .carousel-wrapper {
         display: flex;
         flex-wrap: nowrap;
         transition: transform 0.5s ease-in-out;
         }
         .carousel-card {
         min-width: 31.3%;
         margin: 10px;
         background: white;
         padding: 20px;
         text-align: center;
         border-radius: 10px;
         }
         .carousel-btn {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         background: rgba(0, 0, 0, 0.7);
         color: white;
         border: none;
         padding: 5px;
         cursor: pointer;
         font-size: 15px;
/*         border-radius: 50%;*/
         z-index: 10;
         }
         .prev { left: 0; z-index: 1; }
         .next { right: 0; }
         @media (max-width: 576px) {
         .carousel-btn {
         width: 12%;
         }
         }
         @media (max-width: 576px) {
         .carousel-card {
         min-width: 97%;
         margin: 10px;
         background: white;
         padding: 20px;
         text-align: center;
         border-radius: 10px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
         }
         @media (max-width: 576px) {
         .carousel-btn {
            width: 12%;
         }
         .carousel-card {
            min-width: 97%;
         }
      }



      @keyframes shadowFade {
  0% {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
  }
}
 
.fading-shadow {
  display: inline-block;
  border-radius: 60px;
  transition: all 0.3s ease-in-out;
  animation: shadowFade 2s infinite ease-in-out;
}