/* 3D Hero Text */
.hero-3d-text-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Make it viewport height */
    display: flex;
    justify-content: center;
    align-items: center; /* Reverted to center for translateY approach */
    perspective: 1000px; /* For 3D effect */
    overflow: hidden; /* Prevent text from showing outside hero */
    z-index: 2; /* Ensure it's above background but potentially below other content */
    pointer-events: none; /* Allow clicks to pass through if needed */
}

.hero-3d-text {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(8rem, 25vw, 22rem);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.05);
    letter-spacing: -0.05em;
    transform-style: preserve-3d;
    text-shadow:
        1px 1px 0px rgba(255, 255, 255, 0.07),
        2px 2px 0px rgba(255, 255, 255, 0.06),
        3px 3px 0px rgba(255, 255, 255, 0.05),
        4px 4px 0px rgba(45, 125, 228, 0.12),
        5px 5px 0px rgba(45, 125, 228, 0.1),
        6px 6px 0px rgba(45, 125, 228, 0.08),
        7px 7px 0px rgba(0,0,0,0.1),
        8px 8px 12px rgba(0,0,0,0.2);
    transform: translateY(25vh) perspective(1000px) rotateX(10deg) rotateY(-5deg) translateZ(0px) scale(1); /* Added translateY */
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
    animation: floatText 8s ease-in-out infinite;
}

@keyframes floatText {
    0%, 100% {
        transform: translateY(25vh) perspective(1000px) rotateX(10deg) rotateY(-5deg) translateZ(0px) scale(1); /* Added translateY */
    }
    50% {
        transform: translateY(25vh) perspective(1000px) rotateX(15deg) rotateY(-8deg) translateZ(20px) scale(1.02); /* Added translateY */
    }
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    color: var(--white-color); /* Changed to white for better contrast with video */
    padding: 0;
    overflow: hidden;
    margin-top: -80px; /* Offset for fixed header */
}

/* Video Background */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, rgba(45,125,228,0.4) 100%);
    z-index: 1;
    backdrop-filter: blur(2px);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Or a very light gradient if needed */
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* Or a very light gradient if needed */
    z-index: 1;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--white-color); /* Light color for dark video background */
    font-size: 0.9rem;
    opacity: 0.8;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: bounce 2s infinite;
    z-index: 5;
}

.hero-scroll-indicator .mouse-icon {
    width: 20px;
    height: 30px;
    border: 2px solid var(--primary-color); /* Darker border */
    border-radius: 10px;
    position: relative;
    margin-bottom: 8px;
}

.hero-scroll-indicator .mouse-wheel {
    width: 3px;
    height: 6px;
    background-color: var(--primary-color); /* Darker wheel */
    border-radius: 2px;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-wheel 1.5s infinite;
}

.hero .container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    pointer-events: auto; /* Ensure buttons remain clickable */
}

.hero-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    z-index: 2;
    padding: 2rem;
    animation: fadeInUp 1s ease-out;
    padding-bottom: 120px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-content h1 {
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 800;
    color: var(--white-color);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}

.hero-content h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--secondary-color);
    border-radius: 2px;
}

.hero-content h1 .highlight {
    color: var(--secondary-color);
    position: relative;
    display: inline-block;
}

.hero-content h1 .highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(45, 125, 228, 0.2);
    z-index: -1;
    transform: skewX(-5deg);
}

.hero-content p {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--white-color); /* Light text on dark video background */
    opacity: 0.9;
    margin-bottom: 2.5rem;
    max-width: 650px;
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 1.5rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
    position: relative;
}

.hero-buttons::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
}

.hero-buttons .btn-primary {
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-color: var(--secondary-color);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.hero-buttons .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
}

.hero-buttons .btn-primary:hover::before {
    left: 100%;
}

.hero-buttons .btn-primary:hover {
    background-color: var(--primary-color); /* From global .btn-primary:hover */
    border-color: var(--primary-color); /* From global .btn-primary:hover */
    transform: translateY(-3px) scale(1.03); /* Keep custom transform */
    box-shadow: var(--box-shadow-lg); /* From global .btn:hover */
}

/* Assuming the class in HTML is .btn-outline, let's style that for hero */

/* Hero Features (FSC Regulated, etc.) */
.hero-features {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.2rem;
    
    position: absolute;
    top: 50%;
    right: 5%;
    left: auto;
    transform: translateY(-50%);
    width: auto;
    max-width: 280px;
    padding: 2rem;
    z-index: 3;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: fadeInRight 1s ease-out 0.8s forwards;
    opacity: 0;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    color: var(--accent-color); /* Light blue color */
    opacity: 0.9;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
    transition: all 0.3s ease;
    font-weight: 500;
}

.feature-item:hover {
    transform: translateX(5px);
    opacity: 1;
    color: var(--primary-color); /* Dark blue color on hover */
}

.feature-item:last-child {
    border-bottom: none;
}

.feature-item svg {
    width: 24px;
    height: 24px;
    color: var(--secondary-color);
    background: rgba(45, 125, 228, 0.1);
    padding: 8px;
    border-radius: 50%;
    box-sizing: content-box;
    transition: all 0.3s ease;
}

.feature-item:hover svg {
    transform: scale(1.1);
    background: rgba(45, 125, 228, 0.2);
}
.hero-buttons .btn-outline {
    background-color: transparent;
    color: var(--white-color);
    border: 2px solid var(--white-color);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
    transition: all 0.4s ease;
}

.hero-buttons .btn-outline:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-color: var(--secondary-color);
    transform: translateY(-3px) scale(1.03); /* Keep custom transform */
    box-shadow: var(--box-shadow-lg); /* From global .btn:hover */
}

/* Stats Section */
.stats {
    background-color: var(--white-color); /* Clean white background */
    padding: 4rem 0; /* Increased padding */
    position: relative;
    z-index: 3; 
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/pattern.svg') repeat;
    opacity: 0.05;
    z-index: -1;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly larger minmax */
    gap: 2.5rem;
    text-align: center;
}

.stat-item {
    text-align: center;
    padding: 2rem 1.5rem; /* More horizontal padding */
    background: var(--white-color);
    border-radius: var(--border-radius-lg); /* Use global large border radius */
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow); /* Add subtle global box shadow */
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-lg); /* Enhance shadow on hover */
}

.stat-item h3 {
    font-size: 3rem; /* Slightly larger */
    font-weight: 700;
    color: var(--secondary-color); /* Use secondary blue for emphasis */
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.stat-item p {
    font-size: 1.05rem;
    color: var(--dark-text-color);
    font-weight: 500;
    margin-bottom: 0;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .hero-3d-text {
        font-size: 25vw; /* Larger on smaller screens if desired, or smaller */
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .hero h1 {
        font-size: 3rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 100px 0 60px;
        min-height: 600px;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-item {
        padding: 1.5rem 1rem;
    }
    
    .stat-item h3 {
        font-size: 2rem;
    }
}

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