/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
    --default-font: "Sofia Pro", sans-serif;
  }
  
  /* Global Colors */
  :root {
    /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
    --background-color: #ffffff;
  
    /* Default Color - This is the default color used for the majority of the text content. */
    --default-color: #3d4348;
  
    /* Heading Color - This color is used for titles, headings and secondary elements. */
    --heading-color: #3e5055;
  
    /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
    --accent-color: #034EA2;
  
    /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
    --contrast-color: #ffffff;
  }
  
  /* Nav Menu Colors */
  :root {
    /* Nav Color - This is the default color of the main navmenu links. */
    --nav-color: #ffffff;
  
    /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
    --nav-hover-color: #456a95;
  
    /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
    --nav-dropdown-background-color: #000000;
  
    /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-color: #ffffff;
  
    /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
    --nav-dropdown-hover-color: #456a95;
  }
  
  /* Smooth scroll */
  :root {
    scroll-behavior: smooth;
  }
  
  /*--------------------------------------------------------------
  # General
  --------------------------------------------------------------*/
  .main-wrapper {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
    margin: 0;
  }
  
  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(--default-font);
  }
  
  /*--------------------------------------------------------------
  # 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: 90px;
  }
  
  .buttons {
  	width: 29.8%;
  	margin-bottom: -30px;
  }
  
  @media (max-width: 480px) {
    .header .logo img {
      max-height: 90px;
    }
  }
  
  .header .header-button {
    width: Hug (320px)px;
    height: Hug (34px)px;
    top: 1px;
    left: 959px;
    opacity: 0px;
  }

  .header .btn-signup,
  .header .btn-signup:focus {
    color: var(--nav-hover-color);
    height: Hug (34px)px;
    padding: 8px 16px 8px 16px;
    gap: 1px;
    border-radius: 4px 4px 4px 4px;
    opacity: 0px;
    font-size: 14px;
    transition: 0.3s;
  }

  .header .btn-signup:hover,
  .header .btn-signup:focus:hover {
    color: var(--accent-color);
    background: color-mix(in srgb, rgb(42, 115, 204), transparent 85%);
  }

  .header .btn-getstarted,
  .header .btn-getstarted:focus {
    color: var(--contrast-color);
    background: var(--accent-color);
    width: Fixed (112px)px;
    height: Hug (34px)px;
    padding: 8px 16px 8px 16px;
    gap: 1px;
    border-radius: 4px 4px 4px 4px;
    opacity: 0px;
    font-size: 14px;
    transition: 0.3s;
  }
  
  .header .btn-getstarted:hover,
  .header .btn-getstarted:focus:hover {
    color: var(--contrast-color);
    background: color-mix(in srgb, var(--accent-color), transparent 35%);
  }
  
  .header .btn-certify,
  .header .btn-certify:focus {
  	color: var(--nav-dropdown-background-color);
  	background: var(--contrast-color);
  	width: Fixed (112px)px;
  	height: Hug (34px)px;
  	padding: 8px 16px 8px 16px;
  	gap: 1px;
  	border-radius: 4px 4px 4px 4px;
  	opacity: 0px;
  	font-size: 14px;
  	transition: 0.3s;
  }
  
  .header .btn-certify:hover,
  .header .btn-certify:focus:hover {
	color: var(--contrast-color);
	background: color-mix(in srgb, var(--nav-dropdown-background-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 color-mix(in srgb, var(--default-color), transparent 85%);
  }
  
  /* Index Page Header
  ------------------------------*/
  .index-page .header {
    --background-color: rgba(255, 255, 255, 0);
  }
  
  /* Index Page Header on Scroll
  ------------------------------*/
  .index-page.scrolled .header {
    --background-color: #ffffff;
  }
  
  /*--------------------------------------------------------------
  # Navigation Menu
  --------------------------------------------------------------*/
  /* Desktop Navigation */
  @media (min-width: 1200px) {
  	.heading {
  		text-align: center;
  		color: var(--accent-color);
  		font-weight: 600;
  	}
  	
    .navmenu {
      padding: 0 15px;
      color: var(--contrast-color);
    }
    
    .navmenu ul {
      padding: 3px;
      display: flex;
      list-style: none;
      justify-content: center;     
    }
  
    .navmenu li {
      position: relative;
    }
    
    .navmenu a.active {
	  background-color: #007bff;
	  color: #fff;
	  border-radius: 4px;
	}
  
    .navmenu a,
    .navmenu a:focus {
      color: var(--nav-hover-color);
      padding: 10px 10px;
      font-size: 14px;
      font-family: var(--default-font);
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: space-between;
      white-space: nowrap;
      transition: 0.3s;
    }
  
    .navmenu a i,
    .navmenu a:focus i {
      font-size: 14px;
      line-height: 0;
      margin-left: 5px;
      transition: 0.3s;
    }
  
    .navmenu li:last-child a {
      padding-right: 10px;
    }
  
    .navmenu li:hover>a,
    .navmenu a.active,
    .navmenu a.active:focus {
      color: var(--nav-hover-color);
      
    }
  
  	.menu.active {
	    background-color: #034EA2;
	    color: #FFFFFF;
	    border-radius: 4px;
	    font-weight: bold;
	}
	.menu.active a,
	.menu.active a:hover,
	.menu.active a:focus {
		color: #ffffff;
	}
  
  	.dropdown a span,
  	.dropdown a span:hover,
  	.dropdown a span:focus {
  		font-size: 14px;
  	}
  	
    .navmenu .dropdown ul {
      margin: 0;
      padding: 10px 0;
      background: var(--nav-dropdown-background-color);
      display: block;
      position: absolute;
      visibility: hidden;
      left: 14px;
      top: 130%;
      opacity: 0;
      transition: 0.3s;
      border-radius: 4px;
      z-index: 99;
      box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
    }
  
    .navmenu .dropdown ul li {
      min-width: 200px;
    }
  
    .navmenu .dropdown ul a {
      padding: 10px 20px;
      font-size: 14px;
      text-transform: none;
      color: var(--nav-dropdown-color);
    }
  
    .navmenu .dropdown ul a i {
      font-size: 14px;
    }
  
    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul li:hover>a {
      color: var(--nav-dropdown-hover-color);
    }
  
    .navmenu .dropdown:hover>ul {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }
  
    .navmenu .dropdown .dropdown ul {
      top: 0;
      left: -90%;
      visibility: hidden;
    }
  
    .navmenu .dropdown .dropdown:hover>ul {
      opacity: 1;
      top: 0;
      left: -100%;
      visibility: visible;
    }
  
    .navmenu .megamenu {
      position: static;
    }
  
    .navmenu .megamenu ul {
      margin: 0;
      padding: 10px;
      background: var(--nav-dropdown-background-color);
      box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
      position: absolute;
      top: 130%;
      left: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      display: flex;
      transition: 0.3s;
      border-radius: 4px;
      z-index: 99;
    }
  
    .navmenu .megamenu ul li {
      flex: 1;
    }
  
    .navmenu .megamenu ul li a,
    .navmenu .megamenu ul li:hover>a {
      padding: 10px 20px;
      font-size: 15px;
      color: var(--nav-dropdown-color);
    }
  
    .navmenu .megamenu ul li a:hover,
    .navmenu .megamenu ul li a.active,
    .navmenu .megamenu ul li a.active:hover {
      color: var(--nav-dropdown-hover-color);
    }
  
    .navmenu .megamenu:hover>ul {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }
  }
  
  /* Mobile Navigation */
  @media (max-width: 1199px) {
    .mobile-nav-toggle {
      color: var(--nav-hover-color);
      font-size: 28px;
      line-height: 0;
      margin-right: 10px;
      cursor: pointer;
      transition: color 0.3s;
    }
  
    .navmenu {
      padding: 0;
      z-index: 9997;
    }
  
    .navmenu ul {
      display: none;
      position: absolute;
      inset: 60px 20px 20px 20px;
      padding: 10px 0;
      margin: 0;
      border-radius: 6px;
      background-color: var(--nav-dropdown-background-color);
      overflow-y: auto;
      transition: 0.3s;
      z-index: 9998;
      box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
    }
  
    .navmenu a,
    .navmenu a:focus {
      color: var(--nav-dropdown-color);
      padding: 10px 20px;
      font-family: var(--default-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%);
      transition: all 0.5s ease-in-out;
      box-shadow: none;
    }
  
    .navmenu .dropdown ul ul {
      background-color: rgba(33, 37, 41, 0.1);
    }
  
    .navmenu .dropdown>.dropdown-active {
      display: block;
      background-color: rgba(33, 37, 41, 0.03);
    }
  
    .mobile-nav-active {
      overflow: hidden;
    }
  
    .mobile-nav-active .mobile-nav-toggle {
      color: #fff;
      position: absolute;
      font-size: 32px;
      top: 15px;
      right: 15px;
      margin-right: 0;
      z-index: 9999;
    }
  
    .mobile-nav-active .navmenu {
      position: fixed;
      overflow: hidden;
      inset: 0;
      background: rgba(33, 37, 41, 0.8);
      transition: 0.3s;
    }
  
    .mobile-nav-active .navmenu>ul {
      display: block;
    }
  }
  
  /*--------------------------------------------------------------
  # Global Footer
  --------------------------------------------------------------*/
  .footer {
    --background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
    color: var(--default-color);
    background-color: var(--background-color);
    font-size: 14px;
    padding-bottom: 50px;
    position: relative;
  }
  
  .footer .footer-top {
    padding-top: 50px;
  }
  
  .footer .footer-about .logo {
    line-height: 1;
    margin-bottom: 25px;
  }
  
  .footer .footer-about .logo img {
    max-height: 40px;
    margin-right: 6px;
  }
  
  .footer .footer-about .logo span {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: var(--default-font);
    color: var(--heading-color);
  }
  
  .footer .footer-about p {
    font-size: 14px;
    font-family: var(--default-font);
  }
  
  .footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
    font-size: 16px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin-right: 10px;
    transition: 0.3s;
  }
  
  .footer .social-links a:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
  }

  .contact {
    background-color: #101828;
    border-radius: 3px 3px 3px 3px;
    color: var(--contrast-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 {
    padding-right: 2px;
    font-size: 12px;
    line-height: 0;
  }
  
  .footer .footer-links ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
  }
  
  .footer .footer-links ul li:first-child {
    padding-top: 0;
  }
  
  .footer .footer-links ul a {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    display: inline-block;
    line-height: 1;
  }
  
  .footer .footer-links ul a:hover {
    color: var(--accent-color);
  }
  
  .footer .footer-contact p {
    margin-bottom: 5px;
  }
  
  .footer .footer-followus,
  .footer .footer-followus a,
  .footer .footer-contact a {
  	color: color-mix(in srgb, var(--default-color), transparent 30%);
  }
  
  .footer .footer-followus a:hover,
  .footer .footer-contact a:hover {
  	color: var(--accent-color);
  }
  
  .footer .footer-followus i {
  	font-size: 20px;
  }
  
  .footer .copyright {
    padding-top: 25px;
    padding-bottom: 25px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }
  
  .footer .copyright p {
    margin-bottom: 0;
  }
  
  .footer .credits {
    margin-top: 6px;
    font-size: 13px;
  }
  
  /*--------------------------------------------------------------
  # Preloader
  --------------------------------------------------------------*/
  #preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background-color: var(--background-color);
    transition: all 0.6s ease-out;
    width: 100%;
    height: 100vh;
  }
  
  #preloader:before,
  #preloader:after {
    content: "";
    position: absolute;
    border: 4px solid var(--accent-color);
    border-radius: 50%;
    animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  
  #preloader:after {
    animation-delay: -0.5s;
  }
  
  @keyframes animate-preloader {
    0% {
      width: 10px;
      height: 10px;
      top: calc(50% - 5px);
      left: calc(50% - 5px);
      opacity: 1;
    }
  
    100% {
      width: 72px;
      height: 72px;
      top: calc(50% - 36px);
      left: calc(50% - 36px);
      opacity: 0;
    }
  }
  
  /*--------------------------------------------------------------
  # Scroll Top Button
  --------------------------------------------------------------*/
  .scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
  }
  
  .scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
  }
  
  .scroll-top:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
  }
  
  .scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
  }
  
  /*--------------------------------------------------------------
  # Disable aos animation delay on mobile devices
  --------------------------------------------------------------*/
  @media screen and (max-width: 768px) {
    [data-aos-delay] {
      transition-delay: 0 !important;
    }
  }
  
  /*--------------------------------------------------------------
  # Global Page Titles & Breadcrumbs
  --------------------------------------------------------------*/
  .page-title {
    --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 25px 0;
    position: relative;
  }
  
  .page-title h1 {
    font-size: 24px;
    font-weight: 700;
  }
  
  .page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
  }
  
  .page-title .breadcrumbs ol li+li {
    padding-left: 10px;
  }
  
  .page-title .breadcrumbs ol li+li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 70%);
  }
  
  /*--------------------------------------------------------------
  # Global Sections
  --------------------------------------------------------------*/
  section,
  .section {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 60px 0;
    scroll-margin-top: 100px;
    overflow: clip;
  }
  
  @media (max-width: 1199px) {
  
    section,
    .section {
      scroll-margin-top: 66px;
    }
  }
  
  /*--------------------------------------------------------------
  # Global Section Titles
  --------------------------------------------------------------*/
  .section-title {
    text-align: center;
    padding-bottom: 60px;
    position: relative;
  }
  
  .section-title h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
  }
  
  .section-title h2:after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    background: var(--accent-color);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  
  .section-title p {
    margin-bottom: 0;
  }
  
  /*--------------------------------------------------------------
  # Hero Section
  --------------------------------------------------------------*/
  .hero {
    width: 100%;
    max-height: 70vh;
    position: relative;
    padding: 5px 0 5px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  	background: var(--nav-dropdown-background-color);
  	border: none;
  }
  
  .bx-wrapper {
  	margin-top: 130px;
  }
  
  .hero .hero-bg {
    inset: 0;
    opacity: 0.6;
    display: block;
    width: 100vw;
    height: 70vh;
    object-fit: cover;
    z-index: 1;
  }
  
  .hero .hero-bg::before {
    content: "";
    background: color-mix(in srgb, rgb(255 255 255 / 0%), transparent 15%);
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  
  .hero .container {
    position: relative;
    z-index: 3;
  }
  
  .hero p {
    color: var(--contrast-color);
    margin: 480px auto;
    font-size: 20px;
    font-weight: 600;
  }
  
  @media (min-width: 768px) {
    .hero .hero-bg {
      max-width: 100vw;
      border-radius: 5px;
    }
  }
  
  @media (max-width: 640px) {  
    .hero p {
      font-size: 18px;
      line-height: 24px;
      margin-bottom: 30px;
    }
  }

  .slogan-title {
    text-align: center;
    width: 50%;
    color: var(--contrast-color);
    font-size: 16px;
    font-weight: 200;
  }

  table {
    border-collapse: collapse;
    border: 2px solid rgb(140 140 140);
    font-family: var(--default-font);
    font-size: 0.8rem;
    letter-spacing: 1px;
  }

  thead {
    background-color: rgb(228 240 245);
  }

  th,
  td {
    border: 1px solid rgb(160 160 160);
    padding: 8px 10px;
  }

  .btn-visit,
  .btn-visit:hover,
  .btn-visit:focus,
  .btn-visit:focus:hover {
    width: Fixed (235px)px;
    height: Hug (56px)px;
    top: 488px;
    left: 115px;
    padding: 8px 16px 8px 16px;
    gap: 4px;
    border-radius: 4px 0px 0px 0px;
    border: 2px 0px 0px 0px;
    opacity: 0px;
    color: var(--contrast-color);
    border: 2px solid #FFFFFF;
  }
  
  /*--------------------------------------------------------------
  # Featured Services Section
  --------------------------------------------------------------*/
  .featured-services {
    --background-color: color-mix(in srgb, var(--accent-color), transparent 94%);
    padding: 40px 0;
  }
  
  .featured-services .service-item {
    position: relative;
    padding-top: 20px;
  }
  
  .featured-services .service-item .icon {
    background-color: color-mix(in srgb, var(--accent-color), transparent 80%);
    width: 72px;
    height: 72px;
    position: relative;
    margin-right: 15px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease-in-out 0.3s;
  }
  
  .featured-services .service-item .icon i {
    color: var(--accent-color);
    font-size: 32px;
    z-index: 2;
    position: relative;
  }
  
  .featured-services .service-item .title {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 18px;
  }
  
  .featured-services .service-item .title a {
    color: var(--heading-color);
  }
  
  .featured-services .service-item .title a:hover {
    color: var(--accent-color);
  }
  
  .featured-services .service-item .description {
    font-size: 14px;
  }
  
  .featured-services .service-item:hover .icon {
    background-color: var(--accent-color);
  }
  
  .featured-services .service-item:hover .icon i {
    color: var(--contrast-color);
  }

  .video-tuto {
    width: 350px;
    height: 200px;
  }
  
  /*--------------------------------------------------------------
  # About Section
  --------------------------------------------------------------*/
  .about {
    padding-bottom: 20px;
  }
  
  .about .content .who-we-are {
    text-transform: uppercase;
    margin-bottom: 15px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
  }
  
  .about .content h3 {
    font-size: 2rem;
    font-weight: 700;
  }
  
  .about .content ul {
    list-style: none;
    padding: 0;
  }
  
  .about .content ul li {
    padding-bottom: 10px;
  }
  
  .about .content ul i {
    font-size: 1.25rem;
    margin-right: 4px;
    color: var(--accent-color);
  }
  
  .about .content p:last-child {
    margin-bottom: 0;
  }
  
  .about .content .read-more {
    background: var(--accent-color);
    color: var(--contrast-color);
    font-family: var(--default-font);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 12px 24px;
    border-radius: 5px;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .about .content .read-more i {
    font-size: 18px;
    margin-left: 5px;
    line-height: 0;
    transition: 0.3s;
  }
  
  .about .content .read-more:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
    padding-right: 19px;
  }
  
  .about .content .read-more:hover i {
    margin-left: 10px;
  }
  
  .about .about-images img {
    border-radius: 10px;
  }
  
  /*--------------------------------------------------------------
  # Features Section
  --------------------------------------------------------------*/
  .features .nav-tabs {
    border: 0;
  }
  
  .features .nav-item {
    width: 100%;
    margin-bottom: 15px;
  }
  
  .features .nav-item:last-child {
    margin-bottom: 0;
  }
  
  .features .nav-link {
    color: var(--heading-color);
    border: 0;
    padding: 30px;
    transition: 0.3s;
    border-radius: 10px;
    display: flex;
    cursor: pointer;
  }
  
  .features .nav-link i {
    background-color: var(--contrast-color);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    width: 48px;
    height: 48px;
    font-size: 22px;
    flex-shrink: 0;
    border-radius: 50px;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--default-color), transparent 85%);
  }
  
  .features .nav-link h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px 0;
    transition: 0.3s;
  }
  
  .features .nav-link p {
    font-size: 15px;
    margin: 0;
  }
  
  .features .nav-link:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 96%);
  }
  
  .features .nav-link.active {
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
  }
  
  .features .tab-pane img {
    border-radius: 15px;
  }
  
  /*--------------------------------------------------------------
  # Features Details Section
  --------------------------------------------------------------*/
  .features-details .features-item+.features-item {
    margin-top: 60px;
  }
  
  .features-details .features-item .content {
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    padding: 30px;
    border-radius: 10px;
  }
  
  .features-details .features-item h3 {
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 15px;
  }
  
  .features-details .features-item .more-btn {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    padding: 6px 30px;
    border-radius: 6px;
  }
  
  .features-details .features-item .more-btn:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  }
  
  .features-details .features-item ul {
    list-style: none;
    padding: 0;
  }
  
  .features-details .features-item ul li {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }
  
  .features-details .features-item ul li:last-child {
    padding-bottom: 0;
  }
  
  .features-details .features-item ul i {
    font-size: 20px;
    margin-right: 10px;
    color: var(--accent-color);
  }
  
  .features-details .features-item img {
    border-radius: 15px;
  }

  /*--------------------------------------------------------------
  # Faq Section
  --------------------------------------------------------------*/
  .faq .section-title {
    padding-bottom: 20px;
  }
  
  .faq .faq-container .faq-item {
    position: relative;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-radius: 5px;
    overflow: hidden;
  }
  
  .faq .faq-container .faq-item:last-child {
    margin-bottom: 0;
  }
  
  .faq .faq-container .faq-item h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin: 0 30px 0 0;
    transition: 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  
  .faq .faq-container .faq-item h3 .num {
    color: 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-content table {
    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 {
    background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
    border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
  }
  
  .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);
  }

  /*--------------------------------------------------------------
  # Contact Section
  --------------------------------------------------------------*/
  .contact .info-item {
    padding: 20px 0 30px 0;
    box-shadow: 0 0 4px color-mix(in srgb, var(--default-color), transparent 85%);
  }
  
  .contact .info-item i {
    color: var(--accent-color);
    width: 56px;
    height: 56px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    border-radius: 50%;
    box-shadow: 0 2px 3px color-mix(in srgb, var(--default-color), transparent 85%);
  }
  
  .contact .info-item h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0;
  }
  
  .contact .info-item p {
    padding: 0;
    margin-bottom: 0;
    font-size: 14px;
  }
  
  .contact .php-email-form {
    height: 100%;
    padding: 30px;
    box-shadow: 0 0 4px color-mix(in srgb, var(--default-color), transparent 85%);
    margin: 2%;
  }
  
  @media (max-width: 575px) {
    .contact .php-email-form {
      padding: 20px;
    }
  }
  
  .contact .php-email-form .error-message {
    display: none;
    background: #df1529;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
  }
  
  .contact .php-email-form .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
  }
  
  .contact .php-email-form .loading {
    display: none;
    background: var(--background-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
  }
  
  .contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--background-color);
    animation: animate-loading 1s linear infinite;
  }
  
  .contact .php-email-form input[type=text],
  .contact .php-email-form input[type=email],
  .contact .php-email-form textarea {
    font-size: 17px;
    height: 60px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 9px;
    color: var(--contrast-color);
    background-color: color-mix(in srgb, #101828, transparent 50%);
    border-color: color-mix(in srgb, var(--contrast-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(--contrast-color), transparent 70%);
  }
  
  .contact .php-email-form a {    
    border: 0;
    font-size: 18px;
    padding: 10px 20px;
    background: var(--accent-color);
    color: var(--contrast-color);
    transition: 0.3s;
    border-radius: 50px;
  }
  
  .contact .php-email-form a:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
  }
  
  @keyframes animate-loading {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  /*--------------------------------------------------------------
  # Service Details Section
  --------------------------------------------------------------*/  
  .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);
  }