/**
* Template Name: System Technology Hub
/* 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: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #012970; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #0d83fd; /* old color "4154f1"Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default 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: #012970;  /* The default color of the main navmenu links */
  --nav-hover-color: #0d83fd; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #0d83fd; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f9f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

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

/* Nav Menu Colors - Dark Mode Mobile Specific Update */
:root {
  --nav-mobile-dark-background-color: #252525; /* Background color for mobile navigation menu in dark mode */
  --nav-mobile-dark-color: #ffffff; /* Text color for mobile navigation menu in dark mode */
  --nav-mobile-dark-hover-color: #0d83fd; /* Hover color for links in dark mode */
}

/* Dark mode adjustments for mobile nav menu */
@media (max-width: 768px) {
  body.dark-mode {
    --nav-mobile-background-color: var(--nav-mobile-dark-background-color);
    --nav-dropdown-background-color: var(--nav-mobile-dark-background-color);
    --nav-color: var(--nav-mobile-dark-color);
    --nav-dropdown-color: var(--nav-mobile-dark-color);
    --nav-hover-color: var(--nav-mobile-dark-hover-color);
  }

  .mobile-nav {
    background-color: var(--nav-mobile-background-color);
    color: var(--nav-color);
  }

  .mobile-nav a {
    color: var(--nav-color);
  }

  .mobile-nav a:hover {
    color: var(--nav-hover-color);
  }

  .mobile-nav .dropdown {
    background-color: var(--nav-dropdown-background-color);
    color: var(--nav-dropdown-color);
  }

  .mobile-nav .dropdown a:hover {
    color: var(--nav-dropdown-hover-color);
  }
}


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

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

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

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


/* Dark Mode Style
------------------------------*/
body.dark-mode {
  --background-color: #1e1e1e;
  --default-color: #e0e0e0;
  --heading-color: #ffffff;
  --accent-color: #ffffff;
  --surface-color: #292929;
  --contrast-color: #000000; /* Ensures contrast on light elements */
}

/* Update elements for dark mode */
body.dark-mode a {
  color: var(--accent-color);
}

body.dark-mode .header {
  background-color: var(--surface-color);
  color: var(--default-color);
}

body.dark-mode .footer {
  background-color: var(--surface-color);
  color: var(--default-color);
}

body.dark-mode .btn-getstarted {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

body.dark-mode .btn-getstarted:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}


/* Dark Mode Styles for th-container2 and about-area3 */
body.dark-mode .th-container2 {
  background: linear-gradient(to left, var(--gradient-start), var(--gradient-end));
  color: var(--default-color);
}

body.dark-mode .about-area3 .sec-title,
body.dark-mode .about-area3 p,
body.dark-mode .about-area3 .checklist.style2 li {
  color: var(--default-color);
}

body.dark-mode .checklist.style2 li strong {
  color: var(--accent-color);
}

body.dark-mode .th-experience .experience-year,
body.dark-mode .th-experience .experience-text {
  color: var(--default-color);
}

/* Dark Mode Styles for down-option-area */
body.dark-mode .down-option-area {
  background-color: var(--surface-color);
  color: var(--default-color);
}

body.dark-mode .down-option-area .cilent-box_title,
body.dark-mode .down-option-area .about-counter h2,
body.dark-mode .down-option-area .cilent-box h4 {
  color: var(--default-color);
}

body.dark-mode .down-option-area .about_review i {
  color: var(--accent-color);
}

/* Dark Mode Styles for appointment-area */
body.dark-mode .appointment-area {
  background-color: var(--surface-color);
  color: var(--default-color);
}

body.dark-mode .appointment-area .sec-title,
body.dark-mode .appointment-area .sec-desc {
  color: var(--default-color);
}

body.dark-mode .appointment-form2 .form-control {
  background-color: var(--background-color);
  color: var(--default-color);
  border-color: var(--surface-color);
}

body.dark-mode .appointment-form2 .form-control::placeholder {
  color: var(--default-color);
  opacity: 0.7;
}

body.dark-mode .appointment-form2 .th-btn.style3 {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

body.dark-mode .appointment-form2 .th-btn.style3:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

/* Dark Mode Styles for form messages */
body.dark-mode .loading,
body.dark-mode .error-message,
body.dark-mode .sent-message {
  color: var(--default-color);
}
/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

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

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

.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(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

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

/*--------------------------------------------------------------
# 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: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 20px;
  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: 16px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  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%);
}

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

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

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

/* Dark Mode Button
------------------------------*/
.theme-toggle {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  transition: background-color 0.3s ease;
  border-radius: 50px;
}


.theme-toggle img {
  transition: opacity 0.3s ease;
}


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

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

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 12px;
    font-size: 16px;
    font-family: var(--nav-font);
    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: 16px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

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

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

  .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 rgba(0, 0, 0, 0.1);
  }

  .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;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

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

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

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

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

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

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    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 rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 130%;
    right: 8%; /* Align to the right edge of the parent */
    left: auto; /* Reset the left property */
    transform: none; /* Remove the centering transform */
    width: auto; /* Allow the width to adjust based on content */
    max-width: 800px; /* Set a maximum width */
    visibility: hidden;
    opacity: 0;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }

  .navmenu .listing-dropdown ul li {
    flex: 1 1 200px; /* Allow items to grow and shrink, with a base width of 200px */
    min-width: 200px; /* Set a minimum width for each item */
  }

  .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);
  background-color: var(--background-color);
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

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

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

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

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

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  color: var(--default-color);
}

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

.footer .footer-newsletter .newsletter-form input[type=email]::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%); /* Light placeholder text color */
  font-style: normal; /* Optional: Add italic style for subtle appearance */
  font-size: 14px; /* Ensure the font size matches your design */
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.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 p {
  color: var(--heading-color);
  margin: 10px 0 0 0;
  font-size: 32px;
  font-weight: 700;
  font-family: var(--heading-font);
}

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 80vh;
  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 Section (Dark Mode) */
body.dark-mode .hero {
  background: url(../img/hero-bg-dark.png) top center no-repeat; /* Dark mode background */
  background-size: cover;
  color: var(--contrast-color); /* Dark mode text */
}



.hero h1 {
  margin: 0;
  font-size: 50px;
  font-weight: 700;
  line-height: 56px;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  margin: 5px 0 30px 0;
  font-size: 20px;
  font-weight: 400;
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 50px;
  transition: 0.5s;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  
}

.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, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

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

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

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

.hero .btn-watch-video:hover {
  color: var(--accent-color);
}

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

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

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

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

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

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



.hero .stats-row {
  position: relative;
  z-index: 1;
  margin-top: 5rem;
  background-color: var(--surface-color);
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  padding-bottom: 2rem;
}

.hero .stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}

.hero .stat-item .stat-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 50px;
  transition: 0.3s;
}

.hero .stat-item .stat-icon i {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.hero .stat-item:hover .stat-icon {
  background-color: var(--accent-color);
}

.hero .stat-item:hover .stat-icon i {
  color: var(--contrast-color);
}

.hero .stat-item .stat-content {
  flex-grow: 1;
}

.hero .stat-item .stat-content h4 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.hero .stat-item .stat-content p {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
}

@media (max-width: 575px) {
  .hero .stat-item {
    padding: 1.5rem;
  }
}


@keyframes float-badge {
  0% {
    transform: translateY(0);
  }

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

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


/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  padding: 40px;
  
}

.about .content h3 {
  font-size: 27px;
  font-weight: 700;
  color: var(--accent-color);
  text-transform: uppercase;
}

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

.about .content p {
  margin: 15px 0 30px 0;
  line-height: 24px;
  font-size: 16px;
}

.about .content .btn-read-more {
  color: var(--contrast-color);
  background: var(--accent-color);
  line-height: 0;
  padding: 15px 40px;
  border-radius: 50px;
  transition: 0.5s;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1);
}

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


/* Round the image in the About section */
.col-lg-6 img {
  border-radius: 5px; /* Makes the image round */
  object-fit: cover; /* Ensures the image doesn't stretch and maintains its aspect ratio */
}

.col-lg-6 .content {
  border-radius: 5px; /* Makes the image round */
  object-fit: cover; /* Ensures the image doesn't stretch and maintains its aspect ratio */
}

.about .image-wrapper {
  position: relative;
}

@media (max-width: 992px) {
  .about .image-wrapper {
    padding-left: 0;
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}

@media (max-width: 992px) {
  .about .image-wrapper .images {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (max-width: 992px) {
  .about .image-wrapper .main-image {
    margin-left: 0;
  }
}

.about .image-wrapper .small-image {
  position: absolute;
  top: 20%;
  left: -10%;
  width: 45%;
  border: 8px solid var(--surface-color);
}

@media (max-width: 992px) {
  .about .image-wrapper .small-image {
    position: static;
    width: 100%;
    margin: 0 auto;
    border: 0;
  }
}

.about .image-wrapper .experience-badge {
  position: absolute;
  bottom: 5%;
  right: 5%;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 1.5rem;
  border-radius: 0.5rem;
  text-align: center;
  min-width: 200px;
  animation: experience-float 3s ease-in-out infinite;
}

@media (max-width: 992px) {
  .about .image-wrapper .experience-badge {
    position: static;
    width: fit-content;
    margin: 0 auto;
  }
}

.about .image-wrapper .experience-badge h3 {
  color: var(--contrast-color);
  font-size: 2.5rem;
  margin: 0;
  line-height: 0.5;
}

.about .image-wrapper .experience-badge h3 span {
  font-size: 1rem;
  display: inline-block;
  margin-left: 0.25rem;
}

.about .image-wrapper .experience-badge p {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}

@keyframes experience-float {
  0% {
    transform: translateY(0);
  }

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

  100% {
    transform: translateY(0);
  }
}
/*--------------------------------------------------------------
# Values Section
--------------------------------------------------------------*/
.values .card {
  background-color: var(--surface-color);
  color: var(--default-color);
  padding: 30px;
  box-shadow: 0px 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: 0.3s;
  height: 100%;
  border: 0;
}

.values .card img {
  padding: 30px 50px;
  transition: 0.5s;
  transform: scale(1.1);
}

.values .card h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 18px;
}

.values .card:hover {
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.values .card:hover img {
  transform: scale(1);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

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

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

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

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .feature-box {
  padding: 24px 20px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  height: 100%;
  border-radius: 5px;
}

.features .feature-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.features .feature-box i {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  line-height: 0;
  padding: 4px;
  margin-right: 10px;
  font-size: 24px;
  border-radius: 3px;
  transition: 0.3s;
}

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

/*--------------------------------------------------------------
# Alt Features Section
--------------------------------------------------------------*/
.alt-features .icon-box {
  display: flex;
}

.alt-features .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.alt-features .icon-box i {
  font-size: 44px;
  line-height: 44px;
  color: var(--accent-color);
  margin-right: 15px;
}

.alt-features .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/

.services .service-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding: 60px 30px;
  text-align: center;
  transition: 0.3s;
  border-radius: 5px;
}

.services .service-item .icon {
  font-size: 36px;
  padding: 20px 20px;
  border-radius: 4px;
  position: relative;
  margin-bottom: 25px;
  display: inline-block;
  line-height: 0;
  transition: 0.3s;
}

.services .service-item h3 {
  font-size: 24px;
  font-weight: 700;
}

.services .service-item .read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  padding: 8px 20px;
}

.services .service-item .read-more i {
  line-height: 0;
  margin-left: 5px;
  font-size: 18px;
}

.services .service-item.item-cyan {
  border-bottom: 3px solid #0dcaf0;
}

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

.services .service-item.item-cyan .read-more {
  color: #0dcaf0;
}

.services .service-item.item-cyan:hover {
  background: #0dcaf0;
}

.services .service-item.item-orange {
  border-bottom: 3px solid #fd7e14;
}

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

.services .service-item.item-orange .read-more {
  color: #fd7e14;
}

.services .service-item.item-orange:hover {
  background: #fd7e14;
}

.services .service-item.item-teal {
  border-bottom: 3px solid #20c997;
}

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

.services .service-item.item-teal .read-more {
  color: #20c997;
}

.services .service-item.item-teal:hover {
  background: #20c997;
}

.services .service-item.item-red {
  border-bottom: 3px solid #df1529;
}

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

.services .service-item.item-red .read-more {
  color: #df1529;
}

.services .service-item.item-red:hover {
  background: #df1529;
}

.services .service-item.item-indigo {
  border-bottom: 3px solid #6610f2;
}

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

.services .service-item.item-indigo .read-more {
  color: #6610f2;
}

.services .service-item.item-indigo:hover {
  background: #6610f2;
}

.services .service-item.item-pink {
  border-bottom: 3px solid #f3268c;
}

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

.services .service-item.item-pink .read-more {
  color: #f3268c;
}

.services .service-item.item-pink:hover {
  background: #f3268c;
}

.services .service-item:hover h3,
.services .service-item:hover p,
.services .service-item:hover .read-more {
  color: #fff;
}

.services .service-item:hover .icon {
  background: #fff;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing {
  display: none; /* Completely hides the section */
}

.pricing .pricing-tem {
  background-color: var(--surface-color);
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  padding: 40px 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  height: 100%;
}

@media (min-width: 1200px) {
  .pricing .pricing-tem:hover {
    transform: scale(1.1);
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  }
}

.pricing h3 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 15px;
}

.pricing .price {
  font-size: 36px;
  color: var(--heading-color);
  font-weight: 600;
  font-family: var(--heading-font);
}

.pricing .price sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

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

.pricing .icon {
  padding: 20px 0;
}

.pricing .icon i {
  font-size: 48px;
}

.pricing ul {
  padding: 0;
  list-style: none;
  color: var(--default-color);
  text-align: center;
  line-height: 26px;
  font-size: 16px;
  margin-bottom: 25px;
}

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

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

.pricing .btn-buy {
  display: inline-block;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  color: var(--accent-color);
  transition: none;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
  border: 1px solid var(--accent-color);
}

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

.pricing .featured {
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/

.faq .faq-container .faq-item {
  position: relative;
  padding: 20px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  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: var(--accent-color);
  padding-right: 5px;
}

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

.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: var(--accent-color);
}

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

.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: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/

.portfolio {
  display: none; /* Completely hides the section */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


.testimonials .testimonial-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0 20px rgba(0, 0, 0, 0.1);
  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;
}

.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: var(--accent-color);
}

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

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team {
  display: none; /* Completely hides the section */
}
.team .team-member {
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  transition: 0.3s;
}

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

.team .team-member .member-img:after {
  position: absolute;
  content: "";
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 100%;
  background-color: var(--surface-color);
  -webkit-mask: url("../img/team-shape.svg") no-repeat center bottom;
  mask: url("../img/team-shape.svg") no-repeat center bottom;
  -webkit-mask-size: contain;
  mask-size: contain;
  z-index: 1;
}

.team .team-member .social {
  position: absolute;
  right: -100%;
  top: 30px;
  opacity: 0;
  border-radius: 50px;
  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(--default-color);
}

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

.team .team-member .member-info {
  padding: 10px 15px 20px 15px;
}

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

.team .team-member .member-info span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.team .team-member .member-info p {
  font-style: italic;
  font-size: 14px;
  padding-top: 15px;
  line-height: 26px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.team .team-member:hover {
  transform: scale(1.08);
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

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

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  display: none; /* Completely hides the section */
}
.clients .swiper-slide img {
  transition: 0.3s;
  opacity: 0.5;
}

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

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

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

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

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

/*--------------------------------------------------------------
# Recent Posts Section
--------------------------------------------------------------*/
.recent-posts {
  display: none; /* Completely hides the section */
}
.recent-posts .post-item {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  border-radius: 5px;
}

.recent-posts .post-item .post-img img {
  transition: 0.5s;
  border-radius: 5px;
}

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

.recent-posts .post-item .post-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
}

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

.recent-posts .post-item .meta span {
  font-size: 15px;
  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 {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

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

.recent-posts .post-item:hover .post-title,
.recent-posts .post-item:hover .readmore {
  color: var(--accent-color);
}

.recent-posts .post-item:hover .post-img img {
  transform: scale(1.1);
 
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  padding: 30px;
  border-radius: 5px;
}

.contact .info-item i {
  font-size: 38px;
  line-height: 0;
  color: var(--accent-color);
  
}

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

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

.contact .php-email-form {
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  padding: 30px;
  height: 100%;
  border-radius: 5px;
}

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

.contact .php-email-form button[type=submit]:hover {
  background: 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 {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

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

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-box {
  background-color: var(--surface-color);
  padding: 20px;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
}

.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 {
  background-color: var(--surface-color);
}

.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: var(--accent-color);
}

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

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

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

.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: var(--accent-color);
}

.service-details .download-catalog a:hover {
  color: var(--accent-color);
}

.service-details .help-box {
  background-color: var(--accent-color);
  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: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section



/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  background-color: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
}

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

.blog-posts .title {
  font-size: 24px;
  font-weight: 700;
  padding: 0;
  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: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

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

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

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

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

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

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

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

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

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

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

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

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

.blog-details .article {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.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 .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}

.blog-author .author-container {
  background-color: var(--surface-color);
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

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

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

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  background-color: var(--surface-color);
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--surface-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;
}

.comment-form form input:focus {
  color: var(--default-color);
  background-color: var(--surface-color);
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form textarea {
  background-color: var(--surface-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;
}

.comment-form form textarea:focus {
  color: var(--default-color);
  box-shadow: none;
  border-color: var(--accent-color);
  background-color: var(--surface-color);
}

.comment-form form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

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

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

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  background-color: var(--surface-color);
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

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

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

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

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

.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: 50px; /* Make the button round */
  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%);
}

.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Onboarding Section
--------------------------------------------------------------*/
/* General Styles */
.space {
  background-image: url('assets/img/bg/process_bg_1.jpg');
  background-size: cover; /* Ensure the image covers the entire section */
  background-position: right center; /* Align the image to the right */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  padding: 80px 0; /* Adjust padding as needed */
  position: relative; /* Ensure proper positioning */
  z-index: 1; /* Ensure content is above the background */
}

.space::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to left, var(--gradient-start), var(--gradient-end));
  z-index: -1; /* Place the overlay behind the content */
}

.container {
 
  margin:  0 auto;

}

/* Title Area Styles */
.title-area {
  margin-bottom: 40px;
}

.sub-title {
  font-size: 16px;
  font-weight: bold;
  color: #007bff;
  display: block;
  margin-bottom: 10px;
}

.sec-title {
  font-size: 36px;
  font-weight: bold;
  color: #333;
}

/* Row and Column Styles */


@media (min-width: 992px) {
  .col-lg-3 {
    flex: 0 0 25%; /* Four columns on desktops */
    max-width: 25%;
  }
}
/* Row and Column Styles */

/* Process Box Styles */
.process-box-wrap {
  position: relative;
  text-align: center;
}

.process-box-wrap:after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='134' height='39' viewBox='0 0 134 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M133.173 23.6433C126.714 16.8033 121.62 9.19526 116.032 1.68518C114.578 -0.269696 111.926 1.90146 112.691 3.89867C113.99 7.27813 115.673 10.5234 117.598 13.6407C109.189 9.30428 99.5097 6.39589 90.8399 4.46574C79.2098 1.87793 66.9908 1.13385 55.1405 2.4149C35.4797 4.54034 10.1376 15.0254 1.05119 34.0014C0.531659 35.0839 2.10482 35.8979 2.90074 35.2304C10.9697 28.4653 17.8638 21.6479 27.5895 17.1222C37.116 12.6904 47.7889 9.98799 58.2851 9.37953C69.3777 8.73616 80.2784 10.5974 90.872 13.8112C99.7423 16.5003 107.736 20.6818 116.038 24.4129C109.748 26.0598 103.711 28.8136 99.1712 32.7679C96.504 35.0921 99.3845 39.336 102.558 37.8766C107.383 35.656 111.723 32.9156 116.869 31.3494C121.64 29.8948 126.453 29.3118 131.398 28.8538C133.788 28.6297 134.709 25.2719 133.173 23.6433Z' fill='%23CED9E8'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  height: 52px;
  width: 140px;
  position: absolute;
  top: 40px;
  right: -70px;
}

@media (max-width: 1199px) {
  .process-box-wrap:after {
    background-image: url("data:image/svg+xml,%3Csvg width='96' height='36' viewBox='0 0 134 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M133.173 23.6433C126.714 16.8033 121.62 9.19526 116.032 1.68518C114.578 -0.269696 111.926 1.90146 112.691 3.89867C113.99 7.27813 115.673 10.5234 117.598 13.6407C109.189 9.30428 99.5097 6.39589 90.8399 4.46574C79.2098 1.87793 66.9908 1.13385 55.1405 2.4149C35.4797 4.54034 10.1376 15.0254 1.05119 34.0014C0.531659 35.0839 2.10482 35.8979 2.90074 35.2304C10.9697 28.4653 17.8638 21.6479 27.5895 17.1222C37.116 12.6904 47.7889 9.98799 58.2851 9.37953C69.3777 8.73616 80.2784 10.5974 90.872 13.8112C99.7423 16.5003 107.736 20.6818 116.038 24.4129C109.748 26.0598 103.711 28.8136 99.1712 32.7679C96.504 35.0921 99.3845 39.336 102.558 37.8766C107.383 35.656 111.723 32.9156 116.869 31.3494C121.64 29.8948 126.453 29.3118 131.398 28.8538C133.788 28.6297 134.709 25.2719 133.173 23.6433Z' fill='%23CED9E8'/%3E%3C/svg%3E%0A");
    width: 96px;
    height: 36px;
    right: 0px;
  }
}

@media (max-width: 991px) {
  .process-box-wrap:after {
    right: 30px;
  }
}

.process-box-wrap:last-child:after {
  display: none;
}

.process-box {
  transition: all 0.3s ease;
}

.process-box:hover {
  transform: translateY(-10px);
}

.process-box_icon {
  position: relative;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto 20px;
  transition: all 0.3s ease;
}

.process-box_icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45%;
  height: 45%;
  filter: brightness(100%);
  transition: all 0.3s ease;
}

.box-number {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #007bff;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
}

.process-box:hover .process-box_icon {
  background-color: #007bff;
}

.process-box:hover .process-box_icon img {
  filter: brightness(0) invert(1);
  transform: translate(-50%, -50%) rotateY(180deg);
}

.process-box:hover .box-number {
  background-color: #fff;
  color: #007bff;
}

.process-box_title {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(to left, var(--gradient-start), var(--gradient-end));
  margin-bottom: 10px;
}

.process-box_text {
  font-size: 14px;
  color: #666;
}

@media (max-width: 767px) {
  .process-box-wrap {
    margin-bottom: 40px;
  }

  .process-box-wrap:after {
    display: none;
  }

  .process-box-wrap:nth-child(even) {
    margin-top: 0;
  }

  .process-box-wrap:last-child {
    margin-bottom: 0;
  }
}   


/*# appointment */
/* Update the background and gradient */



/* Appointment Area */
.appointment-area {
  background-size: cover;
  background-position: center;
  padding: 60px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
  box-shadow: 0px 0 30px rgba(182, 182, 182, 0.1);
}
/* Form Styling */
.appointment-form2 {
  background: linear-gradient(to left, var(--gradient-start), var(--gradient-end));
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(74, 74, 74, 0.1);
}

.appointment-form2 .form-group {
  margin-bottom: 20px;
}

.appointment-form2 .form-control {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  background-color: #fff;
  font-size: 16px;
}



.appointment-form2 .th-btn {
  background-color: #0d83fd;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.appointment-form2 .th-btn:hover {
  background-color: #6e9ff5;
}

/* Typography */
.title-area .sub-title {
  font-size: 18px;
  font-weight: 600;
  color: #012970;
  margin-bottom: 10px;
}

.title-area .sec-title {
  font-size: 36px;
  font-weight: 700;
  color: #0d83fd;
  margin-bottom: 20px;
}

.title-area .sec-desc {
  font-size: 16px;
  color: #111010;
  margin-bottom: 30px;
}


/*------------------- 4.00. About  -------------------*/
/* About 1 ---------------------------------- */
.global-img {
  position: relative;
  min-width: 50%;
  overflow: hidden;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  /* Medium devices */
}

.global-img:before {
  position: absolute;
  top: 0;
  left: -100%;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  -webkit-transform: skewX(25deg);
      -ms-transform: skewX(25deg);
          transform: skewX(25deg);
  z-index: 2;
}

.global-img img {
  width: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .global-img {
    min-width: 100%;
    margin-bottom: 30px;
  }
}

.global-img:hover:before {
  -webkit-animation: shine 1.9s;
          animation: shine 1.9s;
}

.img-box1 {
  position: relative;
  margin-bottom: 46px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  /* Large devices */
  /* Extra small devices */
}

@media (max-width: 1199px) {
  .img-box1 {
    margin-bottom: 100px;
  }
}

@media (max-width: 575px) {
  .img-box1 {
    margin-bottom: 120px;
  }
}

.img-box1 .img1 {
  position: relative;
  border-radius: 30px;
  z-index: 2;
}

.img-box1 .img1 img {
  border-radius: 30px;
}

.img-box1 .img2 {
  position: absolute;
  right: 0;
  bottom: -15%;
  z-index: 2;
  border-radius: 30px;
  min-width: 306px;
  /* Extra small devices */
}

@media (max-width: 375px) {
  .img-box1 .img2 {
    display: none;
  }
}

.img-box1 .img2 img {
  border-radius: 30px;
  border: 10px solid var(--white-color);
}

.img-box1 .about-shape {
  content: "";
  position: absolute;
  top: 40px;
  left: 80px;
  width: 430px;
  height: 520px;
  border: 2px solid var(--theme-color);
  border-radius: 30px;
  z-index: -1;
  -webkit-animation: dance2 4s alternate infinite;
          animation: dance2 4s alternate infinite;
  /* Extra small devices */
}

@media (max-width: 575px) {
  .img-box1 .about-shape {
    width: 100%;
    height: 100%;
  }
}

.about-counter-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 25px;
}

@media (max-width: 520px) {
  .about-counter-wrapper {
    display: block;
  }
}

.about-counter-wrapper .checklist li {
  /* Medium Large devices */
}

@media (max-width: 1299px) {
  .about-counter-wrapper .checklist li {
    font-size: 14px;
  }
}

.about-counter-wrapper .checklist li:before {
  background-color: var(--theme-color);
}

@media (max-width: 520px) {
  .about-counter-wrapper .checklist {
    margin-top: 20px;
  }
}

.th-experience {
  position: absolute;
  bottom: 80px;
  left: 0px;
  z-index: 2;
  padding: 30px 30px 30px 40px;
  background: var(--theme-color);
  border-radius: 25px 0px 0px 25px;
  width: 340px;
  color: var(--white-color);
  /* Medium Large devices */
  /* Extra small devices */
}

@media (max-width: 1299px) {
  .th-experience {
    left: -30px;
  }
}

@media (max-width: 375px) {
  .th-experience {
    bottom: 0;
    padding: 20px;
  }
}

.th-experience_content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}

.th-experience .experience-year {
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -1.08px;
  color: var(--white-color);
  margin-bottom: 0px;
}

.th-experience .experience-text {
  font-family: var(--title-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: var(--white-color);
  margin-bottom: 0;
}

.th-experience.style2 {
  position: relative;
  width: 120px;
  bottom: 0;
  background-color: var(--white-color);
  border-radius: 15px;
  padding: 25px 18px;
  border: 1px solid #F2F2F2;
  box-shadow: 0px 13px 25px 0px rgba(0, 0, 0, 0.05);
  /* Medium Large devices */
}

@media (max-width: 1299px) {
  .th-experience.style2 {
    left: 0;
  }
}

.th-experience.style2 .th-experience_content {
  display: block;
  text-align: center;
}

.th-experience.style2 .experience-year {
  font-size: 36px;
  color: var(--theme-color);
  margin-bottom: 0px;
}

.th-experience.style2 .experience-text {
  font-size: 16px;
  font-weight: 400;
  color: var(--title-color);
  margin-bottom: 0;
}

.about-desc {
  max-width: 570px;
}

.achive-about {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  /* Extra small devices */
}

@media (max-width: 575px) {
  .achive-about:first-child {
    margin-bottom: 30px;
  }
}

.achive-about-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
  /* Medium Large devices */
  /* Extra small devices */
}

@media (max-width: 1299px) {
  .achive-about-wrap {
    gap: 30px;
  }
}

@media (max-width: 575px) {
  .achive-about-wrap {
    display: block;
  }
}

.achive-about .box-title {
  font-size: 20px;
  margin: -0.4rem 0 0 0;
}

.achive-about_text {
  margin-bottom: -0.4rem;
}

.about-blockquote {
  font-size: 16px;
  font-weight: 400;
  font-family: var(--body-font);
  margin: 0 0 20px 0;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--body-color);
  border-radius: 0;
  padding-left: 20px;
  font-style: normal;
}

.about-blockquote:after {
  display: none;
}

.about-blockquote:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1px;
  height: 64px;
  background: var(--theme-color);
}

.about-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
  margin: 40px 0 40px 0;
  max-width: 544px;
}

.about-text p {
  color: var(--title-color);
  margin-top: -0.3rem;
  margin-bottom: 0;
}

.year-counter {
  max-width: 230px;
  text-align: left;
  padding: 30px;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  background-color: var(--white-color);
  position: relative;
  z-index: 3;
}

.year-counter_number {
  font-family: var(--title-font);
  font-size: 70px;
  font-weight: 700;
  color: var(--theme-color);
  line-height: 50px;
  margin-bottom: 20px;
}

.year-counter_text {
  font-family: var(--title-font);
  color: var(--title-color);
  font-size: 22px;
  line-height: 32px;
  font-weight: 700;
  margin-bottom: -0.32em;
  text-transform: uppercase;
}

.about-feature {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
  background-color: var(--smoke-color2);
  border-radius: 15px;
  padding: 10px 15px;
  max-width: 244px;
  text-align: left;
}

.about-feature-wrap {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px 40px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--th-border-color);
  /* Small devices */
}

@media (max-width: 767px) {
  .about-feature-wrap {
    gap: 20px;
  }
}

.about-feature .box-title {
  font-size: 18px;
  line-height: 26px;
  margin-top: -0.34em;
  margin-bottom: -0.34em;
}

.about-profile {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  /* Large devices */
}

@media (max-width: 1199px) {
  .about-profile {
    text-align: left;
  }
}

/* About 2 ---------------------------------- */
.img-box3 {
  position: relative;
  z-index: 2;
  text-align: right;
}

.img-box3 .img1 {
  position: relative;
  text-align: right;
  z-index: 2;
  border-radius: 30px;
  /* Extra small devices */
  /* Large devices */
}

@media (max-width: 575px) {
  .img-box3 .img1 {
    text-align: center;
  }
}

.img-box3 .img1 img {
  border-radius: 30px;
}

@media (max-width: 1199px) {
  .img-box3 .img1 {
    margin-top: 50px;
  }
}

.img-box3 .th-experience {
  text-align: left;
}

.img-box5 {
  position: relative;
  z-index: 2;
  /* Large devices */
}

.img-box5 .shape1 {
  position: absolute;
  top: -285px;
  right: -120px;
  z-index: -1;
}

.img-box5 .shape1 img {
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

@media (max-width: 1199px) {
  .img-box5 {
    text-align: center;
  }
}

/* Large devices */
@media (max-width: 1199px) {
  .img-box3 {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .img-box3 .shape2 {
    right: 0;
  }
}

.about-title-area {
  max-width: 770px;
  /* Medium Large devices */
}

.about-title-area .checklist li:before {
  width: 8px;
  height: 8px;
  background-color: var(--theme-color);
}

@media (max-width: 1299px) {
  .about-title-area {
    max-width: 650px;
  }
}

.about-title-area .about-text {
  max-width: 717px;
  margin-top: 30px;
}

.about-title-area .checklist li {
  color: var(--body-color);
}

.about-title-area .th-btn {
  padding: 18px 40px;
  /* Extra small devices */
}

@media (max-width: 375px) {
  .about-title-area .th-btn {
    padding: 18px 30px;
  }
}

.about-area {
  position: relative;
  border-radius: 30px;
  border: 1px solid #E5E8F0;
  background: var(--white-color);
  padding: 120px;
  z-index: 2;
  overflow: hidden;
  /* Medium Large devices */
  /* Medium devices */
  /* Extra small devices */
}

@media (max-width: 1299px) {
  .about-area {
    padding: 120px 40px;
  }
}

@media (max-width: 991px) {
  .about-area {
    padding: 80px 40px;
  }
}

@media (max-width: 575px) {
  .about-area {
    padding: 80px 20px;
  }
}

.about-area .about-shape {
  position: absolute;
  right: 0;
  top: 0;
  /* Large devices */
}

@media (max-width: 1199px) {
  .about-area .about-shape {
    display: none;
  }
}

.about-shape {
  border-radius: 30px;
  margin-bottom: -260px;
  /* Large devices */
  /* Medium devices */
  /* Extra small devices */
}

@media (max-width: 1199px) {
  .about-shape {
    margin-bottom: -150px;
  }
}

@media (max-width: 991px) {
  .about-shape {
    margin-bottom: -80px;
  }
}

@media (max-width: 575px) {
  .about-shape {
    margin-bottom: -30px;
  }
}

.about-shape img {
  border-radius: 30px;
}

.about-area2 {
  /* Medium devices */
  /* Extra small devices */
}

@media (max-width: 991px) {
  .about-area2 {
    padding-left: 30px;
  }
}

@media (max-width: 375px) {
  .about-area2 {
    padding-left: 20px;
  }
}

.title-area-wrapper {
  position: absolute;
  bottom: 0;
  max-width: 600px;
  padding: 120px 0 120px 120px;
  /* Medium devices */
  /* Small devices */
}

@media (max-width: 991px) {
  .title-area-wrapper {
    padding: 80px 0 80px 0px;
    max-width: 400px;
  }
}

@media (max-width: 767px) {
  .title-area-wrapper {
    padding: 0px 0 180px 0px;
  }
}

.title-area-wrapper .title-area .sec-title {
  /* Small devices */
  /* Extra small devices */
}

@media (max-width: 767px) {
  .title-area-wrapper .title-area .sec-title {
    font-size: 28px;
  }
}

@media (max-width: 375px) {
  .title-area-wrapper .title-area .sec-title {
    font-size: 25px;
  }
}

.title-area-wrapper .sub-title {
  font-weight: 600;
}

@media (max-width: 600px) {
  .title-area-wrapper {
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .title-area-wrapper {
    padding-bottom: 180px;
  }
}

.title-area-wrapper .th-btn {
  padding: 17px 46.5px;
}

.about-sec {
  position: relative;
  min-height: 770px;
  border-radius: 30px;
  z-index: 2;
  background-attachment: fixed;
  /* Medium devices */
}

@media (max-width: 991px) {
  .about-sec {
    height: 472px;
  }
}

.about-sec .about-shape2 {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 512px;
  border-radius: 30px;
  background-color: var(--theme-color);
  z-index: -1;
  overflow: hidden;
}

.marquee-wrapper {
  position: relative;
  overflow: hidden;
  z-index: 9;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin-right: -75%;
  /* Large devices */
  /* Medium devices */
  /* Small devices */
}

@media (max-width: 1199px) {
  .marquee-wrapper {
    margin-right: -90%;
  }
}

@media (max-width: 991px) {
  .marquee-wrapper {
    margin-right: -100%;
  }
}

@media (max-width: 767px) {
  .marquee-wrapper {
    margin-right: -140%;
    margin-top: 20%;
  }
}

@media (max-width: 530px) {
  .marquee-wrapper {
    margin-right: -190%;
    margin-top: 20%;
  }
}

@media (max-width: 330px) {
  .marquee-wrapper {
    margin-right: -210%;
    margin-top: 50%;
  }
}

.marquee-wrapper .marquee {
  position: relative;
  --duration: 120s;
  --gap: 0px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  gap: var(--gap);
}

.marquee-wrapper .marquee:first-child {
  --duration: 100s;
}

.marquee-wrapper .marquee:last-child {
  --duration: 80s;
}

.marquee-wrapper .marquee.marquee--reverse .marquee-group {
  animation-direction: reverse;
}

.marquee-wrapper .marquee .marquee-group {
  -ms-flex-negative: 0;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  -webkit-animation: scroll var(--duration) linear infinite;
          animation: scroll var(--duration) linear infinite;
}

.marquee-wrapper .marquee .marquee-group .text {
  font-family: var(--title-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  border-radius: 100px;
  color: var(--white-color);
  padding: 6px 30px;
  margin: 8px 5px;
  display: inline-block;
  cursor: pointer;
  border: 1px solid rgba(92, 127, 255, 0.62);
  background: rgba(255, 255, 255, 0.01);
  box-shadow: 0px 3px 15px 0px rgba(41, 83, 233, 0.7);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.marquee-wrapper .marquee .marquee-group .text:hover {
  background-color: var(--white-color);
  color: var(--theme-color);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-wrapper .marquee .marquee-group {
    -webkit-animation-play-state: play;
    animation-play-state: play;
  }
}

.about-area3 {
  border: 1px solid #E3E7F0;
  padding: 80px;
  border-radius: 30px;
  /* Medium devices */
  /* Small devices */
}

@media (max-width: 991px) {
  .about-area3 {
    padding: 80px 40px;
  }
}

@media (max-width: 767px) {
  .about-area3 {
    padding: 80px 20px;
  }
}

.down-option-area {
  position: relative;
  border-radius: 30px;
  border: 1px solid #E3E7F0;
  background: #F8FAFF;
  padding: 0 30px;
  margin-top: 30px;
  /* Medium devices */
}

@media (max-width: 991px) {
  .down-option-area {
    padding: 30px;
  }
}

.down-option-area_wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* Medium devices */
  /* Small devices */
}

@media (max-width: 991px) {
  .down-option-area_wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 30px;
  }
}

@media (max-width: 767px) {
  .down-option-area_wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.down-option-area_wrapper .about-counter {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 17px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 30px 0;
  margin-right: 50px;
  /* Medium Large devices */
  /* Large devices */
  /* Medium devices */
  /* Small devices */
}

@media (max-width: 1299px) {
  .down-option-area_wrapper .about-counter {
    margin-right: 0;
  }
}

@media (max-width: 1199px) {
  .down-option-area_wrapper .about-counter {
    display: block;
  }
}

@media (max-width: 991px) {
  .down-option-area_wrapper .about-counter {
    padding: 0;
  }
}

@media (max-width: 767px) {
  .down-option-area_wrapper .about-counter {
    margin: 20px 0;
  }
}

.down-option-area_wrapper .about-counter:before {
  content: "";
  position: absolute;
  top: -2px;
  width: 1px;
  height: 124px;
  right: 25%;
  background: #E2E4EA;
  -webkit-transform: matrix(-0.97, -0.26, -0.26, 0.97, 0, 0);
      -ms-transform: matrix(-0.97, -0.26, -0.26, 0.97, 0, 0);
          transform: matrix(-0.97, -0.26, -0.26, 0.97, 0, 0);
  /* Large devices */
}

@media (max-width: 1199px) {
  .down-option-area_wrapper .about-counter:before {
    display: none;
  }
}

.down-option-area_wrapper .about-counter .cilent-box_title {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.down-option-area_wrapper .about_review {
  display: block;
  margin-bottom: 3px;
}

.down-option-area_wrapper .about_review i {
  color: #FFBE11;
  font-size: 14px;
  margin-right: 3px;
}

.down-option-area_wrapper .cilent-box_counter {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
}

.down-option-area_wrapper .cilent-box .counter-number {
  font-size: 14px;
  font-weight: 700;
}

.about-client-box {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 30px 0;
  /* Medium devices */
  /* Extra small devices */
}

@media (max-width: 991px) {
  .about-client-box {
    padding: 0;
  }
}

@media (max-width: 375px) {
  .about-client-box {
    display: block;
  }
}

.about-client-box:before {
  content: "";
  position: absolute;
  right: -35%;
  top: -2px;
  width: 1px;
  height: 124px;
  -webkit-transform: rotate(-15deg);
      -ms-transform: rotate(-15deg);
          transform: rotate(-15deg);
  background: #E2E4EA;
  /* Large devices */
}

@media (max-width: 1199px) {
  .about-client-box:before {
    display: none;
  }
}

.cilent-box_title {
  color: var(--title-color);
  font-weight: 700;
  display: block;
}

.client-thumb-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* Extra small devices */
}

@media (max-width: 375px) {
  .client-thumb-group {
    margin-bottom: 20px;
  }
}

.client-thumb-group .thumb {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
}

.client-thumb-group .thumb:not(:first-child) {
  margin-left: -30px;
}

.client-thumb-group .thumb img {
  border-radius: 50%;
  height: 60px;
}

.th-anim {
  position: relative;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  visibility: hidden;
  overflow: hidden;
}

.th-anim img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
}

.about-content-area .th-btn {
  padding: 19.5px 46px;
}

.about-area4 {
  position: relative;
  z-index: 2;
}

.about-btn .th-btn {
  padding: 19px 40.5px;
  font-weight: 400;
}


.dance {
  -webkit-animation: dance 2s alternate infinite;
          animation: dance 2s alternate infinite;
}

@-webkit-keyframes dance {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes dance {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.dance2 {
  -webkit-animation: dance2 4s alternate infinite;
          animation: dance2 4s alternate infinite;
}

@-webkit-keyframes dance2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(15px, -15px, 0);
            transform: translate3d(15px, -15px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -15px, 15px);
            transform: translate3d(0, -15px, 15px);
  }
}

@keyframes dance2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(15px, -15px, 0);
            transform: translate3d(15px, -15px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -15px, 15px);
            transform: translate3d(0, -15px, 15px);
  }
}


/*------------------- 4.00. Simple Sections  -------------------*/
.checklist ul {
  padding-left: 0;
  list-style: none;
  text-align: left;
  margin-bottom: 0;
}

.checklist.style2 li {
  color: var(--body-color);
  font-weight: 400;
  padding-left: 27px;
}

.checklist.style2 li:before {
  display: none;
}

.checklist.style2 li:after {
  content: "\f058";
  font-family: var(--icon-font);
  position: absolute;
  left: 0;
  top: 0px;
  color: var(--theme-color);
  margin-right: 10px;
}

.checklist.style2 li:not(:last-child) {
  margin-bottom: 6px;
}

.checklist.list-two-column ul {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0 40px;
  /* Small devices */
}

@media (max-width: 767px) {
  .checklist.list-two-column ul {
    grid-template-columns: auto;
  }
  .checklist.list-two-column ul li {
    text-align: initial;
  }
}

.checklist.list-two-column.why-checklist ul {
  gap: 30px;
}

.checklist.list-two-column.why-checklist ul li {
  margin: 0;
}

.checklist li {
  position: relative;
  color: var(--title-color);
  font-weight: 500;
  padding-left: 17px;
}

.checklist li:before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--title-color);
  display: inline-block;
  position: absolute;
  left: 0;
  top: 9px;
  border-radius: 50%;
  margin-right: 10px;
}

.checklist li:not(:last-child) {
  margin-bottom: 10px;
}

.checklist.mb-45 {
  /* Large devices */
}

@media (max-width: 1199px) {
  .checklist.mb-45 {
    margin-bottom: 40px;
  }
}

.check-list ul {
  padding-left: 0;
  list-style: none;
  text-align: left;
  margin-bottom: 0;
}

.check-list li {
  margin-bottom: 16px;
}

.check-list li:last-child {
  margin-bottom: 0;
}

.check-list li > i {
  color: var(--theme-color);
  margin-right: 5px;
}

.mega-hover {
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.mega-hover:after, .mega-hover:before {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 1;
  z-index: -1;
}

.mega-hover:before {
  top: 0;
  right: 51%;
  bottom: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.mega-hover:after {
  top: 50%;
  right: 0;
  bottom: 50%;
  left: 0;
  background: rgba(255, 255, 255, 0.3);
}

.mega-hover:hover:before {
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 900ms linear;
  transition: all 900ms linear;
}

.mega-hover:hover:after {
  top: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: all 900ms linear;
  transition: all 900ms linear;
}

.bg-img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

.bg-img img {
  width: 100%;
  height: 100%;
}

.th-video {
  position: relative;
  border-radius: 10px;
}

.th-video img {
  border-radius: inherit;
}

.th-video .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.rounded-10 {
  border-radius: 10px;
}

.rounded-20 {
  border-radius: 20px;
  /* Small devices */
}

@media (max-width: 767px) {
  .rounded-20 {
    border-radius: 10px;
  }
}

.btn-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px 30px;
}

.filter-menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 15px;
  text-align: center;
  margin-top: -20px;
  margin-bottom: 60px;
  /* Large devices */
  /* Medium devices */
}

@media (max-width: 1199px) {
  .filter-menu {
    margin-bottom: 50px;
  }
}

@media (max-width: 991px) {
  .filter-menu {
    margin-top: -10px;
    margin-bottom: 45px;
    gap: 6px;
  }
}

.filter-menu .th-btn {
  border-radius: 5px;
  padding: 15px 30px;
  background-color: transparent;
  color: var(--body-color);
  border: 1px solid var(--th-border-color);
  min-width: auto;
  /* Medium devices */
}

.filter-menu .th-btn:before {
  background-color: var(--theme-color);
}

.filter-menu .th-btn:hover, .filter-menu .th-btn.active {
  border-color: var(--theme-color);
  color: var(--white-color);
}

.filter-menu .th-btn:hover:before, .filter-menu .th-btn.active:before {
  border-radius: 3px;
}

@media (max-width: 991px) {
  .filter-menu .th-btn {
    padding: 13px 20px;
  }
}

/* Large devices */
@media (max-width: 1199px) {
  p.mb-40 {
    margin-bottom: 35px;
  }
  p.mb-45 {
    margin-bottom: 38px;
  }
}

.global-image {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
}

.global-image:before {
  content: '';
  z-index: 1;
  position: absolute;
  background: var(--theme-color);
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 40px;
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform: scaleX(0) translateX(0);
      -ms-transform: scaleX(0) translateX(0);
          transform: scaleX(0) translateX(0);
  -webkit-animation: 1s overlay ease-in-out forwards;
          animation: 1s overlay ease-in-out forwards;
}

.global-image img {
  width: 100%;
  height: 100%;
  border-radius: 40px;
  -webkit-animation: 1s 0.5s loaded cubic-bezier(0.49, 0, 0.5, 1) forwards;
          animation: 1s 0.5s loaded cubic-bezier(0.49, 0, 0.5, 1) forwards;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
  opacity: 0;
  display: block;
}

@-webkit-keyframes loaded {
  from {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes loaded {
  from {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes overlay {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  55% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes overlay {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  55% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.call-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}

.call-btn .btn-title {
  font-size: 16px;
  color: var(--white-color);
  font-weight: 500;
}

.mouse-pointer {
  position: fixed;
  top: 50%;
  left: -100px;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 9999;
  -webkit-transition-duration: .9s;
          transition-duration: .9s;
  -webkit-transition-timing-function: cubic-bezier(0.19, 0.94, 0.336, 1);
          transition-timing-function: cubic-bezier(0.19, 0.94, 0.336, 1);
  border-radius: 50%;
  background: var(--theme-color);
  overflow: hidden;
}

.mouse-pointer:before {
  content: "";
  inset: 3px;
  position: absolute;
  background: var(--white-color);
  border-radius: inherit;
  border: 1px solid var(--theme-color);
}

.mouse-pointer .icon {
  color: #fff;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-100%, -50%);
      -ms-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
  opacity: 0;
  -webkit-transition: 0.4s cubic-bezier(0.225, 1, 0.316, 0.99);
  transition: 0.4s cubic-bezier(0.225, 1, 0.316, 0.99);
}

.mouse-pointer .icon i {
  margin: 0px 3px;
}

/* custom-mouse-pointer */
.mouse-pointer.large {
  display: none;
}

.mouse-pointer.small {
  width: 25px;
  height: 25px;
}

.mouse-pointer.right {
  width: 50px;
  height: 50px;
}

.mouse-pointer.right.large .icon {
  opacity: 0;
}

.mouse-pointer.right.large {
  background: transparent !important;
}

.mouse-pointer.zoom,
.mouse-pointer.open {
  width: 80px;
  height: 80px;
}

.mouse-pointer .icon i {
  margin: 0px 3px;
}

.mouse-pointer.right .icon {
  opacity: 1;
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}

.touch .mouse-pointer {
  display: none;
}

.mouse-pointer.transparent {
  display: none;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}

/* custom-mouse-pointer-end */
.cursor {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  border: 1px solid var(--theme-color);
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  z-index: 999999;
  -webkit-transform: translate(calc(-50% + 15px), -50%);
      -ms-transform: translate(calc(-50% + 15px), -50%);
          transform: translate(calc(-50% + 15px), -50%);
}

.cursor.hover {
  display: none;
}

.cursor2 {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: var(--theme-color);
  opacity: .3;
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999999;
  -webkit-transition: width .3s, height .3s, opacity .3s;
  transition: width .3s, height .3s, opacity .3s;
}

.cursor2.hover {
  display: none;
}


.th-experience {
  position: absolute;
  bottom: 80px;
  left: 0px;
  z-index: 2;
  padding: 30px 30px 30px 40px;
  background: #0d83fd;
  border-radius: 25px 25px 25px 25px;
  width: 340px;
  color: #fffafa;
  /* Medium Large devices */
  /* Extra small devices */
}

@media (max-width: 1299px) {
  .th-experience {
    left: -30px;
  }
}

@media (max-width: 375px) {
  .th-experience {
    bottom: 0;
    padding: 20px;
  }
}

.th-experience_content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}

.th-experience .experience-year {
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -1.08px;
  color: var(--white-color);
  margin-bottom: 0px;
}

.th-experience .experience-text {
  font-family: var(--title-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: var(--white-color);
  margin-bottom: 0;
}

.th-experience.style2 {
  position: relative;
  width: 120px;
  bottom: 0;
  background-color: var(--white-color);
  border-radius: 15px;
  padding: 25px 18px;
  border: 1px solid #F2F2F2;
  box-shadow: 0px 13px 25px 0px rgba(0, 0, 0, 0.05);
  /* Medium Large devices */
}

@media (max-width: 1299px) {
  .th-experience.style2 {
    left: 0;
  }
}

.th-experience.style2 .th-experience_content {
  display: block;
  text-align: center;
}

.th-experience.style2 .experience-year {
  font-size: 36px;
  color: var(--theme-color);
  margin-bottom: 0px;
}

.th-experience.style2 .experience-text {
  font-size: 16px;
  font-weight: 400;
  color: var(--title-color);
  margin-bottom: 0;
}
/* Animation of letters loading from the preloader */
@-webkit-keyframes characters {
  0%,
  75%,
  100% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
  }
  25%,
  50% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@keyframes characters {
  0%,
  75%,
  100% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
  }
  25%,
  50% {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}

.experience-year {
    font-size: 36px;
    color: var(--theme-color);
    margin-bottom: 0px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Added: For the experience section glow to work */
@keyframes glow {
    0% {
        transform: scale(1);
        background-color: rgba(64, 102, 242, 0.2);  /*Light blue*/
    }
    100% {
        transform: scale(1.1);
        background-color: var(--white-color);      /* original color */
    }
}

/* Hide Tawk.to branding */
a[id^="survjmbr0nis"] {
  display: none !important;
}