:root{
    --primary-color: #3C6E71;
    --secondary-color: #72D1D7;
    --third-color: #213A3C;

    --text-color-w: #fff;
    --neon-text-shadow: 0 0 8px #72D1D7, 0 0 16px #72D1D7, 0 0 24px #72D1D7;

    --primary-button-color: var(--primary-color);
    --button-border-color: linear-gradient(90deg, #5C9397, #3C6E71, #151515);

    --background-color: #151515;
    --background-linear-gradient: linear-gradient(0deg, #213A3C00, #213A3C80, #151515);

    --font-family: 'Poppins', sans-serif;
    --font-size-p: 16px;
}

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.btn {
    --bs-btn-color: var(--primary-color);
    color: var(--text-color-w);
}
.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);;
    --bs-btn-hover-border-color: var(--primary-color);;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color);;
    --bs-btn-active-border-color: var(--primary-color);;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary-color);;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-color);;
    --bs-gradient: none;
}

* {margin: 0; padding: 0; box-sizing: border-box;}
h1,h2,h3,h4,h5,h6,p,span,a,table,th,td,tr,div {font-family: var(--font-family);}
body {background-color: var(--background-color); font-family: var(--font-family); color: var(--text-color-w);}
p,td,nav,button, footer {font-size: var(--font-size-p) !important; color: var(--text-color-w);}
h1 {font-family: var(--font-family); color: var(--text-color-w); font-size: 2.5rem; font-weight: 700;}
h2 {font-family: var(--font-family); color: var(--text-color-w); font-size: 2rem; font-weight: 300;}
span {color: var(--text-color-w); font-weight: 500;}
p,nav {color: var(--text-color-w); font-weight: 300;}
.z-1{z-index: 1;}
.z-2{z-index: 2;}
.z-3{z-index: 3;}
.z-4{z-index: 4;}
.z-5{z-index: 5;}

/* Custom Animations */
@keyframes fadeInUp{
  from {opacity: 0; transform: translateY(30px);}
  to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeInLeft{
  from {opacity: 0; transform: translateX(-30px);}
  to {opacity: 1; transform: translateX(0);}
}
@keyframes fadeInRight{
  from {opacity: 0; transform: translateX(30px);}
  to {opacity: 1; transform: translateX(0);}
}
@keyframes scaleIn{
  from {opacity: 0; transform: scale(0.9);}
  to {opacity: 1; transform: scale(1);}
}
@keyframes float{
  0%, 100% {transform: translateY(0px);}
  50% {transform: translateY(-10px);}
}
@keyframes pulse{
  0%, 100% {opacity: 1;}
  50% {opacity: 0.7;}
}

/* Animation Classes */
.animate-fade-in { animation: fadeInUp 0.8s ease-out forwards;}
.animate-fade-left {animation: fadeInLeft 0.8s ease-out forwards;}
.animate-fade-right {animation: fadeInRight 0.8s ease-out forwards;}
.animate-scale-in {animation: scaleIn 0.6s ease-out forwards;}
.animate-float {animation: float 3s ease-in-out infinite;}
.animate-pulse-slow {animation: pulse 2s ease-in-out infinite;}

/* Hover Effects */
.hover-lift {transition: transform 0.3s ease, box-shadow 0.3s ease;}
.hover-lift:hover {transform: translateY(-5px); box-shadow: 0 20px 40px rgba(60, 110, 113, 0.2);}

/* Gradient Text */
.gradient-text {background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}

/* Custom Scrollbar */
::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track {background: var(--background-color);}
::-webkit-scrollbar-thumb {background: linear-gradient(var(--primary-color), var(--secondary-color)); border-radius: 4px;}
::-webkit-scrollbar-thumb:hover {background: linear-gradient(var(--secondary-color), var(--primary-color));}

/* Loading Animation */
.loading-spinner {width: 40px; height: 40px; border: 4px solid var(--third-color); border-top: 4px solid var(--secondary-color); border-radius: 50%; animation: spin 1s linear infinite;}
@keyframes spin{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

/* Responsive Typography */
@media (max-width: 768px){
    h1 {font-size: 2rem;}
    h2 {font-size: 1.5rem;}
    .container {padding-left: 1rem; padding-right: 1rem;}
}

/* Focus States */
button:focus,input:focus,textarea:focus {outline: 2px solid var(--secondary-color); outline-offset: 2px;}

/* Selection */
::selection {background-color: var(--secondary-color); color: var(--background-color);}

/* Background Elements Container */
.background-elements-container {position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: hidden;}
/* Background Spot Elements */
.background-spot {position: absolute; border-radius: 50%; filter: blur(66.65px); transition: all 8s ease-in-out; will-change: transform, opacity; mix-blend-mode: screen; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}

/* Enhanced floating animation for background spots */
@keyframes background-float{
  0%, 100% {transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.15;}
  25% {transform: translate(20px, -15px) scale(1.1) rotate(90deg); opacity: 0.2;}
  50% {transform: translate(-10px, 25px) scale(0.9) rotate(180deg); opacity: 0.1;}
  75% {transform: translate(15px, -10px) scale(1.05) rotate(270deg); opacity: 0.18;}
}

/* Additional smooth blur effect */
.background-spot::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background: inherit; filter: blur(20px); opacity: 0.5; z-index: -1;}

/* Backdrop Filter Support */
@supports (backdrop-filter: blur(10px)) {.backdrop-blur { -webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}}

/* Nav underline gradient (static, subtle) */
.nav-gradient-line {height: 2px; background: linear-gradient(90deg, rgba(114,209,215,0.2) 0%, #72D1D7 50%, rgba(114,209,215,0.2) 100%); width: 100%; pointer-events: none; z-index: 1; transition: background 0.35s cubic-bezier(.4,0,.2,1);}

/* Animated nav underline indicator */
.nav-underline-indicator {height: 4px; background: linear-gradient(90deg, #72D1D7 0%, #4B8C8A 100%); border-radius: 2px; transition: left 0.3s cubic-bezier(.4,0,.2,1), width 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s; left: 0; width: 0; opacity: 0; z-index: 2; pointer-events: none; position: absolute; -webkit-transition: left 0.3s cubic-bezier(.4,0,.2,1), width 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s; -moz-transition: left 0.3s cubic-bezier(.4,0,.2,1), width 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s; -ms-transition: left 0.3s cubic-bezier(.4,0,.2,1), width 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s; -o-transition: left 0.3s cubic-bezier(.4,0,.2,1), width 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s;}

/* Gradient Border with Pseudo-Element --- */
.btn-outline-primary.gradient-border-pseudo {position: relative; z-index: 1; background: transparent; border: none;}
.btn-outline-primary.gradient-border-pseudo::before {content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; /* border thickness */ background: var(--button-border-color); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; pointer-events: none; box-sizing: border-box; transition: all 0.3s ease;}

/* Neon hover effects for gradient border button */
.btn-outline-primary.gradient-border-pseudo:hover {transform: translateY(-2px); box-shadow: 0 0 10px rgba(114, 209, 215, 0.8), 0 0 20px rgba(114, 209, 215, 0.6), 0 0 30px rgba(114, 209, 215, 0.4), 0 8px 25px rgba(114, 209, 215, 0.3); transition: all 0.3s ease;}
.btn-outline-primary.gradient-border-pseudo:hover::before {padding: 3px; /* thicker border on hover */ background: linear-gradient(90deg, #72D1D7, #5C9397, #3C6E71); box-shadow: 0 0 15px rgba(114, 209, 215, 0.9), 0 0 25px rgba(114, 209, 215, 0.7), 0 0 35px rgba(114, 209, 215, 0.5), inset 0 0 15px rgba(114, 209, 215, 0.3); filter: brightness(1.2) contrast(1.1);}

/* Demo button style */
.btn-demo, .btn-neon {background: #4B8C8A; color: #fff; border: none; border-radius: 2rem; transition: all 0.3s ease; position: relative; overflow: hidden;}

/* Login button with background and neon hover */
.btn.btn-outline-primary.rounded-pill {background: var(--background-color); color: var(--text-color-w); border: 2px solid var(--primary-color); transition: all 0.3s ease;}
.btn.btn-outline-primary.rounded-pill:hover {background: var(--primary-color); color: var(--text-color-w); transform: translateY(-2px); box-shadow: 0 0 10px rgba(114, 209, 215, 0.8), 0 0 20px rgba(114, 209, 215, 0.6), 0 0 30px rgba(114, 209, 215, 0.4), 0 8px 25px rgba(114, 209, 215, 0.3); border-color: var(--secondary-color);}
.btn-demo:hover .btn-neon:hover,.btn-demo:focus .btn-neon:focus {background: #72D1D7 !important; color: #181818; transform: translateY(-2px); box-shadow: 0 0 10px rgba(114, 209, 215, 0.8), 0 0 20px rgba(114, 209, 215, 0.6), 0 0 30px rgba(114, 209, 215, 0.4), 0 8px 25px rgba(114, 209, 215, 0.3);}

/* Neon glow effect for demo button */
.btn-demo::before {content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(114, 209, 215, 0.4), transparent); transition: left 0.5s ease;}
.btn-demo:hover::before {left: 100%;}
header .main-nav-links .nav-link {color: #fff; letter-spacing: 0.01em;}
header .main-nav-links .nav-link:hover{text-shadow: var(--neon-text-shadow);}
header .main-nav-links .nav-link.active,.main-nav-links .nav-link:focus,.main-nav-links .nav-link:hover {color: #72D1D7;}

/* Custom Hamburger Styles */
header .custom-hamburger {width: 44px; height: 44px; background: none; border: none; cursor: pointer; z-index: 1051; position: relative; transition: background 0.2s; padding: 0;}
header .custom-hamburger .bar {display: block; width: 28px; height: 3px; margin: 5px 0; background: var(--secondary-color); border-radius: 2px; transition: all 0.35s cubic-bezier(.4,0,.2,1); position: relative;}
header .custom-hamburger.active .bar:nth-child(1) {transform: translateY(13px) rotate(45deg); -webkit-transform: translateY(13px) rotate(45deg); -moz-transform: translateY(13px) rotate(45deg); -ms-transform: translateY(13px) rotate(45deg); -o-transform: translateY(13px) rotate(45deg);}
header .custom-hamburger.active .bar:nth-child(2) {opacity: 0;}
header .custom-hamburger.active .bar:nth-child(3) {transform: translateY(-13px) rotate(-45deg); -webkit-transform: translateY(-13px) rotate(-45deg); -moz-transform: translateY(-13px) rotate(-45deg); -ms-transform: translateY(-13px) rotate(-45deg); -o-transform: translateY(-13px) rotate(-45deg);}

/* Sidebar Overlay */
header .sidebar-overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(24,24,24,0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1049; opacity: 0; transition: opacity 0.3s; display: none;}
header .sidebar-overlay.active {display: block; opacity: 1;}

/* Mobile Sidebar */
header .mobile-sidebar {position: fixed; top: 0; right: 0; height: 100vh; width: 100vw; max-width: 320px; background: linear-gradient(90deg, #0B171700 0%, #284143 100%); border-image: linear-gradient(180deg, #3C6E7100, #40939880, #72D1D7, #40939880, #3C6E7100) 1; z-index: 1050; transform: translateX(100%); transition: transform 0.35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; padding: 2.2rem 1.5rem 1.5rem 1.5rem;}
header .mobile-sidebar.active {transform: translateX(0);}
header .mobile-sidebar nav {width: 100%; text-align: left;}
header .mobile-sidebar .mobile-nav-links {margin-top: 2rem; text-align: left;}
header .mobile-sidebar .mobile-nav-links li {margin-bottom: 1.1rem; text-align: left;}
header .mobile-sidebar .mobile-nav-links a {text-align: left;}
header .mobile-sidebar .mobile-nav-links a {color: #fff; text-decoration: none; letter-spacing: 0.01em; padding: 0.3rem 0.5rem; border-radius: 8px; display: block; transition: all 0.3s ease; position: relative; overflow: hidden;}
header .mobile-sidebar .mobile-nav-links a {background: rgba(114,209,215,0.08); color: var(--text-color-w); text-shadow: 0 0 8px #72D1D7, 0 0 2px #409398; box-shadow: 0 2px 12px 0 #72D1D744;}
/* Hover and active effects for mobile nav links */
header .mobile-sidebar .mobile-nav-links a:hover {background: rgba(114,209,215,0.15); color: #72D1D7; transform: translateX(5px); box-shadow: 0 0 10px rgba(114, 209, 215, 0.6), 0 0 20px rgba(114, 209, 215, 0.4), 0 2px 12px 0 #72D1D744; text-shadow: 0 0 12px #72D1D7, 0 0 4px #409398;}
header .mobile-sidebar .mobile-nav-links a:active {background: rgba(114,209,215,0.25); transform: translateX(3px) scale(0.98); box-shadow: 0 0 15px rgba(114, 209, 215, 0.8), 0 0 25px rgba(114, 209, 215, 0.6), 0 2px 12px 0 #72D1D744; transition: all 0.1s ease;}
header .mobile-sidebar .mobile-nav-links a.active {background: rgba(114,209,215,0.2); color: #72D1D7; border-left: 3px solid #72D1D7; padding-left: 0.8rem; box-shadow: 0 0 8px rgba(114, 209, 215, 0.5), 0 0 16px rgba(114, 209, 215, 0.3), 0 2px 12px 0 #72D1D744; text-shadow: 0 0 10px #72D1D7, 0 0 3px #409398;}
header .mobile-sidebar .btn-outline-info,
header .mobile-sidebar .btn-demo {width: 100%; display: block; border-radius: 1.5rem;}
header .mobile-sidebar .btn-outline-info {margin-bottom: 0.7rem;}

/* Responsive Nav/Hamburger */
@media (min-width: 1023px) {.custom-hamburger, .mobile-sidebar, .sidebar-overlay { display: none !important;}}
  @media (max-width: 1022.98px){
    header .main-nav-links, .nav-gradient-line, .d-flex.align-items-center.gap-4.ms-4 {display: none !important;}
    header .custom-hamburger {display: flex !important;}
    header .mobile-sidebar {display: flex;}
  }
  @media (max-width: 425.98px){header .mobile-sidebar {max-width: 100%;}}

/* Footer gradient-text hover animation - simple, no scale or shine */
footer .gradient-text,
footer .gradient-text-footer:hover {background-size: 200% 200%; transition: background-position 0.5s cubic-bezier(.4,0,.2,1), color 0.3s; position: relative; display: inline-block; padding-right: 28px; /* space for arrow movement */ overflow: visible; transition: transform 0.4s cubic-bezier(.4,0,.2,1), filter 0.3s;}
footer .gradient-text:hover,
footer .gradient-text-footer:hover {background-position: 100% 0; color: #fff; text-shadow: 0 0 8px var(--secondary-color), 0 0 16px var(--secondary-color); transform: translateX(16px);}
footer .gradient-text .footer-arrow {display: inline-block; transition: transform 0.4s cubic-bezier(.4,0,.2,1), filter 0.3s; vertical-align: middle;}
footer .gradient-text:hover .footer-arrow {transform: translateX(16px); filter: drop-shadow(0 0 10px var(--secondary-color));}

/* Footer heading underline utility */
.footer-heading-underline {display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;}
.footer-underline {width: 139px; height: 2px; background: #fff; opacity: 0.7; -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px;}

/* .footer-gradient-text-hover a:hover {color: var(--text-color-w); text-shadow: var(--neon-text-shadow);} */

/* .footer-link-underline-wrap {
  display: inline-block;
  position: relative;
} */
.neon-underline {width: 100px; height: 2px; background: #fff; opacity: 0.2; border-radius: 1px; margin-top: 2px; box-shadow: 0 0 8px var(--secondary-color), 0 0 16px var(--secondary-color), 0 0 24px var(--secondary-color); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.35s cubic-bezier(.4,0,.2,1); will-change: transform, opacity;}
/* .footer-link-underline-wrap a:hover + .neon-underline,
.footer-link-underline-wrap a:focus + .neon-underline {
  transform: scaleX(1);
  opacity: 0.8;
} */

/* Crystal Neon Button Effect */
.btn-crystal-neon {position: relative; display: inline-block; background: linear-gradient(135deg, rgba(114,209,215,0.25) 0%, rgba(60,110,113,0.25) 100%); color: #fff; border: 2px solid var(--secondary-color); border-radius: 2rem; box-shadow: 0 2px 8px 0 rgba(114,209,215,0.18), 0 1.5px 4px 0 rgba(60,110,113,0.10); backdrop-filter: blur(2px) brightness(1.2); -webkit-backdrop-filter: blur(2px) brightness(1.2); transition: box-shadow 0.3s cubic-bezier(.4,0,.2,1), background 0.3s cubic-bezier(.4,0,.2,1), color 0.3s cubic-bezier(.4,0,.2,1), transform 0.2s cubic-bezier(.4,0,.2,1); overflow: hidden;}

.btn-crystal-neon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Blend primary color with a bit of white for the crystal shine */
  background: linear-gradient(
    120deg,
    rgba(60,110,113,0.22) 0%,           /* --primary-color */
    rgba(60,110,113,0.10) 60%,          /* --primary-color */
    rgba(255,255,255,0.08) 100%         /* subtle white for highlight */
  );
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 1.5px 8px 0 rgba(60,110,113,0.18), /* --primary-color */
              inset 0 -2px 8px 0 rgba(114,209,215,0.10);  /* --secondary-color */
}

.btn-crystal-neon::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 15%;
  width: 70%;
  height: 30%;
  /* Use primary and secondary color for the highlight */
  background: linear-gradient(
    120deg,
    rgba(60,110,113,0.35) 0%,           /* --primary-color */
    rgba(114,209,215,0.18) 100%         /* --secondary-color */
  );
  border-radius: 40% 60% 50% 60% / 60% 40% 60% 50%;
  filter: blur(1.5px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}
.btn-crystal-neon:hover,
.btn-crystal-neon:focus {box-shadow: 0 0 8px 2px var(--secondary-color), 0 2px 8px 0 rgba(114,209,215,0.18); background: linear-gradient(135deg, rgba(114,209,215,0.35) 0%, rgba(60,110,113,0.35) 100%); color: #fff; -webkit-transform: translateY(-1px) scale(1.01); -moz-transform: translateY(-1px) scale(1.01); -ms-transform: translateY(-1px) scale(1.01); -o-transform: translateY(-1px) scale(1.01); transform: translateY(-1px) scale(1.01);}
.btn-crystal-neon:active {-webkit-transform: translateY(2px) scale(0.98); -moz-transform: translateY(2px) scale(0.98); -ms-transform: translateY(2px) scale(0.98); -o-transform: translateY(2px) scale(0.98); transform: translateY(2px) scale(0.98); box-shadow: 0 0 4px 1px var(--secondary-color), 0 1.5px 4px 0 rgba(60,110,113,0.10);}
/* Transparent Neon Button Effect */
.btn-transparent-neon {position: relative; display: inline-block; background: transparent; color: var(--text-color-w); border: 2px solid transparent; border-radius: 2rem; padding: 0.5rem 1.5rem; font-size: var(--font-size-p); font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s cubic-bezier(.4,0,.2,1), text-shadow 0.3s cubic-bezier(.4,0,.2,1); overflow: hidden; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);}
.btn-transparent-neon::before {content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(114,209,215,0.1) 0%, rgba(60,110,113,0.1) 100%); opacity: 0; transition: opacity 0.3s cubic-bezier(.4,0,.2,1); pointer-events: none; z-index: 1;}
.btn-transparent-neon::after {content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(114,209,215,0.3) 0%, transparent 70%); border-radius: 50%; transform: translate(-50%, -50%); transition: all 0.3s cubic-bezier(.4,0,.2,1); pointer-events: none; z-index: 2;}
.btn-transparent-neon:hover,
.btn-transparent-neon:focus {color: var(--text-color-w); text-shadow: var(--neon-text-shadow); border-color: var(--secondary-color); background: rgba(114,209,215,0.1); box-shadow: 0 0 10px rgba(114, 209, 215, 0.8), 0 0 20px rgba(114, 209, 215, 0.6), 0 0 30px rgba(114, 209, 215, 0.4), 0 8px 25px rgba(114, 209, 215, 0.3), inset 0 0 20px rgba(114, 209, 215, 0.1); transform: translateY(-2px);}
.btn-transparent-neon:hover::before {opacity: 1;}
.btn-transparent-neon:hover::after {width: 200%; height: 200%;}
.btn-transparent-neon:active {transform: translateY(0px) scale(0.98); box-shadow: 0 0 5px rgba(114, 209, 215, 0.6), 0 0 10px rgba(114, 209, 215, 0.4), 0 0 15px rgba(114, 209, 215, 0.2), 0 4px 15px rgba(114, 209, 215, 0.2), inset 0 0 10px rgba(114, 209, 215, 0.1);}