/* Main Interface Styles */
/* =========================================

Global Main Styles & Variables

========================================= */

:root {

/* Color System */

--primary-light: #fed7aa;       /* Light orange */

--primary-medium: #ea580c;      /* Dark orange */

--primary-dark: #92400e;        /* Brown */

--primary-darker: #451a03;      /* Darker brown */
/* Background Colors */
--bg-primary: #ffffff;          /* White background */
--bg-secondary: #fef7f0;        /* Very light orange tint */
--bg-tertiary: #fef3ec;         /* Slightly darker orange tint */

/* Text Colors */
--text-primary: #451a03;        /* Dark brown for main text */
--text-secondary: #92400e;      /* Brown for secondary text */
--text-muted: #a8a29e;          /* Muted brown-gray */
--text-light: #ffffff;          /* White text */

/* Border Colors */
--border-light: #fef3ec;
--border-medium: #fed7aa;
--border-glass: 1px solid rgba(234, 88, 12, 0.2);

/* Shadow Colors */
--shadow-light: 0 10px 40px rgba(234, 88, 12, 0.1);
--shadow-medium: 0 10px 30px rgba(234, 88, 12, 0.2);
--shadow-heavy: 0 20px 40px rgba(69, 26, 3, 0.15);

/* Gradients */
--gradient-primary: linear-gradient(135deg, var(--primary-medium) 0%, var(--primary-dark) 100%);
--gradient-secondary: linear-gradient(135deg, var(--primary-darker) 0%, var(--primary-dark) 100%);
--glass-bg: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.9) 100%);

/* Effects */
--blur-glass: blur(10px);
--transition-smooth: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
--transition-quick: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
--transition-bounce: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========================================

GLOBAL RESET & BASE STYLES

======================================== */
* {

margin: 0;

padding: 0;

box-sizing: border-box;

}
body {

font-family: 'Exo 2', sans-serif;

background: var(--bg-primary);

color: var(--text-primary);

overflow-x: hidden;

/* Add padding to body to prevent content hiding behind fixed nav */

padding-top: 80px;

}
/* ========================================

BACKGROUND & LAYOUT COMPONENTS

======================================== */

.gradient-bg {

background: var(--bg-secondary);

position: relative;

overflow: hidden;

/* Remove z-index to prevent stacking context conflicts */

}
.gradient-bg::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background:

radial-gradient(circle at 20% 80%, rgba(234, 88, 12, 0.1) 0%, transparent 50%),

radial-gradient(circle at 80% 20%, rgba(254, 215, 170, 0.4) 0%, transparent 50%),

radial-gradient(circle at 40% 40%, rgba(146, 64, 14, 0.1) 0%, transparent 50%);

animation: cosmicWave 20s ease-in-out infinite;

/* Performance Fix: Isolate layer */

will-change: transform, opacity;

z-index: -2;

}
.gradient-bg::after {

content: '';

position: absolute;

width: 100%;

height: 100%;

background-image:

radial-gradient(2px 2px at 20px 30px, var(--primary-medium), transparent),

radial-gradient(2px 2px at 40px 70px, var(--primary-dark), transparent),

radial-gradient(1px 1px at 90px 40px, var(--primary-light), transparent),

radial-gradient(1px 1px at 130px 80px, var(--primary-medium), transparent);

background-repeat: repeat;

background-size: 150px 100px;

animation: quantumParticles 10s linear infinite;

opacity: 0.4;

/* Performance Fix: Isolate layer */

will-change: transform;

z-index: -1;

}
/* ========================================

NAVIGATION COMPONENTS

======================================== */

/* Force fixed positioning and transitions */

nav {

position: fixed !important;

top: 0;

left: 0;

right: 0;

width: 100%;

z-index: 100000 !important; /* Increased z-index to ensure it stays above everything */

height: 80px;

transition: transform 0.3s ease-in-out;

/* Performance Fix: Force GPU layer */

transform: translateZ(0);

backface-visibility: hidden;

/* Ensure navbar background is opaque */

background: var(--bg-secondary) !important;

}
/* Class to hide navbar on scroll down */

nav.nav-hidden {

transform: translateY(-100%);

}
.mobile-menu {

position: fixed;

top: 80px;

left: 0;

right: 0;

background: var(--bg-tertiary);

transform: translateY(-20px);

opacity: 0;

visibility: hidden;

transition: var(--transition-quick);

z-index: 99999; /* High but lower than nav */

border-top: 1px solid var(--primary-light);

box-shadow: var(--shadow-medium);

padding: 1rem;

max-height: calc(100vh - 80px);

overflow-y: auto;

}
.mobile-menu.active {

transform: translateY(0);

opacity: 1;

visibility: visible;

}
.mobile-menu a {

display: block;

padding: 1rem 1.5rem;

color: var(--text-primary);

text-decoration: none;

border-bottom: 1px solid var(--border-medium);

transition: var(--transition-quick);

position: relative;

overflow: hidden;

}
.mobile-menu a::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, var(--primary-light), transparent);

transition: left 0.3s ease;

}
.mobile-menu a:hover::before {

left: 100%;

}
.mobile-menu a:hover {

background: var(--bg-secondary);

color: var(--primary-medium);

transform: translateX(10px);

}
/* Styles for desktop links */
nav .hidden.xl\:flex a {
position: relative;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
color: var(--text-primary);
}

nav .hidden.xl\:flex a:hover {
background: var(--bg-tertiary);
color: var(--primary-medium);
transform: translateY(-2px);
}

.mobile-menu-button {

padding: 0.5rem;

border-radius: 0.5rem;

transition: var(--transition-quick);

position: relative;

z-index: 100001; /* Ensure it's above everything in nav */

/* Display is now handled by Tailwind xl:hidden */

color: var(--text-primary);

}
.mobile-menu-button:hover {

background: var(--bg-tertiary);

color: var(--primary-medium);

transform: scale(1.1);

}
.mobile-menu-button i {

transition: transform 0.3s ease;

}
.mobile-menu-button.active i {

transform: rotate(90deg);

}
/*-------- website message error / success --------*/

#webmessage_red {

background-color: #dc2626;

font-weight: bold;

text-align: center;

position: fixed;

top: 100px;

right: 20px;

padding: 1rem 1.5rem;

border-radius: 0.5rem;

color: white;

box-shadow: var(--shadow-medium);

z-index: 99998; /* High but below nav */

animation: slideIn 0.3s ease-out forwards, slideOut 0.3s ease-out forwards 5s;

}
#webmessage_green {

background-color: #16a34a;

font-weight: bold;

text-align: center;

position: fixed;

top: 100px;

right: 20px;

padding: 1rem 1.5rem;

border-radius: 0.5rem;

color: white;

box-shadow: var(--shadow-medium);

z-index: 99998; /* High but below nav */

animation: slideIn 0.3s ease-out forwards, slideOut 0.3s ease-out forwards 5s;

}
@keyframes slideIn {

from { transform: translateX(100%); opacity: 0; }

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

}
@keyframes slideOut {

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

to { transform: translateX(100%); opacity: 0; }

}
/* ========================================

TYPOGRAPHY & TEXT STYLING

======================================== */

h1 {

font-family: 'Orbitron', monospace;

background: linear-gradient(45deg, var(--primary-darker), var(--primary-medium), var(--primary-darker));

background-size: 200% 200%;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

animation: textShimmer 4s ease-in-out infinite;

text-shadow: none;

}
.py-32 {

padding-top: clamp(3rem, 10vw, 10rem);

padding-bottom: clamp(3rem, 10vw, 10rem);

}
.text-5xl {

font-size: clamp(2.5rem, 6vw, 4rem);

}
/* ========================================

FOOTER COMPONENTS

======================================== */

footer {

background: var(--bg-tertiary);

color: var(--text-primary);

padding: 4rem 2rem;

position: relative; /* Ensure it doesn't create stacking context conflicts */

}
.footer-logo-container {

width: 100%;

display: flex;

justify-content: center;

margin: auto;

}
.footer-bottom {

border-top: 1px solid var(--border-medium);

padding-top: 2rem;

text-align: center;

margin-top: 2rem;

}
.footer-legal {

margin-bottom: 1rem;

}
.footer-legal a {

color: var(--text-secondary);

text-decoration: none;

margin: 0 1rem;

font-size: 0.9rem;

transition: var(--transition-quick);

}
.footer-legal a:hover {

color: var(--primary-medium);

}
.footer-certifications {

display: flex;

justify-content: center;

gap: 2rem;

margin-bottom: 1rem;

}
.cert-icon {

height: 40px;

opacity: 0.7;

transition: var(--transition-quick);

filter: sepia(1) hue-rotate(-30deg) saturate(3);

}
.cert-icon:hover {

opacity: 1;

}
.copyright {

font-size: 0.9rem;

opacity: 0.7;

color: var(--text-muted);

}
/* ========================================

ANIMATION UTILITIES

======================================== */

.floating {

animation: float3D 6s ease-in-out infinite;

transform-style: preserve-3d;

}
.pulse {

animation: quantumPulse 3s infinite;

transform-style: preserve-3d;

}
.slide-in {

opacity: 0;

transform: translateY(50px) rotateX(-15deg);

transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.6s ease;

}
.visible {

opacity: 1;

transform: translateY(0) rotateX(0deg);

}
.card-hover {

transition: var(--transition-smooth);

transform-style: preserve-3d;

position: relative;

}
.card-hover::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: linear-gradient(45deg,

rgba(254, 215, 170, 0.2) 0%,

rgba(234, 88, 12, 0.1) 50%,

rgba(254, 215, 170, 0.2) 100%);

border-radius: inherit;

opacity: 0;

transition: var(--transition-quick);

z-index: -1;

}
.card-hover:hover::before {

opacity: 1;

}
.card-hover:hover {

transform: translateY(-20px) rotateX(5deg) rotateY(5deg) scale(1.02);

box-shadow: var(--shadow-heavy);

}
/* 3D Icons */

.fa-graduation-cap, .fa-certificate, .fa-clock {

display: inline-block;

animation: iconFloat 4s ease-in-out infinite;

transform-style: preserve-3d;

background: var(--gradient-primary);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

filter: drop-shadow(0 4px 8px rgba(234, 88, 12, 0.2));

}
.fa-graduation-cap { animation-delay: 0s; }

.fa-certificate { animation-delay: 1.3s; }

.fa-clock { animation-delay: 2.6s; }
/* ========================================

KEYFRAMES & ANIMATIONS

======================================== */

@keyframes cosmicWave {

0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }

33% { opacity: 0.8; transform: scale(1.1) rotate(120deg); }

66% { opacity: 0.6; transform: scale(0.9) rotate(240deg); }

}
@keyframes float3D {

0% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }

25% { transform: translateY(-20px) rotateX(5deg) rotateY(5deg); }

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

75% { transform: translateY(-20px) rotateX(5deg) rotateY(-5deg); }

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

}
@keyframes quantumPulse {

0% { transform: scale(1) rotateZ(0deg); box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.7); }

25% { transform: scale(1.05) rotateZ(90deg); box-shadow: 0 0 0 10px rgba(234, 88, 12, 0.5); }

50% { transform: scale(1.1) rotateZ(180deg); box-shadow: 0 0 0 20px rgba(234, 88, 12, 0.3); }

75% { transform: scale(1.05) rotateZ(270deg); box-shadow: 0 0 0 10px rgba(234, 88, 12, 0.1); }

100% { transform: scale(1) rotateZ(360deg); box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }

}
@keyframes shimmer {

0%, 100% { opacity: 0.5; }

50% { opacity: 1; }

}
@keyframes titleGlow {

0%, 100% { text-shadow: 0 0 10px rgba(234, 88, 12, 0.1); }

50% { text-shadow: 0 0 20px rgba(234, 88, 12, 0.3); }

}
@keyframes priceGlow {

0%, 100% { text-shadow: none; }

50% { text-shadow: 0 0 10px rgba(234, 88, 12, 0.2); }

}
@keyframes buttonScan {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}
@keyframes iconFloat {

0%, 100% { transform: translateY(0) rotateY(0deg); }

25% { transform: translateY(-10px) rotateY(90deg); }

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

75% { transform: translateY(-10px) rotateY(270deg); }

}
@keyframes textShimmer {

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

50% { background-position: 100% 50%; }

}
@keyframes quantumParticles {

0% { transform: translateY(0); }

100% { transform: translateY(-100px); }

}
@keyframes mobileFloat {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-15px); }

}
@keyframes cosmicSlide {

0% { transform: translateX(25%) rotateY(0deg); }

10% { transform: translateX(-100%) rotateY(25deg); }

20% { transform: translateX(-200%) rotateY(0deg); }

30% { transform: translateX(-300%) rotateY(25deg); }

40% { transform: translateX(-400%) rotateY(0deg); }

50% { transform: translateX(-500%) rotateY(25deg); }

60% { transform: translateX(-600%) rotateY(0deg); }

70% { transform: translateX(-700%) rotateY(25deg); }

80% { transform: translateX(-800%) rotateY(0deg); }

90% { transform: translateX(-900%) rotateY(25deg); }

100% { transform: translateX(-1000%) rotateY(0deg); }

}
/* ========================================

RESPONSIVE BREAKPOINTS

======================================== */

/* Mobile menu visibility controls */
/* Safety: Ensure mobile menu dropdown is hidden on desktop if screen is resized */
@media (min-width: 1280px) {
    .mobile-menu {
        display: none !important;
    }
}

/* Tablet portrait */

@media (max-width: 768px) {

.floating {

animation: mobileFloat 4s ease-in-out infinite;

}
footer .grid {
    grid-template-columns: repeat(2, 1fr);
}

.footer-legal a {
    display: block;
    margin: 0.5rem 0;
}

.footer-certifications {
    flex-wrap: wrap;
}
}
/* Mobile large */

@media (max-width: 640px) {

h1 {

font-size: 2.5rem !important;

}
.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-20 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.mb-16 {
    margin-bottom: 3rem;
}

.gap-8 {
    gap: 2rem;
}
}
/* Mobile small */

@media (max-width: 500px) {

footer .grid {

grid-template-columns: 1fr;

}

}
/* Mobile very small */

@media (max-width: 400px) {

* {

max-width: 100%;

box-sizing: border-box;

}
body {
    overflow-x: hidden;
}

/* Disable 3D effects on very small screens */
.floating {
    animation: none;
}

.pulse {
    animation: none;
}
}
/* Utility classes & interactive states */

.overflow-x-hidden {

overflow-x: hidden;

}
@media (hover: none) {

.btn:active {

transform: scale(0.95);

}

}
@media (hover: hover) {

.card-hover:hover {

transform: translateY(-20px) rotateX(5deg) rotateY(5deg) scale(1.02);

}

}