:root {
    --primary-color: #003366;
    /* Deep Blue */
    --secondary-color: #00509E;
    /* Lighter Blue */
    --accent-color: #FFD700;
    /* Gold/Yellow for contrast */
    --text-color: #333;
    --bg-color: #f4f4f4;
    --white: #ffffff;
    --font-main: 'Roboto', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
}

/* Loader */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loader-text {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: bold;
    display: flex;
    gap: 5px;
}

/* Add extra gap for the space between GM and SECURITÉ */
.loader-text span:nth-child(2) {
    margin-right: 20px;
    /* Space between M and S */
}

.loader-text span {
    color: transparent;
    -webkit-text-stroke: 2px var(--white);
    position: relative;
}

.loader-text span::before {
    content: attr(data-text);
    /* We need to set content in CSS or just use the text itself if we duplicate */
    /* Actually, easier way for "fill" effect per letter: */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--white);
    /* Fill color */
    -webkit-background-clip: text;
    background-clip: text;
    /* Since we can't easily do background-clip: text on ::before for fill without text duplication in attr, 
       let's use the color change method or width overlay. 
       User asked for "remplir le loader par lettre". 
       Let's use the color fill animation on the span itself. */
    color: var(--white);
    width: 0%;
    overflow: hidden;
    animation: fillLetter 0.5s forwards;
}

/* We need to target each span to delay animation */
/* But wait, ::before content needs text. 
   Let's simplify: Just animate color change or opacity of a filled duplicate.
   
   Better approach for "fill by letter":
   Text is outlined.
   Animation fills it white.
*/

.loader-text span {
    color: rgba(255, 255, 255, 0.1);
    /* Start faint */
    -webkit-text-stroke: 1px var(--white);
    animation: letterFill 0.2s forwards;
    opacity: 0.3;
}

@keyframes letterFill {
    to {
        color: var(--white);
        opacity: 1;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
}

/* Stagger delays for "GM SECURITÉ" (10 chars + space) */
.loader-text span:nth-child(1) {
    animation-delay: 0.1s;
}

.loader-text span:nth-child(2) {
    animation-delay: 0.2s;
}

.loader-text span:nth-child(3) {
    animation-delay: 0.3s;
}

.loader-text span:nth-child(4) {
    animation-delay: 0.4s;
}

.loader-text span:nth-child(5) {
    animation-delay: 0.5s;
}

.loader-text span:nth-child(6) {
    animation-delay: 0.6s;
}

.loader-text span:nth-child(7) {
    animation-delay: 0.7s;
}

.loader-text span:nth-child(8) {
    animation-delay: 0.8s;
}

.loader-text span:nth-child(9) {
    animation-delay: 0.9s;
}

.loader-text span:nth-child(10) {
    animation-delay: 1.0s;
}


/* Navbar */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo img {
    height: 50px;
    /* Slightly smaller to fit text */
    margin-right: 15px;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 1px;
    /* Same font as loader essentially */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2.5rem;
    /* More space */
}

.nav-links li {
    position: relative;
}

.nav-links a {
    text-decoration: none;
    color: #000000;
    /* Black as requested */
    font-family: var(--font-heading);
    /* Modern font */
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    /* Modern look */
    letter-spacing: 0.5px;
    transition: color 0.3s, transform 0.2s;
    position: relative;
}

.nav-links a:hover {
    color: var(--secondary-color);
    /* Blue hover */
    transform: translateY(-2px);
    /* Subtle lift */
}

/* Underline effect on hover */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--secondary-color);
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Dropdown */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 4px;
}

.dropdown:hover .dropdown-content {
    display: block;
    animation: fadeIn 0.3s;
}

.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 1rem;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    color: var(--primary-color);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Utility */
.hidden {
    display: none !important;
}

/* Section Titles - Standardized */
.section-title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    opacity: 0;
    /* For scroll animation */
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-title.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Yellow Line (Trait Jaune) */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--accent-color);
    /* Gold/Yellow */
    border-radius: 2px;
    transition: width 0.5s ease;
}

.section-title.visible::after {
    width: 80%;
}

/* Remove old border styles if any */
.title-border {
    display: none;
}

/* Hero Section */
#hero {
    height: 85vh;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(circle at center, #1a2a3a 0%, #000000 100%);
    color: var(--white);
}

/* Dynamic Grid Background */
#hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(rgba(0, 168, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg);
    animation: gridMove 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes gridMove {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0);
    }

    100% {
        transform: perspective(500px) rotateX(60deg) translateY(50px);
    }
}

/* Animated Background (Cyber Padlock) */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.6;
}

.padlock-container {
    position: relative;
    width: 300px;
    height: 400px;
    animation: floatPadlock 6s ease-in-out infinite;
}

@keyframes floatPadlock {

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

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

.padlock-shackle {
    width: 180px;
    height: 180px;
    border: 30px solid #FFD700;
    /* Gold */
    border-bottom: 0;
    border-radius: 100px 100px 0 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.5);
}

.padlock-body {
    width: 260px;
    height: 240px;
    background: linear-gradient(135deg, #2c3e50, #000);
    border-radius: 30px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(0, 168, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 2px solid rgba(0, 168, 255, 0.3);
}

/* Shiny reflection effect on body */
.padlock-body::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to bottom right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 60%,
            rgba(255, 255, 255, 0) 100%);
    transform: rotate(30deg);
    animation: shine 6s infinite linear;
    /* Continuous shine sweep */
}

@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(30deg);
    }

    20% {
        transform: translateX(100%) rotate(30deg);
    }

    100% {
        transform: translateX(100%) rotate(30deg);
    }
}

/* Internal Mechanism (The Rings) */
.lock-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(0, 168, 255, 0.6);
    /* Blue tech look */
    border-radius: 50%;
    animation: rotate 10s linear infinite;
    box-shadow: 0 0 10px rgba(0, 168, 255, 0.2);
}

.lock-ring:nth-child(1) {
    width: 100px;
    height: 100px;
    animation-duration: 8s;
    border-color: rgba(255, 215, 0, 0.4);
    /* Gold hint */
    opacity: 0.8;
}

.lock-ring:nth-child(2) {
    width: 180px;
    height: 180px;
    animation-duration: 12s;
    animation-direction: reverse;
}

.lock-ring:nth-child(3) {
    width: 260px;
    height: 260px;
    animation-duration: 15s;
    opacity: 0.4;
}

.padlock-keyhole {
    width: 20px;
    height: 30px;
    background: #000;
    border-radius: 10px 10px 0 0;
    position: absolute;
    z-index: 5;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 3.5s forwards;
    /* Delay for loader */
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out 4s forwards;
}

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

/* About Section */
#about {
    padding: 80px 0;
    background-color: #ffffff;
    /* White background as requested */
    position: relative;
}

#about .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Use global section-title style */
#about .section-title {
    display: block;
    /* Ensure block for centering */
    text-align: center;
    /* Centered title */
    margin-bottom: 60px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 40px;
    text-align: justify;
}

.cert-title {
    font-family: var(--font-heading);
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.5rem;
    position: relative;
    display: inline-block;
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
}

.cert-card {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #eee;
}

.cert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--secondary-color);
}

.cert-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.cert-info h4 {
    color: var(--primary-color);
    margin-bottom: 5px;
    font-size: 1rem;
}

.cert-info p {
    font-size: 0.8rem;
    color: #777;
}

.about-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: rotate(2deg);
    /* Modern tilt */
    transition: transform 0.5s;
}

.about-image-wrapper:hover {
    transform: rotate(0deg);
}

.about-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s;
}

.about-image-wrapper:hover .about-image {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-image-wrapper {
        order: -1;
        /* Image on top on mobile */
        margin-bottom: 30px;
    }
}

#services {
    position: relative;
    width: 90%;
    margin: 50px auto 50px auto;
    /* Symmetric margins */
    height: 60vh;
    min-height: 500px;
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

#services .section-title {
    z-index: 20;
    background: transparent;
    padding: 0;
    box-shadow: none;
    margin-bottom: 2rem;
    color: var(--primary-color);
    font-size: 3rem;
}

.service-btn {
    position: absolute;
    background-color: var(--white);
    color: var(--primary-color);
    padding: 25px 50px;
    /* Even larger padding as requested */
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.5rem;
    /* Larger font */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 3px solid var(--secondary-color);
    /* Thicker border */
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    /* Explicit cursor pointer */
    z-index: 10;
    transition: all 0.3s ease;
}

/* Shiny Border Hover Effect */
.service-btn:hover {
    border-color: #00a8ff;
    /* Change border color */
    box-shadow: 0 0 15px rgba(0, 168, 255, 0.5);
    /* Glow matches border */
    transform: translateY(-2px);
    /* Slight lift */
    color: #00a8ff;
}

#services-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    /* Let clicks pass through to canvas elements if handled by JS, but usually canvas handles events */
}

/* We will handle button styling inside the canvas or as DOM elements overlaid */
/* Using DOM elements for better accessibility and styling control, controlled by Matter.js */
.service-btn {
    position: absolute;
    background: var(--primary-color);
    color: var(--white);
    padding: 15px 30px;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    user-select: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* Initial state off-screen or hidden handled by JS, but let's ensure they are visible when they enter */
    will-change: transform;
}

.service-btn:hover {
    background: var(--secondary-color);
    transform: scale(1.05);
    /* This might conflict with physics transform, handled in JS better or use inner wrapper */
    z-index: 100;
}

/* Products Section */
#products {
    padding: 50px 0;
    background: var(--white);
    overflow: hidden;
}

.news-bar {
    /* 3D Tube Effect */
    background: linear-gradient(to bottom, #004e92, #00a8ff 50%, #004e92);
    color: var(--white);
    padding: 10px 0;
    /* overflow: hidden; */
    white-space: nowrap;
    position: relative;
    margin-bottom: 50px;

    /* Tilted and Full Width as requested ("garde la ponte", "100% de bout en bout") */
    width: 110%;
    /* Extra width to cover corners when tilted */
    left: -5%;
    /* Center the extra width */
    transform: rotate(-2deg);
    /* The "ponte" */

    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.3),
        inset 0 5px 10px rgba(255, 255, 255, 0.3),
        /* Highlight */
        inset 0 -5px 10px rgba(0, 0, 0, 0.3);
    /* Shadow */
    display: flex;
    align-items: center;
    height: 80px;
}

.news-logo-wrapper {
    position: absolute;
    left: 10%;
    /* "Un peu a gauche" on the tube */
    top: 6%;
    transform: translateY(-50%);
    z-index: 20;
    height: 140%;
    /* Large vignette */
    aspect-ratio: 1;
    /* background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%); */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /* No shadow on wrapper to blend better */
}

.news-logo {
    height: 140%;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.news-content {
    display: inline-block;
    padding-left: 0;
    /* Reverse direction: Left to Right */
    animation: marquee-reverse 20s linear infinite;
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 80px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

@keyframes marquee-reverse {
    0% {
        transform: translate(-50%, 0);
    }

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

.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    display: flex;
}

.carousel-track {
    display: flex;
    gap: 20px;
    width: max-content;
    /* Allow track to be as wide as needed */
    /* animation: scrollCarousel 20s linear infinite; REMOVED for JS control */
    will-change: transform;
}

.carousel-track:hover {
    animation-play-state: paused;
}

@keyframes scrollCarousel {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Move half way (since we will duplicate items) */
}

.product-card {
    width: 350px;
    /* Larger cards as requested */
    flex-shrink: 0;
    background: var(--bg-color);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

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

.product-img {
    width: 100%;
    height: 250px;
    /* Taller image to match wider card */
    background: #f4f4f4;
    border-radius: 8px;
    margin-bottom: 15px;
    object-fit: cover;
}

.consult-btn {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
}

.consult-btn:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: scale(1.05);
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 20;
    border-radius: 50%;
    font-size: 1.5rem;
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* Footer */
footer {
    background-color: #111;
    color: #aaa;
    padding: 50px 5% 20px;
    font-size: 0.9rem;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-info,
.footer-map {
    flex: 1;
    min-width: 300px;
}

.footer-info h3 {
    color: var(--white);
    margin-bottom: 20px;
    font-family: var(--font-heading);
}

.footer-info p {
    margin-bottom: 10px;
    line-height: 1.6;
}

.footer-info strong {
    color: var(--white);
}

.footer-map iframe {
    width: 100%;
    height: 250px;
    border: 0;
    border-radius: 8px;
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #333;
}

/* ========================================
   PRODUCTS PAGE STYLES
   ======================================== */

#products-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.product-card-page {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.product-card-page:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.product-image-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.product-image-page {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-card-page:hover .product-image-page {
    transform: scale(1.1);
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 51, 102, 0.9), rgba(0, 168, 255, 0.95));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-card-page:hover .product-overlay {
    opacity: 1;
}

.product-description {
    color: white;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.product-card-page:hover .product-description {
    transform: translateY(0);
}

.product-info-page {
    padding: 25px;
    text-align: center;
}

.product-info-page h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
    font-weight: 700;
}

.consult-btn-page {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 168, 255, 0.3);
}

.consult-btn-page:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 168, 255, 0.5);
}

/* Responsive Grid */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .product-image-wrapper {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   PRODUCT DETAIL PAGE STYLES
   ======================================== */

#product-detail {
    background: white;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 60px;
    align-items: start;
}

/* Product Carousel */
.product-carousel-wrapper {
    position: relative;
}

.product-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: #f5f5f5;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.carousel-images {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.carousel-image.active {
    opacity: 1;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 51, 102, 0.8);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-arrow:hover {
    background: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 20px;
}

.carousel-next {
    right: 20px;
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: var(--primary-color);
    transform: scale(1.3);
}

.indicator:hover {
    background: var(--secondary-color);
}

/* Product Info */
.product-info-detail {
    text-align: left;
}

.product-description-detail h3 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.product-description-detail p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    text-align: justify;
}

.product-description-detail strong {
    color: var(--primary-color);
    font-weight: 700;
}

/* PDF Link Section */
.product-pdf-link {
    margin-top: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 15px;
    border-left: 5px solid var(--primary-color);
}

.product-pdf-link h4 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.pdf-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 168, 255, 0.4);
}

.pdf-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 168, 255, 0.6);
}

.pdf-button svg {
    width: 20px;
    height: 20px;
}

/* Tags Section */
#product-tags {
    background: #f5f7fa;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.product-tag {
    display: inline-block;
    background: white;
    color: var(--primary-color);
    padding: 12px 25px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-tag:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 168, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .carousel-prev {
        left: 10px;
    }

    .carousel-next {
        right: 10px;
    }

    .product-description-detail p {
        font-size: 1rem;
    }
}
/* ========================================
   MOBILE RESPONSIVE UPDATES
   ======================================== */

/* Hamburger Menu & Sidebar Defaults (Hidden on Desktop) */
.hamburger-menu {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger-menu span {
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 5px;
}

.close-menu {
    display: none;
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    cursor: pointer;
    color: var(--primary-color);
}

#mobile-services {
    display: none;
    padding: 50px 20px;
    background-color: var(--white);
    text-align: center;
}

.mobile-service-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.mobile-service-list li {
    background: #f9f9f9;
    margin: 10px 0;
    padding: 15px;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

/* Mobile Media Query Updates */
@media (max-width: 768px) {
    /* Navbar Sidebar */
    .hamburger-menu {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 70%; /* Sidebar width */
        background-color: var(--white);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
        z-index: 2000; /* Above everything */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

    .nav-links.nav-active {
        transform: translateX(0%);
    }

    .nav-links li {
        margin: 20px 0;
        opacity: 0; /* Fade in effect */
        animation: navLinkFade 0.5s ease forwards 0.3s;
    }

    .close-menu {
        display: block;
    }

    /* Hide Desktop Services */
    #services {
        display: none !important;
    }

    /* Show Mobile Services */
    #mobile-services {
        display: block;
    }
}

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

/* Mobile Loader Adjustment */
@media (max-width: 768px) {
    .loader-text {
        font-size: 1.5rem; /* Smaller font size for mobile */
    }
    .loader-text span:nth-child(2) {
        margin-right: 10px; /* Smaller gap */
    }
}