/* === CSS VARIABLES & ROOT SETTINGS === */
 :root {
     /* Professional Color Palette */
     --primary: #0052FF;
     --primary-dark: #0041CC;
     --primary-light: #4285FF;
     --secondary: #6366F1;
     --secondary-dark: #4F46E5;
     --accent: #10B981;
     --accent-dark: #059669;
     --warning: #F59E0B;
     --danger: #EF4444;

     /* Neutral Colors */
     --gray-50: #F8FAFC;
     --gray-100: #F1F5F9;
     --gray-200: #E2E8F0;
     --gray-300: #CBD5E1;
     --gray-400: #94A3B8;
     --gray-500: #64748B;
     --gray-600: #475569;
     --gray-700: #334155;
     --gray-800: #1E293B;
     --gray-900: #0F172A;

     /* Gradients */
     --gradient-primary: linear-gradient(135deg, #0052FF 0%, #6366F1 100%);
     --gradient-secondary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
     --gradient-accent: linear-gradient(135deg, #10B981 0%, #0891B2 100%);
     --gradient-dark: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
     --gradient-mesh: radial-gradient(circle at 20% 50%, rgba(0, 82, 255, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);

     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     --shadow-glow: 0 0 40px rgba(0, 82, 255, 0.3);
 }

 /* === GLOBAL STYLES === */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
     overflow-x: hidden;
     background: var(--gray-900);
     color: white;
 }

 /* === HEADER STYLES === */
 /* === MAIN HEADER === */
 .main-header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

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

 /* === NAVBAR === */
 .navbar {
     /* padding: 0; */
     padding: 15px;
     background: rgba(15, 23, 42, 0.95) !important;
     backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .navbar.scrolled {
     background: rgba(15, 23, 42, 0.98) !important;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 }

 /* === LOGO STYLES === */
 .header-logo {
     display: flex;
     align-items: center;
     text-decoration: none;
     color: white !important;
     font-weight: 700;
     font-size: 1.5rem;
     transition: all 0.3s ease;
 }

 .header-logo:hover {
     color: #60a5fa !important;
     transform: scale(1.05);
 }

 .logo-icon {
     width: 40px;
     height: 40px;
     /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
     background: var(--gradient-primary);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 0.75rem;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .logo-icon i {
     font-size: 1.2rem;
     color: white;
 }

 /* === NAVIGATION === */
 .navbar-expand-lg .navbar-nav {
     gap: 2rem;
 }

 .navbar-nav .nav-link {
     color: #d1d5db !important;
     font-weight: 500;
     font-size: 0.95rem;
     padding: 0.5rem 0 !important;
     position: relative;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .navbar-nav .nav-link::before {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-link.active {
     color: white !important;
 }

 .navbar-nav .nav-link:hover::before,
 .navbar-nav .nav-link.active::before {
     width: 100%;
 }

 /* === DROPDOWN MENU === */
 .dropdown-menu-custom {
     background: rgba(15, 23, 42, 0.95) !important;
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1) !important;
     border-radius: 12px;
     padding: 0.5rem 0;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
 }

 .dropdown-item-custom {
     color: #d1d5db !important;
     font-size: 0.9rem;
     transition: all 0.3s ease;
     padding: 0.75rem 1.5rem !important;
 }

 .dropdown-item-custom:hover {
     background: rgba(0, 82, 255, 0.1) !important;
     color: white !important;
     padding-left: 2rem !important;
 }

 /* === HEADER ACTIONS === */
 .header-actions {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .search-toggle,
 .theme-toggle {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: #d1d5db;
     width: 44px;
     height: 44px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     backdrop-filter: blur(10px);
 }

 .search-toggle:hover,
 .theme-toggle:hover {
     background: #0052ff;
     border-color: #0052ff;
     color: white;
     transform: scale(1.05);
 }

 .header-cta {
     /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
     background: var(--gradient-primary);
     color: white;
     border: none;
     padding: 0.75rem 1.5rem;
     border-radius: 10px;
     font-weight: 600;
     font-size: 0.9rem;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
 }

 .header-cta:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(102, 126, 234, 0.3);
     color: white;
 }

 .header-cta i {
     margin-left: 0.5rem;
     font-size: 0.8rem;
 }

 /* === MOBILE TOGGLE === */
 .navbar-toggler {
     border: none;
     padding: 8px;
     background: none;
     position: relative;
 }

 .navbar-toggler:focus {
     box-shadow: none;
 }

 .hamburger-line {
     display: block;
     width: 25px;
     height: 2px;
     background: white;
     margin: 4px 0;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: 1px;
 }

 .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(1) {
     transform: rotate(45deg) translate(6px, 6px);
 }

 .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(2) {
     opacity: 0;
 }

 .navbar-toggler[aria-expanded="true"] .hamburger-line:nth-child(3) {
     transform: rotate(-45deg) translate(6px, -6px);
 }

 /* === MOBILE RESPONSIVE === */
 @media (max-width: 991.98px) {
     .navbar-collapse {
         background: rgba(15, 23, 42, 0.98);
         backdrop-filter: blur(20px);
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: 0 0 12px 12px;
         margin-top: 1rem;
         padding: 2rem 1rem;
     }

     .navbar-nav {
         text-align: center;
         gap: 0 !important;
     }

     .navbar-nav .nav-link {
         padding: 1rem 0 !important;
         font-size: 1.1rem;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }

     .header-actions {
         margin-top: 2rem;
         justify-content: center;
         gap: 1rem;
         flex-wrap: wrap;
     }

     .header-actions .search-toggle,
     .header-actions .theme-toggle {
         display: flex !important;
     }
 }

 /* === HERO SLIDER STYLES  === */
 .hero-slider {
     height: 100vh;
     position: relative;
     overflow: hidden;
     background: var(--gradient-dark);
     /* margin-top: 80px; */
     margin-top: 51px;
 }

 .hero-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     background-size: cover;
     background-position: center;
 }

 .hero-slide.active {
     opacity: 1;
 }

 /* Advanced Slide Backgrounds */
 .hero-slide:nth-child(1) {
     background: var(--gradient-dark), var(--gradient-mesh);
     background-blend-mode: overlay;
 }

 .hero-slide:nth-child(2) {
     background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%),
         var(--gradient-mesh);
     background-blend-mode: overlay;
 }

 .hero-slide:nth-child(3) {
     background: linear-gradient(135deg, rgba(51, 65, 85, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%),
         var(--gradient-mesh);
     background-blend-mode: overlay;
 }

 /* Animated Background Elements */
 .bg-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
 }

 .bg-shape {
     position: absolute;
     border-radius: 50%;
     background: linear-gradient(45deg, rgba(0, 82, 255, 0.1), rgba(99, 102, 241, 0.1));
     animation: float-shapes 20s linear infinite;
 }

 .bg-shape:nth-child(1) {
     width: 300px;
     height: 300px;
     top: 10%;
     left: 80%;
     animation-delay: 0s;
 }

 .bg-shape:nth-child(2) {
     width: 200px;
     height: 200px;
     top: 70%;
     left: 10%;
     animation-delay: 7s;
     background: linear-gradient(45deg, rgba(16, 185, 129, 0.1), rgba(8, 145, 178, 0.1));
 }

 .bg-shape:nth-child(3) {
     width: 150px;
     height: 150px;
     top: 30%;
     left: 5%;
     animation-delay: 14s;
     background: linear-gradient(45deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
 }

 @keyframes float-shapes {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
         opacity: 0.3;
     }

     50% {
         transform: translateY(-50px) rotate(180deg);
         opacity: 0.6;
     }
 }

 /* Advanced Particle System */
 .particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
 }

 .particle {
     position: absolute;
     background: var(--primary);
     border-radius: 50%;
     opacity: 0;
     animation: advanced-particles 8s linear infinite;
 }

 .particle:nth-child(odd) {
     background: var(--accent);
     animation-duration: 12s;
 }

 .particle:nth-child(3n) {
     background: var(--secondary);
     animation-duration: 10s;
 }

 @keyframes advanced-particles {
     0% {
         transform: translateY(100vh) rotate(0deg) scale(0);
         opacity: 0;
     }

     10% {
         opacity: 0.8;
         transform: translateY(90vh) rotate(36deg) scale(1);
     }

     90% {
         opacity: 0.8;
         transform: translateY(10vh) rotate(324deg) scale(1);
     }

     100% {
         transform: translateY(-10vh) rotate(360deg) scale(0);
         opacity: 0;
     }
 }

 /* Hero Content Styles */
 .hero-content {
     position: relative;
     z-index: 3;
     color: white;
     padding: 2rem 0;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     padding: 0.5rem 1.2rem;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50px;
     font-size: 0.875rem;
     font-weight: 500;
     margin-bottom: 1.5rem;
     backdrop-filter: blur(10px);
     animation: fadeInUp 1s ease-out 0.2s both;
 }

 .hero-badge i {
     color: var(--accent);
     margin-right: 0.5rem;
 }

 .hero-title {
     /*font-size: clamp(3rem, 8vw, 5rem);*/
     font-size: 50px !important;
     font-weight: 800;
     margin-bottom: 1.5rem;
     background: linear-gradient(135deg, #ffffff 0%, var(--primary-light) 50%, var(--accent) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1.1;
     animation: fadeInUp 1s ease-out 0.4s both;
     position: relative;
 }

 .hero-title::after {
     content: '';
     position: absolute;
     bottom: -10px;
     left: 0;
     width: 60px;
     height: 4px;
     background: var(--gradient-primary);
     border-radius: 2px;
     animation: slideInLeft 1s ease-out 1s both;
 }

 .hero-subtitle {
     font-size: 1.25rem;
     color: var(--gray-300);
     margin-bottom: 2.5rem;
     line-height: 1.7;
     font-weight: 400;
     max-width: 600px;
     animation: fadeInUp 1s ease-out 0.6s both;
 }

 .hero-stats {
     display: flex;
     gap: 3rem;
     margin-bottom: 2.5rem;
     flex-wrap: wrap;
     animation: fadeInUp 1s ease-out 0.8s both;
 }

 .hero-stat {
     text-align: center;
 }

 .hero-stat-number {
     display: block;
     font-size: 2rem;
     font-weight: 700;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1;
 }

 .hero-stat-label {
     font-size: 0.875rem;
     color: var(--gray-400);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-top: 0.5rem;
 }

 .hero-features {
     display: flex;
     gap: 2rem;
     margin-bottom: 3rem;
     flex-wrap: wrap;
     animation: fadeInUp 1s ease-out 1s both;
 }

 .hero-feature {
     display: flex;
     align-items: center;
     color: var(--gray-300);
     font-size: 1rem;
     font-weight: 500;
 }

 .hero-feature i {
     color: var(--accent);
     margin-right: 0.8rem;
     font-size: 1.2rem;
 }

 .hero-buttons {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
     animation: fadeInUp 1s ease-out 1.2s both;
 }

 .btn-custom {
     padding: 0.875rem 2rem;
     border-radius: 12px;
     font-weight: 600;
     text-transform: none;
     letter-spacing: 0.5px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     border: none;
     cursor: pointer;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 160px;
 }

 .btn-primary-custom {
     background: var(--gradient-primary);
     color: white;
     box-shadow: var(--shadow-lg);
 }

 .btn-primary-custom:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-xl), var(--shadow-glow);
     color: white;
 }

 .btn-secondary-custom {
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: white;
     backdrop-filter: blur(10px);
 }

 .btn-secondary-custom:hover {
     background: rgba(255, 255, 255, 0.15);
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
     color: white;
 }

 /* Advanced Visual Elements */
 .hero-visual {
     position: relative;
     z-index: 2;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
 }

 .visual-container {
     position: relative;
     width: 600px;
     height: 500px;
     perspective: 1200px;
 }

 .visual-card {
     position: absolute;
     width: 280px;
     height: 200px;
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(20px);
     border-radius: 16px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: white;
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: var(--shadow-xl);
     cursor: pointer;
 }

 .visual-card:nth-child(1) {
     top: 50px;
     left: 50px;
     transform: rotateY(-20deg) rotateX(15deg);
     z-index: 3;
     animation: cardFloat1 6s ease-in-out infinite;
 }

 .visual-card:nth-child(2) {
     top: 120px;
     right: 30px;
     transform: rotateY(15deg) rotateX(-10deg);
     z-index: 2;
     animation: cardFloat2 6s ease-in-out infinite 2s;
 }

 .visual-card:nth-child(3) {
     bottom: 100px;
     left: 150px;
     transform: rotateY(10deg) rotateX(8deg);
     z-index: 1;
     animation: cardFloat3 6s ease-in-out infinite 4s;
 }

 @keyframes cardFloat1 {

     0%,
     100% {
         transform: rotateY(-20deg) rotateX(15deg) translateY(0px);
     }

     50% {
         transform: rotateY(-20deg) rotateX(15deg) translateY(-20px);
     }
 }

 @keyframes cardFloat2 {

     0%,
     100% {
         transform: rotateY(15deg) rotateX(-10deg) translateY(0px);
     }

     50% {
         transform: rotateY(15deg) rotateX(-10deg) translateY(-15px);
     }
 }

 @keyframes cardFloat3 {

     0%,
     100% {
         transform: rotateY(10deg) rotateX(8deg) translateY(0px);
     }

     50% {
         transform: rotateY(10deg) rotateX(8deg) translateY(-10px);
     }
 }

 .visual-card:hover {
     transform: rotateY(0deg) rotateX(0deg) translateZ(40px) scale(1.05);
     box-shadow: var(--shadow-2xl), 0 0 50px rgba(0, 82, 255, 0.3);
     background: rgba(255, 255, 255, 0.12);
 }

 .visual-card-icon {
     width: 60px;
     height: 60px;
     border-radius: 12px;
     background: var(--gradient-primary);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1rem;
     box-shadow: var(--shadow-md);
 }

 .visual-card-icon i {
     font-size: 1.5rem;
     color: white;
 }

 .visual-card h4 {
     font-size: 1.2rem;
     font-weight: 600;
     margin: 0 0 0.5rem 0;
 }

 .visual-card p {
     font-size: 0.875rem;
     color: var(--gray-400);
     text-align: center;
     margin: 0;
 }

 /* Professional Navigation */
 .slider-nav {
     position: absolute;
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 0.5rem;
     z-index: 10;
     background: rgba(0, 0, 0, 0.2);
     padding: 0.75rem;
     border-radius: 50px;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .nav-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--gray-500);
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
 }

 .nav-dot.active {
     background: var(--primary);
     transform: scale(1.2);
     box-shadow: 0 0 10px var(--primary);
 }

 .nav-dot::before {
     content: '';
     position: absolute;
     top: -4px;
     left: -4px;
     right: -4px;
     bottom: -4px;
     border-radius: 50%;
     background: transparent;
     border: 2px solid transparent;
     transition: all 0.3s ease;
 }

 .nav-dot.active::before {
     border-color: rgba(0, 82, 255, 0.3);
 }

 .slider-arrows {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
 }

 .slider-arrow {
     background: rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: white;
     width: 50px;
     height: 50px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     backdrop-filter: blur(10px);
 }

 .slider-arrow:hover {
     background: var(--primary);
     border-color: var(--primary);
     transform: scale(1.1);
     box-shadow: var(--shadow-lg);
 }

 .slider-arrow.prev {
     left: 30px;
 }

 .slider-arrow.next {
     right: 30px;
 }

 /* === FOOTER STYLES === */
 .main-footer {
     background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
     position: relative;
     overflow: hidden;
 }

 /* Footer Background Effects */
 .footer-bg-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
 }

 .footer-bg-shape {
     position: absolute;
     border-radius: 50%;
     background: linear-gradient(45deg, rgba(0, 82, 255, 0.05), rgba(99, 102, 241, 0.05));
     animation: footerFloat 25s linear infinite;
 }

 .footer-bg-shape:nth-child(1) {
     width: 400px;
     height: 400px;
     top: -200px;
     right: -200px;
     animation-delay: 0s;
 }

 .footer-bg-shape:nth-child(2) {
     width: 300px;
     height: 300px;
     bottom: -150px;
     left: -150px;
     animation-delay: 12s;
     background: linear-gradient(45deg, rgba(16, 185, 129, 0.05), rgba(8, 145, 178, 0.05));
 }

 @keyframes footerFloat {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
         opacity: 0.3;
     }

     50% {
         transform: translateY(-30px) rotate(180deg);
         opacity: 0.6;
     }
 }

 /* Footer Content */
 .footer-content {
     position: relative;
     z-index: 2;
     padding: 4rem 0 2rem;
 }

 .footer-top {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding-bottom: 3rem;
     margin-bottom: 2rem;
 }

 /* Footer Brand */
 .footer-brand {
     margin-bottom: 2rem;
 }

 .footer-logo {
     display: flex;
     align-items: center;
     margin-bottom: 1.5rem;
     text-decoration: none;
     color: white;
 }

 .footer-logo:hover {
     color: var(--primary-light);
 }

 .footer-logo-icon {
     width: 50px;
     height: 50px;
     background: var(--gradient-primary);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 1rem;
     box-shadow: var(--shadow-md);
 }

 .footer-logo-icon i {
     font-size: 1.5rem;
     color: white;
 }

 .footer-brand-text {
     font-size: 1.75rem;
     font-weight: 700;
     margin: 0;
 }

 .footer-description {
     color: var(--gray-400);
     line-height: 1.7;
     margin-bottom: 2rem;
     max-width: 400px;
 }

 /* Social Links */
 .footer-social {
     display: flex;
     gap: 1rem;
 }

 .social-link {
     width: 44px;
     height: 44px;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--gray-400);
     text-decoration: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .social-link:hover {
     background: var(--primary);
     border-color: var(--primary);
     color: white;
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }

 /* Footer Columns */
 .footer-column {
     margin-bottom: 2rem;
 }

 .footer-column h5 {
     font-size: 1.1rem;
     font-weight: 600;
     margin-bottom: 1.5rem;
     color: white;
     position: relative;
 }

 .footer-column h5::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 30px;
     height: 2px;
     background: var(--gradient-primary);
     border-radius: 1px;
 }

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

 .footer-links li {
     margin-bottom: 0.75rem;
 }

 .footer-links a {
     color: var(--gray-400);
     text-decoration: none;
     font-size: 0.95rem;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     padding: 0.25rem 0;
 }

 .footer-links a:hover {
     color: var(--primary-light);
     padding-left: 0.5rem;
 }

 .footer-links a i {
     margin-right: 0.5rem;
     font-size: 0.85rem;
     opacity: 0.7;
 }

 /* Newsletter Signup */
 .newsletter-form {
     display: flex;
     gap: 0.75rem;
     margin-top: 1rem;
 }

 .newsletter-input {
     flex: 1;
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     padding: 0.875rem 1rem;
     color: white;
     font-size: 0.9rem;
     transition: all 0.3s ease;
 }

 .newsletter-input::placeholder {
     color: var(--gray-500);
 }

 .newsletter-input:focus {
     outline: none;
     border-color: var(--primary);
     background: rgba(255, 255, 255, 0.08);
     box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.1);
 }

 .newsletter-btn {
     background: var(--gradient-primary);
     border: none;
     border-radius: 10px;
     padding: 0.875rem 1.5rem;
     color: white;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     white-space: nowrap;
 }

 .newsletter-btn:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-lg);
 }

 /* Contact Info */
 .contact-info {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .contact-info li {
     display: flex;
     align-items: flex-start;
     margin-bottom: 1rem;
     color: var(--gray-400);
 }

 .contact-info li i {
     color: var(--primary);
     margin-right: 0.75rem;
     margin-top: 0.25rem;
     font-size: 1rem;
 }

 .contact-info li strong {
     color: white;
     display: block;
     margin-bottom: 0.25rem;
 }

 /* Footer Bottom */
 .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }

 .footer-copyright {
     color: var(--gray-500);
     font-size: 0.9rem;
 }

 .footer-links-bottom {
     display: flex;
     gap: 2rem;
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .footer-links-bottom a {
     color: var(--gray-500);
     text-decoration: none;
     font-size: 0.9rem;
     transition: all 0.3s ease;
 }

 .footer-links-bottom a:hover {
     color: var(--primary-light);
 }

 /* Scroll to Top Button */
 .scroll-to-top {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 50px;
     height: 50px;
     background: var(--gradient-primary);
     border: none;
     border-radius: 12px;
     color: white;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: var(--shadow-lg);
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     z-index: 1000;
 }

 .scroll-to-top.visible {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .scroll-to-top:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-xl), var(--shadow-glow);
 }

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

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

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

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

 /* === RESPONSIVE DESIGN === */

 /* Extra Large screens */
 @media (min-width: 1400px) {
     .hero-content {
         padding: 3rem 0;
     }

     .visual-container {
         width: 750px;
         height: 600px;
     }

     .visual-card {
         width: 340px;
         height: 240px;
     }

     .visual-card-icon {
         width: 70px;
         height: 70px;
     }

     .visual-card h4 {
         font-size: 1.4rem;
     }

     .hero-title {
         font-size: clamp(3.5rem, 6vw, 5.5rem);
     }
 }

 /* Large screens */
 @media (min-width: 1200px) and (max-width: 1399px) {
     .visual-container {
         width: 650px;
         height: 520px;
     }

     .visual-card {
         width: 300px;
         height: 210px;
     }

     .hero-title {
         font-size: clamp(3rem, 5vw, 4.5rem);
     }
 }

 /* Desktop/Laptop styles */
 @media (max-width: 1199px) and (min-width: 992px) {
     .hero-content {
         padding: 2.5rem 0;
     }

     .hero-title {
         font-size: clamp(2.5rem, 5vw, 3.8rem);
     }

     .visual-container {
         width: 550px;
         height: 450px;
     }

     .visual-card {
         width: 260px;
         height: 190px;
     }

     .visual-card h4 {
         font-size: 1.1rem;
     }

     .visual-card p {
         font-size: 0.8rem;
     }
 }

 /* Tablet Portrait & Large Mobile styles */
 @media (max-width: 991px) {

     /* Header adjustments */
     .header-nav {
         display: none;
     }

     .mobile-menu-toggle {
         display: flex;
     }

     .header-actions .search-toggle,
     .header-actions .theme-toggle {
         display: none;
     }

     /* Hero adjustments - MAJOR FIXES HERE */
     .hero-slider {
         margin-top: 70px;
         height: 100vh;
         min-height: 600px;
     }

     .hero-slide {
         height: 100vh;
         min-height: 600px;
         display: flex;
         align-items: center;
     }

     .hero-slide .row {
         min-height: auto;
         align-items: center;
         flex-direction: column-reverse;
     }

     .hero-content {
         text-align: center;
         padding: 2rem 0;
         order: 2;
     }

     .hero-visual {
         order: 1;
         margin-bottom: 1rem;
         height: 300px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .hero-title {
         font-size: clamp(2.2rem, 6vw, 3.2rem);
         margin-bottom: 1.25rem;
         line-height: 1.2;
     }

     .hero-subtitle {
         font-size: clamp(1rem, 3vw, 1.15rem);
         margin-bottom: 1.5rem;
         max-width: 100%;
         line-height: 1.5;
     }

     .hero-stats {
         gap: 2rem;
         justify-content: center;
         margin-bottom: 1.5rem;
         flex-wrap: wrap;
     }

     .hero-features {
         gap: 1.5rem;
         justify-content: center;
         margin-bottom: 2rem;
         flex-wrap: wrap;
     }

     .hero-buttons {
         justify-content: center;
         gap: 1rem;
         flex-wrap: wrap;
     }

     .visual-container {
         width: 100%;
         max-width: 450px;
         height: 280px;
         margin: 0 auto;
     }

     .visual-card {
         width: 200px;
         height: 140px;
     }

     .visual-card:nth-child(1) {
         top: 10px;
         left: 10px;
         transform: rotateY(-15deg) rotateX(10deg);
     }

     .visual-card:nth-child(2) {
         top: 50px;
         right: 10px;
         transform: rotateY(10deg) rotateX(-8deg);
     }

     .visual-card:nth-child(3) {
         bottom: 30px;
         left: 50%;
         transform: translateX(-50%) rotateY(5deg) rotateX(5deg);
     }

     .slider-nav {
         bottom: 20px;
     }

     /* Footer adjustments */
     .footer-content {
         padding: 3rem 0 1.5rem;
     }

     .footer-bottom {
         flex-direction: column;
         text-align: center;
     }

     .footer-links-bottom {
         justify-content: center;
     }
 }

 /* Mobile Landscape & Medium Tablets */
 @media (max-width: 768px) {

     /* Header mobile */
     .header-container {
         padding: 0.75rem 0;
     }

     .header-logo {
         font-size: 1.3rem;
     }

     .logo-icon {
         width: 35px;
         height: 35px;
         margin-right: 0.5rem;
     }

     .header-cta {
         padding: 0.6rem 1.2rem;
         font-size: 0.85rem;
     }

     /* Hero mobile - MAJOR FIXES HERE */
     .hero-slider {
         margin-top: 65px;
         height: 100vh;
         min-height: 580px;
     }

     .hero-slide {
         height: 100vh;
         min-height: 580px;
         padding: 1rem 0;
     }

     .hero-slide .row {
         height: 100%;
         flex-direction: column-reverse;
         justify-content: center;
     }

     .hero-content {
         padding: 1.5rem 0;
         flex: 0 0 auto;
     }

     .hero-visual {
         flex: 0 0 auto;
         height: 250px;
         margin-bottom: 1rem;
     }

     .hero-title {
         font-size: clamp(1.8rem, 7vw, 2.8rem);
         margin-bottom: 1rem;
         line-height: 1.1;
     }

     .hero-subtitle {
         font-size: clamp(0.9rem, 4vw, 1.05rem);
         margin-bottom: 1.25rem;
         line-height: 1.4;
     }

     .hero-badge {
         font-size: 0.8rem;
         padding: 0.4rem 1rem;
         margin-bottom: 1rem;
     }

     .hero-stats {
         gap: 1.5rem;
         margin-bottom: 1.25rem;
         justify-content: space-around;
     }

     .hero-stat-number {
         font-size: 1.6rem;
     }

     .hero-stat-label {
         font-size: 0.75rem;
     }

     .hero-features {
         gap: 1rem;
         margin-bottom: 1.5rem;
         justify-content: center;
     }

     .hero-feature {
         font-size: 0.9rem;
     }

     .hero-buttons {
         gap: 0.75rem;
         justify-content: center;
     }

     .btn-custom {
         min-width: 140px;
         padding: 0.75rem 1.25rem;
         font-size: 0.85rem;
     }

     .visual-container {
         width: 100%;
         max-width: 350px;
         height: 220px;
     }

     .visual-card {
         width: 160px;
         height: 115px;
     }

     .visual-card:nth-child(1) {
         top: 5px;
         left: 5px;
     }

     .visual-card:nth-child(2) {
         top: 35px;
         right: 5px;
     }

     .visual-card:nth-child(3) {
         bottom: 20px;
         left: 50%;
         transform: translateX(-50%) rotateY(3deg) rotateX(3deg);
     }

     .visual-card-icon {
         width: 45px;
         height: 45px;
         margin-bottom: 0.5rem;
     }

     .visual-card h4 {
         font-size: 0.9rem;
         margin-bottom: 0.25rem;
     }

     .visual-card p {
         font-size: 0.75rem;
     }

     .slider-arrow {
         width: 40px;
         height: 40px;
         font-size: 0.9rem;
     }

     .slider-arrow.prev {
         left: 15px;
     }

     .slider-arrow.next {
         right: 15px;
     }

     .nav-dot {
         width: 8px;
         height: 8px;
     }

     /* Footer mobile */
     .footer-brand {
         text-align: center;
     }

     .footer-description {
         text-align: center;
         margin-left: auto;
         margin-right: auto;
     }

     .footer-social {
         justify-content: center;
     }

     .newsletter-form {
         flex-direction: column;
     }

     .newsletter-btn {
         width: 100%;
     }

     .scroll-to-top {
         bottom: 20px;
         right: 20px;
         width: 45px;
         height: 45px;
     }
 }

 /* Small Mobile Portrait - MAJOR FIXES HERE */
 @media (max-width: 576px) {
     .hero-slider {
         height: 100vh;
         min-height: 550px;
     }

     .hero-slide {
         height: 100vh;
         min-height: 550px;
         padding: 0.5rem 0;
     }

     .hero-content {
         padding: 1rem 0;
     }

     .hero-visual {
         height: 200px;
         margin-bottom: 0.5rem;
     }

     .hero-title {
         font-size: clamp(1.6rem, 8vw, 2.4rem);
         line-height: 1.1;
         margin-bottom: 0.75rem;
     }

     .hero-subtitle {
         font-size: clamp(0.85rem, 4.5vw, 0.95rem);
         margin-bottom: 1rem;
         line-height: 1.3;
     }

     .hero-badge {
         font-size: 0.75rem;
         padding: 0.35rem 0.8rem;
         margin-bottom: 0.75rem;
     }

     .hero-stats {
         gap: 1rem;
         flex-wrap: wrap;
         justify-content: space-around;
         margin-bottom: 1rem;
     }

     .hero-stat {
         flex: 0 0 auto;
         min-width: 70px;
     }

     .hero-stat-number {
         font-size: 1.4rem;
     }

     .hero-stat-label {
         font-size: 0.7rem;
     }

     .hero-features {
         gap: 0.75rem;
         margin-bottom: 1.25rem;
         flex-direction: column;
         align-items: center;
     }

     .hero-feature {
         font-size: 0.8rem;
     }

     .hero-buttons {
         flex-direction: column;
         align-items: stretch;
         gap: 0.5rem;
         max-width: 280px;
         margin: 0 auto;
     }

     .btn-custom {
         width: 100%;
         min-width: auto;
         padding: 0.7rem 1rem;
         font-size: 0.8rem;
     }

     .visual-container {
         width: 100%;
         max-width: 280px;
         height: 180px;
         margin: 0 auto;
     }

     .visual-card {
         width: 130px;
         height: 90px;
     }

     .visual-card:nth-child(1) {
         top: 5px;
         left: 5px;
     }

     .visual-card:nth-child(2) {
         top: 25px;
         right: 5px;
     }

     .visual-card:nth-child(3) {
         bottom: 15px;
         left: 50%;
         transform: translateX(-50%) rotateY(2deg) rotateX(2deg);
     }

     .visual-card-icon {
         width: 35px;
         height: 35px;
         margin-bottom: 0.25rem;
     }

     .visual-card-icon i {
         font-size: 1rem;
     }

     .visual-card h4 {
         font-size: 0.8rem;
         margin-bottom: 0.125rem;
     }

     .visual-card p {
         font-size: 0.65rem;
     }

     .slider-arrow {
         width: 35px;
         height: 35px;
         font-size: 0.8rem;
     }

     .slider-arrow.prev {
         left: 10px;
     }

     .slider-arrow.next {
         right: 10px;
     }

     /* Footer small mobile */
     .footer-links-bottom {
         flex-direction: column;
         gap: 1rem;
     }
 }

 /* Extra Small Mobile - MAJOR FIXES HERE */
 @media (max-width: 480px) {
     .hero-slider {
         height: 100vh;
         min-height: 500px;
     }

     .hero-slide {
         height: 100vh;
         min-height: 500px;
     }

     .hero-visual {
         height: 160px;
     }

     .hero-title {
         font-size: clamp(1.4rem, 9vw, 2rem);
         margin-bottom: 0.5rem;
     }

     .hero-subtitle {
         font-size: clamp(0.8rem, 5vw, 0.9rem);
         margin-bottom: 0.75rem;
     }

     .hero-badge {
         font-size: 0.7rem;
         padding: 0.3rem 0.7rem;
         margin-bottom: 0.5rem;
     }

     .hero-stats {
         gap: 0.75rem;
         margin-bottom: 0.75rem;
     }

     .hero-stat-number {
         font-size: 1.2rem;
     }

     .hero-stat-label {
         font-size: 0.65rem;
     }

     .hero-features {
         gap: 0.5rem;
         margin-bottom: 1rem;
     }

     .hero-feature {
         font-size: 0.75rem;
     }

     .visual-container {
         max-width: 240px;
         height: 140px;
     }

     .visual-card {
         width: 150px;
         height: 110px;
     }

     .visual-card-icon {
         width: 30px;
         height: 30px;
     }

     .visual-card-icon i {
         font-size: 0.9rem;
     }

     .visual-card h4 {
         font-size: 0.7rem;
     }

     .visual-card p {
         font-size: 0.6rem;
     }
 }

 /* Ultra Small Screens - MAJOR FIXES HERE */
 @media (max-width: 360px) {
     .hero-slider {
         height: 100vh;
         min-height: 480px;
     }

     .hero-slide {
         height: 100vh;
         min-height: 480px;
     }

     .hero-content {
         padding: 0.75rem 0;
     }

     .hero-visual {
         height: 120px;
     }

     .hero-title {
         font-size: 1.3rem;
         margin-bottom: 0.5rem;
     }

     .hero-subtitle {
         font-size: 0.75rem;
         margin-bottom: 0.75rem;
     }

     .hero-stats {
         flex-direction: column;
         gap: 0.5rem;
         align-items: center;
         margin-bottom: 0.75rem;
     }

     .hero-stat-number {
         font-size: 1.1rem;
     }

     .visual-container {
         max-width: 200px;
         height: 100px;
     }

     .visual-card {
         width: 90px;
         height: 60px;
     }

     .visual-card-icon {
         width: 25px;
         height: 25px;
         margin-bottom: 0.125rem;
     }

     .visual-card h4 {
         font-size: 0.65rem;
         margin-bottom: 0.05rem;
     }

     .visual-card p {
         font-size: 0.55rem;
     }

     .btn-custom {
         padding: 0.6rem 0.8rem;
         font-size: 0.75rem;
     }
 }

 /* Landscape orientation fixes for mobile */
 @media (max-height: 600px) and (orientation: landscape) {
     .hero-slider {
         height: 100vh;
         min-height: 100vh;
     }

     .hero-slide {
         height: 100vh;
         min-height: 100vh;
     }

     .hero-slide .row {
         flex-direction: row;
         align-items: center;
     }

     .hero-content {
         padding: 1rem 0;
         order: 1;
         text-align: left;
     }

     .hero-visual {
         order: 2;
         height: auto;
         margin-bottom: 0;
     }

     .hero-title {
         font-size: clamp(1.5rem, 5vw, 2.2rem);
         margin-bottom: 0.5rem;
     }

     .hero-subtitle {
         font-size: clamp(0.8rem, 2.5vw, 0.95rem);
         margin-bottom: 0.75rem;
     }

     .hero-stats {
         gap: 1rem;
         margin-bottom: 0.75rem;
     }

     .hero-features {
         gap: 0.75rem;
         margin-bottom: 1rem;
         justify-content: flex-start;
     }

     .hero-buttons {
         justify-content: flex-start;
         flex-direction: row;
     }

     .visual-container {
         height: 200px;
         max-width: 300px;
     }

     .visual-card {
         width: 120px;
         height: 80px;
     }
 }

 /* Very short screens */
 @media (max-height: 500px) {
     .hero-slider {
         height: auto;
         min-height: 100vh;
     }

     .hero-slide {
         height: auto;
         min-height: 100vh;
         padding: 1rem 0;
     }

     .hero-content {
         padding: 0.5rem 0;
     }

     .hero-visual {
         height: 150px;
     }

     .visual-container {
         height: 120px;
     }
 }

 /* === ABOUT SECTION STYLES === */
 .about-section {
     padding: 100px 0;
     position: relative;
     background: var(--gradient-dark);
     overflow: hidden;
 }

 .about-section .bg-shapes {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
 }

 .about-section .bg-shape {
     position: absolute;
     border-radius: 50%;
     background: linear-gradient(45deg, rgba(0, 82, 255, 0.08), rgba(99, 102, 241, 0.08));
     animation: float-shapes 25s linear infinite;
 }

 .about-section .bg-shape:nth-child(1) {
     width: 400px;
     height: 400px;
     top: 20%;
     right: -100px;
     animation-delay: 0s;
 }

 .about-section .bg-shape:nth-child(2) {
     width: 250px;
     height: 250px;
     bottom: 10%;
     left: -50px;
     animation-delay: 12s;
     background: linear-gradient(45deg, rgba(16, 185, 129, 0.08), rgba(8, 145, 178, 0.08));
 }

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

 /* Section Header */
 .section-header {
     margin-bottom: 80px;
 }

 .section-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: linear-gradient(135deg, rgba(0, 82, 255, 0.1), rgba(99, 102, 241, 0.1));
     border: 1px solid rgba(0, 82, 255, 0.2);
     padding: 8px 20px;
     border-radius: 50px;
     font-size: 14px;
     font-weight: 500;
     color: var(--primary-light);
     margin-bottom: 24px;
     backdrop-filter: blur(10px);
 }

 .section-badge i {
     color: var(--accent);
 }

 .section-title {
     font-size: 2.5rem;
     font-weight: 700;
     background: linear-gradient(135deg, #ffffff 0%, var(--gray-300) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1.2;
     margin-bottom: 24px;
 }

 .section-subtitle {
     font-size: 1.25rem;
     color: var(--gray-300);
     line-height: 1.6;
     max-width: 800px;
     margin: 0 auto;
 }

 /* About Content */
 .about-content {
     padding-right: 40px;
 }

 .about-title {
     font-size: 2.5rem;
     font-weight: 700;
     color: white;
     margin-bottom: 24px;
     line-height: 1.3;
 }

 .about-description {
     font-size: 1.125rem;
     color: var(--gray-300);
     line-height: 1.7;
     margin-bottom: 40px;
 }

 .about-features {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .about-feature {
     display: flex;
     align-items: flex-start;
     gap: 20px;
 }

 .feature-icon {
     width: 60px;
     height: 60px;
     background: var(--gradient-primary);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     box-shadow: var(--shadow-lg);
 }

 .feature-icon i {
     font-size: 24px;
     color: white;
 }

 .feature-content h4 {
     font-size: 1.25rem;
     font-weight: 600;
     color: white;
     margin-bottom: 8px;
 }

 .feature-content p {
     color: var(--gray-300);
     line-height: 1.6;
     margin: 0;
 }

 /* Visual Stats Grid */
 .about-visual {
     padding-left: 40px;
 }

 .visual-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
 }

 .visual-stat {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 40px 30px;
     text-align: center;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .visual-stat::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--gradient-primary);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .visual-stat:hover::before {
     transform: scaleX(1);
 }

 .visual-stat:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-2xl);
     border-color: rgba(0, 82, 255, 0.3);
 }

 .stat-icon {
     width: 80px;
     height: 80px;
     background: var(--gradient-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     box-shadow: var(--shadow-lg);
 }

 .stat-icon i {
     font-size: 32px;
     color: white;
 }

 .stat-number {
     font-size: 3rem;
     font-weight: 800;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 8px;
 }

 .stat-label {
     font-size: 1rem;
     color: var(--gray-400);
     font-weight: 500;
 }

 /* Benefits Grid */
 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
     margin-top: 60px;
 }

 .benefit-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 40px 30px;
     text-align: center;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .benefit-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--gradient-secondary);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .benefit-card:hover::before {
     transform: scaleX(1);
 }

 .benefit-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-2xl);
     border-color: rgba(99, 102, 241, 0.3);
 }

 .benefit-icon {
     width: 70px;
     height: 70px;
     background: var(--gradient-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 24px;
     box-shadow: var(--shadow-lg);
 }

 .benefit-icon i {
     font-size: 28px;
     color: white;
 }

 .benefit-card h4 {
     font-size: 1.25rem;
     font-weight: 600;
     color: white;
     margin-bottom: 16px;
 }

 .benefit-card p {
     color: var(--gray-300);
     line-height: 1.6;
     margin: 0;
 }

 /* Responsive Design */
 @media (max-width: 992px) {
     .section-title {
         font-size: 2.5rem;
     }

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

     .about-content,
     .about-visual {
         padding-left: 0;
         padding-right: 0;
         margin-bottom: 60px;
     }

     .visual-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
     }

     .benefits-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
     }
 }

 @media (max-width: 768px) {
     .about-section {
         padding: 60px 0;
     }

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

     .about-title {
         font-size: 1.75rem;
     }

     .visual-grid,
     .benefits-grid {
         grid-template-columns: 1fr;
     }

     .about-feature {
         flex-direction: column;
         text-align: center;
         gap: 15px;
     }

     .feature-icon {
         margin: 0 auto;
     }
 }

 /* === PROCESS SECTION STYLES === */
 .process-section {
     padding: 100px 0;
     position: relative;
     background: var(--gradient-dark);
     overflow: hidden;
 }

 .process-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 30px;
     text-align: center;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     animation: fadeInUp 1s ease-out 0.2s both;
 }

 .process-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--gradient-primary);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .process-card:hover::before {
     transform: scaleX(1);
 }

 .process-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-2xl);
     border-color: rgba(0, 82, 255, 0.3);
 }

 .process-icon {
     width: 70px;
     height: 70px;
     background: var(--gradient-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     box-shadow: var(--shadow-lg);
 }

 .process-icon i {
     font-size: 28px;
     color: white;
 }

 .process-card h4 {
     font-size: 1.25rem;
     font-weight: 600;
     color: white;
     margin-bottom: 16px;
 }

 .process-card p {
     color: var(--gray-300);
     line-height: 1.6;
     margin: 0;
 }

 /* === COST SECTION STYLES === */
 .cost-section {
     padding: 100px 0;
     position: relative;
     background: var(--gradient-dark);
     overflow: hidden;
 }

 .cost-content {
     padding-right: 40px;
 }

 .cost-title {
     font-size: 2.5rem;
     font-weight: 700;
     color: white;
     margin-bottom: 24px;
     line-height: 1.3;
 }

 .cost-description {
     font-size: 1.125rem;
     color: var(--gray-300);
     line-height: 1.7;
     margin-bottom: 40px;
 }

 .cost-features {
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin-bottom: 40px;
 }

 .cost-feature {
     display: flex;
     align-items: center;
     color: var(--gray-300);
     font-size: 1rem;
     font-weight: 500;
 }

 .cost-feature i {
     color: var(--accent);
     margin-right: 0.8rem;
     font-size: 1.2rem;
 }

 .cost-buttons {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
 }

 /* === TASMANIA SECTION STYLES === */
 .tasmania-section {
     padding: 100px 0;
     position: relative;
     background: var(--gradient-dark);
     overflow: hidden;
 }

 .tasmania-content {
     padding-right: 40px;
 }

 .tasmania-title {
     font-size: 2.5rem;
     font-weight: 700;
     color: white;
     margin-bottom: 24px;
     line-height: 1.3;
 }

 .tasmania-description {
     font-size: 1.125rem;
     color: var(--gray-300);
     line-height: 1.7;
     margin-bottom: 40px;
 }

 .tasmania-features {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .tasmania-feature {
     display: flex;
     align-items: center;
     color: var(--gray-300);
     font-size: 1rem;
     font-weight: 500;
 }

 .tasmania-feature i {
     color: var(--accent);
     margin-right: 0.8rem;
     font-size: 1.2rem;
 }

 /* Reuse existing visual-container and visual-card styles from hero section */
 .tasmania-visual .visual-container {
     width: 100%;
     max-width: 600px;
     height: 500px;
     perspective: 1200px;
     margin: 0 auto;
 }

 /* === TESTIMONIALS SECTION STYLES === */
 .testimonials-section {
     padding: 100px 0;
     position: relative;
     background: var(--gradient-dark);
     overflow: hidden;
 }

 .testimonial-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 30px;
     text-align: left;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     animation: fadeInUp 1s ease-out 0.2s both;
 }

 .testimonial-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--gradient-secondary);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .testimonial-card:hover::before {
     transform: scaleX(1);
 }

 .testimonial-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-2xl);
     border-color: rgba(99, 102, 241, 0.3);
 }

 .testimonial-icon {
     width: 50px;
     height: 50px;
     background: var(--gradient-secondary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     box-shadow: var(--shadow-lg);
 }

 .testimonial-icon i {
     font-size: 24px;
     color: white;
 }

 .testimonial-text {
     font-size: 1.125rem;
     color: var(--gray-300);
     line-height: 1.7;
     margin-bottom: 20px;
     font-style: italic;
 }

 .testimonial-author h5 {
     font-size: 1.25rem;
     font-weight: 600;
     color: white;
     margin-bottom: 8px;
 }

 .testimonial-author p {
     font-size: 0.9rem;
     color: var(--gray-400);
     margin: 0;
 }

 /* === CTA SECTION STYLES === */
 .cta-section {
     padding: 80px 0;
     position: relative;
     background: var(--gradient-dark);
     overflow: hidden;
 }

 .cta-buttons {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
     justify-content: center;
     animation: fadeInUp 1s ease-out 1.2s both;
 }

 /* === RESPONSIVE DESIGN === */
 @media (max-width: 992px) {

     .process-section,
     .cost-section,
     .tasmania-section,
     .testimonials-section,
     .cta-section {
         padding: 60px 0;
     }

     .cost-content,
     .tasmania-content {
         padding-right: 0;
         margin-bottom: 40px;
     }

     .cost-title,
     .tasmania-title {
         font-size: 2rem;
     }

     .cost-description,
     .tasmania-description {
         font-size: 1rem;
     }

     .tasmania-visual .visual-container {
         max-width: 450px;
         height: 280px;
     }
 }

 @media (max-width: 768px) {

     .process-section,
     .cost-section,
     .tasmania-section,
     .testimonials-section,
     .cta-section {
         padding: 40px 0;
     }

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

     .section-subtitle {
         font-size: 1rem;
     }

     .cost-title,
     .tasmania-title {
         font-size: 1.75rem;
     }

     .cost-description,
     .tasmania-description {
         font-size: 0.9rem;
     }

     .process-card,
     .testimonial-card {
         padding: 20px;
     }

     .process-icon,
     .testimonial-icon {
         width: 50px;
         height: 50px;
     }

     .process-icon i,
     .testimonial-icon i {
         font-size: 20px;
     }

     .process-card h4,
     .testimonial-author h5 {
         font-size: 1.1rem;
     }

     .process-card p,
     .testimonial-text {
         font-size: 0.9rem;
     }

     .tasmania-visual .visual-container {
         max-width: 350px;
         height: 220px;
     }

     .tasmania-visual .visual-card {
         width: 160px;
         height: 143px;
     }

     .tasmania-visual .visual-card-icon {
         width: 45px;
         height: 45px;
         margin-bottom: 0.5rem;
     }

     .tasmania-visual .visual-card h4 {
         font-size: 0.9rem;
     }

     .tasmania-visual .visual-card p {
         font-size: 0.75rem;
     }
 }

 @media (max-width: 576px) {

     .process-section,
     .cost-section,
     .tasmania-section,
     .testimonials-section,
     .cta-section {
         padding: 30px 0;
     }

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

     .section-subtitle {
         font-size: 0.9rem;
     }

     .cost-title,
     .tasmania-title {
         font-size: 1.5rem;
     }

     .cost-description,
     .tasmania-description {
         font-size: 0.85rem;
     }

     .process-card h4,
     .testimonial-author h5 {
         font-size: 1rem;
     }

     .process-card p,
     .testimonial-text {
         font-size: 0.8rem;
     }

     .tasmania-visual .visual-container {
         max-width: 280px;
         height: 180px;
     }

     .tasmania-visual .visual-card {
         width: 180px;
         height: 147px;
     }

     .tasmania-visual .visual-card-icon {
         width: 35px;
         height: 35px;
     }

     .tasmania-visual .visual-card h4 {
         font-size: 0.8rem;
     }

     .tasmania-visual .visual-card p {
         font-size: 0.65rem;
     }

     .cta-buttons {
         flex-direction: column;
         align-items: stretch;
         max-width: 280px;
         margin: 0 auto;
     }

     .btn-custom {
         width: 100%;
         min-width: auto;
         padding: 0.7rem 1rem;
         font-size: 0.8rem;
     }
 }

 @media (max-width: 360px) {
     .section-title {
         font-size: 1.4rem;
     }

     .section-subtitle {
         font-size: 0.8rem;
     }

     .cost-title,
     .tasmania-title {
         font-size: 1.3rem;
     }

     .cost-description,
     .tasmania-description {
         font-size: 0.75rem;
     }

     .tasmania-visual .visual-container {
         max-width: 200px;
         height: 100px;
     }

     .tasmania-visual .visual-card {
         width: 90px;
         height: 60px;
     }

     .tasmania-visual .visual-card-icon {
         width: 25px;
         height: 25px;
     }

     .tasmania-visual .visual-card h4 {
         font-size: 0.65rem;
     }

     .tasmania-visual .visual-card p {
         font-size: 0.55rem;
     }
 }


 /* 06-08-2025 */
 .web-designer-section {
     padding: 100px 0;
     position: relative;
     background: var(--gradient-dark);
     overflow: hidden;
 }

 .web-designer-section .section-header {
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }

 .web-designer-section .section-badge {
     background: var(--gradient-primary);
     color: white;
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 0.9rem;
     display: inline-flex;
     align-items: center;
     margin-bottom: 16px;
 }

 .web-designer-section .section-badge i {
     margin-right: 8px;
 }

 .web-designer-section .section-title {
     font-size: 2.5rem;
     font-weight: 700;
     color: white;
     margin-bottom: 16px;
 }

 .web-designer-section .section-title span {
     font-size: 1.5rem;
     color: var(--gray-300);
 }

 .web-designer-section .section-subtitle {
     font-size: 1.1rem;
     color: var(--gray-300);
     line-height: 1.6;
     margin-bottom: 0;
 }

 .web-designer-section .cta-buttons .btn {
     padding: 12px 24px;
     font-size: 1rem;
     border-radius: 50px;
     transition: all 0.3s ease;
 }

 .web-designer-section .btn-primary-custom {
     background: var(--gradient-primary);
     border: none;
     color: white;
 }

 .web-designer-section .btn-primary-custom:hover {
     background: var(--gradient-primary-dark);
     transform: translateY(-2px);
 }

 /* --------------service section------------- */
 .services-section {
     padding: 100px 0;
     position: relative;
     background: var(--gradient-dark);
     overflow: hidden;
 }

 .services-section .section-header {
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }

 .services-section .section-badge {
     background: var(--gradient-primary);
     color: white;
     padding: 8px 16px;
     border-radius: 20px;
     font-size: 0.9rem;
     display: inline-flex;
     align-items: center;
     margin-bottom: 16px;
 }

 .services-section .section-badge i {
     margin-right: 8px;
 }

 .services-section .section-title {
     font-size: 2.5rem;
     font-weight: 700;
     color: white;
     margin-bottom: 16px;
 }

 .services-section .section-title span {
     font-size: 1.5rem;
     color: var(--gray-300);
 }

 .services-section .section-subtitle {
     font-size: 1.1rem;
     color: var(--gray-300);
     line-height: 1.6;
     margin-bottom: 0;
 }

 .service-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 30px;
     text-align: center;
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .service-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--gradient-primary);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

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

 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-2xl);
     border-color: rgba(0, 82, 255, 0.3);
 }

 .service-icon {
     width: 70px;
     height: 70px;
     background: var(--gradient-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     box-shadow: var(--shadow-lg);
 }

 .service-icon i {
     font-size: 28px;
     color: white;
 }

 .service-card h4 {
     font-size: 1.25rem;
     font-weight: 600;
     color: white;
     margin-bottom: 16px;
 }

 .service-card p {
     color: var(--gray-300);
     line-height: 1.6;
     margin: 0;
 }