/**
* Template Name: Gp
* Template URL: https://bootstrapmade.com/gp-free-multipurpose-html-bootstrap-template/
* Updated: Jun 02 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
@font-face {
  font-family: 'AvenirLTStd-Black';
  src: url(../fonts/AvenirLTStd-Black.eot);
  src: url(../fonts/AvenirLTStd-Black.eot?#iefix) format('embedded-opentype'),
       url(../fonts/AvenirLTStd-Black.otf) format('otf'),
       url(../fonts/AvenirLTStd-Black.svg#AvenirLTStd-Black) format('svg'),
       url(../fonts/AvenirLTStd-Black.ttf) format('truetype'),
       url(../fonts/AvenirLTStd-Black.woff) format('woff'),
       url(../fonts/AvenirLTStd-Black.woff2) format('woff2');
}
@font-face {
  font-family: 'AvenirLTStd-Book';
  src: url(../fonts/AvenirLTStd-Book.eot);
  src: url(../fonts/AvenirLTStd-Book.eot?#iefix) format('embedded-opentype'),
       url(../fonts/AvenirLTStd-Book.otf) format('otf'),
       url(../fonts/AvenirLTStd-Book.svg#AvenirLTStd-Book) format('svg'),
       url(../fonts/AvenirLTStd-Book.ttf) format('truetype'),
       url(../fonts/AvenirLTStd-Book.woff) format('woff'),
       url(../fonts/AvenirLTStd-Book.woff2) format('woff2');
}
@font-face {
  font-family: 'AvenirLTStd-Roman';
  src: url(../fonts/AvenirLTStd-Roman.eot);
  src: url(../fonts/AvenirLTStd-Roman.eot?#iefix) format('embedded-opentype'),
       url(../fonts/AvenirLTStd-Roman.otf) format('otf'),
       url(../fonts/AvenirLTStd-Roman.svg#AvenirLTStd-Roman) format('svg'),
       url(../fonts/AvenirLTStd-Roman.ttf) format('truetype'),
       url(../fonts/AvenirLTStd-Roman.woff) format('woff'),
       url(../fonts/AvenirLTStd-Roman.woff2) format('woff2');
}

:root {
  --default-font: 'AvenirLTStd-Book', 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: 'AvenirLTStd-Black';
  --nav-font: 'AvenirLTStd-Book';
}

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

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

  /* 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: #1e1eeb;

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

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

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

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

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

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

/* Template Custom Colors */
:root {
  --footer-background-color: #000000;
}

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

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

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

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);
}
hr.custom-divider {
  border-color: var(--accent-color) !important;
  border-width: medium;
  opacity: 1;
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(0, 0, 0, 0.8);
  --heading-color: #ffffff;
  --contrast-color: #000000;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0;
  transition: all 0.5s;
  z-index: 997;
}

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

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

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

.header .logo span {
  color: var(--accent-color);
  font-size: 32px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  font-size: 14px;
  padding: 8px 30px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
  border: 2px solid var(--accent-color);
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--default-color);
  background: var(--accent-color);
}

@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(0, 0, 0, 0);
} */
.index-page .header {
  background-color: #ffffff;
}

/* Index Page Header on Scroll
------------------------------*/
/* .index-page.scrolled .header {
  --background-color: rgba(0, 0, 0, 0.8);
} */
.index-page.scrolled .header {
  background-color: #fff;
  padding: 0px;
}

/*--------------------------------------------------------------
# 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 5px;
    font-size: 15px;
    font-family: var(--nav-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: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

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

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: 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: 0;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

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

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

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

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

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

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

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

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: color-mix(in srgb, var(--accent-color), white 90%);
  }

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

  .navmenu .active i,
  .navmenu .active:focus i {
    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;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: var(--footer-background-color);
  --default-color: #000000;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 1rem;
  position: relative;
}

.footer .footer-top {
  padding: 50px 0;
  background-color: var(--footer-background-color);
  color: #fff;
}

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

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

.footer .footer-about p {
  font-size: 1rem;
  font-family: var(--heading-font);
}

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

.footer .social-links a:hover {
  color: #fff;
  background-color: #ff0100;
}

.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: 4px;
  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 {
  color: #fff;
  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-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: color-mix(in srgb, var(--footer-background-color) 90%, white 15%);
  transition: 0.3s;
}

.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(--footer-background-color) 90%, white 15%);
  color: var(--default-color);
}

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

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: #ff0100;
  color: #fff;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

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

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

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

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

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

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

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

.footer .copyright {
  padding: 20px 0;
  background-color: #fff;
}

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

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

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: #000;
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

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

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

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: #fff;
  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;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
}

.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
--------------------------------------------------------------*/
.main section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  scroll-margin-top: 80px;
  overflow: clip;
}

@media (max-width: 1199px) {

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

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 10px;
  position: relative;
}

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: var(--accent-color);
  margin: 4px 10px;
}

.section-title p {
  color: var(--heading-color);
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

/* Hero Section Base */
/* Hero Section Base */
.hero-section {
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
    min-width: 100vw;
}

.hero-container {
    display: flex;
    position: relative;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
}

/* Left Section */
.hero-left {
    background: #FFFFFF;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    width: 100%;
}

/* Title Styling */
.hero-title {
    font-size: clamp(2.5rem, 3.5vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 3rem;
    line-height: 1.1;
    color: #1A202C;
    animation: fadeInUp 0.8s ease-out;
}

.title-line {
    display: block;
    color: #1A202C;
}

.title-highlight {
    display: block;
    background: linear-gradient(135deg, #E53E3E, #3182CE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Links */
.hero-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 2rem;
    background: #FFFFFF;
    border: 2px solid #F7FAFC;
    border-radius: 12px;
    text-decoration: none;
    color: #1A202C;
    font-size: 1.125rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: slideInLeft 0.6s ease-out forwards;
}

.hero-link-secondary {
    border-radius: 10px;
    border: 1px solid gray; 
}

.link-delay-1 {
    animation-delay: 0.2s;
}

.link-delay-2 {
    animation-delay: 0.4s;
}

.link-delay-3 {
    animation-delay: 0.6s;
}

/* Link Icons */
.link-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F7FAFC;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.link-icon svg {
    width: 20px;
    height: 20px;
    stroke: #4A5568;
    transition: all 0.3s ease;
}

.link-text {
    flex: 1;
}

.link-text-primary {
    color: white;
}

.link-arrow {
    font-size: 1.5rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

/* Link Hover Effects */
.hero-link:hover {
    transform: translateX(10px);
    border-color: #3182CE;
    box-shadow: 0 10px 30px rgba(49, 130, 206, 0.15);
}

.hero-link:hover .link-icon {
    background: linear-gradient(135deg, #3182CE, #E53E3E);
}

.hero-link:hover .link-icon svg {
    stroke: #FFFFFF;
}

.hero-link:hover .link-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Primary CTA Link */
.link-primary {
    background-image: linear-gradient(to right, #ef4444, #3b82f6); 
    border: none !important; 
    color: white !important;
}

.link-primary .link-icon {
    background: rgba(255, 255, 255, 0.2);
}

.link-primary .link-icon svg {
    stroke: #FFFFFF;
}

.link-primary .link-arrow {
    color: #FFFFFF;
}

.link-primary:hover {
    transform: translateX(10px) scale(1.02);
    box-shadow: 0 15px 40px rgba(229, 62, 62, 0.3);
}

.hero-link-primary:hover {
    color: white;
}

/* DTI Pattern Background */
.dti-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.03;
    pointer-events: none;
    background-image: 
        linear-gradient(12deg, #E53E3E 1px, transparent 1px),
        linear-gradient(45deg, #3182CE 1px, transparent 1px),
        linear-gradient(-23deg, #805AD5 1px, transparent 1px),
        linear-gradient(67deg, #E53E3E 1px, transparent 1px),
        linear-gradient(-78deg, #3182CE 1px, transparent 1px),
        linear-gradient(34deg, #38A169 1px, transparent 1px);
    background-size: 100px 100px, 150px 150px, 200px 200px, 
                     120px 120px, 180px 180px, 140px 140px;
    animation: dtiFlow 20s linear infinite;
}

/* Right Section - Video */
.hero-right {
    min-height: 100%;
}

.video-container {
    width: 100%;
    height: 100%;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.front-banner-video {
    width: 100%;
    height: 100%;
    clip-path: inset(0px 0px 40px 0px);            
    object-fit: cover;
    display: block;
    transform: scale(1.15); 
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes dtiFlow {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 100px 100px, -150px 150px, 200px -200px,
                           -120px 120px, 180px -180px, -140px 140px;
    }
}

/* Desktop and Extra Large Screens */
@media (min-width: 1400px) {
    .hero-section {
        min-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 800px;
        padding: 0;
        margin-bottom: 15px;
    }
    
    .hero-container {
        display: block;
        position: relative;
        max-width: 1320px;
        width: 100%;
        height: 90vh;
        max-height: 800px;
        margin: 0 auto;
    }
    
    .hero-left {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 50%;
        padding-right: 4rem;
        z-index: 10;
    }
    
    .hero-right {
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        height: 90vh;
        max-height: 800px;
    }
    
    .video-container {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 90vh;
        max-height: 800px;
    }
    
    .front-banner-video {
        width: 100%;
        height: 90vh;
        max-height: 800px;
        object-fit: cover;
        clip-path: none;
        transform: none;
    }
}

/* Desktop Standard Screens */
@media (min-width: 1025px) and (max-width: 1399px) {
    .hero-section {
        padding: 0;
        max-height: 800px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    
    .hero-container {
        display: block;
        position: relative;
        max-width: 1140px;
        width: 100%;
        height: 90vh;
        max-height: 800px;
        margin: 0 auto;
    }
    
    .hero-left {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 50%;
        padding-right: 3rem;
        z-index: 10;
    }
    
    .hero-right {
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        height: 90vh;
        max-height: 800px;
    }
    
    .video-container {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 90vh;
        max-height: 800px;
    }
    
    .front-banner-video {
        width: 100%;
        height: 90vh;
        max-height: 800px;
        object-fit: cover;
        clip-path: none;
        transform: none;
    }
}

/* Tablet Landscape */
@media (max-width: 1024px) {
    .hero-container {
        margin: 0 12px;
    }
}

/* Tablet Portrait */
@media (max-width: 820px) {
    .hero-container {
        min-height: 90vh;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 80px;
    }
    
    .hero-left {
        min-width: 100%;
        padding: 0 50px;
    }
    
    .hero-right {
        min-width: 100%;
        padding: 0 50px;
    }
}

/* Small Tablet */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column-reverse;
        justify-content: space-between;
        align-items: center;
        gap: 70px;
        margin-bottom: 0;
    }
    
    .hero-left {
        padding: 0;
        margin: 0;
        order: 2;
        min-height: auto;
        display: flex;
        justify-content: center;
    }
    
    .hero-right {
        order: 1;
        min-height: 45vh;
        height: 45vh;
        width: 100%;
        padding: 0 20px;
    }
    
    .hero-title {
        font-size: clamp(2.5rem, 10vw, 3.5rem);
        margin-bottom: 2rem;
    }
    
    .hero-link {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
    
    .link-icon {
        width: 35px;
        height: 35px;
    }
    
    .hero-link:hover {
        transform: translateX(5px);
    }
}

/* Mobile */
@media (max-width: 640px) {
    .hero-section {
        margin: 0;
        padding: 0;
    }
    
    .hero-container {
        min-height: auto;
        gap: 50px;
    }
    
    .hero-left {
        padding: 30px 20px 25px 20px;
    }
    
    .hero-right {
        min-height: 40vh;
        height: 40vh;
        margin-bottom: 15px;
    }
    
    .video-container {
        min-height: 40vh;
    }
    
    .hero-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
        margin-bottom: 1.5rem;
    }
    
    .hero-links {
        gap: 1rem;
    }
    
    .hero-link {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .link-icon {
        width: 32px;
        height: 32px;
    }
    
    .link-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .main section, .section {
        padding: 5px;
    }
    
    .hero-section {
        margin-bottom: 0;
    }
    
    .hero-left {
        padding: 0 15px 0 15px;
        margin: 0;
    }
    
    .hero-container {
        flex-direction: column-reverse;
        justify-content: space-between;
    }
    
    .hero-right {
        display: block;
        padding: 0;
        margin: 0;
    }
    
    .hero-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        gap: 0.75rem;
    }
    
    .link-icon {
        width: 30px;
        height: 30px;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-link,
    .dti-pattern {
        animation: none;
    }
    
    .hero-link {
        opacity: 1;
    }
}
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

.about .content .fst-italic {
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

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

.about .content ul li {
  padding: 10px 0 0 0;
  display: flex;
}

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

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

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
  filter: grayscale(100);
}

.clients .swiper-slide img:hover {
  filter: none;
  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);
}

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

.features .features-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.features .features-image .video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
video.about-page-video {
  position: relative !important;
  height: 550px !important;
  width: auto !important;
  margin: 0 auto;
}
.inner-page-custom-banner .container {
  background-color: gray;
  padding-top: 20px !important;
  padding: 0px;
}
.inner-page-custom-banner .container p {
  color: #fff !important;
}
.inner-page-custom-banner .container h1 {
  color: #fff;
}
.features .features-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 5px 0;
}

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

.features .features-item p {
  font-size: 1.25rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 80px 20px;
  height: 100%;
  transition: all ease-in-out 0.3s;
}

.services .service-item .icon {
  background: var(--accent-color);
  color: var(--contrast-color);
  margin: 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
}

.services .service-item .icon i {
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: 0.3s;
}

.services .service-item p {
  line-height: normal;
  font-size: 1.25rem;
  margin-bottom: 0;
}

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

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  --background-color: #000000;
  --default-color: #ffffff;
  --contrast-color: #ffffff;
  padding: 80px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.call-to-action:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--accent-color);
  color: var(--background-color);
  border: 2px solid var(--accent-color);
}

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

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-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 0 10px 0;
  }
}

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

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 10%);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

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

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}
/*--------------------------------------------------------------
# Waitlist page
--------------------------------------------------------------*/

:root {
  --primary-blue: #5B4FDB;
  --primary-purple: #8B5CF6;
  --primary-pink: #EC4899;
  --text-dark: #1F2937;
  --text-medium: #4B5563;
  --text-light: #9CA3AF;
  --border-color: #E5E7EB;
  --background: #FFFFFF;
  --section-bg: #f3f3f1;
}

/* Section styling */
.wait-section {
  min-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 87vh;
  margin-bottom: 40px;
}

/* Container with clean white background */
.wait-container {
  max-width: 600px;
  width: 100%;
  min-width: 300px;
  border: 1px solid #ccc; /* light gray border */
  border-radius: 20px;
  margin: 0;
  padding: 48px 40px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* subtle shadow */
}

/* Typography */
.wait-container h1 {
  color: var(--text-dark);
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 32px;
  text-align: center;
  letter-spacing: -0.02em;
}

/* Optional subtitle */
.wait-container p {
  color: var(--text-medium);
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 40px;
}

/* Form styling */
.wait-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Label styling */
.form-group label {
  color: var(--text-dark);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Input field styling - clean and minimal */
.form-group input {
  padding: 14px 16px;
  font-size: 16px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--background);
  transition: all 0.2s ease;
  color: var(--text-dark);
  width: 100%;
}

.form-group input:hover {
  border-color: #D1D5DB;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.form-group input::placeholder {
  color: var(--text-light);
  font-size: 15px;
}

/* Button styling with gradient */
.wait-form button {
  width: 100%;
  padding: 14px 32px;
  background-image: linear-gradient(to right, #ef4444, #3b82f6); 
  border: none !important; 
  color: white !important;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.wait-form button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.wait-form button:active {
  transform: translateY(0);
}


.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #1A202C;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    border: 1px solid #CBD5E0;
    border-radius: 8px;
    appearance: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.form-select:focus {
    outline: none;
    border-color: #3182CE;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-select:hover {
    border-color: #3182CE;
}

.form-select option {
    padding: 0.5rem;
    background-color: #FFFFFF;
    color: #1A202C;
}

.form-select option:hover {
    background-color: #F7FAFC;
}

@media (max-width:1024px){
  .wait-section{
    min-height: 60vh;
  }
}

@media (max-width:480px){
  .wait-container{
    margin: 20px 0;
    padding: 30px;
  }
  .wait-section{
    padding: 0 20px;
    margin: 0;
    min-height: 60vh;
  }
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 10px;
}

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

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 40px;
  display: block;
  font-weight: 700;
  line-height: 40px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  --default-color: #ffffff;
  --background-color: #000000;
  --heading-color: #ffffff;
  padding: 80px 0;
  position: relative;
}

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

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

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

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

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

.testimonials .testimonial-item .testimonial-img {
  width: 100px;
  border-radius: 50%;
  border: 6px solid color-mix(in srgb, var(--default-color), transparent 85%);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

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

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

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

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.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 50%);
  opacity: 0.5;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--default-color);
  opacity: 1;
}

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
}

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

.team .team-member .social {
  position: absolute;
  left: 0;
  bottom: 30px;
  right: 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  text-align: center;
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--background-color), transparent 25%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0 3px;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  transition: ease-in-out 0.3s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

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

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

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

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

.team .team-member .member-info span {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--default-color);
}

.team .team-member:hover .social {
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

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

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

.contact .php-email-form {
  height: 100%;
}

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

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

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

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

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

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

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, white 20%);
}

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

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

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

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

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

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

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

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

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

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

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

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

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

.service-details .services-list a i {
  font-size: 16px;
  margin-right: 8px;
  color: 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
--------------------------------------------------------------*/
.custom-btn{ 
  border: 0;
  font-size: 16px;
  background: #ff0100;
  color: #fff;
  transition: 0.3s;
  border-radius: 3px;
}
.custom-btn:hover{
  background: var(--accent-color) !important;
}
.educational-outreach-btn{
  border: 0;
    font-size: 16px;
    background: var(--accent-color) !important;
    color: #fff;
    transition: 0.3s;
    border-radius: 3px;
    padding: 15px;
    margin: 8px 0px;
    width: fit-content;
}
.educational-outreach-btn:hover{
  background: #ff0100;
}
.testimonials .testimonial-item {
  background-color: #fff;
  color: #000;
  padding: 8px;
  border-radius: 15px;
}
.testimonials .testimonial-item .testimonial-video {
  height: 400px;
  position: relative;
  width: 100%;
  display: block;
  margin: 0px auto 12px auto;
}
.testimonials .testimonial-item .testimonial-video video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.testimonial-video .card video {
  height: 450px;
  object-fit: cover;
  width: 100%;
  border-radius: 4px;
}
.testimonial-video .card{
  box-shadow: 5px 5px 20px #ccc;
}
.team-page .team-member .member-info a {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 20px;
}
#resources .service-item .features-item {
  padding: 20px;
}
#resources .service-item {
  background-color: rgb(250, 250, 250);
  padding: 0px;
  color: #000;
}
#resources .service-item h4 {
  font-weight: 700;
}
.resources-link ol {
  margin-top: 35px;
}
.resources-link ol li a {
  color: #000 !important;
  font-weight: 300;
  font-size: 17px;
  display: block;
  margin-bottom: 25px;
  text-decoration: underline;
}
.product-gallery-images {
  display: inline;
  clear: both;
}
.product-gallery-images a img {
  width: 48%;
  float: left;
  height: 150px;
  margin: 5px;
  object-fit: cover;
}
.devices-main-page h4 a {
  font-size: 24px;
  font-weight: 900;
}
.team-member img{
  width: 100%;
}
.custom-progress {
  height: 40px;
  border-radius: 50px;
}
.custom-progress-bar {
  background-image: linear-gradient(90deg, #1e1eeb 1%, #ff0100);
}
.header .logo .text {
  color: var(--nav-color);
  padding: 18px 15px;
  font-size: 16px;
  font-family: var(--nav-font);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  transition: 0.3s;
}
.parkinsons-disease-img {
  position: relative !important;
}
.alzheimers-disease-img {
  position: relative !important;
}
.educational-outreach-img {
  object-fit: contain !important;
  position: relative !important;
}
.main-gallery img {
  width: 100%;
  object-fit: cover;
  height: 250px;
}
.main-gallery video {
  width: 100%;
  object-fit: cover;
  height: 250px;
}
main.main {
  margin-top: 80px;
}
.resources-main-section{
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.resources-main-section .img-box a {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0px;
  background-size: cover !important;
}
.resources-main-section .img-box a h3 {
  background-color: #000;
  color: #fff;
  padding: 5px 10px 0px 10px;
}
.resource-inner-banner {
  background-size: cover !important;
  padding: 6rem 0rem !important;
}
.resource-inner-banner .description * {
  font-size: 18px;
  text-transform: none;
  font-weight: 400;
  letter-spacing: -0.4px;
}
.resource-inner-banner h2 {
  color: #fff;
}
.resource-inner-banner p {
  color: #fff;
}
.custom-contactus-form button.btn {
  border: 0;
  font-size: 16px;
  padding: 15px 22px;
  background: #1e1eeb;
  color: #fff;
  transition: 0.3s;
  border-radius: 4px;
}
@media screen and (max-width:1024px){
  .main-gallery img {
    height: 200px;
  }
  .main-gallery video {
    height: 200px;
  }
  .resources-main-section .img-box a{
    height: 35vh;
  }
}
@media screen and (max-width:768px){
  .resources-main-section .img-box a{
    height: 30vh;
  }
  .main-gallery img {
    height: 150px;
  }
  .main-gallery video {
    height: 150px;
  }
}
@media screen and (max-width:480px){
  body {
  font-size: 0.9rem;
  }
  .hero {
  padding: 0px !important;
  }
  .features .features-item p {
  font-size: 0.9rem;
  }
  .section-title p {
  font-size: 1.4rem;
  }
  .services .service-item p {
  font-size: 0.9rem;
  line-height: inherit;
  }
  .services .service-item h3 {
  font-size: 1.1rem;
  }
  .team .team-member .member-info a {
  font-size: 0.8rem !important;
  }
  .team .team-member .member-info span {
  font-size: 0.9rem;
  }
  a {
  font-size: 0.9rem;
  }
  .footer{
  font-size: 0.9rem;
  }
  .footer .footer-about p {
  font-size: 0.9rem;
  }
  .h2, h2 {
  font-size: calc(0.9rem + .9vw);
  }
  .h3, h3 {
  font-size: calc(0.9rem + .6vw);
  }
  .h4, h4 {
  font-size: calc(0.9rem + .3vw);
  }
  .inner-page-custom-banner .container {
  padding: 15px;
  }
  .features .features-image {
  min-height: auto;
  }
  .resources-page .resourcesItem .m-1 {
      height: 170px !important;
  }
  .main-gallery .col-md-3 {
      width: 33.3%;
      padding: 5px;
      margin-top: 0;
  }
  .main-gallery img {
    height: 100px;
  }
  .main-gallery video {
    height: 100px;
  }
  .contact .info-item p {
    font-size: 0.9rem;
  }
  .resources-main-section .img-box a {
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0px;
    background-size: cover !important;
  }
}

/*--------------------------------------------------------------
# Status checking
--------------------------------------------------------------*/

.alert {
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

/*--------------------------------------------------------------
# Toast message
--------------------------------------------------------------*/
/* Toast Container */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    pointer-events: none;
}

/* Toast Alert */
.toast-alert {
    min-width: 300px;
    max-width: 400px;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 10px;
    pointer-events: all;
    animation: slideInRight 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.toast-alert.alert-success {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.toast-alert.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

/* Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: currentColor;
    opacity: 0.3;
    animation: progress 5s linear forwards;
}

/* Close Button */
.toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    line-height: 1;
    padding: 0;
}

.toast-close:hover {
    opacity: 1;
}

/* Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes progress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

.toast-alert.removing {
    animation: slideOutRight 0.3s ease-out forwards;
}