/**
* Template Name: Invent
* Template URL: https://bootstrapmade.com/invent-bootstrap-business-template/
* Updated: May 12 2025 with Bootstrap v5.3.6
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Poppins", sans-serif;
  --nav-font: "Raleway", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #32353a; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #5d57f4; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #3a3939; /* The default color of the main navmenu links */
  --nav-hover-color: #5d57f4; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #3a3939; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #5d57f4; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

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

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

/* Default hover color for links in the navbar */
#header .navmenu a:hover {
  color:var(--nav-hover-color); /* Or your site's primary link color */
  transition: color 0.3s ease;
}

/* Special hover color when the hero section is active */
#header.hero-active .navmenu a:hover {
  color: #ffffff; /* White to stand out on the hero background */
}

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

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

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  overflow-x: hidden; /* Add this line */
}

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(255, 255, 255, 0);
  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: 100px;
  margin-right: 8px;
}

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

.header .logo span {
  color: var(--accent-color);
  font-size: 24px;
  font-weight: 600;
  padding-left: 3px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 26px;
  margin: 0;
  border-radius: 4px;
  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 15%);
}

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

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

  .header .navmenu {
    order: 3;
  }
}

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

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(255, 255, 255, 0.9);
}

/*--------------------------------------------------------------
# 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 15px;
    font-size: 20px;
    font-family: var(--nav-font);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

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

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

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

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

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

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

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

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

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

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

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

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

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

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

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

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

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

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

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

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

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

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

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu > ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  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 {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-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 20%);
  margin-right: 10px;
  transition: 0.3s;
}

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

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

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

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

.footer .footer-links ul i {
  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 .copyright {
  padding: 25px 0;
  border-top: 1px solid
    color-mix(in srgb, var(--default-color), transparent 90%);
}

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

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

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  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: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

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

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

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

.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 96%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 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
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 98px;
  overflow: clip;
}

@media (max-width: 1199px) {
  section,
  .section {
    scroll-margin-top: 64px;
  }
}

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

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

.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  /* background: color-mix(in srgb, var(--default-color), transparent 100%); */
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  /* background: var(--accent-color); */
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}
/* ERROR23 */
.hero {
            min-height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            padding: 80px 0;
            overflow: hidden;
            
            /* Enhanced animated gradient background */
            background: linear-gradient(-45deg, 
                #ee7752, 
                #e73c7e, 
                #23a6d5, 
                #23d5ab,
                #667eea,
                #764ba2,
                #f093fb,
                #4facfe
            );
             /* background: linear-gradient(-45deg, 
             #F6EEC9,
             #d81e2c,
             #d5b24a,
             #0a461c

            ); */
            background-size: 600% 600%;
            animation: gradientShift 20s ease infinite;
        }

        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }
            25% {
                background-position: 100% 25%;
            }
            50% {
                background-position: 100% 100%;
            }
            75% {
                background-position: 25% 100%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        /* Floating geometric elements */
        .floating-element {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            animation: float 6s ease-in-out infinite;
        }

        .floating-element-1 {
            width: 120px;
            height: 120px;
            top: 15%;
            left: 10%;
            animation-delay: 0s;
            animation-duration: 8s;
        }

        .floating-element-2 {
            width: 80px;
            height: 80px;
            top: 60%;
            right: 15%;
            animation-delay: -2s;
            animation-duration: 10s;
            border-radius: 25%;
        }

        .floating-element-3 {
            width: 100px;
            height: 100px;
            bottom: 20%;
            left: 15%;
            animation-delay: -4s;
            animation-duration: 12s;
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px) rotate(0deg) scale(1);
                opacity: 0.7;
            }
            25% {
                transform: translateY(-20px) rotate(90deg) scale(1.1);
                opacity: 0.9;
            }
            50% {
                transform: translateY(-15px) rotate(180deg) scale(0.9);
                opacity: 0.6;
            }
            75% {
                transform: translateY(-25px) rotate(270deg) scale(1.05);
                opacity: 0.8;
            }
        }

        /* Enhanced content overlay */
        .hero::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
                ellipse at center,
                rgba(255, 255, 255, 0.15) 0%,
                rgba(255, 255, 255, 0.05) 40%,
                transparent 70%
            );
            animation: overlayPulse 8s ease-in-out infinite;
            z-index: 1;
        }

        @keyframes overlayPulse {
            0%, 100% {
                opacity: 0.7;
                transform: scale(1);
            }
            50% {
                opacity: 0.3;
                transform: scale(1.1);
            }
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        /* Morphing badge design */
        .badge-wrapper {
            margin-top: 28px;
            animation: slideInLeft 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
            perspective: 1000px;
        }

        .badge-wrapper > div {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50px;
            padding: 12px 24px;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            transform-style: preserve-3d;
        }

        .badge-wrapper > div::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.4),
                transparent
            );
            animation: shimmerWave 3s infinite;
        }

        @keyframes shimmerWave {
            0% {
                left: -100%;
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                left: 100%;
                opacity: 0;
            }
        }

        .badge-wrapper > div:hover {
            transform: translateY(-8px) rotateX(10deg) scale(1.05);
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
            background: rgba(255, 255, 255, 0.35);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .icon-circle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            position: relative;
            animation: iconOrbit 4s ease-in-out infinite;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        @keyframes iconOrbit {
            0%, 100% {
                transform: scale(1) rotate(0deg);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            }
            25% {
                transform: scale(1.1) rotate(90deg);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            }
            50% {
                transform: scale(0.95) rotate(180deg);
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
            }
            75% {
                transform: scale(1.05) rotate(270deg);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
            }
        }

        .badge-text {
            font-size: 1.3rem;
            color: rgba(255, 255, 255, 0.95);
            font-weight: 600;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            letter-spacing: 0.5px;
        }

      .hero-title {
            font-size: clamp(2.5rem, 6vw, 4.5rem); /* Responsive font size, slightly adjusted */
            font-weight: 700;
            line-height: 1.4;
            
            /* 1. Create the gradient background */
            /* We use red, then green, then red again to create a seamless loop */
            background: white;
            
            /* 2. Set the background size to be larger than the element */
            /* This is what allows us to move the gradient */
            background-size: 200% auto;

            /* 3. Clip the background to the text */
            /* This makes the gradient only appear where the text is */
            -webkit-background-clip: text;
            background-clip: text;

            /* 4. Make the text color transparent */
            /* This reveals the gradient background underneath */
            color: transparent;
            -webkit-text-fill-color: transparent; /* For Safari compatibility */

            /* 5. Apply the animation */
            animation: colorWave 4s linear infinite;

            /* Optional: Add a subtle shadow to lift the text */
            /* text-shadow: 0 4px 25px rgba(0, 0, 0, 0.4); */
        }

        /* The keyframes that define the animation */
        @keyframes colorWave {
            /* The animation starts with the gradient at the beginning */
            0% {
                background-position: 0% 50%;
            }
            /* The animation ends with the gradient at the end, creating the movement */
            100% {
                background-position: 200% 50%;
            }
        }

        /* Style for the acronym to make it slightly smaller for better visual hierarchy */
        .acronym {
            font-size: 1em; /* 50% of the parent's font size */
            font-weight: 600; /* Slightly less bold */
            letter-spacing: 0.05em; /* A bit of letter spacing */
        }

        @keyframes titleMorph {
            0% {
                opacity: 0;
                transform: translateY(60px) rotateX(90deg);
                filter: blur(10px);
            }
            50% {
                opacity: 0.7;
                transform: translateY(20px) rotateX(45deg);
                filter: blur(2px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) rotateX(0deg);
                filter: blur(0px);
            }
        }

        @keyframes underlineExpand {
            0% {
                width: 0;
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                width: 100%;
                opacity: 0.8;
            }
        }

        .hero-description {
            font-size: 1.5rem;
            margin-top: 5rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.85);
            margin-bottom: 2rem;
            animation: textWave 1.5s ease-out 0.9s both;
            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
            font-weight: 400;
            letter-spacing: 0.3px;
        }

        @keyframes textWave {
            0% {
                opacity: 0;
                transform: translateY(40px) scale(0.9);
                filter: blur(5px);
            }
            60% {
                opacity: 0.8;
                transform: translateY(-5px) scale(1.02);
                filter: blur(1px);
            }
            100% {
                opacity: 0.9;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

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

        /* Responsive enhancements */
        @media (max-width: 768px) {
            .hero {
                padding: 60px 0;
            }
            
            .floating-element-1 {
                width: 80px;
                height: 80px;
            }
            
            .floating-element-2 {
                width: 60px;
                height: 60px;
            }
            
            .floating-element-3 {
                width: 70px;
                height: 70px;
            }
            
            .hero-title {
                font-size: clamp(2rem, 8vw, 3rem);
            }
            
            .hero-description {
                font-size: 1.1rem;
            }
        }

        /* Additional particle effects */
        .hero::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
                radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
            background-size: 50px 50px, 100px 100px;
            animation: particleFloat 15s linear infinite;
            z-index: 1;
            opacity: 0.6;
        }

        @keyframes particleFloat {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(-50px, -50px);
            }
        }
/* ERROR23 */
/* Enhanced Feature Boxes */
.feature-boxes {
  margin-top: 4rem;
  animation: staggeredReveal 1.5s ease-out 1.5s both;
}

@keyframes staggeredReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-box {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.7)
  );
  backdrop-filter: blur(25px);
  border: 1px solid rgba(93, 87, 244, 0.15);
  border-radius: 20px;
  padding: 2.5rem;
  height: 100%;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.feature-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(93, 87, 244, 0.08),
    rgba(118, 75, 162, 0.06)
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}

.feature-box::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(93, 87, 244, 0.1) 0%,
    transparent 70%
  );
  transform: scale(0);
  transition: transform 0.6s ease;
}

.feature-box:hover::before {
  opacity: 1;
}

.feature-box:hover::after {
  transform: scale(1);
}

.feature-box:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 30px 60px rgba(93, 87, 244, 0.2),
    0 15px 35px rgba(118, 75, 162, 0.1);
  border-color: rgba(93, 87, 244, 0.3);
}

.feature-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5d57f4, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(93, 87, 244, 0.3);
}

.feature-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.1)
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
}

.feature-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: iconGlow 3s ease-in-out infinite;
}

@keyframes iconGlow {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.6;
  }
}

.feature-box:hover .feature-icon::before {
  width: 120%;
  height: 120%;
}

.feature-box:hover .feature-icon {
  transform: rotateY(360deg) scale(1.15);
  box-shadow: 0 15px 40px rgba(93, 87, 244, 0.4);
}

.feature-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  position: relative;
}

.feature-title::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #5d57f4, #764ba2);
  transition: width 0.3s ease;
}

.feature-box:hover .feature-title {
  color: #5d57f4;
}

.feature-box:hover .feature-title::after {
  width: 100%;
}

.feature-text {
  color: #6c757d;
  line-height: 1.7;
  opacity: 0.9;
  font-size: 1rem;
}

/* Enhanced Floating Elements */
.floating-element {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.floating-element-1 {
  top: 8%;
  right: 12%;
  width: 120px;
  height: 120px;
  background: linear-gradient(
    45deg,
    rgba(93, 87, 244, 0.12),
    rgba(118, 75, 162, 0.1)
  );
  border-radius: 50%;
  animation: orbit1 8s ease-in-out infinite;
  box-shadow: 0 10px 30px rgba(93, 87, 244, 0.1);
}

.floating-element-2 {
  bottom: 15%;
  left: 8%;
  width: 100px;
  height: 100px;
  background: linear-gradient(
    45deg,
    rgba(118, 75, 162, 0.12),
    rgba(93, 87, 244, 0.1)
  );
  border-radius: 30%;
  animation: orbit2 10s ease-in-out infinite;
  box-shadow: 0 8px 25px rgba(118, 75, 162, 0.1);
}

.floating-element-3 {
  top: 55%;
  right: 8%;
  width: 80px;
  height: 80px;
  background: linear-gradient(
    45deg,
    rgba(93, 87, 244, 0.1),
    rgba(118, 75, 162, 0.08)
  );
  border-radius: 40%;
  animation: orbit3 12s ease-in-out infinite;
  box-shadow: 0 6px 20px rgba(93, 87, 244, 0.08);
}

.floating-element-4 {
  top: 25%;
  left: 18%;
  width: 60px;
  height: 60px;
  background: radial-gradient(
    circle,
    rgba(93, 87, 244, 0.15),
    rgba(93, 87, 244, 0.05) 70%
  );
  border-radius: 50%;
  animation: orbit4 14s ease-in-out infinite;
}

.floating-element-5 {
  bottom: 35%;
  right: 25%;
  width: 50px;
  height: 50px;
  background: radial-gradient(
    circle,
    rgba(118, 75, 162, 0.12),
    rgba(118, 75, 162, 0.04) 70%
  );
  border-radius: 50%;
  animation: orbit5 16s ease-in-out infinite;
}

.floating-element-6 {
  top: 40%;
  left: 5%;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    135deg,
    rgba(93, 87, 244, 0.08),
    rgba(118, 75, 162, 0.06)
  );
  border-radius: 25%;
  animation: orbit6 18s ease-in-out infinite;
}

@keyframes orbit1 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-25px) rotate(90deg) scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-15px) rotate(180deg) scale(0.9);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-30px) rotate(270deg) scale(1.05);
    opacity: 0.7;
  }
}

@keyframes orbit2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.5;
  }
  33% {
    transform: translate(-20px, -10px) rotate(120deg) scale(1.15);
    opacity: 0.8;
  }
  66% {
    transform: translate(-10px, 15px) rotate(240deg) scale(0.85);
    opacity: 0.3;
  }
}

@keyframes orbit3 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-15px, -20px) rotate(180deg) scale(1.2);
    opacity: 0.7;
  }
}

@keyframes orbit4 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(15px, -12px) scale(1.3);
    opacity: 0.6;
  }
}

@keyframes orbit5 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.25;
  }
  50% {
    transform: translate(-8px, 12px) scale(1.15);
    opacity: 0.5;
  }
}

@keyframes orbit6 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translate(10px, -8px) rotate(180deg) scale(1.1);
    opacity: 0.4;
  }
}

/* Advanced Animations */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-80px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(80px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero {
    padding: 60px 0;
  }

  .feature-box {
    margin-bottom: 2rem;
    padding: 2rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-image img {
    width: 70%;
  }

  .floating-element {
    display: none;
  }

  .feature-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}

/* Add these elements to your HTML */
.hero-image .ripple-layer-1,
.hero-image .ripple-layer-2 {
  content: "";
  position: absolute;
}

/* ERROR2 */
/* Enhanced Training Section */
.training.section {
  padding: 80px 0;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-color-rgb), 0.05) 0%,
    rgba(255, 255, 255, 0.95) 30%,
    rgba(var(--contrast-color-rgb), 0.05) 70%,
    rgba(255, 255, 255, 0.9) 100%
  );
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.training.section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 30% 70%,
    rgba(var(--accent-color-rgb), 0.08) 0%,
    transparent 50%
  );
  animation: rotateBackground 30s linear infinite;
  z-index: 1;
}

/* Section Title */
.section-title {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.section-title h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--heading-color);
  margin-bottom: 20px;
  position: relative;
  animation: titleSlideIn 1s ease-out;
}

.section-title h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--accent-color),
    var(--contrast-color)
  );
  border-radius: 2px;
  animation: underlineExpand 1s ease-out 0.5s both;
}

.section-title p {
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: var(--default-color);
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
  /* animation: titleSlideIn 1s ease-out 0.3s both; */
}

/* Training Content */
.training-content {
  position: relative;
  z-index: 2;
}

.training-icon-container {
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
}

.training-icon {
  width: clamp(100px, 15vw, 140px);
  height: clamp(100px, 15vw, 140px);
  background: linear-gradient(
    135deg,
    var(--accent-color) 0%,
    var(--contrast-color) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: clamp(2rem, 5vw, 3.5rem);
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(var(--accent-color-rgb), 0.3);
  animation: iconSlideIn 1s ease-out 0.5s both;
}

.training-icon::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: shimmer 4s ease-in-out infinite;
}

.training-content h3 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  margin: 30px 0 20px 0;
  color: var(--heading-color);
  animation: textSlideIn 1s ease-out 0.7s both;
}

.training-content .description {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.7;
  color: var(--default-color);
  margin-bottom: 40px;
  position: relative;
  padding-left: 20px;
  animation: textSlideIn 1s ease-out 0.9s both;
}

.training-content .description::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--accent-color),
    var(--contrast-color)
  );
  border-radius: 2px;
  animation: heightGrow 1s ease-out 1.1s both;
}

/* Training Features */
.training-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  padding: 25px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--accent-color-rgb), 0.1);
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  animation: featureSlideIn 0.8s ease-out both;
}

.feature-item:nth-child(1) {
  animation-delay: 1.3s;
}
.feature-item:nth-child(2) {
  animation-delay: 1.5s;
}
.feature-item:nth-child(3) {
  animation-delay: 1.7s;
}

.feature-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--accent-color-rgb), 0.1),
    transparent
  );
  transition: left 0.6s ease;
}

.feature-item:hover {
  transform: translateX(10px);
  box-shadow: 0 15px 30px rgba(var(--accent-color-rgb), 0.2);
  border-color: rgba(var(--accent-color-rgb), 0.3);
}

.feature-item:hover::before {
  left: 100%;
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-color-rgb), 0.1) 0%,
    rgba(var(--contrast-color-rgb), 0.1) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 1.5rem;
  color: var(--accent-color);
  transition: all 0.4s ease;
  flex-shrink: 0;
}

.feature-item:hover .feature-icon {
  background: linear-gradient(
    135deg,
    var(--accent-color),
    var(--contrast-color)
  );
  color: white;
  transform: scale(1.1);
}

.feature-content {
  flex: 1;
}

.feature-title {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.feature-description {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--default-color);
  line-height: 1.6;
  margin: 0;
}

.feature-item:hover .feature-title {
  color: var(--accent-color);
}

/* Training Visual */
.training-visual {
  position: relative;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 2;
}

.training-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(var(--accent-color-rgb), 0.1);
  border-radius: 20px;
  padding: 25px;
  width: 100%;
  max-width: 400px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  animation: cardSlideIn 0.8s ease-out both;
}

.training-card:nth-child(1) {
  animation-delay: 0.3s;
}
.training-card:nth-child(2) {
  animation-delay: 0.5s;
}
.training-card:nth-child(3) {
  animation-delay: 0.7s;
}
.training-card:nth-child(4) {
  animation-delay: 0.9s;
}

.training-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(var(--accent-color-rgb), 0.1),
    transparent
  );
  transition: left 0.6s ease;
}

.training-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(var(--accent-color-rgb), 0.2);
  border-color: rgba(var(--accent-color-rgb), 0.3);
}

.training-card:hover::before {
  left: 100%;
}

.card-content {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.card-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-color-rgb), 0.15) 0%,
    rgba(var(--contrast-color-rgb), 0.15) 100%
  );
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--accent-color);
  transition: all 0.4s ease;
  flex-shrink: 0;
}

.training-card:hover .card-icon {
  background: linear-gradient(
    135deg,
    var(--accent-color),
    var(--contrast-color)
  );
  color: white;
  transform: scale(1.1) rotate(5deg);
}

.card-info h4 {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 700;
  color: var(--heading-color);
  margin: 0 0 10px 0;
  transition: color 0.3s ease;
}

.card-info p {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--default-color);
  margin: 0;
  line-height: 1.6;
}

.training-card:hover .card-info h4 {
  color: var(--accent-color);
}

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

@keyframes iconSlideIn {
  from {
    transform: scale(0.5) rotate(-180deg);
    opacity: 0;
  }
  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

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

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

@keyframes cardSlideIn {
  from {
    transform: translateY(30px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes underlineExpand {
  from {
    width: 0;
  }
  to {
    width: 80px;
  }
}

@keyframes heightGrow {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

@keyframes shimmer {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

@keyframes rotateBackground {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Design */
@media (max-width: 1199px) {
  .training.section {
    padding: 60px 0;
  }

  .training-visual {
    margin-top: 40px;
  }
}

@media (max-width: 991px) {
  .training.section {
    padding: 50px 0;
  }

  .training-visual {
    margin-top: 50px;
    min-height: auto;
  }

  .training-card {
    max-width: 100%;
  }

  .card-content {
    gap: 15px;
  }

  .card-icon {
    width: 70px;
    height: 70px;
    font-size: 1.8rem;
  }
}

@media (max-width: 767px) {
  .training.section {
    padding: 40px 0;
  }

  .section-title {
    margin-bottom: 40px;
  }

  .training-content .description {
    padding-left: 15px;
  }

  .feature-item {
    padding: 20px;
    flex-direction: column;
    text-align: center;
  }

  .feature-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .training-card {
    padding: 20px;
  }

  .card-content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .card-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}

@media (max-width: 575px) {
  .training-icon {
    width: 80px !important;
    height: 80px !important;
    font-size: 2rem !important;
  }

  .training-content .description {
    padding-left: 10px;
  }

  .feature-item {
    padding: 15px;
  }

  .training-card {
    padding: 15px;
  }

  .card-icon {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }
}

/* Enhanced Mobile Experience */
@media (max-width: 480px) {
  .training.section {
    padding: 30px 0;
  }

  .section-title {
    margin-bottom: 30px;
  }

  .training-features {
    gap: 15px;
  }

  .training-visual {
    gap: 15px;
  }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .training-icon,
  .feature-icon,
  .card-icon {
    border: 2px solid var(--accent-color);
  }

  .training-card,
  .feature-item {
    border: 2px solid var(--accent-color);
  }
}
/* RADHE */
/* Global Contributions Section */
/* GLOBAL CONTRIBUTIONS SECTION RESPONSIVENESS */
@media (max-width: 991px) {
  .global-visual {
    height: 350px; /* Reduce height for tablets and mobiles */
    margin-bottom: 40px;
  }

  .global-content {
    text-align: center; /* Center align text for better readability */
  }

  .global-content h3::after {
    left: 50%;
    transform: translateX(-50%); /* Center the underline */
  }

  @keyframes underlineGrow {
    0% {
      width: 60px;
    }
    100% {
      width: 100px; /* Adjust animation for centered text */
    }
  }
}
.global-contributions.section {
  padding: 80px 0;
}
.global-contributions {
  padding: 80px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.global-contributions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(255, 255, 255);
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(10px) translateY(10px);
  }
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.section-title h2 {
  font-size: 3rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 20px;
}

@keyframes titleGlow {
  0% {
    text-shadow: 2px 2px 4px rgba(93, 87, 244, 0.3),
      0 0 20px rgba(93, 87, 244, 0.2);
  }
  100% {
    text-shadow: 2px 2px 4px rgba(93, 87, 244, 0.3),
      0 0 30px rgba(93, 87, 244, 0.4);
  }
}

.section-title p {
  font-size: 1.2rem;
  color: #000;
  font-weight: 300;
}

.global-visual {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-container {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-node {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #5d57f4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px rgba(93, 87, 244, 0.3);
  z-index: 10;
  animation: centerPulse 2s ease-in-out infinite;
}

@keyframes centerPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 20px 40px rgba(93, 87, 244, 0.3),
      0 0 0 0 rgba(93, 87, 244, 0.7);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 25px 50px rgba(93, 87, 244, 0.4),
      0 0 0 20px rgba(93, 87, 244, 0);
  }
}

.center-node i {
  font-size: 2.5rem;
  color: #ffffff;
  animation: iconSpin 8s linear infinite;
}

@keyframes iconSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.orbit-item {
  position: absolute;
  width: 120px;
  height: 60px;
  background: #ffffff;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(93, 87, 244, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(93, 87, 244, 0.1);
}

.orbit-item:hover {
  transform: scale(1.1);
  box-shadow: 0 15px 40px rgba(93, 87, 244, 0.3);
  background: #ffffff;
  border-color: #5d57f4;
}

.orbit-item span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #5d57f4;
  text-align: center;
}

.orbit-1 {
  top: 50px;
  left: 50%;
  transform: translateX(-75%);
  animation: orbit1 10s linear infinite;
}

.orbit-2 {
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
  animation: orbit2 10s linear infinite;
}

.orbit-3 {
  bottom: 50px;
  left: 100%;
  transform: translateX(-50%);
  animation: orbit3 10s linear infinite;
}

.orbit-4 {
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  animation: orbit4 10s linear infinite;
}

@keyframes orbit1 {
  0% {
    transform: translateX(-50%) rotate(0deg) translateY(-150px) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg) translateY(-150px)
      rotate(-360deg);
  }
}

@keyframes orbit2 {
  0% {
    transform: translateY(-50%) rotate(0deg) translateX(150px) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

@keyframes orbit3 {
  0% {
    transform: translateX(-50%) rotate(0deg) translateY(150px) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg) translateY(150px) rotate(-360deg);
  }
}

@keyframes orbit4 {
  0% {
    transform: translateY(-50%) rotate(0deg) translateX(-150px) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg) translateX(-150px)
      rotate(-360deg);
  }
}

.orbit-trail {
  position: absolute;
  border: 2px dashed rgba(93, 87, 244, 0.3);
  border-radius: 50%;
  animation: trailRotate 20s linear infinite;
}

.orbit-trail-1 {
  width: 300px;
  height: 300px;
  top: 50px;
  left: 50px;
}

.orbit-trail-2 {
  width: 350px;
  height: 350px;
  top: 25px;
  left: 25px;
  animation-duration: 25s;
  animation-direction: reverse;
}

@keyframes trailRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.global-content {
  color: #212529;
  padding: 40px;
  background: #ffffff;
  border-radius: 20px;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(93, 87, 244, 0.2);
  box-shadow: 0 20px 40px rgba(93, 87, 244, 0.1);
  position: relative;
  z-index: 2;
}

.global-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #5d57f4 0%, #32353a 100%);
  opacity: 0.05;
  border-radius: 20px;
}

.global-icon {
  display: inline-block;
  padding: 20px;
  background: linear-gradient(135deg, #5d57f4 0%, #32353a 100%);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(93, 87, 244, 0.2);
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.global-icon i {
  font-size: 2.5rem;
  color: #ffffff;
}

.global-content h3 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #32353a;
  position: relative;
}

.global-content h3::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, #5d57f4 0%, #32353a 100%);
  border-radius: 2px;
  animation: underlineGrow 2s ease-in-out infinite alternate;
}

@keyframes underlineGrow {
  0% {
    width: 60px;
  }
  100% {
    width: 120px;
  }
}

.description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #212529;
  margin-bottom: 30px;
}

.contribution-stats {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.stat-item {
  flex: 1;
  min-width: 150px;
  text-align: center;
  padding: 25px;
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid rgba(93, 87, 244, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.stat-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(93, 87, 244, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.stat-item:hover::before {
  left: 100%;
}

.stat-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(93, 87, 244, 0.2);
  background: #ffffff;
  border-color: #5d57f4;
}

.stat-item h4 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #32353a;
  animation: statPulse 2s ease-in-out infinite;
}

@keyframes statPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.stat-item p {
  font-size: 1rem;
  color: #212529;
  margin: 0;
}

.floating-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(93, 87, 244, 0.6);
  border-radius: 50%;
  animation: particleFloat 15s linear infinite;
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

.connection-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(93, 87, 244, 0.5),
    transparent
  );
  z-index: 1;
  animation: connectionPulse 3s ease-in-out infinite;
}

@keyframes connectionPulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .global-contributions {
    padding: 40px 0;
  }

  .section-title h2 {
    font-size: 2rem;
  }

  .global-visual {
    height: 300px; /* Further reduce height for mobile */
  }

  .orbit-container {
    width: 280px;  /* Reduce container size */
    height: 280px;
  }

  .center-node {
    width: 70px;   /* Scale down the center node */
    height: 70px;
  }

  .center-node i {
    font-size: 2rem;
  }

  .orbit-item {
    width: 90px;   /* Scale down the orbit items */
    height: 45px;
    border-radius: 25px;
  }

  .orbit-item span {
    font-size: 0.8rem;
  }

  /* Responsive Animation Keyframes */
  @keyframes orbit1 {
    0% {
      transform: translateX(-50%) rotate(0deg) translateY(-110px) rotate(0deg);
    }
    100% {
      transform: translateX(-50%) rotate(360deg) translateY(-110px) rotate(-360deg);
    }
  }

  @keyframes orbit2 {
    0% {
      transform: translateY(-50%) rotate(0deg) translateX(110px) rotate(0deg);
    }
    100% {
      transform: translateY(-50%) rotate(360deg) translateX(110px) rotate(-360deg);
    }
  }

  @keyframes orbit3 {
    0% {
      transform: translateX(-50%) rotate(0deg) translateY(110px) rotate(0deg);
    }
    100% {
      transform: translateX(-50%) rotate(360deg) translateY(110px) rotate(-360deg);
    }
  }

  @keyframes orbit4 {
    0% {
      transform: translateY(-50%) rotate(0deg) translateX(-110px) rotate(0deg);
    }
    100% {
      transform: translateY(-50%) rotate(360deg) translateX(-110px) rotate(-360deg);
    }
  }

  .orbit-trail-1 {
    width: 220px; /* Adjust trails to fit new container size */
    height: 220px;
    top: 30px;
    left: 30px;
  }

  .orbit-trail-2 {
    width: 260px;
    height: 260px;
    top: 10px;
    left: 10px;
  }

  .global-content {
    padding: 20px;
  }

  .contribution-stats {
    flex-direction: column; /* Stack stats vertically */
    gap: 15px;
  }
}

.global-visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbit-container {
  position: relative;
  width: 300px;
  height: 300px;
}

.center-node {
  position: absolute;
  top: 54%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: linear-gradient(
    135deg,
    var(--accent-color),
    var(--contrast-color)
  );
  border-radius: 21%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  animation: rotate 10s linear infinite;
}

.orbit-item {
  position: absolute;
  width: 100px;
  height: 100px;
  background: white;
  border: 2px solid var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--accent-color);
  /* animation: counterRotate 10s linear infinite; */
}

.orbit-1 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.orbit-2 {
  top: 100%;
  right: 45px;
  transform: translateY(-50%);
}

.orbit-3 {
  bottom: 0;
  left: 100%;
  transform: translateX(-50%);
}

.orbit-4 {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.contribution-stats {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: rgba(var(--accent-color-rgb), 0.1);
  border-radius: 10px;
  flex: 1;
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
}

.stat-item h4 {
  color: var(--accent-color);
  margin-bottom: 5px;
}
/* RADHE */
/* Collaborations Section */

/* Collaborations Section */
.collaborations.section {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  overflow: hidden;
}

.collaborations.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, #e9ecef 1px, transparent 1px),
    linear-gradient(to bottom, #e9ecef 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.5;
  animation: backgroundMove 20s linear infinite;
}

@keyframes backgroundMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 10px 10px;
  }
}

@keyframes backgroundMove {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(-10px) translateY(-10px);
  }
}

.section-title h2 {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  background-clip: text;
  font-weight: 700;
  position: relative;
}

.section-title h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gradient-accent);
  border-radius: 2px;
  /* animation: underlineGrow 2s ease-out; */
}

@keyframes underlineGrow {
  0% {
    width: 0;
  }
  100% {
    width: 60px;
  }
}

/* Collaboration Content */
.collaboration-content .collaboration-icon {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  animation: iconBounce 2s infinite;
  position: relative;
  box-shadow: var(--shadow-medium);
  transition: all 0.3s ease;
}

.collaboration-icon:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-heavy);
}

.icon-ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--accent-color);
  border-radius: 50%;
  animation: rippleEffect 2s infinite;
  opacity: 0;
}

.icon-ripple.delayed {
  animation-delay: 1s;
}

@keyframes iconBounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes rippleEffect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Benefit Items */
.collaboration-benefits {
  position: relative;
}

.benefit-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: var(--shadow-light);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  cursor: pointer;
}

.benefit-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  transition: left 0.6s ease;
}

.benefit-item:hover::before {
  left: 100%;
}

.benefit-item:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-heavy);
  border-color: var(--accent-color);
}

.benefit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-accent);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 15px;
  z-index: 1;
}

.benefit-item:hover .benefit-overlay {
  opacity: 0.1;
}

.benefit-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  color: white;
  font-size: 1.5rem;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.benefit-icon:hover {
  transform: rotate(360deg);
}

.icon-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 123, 255, 0.3) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: glowPulse 2s infinite;
}

@keyframes glowPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.benefit-content {
  z-index: 2;
  position: relative;
}

.benefit-content h5 {
  margin-bottom: 5px;
  color: #333;
  font-weight: 600;
  transition: color 0.3s ease;
}

.benefit-item:hover .benefit-content h5 {
  color: var(--accent-color);
}

/* Collaboration Visual */
.collaboration-visual {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.network-container {
  position: relative;
  width: 400px;
  height: 400px;
}

.network-node {
  position: absolute;
  width: 70px;
  height: 70px;
  background: white;
  border: 3px solid var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--accent-color);
  animation: nodeFloat 4s ease-in-out infinite;
  box-shadow: var(--shadow-medium);
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 3;
}

.network-node:hover {
  transform: scale(1.2);
  box-shadow: 0 0 30px rgba(0, 123, 255, 0.6);
}

.main-node {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gradient-primary);
  color: white;
  animation: mainNodePulse 3s infinite;
  width: 90px;
  height: 90px;
  font-size: 2.2rem;
}

.pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid var(--accent-color);
  border-radius: 50%;
  animation: pulseRing 2s infinite;
  opacity: 0;
}

.pulse-ring.delayed {
  animation-delay: 1s;
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.startup-node:nth-child(2) {
  top: 15%;
  right: 15%;
  animation-delay: 0.5s;
}

.startup-node:nth-child(3) {
  bottom: 15%;
  right: 15%;
  animation-delay: 1s;
}

.startup-node:nth-child(4) {
  bottom: 15%;
  left: 15%;
  animation-delay: 1.5s;
}

.node-trail {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 123, 255, 0.3) 0%,
    transparent 70%
  );
  animation: trailEffect 3s infinite;
}

@keyframes trailEffect {
  0%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
}

@keyframes nodeFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-10px) rotate(120deg);
  }
  66% {
    transform: translateY(5px) rotate(240deg);
  }
}

@keyframes mainNodePulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Connection Lines */
.connecting-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.connection-line {
  position: absolute;
  background: var(--gradient-accent);
  height: 2px;
  opacity: 0.6;
  animation: lineGlow 3s infinite;
}

.line-1 {
  top: 30%;
  left: 60%;
  width: 120px;
  transform: rotate(45deg);
  animation-delay: 0.5s;
}

.line-2 {
  bottom: 30%;
  right: 60%;
  width: 120px;
  transform: rotate(-45deg);
  animation-delay: 1s;
}

.line-3 {
  bottom: 30%;
  left: 60%;
  width: 120px;
  transform: rotate(45deg);
  animation-delay: 1.5s;
}

@keyframes lineGlow {
  0%,
  100% {
    opacity: 0.3;
    box-shadow: none;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 10px var(--accent-color);
  }
}

/* Data Packets */
.data-packet {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--accent-color);
  border-radius: 50%;
  animation-play-state: paused;
  opacity: 0;
  box-shadow: 0 0 10px var(--accent-color);
}

.packet-1 {
  animation: packetMove1 3s infinite;
}

.packet-2 {
  animation: packetMove2 3s infinite;
  animation-delay: 1s;
}

.packet-3 {
  animation: packetMove3 3s infinite;
  animation-delay: 2s;
}

@keyframes packetMove1 {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    top: 20%;
    left: 80%;
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    top: 20%;
    left: 80%;
    opacity: 0;
  }
}

@keyframes packetMove2 {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    top: 80%;
    left: 80%;
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    top: 80%;
    left: 80%;
    opacity: 0;
  }
}

@keyframes packetMove3 {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    top: 80%;
    left: 20%;
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    top: 80%;
    left: 20%;
    opacity: 0;
  }
}

/* Floating Particles */
.floating-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent-color);
  border-radius: 50%;
  animation: floatParticle 10s infinite;
  opacity: 0.7;
}

.particle:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}

.particle:nth-child(2) {
  left: 25%;
  animation-delay: 2s;
}

.particle:nth-child(3) {
  left: 50%;
  animation-delay: 4s;
}

.particle:nth-child(4) {
  left: 75%;
  animation-delay: 6s;
}

.particle:nth-child(5) {
  left: 90%;
  animation-delay: 8s;
}

@keyframes floatParticle {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .collaboration-visual {
    height: 300px;
  }

  .network-container {
    width: 250px;
    height: 250px;
  }

  .network-node {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  .main-node {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .benefit-item {
    flex-direction: column;
    text-align: center;
  }

  .benefit-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
}
/* 545 */
/* International Outreach Section */
.international-outreach.section {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.section-title h2 {
  color: var(--heading-color);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.section-title p {
  font-size: 1.1rem;
  color: var(--text-color);
  margin-bottom: 0;
}

.light-background {
  background: #f8f9fa;
}

/* Outreach Visual - Updated to remove map */
.outreach-visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-color-rgb), 0.1),
    rgba(var(--contrast-color-rgb), 0.1)
  );
  border-radius: 20px;
  border: 2px solid var(--accent-color);
  overflow: hidden;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  height: 100%;
  padding: 40px;
}

.activity-card {
  text-align: center;
  padding: 30px 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.activity-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--accent-color-rgb), 0.1),
    transparent
  );
  transition: left 0.6s ease;
}

.activity-card:hover::before {
  left: 100%;
}

.activity-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.activity-card i {
  font-size: 3rem;
  color: var(--accent-color);
  margin-bottom: 15px;
  transition: all 0.3s ease;
  animation: float 3s ease-in-out infinite;
}

.activity-card:hover i {
  transform: scale(1.2);
  color: #0056b3;
}

.activity-card h5 {
  color: var(--heading-color);
  margin: 0;
  font-weight: 600;
  font-size: 1.1rem;
}

/* Specific icons for each activity */
.activity-card:nth-child(1) i {
  animation-delay: 0s;
}

.activity-card:nth-child(2) i {
  animation-delay: 0.5s;
}

.activity-card:nth-child(3) i {
  animation-delay: 1s;
}

.activity-card:nth-child(4) i {
  animation-delay: 1.5s;
}

/* Content styling */
.outreach-content {
  padding-left: 40px;
}

.outreach-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent-color), #0056b3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: pulse 2s infinite;
}

.outreach-icon i {
  font-size: 2rem;
  color: white;
}

.outreach-content h3 {
  color: var(--heading-color);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-color);
  margin-bottom: 40px;
}

/* Animations */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(var(--accent-color-rgb), 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes slideInUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive Design */
Of course! It looks like the "International Outreach" section isn't adapting well to smaller screens, causing the content to get cut off. This is a common issue with responsiveness.

Based on the code and the screenshot you provided, the problem is that the .outreach-visual container has a fixed height and overflow: hidden. When the activity cards stack vertically on mobile, they need more space than the fixed height allows, and the overflow property hides anything that doesn't fit.

How to Fix It
To make this section fully responsive and ensure all content is visible on mobile, you need to adjust your CSS. The key is to remove the fixed height and let the container resize based on its content.

Here are the recommended changes for your CSS file. Replace your existing @media (max-width: 768px) rules for this section with the following:

CSS

/* Responsive Design */
@media (max-width: 768px) {
  .international-outreach .row {
    flex-direction: column;
  }

  .outreach-visual {
    /* Let the container's height adjust to its content */
    height: auto;
    overflow: visible;
    margin-bottom: 40px; /* Add space between the grid and the text content */
  }

  .activities-grid {
    /* This already correctly stacks the cards in one column */
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 20px;
  }

  .activity-card {
    padding: 20px 15px;
  }

  .activity-card i {
    font-size: 2.5rem;
  }

  .outreach-content {
    padding-left: 0;
    margin-top: 0; /* Reset margin as we added it to .outreach-visual */
    text-align: center; /* Center-align the text for a cleaner mobile view */
  }

  .outreach-icon {
    /* Center the main icon */
    margin-left: auto;
    margin-right: auto;
  }

  .outreach-content h3 {
    font-size: 1.8rem;
  }
}

/* 545 */
/* ERROR */
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# About Section Styles
--------------------------------------------------------------*/
.about {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f9ff 0%, #f4f4f9 100%);
  position: relative;
  overflow: hidden;
}

.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(93,87,244,0.05)"/></svg>')
    repeat;
  animation: floatPattern 20s linear infinite;
  pointer-events: none;
}

@keyframes floatPattern {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-100px);
  }
}

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

.about-row {
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-row.animate {
  opacity: 1;
  transform: translateY(0);
}

.about-row:nth-child(2n) {
  animation-delay: 0.2s;
}

.about-row:nth-child(2n + 1) {
  animation-delay: 0.4s;
}

.content-card {
  background: var(--surface-color);
  padding: 40px;
  border-radius: 20px;
  box-shadow: var(--shadow-light);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(-50px);
  opacity: 0;
}

.content-card.animate {
  transform: translateX(0);
  opacity: 1;
}

.content-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  opacity: 0;
  transition: all 0.6s ease;
  z-index: 1;
}

.content-card:hover::before {
  left: 0;
  opacity: 0.05;
}

.content-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-heavy);
}

.content-card > * {
  position: relative;
  z-index: 2;
}

.who-we-are {
  color: var(--accent-color);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.who-we-are.animate {
  opacity: 1;
  transform: translateX(0);
}

.content-card h3 {
  color: var(--heading-color);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.content-card h3.animate {
  opacity: 1;
  transform: translateX(0);
}

.content-card h3::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--gradient-accent);
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.content-card:hover h3::after {
  width: 100%;
}

.content-text {
  color: var(--default-color);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 25px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.content-text.animate {
  opacity: 1;
  transform: translateY(0);
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
}

.service-link.animate {
  opacity: 1;
  transform: translateY(0);
}

.service-link::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-accent);
  transition: width 0.3s ease;
}

.service-link:hover::before {
  width: calc(100% - 24px);
}

.service-link:hover {
  color: var(--nav-hover-color);
  transform: translateX(5px);
}

.service-link i {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.service-link:hover i {
  transform: translateX(5px);
}

.image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  perspective: 1000px;
  overflow: hidden;
}

.image-wrapper {
  position: relative;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: rotateY(15deg) scale(0.9);
  opacity: 0;
  transform-style: preserve-3d;
}

.image-wrapper.animate {
  transform: rotateY(0deg) scale(1);
  opacity: 1;
}

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: -20px;
  bottom: -20px;
  background: var(--gradient-primary);
  border-radius: 15px;
  opacity: 0.1;
  filter: blur(20px);
  transition: all 0.4s ease;
  z-index: -1;
}

.image-wrapper:hover::before {
  transform: scale(1.1);
  opacity: 0.2;
}

.responsive-image {
  max-width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: contain;
  border-radius: 15px;
  /* box-shadow: var(--shadow-medium); */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: grayscale(10%);
}

.responsive-image:hover {
  transform: scale(1.05) rotateY(-5deg);
  box-shadow: var(--shadow-heavy);
  filter: grayscale(0%);
}

/* Special animations for different rows */
.about-row:nth-child(even) .content-card {
  /* transform: translateX(50px); */
}

.about-row:nth-child(even) .image-wrapper {
  transform: rotateY(-15deg) scale(0.9);
}

/* CIRCULAR IMAGE */
/* New Wheel Animation Section */
.wheel-section {
  background: linear-gradient(356deg, #7451ab66 0%, #c3cfe2 100%);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.wheel-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(102, 126, 234, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.wheel-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
}

.wheel-wrapper {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
@keyframes glowPulse2 {
  0% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3),
      0 0 40px rgba(118, 75, 162, 0.2);
  }
  50% {
    box-shadow: 0 0 40px #5c57f4a1, 0 0 60px rgba(118, 75, 162, 0.4);
  }
  100% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3),
      0 0 40px rgba(118, 75, 162, 0.2);
  }
}

.wheel-wrapper::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border-radius: 50%;
  animation: glowPulse2 4s ease-in-out infinite;
  z-index: -1;
}

.wheel-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  animation: breathing 4s ease-in-out infinite;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wheel-image:hover {
  transform: scale(1.02);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  animation-play-state: paused;
}

/* Floating particles animation */
.floating-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
  opacity: 0.6;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 1;
  }
}

/* Pulsing rings around the wheel */
.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(102, 126, 234, 0.3);
  border-radius: 50%;
  animation: pulse 3s ease-in-out infinite;
}

.pulse-ring:nth-child(1) {
  width: 520px;
  height: 520px;
  animation-delay: 0s;
}

.pulse-ring:nth-child(2) {
  width: 580px;
  height: 580px;
  animation-delay: 1s;
}

.pulse-ring:nth-child(3) {
  width: 640px;
  height: 640px;
  animation-delay: 2s;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0;
  }
}

/* Section title */
.section-title {
  text-align: center;
  margin-bottom: 80px;
  color: #2c3e50;
}

.section-title h2 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

.section-title h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.3rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Responsive design */
@media (max-width: 768px) {
  .wheel-wrapper {
    width: 350px;
    height: 350px;
  }

  .pulse-ring:nth-child(1) {
    width: 370px;
    height: 370px;
  }

  .pulse-ring:nth-child(2) {
    width: 420px;
    height: 420px;
  }

  .pulse-ring:nth-child(3) {
    width: 470px;
    height: 470px;
  }

  .section-title h2 {
    font-size: 2.5rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
  .wheel-wrapper {
    width: 280px;
    height: 280px;
  }

  .pulse-ring:nth-child(1) {
    width: 300px;
    height: 300px;
  }

  .pulse-ring:nth-child(2) {
    width: 340px;
    height: 340px;
  }

  .pulse-ring:nth-child(3) {
    width: 380px;
    height: 380px;
  }
}

/* Scroll-triggered animation */
.wheel-section.aos-animate .wheel-image {
  animation-play-state: running;
}

/* Hover effects for better interaction */
.wheel-container:hover .pulse-ring {
  animation-play-state: paused;
}

.wheel-container:hover .particle {
  animation-duration: 3s;
}
/* Replace the existing floating animation keyframes with this */
@keyframes floatToPosition {
  0% {
    transform: translateY(100vh); /* Start from bottom of viewport */
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(0); /* End at natural position */
    opacity: 1;
  }
}

/* Update the image-wrapper animation */
.image-wrapper.animate {
  animation: floatToPosition 2s ease-out forwards; /* 'forwards' keeps final state */
}

/* Remove the infinite floating animation for nth-child elements */
.image-wrapper:nth-child(2n) {
  animation-delay: 0.3s; /* Stagger the animations */
}

/* Update the existing float keyframes to stop at position */
@keyframes float {
  0% {
    transform: translateY(100vh);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Pulse effect for content cards */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(93, 87, 244, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(93, 87, 244, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(93, 87, 244, 0);
  }
}

.content-card.animate {
  animation: pulse 2s ease-in-out 1s 1;
}

/* Responsive Design */
@media (max-width: 991.98px) {
  .content-card {
    padding: 30px;
    margin-bottom: 30px;
  }
  .content-card h3 {
    font-size: 2rem;
  }
  .about-row {
    margin-bottom: 40px;
  }
}

@media (max-width: 767.98px) {
  .about {
    padding: 60px 0;
  }
  .content-card {
    padding: 25px;
  }
  .content-card h3 {
    font-size: 1.8rem;
  }
  .content-text {
    font-size: 15px;
  }
  .image-container {
    margin-top: 20px;
    min-height: 200px;
  }
  .responsive-image {
    max-height: 200px;
  }
}

@media (max-width: 575.98px) {
  .content-card {
    padding: 20px;
  }
  .content-card h3 {
    font-size: 1.6rem;
  }
  .service-link {
    font-size: 14px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Loading shimmer effect */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ERROR */
/* ONGOING PROJECTS SECTION */
/* !BUG */
/* ONGOING PROJECTS SECTION */
/* Enhanced 3D Carousel Styles */
.ongoing-projects {
  position: relative;
  min-height: 100vh;
  padding: 60px 0;
  overflow-x: hidden; /* Change this line */
  background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 40%, #16213e 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  margin-top: 100px;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 10;
}

.section-title {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes textShimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.section-subtitle {
  font-size: 1.2rem;
  color: #000000;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0.9;
}

/* Carousel Container */
.projects-grid {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
  transform-style: preserve-3d;
}

/* Carousel Wrapper */
.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
  animation: gentleFloat 6s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Project Cards */
.project-card {
  position: absolute;
  width: 460px;
  height: 384px;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  will-change: transform, opacity, filter;
}

/* Card positioning in 3D space */
.project-card:nth-child(1) {
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(300px);
}

.project-card:nth-child(2) {
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(300px);
}

.project-card:nth-child(3) {
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(300px);
}

.project-card:nth-child(4) {
  transform: translate(-50%, -50%) rotateY(270deg) translateZ(300px);
}

/* Active card (center) */
.project-card.active {
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(400px) scale(1.15);
  opacity: 1;
  filter: blur(0px) brightness(1.3) saturate(1.1);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 60px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.2);
  z-index: 10;
  animation: activePulse 4s ease-in-out infinite;
}

@keyframes activePulse {
  0%,
  100% {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 60px rgba(59, 130, 246, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.2);
  }
  50% {
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.5), 0 0 80px rgba(59, 130, 246, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.4);
  }
}

/* Side cards */
.project-card.side {
  opacity: 0.7;
  filter: blur(1px) brightness(0.8);
  transform: translate(-50%, -50%) rotateY(45deg) translateZ(250px) scale(0.9);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card.side:hover {
  opacity: 0.9;
  filter: blur(0px) brightness(1);
  transform: translate(-50%, -50%) rotateY(45deg) translateZ(280px) scale(0.95);
}

/* Far side cards */
.project-card.far {
  opacity: 0.4;
  filter: blur(3px) brightness(0.6);
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(150px) scale(0.75);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hidden cards */
.project-card.hidden {
  opacity: 0;
  filter: blur(5px) brightness(0.3);
  transform: translate(-50%, -50%) rotateY(135deg) translateZ(50px) scale(0.6);
  pointer-events: none;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cube Face Styling */
.cube-face {
  width: 100%;
  height: 100%;
  padding: 30px;
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.95) 0%,
    rgba(15, 23, 42, 0.98) 50%,
    rgba(7, 15, 43, 0.95) 100%
  );
  border-radius: 20px;
  position: relative;
  overflow-y: auto;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  box-sizing: border-box; /* Add this line */
}

.cube-face::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(59, 130, 246, 0.1) 30%,
    rgba(139, 92, 246, 0.1) 70%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.project-card.active .cube-face::before {
  opacity: 1;
}

.cube-face::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    rgba(59, 130, 246, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
}

.project-card.active .cube-face::after {
  opacity: 1;
}

/* Project Header */
.project-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  animation: slideInFromTop 0.6s ease-out;
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.project-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.project-icon img {
  width: 200%;
  height: auto;
  object-fit: contain;
}

@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(2deg);
  }
}

.project-card.active .project-icon {
  transform: scale(1.15) rotate(5deg);
  background-position: 100% 0%;
  box-shadow: 0 15px 30px rgba(59, 130, 246, 0.5);
}

.project-title {
  flex: 1;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0;
  transition: all 0.3s ease;
}

.project-card.active .project-title {
  color: #dbeafe;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.project-description {
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 25px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

@keyframes fadeInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.project-card.active .project-description {
  color: #e2e8f0;
}

/* Use Cases */
.use-cases {
  margin-bottom: 25px;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.use-cases-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #3b82f6;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

.use-cases-title::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: width 0.3s ease;
}

.project-card.active .use-cases-title::after {
  width: 60px;
}

.use-cases-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.use-case-tag {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.2),
    rgba(139, 92, 246, 0.2)
  );
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #93c5fd;
  padding: 6px 14px;
  border-radius: 25px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.use-case-tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.use-case-tag:hover::before {
  left: 100%;
}

.project-card.active .use-case-tag {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.3),
    rgba(139, 92, 246, 0.3)
  );
  border-color: rgba(59, 130, 246, 0.5);
  color: #dbeafe;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

/* Project Parts */
.project-parts {
  margin-bottom: 20px;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.parts-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #3b82f6;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

.parts-title::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: width 0.3s ease;
}

.project-card.active .parts-title::after {
  width: 60px;
}

.part-item {
  margin-bottom: 15px;
  padding: 18px;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 15px;
  border: 1px solid rgba(59, 130, 246, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.part-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.project-card.active .part-item {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateX(8px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.project-card.active .part-item::before {
  transform: scaleY(1);
}

.part-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.project-card.active .part-title {
  color: #f1f5f9;
}

.part-description {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.project-card.active .part-description {
  color: #cbd5e1;
}

/* Expand Indicator */
.expand-indicator {
  position: absolute;
  bottom: 25px;
  right: 25px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.7;
  animation: expandPulse 2s ease-in-out infinite;
}

@keyframes expandPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.project-card.active .expand-indicator {
  opacity: 1;
  transform: scale(1.2);
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.6);
  animation: expandPulse 1.5s ease-in-out infinite;
}

/* Navigation Controls */
.carousel-controls {
  position: relative;
  margin-top: 100px;
  display: flex;
  justify-content: center;
  gap: 25px;
  z-index: 20;
  contain: layout; /* Add this line */
}

.carousel-btn {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 5px 20px rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.carousel-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.carousel-btn:hover::before {
  transform: translateX(100%);
}

.carousel-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
}

.carousel-btn:active {
  transform: translateY(-1px) scale(1.05);
}

.carousel-indicators {
  position: absolute;
  bottom: -140px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 20;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.3);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(59, 130, 246, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.indicator.active {
  background: #3b82f6;
  transform: scale(1.3);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.indicator.active::after {
  width: 20px;
  height: 20px;
}

.indicator:hover {
  background: rgba(59, 130, 246, 0.6);
  transform: scale(1.1);
}

/* Background Particles */
.background-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6);
  border-radius: 50%;
  animation: float 8s linear infinite;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.particle:nth-child(odd) {
  animation-delay: -4s;
  background: linear-gradient(45deg, #8b5cf6, #06b6d4);
}

.particle:nth-child(3n) {
  animation-duration: 12s;
  width: 2px;
  height: 2px;
}

.particle:nth-child(4n) {
  animation-duration: 6s;
  width: 4px;
  height: 4px;
}

@keyframes float {
  0% {
    transform: translateY(100vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(100px) rotate(360deg);
    opacity: 0;
  }
}

/* Loading animation */
@keyframes cardLoad {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotateY(90deg) translateZ(0px) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotateY(0deg) translateZ(300px) scale(1);
  }
}

.project-card.loading {
  animation: cardLoad 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Smooth performance optimizations */
.project-card,
.carousel-wrapper,
.cube-face {
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Enhanced auto-rotation */
@keyframes autoRotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.carousel-wrapper.auto-rotate {
  animation: autoRotate 25s linear infinite;
}

.carousel-wrapper.auto-rotate:hover {
  animation-play-state: paused;
}

/* Card interaction states */
.project-card:hover:not(.active) {
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(320px) scale(1.02);
  filter: brightness(1.1);
}

/* Expanded state improvements */
.project-card.expanded {
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(450px) scale(1.2) !important;
  z-index: 15;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 100px rgba(59, 130, 246, 0.6);
}

.project-card.expanded .cube-face {
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.98) 0%,
    rgba(15, 23, 42, 1) 50%,
    rgba(7, 15, 43, 0.98) 100%
  );
}

/* Mobile styles for 2D carousel */
.mobile-carousel {
  transform-style: flat !important;
  perspective: none !important;
}

.mobile-carousel .carousel-wrapper {
  transform-style: flat !important;
  animation: none !important;
  display: flex;
  transition: transform 0.3s ease;
}

.mobile-carousel .project-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 10px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.mobile-carousel .project-card.active {
  opacity: 1;
  transform: scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
  z-index: 10;
}

.mobile-carousel .project-card.side,
.mobile-carousel .project-card.far,
.mobile-carousel .project-card.hidden {
  opacity: 0.6;
  transform: none !important;
  filter: none !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .section-title {
    font-size: 2.5rem;
  }
  
  .projects-grid {
    height: 450px;
  }
  
  .project-card {
    width: 400px;
    height: 350px;
  }
}

@media (max-width: 768px) {
  .ongoing-projects {
    min-height: auto;
    padding: 40px 20px;
  }

  .section-header {
    margin-bottom: 40px;
  }

  .section-title {
    font-size: 2rem;
  }

 .projects-grid {
    height: auto;
    min-height: 450px;
    perspective: none;
    transform-style: flat;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px; /* Change this line */
    display: block;
  }

  .carousel-wrapper {
    transform-style: flat;
    animation: none;
    display: flex;
    width: max-content;
    padding: 0; /* Change this line */
  }

  .project-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 85vw;
    max-width: 340px;
    height: 400px;
    margin: 0 15px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: all 0.3s ease;
  }

  .project-card.active {
    opacity: 1 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4) !important;
    z-index: 10 !important;
    filter: brightness(1.1) !important;
  }

  .project-card.side,
  .project-card.far,
  .project-card.hidden {
    opacity: 0.7 !important;
    transform: none !important;
    filter: none !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
    pointer-events: all !important;
  }

  .cube-face::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5191f8, #a076f8);
  }

 /* Custom horizontal scrollbar styles */
.projects-grid::-webkit-scrollbar {
  height: 4px; /* Make scrollbar thinner - change this value */
}

.projects-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.projects-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 4px;
}

.projects-grid::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #5191f8, #a076f8);
}

/* For Firefox */
.projects-grid {
  scrollbar-width: thin;
  scrollbar-color: #3b82f6 rgba(0, 0, 0, 0.1);
}
  
  .projects-grid {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Even smaller screens */
@media (max-width: 480px) {
  .ongoing-projects {
    padding: 30px 10px;
  }

  .projects-grid {
    min-height: 420px;
    padding: 15px 0;
  }

  .carousel-wrapper {
    padding: 0 10px;
  }

  .project-card {
    width: 90vw;
    max-width: 300px;
    height: 380px;
    margin: 0 10px;
  }

  .cube-face {
    padding: 15px;
  }

  .project-header {
    gap: 10px;
    margin-bottom: 15px;
  }

  .project-icon {
    width: 50px;
    height: 50px;
  }

  .project-title {
    font-size: 1rem;
  }

  .project-description {
    font-size: 0.85rem;
    margin-bottom: 15px;
  }

  .part-item {
    padding: 12px;
    margin-bottom: 10px;
  }

  .part-title {
    font-size: 0.85rem;
  }

  .part-description {
    font-size: 0.75rem;
  }

  .carousel-controls {
    margin-top: 30px;
    gap: 20px;
  }

  .carousel-btn {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }

  .section-title {
    font-size: 1.8rem;
  }
}face {
    padding: 20px;
  }

  .project-header {
    flex-direction: column;
    text-align: center;
    gap: 15px;
    margin-bottom: 20px;
  }

  .project-title {
    font-size: 1.1rem;
  }

  .project-description {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .part-item {
    padding: 15px;
    margin-bottom: 12px;
  }

  .part-title {
    font-size: 0.9rem;
  }

  .part-description {
    font-size: 0.8rem;
  }

  .carousel-controls {
    margin-top: 40px;
  }

  .carousel-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .carousel-indicators {
    bottom: -100px;
  }

  /* Custom Scrollbar */
  .cube-face::-webkit-scrollbar {
    width: 4px;
  }

  .cube-face::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

  .cube-face::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 4px;
  }

  .cube-face::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5191f8, #a076f8);
  }
}

/* Even smaller screens */
@media (max-width: 480px) {
  .projects-grid {
    height: 450px;
  }

  .project-card {
    height: 400px;
  }

  .project-header {
    flex-direction: column; /* Stack icon and title */
    text-align: center;
    gap: 15px;
  }
}

/* Loading animation */
@keyframes cardLoad {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotateY(90deg) translateZ(0px) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotateY(0deg) translateZ(300px) scale(1);
  }
}

.project-card.loading {
  animation: cardLoad 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Smooth performance optimizations */
.project-card,
.carousel-wrapper,
.cube-face {
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Enhanced auto-rotation */
@keyframes autoRotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.carousel-wrapper.auto-rotate {
  animation: autoRotate 25s linear infinite;
}

.carousel-wrapper.auto-rotate:hover {
  animation-play-state: paused;
}

/* Card interaction states */
.project-card:hover:not(.active) {
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(320px) scale(1.02);
  filter: brightness(1.1);
}

/* Expanded state improvements */
.project-card.expanded {
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(450px) scale(1.2) !important;
  z-index: 15;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 100px rgba(59, 130, 246, 0.6);
}

.project-card.expanded .cube-face {
  background: linear-gradient(
    135deg,
    rgba(30, 41, 59, 0.98) 0%,
    rgba(15, 23, 42, 1) 50%,
    rgba(7, 15, 43, 0.98) 100%
  );
}
/* !BUG */
/*--------------------------------------------------------------
# How We Work Section
--------------------------------------------------------------*/
.how-we-work .process-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
}

.how-we-work .process-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 2.5rem;
}

.how-we-work .process-item:last-child {
  padding-bottom: 0;
}

.how-we-work .process-item .content {
  width: 100%;
  position: relative;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--accent-color), transparent 95%),
    var(--surface-color)
  );
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  border-radius: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.how-we-work .process-item .content:hover {
  transform: translateX(10px);
  box-shadow: -8px 8px 25px rgba(0, 0, 0, 0.1);
}

.how-we-work .process-item .content:hover .step-icon {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-color), transparent 15%),
    var(--accent-color)
  );
  transform: rotate(10deg);
}

.how-we-work .process-item .content:hover .step-number {
  transform: translateX(-5px);
  opacity: 1;
}

.how-we-work .process-item .step-number {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 4rem;
  font-weight: 800;
  color: var(--accent-color);
  font-family: var(--heading-font);
  line-height: 1;
  opacity: 0.2;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.how-we-work .process-item .card-body {
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.how-we-work .process-item .step-icon {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  background-color: var(--accent-color);
  border-radius: 15px;
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px
    color-mix(in srgb, var(--accent-color), transparent 70%);
}

.how-we-work .process-item .step-icon i {
  font-size: 2rem;
  color: var(--contrast-color);
}

.how-we-work .process-item .step-content h3 {
  color: var(--heading-color);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.how-we-work .process-item .step-content p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.how-we-work .process-item .arrow {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  margin: 1rem 0;
  width: 100px;
  height: 100px;
  opacity: 0.7;
}

@media (max-width: 767.98px) {
  .how-we-work .process-container {
    padding: 1rem 0;
  }

  .how-we-work .process-item {
    padding-bottom: 2rem;
  }

  .how-we-work .process-item .content {
    border-width: 1px;
  }

  .how-we-work .process-item .content:hover {
    transform: translateY(-5px);
  }

  .how-we-work .process-item .step-number {
    font-size: 3rem;
    left: 50%;
    top: -1.5rem;
    transform: translateX(-50%);
  }

  .how-we-work .process-item .step-number:hover {
    transform: translateX(-50%);
  }

  .how-we-work .process-item .card-body {
    padding: 2rem 1.5rem 1.5rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .how-we-work .process-item .step-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
  }

  .how-we-work .process-item .step-icon i {
    font-size: 1.75rem;
  }

  .how-we-work .process-item .step-content h3 {
    font-size: 1.25rem;
  }

  .how-we-work .process-item .arrow {
    height: 60px;
    margin: 0.5rem 0;
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  display: flex;
  background-color: var(--surface-color);
  border-radius: 12px;
  padding: 2rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.4s ease;
}

.services .service-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: var(--accent-color);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.services .service-item:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

.services .service-item:hover::before {
  transform: scaleY(1);
}

.services .service-item:hover .service-icon {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: rotateY(180deg);
}

.services .service-item:hover .service-icon i {
  transform: rotateY(180deg);
}

.services .service-item:hover .service-link i {
  transform: translateX(5px);
}

.services .service-icon {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
  transition: all 0.5s ease;
}

.services .service-icon i {
  font-size: 2rem;
  transition: transform 0.5s ease;
}

.services .service-content {
  flex-grow: 1;
}

.services .service-content h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--heading-color);
}

.services .service-content p {
  margin-bottom: 1.25rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.services .service-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent-color);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.services .service-link span {
  margin-right: 0.5rem;
}

.services .service-link i {
  transition: transform 0.3s ease;
}

.services .service-link:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

@media (max-width: 767.98px) {
  .services .service-item {
    padding: 1.5rem;
    margin-bottom: 1rem;
  }

  .services .service-icon {
    width: 60px;
    height: 60px;
    margin-right: 1rem;
  }

  .services .service-icon i {
    font-size: 1.5rem;
  }

  .services .service-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
  }

  .services .service-content p {
    margin-bottom: 1rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 575.98px) {
  .services .service-item {
    flex-direction: column;
    text-align: center;
  }

  .services .service-item::before {
    width: 100%;
    height: 4px;
    transform: scaleX(0);
    transform-origin: left;
  }

  .services .service-item:hover::before {
    transform: scaleX(1);
  }

  .services .service-icon {
    margin-right: 0;
    margin-bottom: 1.25rem;
  }

  .services .service-link {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Services Alt Section
--------------------------------------------------------------*/
.services-alt .content-block {
  margin-right: 30px;
}

.services-alt .content-block .subtitle {
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.8rem;
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

.services-alt .content-block .title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.services-alt .content-block .description {
  margin-bottom: 1.8rem;
  font-size: 1rem;
  line-height: 1.7;
}

.services-alt .content-block .button-wrapper {
  margin-top: 2rem;
}

.services-alt .content-block .button-wrapper .btn {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.8rem 1.8rem;
  border-radius: 5px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.services-alt .content-block .button-wrapper .btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 10%);
  transform: translateY(-3px);
}

@media (max-width: 992px) {
  .services-alt .content-block {
    margin-right: 0;
    margin-bottom: 3rem;
  }
}

.services-alt .services-list .service-item {
  position: relative;
  padding: 2.5rem 0;
  border-bottom: 1px solid
    color-mix(in srgb, var(--default-color), transparent 85%);
}

.services-alt .services-list .service-item:first-child {
  padding-top: 0;
}

.services-alt .services-list .service-item:hover .service-icon {
  background-color: var(--accent-color);
}

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

.services-alt .services-list .service-item:hover .service-content h4 a {
  color: var(--accent-color);
}

.services-alt .services-list .service-icon {
  height: 5rem;
  width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-color);
  border-radius: 50%;
  margin-right: 1.5rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.services-alt .services-list .service-icon i {
  font-size: 2.5rem;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.services-alt .services-list .service-content {
  position: relative;
  width: 100%;
}

.services-alt .services-list .service-content h4 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.services-alt .services-list .service-content h4 a {
  color: var(--heading-color);
  transition: color 0.3s;
}

.services-alt .services-list .service-content h4 a:hover {
  color: var(--accent-color);
}

.services-alt .services-list .service-content p {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .services-alt .services-list .service-item {
    padding: 2rem 0;
  }

  .services-alt .services-list .service-icon {
    height: 4rem;
    width: 4rem;
    margin-right: 1rem;
  }

  .services-alt .services-list .service-icon i {
    font-size: 2rem;
  }

  .services-alt .services-list .service-content h4 {
    font-size: 1.25rem;
  }

  .services-alt .services-list .service-content p {
    font-size: 0.9rem;
  }
}

/*--------------------------------------------------------------
# Call To Action 2 Section
--------------------------------------------------------------*/
.call-to-action-2 .cta-image-wrapper {
  position: relative;
}

.call-to-action-2 .cta-image-wrapper img {
  position: relative;
  z-index: 2;
  transform: scaleX(-1);
}

.call-to-action-2 .cta-image-wrapper .cta-pattern {
  position: absolute;
  width: 80%;
  height: 80%;
  bottom: -30px;
  right: -30px;
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--accent-color), transparent 98%),
    color-mix(in srgb, var(--accent-color), transparent 98%) 10px,
    color-mix(in srgb, var(--accent-color), transparent 95%) 10px,
    color-mix(in srgb, var(--accent-color), transparent 95%) 20px
  );
  z-index: 1;
  border-radius: 1rem;
}

.call-to-action-2 .cta-content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

@media (max-width: 992px) {
  .call-to-action-2 .cta-content h2 {
    font-size: 2rem;
  }
}

.call-to-action-2 .cta-content .lead {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.call-to-action-2 .cta-features {
  margin-bottom: 1.5rem;
}

.call-to-action-2 .cta-features .feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.call-to-action-2 .cta-features .feature-item i {
  color: var(--accent-color);
  font-size: 1.25rem;
  margin-right: 0.75rem;
}

.call-to-action-2 .cta-features .feature-item span {
  font-size: 1rem;
}

.call-to-action-2 .cta-action .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.75rem 1.75rem;
  transition: all 0.3s ease;
}

.call-to-action-2 .cta-action .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  border-color: color-mix(in srgb, var(--accent-color), black 10%);
}

.call-to-action-2 .cta-action .btn-outline-primary {
  border-color: var(--accent-color);
  color: var(--accent-color);
  padding: 0.75rem 1.75rem;
  transition: all 0.3s ease;
}

.call-to-action-2 .cta-action .btn-outline-primary:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

@media (max-width: 768px) {
  .call-to-action-2 .cta-image-wrapper {
    margin-bottom: 2rem;
  }

  .call-to-action-2 .cta-image-wrapper .cta-pattern {
    width: 70%;
    height: 70%;
    bottom: -20px;
    right: -20px;
  }

  .call-to-action-2 .cta-action {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .call-to-action-2 .cta-action .btn {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters-container {
  margin-bottom: 40px;
}

.portfolio .portfolio-filters {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}

.portfolio .portfolio-filters li {
  font-size: 15px;
  font-weight: 500;
  padding: 8px 20px;
  cursor: pointer;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--surface-color), transparent 50%);
  color: var(--default-color);
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  transform: translateY(-2px);
}

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

.portfolio .portfolio-card {
  background-color: var(--surface-color);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 35px rgba(0, 0, 0, 0.1);
}

.portfolio .portfolio-card:hover .portfolio-overlay {
  opacity: 1;
  visibility: visible;
}

.portfolio .portfolio-card:hover .portfolio-overlay .portfolio-actions {
  transform: translateY(0);
}

.portfolio .portfolio-card .portfolio-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}

.portfolio .portfolio-card .portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease-in-out;
}

.portfolio .portfolio-card .portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.portfolio .portfolio-card .portfolio-overlay .portfolio-actions {
  transform: translateY(20px);
  transition: all 0.4s ease-in-out;
  display: flex;
  gap: 15px;
}

.portfolio .portfolio-card .portfolio-overlay .portfolio-actions a {
  width: 45px;
  height: 45px;
  background-color: var(--surface-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  font-size: 20px;
  transition: all 0.3s ease;
}

.portfolio .portfolio-card .portfolio-overlay .portfolio-actions a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: scale(1.1);
}

.portfolio .portfolio-card .portfolio-content {
  padding: 25px;
}

.portfolio .portfolio-card .portfolio-content .category {
  font-size: 14px;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  display: block;
  margin-bottom: 10px;
}

.portfolio .portfolio-card .portfolio-content h3 {
  font-size: 20px;
  margin: 0 0 15px;
  font-weight: 600;
  transition: color 0.3s ease;
}

.portfolio .portfolio-card .portfolio-content h3:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-card .portfolio-content p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    padding: 6px 15px;
  }

  .portfolio .portfolio-card .portfolio-content {
    padding: 20px;
  }

  .portfolio .portfolio-card .portfolio-content h3 {
    font-size: 18px;
  }

  .portfolio .portfolio-card .portfolio-content p {
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-card {
  height: 100%;
  padding: 2rem;
  background: var(--surface-color);
  border-radius: 1rem;
  transition: all 0.3s ease;
  position: relative;
}

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

.pricing .pricing-card.popular {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .pricing-card.popular h3,
.pricing .pricing-card.popular h4 {
  color: var(--contrast-color);
}

.pricing .pricing-card.popular .price .currency,
.pricing .pricing-card.popular .price .amount,
.pricing .pricing-card.popular .price .period {
  color: var(--contrast-color);
}

.pricing .pricing-card.popular .features-list li {
  color: var(--contrast-color);
}

.pricing .pricing-card.popular .features-list li i {
  color: var(--contrast-color);
}

.pricing .pricing-card.popular .btn-light {
  background: var(--contrast-color);
  color: var(--accent-color);
}

.pricing .pricing-card.popular .btn-light:hover {
  background: color-mix(in srgb, var(--contrast-color), transparent 10%);
}

.pricing .pricing-card .popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--contrast-color);
  color: var(--accent-color);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.08);
}

.pricing .pricing-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.pricing .pricing-card .price {
  margin-bottom: 1.5rem;
}

.pricing .pricing-card .price .currency {
  font-size: 1.5rem;
  font-weight: 600;
  vertical-align: top;
  line-height: 1;
}

.pricing .pricing-card .price .amount {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
}

.pricing .pricing-card .price .period {
  font-size: 1rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.pricing .pricing-card .description {
  margin-bottom: 2rem;
  font-size: 0.975rem;
}

.pricing .pricing-card h4 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.pricing .pricing-card .features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

.pricing .pricing-card .features-list li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.pricing .pricing-card .features-list li i {
  color: var(--accent-color);
  margin-right: 0.75rem;
  font-size: 1.25rem;
}

.pricing .pricing-card .btn {
  width: 100%;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
}

.pricing .pricing-card .btn.btn-primary {
  background: var(--accent-color);
  border: none;
  color: var(--contrast-color);
}

.pricing .pricing-card .btn.btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-item {
  background-color: var(--surface-color);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

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

.faq .faq-item:hover {
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.faq .faq-item .faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 25px;
  cursor: pointer;
  position: relative;
}

.faq .faq-item .faq-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--heading-color);
  margin: 0;
  flex: 1;
  padding-right: 20px;
  transition: color 0.3s ease;
}

.faq .faq-item .faq-header .faq-toggle {
  font-size: 20px;
  color: var(--accent-color);
  transition: transform 0.3s ease;
}

.faq .faq-item .faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.faq .faq-item .faq-content p {
  padding: 0 25px 20px;
  margin: 0;
  line-height: 1.6;
  color: var(--default-color);
  font-size: 15px;
}

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

.faq .faq-item.faq-active .faq-header .faq-toggle {
  transform: rotate(180deg);
}

.faq .faq-item.faq-active .faq-content {
  max-height: 300px;
  overflow: auto;
}

.faq .faq-contact-card {
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--accent-color),
    color-mix(in srgb, var(--accent-color), var(--heading-color) 30%)
  );
  border-radius: 10px;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  color: var(--contrast-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.faq .faq-contact-card .card-icon {
  margin-bottom: 20px;
}

.faq .faq-contact-card .card-icon i {
  font-size: 48px;
  color: color-mix(in srgb, var(--contrast-color), transparent 10%);
}

.faq .faq-contact-card .card-content h3 {
  color: var(--contrast-color);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
}

.faq .faq-contact-card .card-content p {
  color: color-mix(in srgb, var(--contrast-color), transparent 10%);
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 1.6;
}
#small-link {
  font-size: 1rem; /* Smaller text */
  /* padding: 8px 14px; Reduced padding */
  /* border-radius: 25px; */
  /* display: inline-flex; */
  /* align-items: center; */
  /* gap: 6px; */
  text-decoration: none;
}

.faq .faq-contact-card .contact-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-top: auto;
}

.faq .faq-contact-card .contact-options .contact-option {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 15px 20px;
  border-radius: 8px;
  color: var(--contrast-color);
  transition: all 0.3s ease;
}

.faq .faq-contact-card .contact-options .contact-option:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateX(5px);
}

.faq .faq-contact-card .contact-options .contact-option i {
  font-size: 20px;
  margin-right: 12px;
}

.faq .faq-contact-card .contact-options .contact-option span {
  font-weight: 500;
  font-size: 16px;
}

@media (max-width: 1500px) {
  .faq .row {
    flex-direction: column-reverse;
  }

  .faq .faq-contact-card {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .faq .faq-item .faq-header {
    padding: 15px 20px;
  }

  .faq .faq-item .faq-header h3 {
    font-size: 16px;
  }

  .faq .faq-item .faq-content p {
    padding: 0 20px 15px;
    font-size: 14px;
  }

  .faq .faq-contact-card {
    padding: 30px 20px;
  }

  .faq .faq-contact-card .card-icon i {
    font-size: 40px;
  }

  .faq .faq-contact-card .card-content h3 {
    font-size: 24px;
  }

  .faq .faq-contact-card .card-content p {
    font-size: 15px;
  }

  .faq .faq-contact-card .contact-options .contact-option {
    padding: 12px 15px;
  }

  .faq .faq-contact-card .contact-options .contact-option i {
    font-size: 18px;
  }

  .faq .faq-contact-card .contact-options .contact-option span {
    font-size: 15px;
  }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  position: relative;
  background-color: var(--surface-color);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
}

.team .team-card:hover {
  transform: translateY(-10px);
}

.team .team-card:hover .team-overlay {
  opacity: 1;
  visibility: visible;
}

.team .team-card:hover .team-social a {
  transform: translateY(0);
  opacity: 1;
}

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

.team .team-image img {
  transition: transform 0.6s;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.team .team-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.team .team-overlay p {
  color: var(--contrast-color);
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.team .team-social {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.team .team-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--contrast-color);
  color: var(--accent-color);
  font-size: 1rem;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--contrast-color), transparent 80%);
}

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

.team .team-content {
  padding: 1.5rem;
  text-align: center;
}

.team .team-content h4 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.team .team-content .position {
  display: inline-block;
  padding: 0.35rem 1rem;
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  border-radius: 30px;
  font-size: 0.875rem;
  color: var(--accent-color);
  font-weight: 500;
}

@media (max-width: 767.98px) {
  .team .team-card {
    margin-bottom: 1.5rem;
  }

  .team .team-content {
    padding: 1.25rem;
  }

  .team .team-content h4 {
    font-size: 1.125rem;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .swiper-wrapper {
  height: auto !important;
}

.testimonials .testimonial-card {
  background: var(--surface-color);
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}

.testimonials .testimonial-card:hover {
  border-color: var(--accent-color);
}

.testimonials .testimonial-content {
  padding: 40px 30px 30px;
  position: relative;
  flex-grow: 1;
}

.testimonials .testimonial-content p {
  font-size: 16px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.testimonials .testimonial-content .quote-icon {
  position: absolute;
  top: 15px;
  left: 30px;
  font-size: 42px;
  color: color-mix(in srgb, var(--accent-color), transparent 85%);
  z-index: 0;
  opacity: 0.8;
}

.testimonials .testimonial-profile {
  padding: 20px 30px;
  background-color: color-mix(in srgb, var(--heading-color), transparent 95%);
  border-top: 1px solid
    color-mix(in srgb, var(--heading-color), transparent 90%);
}

.testimonials .rating {
  margin-bottom: 15px;
}

.testimonials .rating i {
  color: #ffc107;
  margin-right: 3px;
  font-size: 14px;
}

.testimonials .profile-info {
  display: flex;
  align-items: center;
}

.testimonials .profile-info img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--background-color);
  margin-right: 15px;
}

.testimonials .profile-info div {
  flex: 1;
}

.testimonials .profile-info h3 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 700;
  color: var(--heading-color);
}

.testimonials .profile-info h4 {
  margin: 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 500;
}

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

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

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
  width: 25px;
  border-radius: 5px;
}

@media (max-width: 767px) {
  .testimonials .testimonial-content {
    padding: 30px 20px 20px;
  }

  .testimonials .testimonial-content p {
    font-size: 15px;
  }

  .testimonials .testimonial-content .quote-icon {
    font-size: 36px;
    left: 20px;
  }

  .testimonials .testimonial-profile {
    padding: 15px 20px;
  }

  .testimonials .profile-info img {
    width: 45px;
    height: 45px;
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-card {
  background-color: var(--surface-color);
  padding: 30px;
  text-align: center;
  height: 100%;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease-in-out;
}

.contact .info-card:hover {
  transform: translateY(-5px);
}

.contact .info-card .icon-box {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.contact .info-card .icon-box i {
  font-size: 24px;
  color: var(--accent-color);
}

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

.contact .info-card p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 15px;
  line-height: 1.6;
}

.contact .form-wrapper .input-group .input-group-text {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  border-color: color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 8px 0 0 8px;
  padding: 12px 15px;
}

.contact .form-wrapper .input-group .form-control {
  color: var(--default-color);
  background-color: var(--surface-color);
  border-radius: 0 8px 8px 0;
  box-shadow: none;
  font-size: 14px;
  border-color: color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 12px 15px;
}

.contact .form-wrapper .input-group .form-control:focus {
  border-color: var(--accent-color);
}

.contact .form-wrapper .input-group .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .form-wrapper select.form-control {
  appearance: none;
  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 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 40px;
}

.contact .form-wrapper textarea.form-control {
  min-height: 160px;
}

.contact .form-wrapper button {
  background-color: var(--accent-color);
  border: 0;
  padding: 12px 40px;
  color: var(--contrast-color);
  border-radius: 8px;
  transition: 0.3s;
  font-size: 16px;
  font-weight: 500;
}

.contact .form-wrapper button:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

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

.portfolio-details .swiper-wrapper {
  height: auto;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {
  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

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

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

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

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

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

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

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

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

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

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

.portfolio-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-main-image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.service-details .service-main-image img {
  width: 100%;
  transition: transform 0.6s;
}

.service-details .service-main-image:hover img {
  transform: scale(1.05);
}

.service-details .service-main-image .experience-badge {
  position: absolute;
  bottom: 30px;
  right: 30px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 20px;
  border-radius: 12px;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.service-details .service-main-image .experience-badge span {
  font-size: 36px;
  font-weight: 700;
  display: block;
  line-height: 1;
}

.service-details .service-main-image .experience-badge p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.service-details .service-main-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-details .service-main-content .section-header {
  margin-bottom: 25px;
}

.service-details .service-main-content .section-header .section-subtitle {
  display: inline-block;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
}

.service-details .service-main-content .section-header h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .service-details .service-main-content .section-header h2 {
    font-size: 28px;
  }
}

.service-details .service-main-content .lead {
  font-size: 18px;
  margin-bottom: 20px;
}

.service-details .service-main-content p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 20px;
}

.service-details .service-benefits {
  padding: 0;
  list-style: none;
  margin: 20px 0 0 0;
}

.service-details .service-benefits li {
  padding: 12px 0;
  position: relative;
  display: flex;
  align-items: center;
}

.service-details .service-benefits li i {
  color: var(--accent-color);
  font-size: 20px;
  margin-right: 15px;
}

.service-details .service-tabs {
  margin-top: 80px;
}

.service-details .service-tabs .nav-tabs {
  border: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  margin-bottom: 30px;
  overflow-x: auto;
  padding-bottom: 5px;
}

@media (max-width: 768px) {
  .service-details .service-tabs .nav-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .service-details .service-tabs .nav-tabs::-webkit-scrollbar {
    height: 5px;
  }

  .service-details .service-tabs .nav-tabs::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--default-color), transparent 80%);
    border-radius: 10px;
  }
}

.service-details .service-tabs .nav-tabs .nav-link {
  border: none;
  padding: 15px 25px;
  border-radius: 50px;
  color: var(--default-color);
  font-weight: 600;
  background: var(--surface-color);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  display: flex;
  align-items: center;
}

.service-details .service-tabs .nav-tabs .nav-link i {
  margin-right: 10px;
  font-size: 18px;
}

.service-details .service-tabs .nav-tabs .nav-link.active {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.service-details .service-tabs .tab-content {
  padding: 40px;
  border-radius: 16px;
  background: var(--surface-color);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.service-details .service-tabs .tab-content h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--heading-color);
}

.service-details .service-tabs .tab-content p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.service-details .service-tabs .tab-content .feature-item {
  padding: 20px;
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  border-radius: 12px;
  height: 100%;
  transition: transform 0.3s;
}

.service-details .service-tabs .tab-content .feature-item:hover {
  transform: translateY(-5px);
}

.service-details .service-tabs .tab-content .feature-item i {
  color: var(--accent-color);
  font-size: 28px;
  margin-bottom: 15px;
}

.service-details .service-tabs .tab-content .feature-item h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.service-details .service-tabs .tab-content .feature-item p {
  font-size: 14px;
  margin-bottom: 0;
}

.service-details .service-testimonial {
  margin-top: 80px;
}

.service-details .service-testimonial .testimonial-card {
  padding: 40px;
  border-radius: 16px;
  background: var(--surface-color);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.service-details .service-testimonial .testimonial-card .client-info {
  text-align: center;
}

.service-details .service-testimonial .testimonial-card .client-info img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border: 5px solid var(--background-color);
  margin-right: 20px;
}

@media (max-width: 767px) {
  .service-details .service-testimonial .testimonial-card .client-info img {
    margin: 0 auto 20px;
  }
}

.service-details .service-testimonial .testimonial-card .client-info h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.service-details .service-testimonial .testimonial-card .client-info p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 10px;
  font-size: 14px;
}

.service-details .service-testimonial .testimonial-card .client-info .stars {
  color: #ffd700;
  font-size: 14px;
}

.service-details .service-testimonial .testimonial-card .quote {
  position: relative;
  padding-left: 30px;
}

.service-details .service-testimonial .testimonial-card .quote i {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 24px;
  color: var(--accent-color);
}

.service-details .service-testimonial .testimonial-card .quote p {
  font-style: italic;
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.service-details .service-cta {
  margin-top: 80px;
  padding: 60px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-color), transparent 10%),
    color-mix(in srgb, var(--accent-color), transparent 40%)
  );
  box-shadow: 0 10px 30px
    color-mix(in srgb, var(--accent-color), transparent 85%);
}

.service-details .service-cta h3 {
  font-size: 32px;
  font-weight: 700;
  color: var(--contrast-color);
  margin-bottom: 15px;
}

.service-details .service-cta p {
  font-size: 18px;
  color: var(--contrast-color);
  opacity: 0.9;
  margin-bottom: 30px;
}

.service-details .service-cta .btn-service {
  display: inline-flex;
  align-items: center;
  background: var(--contrast-color);
  color: var(--accent-color);
  font-weight: 600;
  padding: 15px 35px;
  border-radius: 50px;
  transition: all 0.3s;
}

.service-details .service-cta .btn-service i {
  margin-left: 8px;
  transition: transform 0.3s;
}

.service-details .service-cta .btn-service:hover {
  background: var(--background-color);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.service-details .service-cta .btn-service:hover i {
  transform: translateX(5px);
}

@media (max-width: 767px) {
  .service-details .service-cta {
    padding: 40px 20px;
  }

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

@media (max-width: 991px) {
  .service-details .service-main-content {
    margin-top: 30px;
  }

  .service-details .service-tabs {
    margin-top: 50px;
  }

  .service-details .service-testimonial,
  .service-details .service-cta {
    margin-top: 50px;
  }
}

@media (max-width: 767px) {
  .service-details .client-info {
    flex-direction: column;
    margin-bottom: 30px;
  }

  .service-details .service-tabs .tab-content {
    padding: 30px 20px;
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}
#training,
#global-contributions,
#collaborations,
#ongoing-projects {
  scroll-margin-top: 100px; /* Adjust this value to match your navbar height */
}