/* Custom CSS for dreampcbuildanditsolutionsinc */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

/* Body and layout adjustments */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000000;
    padding-top: 76px; /* Account for fixed navbar */
}


/* Navigation Styles */
.navbar {
    background-color: #000000 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    width: 100%;
    height: 80px; /* Important: Define navbar height */
}

/* Optional: Remove padding/margin that could cause centering issues */
body, html {
    margin: 0;
    padding: 0;
}

/* Flex container for navbar */
.navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    width: 100%;
}

/* Logo + Text wrapper */
.navbar-brand {
    display: flex;
    align-items: center;
    margin-right: auto; /* Pushes everything else away */
    font-weight: 600;
    font-size: 1.2rem;
    color: #fff !important;
    text-decoration: none;
    transition: none;
    transform: none;
}

/* Logo Image */

/* About v2 Page Styles */
.about-v2-hero-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    text-align: center;
    pointer-events: none;
}
.about-v2-hero-heading h1 {
    color: white;
    font-size: 4rem;
    font-weight: 300;
    margin: 0;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    font-family: 'Lexend', sans-serif;
    letter-spacing: 1px;
}

.about-v2-hero-heading p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    margin: 20px 0 0 0;
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
}

.about-v2-hero-heading p:last-child {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 10px 0 0 0;
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
}

.about-v2-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 150;
    pointer-events: none;
}

.about-v2-black-hole-container {
    margin: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #0a0a1a 0%, #000002 70%);
    color: #e0e0ff;
    width: 100%;
    height: 100%;
}

.about-v2-black-hole-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.about-v2-black-hole-info {
    position: absolute;
    top: 20px;
    width: 100%;
    text-align: center;
    color: rgba(220, 220, 255, 0.9);
    font-size: 18px;
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 100;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
    transition: opacity 2s ease-in-out 1s;
}

.about-v2-ui-panel {
    position: absolute;
    background-image: linear-gradient(145deg, rgba(20, 25, 45, 0.85), rgba(10, 15, 30, 0.9));
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid rgba(180, 180, 220, 0.15);
    color: rgba(225, 225, 255, 0.9);
    font-size: 14px;
    user-select: none;
    z-index: 50;
    transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(180,180,220,0.07) inset;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
}

@keyframes about-v2-panelFadeIn { 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

.about-v2-ui-panel:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(180,180,220,0.09) inset;
}

.about-v2-controls { 
    bottom: 20px; 
    right: 20px; 
}

.about-v2-autoRotateToggle {
    cursor: pointer; 
    padding: 8px 5px; 
    display: flex; 
    align-items: center;
    gap: 8px; 
    color: inherit; 
    font-size: inherit; 
    transition: color 0.2s ease;
}

.about-v2-autoRotateToggle:hover { 
    color: #fff; 
}

.about-v2-autoRotateToggle span { 
    vertical-align: middle; 
}

.about-v2-rotate-icon {
    width: 1.1em; 
    height: 1.1em; 
    stroke: currentColor; 
    stroke-width: 1.8;
    fill: none; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    vertical-align: middle;
}

@media (max-width: 640px) {
    .about-v2-ui-panel { 
        padding: 10px 12px; 
        border-radius: 8px; 
    }
    .about-v2-controls { 
        max-width: 150px; 
    }
    .about-v2-black-hole-info { 
        font-size: 16px; 
        top: 15px; 
    }
    .about-v2-black-hole-info span { 
        font-size: 12px; 
    }
}

/* Aurora Galaxy Video Section */
.about-v2-aurora-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-v2-aurora-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.about-v2-aurora-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.about-v2-aurora-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 20px;
}

.about-v2-aurora-content h2 {
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 20px;
    font-family: 'Lexend', sans-serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.about-v2-aurora-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 30px;
    font-family: 'Lexend', sans-serif;
    color: rgba(255, 255, 255, 0.9);
}

.about-v2-aurora-logo {
    width: 300px;
    height: auto;
    margin-bottom: 30px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

@media (max-width: 768px) {
    .about-v2-aurora-content h2 {
        font-size: 2rem;
    }
    .about-v2-aurora-content p {
        font-size: 1rem;
    }
}

.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: none;
    display: block;
    transition: none;
    transform: none;
    animation: none;
    margin-right: 8px;
}

.brand-logo:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Brand Text */
.brand-text {
    font-weight: 600;
    letter-spacing: -0.5px;
    transition: none;
    transform: none;
    animation: none;
}

/* Nav links container */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*Mobile Navbar*/
.navbar-toggler {
    background: transparent;
    border: none;
}

/* Services Slider Navigation Buttons */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    font-size: 18px;
}

.slider-nav-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

.slider-nav-btn.prev {
    left: 20px;
}

.slider-nav-btn.next {
    right: 20px;
}

/* Mobile navigation collapse background */
.navbar-collapse {
    background-color: #000000 !important;
    padding-bottom: 1rem; /* Add gap at bottom of mobile navbar dropdown */
}

/* Nav links */
.navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', sans-serif;
}

.navbar-nav .nav-link:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    color: transparent !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
    background-color: transparent !important;
    transform: none !important;
}

.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav .nav-item .nav-link.active:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

.nav-link[href="index.html"].active,
.nav-link-mobile[href="index.html"].active {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

/* Remove blue focus outline from navbar links */
.navbar-nav .nav-link:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* ============ HERO SECTION STYLES ============= */

.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 260px 0 0;
}

/* Add gradient fade to hero section bottom */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 20%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.7) 80%,
        rgba(0, 0, 0, 0.9) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.gradient-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 70%;
        height: 100%;
        background: black;
        z-index: 0;
}

.wave-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* First layer - Large diagonal sweep */
.wave-overlay::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 120%;
    height: 140%;
    background: 
        linear-gradient(135deg, 
        transparent 20%, 
        transparent 35%,
        rgba(160, 74, 179, 0.2) 40%,
        rgba(102, 11, 35, 0.3) 45%,
        rgba(160, 74, 179, 0.1) 55%,
        transparent 70%,
        transparent 100%
    );
        animation: diagonalFlow 11s ease-in-out infinite;
        transform-origin: center;
}

/* Second layer - Curved abstract shape */
.wave-overlay::after {
        content: '';
        position: absolute;
        bottom: 5%;
        left: -20%;
        width: 150%;
        height: 100%;
        background: 
        radial-gradient(ellipse 1200px 800px at 30% 80%, 
        rgba(160, 74, 179, 0.2) 30%, 
        rgba(102, 11, 35, 0.15) 35%,
        transparent 60%
    ),
        radial-gradient(ellipse 900px 600px at 80% 30%, 
        rgba(31, 2, 6, 0.18) 0%, 
        transparent 50%
    );
        animation: abstractMove 12s ease-in-out infinite;
        filter: blur(85px);
}

/* Third layer - Dynamic top gradient */
.gradient-background::before {
        content: '';
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translateX(-50%);
        width: 150%;
        height: 80%;
        z-index: 1;
        background: 
        linear-gradient(180deg,
        rgba(102, 11, 35, 0.15) 30%,
        rgba(160, 74, 179, 0.12) 50%,
        transparent 70%
    );
        animation: topFlow 4s ease-in-out infinite;
        filter: blur(80px);
}

    @keyframes diagonalFlow {
        0%, 100% {
        transform: translate(0%, 0%) rotate(0deg);
        opacity: 1;
}
        25% {
        transform: translate(-15%, 10%) rotate(-5deg);
        opacity: 0.8;
}
        50% {
        transform: translate(-25%, 15%) rotate(-8deg);
        opacity: 1;
}
        75% {
        transform: translate(-15%, 8%) rotate(-3deg);
        opacity: 0.9;
}
}

    @keyframes abstractMove {
        0%, 100% {
        transform: translate(0%, 0%) scale(1);
}
        33% {
        transform: translate(15%, -10%) scale(1.1);
}
        66% {
        transform: translate(-10%, 12%) scale(0.7);
}
}

    @keyframes topFlow {
        0%, 100% {
        transform: translateX(-50%) translateY(15%);
}
        50% {
        transform: translateX(-45%) translateY(25%);
}
}


.hero-content {
    z-index: 2;
    position: relative;
}

#model-logo {
  width: 100%;
  max-width: 550px;
  height: 100vh;
  position: relative;
  z-index: 5;
  filter: none !important;
  animation: none !important;
  box-shadow: none !important;
}

#model-logo::part(default-camera) {
transform: rotateX(-90deg);
}

/* Adjust positioning for the container */
.col-lg-5.position-relative {
  padding-left: 100px;
}

/* Responsive adjustments */

@media (min-width: 768px) and (max-width: 820px) {
  #model-logo {
    height: 480px;
    max-width: 420px;
    margin-top: 30px;
    margin-bottom: -35px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 45px;
    justify-content: center !important;
  }
}

@media (min-width: 390px) and (max-width: 430px) {
  #model-logo {
    height: 280px;
    max-width: 250px;
    margin-top: -50px;
    margin-bottom: -50px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 75px;
    justify-content: center !important;
  }
}

@media (min-width: 375px) and (max-width: 414px) {
  #model-logo {
    height: 260px;
    max-width: 220px;
    margin-top: -70px;
    margin-bottom: -45px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 78px;
    justify-content: center !important;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  #model-logo {
    height: 550px;
    max-width: 500px;
    margin-top: 0;
    margin-bottom: 40px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 15px;
  }
}

@media (max-width: 375px) {
  #model-logo {
    height: 240px;
    max-width: 200px;
    margin-top: 0;
    margin-bottom: -70px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 65px;
    justify-content: center !important;
  }
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    
}

.manual-titleposition {
    position: absolute;
    bottom: 15rem;
    left: -10rem; /* Custom stylized position */
    z-index: 3;
    margin: 0;
    font-size: 12rem !important;
    line-height: 1;
    transition: left 0.3s ease-in-out;
}

.manual-subtitleposition {
    position: absolute;
    bottom: 6rem;
    left: 4rem;
    margin: 0;
    font-size: 8rem !important;
    line-height: 1;
    white-space: nowrap;
}

.hero-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.5rem;
    font-weight: 100;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
   
}

.hero-description {
    font-family: 'Lexend', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #b3b3b3;
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 600px;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-btn-primary {
    font-family: 'Lexend', sans-serif;
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: PulseButton 3s ease-in-out 1.6s infinite;
}

    .hero-btn-primary:hover {
        background: #ffffff;
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px  rgba(102, 11, 35, 0.4);
    }

.hero-btn-secondary {
    font-family: 'Lexend', sans-serif;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: PulseButton 3s ease-in-out 1.6s infinite;
}

    .hero-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px  rgba(102, 11, 35, 0.4); 
    }

@keyframes PulseButton {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}   

.manual-descriptionposition {
    position: absolute;
    bottom: -0.5rem;
    left: 4.5rem;
    font-size: 1.75rem;
    max-width: 700px;
    color: #b3b3b3;
    z-index: 3;
}

.manual-buttonposition {
    position: absolute;
    top: -0.6rem;
    left: 4.5rem;
    z-index: 3;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Responsive Fix for Small Screens */
@media (max-width: 1024px) {
    .hero-section {
        padding: 2rem 1rem !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-content {
        padding-top: 2.5rem;
        padding-bottom: 8rem;
        width: 100%;
    }

    .manual-titleposition,
    .manual-subtitleposition,
    .manual-descriptionposition,
    .manual-buttonposition {
        position: static !important;
        margin: 0.5rem auto !important;
        text-align: center;
        width: 85% !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .manual-titleposition {
        font-size: clamp(3.5rem, 9vw, 5rem) !important;
        line-height: 1.1;
    }

    .manual-subtitleposition {
        font-size: clamp(2rem, 7vw, 4rem) !important;
        white-space: normal !important;
        margin-top: -13px !important;
    }

    .manual-descriptionposition {
        font-size: clamp(1rem, 3vw, 1.2rem) !important;
        line-height: 1.5;
    }

    .manual-buttonposition {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        font-size: 14px;
        width: 80% !important;
        justify-content: center;
    }
}

/* ALIGN TITLE WITH SUBTITLE ON ULTRA-WIDE SCREENS */
@media (min-width: 1920px) {
    .manual-titleposition {
        left: 4rem !important; /* aligns with subtitle */
    }
}


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

/* PROJECTS SECTION STYLES */
.projects-section {
    padding: 10px 0;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin-top: -115px;
}

/* Hero to Projects Transition Overlay */
.hero-projects-overlay {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 8%,
        rgba(0, 0, 0, 0.4) 15%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0.75) 35%,
        rgba(0, 0, 0, 0.85) 45%,
        rgba(0, 0, 0, 0.9) 50%,
        rgba(0, 0, 0, 0.85) 55%,
        rgba(0, 0, 0, 0.75) 65%,
        rgba(0, 0, 0, 0.6) 75%,
        rgba(0, 0, 0, 0.4) 85%,
        rgba(0, 0, 0, 0.2) 92%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 2;
    margin-top: -200px;
    margin-bottom: -200px;
    pointer-events: none;
}

    .projects-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        pointer-events: none;
    }

    .projects-section > .container {
        position: relative;
        z-index: 1;
    }


/* Project Cards */
.project-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 250px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-card-small {
    height: 250px;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.project-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.project-card:hover .project-card-bg {
    transform: scale(1.05);
}

.project-card-bg-pc {
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pc::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 150, 136, 0.6) 0%, rgba(0, 188, 212, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-fdas {
    background-image: url('/images/dpc-fdas.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-fdas::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 87, 34, 0.6) 0%, rgba(255, 152, 0, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-cctv {
    background-image: url('/images/dpc-cctv.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-cctv::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

    .project-card-bg-doorlock {
    background-image: url('/images/services/accessControlSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-doorlock::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-pa {
    background-image: url('/images/services/paSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pa::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(156, 39, 176, 0.6) 0%, rgba(186, 104, 200, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-led {
    background-image: url('/images/services/LEDWall.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-led::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(233, 30, 99, 0.6) 0%, rgba(240, 98, 146, 0.4) 100%);
        background-blend-mode: overlay;
    }


.project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    z-index: 2;
}

.project-card-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.project-card-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

.project-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    border-width: 2px;
    background: linear-gradient(90deg, #ff0000, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082, #ee82ee, #ff0000, #ff0000);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

 .project-card-icon :hover{
    /* To make the text itself look like a gradient */
    background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    -webkit-background-clip: text; /* Clip the gradient to the shape of the text */
    background-clip: text; /* Standard property for compatibility */
    -webkit-text-fill-color: transparent; /* Make the text invisible to show the clipped background */
    transform: scale(1.3);
    border-color: rgba(255, 255, 255, 0.2);
 }

.project-card-icon i {
    color: #ffffff !important;
    font-size: 1rem;
}

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

    .projects-description {
        font-size: 1rem;
    }

}

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

    .projects-title,
    .projects-subtitle {
        font-size: 2rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .project-card,
    .project-card-small {
        height: 200px;
    }

    .project-card-title {
        font-size: 1.1rem;
    }

    .project-card-overlay {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .project-card-title {
        font-size: 1rem;
    }

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

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

.projects-header {
    position: relative;
    height: 450px;
    padding: 60px 0;
    margin-bottom: 60px;
    margin-left: -15px;
    margin-right: -15px;
    overflow: visible;
    background-image: url('/images/dpc-project-img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Add gradient fade to projects header top */
.projects-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.1) 85%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.projects-header::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 300px;
    background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
    filter: blur(70px) brightness(1.5);
    z-index: 1;
    opacity: 1.2;
}
.projects-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .projects-header-content {
        padding: 0px 20px;
        position: relative;
        z-index: 2;
        text-align: center;
        margin-top: -200px;
    }
    .projects-header {
        height: 250px;
        margin-top: 9px;
        background-attachment: scroll;
    }
    .projects-header::after {
        content: "";
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
        filter: blur(70px);
        z-index: 1;
    }
}
.projects-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 300;
}

.projects-section-title {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Responsive Design for Header */
@media (max-width: 992px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.8rem;
    }

    .projects-description {
        font-size: 1.1rem;
        padding: 0 2rem;
    }
}

@media (max-width: 768px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.2rem;
    }

    .projects-description {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .projects-section-title {
        font-size: 1.3rem;
    }
}

/* Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

.projects-subtitle {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}





/* === FINAL OVERRIDE for .projects-section-title === */
.projects-section-title {
    margin-top: 50px;
    padding-top: 180px;
    padding-bottom: 50px;
    font-size: 10rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
    opacity: 1; 
}

.projects-section-title:hover{
    transform: translateY(-8px) scale(1.1);
}

@media (max-width: 992px) {
    .projects-section-title {
        font-size: 6rem;
    }
}

@media (max-width: 768px) {
    .projects-section-title {
        font-size: 4rem;
    }
}

@media (max-width: 576px) {
    .projects-section-title {
        font-size: 2.8rem;
    }
}

/* Logo Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

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

/* Responsive Design for Hero Section */
@media (max-width: 992px) {
    .hero-title,
    .hero-subtitle {
        font-size: 3.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 60px 0;
        text-align: center;
        background-color: #000000;
        margin-top: 5rem;
    }

    .hero-title,
    .hero-subtitle {
        font-size: 2.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-title,
    .hero-subtitle {
        font-size: 2rem;
        
    }

    .hero-logo {
        width: 150px;
        height: 150px;
    }

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

/* Main content area */
.main-content {
    min-height: calc(100vh - 140px);
    padding: 2rem 0;
    margin-top: 90px; /* Same as navbar height */
}

/* Container adjustments */
.container {
    max-width: 1200px;
}

/* Remove default margins from headings */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}

/* Button styles */
.btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0a58ca;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
    }

/* Card styles */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }

/* Footer styles */
footer {
    background-color: #000000 !important;
    margin-top: auto;
}
footer a {
    transition: color 0.3s ease;
}
footer a:hover {
    color: #0d6efd !important;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .CompanyInfo-footer, .CompanyServices-footer {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        padding-bottom: 15px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .brand-text {
        display: none;
    }

    .brand-logo {
        width: 32px;
        height: 32px;
        
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0;
    }

    body {
        padding-top: 70px;
    }
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Utility classes */
.text-gradient {
    background: linear-gradient(45deg, #0d6efd, #6610f2);
    -webkit-text-fill-color: transparent;
}

.shadow-custom {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Focus states for accessibility */
.nav-link:focus,
.btn:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Contact Hero Section */
.contact-hero {
    min-height: 100vh;
    background: #000000;
    display: flex;
    align-items: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

    .contact-hero .container {
        position: relative;
        z-index: 2;
    }

/* Hero Title */
.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-align: center;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
 }


.sync-text {
    background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Hero Subtitle */
.hero-subtitle {
    font-family: 'Lexend', sans-serif;
    font-size: 1.2rem;
    color: white;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* Contact Form Container */
.contact-form-container {
    background: #000000;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #FDFDFD;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 20px rgba(255, 102, 102, 0.3), 0 0 40px rgba(255, 137, 76, 0.2), 0 0 60px rgba(144, 255, 85, 0.2), 0 0 80px rgba(123, 148, 246, 0.2), 0 0 100px rgba(255, 119, 241, 0.2);
}

    .contact-form-container::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
        background-size: 300% 300%;
        border-radius: 20px;
        z-index: -1;
        animation: gradientShift 3s ease-in-out infinite;
    }

    .contact-form-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000000;
        border-radius: 18px;
        z-index: -1;
    }

/* Form Inputs */
.contact-input,
.contact-textarea {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #ffffff;
    padding: 15px 20px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .contact-input:focus,
    .contact-textarea:focus {
        background: rgba(255, 255, 255, 0.05);
        border-color: #4ecdc4;
        box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
        color: #ffffff;
    }

    .contact-input::placeholder,
    .contact-textarea::placeholder {
        color: rgba(255, 255, 255, 0.6);
        font-family: 'Lexend', sans-serif;
    }

.contact-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Submit Button */
.contact-submit-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #ffffff;
    padding: 15px 40px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
}

    .contact-submit-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #4ecdc4;
        color: #4ecdc4;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
    }

    .contact-submit-btn:active {
        transform: translateY(0);
    }

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

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .contact-form-container {
        padding: 30px 20px;
        margin: 0 15px;
    }

    .contact-input,
    .contact-textarea {
        padding: 12px 15px;
    }

    .contact-submit-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
        
    }

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

    .contact-form-container {
        padding: 25px 15px;
    }
}


/* Social Icons Container */
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: nowrap;
}

/* Individual Social Icon Styling */
.social-icon {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
    transform: translateY(0);
}

    /* Hover state for the container */
    .social-icon:hover {
        transform: translateY(-8px) scale(1.1);
    }

    /* Icon image styling */
    .social-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: all 0.3s ease;
        filter: brightness(0.9);
    }

    /* Image hover effect - Glowing lines/outlines */
    .social-icon:hover img {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
        animation: glowPulse 2s ease-in-out infinite;
    }

/* Pulsing glow animation */
@keyframes glowPulse {
    0%, 100% {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
    }

    50% {
        filter: brightness(1.4) contrast(1.2) drop-shadow(0 0 12px #FF6666) drop-shadow(0 0 16px #FF894C) drop-shadow(0 0 20px #90FF55) drop-shadow(0 0 24px #7B94F6) drop-shadow(0 0 28px #FF77F1);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .social-icons {
        gap: 15px;
        padding: 15px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .social-icons {
        gap: 10px;
        padding: 10px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 45px;
        height: 45px;
    }
}

/* Address styling with Lexend font */
address {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem; /* small font size */
    margin-bottom: 1rem; /* mb-3 equivalent */
    font-style: normal; /* Remove default italic styling from address element */
    line-height: 1.5;
}

/* Gradient hover for address */
address.text-white:hover {
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}

/* Alternative class-based approach if you prefer */
.address-lexend {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    font-style: normal;
    line-height: 1.5;
}

/* Menu and Help Center Section Headers */
.col-md-2 h6 {
    font-family: 'Lexend', sans-serif;
    color: #000000;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Menu and Help Center Lists */
.col-md-2 ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Menu and Help Center List Items */
.col-md-2 ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

/* Menu and Help Center Links */
.col-md-2 ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Hover effects for links */
.col-md-2 ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* Gradient hover for CompanyServices-footer links */
.CompanyServices-footer a:hover {
    color: transparent !important;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
}

/* Alternative more specific selectors if needed */
.menu-section h6,
.help-center-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #555555;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.menu-section ul,
.help-center-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-section ul li,
.help-center-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.menu-section ul li a,
.help-center-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.menu-section ul li a:hover,
.help-center-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* General footer section styling with Lexend */
.footer-section {
    font-family: 'Lexend', sans-serif;
}

.footer-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #ffffff;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.footer-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.footer-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.footer-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/*============= SERVICES =============*/

.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.offers-firsttitle {
    font-family: 'Lexend', sans-serif;
    font-size: 3rem;
    font-weight: 200;
    color: #ffffff;
    margin-bottom: 0;
    animation: fadeInDown 0.8s ease-out;
}

.offers-secondpctitle {
    background: linear-gradient(to right, #a7363c, #671C68, #7B54B1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondcctvtitle {
    background: linear-gradient(to right, #5CE1FF, #5CFFB8, #56D86A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondfdastitle {
    background: linear-gradient(to right, #FF6666, #C34814, #F3A335);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-seconddoorlocktitle {
    background: linear-gradient(to right, #BA1022, #EC0120, #FD6A59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.video-overlay-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.video-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: white;
    
}

/* RESPONSIVE - Video Overlay */

/* Ultra-wide screens (1440px+) */
@media (min-width: 1440px) {
    .video-overlay-title {
        font-size: 5rem;
        margin-bottom: 1.5rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 18px 48px;
        font-size: 1.1rem;
    }
}

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .video-overlay-title {
        font-size: 4.5rem;
        margin-bottom: 1.3rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.3rem;
        margin-bottom: 1.8rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 16px 44px;
        font-size: 1rem;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .video-overlay-title {
        font-size: 4rem;
        margin-bottom: 1.2rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.6rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 15px 40px;
        font-size: 0.95rem;
    }
}

/* Tablet landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .video-overlay-title {
        font-size: 3rem;
        margin-bottom: 1rem;
        text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 1rem;
        margin-bottom: 1.4rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 36px;
        font-size: 0.9rem;
    }
}

/* Tablet portrait (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 12px 32px;
        font-size: 0.85rem;
    }
}

/* Mobile large (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2rem;
        margin-bottom: 0.7rem;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 11px 28px;
        font-size: 0.8rem;
    }
}

/* Mobile small (320px - 479px) */
@media (max-width: 479px) {
    .video-overlay-container {
        height: 100vh; /* Increased from 60vh to 80vh for taller mobile video section */
    }
    
    .video-overlay-content {
        padding: 0 2rem; /* Increased padding for mobile */
        text-align: center; /* Center align content on mobile */
        width: 90%; /* Ensure content doesn't reach edges */
    }
    
    /* Fix about video for mobile */
    .about-video {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 250px !important;
        object-fit: cover;
        margin-top: 0 !important;
    }
    
    .col-lg-5.col-md-12.d-flex.justify-content-center.align-items-start.position-relative {
        width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Stack mission and vision cards vertically on mobile */
    .mission-vision-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Center projects header text on mobile */
    .projects-header {
        height: auto !important;
        min-height: 100vh;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-attachment: scroll !important;
    }
    
    .projects-header-content {
        margin-top: 0 !important;
        padding: 2rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: auto !important;
    }
    
    .video-overlay-title {
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.75rem;
        margin-bottom: 0.9rem;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 10px 24px;
        font-size: 0.75rem;
    }
}

/* ENHANCED TITLE ANIMATION */
.video-overlay-title {
    font-family: "Space Grotesk";
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    animation: titleEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               titleGlow 3s ease-in-out 1.2s infinite;
    opacity: 0;
}

/* Title entrance animation with bounce effect */
@keyframes titleEntrance {
    0% {
        opacity: 0;
        transform: translateY(-80px) scale(0.5) rotateX(90deg);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: translateY(10px) scale(1.05) rotateX(-5deg);
        filter: blur(0px);
    }
    80% {
        transform: translateY(-5px) scale(0.98) rotateX(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0px);
    }
}


@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 30px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 50px rgba(255, 255, 255, 0.6),
                     0 0 70px rgba(172, 56, 56, 0.4);
    }
}

.video-overlay-subtitle {
    font-family: "Lexend";
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    animation: subtitleFade 1s ease-out 0.3s backwards;
}

@keyframes subtitleFade {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


.video-overlay-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 50px;
    font-family: "Lexend";
    font-weight: 400;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    position: relative;
    overflow: hidden;
    animation: buttonEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulse 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


@keyframes buttonEntrance {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}


.video-overlay-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}


.video-overlay-button:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.7),
                0 0 50px rgba(172, 56, 56, 0.4);
    
}

.video-overlay-button:hover::before {
    animation: shimmer 1s infinite;
}

.video-overlay-button:active {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.6);
}

/* Ripple effect on click */
.video-overlay-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s, opacity 0.6s;
    opacity: 0;
}

.video-overlay-button:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}
/* ANIMATIONS */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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


@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* SLIDER CONTAINER STYLES */
.services-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000000;
    margin-top: 0;
    padding-top: 5px;
}

.services-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 400%;
}

/* 2. The Wrapper (The Sliding Track) */
#sliderWrapper {
    display: flex;          /* CRITICAL: Lines the slides (sections) up horizontally */
    width: 400%;            /* Total width: 4 slides * 100% = 400% */
    height: 100%;
    /* CRITICAL: This property makes the transition smooth */
    transition: transform 0.6s ease-in-out; 
}

/* 3. The Individual Slides (The content sections) */
#sliderWrapper > .offers-section {
    width: 25%;             /* Each slide takes up 1/4 of the 400% width */
    flex-shrink: 0;         /* CRITICAL: Prevents the slides from shrinking */
    height: 100%;
    box-sizing: border-box; 
    /* You may want to add overflow-y: auto; here if content might exceed the height */
}

/* SLIDER INDICATORS */
.slider-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    animation: indicatorPulse 2s ease-in-out infinite;
}

.indicator.active {
    background: white;
    transform: scale(1.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: none;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

@keyframes indicatorPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* COMPANY OFFER SECTION STYLES */
.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
    flex: 0 0 25%;
    width: 25%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    margin-top: -70px;
    transform: translateY(0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    position: relative;
}

.offers-section.active {
    opacity: 1;
    transform: translateY(0);
}

.offers-section.d-none {
    display: none !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.offers-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* MAP STYLES WITH ANIMATIONS */
.map-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem 0;
    width: 100%;
    overflow-x: hidden;
}

.map-scaler {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.map-scaler-inner {
    position: relative;
    width: 300px;
    height: 523px;
    transform: scale(calc(min(100vw, 1400px) / 1400));
    transform-origin: top center;
}

.map-container {
    position: absolute;
    width: 300px;
    height: 523px;
    top: 0;
    left: 0;
    animation: mapAppear 1.2s ease-out;
}

@keyframes mapAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

.label {
    position: absolute;
    color: white;
    text-align: center;
    animation: labelSlideIn 0.8s ease-out backwards;
}

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

.label-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.label-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.count-count {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    animation: countUp 1.5s ease-out;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.count-text {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 1;
}

.pc-icon {
    width: 94px;
    height: auto;
    animation: floatAnimation 3s ease-in-out infinite;
}

.left-label {
    top: 50%;
    left: -250px;
    transform: translateY(-50%);
    animation-delay: 0.2s;
}

.right-label.top {
    top: 60px;
    right: -250px;
    animation-delay: 0.4s;
}

.right-label.bottom {
    bottom: 100px;
    right: -350px;
    animation-delay: 0.6s;
}

.line-image {
    position: absolute;
    width: 160px;
    height: auto;
    transform: translateY(-100%);
    transform-origin: bottom left;
    animation: drawLine 1s ease-out backwards;
}

@keyframes drawLine {
    from {
        opacity: 0;
        transform: translateY(-100%) scaleY(0);
    }
    to {
        opacity: 1;
        transform: translateY(-100%) scaleY(1);
    }
}

/* GRADIENT BUTTONS */
.gradientpccolor-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 25%, #7B54B1 75%, #000000 100%);
}

.gradientcctvcolor-button {
    background: linear-gradient(135deg, #5CE1FF 0%, #5CFFB8 25%, #56D86A 75%, #000000 100%);
}

.gradientfdascolor-button {
    background: linear-gradient(135deg, #FF6666 0%, #C34814 25%, #F3A335 75%, #000000 100%);
}

.gradientdoorlockcolor-button {
    background: linear-gradient(135deg, #BA1022 0%, #EC0120 25%, #FD6A59 75%, #000000 100%);
}

.gradient-button {
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(172, 56, 56, 0.3);
    outline: none;
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    animation: buttonAppear 0.8s ease-out 0.8s backwards;
}

@keyframes buttonAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gradient-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(172, 56, 56, 0.4);
}

.gradient-button:active {
    transform: translateY(0);
}

/* GRADIENT LOOP WITH SHADOW */
@keyframes gradientCycle {
    0% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(0deg);
    }
    50% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(180deg);
    }
    100% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(360deg);
    }
}

.glow-gradient {
    border: none;
    border-radius: 0;
    animation: gradientCycle 6s linear infinite;
    transition: all 0.3s ease-in-out;
}

/* Responsive fallback */
@media (max-width: 600px) {
    .left-label,
    .right-label.top,
    .right-label.bottom {
        position: static;
        text-align: center;
        margin-top: 1rem;
        transform: none;
    }

    .label-content {
        justify-content: center;
    }

    .line-image {
        display: none;
    }

    .offers-firsttitle {
        font-size: 2.5rem;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }

    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}

/* RESPONSIVE - Keep PC design at any screen size */

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .map-scaler-inner {
        transform: scale(0.85);}
    .offers-firsttitle {
        font-size: 2.5rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }
    .left-label,
    .right-label.top,
    .right-label.bottom {
        font-size: 1rem;
    }
    .gradient-button{
        margin-top: -70px !important;
        padding: 15px 25px !important;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .offers-section {
        margin-top: -20px;
    }
    .map-scaler-inner {
        transform: scale(0.68);
        margin-top: -50px;
    }
    .offers-firsttitle {
        font-size: 2rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2.5rem;
    }
    .gradient-button{
        margin-top: -170px;
        padding: 11px 25px;
        font-size: 1rem;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.95rem;
    }

            .fp-wrapper {
                padding: 0 1rem;
            }

            .fp-main-section {
                padding: 60px 0;
            }

            .fp-header-title {
                font-size: clamp(24px, 4vw, 32px);
                margin-bottom: 25px;
            }

            .fp-card {
                height: 450px !important;
            }

            .fp-card-category {
                font-size: 12px !important;
            }

            .fp-card-content {
                padding: 20px !important;
            }

            .fp-card-title {
                font-size: 1.4rem !important;
                margin-bottom: 10px !important;
            }

            .fp-card-description {
                font-size: 0.80rem !important;
                margin-bottom: 18px;
            }

            .fp-card-tag {
                font-size: 12px !important;
                margin: auto;
                margin-top: -10px;
            }
            }

            .fp-image-wrapper {
                height: 170px !important;
            }

            .fp-all-button {
                margin-top: -20px;
                padding: 12px 30px !important;
                font-size: 15px !important;
            }


@media (max-width: 540px) {
    .offers-section {
        padding: 30px 15px;
        margin-top: -60px !important;
    }

    .offers-header {
        margin-bottom: 30px;
    }

    .offers-firsttitle {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    /* ===== MAP CONTAINER ===== */
    .map-wrapper {
        margin-bottom: 40px;
        position: relative;
        overflow: visible !important;
        padding: 0 100px;
        margin-left: 50px;
    }

    .map-scaler {
        padding: 0;
        position: relative;
        width: 100%;
        overflow: visible !important;
        margin: auto;
    }

    .map-scaler-inner {
        transform: scale(0.85) !important;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        width: 100%;
        height: auto;
        overflow: visible !important;
        margin: auto;
    }

    .map-container {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible !important;
    }

    .map-image {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* ===== DOTTED LINES ===== */
    .line-image {
        position: absolute !important;
        max-width: 60px;
        height: auto;
    }

    /* ===== LABELS/METRICS ===== */
    .label {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .label-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .label-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .count-count {
        font-size: 1.8rem;
        font-weight: bold;
        white-space: nowrap;
    }

    .count-text {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .pc-icon {
        width: 50px;
        height: 50px;
    }

    /* Position labels specifically for mobile */
    .left-label {
        left: 10px;
        top: 55%;
        transform: translateY(-50%);
    }

    .right-label.top {
        right: 10px;
        top: 30%;
        transform: translateY(-50%);
    }

    .right-label.bottom {
        right: 10px;
        bottom: 28%;
        transform: translateY(50%);
    }

    /* ===== BUTTON ===== */
    .gradient-button {
        padding: 12px 32px;
        font-size: 0.9rem;
        margin-top: -100px !important;
        width: auto;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 2.3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.85rem;
    }
}

/* Tablets landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .offers-section{
        margin-top: -80px !important;
    }
    .map-scaler-inner {
        transform: scale(0.90);
    }
    
    .left-label {
        left: -150px;
    }
    
    .right-label.top {
        right: -100px;
        top: -30px;
    }
    
    .right-label.bottom {
        right: -190px;
        top: 220px;
    }
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
        margin-left: -100px !important;
        margin-top: 150px !important;
    }
     .gradient-button {
        padding: 14px 28px;
        font-size: 20px;
        margin-top: 40px !important;
    }

}

/* Tablets portrait (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .map-scaler-inner {
        transform: scale(0.65);
    }
    
    .left-label {
        left: -180px;
    }
    
    .right-label.top {
        right: -180px;
    }
    
    .right-label.bottom {
        right: -220px;
    }
    
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
    }
}

/* Mobile large (361px - 480px) */
@media (max-width: 480px) {
    .offers-section {
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.70) !important;
        margin-left: -60px;
    }
    
    .map-wrapper {
        padding: 2rem 0;
    }
    
    .left-label {
        left: -50px;
    }
    
    .right-label.top {
        right: -30px;
        margin-top: -20px;
        position: absolute;
    }
    
    .right-label.bottom {
        margin-right: -100px !important;
        bottom: 150px;
        position: absolute;
    }
    
    .count-count {
        font-size: 40px;
    }
    
    .count-text {
        font-size: 18px;
    }
    
    .pc-icon {
        width: 60px;
    }
    
    .line-image {
        width: 120px;
    }
    
    .offers-firsttitle {
        font-size: 2rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2.5rem;
    }
    
    .gradient-button {
        padding: 14px 28px;
        font-size: 16px;
    }
}

/* Mobile small (320px - 360px) */
@media (max-width: 360px) {
    .offers-section {
        padding: 40px 0;
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.65) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    
    .left-label {
        left: -70px;
    }
    
    .right-label.top {
        margin-right: 30px;
        margin-top: 20px !important;
    }
    
    .right-label.bottom {
        margin-right: -90px !important;
        bottom: 120px;
        position: absolute;
    }
    
    .count-count {
        font-size: 32px;
    }
    
    .count-text {
        font-size: 16px;
    }
    
    .pc-icon {
        width: 50px;
    }
    
    .line-image {
        width: 100px;
    }
    
    .offers-firsttitle {
        font-size: 1.5rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2rem;
    }
    
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -210px !important;
    }
}

@media (max-width: 375px) {
    .offers-section {
        padding: 40px 0;
    }
    
    .map-scaler-inner {
        transform: scale(0.60) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -260px !important;
    }
}

@media (min-width: 912px) {
            .fp-wrapper {
                padding: 0 2rem;
                max-width: 600px;
            }

            .fp-main-section {
                padding: 80px 0;
            }

            .fp-header-title {
                font-size: clamp(28px, 5vw, 40px);
                margin-bottom: 30px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                margin-bottom: 40px;
            }

            .fp-card-content {
                padding: 30px;
            }

            .fp-card-title {
                font-size: 1.8rem;
                margin-bottom: 15px;
            }

            .fp-card-description {
                font-size: 1rem;
                line-height: 1.6;
                margin-bottom: 20px;
            }

            .fp-image-wrapper {
                height: 280px;
            }

            .fp-all-button {
                padding: 16px 50px;
                font-size: 18px;
            }
        }

        /* Tablet Medium (853px to 911px) */
        @media (min-width: 853px) and (max-width: 911px) {
            .fp-wrapper {
                padding: 0 1.5rem;
                max-width: 90px;
            }

            .fp-main-section {
                padding: 70px 0;
            }

            .fp-header-title {
                font-size: clamp(26px, 4.5vw, 36px);
                margin-bottom: 28px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 16px;
                margin-bottom: 35px;
            }

            .fp-card-content {
                padding: 26px;
            }

            .fp-card-title {
                font-size: 1.6rem;
                margin-bottom: 13px;
            }

            .fp-card-description {
                font-size: 0.95rem;
                line-height: 1.6;
                margin-bottom: 18px;
            }

            .fp-image-wrapper {
                height: 260px;
            }

            .fp-all-button {
                padding: 15px 48px;
                font-size: 17px;
            }
        }


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

/* GLOBAL RESET/BEST PRACTICE for Responsiveness */
* {
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* ========================================================================= */
/* CORE SHOWCASE BLOCK & FONT SCALING */
/* ========================================================================= */

.core-showcase-block {
    background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
    /* Use relative padding unit for vertical spacing, scales better than a fixed 120px */
    padding: 10vh 0; 
    position: relative;
    overflow: hidden;
}

.core-showcase-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.core-showcase-block::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    animation: core-pulse-bg 8s ease-in-out infinite;
}

@keyframes core-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

.showcase-header {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.showcase-subtext {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 3rem; /* Reduced from 4rem */
    font-weight: 300;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
}

.concept-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease-out, transform 0.8s ease-out;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none; 
}

.concept-tile:nth-child(1) { transition-delay: 0.1s; }
.concept-tile:nth-child(2) { transition-delay: 0.2s; }
.concept-tile:nth-child(3) { transition-delay: 0.3s; }
.concept-tile:nth-child(4) { transition-delay: 0.4s; }
.concept-tile:nth-child(5) { transition-delay: 0.5s; }
.concept-tile:nth-child(6) { transition-delay: 0.6s; }

.showcase-tile-container {
    /* Auto-fit is the key for responsiveness here */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.concept-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.concept-tile::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(172, 56, 56, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.concept-tile:hover {
    transform: translateY(-15px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
}

.concept-tile:hover::before {
    transform: scaleX(1);
}

.concept-tile:hover::after {
    width: 400px;
    height: 400px;
}

.concept-tile:hover .concept-icon-wrap {
    transform: scale(1.1) rotateY(360deg);
}

.concept-tile:hover .concept-icon-wrap svg {
    animation: icon-bounce 0.6s ease;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.concept-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.concept-icon-wrap svg {
    width: 40px;
    height: 40px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.concept-title-text {
    font-family: "Space Grotesk";
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-title-text {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.concept-detail-text {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-detail-text {
    color: #ccc;
}

/* ========================================================================= */
/* METRIC SHOWCASE ZONE */
/* ========================================================================= */

.metric-showcase-zone {
    font-family: "Space Grotesk";
    background: #000000;
    padding: 100px 0;
    position: relative;
}

.data-figure-layout {
    /* Auto-fit is great here, scales well */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.figure-unit-card {
    text-align: center;
    animation: slightFloat 3s ease-in-out infinite alternate; 
}

.figure-unit-card:nth-child(even) {
    animation-delay: 0.3s;
}

.figure-unit-card:nth-child(3n) {
    animation-delay: 0.9s;
}

.figure-count-value {
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.figure-description-text {
    font-size: 1.2rem;
    color: white;
    font-weight: 300;
}

@keyframes slightFloat {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

/* ========================================================================= */
/* PROCESS SECTION */
/* ========================================================================= */

.process-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.container-our {
    text-align: center;
}

.section-title-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    
}

.section-subtitle-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 50px; /* Reduced from 100px */
    font-weight: 300;
    position: relative;
    z-index: 2;
    animation: subtext-slide-in 1s ease-out 0.2s backwards; 
}

.process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(103, 28, 104, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 60% 70%, rgba(123, 84, 177, 0.1) 0%, transparent 40%);
    animation: gradientShift 10s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.process-timeline {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.process-step {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
    position: relative;
    opacity: 0; 
    transform: translateX(0); 
    transition: none; 
}

.process-step.animate-left {
    animation: stepSlideIn 0.8s ease-out forwards; 
}

.process-step:nth-child(even).animate-right {
    animation: stepSlideInRight 0.8s ease-out forwards;
}


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

.process-step:nth-child(even) {
    flex-direction: row-reverse;
}

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

.step-number {
    font-family: "Space Grotesk";
    width: 60px;
    height: 60px;
    color: white;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
    transition: all 0.4s ease;
}

.process-step:hover .step-number {
    transform: scale(1.15) rotateZ(360deg);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.step-content {
    color: white;
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.step-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.process-step:hover .step-content {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(172, 56, 56, 0.3);
    transform: translateX(10px);
}

.process-step:nth-child(even):hover .step-content {
    transform: translateX(-10px);
}

.process-step:hover .step-content::before {
    opacity: 1;
}

.step-title {
    font-family: "Space Grotesk";
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.process-step:hover .step-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step-description {
    font-family: "Lexend";
    color:white;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.process-step:hover .step-description {
    color: #ccc;
}

/* ========================================================================= */
/* FUTURE PROJECTS (FP) SECTION */
/* ========================================================================= */

.fp-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.fp-main-section {
    padding: 80px 0; /* Reduced from 120px 0 */
    position: relative;
    overflow: hidden;
}

.fp-main-section::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(123, 84, 177, 0.05) 0%, transparent 50%);
    animation: fp-pulse-bg 12s ease-in-out infinite;
}

@keyframes fp-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

/* ------------------------------------------------ */
/* SCROLL ANIMATION STARTING STATES (HIDDEN) */
/* ------------------------------------------------ */

/* The hidden class sets the initial position and opacity, which is then animated away */
.hidden-scroll {
    opacity: 0;
    /* Use 'will-change' for performance hint */
    will-change: transform, opacity; 
}

/* Header Hidden State */
.fp-header-title.hidden-scroll {
    transform: translateY(-30px);
}

/* Card Hidden State */
.fp-card.hidden-scroll {
    transform: translateY(50px) scale(0.9);
}

/* Button Link Hidden State */
.fp-all-projects-link.hidden-scroll {
    transform: translateY(30px);
}


/* ------------------------------------------------ */
/* SCROLL ANIMATION TRIGGERED STATES (VISIBLE) */
/* ------------------------------------------------ */

/* The animated class applies the animation keyframe */

/* Header Animation Trigger */
.fp-header-title.animated {
    animation: fp-header-slide-in 1s ease-out forwards;
}

/* Card Animation Trigger */
.fp-card.animated {
    /* The animation-delay is set dynamically by JavaScript based on data-delay */
    animation: fp-card-fade-in 0.9s ease-out forwards;
}

/* Button Link Animation Trigger */
.fp-all-projects-link.animated {
    animation: fp-btn-fade-in 1s ease-out forwards;
}


/* ------------------------------------------------ */
/* ORIGINAL KEYFRAMES (Keep these as they are) */
/* ------------------------------------------------ */

@keyframes fp-header-slide-in {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fp-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fp-btn-fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------------ */
/* REST OF ORIGINAL STYLES (Keep as they are) */
/* ------------------------------------------------ */

.fp-header-title {
    font-family: "Space Grotesk";
    color: white;
    text-align: left;
    /* Fluid font size: min 28px, preferred 5vw, max 40px */
    font-size: clamp(28px, 5vw, 40px); 
    font-weight: 500;
    margin-bottom: 30px; /* Reduced from 50px */
    position: relative;
    z-index: 2;
}

.fp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px; /* Reduced from 40px */
    position: relative;
    z-index: 2;
    margin-bottom: 40px; /* Reduced from 60px */
}

.fp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.fp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
    z-index: 2;
}

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

.fp-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.fp-image-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.fp-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.fp-card:hover .fp-card-image {
    transform: scale(1.1) rotate(2deg);
}

.fp-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-card:hover .fp-image-overlay {
    opacity: 1;
}

.fp-view-button {
    padding: 9px 28px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.fp-card:hover .fp-view-button {
    transform: translateY(0);
    opacity: 1;
}

.fp-view-button:hover {
    transform: translateY(0) scale(1.05);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.5);
}

.fp-card-content {
    padding: 30px;
}

.fp-card-category {
    font-family: "Lexend";
    display: inline-block;
    padding: 6px 16px;
    background: rgba(172, 56, 56, 0.2);
    border: 1px solid rgba(172, 56, 56, 0.4);
    border-radius: 20px;
    font-size: 14px;
    color: #AC3838;
    margin-bottom: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-category {
    background: rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.6);
}

.fp-card-title {
    font-family: "Space Grotesk";
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fp-card-description {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.fp-card:hover .fp-card-description {
    color: #ccc;
}

.fp-card-tags {
    font-family: "Lexend";
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fp-card-tag {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    font-size: 13px;
    color: #999;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-tag {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(172, 56, 56, 0.3);
    color: #bbb;
}

.fp-all-projects-link {
    text-align: center;
    position: relative;
    z-index: 2;
}

.fp-all-button {
    font-family: "Lexend";
    padding: 16px 50px;
    background: transparent;
    border: 2px solid rgba(172, 56, 56, 0.5);
    border-radius: 30px;
    color: white;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.fp-all-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    z-index: -1;
}

.fp-all-button:hover {
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.fp-all-button:hover::before {
    width: 300px;
    height: 300px;
}


    

/* ========================================================================= */
/* FAQ SECTION */
/* ========================================================================= */

.faq-section {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.container-faq {
    text-align: center;
}

.section-title-faq {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-subtitle-faq {
    font-family: "Lexend";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 4rem;
    font-weight: 300;
    position: relative;
    z-index: 2;
}

.faq-container {
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.faq-item {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    margin-bottom: 30px;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* --- NEW SCROLL ANIMATION CSS --- */

/* 1. Initial State (Hidden and slightly offset) */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}

/* 2. Target State (Visible and in final position) - added by JavaScript */
.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Staggered Delay for FAQ items */
.faq-item.scroll-animate:nth-child(1) { transition-delay: 0.1s; }
.faq-item.scroll-animate:nth-child(2) { transition-delay: 0.2s; }
.faq-item.scroll-animate:nth-child(3) { transition-delay: 0.3s; }
.faq-item.scroll-animate:nth-child(4) { transition-delay: 0.4s; }
.faq-item.scroll-animate:nth-child(5) { transition-delay: 0.5s; }

.section-title-faq.scroll-animate { transition-delay: 0s; }
.section-subtitle-faq.scroll-animate { transition-delay: 0.1s; }

/* Existing FAQ styles */

.faq-item:hover {
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.15);
}

.faq-item.active {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(172, 56, 56, 0.4);
}

.faq-question {
    font-family: "Space Grotesk";
    padding: 25px 30px;
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

.faq-question::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #AC3838, #671C68, #7B54B1);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::before {
    transform: scaleY(1);
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 35px;
}

.faq-answer {
    font-family: "Lexend";
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    color: white;
}

.faq-item.active .faq-answer {
    padding: 0 30px 25px;
    max-height: 500px;
}

.faq-toggle {
    font-size: 1.5rem;
    transition: all 0.4s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(172, 56, 56, 0.2);
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #AC3838, #7B54B1);
}

.faq-section {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.faq-section::after {
    content: "";
    position: absolute;
    bottom: 310px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}

/* ========================================================================= */
/* MEDIA QUERIES FOR RESPONSIVENESS */
/* ========================================================================= */

@media (max-width: 1024px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 150px !important; /* Slight reduction for tablets */
    }
}




/* Tablet and Smaller Devices (Max Width 992px) */
@media (max-width: 992px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 350px !important; /* Slight reduction for tablets */
    }
}

@media (min-width: 853px) and (max-width: 991px) {
    .data-figure-layout {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        padding: 0 1rem;
    }
    
    .figure-count-value {
        font-size: 3rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
}

@media (max-width: 550px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 200px !important; /* Slight reduction for tablets */
    }
}

/* Mobile Devices (Max Width 768px) */
@media (max-width: 768px) {
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 60px 0; /* Consistent vertical padding for mobile */
    }
    
    .showcase-tile-container {
        /* Force single column for a better mobile experience */
        grid-template-columns: 1fr; 
        gap: 15px;
    }
    
    .concept-tile {
        padding: 25px 20px; /* Reduced tile padding */
    }

    .showcase-subtext, 
    .section-subtitle-faq {
        margin-bottom: 2rem;
    }

    /* Metrics Section - Smaller font and less float */
    .figure-count-value {
        font-size: 2rem; 
    }
    
    .data-figure-layout {
        gap: -50px;
    }

    /* Process Timeline - Vertical stacking for mobile */
    .process-step {
        flex-direction: column; /* Stacks number and content vertically */
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }

    .process-step:nth-child(even) {
        flex-direction: column; /* Removes the row-reverse from even items */
    }
    
    /* Remove horizontal translations on hover for stacked layout */
    .process-step:hover .step-content,
    .process-step:nth-child(even):hover .step-content {
        transform: none; 
    }
    
    .step-number {
        margin: 0 auto 15px; /* Center the number circle and add space below */
    }
    
    .step-content {
        padding: 20px;
    }

    /* FAQ Section */
    .faq-question {
        font-size: 1rem;
        padding: 20px 25px;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 25px 20px;
    }

    /* Future Projects Card Grid - Single column on mobile */
    .fp-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .fp-card-content {
        padding: 20px;
    }
    
    .fp-image-wrapper {
        height: 220px;
    }

    .fp-all-button {
        padding: 12px 30px; 
        font-size: 16px;
    }
}

/* Small Mobile Devices (Max Width 480px) */
@media (max-width: 480px) {
    /* Reduce all main section padding further */
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 40px 0;
    }

    /* Adjust main wrapper padding for very small screens */
    .showcase-tile-container, 
    .data-figure-layout, 
    .process-timeline, 
    .faq-container, 
    .fp-wrapper {
        padding: 0 1rem; /* Minimum horizontal padding */
    }

    /* Further compress header elements */
    .showcase-subtext,
    .section-subtitle-our,
    .section-subtitle-faq {
        margin-bottom: 25px;
    }
    
    /* Metric Values */
    .figure-count-value {
        font-size: 2.2rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
    
    .concept-title-text {
        font-size: 1.3rem;
    }
    
    .fp-card-title {
        font-size: 1.5rem;
    }
}

/*============= END ==================*/
    
/* And MANY MORE SECTION STYLES */
.andmanymore-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.andmanymore-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 5rem;
    font-weight: 500;
    margin-top: -0.8rem;
    color: #ffffff;
}

.andmanymore-paragraph p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.9rem;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 2rem;
    color: #cccccc;
    line-height: 1.6;
    font-weight: 300;
}
/* Responsive tweak */
@media (max-width: 768px) {
    .andmanymore-paragraph p {
        font-size: 0.95rem;
        padding: 0 1rem;
    }
}

/* Stats container styling */
.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
    margin-top: 3rem;
    text-align: center;
}

/* Each stat item */
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 150px;
}

/* Gradient icon replacing image */
.icon-gradient {
    width: 107px;
    height: 107px;
    background: linear-gradient(90deg, #FF6666, #66BFFF, #FF66C7, #FF6666, #66BFFF, #FF66C7, #FF6666 );
    background-size: 200% 100%; /* Full span of duplicated colors */
    animation: gradientSlideSeamless 2s linear infinite;
    /* PNG mask */
    -webkit-mask-image: var(--img);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--img);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-bottom: 1rem;
}
/* Number styling */
.stat-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

/* Label styling */
.stat-label {
    font-family: 'Lexend', sans-serif;
    font-size: 2rem;
    color: #ffffff;
    font-weight: 400;
}

@keyframes gradientSlideSeamless {
    0% {
        background-position: 0% 50%;
    }

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



/* Responsive adjustments */
@media (max-width: 768px) {
    .andmanymore-title {
        font-size: 2.5rem;
        margin-top: -2rem;
    }

    .stat-item {
        max-width: 120px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.875rem;
    }

    .stat-item img {
        width: 40px;
        height: 40px;
    }

    .title-strength {
        width: 100%;
        font-size: 2.9rem !important;
        margin-top: -3rem !important;
    }

}


/* Company Strength CSS */
.company-strength {
    background-color: #000000
}
.title-strength {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.25rem;
    font-weight: 500;
    margin-top: -0.5rem;
    color: #ffffff;
    text-align:center;
}
.strTitleCard {
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
}
.card-str1.card, .card-str2.card, .card-str3.card {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-str1.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
    box-shadow: 0 0 30px rgba(123, 242, 255, 0.8),
                0 0 60px rgba(76, 168, 255, 0.6),
                0 0 90px rgba(35, 50, 215, 0.4),
                0 0 120px rgba(35, 50, 215, 0.2);
}
.card-str2.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
    box-shadow: 0 0 30px rgba(132, 9, 180, 0.8),
                0 0 60px rgba(189, 5, 149, 0.6),
                0 0 90px rgba(189, 5, 45, 0.4),
                0 0 120px rgba(189, 5, 45, 0.2);
}
.card-str3.card:hover {
     border: 3px solid;
     border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
     box-shadow: 0 0 30px rgba(243, 249, 59, 0.8),
                0 0 60px rgba(163, 249, 59, 0.6),
                0 0 90px rgba(81, 249, 59, 0.4),
                0 0 120px rgba(81, 249, 59, 0.2);
}
/*Brands Animation CSS*/
.brands-animation {
    background-color: #000000;
}
.title-brands {
    color: #FFF;
    font-size: 40px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
}
.brand-slider {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    margin: 50px auto;
}

.brand-slider-track {
    display: flex;
    width: 200%;
    height: 100%;
    animation: slideLeft 20s linear infinite;
}
.brand-slider-track > div {
    width: 50%;
    height: 100%;
    position: relative;
}
.brand-slider-track img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}


/*slider in shop*/



.brandgroup-default {
    opacity: 1;
    z-index: 1;
}

.brandgroup-hover {
    opacity: 0;
    z-index: 2;
}

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

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

/*Customer Reviews*/
.reviews {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 250px;
    padding-bottom: 250px;
    overflow: hidden;
    z-index: 0;
    border: none;
    margin-top: 20px;
}
.reviews::after {
    content: "";
    position: absolute;
    bottom: 90px;
    left: 50%;
    top: 200px;
    transform: translateX(-50%);
    width: 100%;
    height: 75%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%),
                radial-gradient(circle at center, #A04AB3 0%, #660B23 40%, #1F0206 65%, transparent 100%);
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: -1;
    border: 0;
    pointer-events: none;
}

.title-reviews {
    color: #AEAEAE;
    font-weight: 300;
    font-size: 40px;
    font-family: 'Lexend', sans-serif;
    z-index: 1;
}

.client-says {
    color: #FFF;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.client-name {
    color: #AEAEAE;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.card-reviews {
    background: rgba(9, 9, 9, 0.6);
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

.star-rating, .card-details {
    position: relative;
    top: -30px;
}

.review-img {
    width: 120px;
    height: 120px;
    top: -50px;
    position: relative;
    z-index: 2;
}
#reviewsCarousel {
    z-index: 1;
}
.carousel-control-prev, .carousel-control-next {
    width: auto;
    top: 54%;
    transform: translateY(-50%);
    opacity: 1;
}

.carousel-control-prev {
    left: -80px;
}

.carousel-control-next {
    right: -80px;
}

@media (min-width: 300px) and (max-width: 1280px) {
    .carousel-control-prev,
    .carousel-control-next {
        position: sticky;
        width: auto;
        padding: 0;
        top: 54%;
        position: absolute;
        transform: translateY(-50%);
    }

    .carousel-control-prev {
        left: 10px;
    }

    .carousel-control-next {
        right: 10px;
    }
    .reviews {
        padding: 0px 20px;
        position: relative;
    }
    .card-reviews {
        margin-top: 100px;
        height: 500px;
    }
}
/* ================ CONTACT =====================/*



/* CONTACT FORM */
.contactForm {
    position: relative;
    background-color: #090909;
    padding: 100px 0px;
    overflow: hidden;
}

    .contactForm::after {
        content: "";
        position: relative;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient( 90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06% );
        filter: blur(80px);
        border-radius: 50%;
        z-index: 0;
    }

.contactForm {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.contactForm::after {
    content: "";
    position: absolute;
    bottom: 210px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.title-contactForm {
    color: #FFF;
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactDes {
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactSync {
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
    background: linear-gradient(90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
}

.card-contactForm.card {
    border: 2px solid;
    border-color: #FDFDFD;
    border-radius: 10px;
    background: #090909;
    transform: none !important;
    transition: none !important;
    z-index: 1;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .contactForm {
        padding: 20px 20px;
    }
}

/* =================== END ======================== */

/* About Section Styles */

.about-section {
    background: #000000;
    color: #eee;
    min-height: 100vh;
    padding-top: 5rem;
    padding-bottom: 3rem;

    position: relative;
}

.about-video {
    max-width: 100%;
    height: 500px;
    object-fit: cover;
    background: #222;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    min-width: 400px;
}

.about-label {
    font-family: 'Lexend', sans-serif;
    font-weight: 200;
    font-size: 24px;
    color: #AEAEAE;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 55px;
    color: #FFFFFF;
    background: linear-gradient(
        90deg,
        #4d4c4c 0%,
        #ffffff 25%,
        #ffffff 50%,
        #ffffff 75%,
        #4d4c4c 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
}

@keyframes anim-lineUp {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }
    20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translateY(0%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes shine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


.about-lead {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: inherit;
    margin-bottom: 1rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-desc {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #AEAEAE;
    margin-bottom: 1.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}
.hero-btn-about {
    font-family: 'Lexend', sans-serif;
    color: #000000 !important;
    background: #D9D9D9;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-btn-about:hover {
        background: transparent ;
        color: #FFFFFF !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);

        background: linear-gradient(
        90deg,
        #000000 0%,
        #000000 25%,
        #000000 50%,
        #000000 75%,
        #ffffff33 100%
    );
    background-size: 200% 100%;
    -webkit-text-fill-color: white;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
    }



@media (max-width: 1024px) {
    .hero-btn-about {
        width: 90% !important;
        justify-content: center;
    }
}
@media (min-width: 300px) and (max-width: 980px) {
    .about-section {
        padding-bottom: 0.5rem;
    }
    .about-video {
        max-width: 100%;
        height: 350px;
        object-fit: cover;
        background: #222;
        border-radius: 0.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        min-width: 300px;
        margin-top: -2rem;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }

    .about-content {
        padding: 30px 30px 0 30px; /* top, right, bottom, left */
    }
    .about-btn {
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }
    .about-title,
    .about-lead,
    .about-desc,
    .about-label {
        transform: none !important;
        text-align: center;
    }
}

@media (min-width: 1024px) and (max-width: 1120px) {
    .about-content {
        padding: 20px;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }
}

/* Team Section Styles */
.team-section {
    background-color: #111;
    color: #fff;
    padding-top: 3rem;
    padding-bottom: 0;
    margin-bottom: 0;
}

.team-intro {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.team-intro-icon {
    height: 0.8em;
    margin-left: -0.3em;
    position: relative;
    top: -0.4em;
     animation: clickSimulate 1.5s ease-in-out infinite;
}

@keyframes clickSimulate {
    0%, 90%, 100% {
        transform: translateY(0) scale(1);
    }
    5% {
        transform: translateY(5px) scale(.25);
    }
    10% {
        transform: translateY(0) scale(1);
    }

}

.team-desc {
    font-size: 1rem;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
}

.team-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    font-size: 22vw;
    line-height: 1;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    margin-top: 12rem;
    padding: 0;
    display: block;
    width: 100%;
    word-break: break-word;
    transform: translateY(-120px);
}

/* Keyframes for smooth gradient shifting */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Shared styling for all category titles */
.leaders-category,
.marketing-category,
.technicians-category,
.admin-category,
.developers-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    line-height: 1;
    text-align: center;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    background-image: linear-gradient(90deg, #74FEBD, #2FA2B7, #4B18E3, #FDFDFD);
    background-size: 400% 100%;
    background-repeat: no-repeat;
    animation: gradientShift 4s linear infinite;
}

.leaders-category {
    margin-top: 13rem;
    transform: translateY(-125px);
    font-size: 320px;
    animation-delay: 0s;
}

.admin-category {
    margin-top: 1rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.marketing-category {
    margin-top: -3rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.technicians-category {
    margin-top: -1rem;
    transform: translateY(-175px);
    font-size: 195px;
    animation-delay: 1s;
}

.developers-category {
    margin-top: -3rem;
    transform: translateY(-170px);
    font-size: 210px;
    animation-delay: 1.5s;
}

.leaders-group,
.admin-group,
.marketing-group,
.technicians-group,
.developers-group {
    margin-bottom: 3rem;
}

.team-wrapper {
    margin-top: -120px;
    padding-bottom: 200px;
    position: relative;
}

.team-img {
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    margin-bottom: 1rem;
    margin-right: 0;
    transform: translateY(-245px);
}



.team-name {
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-230px);
    text-align: center;
    white-space: nowrap;
    animation: lights 5s 750ms linear infinite;
}


    @keyframes lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
}


.team-role {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-215px);
    text-align: center;
}

.row.justify-content-center > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
}

    .row.justify-content-center > [class*="col-"]:first-child {
        margin-left: 0;
    }

@media (max-width: 1280px) {
    .team-category,
    .leaders-category,
    .admin-category,
    .marketing-category,
    .technicians-category,
    .developers-category {
        margin-top: 3rem;
        transform: translateY(0);
    }

    .leaders-category {
        font-size: 16vw;
    }

    .marketing-category {
        font-size: 13vw;
    }

    .technicians-category {
        font-size: 13vw;
    }

    .admin-category{
        font-size: 13vw;
    }

    .developers-category {
        font-size: 13vw;
    }

    .team-img {
        width: 120px;
        height: 120px;
        transform: none;
    }

    .team-name,
    .team-role {
        transform: none;
        font-size: 18px;
    }

    .row.justify-content-center > [class*="col-"] {
        margin-left: 0;
    }
}


/* Join Team Section  */
.bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    top: 0;
    left: 0;
}

.bubble {
    position: absolute;
    bottom: -100px;
    width: 40px;
    height: 40px;
    background: #000000;
    border-radius: 50%;
    opacity: 0.5;
    animation: rise 10s infinite ease-in;
}

    .bubble:nth-child(1) {
        width: 40px;
        height: 40px;
        left: 10%;
        animation-duration: 8s;
    }

    .bubble:nth-child(2) {
        width: 20px;
        height: 20px;
        left: 20%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(3) {
        width: 50px;
        height: 50px;
        left: 35%;
        animation-duration: 7s;
        animation-delay: 2s;
    }

    .bubble:nth-child(4) {
        width: 80px;
        height: 80px;
        left: 50%;
        animation-duration: 11s;
        animation-delay: 0s;
    }

    .bubble:nth-child(5) {
        width: 35px;
        height: 35px;
        left: 55%;
        animation-duration: 6s;
        animation-delay: 1s;
    }

    .bubble:nth-child(6) {
        width: 45px;
        height: 45px;
        left: 65%;
        animation-duration: 8s;
        animation-delay: 3s;
    }

    .bubble:nth-child(7) {
        width: 90px;
        height: 90px;
        left: 70%;
        animation-duration: 12s;
        animation-delay: 2s;
    }

    .bubble:nth-child(8) {
        width: 25px;
        height: 25px;
        left: 80%;
        animation-duration: 6s;
        animation-delay: 2s;
    }

    .bubble:nth-child(9) {
        width: 15px;
        height: 15px;
        left: 70%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(10) {
        width: 90px;
        height: 90px;
        left: 25%;
        animation-duration: 10s;
        animation-delay: 4s;
    }

@keyframes rise {
    0% {
        bottom: -100px;
        transform: translateX(0);
    }

    50% {
        transform: translate(100px);
    }

    100% {
        bottom: 1080px;
        transform: translateX(-200px);
    }
}

@keyframes anime {
    0% {
        top: 0;
    }

    50% {
        top: -1800px;
    }
    /* 200 - 2000 */
    100% {
        top: 0;
    }
}

/* join-team-section with its background and overlay */
.join-team-section {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, #7B9FFF 0%, #E17BCF 100%);
    background-size: 200% 200%;
    animation: joinGradientMove 3s linear infinite;
    padding: 4rem 1rem;
    color: #fff;
    margin-top: -25em;
    text-align: center;
}

    .join-team-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.1);
        pointer-events: none;
        z-index: 0;
        border-radius: inherit;
    }

/* animate join-team-section gradient background */
@keyframes joinGradientMove {
    0% {
        background-position: 0% 50%;
    }

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

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

.join-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 3rem;
    line-height: 1;
    color: #FDFDFD;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.join-btn {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1;
    color: #FDFDFD;
    border: 2px solid #fff;
    border-radius: 32px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: all 0.3s ease;
    padding: 0.75em 2em;
    background: transparent;
    margin-top: 3em;
    position: relative;
}

    .join-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }

.join-arrow-img {
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin-left: 0.3em;
}

@media (max-width: 1280px) {
    .join-team-section {
        margin-top: -13rem;
    }
}
/* END ABOUT CSS THAT WAS REPLACED */

/* =============== CONTACT US ================= */

@keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        @keyframes rainbowBorder {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes rainbowGlow {
            0% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
            14% { border-color: #ff7700; box-shadow: 0 0 20px rgba(255, 119, 0, 0.5); }
            28% { border-color: #ffff00; box-shadow: 0 0 20px rgba(255, 255, 0, 0.5); }
            42% { border-color: #00ff00; box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); }
            56% { border-color: #0000ff; box-shadow: 0 0 20px rgba(0, 0, 255, 0.5); }
            70% { border-color: #4b0082; box-shadow: 0 0 20px rgba(75, 0, 130, 0.5); }
            84% { border-color: #9400d3; box-shadow: 0 0 20px rgba(148, 0, 211, 0.5); }
            100% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
        }

        .banner-top-area {
            position: relative;
            min-height: 300px;
            height: clamp(250px, 55vh, 550px);
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('/images/blogs/blogs-landpage/blog-carousel-2.jpg') center/cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: clamp(15px, 4vw, 150px);
            animation: fadeInDown 1s ease-out;

            /* New properties for the fade-out effect at both top and bottom */
            mask-image: linear-gradient(
                to bottom,
                transparent 0%,  /* Start fully transparent (top fade-out) */
                black 10%,        /* Become fully visible at 5% */
                black 85%,       /* Stay fully visible until 95% */
                transparent 100% /* Become fully transparent (bottom fade-out) */
            );
            overflow: hidden;

        }

        .banner-top-area h1 {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(28px, 7vw, 65px);
            font-weight: 700;
            color: white;
            animation: fadeInDown 1s ease-out;
        }

        .send-us h2 {
            font-family: "Space Grotesk";
            font-size: clamp(24px, 5vw, 36px);
            font-weight: 600;
            margin-bottom: clamp(20px, 4vw, 45px); 
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        .reach-us-main-container {
            max-width: 1200px;
            margin: clamp(-120px, -18vw, -250px) auto 60px;
            padding: 0 clamp(12px, 2.5vw, 20px);
            position: relative;
            z-index: 10;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
        }

        .dual-panel-layout {
            box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
            display: grid;
            grid-template-columns: 1fr;
            overflow: hidden;
            position: relative;
            padding: 2px;
            background: linear-gradient(90deg, 
                #ff0000, #ff7700, #ffff00, #00ff00, 
                #0000ff, #4b0082, #9400d3, #ff0000);
            background-size: 200% 200%;
            animation: rainbowBorder 3s linear infinite;
        }

        @media (min-width: 1024px) {
            .dual-panel-layout {
                grid-template-columns: 1.5fr 1fr;
            }
        }

        .dual-panel-layout::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            border-radius: 18px;
            background: rgb(8, 8, 8);
            z-index: 1;
        }

        .input-panel-wrapper {
            padding: clamp(25px, 5vw, 60px) clamp(18px, 5vw, 80px);
            background: rgb(8, 8, 8);
            position: relative;
            z-index: 2;
        }

        .field-container {
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        .dual-field-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 20px);
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        @media (min-width: 640px) {
            .dual-field-row {
                grid-template-columns: 1fr 1fr;
            }
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: white;
            font-family: "Lexend", sans-serif;
            font-weight: 500;
            font-size: clamp(14px, 2vw, 16px);
        }

        input, textarea {
            color: white;
            font-family: "Lexend", sans-serif;
            width: 100%;
            padding: clamp(12px, 2vw, 15px) clamp(15px, 2.5vw, 20px);
            border: 1px solid gray;
            border-radius: 10px;
            background: rgb(15, 15, 15);
            font-size: clamp(14px, 2vw, 16px);
            transition: all 0.3s ease;
        }

        input:hover, textarea:hover,
        input:focus, textarea:focus {
            outline: none;
            animation: rainbowGlow 2s linear infinite;
        }

        textarea {
            resize: vertical;
            min-height: clamp(120px, 20vw, 150px);
        }

        .action-button-primary {
            display: block;
            margin: 0 auto;
            width: min(100%, 300px);
            max-width: 100%;
            height: 50px;
            padding: 10px 20px;
            font-family: "Lexend", sans-serif;
            background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: clamp(15px, 2vw, 17px);
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        @media (min-width: 640px) {
            .action-button-primary {
                width: 60%;
            }
        }

        @media (min-width: 1024px) {
            .action-button-primary {
                width: 40%;
            }
        }

        .action-button-primary:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 5px 7px rgba(172, 56, 56, 0.7),
                        0 0 8px rgba(172, 56, 56, 0.4);
        }

        .details-panel-wrapper {
            padding: clamp(30px, 5vw, 50px);
            background: rgb(4, 4, 4);
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 2;
        }

        .details-panel-wrapper h2 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(28px, 5vw, 36px);
            font-weight: 600;
            margin-top: clamp(15px, 3vw, 35px);
            margin-left: 0;
            margin-bottom: 20px;
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        @media (min-width: 768px) {
            .details-panel-wrapper h2 {
                margin-left: clamp(0px, 4vw, 55px);
            }
        }

        .details-card-item {
            background: rgb(15, 15, 15);
            padding: clamp(15px, 3vw, 20px);
            width: 100%;
            max-width: 300px;
            border-radius: 15px;
            margin-bottom: clamp(20px, 4vw, 30px);
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .details-card-item {
                max-width: 100%;
            }
        }

        .details-card-item:nth-child(1) {
            animation: floatAlt 4s ease-in-out infinite;
        }

        .details-card-item:nth-child(2) {
            animation: floatAlt 5s ease-in-out infinite;
        }

        .details-card-item:nth-child(3) {
            animation: floatAlt 4.5s ease-in-out infinite;
        }

        .details-card-item h3 {
            font-size: clamp(18px, 3vw, 23px);
            margin-bottom: clamp(12px, 2vw, 20px);
            color: white;
            font-family: "Space Grotesk", sans-serif;
        }

        .details-card-item p {
            color: #8a8a8a;
            font-size: clamp(13px, 2vw, 15px);
            font-family: "Lexend", sans-serif;
            line-height: 1.5;
            margin: 5px 0;
        }

        .scroll-animate {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .scroll-animate.active {
            opacity: 1;
            transform: translateY(0);
        }

        .map-section {
            padding: clamp(30px, 7vw, 70px);
            width: 95%;
            max-width: 1400px;
            margin: 0 auto;
        }

        .where-to h1 {
            color: white;
            font-size: clamp(28px, 6vw, 46px);
            font-weight: 700;
            font-family: "Space Grotesk";
            padding-left: clamp(10px, 3vw, 45px);
            margin-bottom: 20px;
        }

        .where-to iframe {
            padding: clamp(10px, 3vw, 28px);
            height: clamp(300px, 50vw, 600px);
            width: 100%;
            border-radius: clamp(20px, 5vw, 50px);
        }

        @media (max-width: 640px) {
            .banner-top-area {
                min-height: 220px;
                height: 40vh;
            }

            .reach-us-main-container {
                margin-top: -80px;
                margin-bottom: 40px;
            }

            .input-panel-wrapper {
                padding: 25px 18px;
            }

            .details-panel-wrapper {
                padding: 25px 18px;
            }

            .send-us h2 {
                margin-bottom: 20px;
            }

            .details-panel-wrapper h2 {
                margin-top: 10px;
                margin-bottom: 15px;
            }

            .details-card-item {
                margin-bottom: 18px;
            }

            .map-section {
                padding: 30px 15px;
            }

            .where-to iframe {
                padding: 12px;
                border-radius: 20px;
            }
        }

/* ================ END ===================== */

/* Contact Us Style V1 */
/* Container */
.contact-container {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* Shared Panel Styles */
.contact-panel {
    flex: 1;
    font-family: 'Lexend', sans-serif;
    background: #090909;
    color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* LEFT PANEL */
.contact-left-panel {
    margin-left: 2rem;
    border-radius: 1rem 0 0 1rem;
    z-index: 1;
}

    /* Border animation */
    .contact-left-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2px;
        background: linear-gradient(270deg, red, orange, yellow, lime, cyan, blue, violet, red);
        background-size: 400% 400%;
        animation: animated-border 8s linear infinite;
        border-radius: 1rem 0 0 1rem;
        box-sizing: border-box;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
    }

    /* Soft glow */
    .contact-left-panel::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 0 25px rgba(255,255,255,0.07), 0 0 60px rgba(255,255,255,0.05);
        border-radius: 1rem 0 0 1rem;
        z-index: -2;
    }

/* Animate background border */
@keyframes animated-border {
    0% {
        background-position: 0% 50%;
    }

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

/* Content Wrapper (with spacing) */
.contact-left-inner,
.contact-right-inner {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Title & subtitle alignment */
.contact-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.contact-subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* CONTACT ITEMS */
.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.icon {
    margin-left: 3rem;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
}

    .icon img {
        width: 100%;
        height: auto;
    }

    .icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-left: 5rem;
        width: 6rem;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-50%);
    }

.info {
    margin-left: 14rem;
    flex: 1;
}

    .info h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .info p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0.2rem 0;
    }

/* SOCIAL ICONS */
.social-icons {
    margin-top: 2rem;
    display: flex;
    gap: 0.3rem;
}

.social-icon img {
    width: 1.5rem;
    height: 1.5rem;
}

/* RIGHT PANEL */
.contact-right-panel {
    margin-right: 2rem;
    border-radius: 0 1rem 1rem 0;
    z-index: 1;
}

.inquiry-options {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.inquiry-option {
    position: relative;
}

    .inquiry-option input[type="radio"] {
        display: none;
    }

    .inquiry-option span {
        display: inline-block;
        padding: 0.5rem 1.25rem;
        border: 2px solid white;
        color: white;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        cursor: pointer;
        background-color: transparent;
    }

    /* Gradient style when checked OR hovered */
    .inquiry-option input[type="radio"]:checked + .inquiry-str1,
    .inquiry-str1:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
        box-shadow: 0 0 4px rgba(123, 242, 255, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str2,
    .inquiry-str2:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
        box-shadow: 0 0 4px rgba(189, 5, 149, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str3,
    .inquiry-str3:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
        box-shadow: 0 0 4px rgba(81, 249, 59, 0.25);
    }

/* Form fields */
.form-group {
    margin-bottom: 1.5rem;
}

    .form-group input,
    .form-group textarea {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid white;
        color: white;
        font-size: 0.95rem;
        padding: 0.5rem 0;
        outline: none;
    }

textarea {
    resize: vertical;
    min-height: 80px;
}

/* Update preference radios */
.radio-group {
    margin-bottom: 2rem;
}

    .radio-group label {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .radio-group input[type="radio"] {
        margin-right: 0.5rem;
    }

/*Submit Button*/
.submit-button {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.95rem;
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Lexend', sans-serif;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

    /* Gradient fill on hover */
    .submit-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #d8b4fe, #a5f3fc, #bbf7d0);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 2rem;
    }

    .submit-button:hover::before {
        opacity: 1;
    }

    .submit-button:hover {
        color: black;
        font-weight: bold;
    }

/* ===== Responsive Layout ===== */
@media (max-width: 1024px) {
    .contact-left-inner,
    .contact-right-inner {
        padding: 1.5rem;
    }

    .info {
        margin-left: 10rem;
    }

    .icon::after {
        margin-left: 2rem;
        width: 3rem;
    }
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-left-panel,
    .contact-right-panel {
        margin: 1rem 1rem 0 1rem;
        border-radius: 1rem;
    }

        .contact-left-panel::before,
        .contact-left-panel::after,
        .contact-right-panel::before,
        .contact-right-panel::after {
            border-radius: 1rem !important;
        }

    .contact-title {
        font-size: 1.3rem;
    }

    .info {
        margin-left: 6rem;
    }

    .icon {
        margin-left: 1.5rem;
        width: 2rem;
        height: 2rem;
    }

        .icon::after {
            display: none;
        }

    .form-group input,
    .form-group textarea {
        font-size: 0.9rem;
    }

    .submit-button {
        font-size: 0.9rem;
    }

    .inquiry-options {
        flex-direction: column;
    }

    .inquiry-option span {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .info h3 {
        font-size: 1rem;
    }

    .info p {
        font-size: 0.85rem;
    }

    .contact-title {
        font-size: 1.2rem;
    }

    .social-icons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .social-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .radio-group label {
        font-size: 0.85rem;
    }

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

/* Sync Rainbow Texts - Right to Left */
@keyframes gradientCycletext {
    0% {
        background-position: 100% 50%;
    }

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

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

.glow-gradient-text {
    background: linear-gradient( 90deg, #FF6666 0%, #FF8A66 16.66%, #FFF266 33.33%, #85FF66 50%, #66BFFF 66.66%, #9966FF 83.33%, #FF66C7 100% );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    animation: gradientCycletext 6s ease-in-out infinite;
}

/*Blogs Carousel*/
.BlogLandPage .carousel-inner,
.BlogLandPage .carousel-item,
.BlogLandPage .blogsCarousel-img {
    height: 500px;
    width: 100%;
    bottom: 50px;
    
}

.BlogLandPage .blogsCarousel-img {
    object-fit: cover; 
}

/*Latest Product*/
.LatestProduct {
    background-color: #000000;
    padding: 80px 20px;
}

.title-LatestProduct {
    color: #FFF;
    font-size: 34px;
    font-weight: 600;
}
.card-productName {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productPrice {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productStatus {
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
}
.card-product.card {
    border: 1px solid;
    border-color: #D9D9D9;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-product.card:hover {
    border-radius: 15px;
    background: linear-gradient(#000, #000) padding-box, 
    linear-gradient(90deg, #8409B4, #BD0595, #BD052D) border-box; 
    border: 3px solid transparent;
}
.btn-LastestProduct {
    background: transparent;
    color: #FDFDFD;
    border: none;
    border-radius: 10px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
.btn-check:checked + .btn-LastestProduct:hover {
    background: #FDFDFD;
    color: #090909;
    border: none;
}
.btn-check:not(:checked) + .btn-LastestProduct:hover {
    border: 1px solid #FDFDFD;
    color: #FDFDFD;
}

.btn-check:checked + .btn-LastestProduct {
    background: #FDFDFD;
    color: #090909;
    border: none;
}

/* Custom CSS for Trending Gadgets & DPC Updates */

/* Font Definitions */
.space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

.lexend {
    font-family: 'Lexend', sans-serif;
}

/* Main Container */
.tech-showcase-container {
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
    min-height: 100vh;
    padding: 80px 0;
    overflow: hidden;
}

/* Section Headers */
.tech-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.tech-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.tech-view-all {
    color: #64748b;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tech-view-all:hover {
        color: #3b82f6;
        transform: translateX(5px);
    }

/* Trending Gadgets Section */
.trending-gadgets-section {
    margin-bottom: 80px;
}

.trending-card {
    background: #000000;
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

    .trending-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .trending-card:hover::before {
        opacity: 1;
    }

    .trending-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .trending-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.trending-card-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.trending-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

    .trending-card-icon i {
        font-size: 2rem;
        color: white;
    }

.trending-card-info {
    flex: 1;
}

.trending-card-category {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .trending-card-category.mobile-tech {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .trending-card-category.gaming {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }

    .trending-card-category.smart-home {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.trending-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.trending-card-description {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
}

.trending-card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #64748b;
}

.trending-card-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.trending-card-arrow {
    margin-left: auto;
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.trending-card:hover .trending-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* DPC Updates Section */
.dpc-updates-section {
    margin-top: 80px;
}

.dpc-update-card {
    background: #000000;
    border-radius: 20px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 250px;
}

    .dpc-update-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(147, 51, 234, 0.8) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .dpc-update-card:hover::before {
        opacity: 0.3;
    }

    .dpc-update-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .dpc-update-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.dpc-card-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.dpc-update-card:hover .dpc-card-background {
    transform: scale(1.05);
}

.dpc-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
}

.dpc-card-content {
    position: relative;
    z-index: 3;
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dpc-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.dpc-card-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .dpc-card-status.upcoming {
        background: rgba(59, 130, 246, 0.2);
        color: #3b82f6;
    }

    .dpc-card-status.product-launch {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .dpc-card-status.partnership {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.dpc-card-countdown {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: auto;
}

.dpc-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}

.dpc-card-description {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.dpc-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.dpc-card-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.dpc-card-date, .dpc-card-location {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dpc-card-arrow {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.dpc-update-card:hover .dpc-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* Modal Styles */
.dpc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .dpc-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.dpc-modal-content {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.dpc-modal-overlay.active .dpc-modal-content {
    transform: scale(1);
}

.dpc-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .dpc-modal-close:hover {
        background: #ef4444;
        color: white;
    }

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

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

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

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

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

    .trending-card-content {
        flex-direction: column;
        text-align: center;
    }

    .trending-card-icon {
        width: 60px;
        height: 60px;
    }

        .trending-card-icon i {
            font-size: 1.5rem;
        }

    .dpc-card-content {
        padding: 20px;
    }

    .dpc-card-title {
        font-size: 1.3rem;
    }

    .dpc-modal-content {
        padding: 30px;
        margin: 20px;
    }
}


        .blog-section-blog-post {
            padding: 60px 0;
            background-color: #000000;
        }

        .section-header-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .section-title-blog-post {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 0;
        }

        .view-all-link-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .view-all-link-blog-post:hover {
            color: #66b3ff;
        }

        .featured-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            height: 400px;
            margin-bottom: 40px;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .featured-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .featured-image-blog-post {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

        .featured-overlay-blog-post {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            padding: 40px 30px 30px;
        }

        .featured-category-blog-post {
            background-color: #4a9eff;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            display: inline-block;
            margin-bottom: 15px;
        }

        .featured-title-blog-post {
            font-size: 2rem;
            font-weight: bold;
            margin: 0;
            color: white;
        }

        .blog-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }

        .blog-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

        .blog-card-image-blog-post {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .blog-card-content-blog-post {
            padding: 25px;
        }

        .blog-card-meta-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .blog-card-category-blog-post {
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
            color: white;
        }

        .gaming-blog-post { background-color: #00ff88; color: #000; }
        .ai-vr-blog-post { background-color: #4a9eff; }
        .security-blog-post { background-color: #ff6b6b; }

        .blog-card-date-blog-post {
            color: #888;
            font-size: 0.9rem;
        }

        .blog-card-title-blog-post {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 12px;
            color: white;
        }

        .blog-card-excerpt-blog-post {
            color: #ccc;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .read-more-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .read-more-blog-post:hover {
            color: #66b3ff;
        }

        .sidebar-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            padding: 30px;
            border: 1px solid #333;
            margin-bottom: 30px;
        }

        .sidebar-title-blog-post {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 25px;
            color: white;
        }

        .trending-item-blog-post {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #333;
        }

        .trending-item-blog-post:last-child {
            border-bottom: none;
        }

        .trending-number-blog-post {
            background-color: #4a9eff;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .trending-content-blog-post h6 {
            margin: 0;
            font-weight: 600;
            color: white;
        }

        .trending-content-blog-post small {
            color: #888;
        }

        .category-tag-blog-post {
            background-color: #333;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 0.9rem;
            margin: 5px;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .category-tag-blog-post:hover {
            background-color: #4a9eff;
            color: white;
        }

        .arrow-icon-blog-post {
            margin-left: 8px;
        }

        @media (max-width: 768px) {
            .section-header-blog-post {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

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

            .featured-card-blog-post {
                height: 300px;
            }

            .featured-title-blog-post {
                font-size: 1.5rem;
            }
        }

        .chat-widget-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }

        .chat-toggle-btn {
            width: 60px;
            height: 60px;
            background-color: white;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            overflow: hidden;
            padding: 8px;
        }

        .chat-toggle-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .chat-toggle-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .chat-window {
            position: fixed;
            bottom: 100px;
            right: 20px;
            width: 350px;
            height: 500px;
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            transform: translateY(100%) scale(0.8);
            opacity: 0;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            z-index: 1001;
            overflow: hidden;
        }

        .chat-window.active {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .chat-header {
            background-color: #000;
            color: #fff;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 20px 20px 0 0;
        }

        .chat-header-info {
            display: flex;
            align-items: center;
        }

        .assistant-avatar {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            overflow: hidden;
        }

        .assistant-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .chat-header-text h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .status-indicator {
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background-color: #00ff88;
            border-radius: 50%;
            margin-right: 8px;
        }

        .close-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            background-image: url('/images/dpcbits10.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .chat-body {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f8f8f8;
        }

        .message {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
        }

        .message.bot .message-avatar {
            background-color: #000;
            color: #fff;
            overflow: hidden;
        }

        .message.bot .message-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .message.user .message-avatar {
            background-color: #fff;
            color: #000;
            border: 2px solid #000;
            margin-right: 0;
            margin-left: 12px;
        }

        .message-content {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.4;
        }

        .message.bot .message-content {
            background-color: #fff;
            color: #000;
            border: 1px solid #e0e0e0;
        }

        .message.user .message-content {
            background-color: #000;
            color: #fff;
        }

        .quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }

        .quick-reply-btn {
            background-color: #fff;
            border: 2px solid #000;
            color: #000;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Space Grotesk', sans-serif;
        }

        .quick-reply-btn:hover {
            background-color: #000;
            color: #fff;
        }

        .chat-input-container {
            padding: 20px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
        }

        .chat-input-wrapper {
            display: flex;
            align-items: center;
            background-color: #f8f8f8;
            border-radius: 25px;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            transition: border-color 0.3s ease;
        }

        .chat-input-wrapper:focus-within {
            border-color: #000;
        }

        .chat-input {
            flex: 1;
            border: none;
            background: none;
            outline: none;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            color: #000;
        }

        .chat-input::placeholder {
            color: #999;
        }

        .send-btn {
            background-color: #000;
            border: none;
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
            font-size: 16px;
            transition: transform 0.2s ease;
        }

        .send-btn:hover {
            transform: scale(1.1);
        }

        .typing-indicator {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background-color: #fff;
            border-radius: 16px;
            margin-left: 44px;
            width: fit-content;
            border: 1px solid #e0e0e0;
        }

        .typing-dots {
            display: flex;
            gap: 4px;
        }

        .typing-dot {
            width: 6px;
            height: 6px;
            background-color: #999;
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-10px); opacity: 1; }
        }

        /* Mobile responsiveness */
        @media (max-width: 768px) {
            .chat-window {
                width: calc(100vw - 40px);
                height: 500px;
                right: 20px;
                bottom: 100px;
            }

            .message-content {
                max-width: 85%;
            }
        }        

        .company-info-section {
            background: #000000;
            color: #ffffff;
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        
        .company-info-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
            pointer-events: none;
        }
        
        /* 3D Hero Animation */
        .hero-3d-container {
            position: relative;
            height: 800px;
            margin-bottom: 2rem;
        }
        
        .hero-3d-scene {
            width: 100%;
            height: 100%;
            perspective: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .floating-cube {
            width: 100px;
            height: 100px;
            position: absolute;
            transform-style: preserve-3d;
            animation: floatRotate 6s ease-in-out infinite;
        }
        
        .cube-face {
            position: absolute;
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border: 1px solid rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
        }
        
        .cube-face.front { transform: rotateY(0deg) translateZ(50px); }
        .cube-face.back { transform: rotateY(180deg) translateZ(50px); }
        .cube-face.right { transform: rotateY(90deg) translateZ(50px); }
        .cube-face.left { transform: rotateY(-90deg) translateZ(50px); }
        .cube-face.top { transform: rotateX(90deg) translateZ(50px); }
        .cube-face.bottom { transform: rotateX(-90deg) translateZ(50px); }
        
        .floating-cube:nth-child(1) {
            top: 10%;
            left: 20%;
            animation-delay: 0s;
        }
        
        .floating-cube:nth-child(2) {
            top: 60%;
            right: 15%;
            animation-delay: 2s;
            transform: scale(0.7);
        }
        
        .floating-cube:nth-child(3) {
            top: 30%;
            left: 70%;
            animation-delay: 4s;
            transform: scale(0.5);
        }
        
        @keyframes floatRotate {
            0%, 100% {
                transform: translateY(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            25% {
                transform: translateY(-20px) rotateX(90deg) rotateY(45deg) rotateZ(45deg);
            }
            50% {
                transform: translateY(0px) rotateX(180deg) rotateY(90deg) rotateZ(90deg);
            }
            75% {
                transform: translateY(20px) rotateX(270deg) rotateY(135deg) rotateZ(135deg);
            }
        }
        
        .company-hero {
            text-align: center;
            margin-bottom: 60px;
        }
        
/* Option 1: Smooth Fade-in with Slide Up */
        .hero-option-1 .company-hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff, #e0e0e0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            
            /* Animation */
            animation: fadeInSlideUp 1.2s ease-out forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        .hero-option-1 .company-hero p {
            font-size: 1.25rem;
            font-weight: 300;
            opacity: 0;
            max-width: 600px;
            margin: 0 auto;
            color: rgba(255,255,255,0.9);
            
            /* Animation with delay */
            animation: fadeInSlideUp 1.2s ease-out 0.3s forwards;
            transform: translateY(30px);
        }

        @keyframes fadeInSlideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .info-card {
            background: #ffffff;
            color: #000000;
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: none;
            box-shadow: 0 10px 30px rgba(255,255,255,0.1);
            transition: all 0.3s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .info-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, rgba(0,0,0,0.05), transparent);
            border-radius: 50%;
            transition: all 0.3s ease;
            transform: scale(0);
        }
        
        .info-card:hover::before {
            transform: scale(3);
        }
        
        .info-card:hover {
            transform: translateY(-5px) rotateX(2deg);
            box-shadow: 0 20px 40px rgba(255,255,255,0.15);
        }
        
        /* 3D Service Cards */
        .service-item {
            background: rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.4s ease;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .service-item::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 50%;
            transform: translate(-50%, -50%) translateZ(20px);
            transition: all 0.4s ease;
            z-index: 0;
        }
        
        .service-item:hover {
            background: rgba(255,255,255,0.12);
            transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
            box-shadow: 
                0 20px 40px rgba(255,255,255,0.1),
                0 0 0 1px rgba(255,255,255,0.2);
        }
        
        .service-item:hover::before {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
            transform: translate(-50%, -50%) translateZ(30px) rotateZ(180deg);
        }
        
        .service-item h4,
        .service-item p {
            position: relative;
            z-index: 2;
        }
        .info-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #000000;
            position: relative;
            z-index: 2;
        }
        
        .info-card p, .info-card li {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
            color: #333333;
            position: relative;
            z-index: 2;
        }
        
        .info-card ul {
            padding-left: 1.25rem;
            margin-bottom: 0;
            position: relative;
            z-index: 2;
        }
        
        .info-card li {
            margin-bottom: 0.5rem;
        }
        
        .services-grid {
            margin-top: 3rem;
        }
        
        /* 3D Icons for Services */
        .service-icon {
            width: 120px;
            height: 80px;
            margin: 0 auto 1rem auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all 0.4s ease;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 12px;
            overflow: hidden;
        }
        
        .service-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            transition: all 0.4s ease;
            transform: translateZ(10px);
        }
        
        .service-item:hover .service-icon {
            transform: rotateX(5deg) rotateY(5deg) scale(1.05);
        }
        
        .service-item:hover .service-icon img {
            transform: translateZ(15px) scale(1.1);
        }
        
        .icon-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.3), transparent);
            border-radius: 12px;
            transition: all 0.4s ease;
            z-index: 2;
        }
        
        .service-item:hover .icon-overlay {
            background: linear-gradient(135deg, rgba(0,0,0,0.1), transparent);
        }
        
        .stats-container {
            background: rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 2rem;
            margin: 3rem 5rem;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .stat-item {
            text-align: center;
            margin-bottom: 1rem;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #ffffff;
            display: block;
        }
        
        .stat-label {
            font-size: 0.9rem;
            font-weight: 400;
            opacity: 0.7;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        @media (max-width: 768px) {
            .company-hero h1 {
                font-size: 2.5rem;
            }
            
            .info-card {
                padding: 1.5rem;
            }
            
            .stat-number {
                font-size: 2rem;
            }
        } 
        
/* Hero Section - Break out of container constraints */
.hero-section {
    position: relative;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    margin-left: calc(-50vw + 50%); /* Center and break out of parent container */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    font-family: 'League Spartan', sans-serif;
}

/* Remove container constraints completely for hero section */
.hero-section .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Hero Video - Cover entire viewport */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Override any parent container constraints that might affect the hero */
.company-info-section .container {
    max-width: none;
    padding: 0;
    overflow: visible;
}

/* Alternative approach - if above doesn't work, use this instead */
.hero-section-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

.hero-section-fullscreen .hero-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}     

 .container {
            position: relative;
            z-index: 10;
        }

        /* Filter Buttons */
        .btn-LastestProduct {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: #495057;
            transition: var(--transition-smooth);
            border-radius: 50px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-LastestProduct:hover {
            background: rgba(255, 255, 255, 1);
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
        }

        .btn-check:checked + .btn-LastestProduct {
            background: var(--gradient-bg);
            border-color: transparent;
            color: white;
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
        }

        /* Slider Container */
        .cards-slider-container {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            background: #000000;
            backdrop-filter: blur(20px);
            padding: 2rem;
            margin-top: 2rem;
            margin-left: -15px;
            margin-right: -15px;
            width: calc(100% + 30px);
        }

        .cards-slider {
            display: flex;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            gap: 2rem;
        }

        .card-slide {
            min-width: calc(33.333% - 3.33rem);
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            .card-slide {
                min-width: calc(50% - 2.5rem);
            }
        }

        @media (max-width: 576px) {
            .card-slide {
                min-width: calc(100% - 1rem);
                max-width: 320px;
                margin: 0 auto;
            }
        }

        @media (max-width: 480px) {
            .card-slide {
                min-width: calc(100% - 0.5rem);
                max-width: 280px;
            }
        }

        /* Product Cards */
        .product-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            transition: var(--transition-smooth);
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-bg);
            transform: scaleX(0);
            transition: transform 0.4s ease;
            transform-origin: left;
        }

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

        .product-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: var(--card-hover-shadow);
            border-color: rgba(0, 123, 255, 0.3);
        }

        .product-card:hover .product-icon {
            transform: scale(1.2) rotate(10deg);
            color: var(--primary-color);
        }

        .product-card:hover .product-title {
            color: var(--primary-color);
        }

        .product-card:hover .btn-product {
            transform: scale(1.1);
            background: var(--gradient-bg);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
        }

        .product-icon {
            font-size: 3.5rem;
            background: var(--gradient-bg);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1.5rem;
            transition: var(--transition-smooth);
            /* Fallback for browsers that don't support background-clip */
            color: var(--primary-color);
        }

        /* Ensure icons are visible */
        .product-icon i {
            display: inline-block;
            font-style: normal;
        }

        /* Fallback if Font Awesome doesn't load */
        .product-icon i:before {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", FontAwesome, sans-serif;
            font-weight: 900;
        }

        .product-title {
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 1rem;
            transition: var(--transition-smooth);
            font-size: 1.25rem;
        }

        .product-description {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.6;
            opacity: 0.9;
        }

        .btn-product {
            background: linear-gradient(135deg, #840984 0%, #BD0595 50%, #BD052D 100%);
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            transition: var(--transition-smooth);
            font-weight: 600;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .btn-product::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: left 0.5s;
        }

        .btn-product:hover::before {
            left: 100%;
        }

        /* Navigation Buttons */
        .slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-smooth);
            z-index: 100;
            color: var(--primary-color);
            font-size: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .slider-nav:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 8px 30px rgba(0, 123, 255, 0.3);
        }

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

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

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

        .parallax-element {
            position: absolute;
            background: var(--gradient-bg);
            border-radius: 50%;
            opacity: 0.1;
            animation: float 20s ease-in-out infinite;
        }

        .parallax-element:nth-child(1) {
            width: 100px;
            height: 100px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .parallax-element:nth-child(2) {
            width: 150px;
            height: 150px;
            top: 60%;
            right: 10%;
            animation-delay: -5s;
        }

        .parallax-element:nth-child(3) {
            width: 80px;
            height: 80px;
            bottom: 20%;
            left: 20%;
            animation-delay: -10s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-30px) rotate(120deg); }
            66% { transform: translateY(-60px) rotate(240deg); }
        }

        /* Slider Indicators */
        .slider-indicators {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: var(--transition-smooth);
        }

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

        .indicator:hover {
            background: var(--primary-hover);
            transform: scale(1.1);
        }

        /* Loading Animation */
        .card-slide {
            opacity: 0;
            animation: slideIn 0.8s ease-out forwards;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .category-banner {
            background: linear-gradient(135deg, #1F0206 0%, #660B23 100%);
            border-radius: 20px;
            padding: 30px;
            margin: 40px 0 30px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .category-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: shimmer 3s infinite;
        }
        
        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        .category-banner h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .category-banner p {
            font-size: 1.1rem;
            margin: 10px 0 0 0;
            opacity: 0.9;
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .card-product {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-product:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }        

.setup {
            position: block;
            margin: auto;
            width: 50%;
        }




/* PC - DETAILS */

.main-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.hero-content-container {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;

    
    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/1200x/5b/6d/40/5b6d40fc0b5f754168a8c7f95dba3485.jpg'); 
    background-size: cover;
    background-position: center;
}

.text-overlay {
    position: absolute;
    bottom: 50px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.text-overlay h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.see-more-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 30px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-more-button:hover {
    background-color: #7B54B1;
}

.why-choose-us-section {
    font-family: "Lexend";
    display: flex;
    align-items: center; 
    max-width: 1300px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
    .why-choose-us-section.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .why-choose-us-section.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but the 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }


/* Left Column - Visual Container */
.visual-container {
    flex: 1;
    min-height: 500px;
    background-image: url("../images/products/robot-pc-case.png"); 
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .visual-container:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }

/* Right Column - Content Container */
.content-container {
    flex: 1;
    padding-left: 70px;
}

/* Title Styling */
.title-line-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;

}

/* Feature List Styling */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.feature-list li:hover{
    transform: translateY(-5px) scale(1.05);
}




.feature-icon {
    font-size: 20px; 
    margin-right: 15px;
    color: white; 
    transform: rotate(-15deg); 
}


.benefits-layout {
    font-family: "lexend";
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 60px 20px;
    margin: auto;
}


.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}


.card-description {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.testimonials-section {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto; 
    grid-template-areas: 
        "content visual"
        "button button"; 
    
    gap: 10px; 
    max-width: 1000px; 
    margin: 70px auto; 
    padding: 0 10px; 
    align-items: start;
}

    .testimonials-section.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .testimonials-section.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }



.testimonial-content {
    grid-area: content;
    padding-right: 20px; 
}

.testimonial-heading-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.quote {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.star-rating .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    

    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .star-rating :hover {
        transform: translateY(-5px) scale(1.05);
    }

@keyframes rgbGoldPulse {
    0% {
        text-shadow: 
            0 0 3px rgba(255, 215, 0, 0.7), 
            0 0 3px rgba(255, 165, 0, 0.5);
    }
    50% {
        /* This is the peak, adding the subtle RGB glow */
        text-shadow: 
            0 0 3px rgba(255, 223, 0, 0.8), 
            0 0 3px rgba(255, 175, 0, 0.6),  
            0 0 3px rgba(255, 0, 0, 0.1), 
            0 0 3px rgba(0, 255, 0, 0.1), 
            0 0 3px rgba(0, 0, 255, 0.1);    
    }
    100% {
        text-shadow: 
            0 0 3px rgba(255, 220, 0, 0.75),
            0 0 3px rgba(255, 170, 0, 0.55);
    }
}

/* Product Visual (Right Column) */
.product-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(../images/products/gaming-pc.png); /* REPLACE with your actual image path or URL */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }


/* Button Container (Spans both columns) */


/* See Reviews Button Styling */
.see-reviews-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-reviews-button:hover {
    background-color: #9370DB;
}

.main-promo-bot {
    font-family: "Space Grotesk";
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.hero-content-container-bot {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/736x/f2/04/2c/f2042ce98e8fccbb9383535424e608b4.jpg');      
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.text-overlay-bot {
    position: absolute;
    bottom: 30px;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}

.text-overlay-bot h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

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



@media (min-width: 1400px) {
    .main-promo {
        max-width: 1500px;
    }

    .why-choose-us-section {
        max-width: 1500px;
    }

    .title-line-1 {
        font-size: 2rem; 
    }
    
    .benefits-layout {
        max-width: 1500px;
        gap: 50px;
    }

    .testimonials-section {
        max-width: 1400px;
    }
}

@media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .why-choose-us-section {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-line-1 {
        font-size: 2.8rem; 
    }

    .benefits-layout {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 80px auto;
    }

}

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 30px 40px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 40px;
    }

    .why-choose-us-section {
        padding: 0 30px;
        margin: 60px auto;
    }

    .content-container {
        padding-left: 30px;
    }

    .visual-container {
        min-height: 400px;
    }

    .testimonial-heading-1 {
        font-size: 42px;
    }

    .quote {
        font-size: 30px;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    

    .product-visual {
        min-height: 400px;
    }
}

/* Mobile (up to 768px) */
@media (max-width: 768px) {
    .main-promo {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
        margin-top: -150px;
    }

    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 20px 25px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 28px;
    }


    .why-choose-us-section {
        flex-direction: column;
        padding: 0 20px;
        margin: 40px auto;
        text-align: center;
    }

    .visual-container {
        width: 100%;
        min-height: 350px;
        margin-left: 0;
        margin-bottom: 30px;
        border-width: 8px;
    }

    .content-container {
        padding-left: 0;
        width: 100%;
    }

    .feature-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .feature-list li {
        font-size: 24px;
        line-height: 1.8;
        justify-content: center;
    }

    .feature-icon {
        font-size: 18px;
        margin-right: 10px;
    }

    .benefits-layout {
        font-size: 2rem;
        grid-template-columns: 1fr; /* Stack items vertically */

    }

    .benefit-card {
        min-width: 100%;
    }


    .card-description {
        font-size: 1.5rem;
    }

    .testimonials-section {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "content"
            "visual"
            "button";
        margin: 40px auto;
        padding: 20px;
    }

    .testimonial-content {
        padding-right: 0;
        text-align: center;
    }

    .testimonial-heading-1 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .quote {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .star-rating {
        text-align: center;
        font-size: 20px;
        margin-top: 40px;
    }

    .product-visual {
        min-height: 400px;
        border-width: 8px;
    }

    .button-container {
        margin-top: 20px;
    }

    .main-promo-bot {
        font-size: 2rem;
    }

    .hero-content-container-bot {
        max-width: 768px; /* Ensure it doesn't overflow */
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    .hero-content-container,
    .hero-content-container-bot {
        height: 500px;
        max-width: 100%;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 24px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 15px 20px;
    }


    .title-line-1 {
        font-size: 35px;
    }

    .feature-list li {
        font-size: 20px;
    }

    .testimonials-section {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }
    

    .testimonial-heading-1 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .quote {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .star-rating .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .product-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .testimonial-heading-1 {
        font-size: 24px;
    }

    .quote {
        font-size: 16px;
    }

    .product-visual {
        min-height: 250px;
    }
}



/* custom.html design by PRINCESS*/

.cspcb {
    background-color: #2f8d46;
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-repeat: repeat;
    -webkit-text-fill-color: transparent;
    margin-top: 20px;
    font-size: 80px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 1000;
    -webkit-font-smoothing: antialiased;
    animation: 3s anim-lineUp linear;
}
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-cspcb {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    text-align: center;
    color: white;
    max-width: 1000px;
    margin: 0 auto  3rem;
    line-height: 1.6;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* llllllll */

.projects-images{
    margin: 50px;
    display: inline-block;
}

.projects-img-card1 {
    --g: 4px;     /* the gap */
    --b: 12px;    /* border thickness*/
    --c: indigo; /* the color */
    max-width: 120%;
    height: 20vh;
    margin-block: 4rem;
    display: inline-block;
    align-content: center;
    
    padding: calc(var(--g) + var(--b));
    --_c: #0000 0 25%, var(--c) 0 50%;
    --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
    --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
    background:
    var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
    var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
    background-size: 200% var(--b),var(--b) 200%;
    cursor: pointer;
    filter: grayscale(50%);
    transition: .3s;
}

.projects-img-card1{
    row-gap: 20px; /* Gap between rows (vertical space) */
    column-gap: 10px; /* Optional: Gap between columns (horizontal space) */
}
.projects-img-card1:hover {
  --_p: 75%;
  filter: grayscale(0%);
  --c: #AC3838; /* new color */
}

.projects-img {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    display: block;
    align-content: center;
    width: 100%;

}

.projects-image-title{
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    margin-top: 15px;
}

/*================ CCTV DETAILS ==================*/

.cctv-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; 
    max-width: 2000px; 
    margin: 0px auto 0 auto;
}

.cctv-content-container {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(50, 0, 0, 0.9) 0%, rgba(150, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 100%),
    url('/images/services/cctv.jpg'); 
    background-size: cover;
    background-position: center;
    animation: fadeInUp 1.1s ease-out forwards;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.cctv-text-overlay {
    font-family: "Space Grotesk";
    position: absolute;
    bottom: 30px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
    animation: fadeInUp 0.7s ease-out forwards;
}

.cctv-text-overlay h1 {
    color: white;
    font-size: 64px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    
}

.security-section {
    padding: 20px 20px; 
    text-align: center; 
    width: 100%; 
    
}

.animate-on-scroll .security-section {
    opacity: 0;
    transform: translateY(20px);
}

.animate-on-scroll.is-visible .security-section {
    opacity: 1;
    transform: translateY(0);
}

.section-title {
    font-family: "Lexend"; 
    font-size: 58px; 
    font-weight: 500; 
    margin-bottom: 10px; 
    margin-top: 20px;
}

.section-text {
    font-family:"Space Grotesk"; 
    color: white;
    font-size: 28px;
    line-height: 1.6;
    max-width: 1300px; 
    margin: 10px auto; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 270px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 12px;
    }

    .cctv-text-overlay h1 {
        font-size: 21px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 22px;
    }

    .section-text {
        font-size: 12px;
        max-width: 100%;
        padding: 0 6px;
    }

    .security-section {
        padding: 10px 8px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 285px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 13px 14px;
    }

    .cctv-text-overlay h1 {
        font-size: 23px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 23px;
    }

    .section-text {
        font-size: 12.5px;
        max-width: 100%;
        padding: 0 6px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 300px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 14px 15px;
    }

    .cctv-text-overlay h1 {
        font-size: 25px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 24px;
    }

    .section-text {
        font-size: 13px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 310px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 15px 16px;
    }

    .cctv-text-overlay h1 {
        font-size: 26px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 25px;
    }

    .section-text {
        font-size: 13.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 400px) and (max-width: 412px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 325px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 16px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 28px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 26px;
    }

    .section-text {
        font-size: 14px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 330px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 17px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 29px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 27px;
    }

    .section-text {
        font-size: 14.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 340px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 18px 20px;
    }

    .cctv-text-overlay h1 {
        font-size: 30px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 28px;
    }

    .section-text {
        font-size: 15px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 380px;
        margin-bottom: 25px;
        margin-top: -125px;
    }

    .cctv-text-overlay {
        padding: 20px 25px;
    }

    .cctv-text-overlay h1 {
        font-size: 34px;
    }

    .section-title {
        font-size: 32px;
    }

    .section-text {
        font-size: 17px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 450px;
        margin-bottom: 30px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 25px 30px;
    }

    .cctv-text-overlay h1 {
        font-size: 42px;
    }

    .section-title {
        font-size: 38px;
    }

    .section-text {
        font-size: 20px;
        max-width: 100%;
        padding: 0 15px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 470px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 24px 34px;
    }

    .cctv-text-overlay h1 {
        font-size: 44px;
    }

    .section-title {
        font-size: 39px;
    }

    .section-text {
        font-size: 20.5px;
        max-width: 720px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 490px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 26px 36px;
    }

    .cctv-text-overlay h1 {
        font-size: 46px;
    }

    .section-title {
        font-size: 40px;
    }

    .section-text {
        font-size: 21px;
        max-width: 750px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 510px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 28px 38px;
    }

    .cctv-text-overlay h1 {
        font-size: 48px;
    }

    .section-title {
        font-size: 42px;
    }

    .section-text {
        font-size: 22px;
        max-width: 800px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 530px;
    }

    .cctv-text-overlay {
        padding: 30px 40px;
    }

    .cctv-text-overlay h1 {
        font-size: 50px;
    }

    .section-title {
        font-size: 44px;
    }

    .section-text {
        font-size: 23px;
        max-width: 850px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 550px;
        margin-top: -60px;
    }

    .cctv-text-overlay {
        padding: 30px 45px;
    }

    .cctv-text-overlay h1 {
        font-size: 52px;
    }

    .section-title {
        font-size: 46px;
    }

    .section-text {
        font-size: 24px;
        max-width: 900px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 600px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 35px 50px;
    }

    .cctv-text-overlay h1 {
        font-size: 60px;
    }

    .section-title {
        font-size: 54px;
    }

    .section-text {
        font-size: 26px;
        max-width: 1200px;
    }
}

/* CCTV VIDEO */

.cctv-video {
    position: relative;
    width: 100%; 
    max-width: 2000px; 
    height: 800px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: #000;
    padding-bottom: 30px;
    box-sizing: border-box;
}


#bgVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%); 
    object-fit: cover;
}


.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}


.hero-content-vid {
    position: relative;
    z-index: 3;
    margin-bottom: 0; 
}

.btn-find-out-more {
    font-family: "Lexend"; 
    display: inline-block;
    padding: 5px 40px;
    text-decoration: none;
    font-size: 20px;
    font-weight: light;
    color: #ffffff;
    border-radius: 30px;
    width: 298pxpx;
    height: 45pxpx;
    margin-bottom: 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: linear-gradient(88.78deg, #BA1022 0.07%, #EC0120 50%, #FD6A59 99.93%);
    border: none;
    cursor: pointer;
    animation: buttonEntrancee 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulsee 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes buttonEntrancee {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulsee {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}

.btn-find-out-more:hover {
    background: linear-gradient(to right, #e00000 0%, #222222 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.project-overview {
    margin-top: 60px;
    padding: 20px 20px;
    text-align: center;
}

.overview {
    font-family:"Space Grotesk";
    color: white;
    font-weight: 500;
    font-size: 64px;
    line-height: 1.6;
    margin: 0 auto;
}


@media (max-width: 1200px) {
    .cctv-video {
        /* Reduce height for a more compact presentation */
        height: 600px;
        /* Adjust margin */
        margin: 30px auto;
        /* Reduce bottom padding */
        padding-bottom: 20px;
    }

    .overview {
        /* Decrease the large font size for tablets */
        font-size: 48px;
    }
}


@media (max-width: 768px) {
    .cctv-video {
        /* Further reduce height for mobile viewports */
        height: 450px;
        margin: 20px auto;
        width: auto; /* Ensure no horizontal scroll is caused by margin */
    }

    .overview {
        /* Major decrease in font size for mobile */
        font-size: 36px;
        line-height: 1.4;
    }

    .btn-find-out-more {
        /* Adjust button dimensions and font size */
        font-size: 18px;
        padding: 8px 30px;
        /* Remove fixed width/height properties and rely on padding/content */
        width: auto;
        height: auto;
        margin-bottom: 10px;
    }

    .project-overview {
        /* Reduce padding */
        padding: 10px 10px;
    }
}


@media (max-width: 480px) {
    .cctv-video {
        width: auto;
        height: 350px;
        padding-bottom: 10px;
    }

    .overview {
        /* Smallest font size for main header text */
        font-size: 20px;
    }

    .btn-find-out-more {
        font-size: 16px;
        padding: 6px 20px;
        border-radius: 20px;
    }
}

/* CCTV DETAILS CARDS*/


/* NEW: Keyframe animation for fade-in and subtle rise */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(90px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NEW: Initial hidden state for the scroll animation targets */
.surveillance-carousel-container.hidden,
.navigation-dots-container.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: none; /* Temporarily disable transition for initial state */
}

/* NEW: Class to apply animation after scroll trigger */
.surveillance-carousel-container.scroll-animation,
.navigation-dots-container.scroll-animation {
    animation: fadeInUp 1.5s ease-out forwards; 
    /* Optional: Add a slight delay for the dots container for a staggered effect */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Restore any existing transition */
}

/* Add staggered effect for the dots container */
.navigation-dots-container.scroll-animation {
    animation-delay: 0.3s;
}

.surveillance-carousel-container {
    margin: 0 auto;
    width: 100%;
    padding: 50px 0;
    background-color: #000;
    overflow: hidden;
    position: relative;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s; 
}

.overview {
    /* ... existing styles ... */
    /* ADDED: Initial state for 'overview' text (optional, but good for consistent animation) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 0.8s ease-out;
}

/* NEW: Class to animate 'overview' text */
.overview.scroll-animation {
    opacity: 1;
    transform: translateY(0);
}


.carousel-viewport-wrapper {
    width: 100%;
    height: 600px;
    position: relative;
    perspective: 2000px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    user-select: none;
}

.carousel-viewport-wrapper.dragging {
    cursor: grabbing;
}

.rotating-carousel-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.surveillance-card-element {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    height: 560px;
    margin-left: -175px;
    margin-top: -280px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #222;
    cursor: pointer;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    user-select: none;
}

.card-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.gradient-info-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.location-title-text {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.description-snippet-text {
    font-family: "Lexend";
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.external-action-icon {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    pointer-events: all;
}

.external-action-icon:hover {
    opacity: 1;
}

.navigation-dots-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s;
}

.position-indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.5;
}

.position-indicator-dot.current-active {
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    opacity: 1;
}

/* Responsive breakpoints */
@media (max-width: 1400px) {
    .carousel-viewport-wrapper {
        height: 550px;
        perspective: 1800px;
    }
}

@media (max-width: 1200px) {
    .carousel-viewport-wrapper {
        height: 520px;
        perspective: 1600px;
    }

    .surveillance-card-element {
        width: 320px;
        height: 520px;
        margin-left: -160px;
        margin-top: -260px;
    }
}

@media (max-width: 1024px) {
    .carousel-viewport-wrapper {
        height: 500px;
        perspective: 1500px;
    }

    .surveillance-card-element {
        width: 300px;
        height: 500px;
        margin-left: -150px;
        margin-top: -250px;
    }

    .gradient-info-panel {
        padding: 18px;
        min-height: 150px;
    }

    .location-title-text {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .surveillance-carousel-container {
        padding: 60px 0;
    }

    .carousel-viewport-wrapper {
        height: 450px;
        perspective: 1200px;
    }

    .surveillance-card-element {
        width: 260px;
        height: 420px;
        margin-left: -130px;
        margin-top: -210px;
    }

    .gradient-info-panel {
        padding: 15px;
        min-height: 130px;
    }

    .location-title-text {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .description-snippet-text {
        font-size: 9px;
        margin-bottom: 8px;
    }

    .navigation-dots-container {
        margin-top: 40px;
        gap: 15px;
    }

    .position-indicator-dot {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 640px) {
    .carousel-viewport-wrapper {
        height: 420px;
        perspective: 1100px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }
}

@media (max-width: 480px) {
    .surveillance-carousel-container {
        padding: 40px 0;
    }

    .carousel-viewport-wrapper {
        height: 380px;
        perspective: 1000px;
    }

    .surveillance-card-element {
        width: 220px;
        height: 350px;
        margin-left: -110px;
        margin-top: -175px;
    }

    .gradient-info-panel {
        padding: 12px;
        min-height: 110px;
    }

    .location-title-text {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .description-snippet-text {
        font-size: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 6px;
    }

    .external-action-icon svg {
        width: 20px;
        height: 20px;
    }

    .navigation-dots-container {
        margin-top: 30px;
        gap: 12px;
    }

    .position-indicator-dot {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 375px) {
    .carousel-viewport-wrapper {
        height: 350px;
    }

    .surveillance-card-element {
        width: 200px;
        height: 320px;
        margin-left: -100px;
        margin-top: -160px;
    }

    .location-title-text {
        font-size: 12px;
    }

    .description-snippet-text {
        font-size: 7.5px;
    }

    .external-action-icon {
        display: none;
    }
}

@media (max-width: 320px) {
    .carousel-viewport-wrapper {
        height: 320px;
    }

    .surveillance-card-element {
        width: 180px;
        height: 290px;
        margin-left: -90px;
        margin-top: -145px;
    }

    .gradient-info-panel {
        padding: 10px;
        min-height: 90px;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .surveillance-carousel-container {
        padding: 30px 0;
    }

    .carousel-viewport-wrapper {
        height: 400px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }

    .navigation-dots-container {
        margin-top: 25px;
    }
}


.item-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.slider-item:not(.active) .item-content-overlay {
    opacity: 0.96;
}

.item-heading {
    font-family: "Space Grotesk";
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.item-text {
    font-family: "Space Grotesk";
    font-size: 10px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.item-external-link {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.item-external-link:hover {
    opacity: 1;
}

.slider-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
}

.indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.indicator-dot.active {
    background-color:linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    border-color: #ff0000;
}

@media (max-width: 1024px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-item:not(.active) {
        width: 200px;
        height: 350px;
        margin: 0 10px;
    }
    .slider-item.active {
        justify-content: center;
        width: 300px;
        height: 500px;
        margin: 0 20px;
    }
    .item-heading {
        font-size: 1.1em;
    }
    .item-text {
        font-size: 0.85em;
    }
    .slider-track {
        padding: 0 5%;
    }
}

@media (max-width: 768px) {
    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 150px;
        height: 280px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.8);
    }
    .slider-item.active {
        width: 250px;
        height: 400px;
        margin: 0 10px;
    }
    .item-content-overlay {
        padding: 15px;
        min-height: 120px;
    }
    .item-heading {
        font-size: 1em;
    }
    .item-text {
        font-size: 0.8em;
    }
    .slider-track {
        padding: 0 2%;
    }
}

@media (max-width: 480px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-track {
        justify-content: flex-start;
        padding: 0 20px;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 100px;
        height: 180px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.7);
    }
    .slider-item.active {
        width: 280px;
        height: 450px;
        margin: 0 10px;
    }
    .item-heading {
        font-size: 0.9em;
    }
    .item-text {
        font-size: 0.75em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .item-external-link {
        display: none;
    }
}

/* CCTV FLASHCARDS */

.ui-main-panel {
    margin: 80px auto;
    width: 100%;     
    width: 1700px;
    height: 600px;
    padding: 20px;
    background: linear-gradient(180deg, #D9D9D9 0%, #737373 100%);
    border-radius: 50px;
    border: 5px solid;
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    overflow: hidden; 
}

.panel-text-module {
    padding: 20px 0 20px 100px;
}

.panel-text-module p {
    font-family: "Space Grotesk";
    color: #ffffff;
    font-size: 32px;
    line-height: 1.6;
    width: 950px;

}

.surveillance-slider-zone {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-stack-viewport {
    position: relative;
    width: 50px; 
    height: 380px;
}

.security-image-card {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 280px;
    height: 380px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    cursor: pointer; 
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); 

    /* Initial hidden/back position for all cards */
    transform: translate(-50%, -50%) translate3d(0, 0, -200px) rotateY(0deg) scale(0.8);
    opacity: 0;
    z-index: 0;
}

.security-image-card[data-index="0"] { background-image: url('/images/services/PASIG-THREELIGHTS-2.jpg'); } 
.security-image-card[data-index="1"] { background-image: url('/images/services/BENJAMIN-CAMERINO-2.jpg'); }
.security-image-card[data-index="2"] { background-image: url('/images/services/BJMP-Teresa-\ District-JAIL-2.jpg'); }
.security-image-card[data-index="3"] { background-image: url('/images/services/RON-GONZALES-2.jpg'); }


.security-image-card.card--active {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
    z-index: 10;
    cursor: pointer;
}


.security-image-card.card--stacked-1 {
    transform: translate(-50%, -50%) translate3d(-10px, 10px, -20px) rotate(-3deg);
    opacity: 1;
    z-index: 9;
    filter: brightness(0.8);
    cursor: default;
}

.security-image-card.card--stacked-2 {
    transform: translate(-50%, -50%) translate3d(-20px, 20px, -40px) rotate(-6deg);
    opacity: 1;
    z-index: 8;
    filter: brightness(0.7);
    cursor: default;
}

.security-image-card.card--stacked-3 {
    transform: translate(-50%, -50%) translate3d(-30px, 30px, -60px) rotate(-9deg);
    opacity: 1;
    z-index: 7;
    filter: brightness(0.6);
    cursor: default;
}


.security-image-card.card--slide-out {
    transform: translate(-50%, -50%) translate3d(100px, 0, 0) rotate(5deg) scale(0.9);
    opacity: 0;
    z-index: 11; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .ui-main-panel {
        width: 95%;
        height: 550px;
        margin: 15px auto;
        padding: 8px;
        border-radius: 20px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 8px;
        text-align: center;
        margin-bottom: -40px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 280px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 150px;
        height: 200px;
    }

    .security-image-card {
        width: 160px;
        height: 230px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .ui-main-panel {
        width: 95%;
        min-height: 580px;
        margin: 16px auto;
        padding: 9px;
        border-radius: 22px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 290px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 220px;
        height: 260px;
    }

    .security-image-card {
        width: 170px;
        height: 240px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .ui-main-panel {
        width: 95%;
        min-height: 620px;
        margin: 20px auto;
        padding: 9px;
        border-radius: 24px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -50px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 270px;
        width: 100%;
        margin-left: 20px;
    }

    .card-stack-viewport {
        width: 230px;
        height: 270px;
    }

    .security-image-card {
        width: 180px;
        height: 230px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 18px auto;
        padding: 10px;
        border-radius: 25px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 16.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 310px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 240px;
        height: 280px;
    }

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

@media (min-width: 400px) and (max-width: 412px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 26px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 320px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 250px;
        height: 290px;
    }

    .security-image-card {
        width: 200px;
        height: 270px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 27px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 17.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 325px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 255px;
        height: 295px;
    }

    .security-image-card {
        width: 205px;
        height: 275px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 20px auto;
        padding: 10px;
        border-radius: 28px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 18px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 330px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 260px;
        height: 300px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 22px auto;
        padding: 12px;
        border-radius: 30px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 12px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 19px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 350px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 280px;
        height: 320px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 28px auto;
        padding: 15px;
        border-radius: 38px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 18px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 23px;
        line-height: 1.55;
        width: 100%;
        margin-bottom: -20px;
    }

    .surveillance-slider-zone {
        height: 380px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 290px;
        height: 340px;
    }

    .security-image-card {
        width: 235px;
        height: 320px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 30px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 390px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 295px;
        height: 345px;
    }

    .security-image-card {
        width: 238px;
        height: 325px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .ui-main-panel {
        width: 95%;
        min-height: 790px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 20px 35px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 395px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 298px;
        height: 348px;
    }

    .security-image-card {
        width: 240px;
        height: 328px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .ui-main-panel {
        width: 95%;
        min-height: 850px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 40px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 400px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 300px;
        height: 350px;
    }

    .security-image-card {
        width: 290px;
        height: 380px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 820px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .panel-text-module {
        padding: 20px 45px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 410px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 305px;
        height: 355px;
    }

    .security-image-card {
        width: 245px;
        height: 335px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 850px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 50px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 415px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 308px;
        height: 358px;
    }

    .security-image-card {
        width: 298px;
        height: 388px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .ui-main-panel {
        width: 95%;
        height: 580px;
        margin: 60px auto;
        padding: 18px;
        border-radius: 45px;
        border-width: 5px;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .panel-text-module {
        padding: 20px 0 20px 70px;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: auto;
        width: 100%;
    }

    .card-stack-viewport {
        width: 350px;
        height: 400px;
    }

    .security-image-card {
        margin-top: 10px;
        margin-left: 10px;
        width: 290px;
        height: 390px;
    }

}

/* ====================== End ======================= */

/* PC BUILD DETAILS */

.pc-project-container {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #000; 
    color: #fff;
    overflow-x: hidden;
    box-sizing: border-box;
}

.top-section {
    position: relative;
    width: 100%;
    height: 650px;
    margin: 0;
    padding: 0;
    background-color: #222; 
    background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
    box-sizing: border-box;
    animation: fadeIn 1s ease-out, subtleZoom 20s ease-in-out infinite alternate;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes subtleZoom {
    from {
        background-size: 100%;
    }
    to {
        background-size: 105%;
    }
}

.bottom-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
    background-color: #000; 
    text-align: center;
    box-sizing: border-box;
    animation: fadeInUp 1s ease-out 0.3s both;
}

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

.pc-cases-row {
    position: relative;
    width: 100%;
    max-width: 2500px;
    margin: clamp(-100px, -15vh, -200px) auto 0;
    display: flex;
    justify-content: center; 
    align-items: flex-end; 
    z-index: 10;
    padding: 0 clamp(15px, 3vw, 40px);
    box-sizing: border-box;
    animation: slideUp 1.2s ease-out 0.5s both;
}

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

.pc-case-image {
    width: 100%; 
    height: auto;
    max-width: 100%;
    min-height: clamp(150px, 25vh, 300px);
    max-height: clamp(250px, 40vh, 520px);
    object-fit: contain;
    object-position: center bottom;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.pc-case-image:hover {
    transform: scale(1.05) translateY(-10px);
    filter: brightness(1.1);
}

.caption {
    margin: clamp(20px, 3vh, 50px) 0 0;
    padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
    z-index: 20;
    box-sizing: border-box;
    animation: fadeIn 1s ease-out 0.8s both;
}

.caption p {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(16px, 3.5vw, 32px);
    font-weight: 400;
    margin-top: 20px;
    padding: 0;
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    line-height: 1.4;
}

.sr-title {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto 50px;
    padding: 0 clamp(15px, 3vw, 30px);
    box-sizing: border-box;
}

.member-shop h1 {
    text-align: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 7vw, 64px);
    margin: clamp(20px, 4vh, 40px) 0;
    padding: 0 clamp(15px, 3vw, 30px);
    line-height: 1.2;
    box-sizing: border-box;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Universal box-sizing */
* {
    box-sizing: border-box;
}

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
    .top-section {
        height: clamp(250px, 35vh, 300px);
        background-position: center;
        box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        animation: subtlePulse 8s ease-in-out infinite;
    }
    
    .pc-cases-row {
        margin-top: clamp(-150px, -15vh, -100px);
        padding: 0 10px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 500px;
        animation: floatIn 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(30px);
    }
    
    .pc-case-image:nth-child(1) {
        animation-delay: 0.2s;
    }
    
    .pc-case-image:nth-child(2) {
        animation-delay: 0.4s;
    }
    
    .pc-case-image:nth-child(3) {
        animation-delay: 0.6s;
    }
    
    .bottom-section {
        padding: 15px 10px;
        animation: fadeInUp 1s ease-out 0.8s forwards;
        opacity: 0;
    }
    
    .caption {
        margin-top: clamp(15px, 2vh, 30px);
        padding: 10px 15px;
        animation: slideInLeft 0.6s ease-out 1.2s forwards;
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .member-shop h1 {
        margin: 15px 0;
        padding: 0 10px;
        animation: fadeInScale 0.7s ease-out 0.3s forwards;
        opacity: 0;
        transform: scale(0.9);
    }
    
    /* Keyframe animations */
    @keyframes floatIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInLeft {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes fadeInScale {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes subtlePulse {
        0%, 100% {
            box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        }
        50% {
            box-shadow: inset 50px 50px 120px rgba(100, 0, 150, 0.5);
        }
    }
}
/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
    .top-section {
        height: clamp(300px, 45vh, 500px);
        background-position: top center;
        box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-90px, -14vh, -130px);
        padding: 0 15px;
    }
    
    .pc-case-image {
        min-height: 150px;
        max-height: 250px;
    }
    
    .bottom-section {
        padding: 20px 15px;
    }
    
    .caption {
        margin-top: clamp(18px, 2.5vh, 35px);
        padding: 12px 20px;
    }
    
    .member-shop h1 {
        margin: 20px 0;
        padding: 0 15px;
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    .top-section {
        height: clamp(400px, 55vh, 650px);
        box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-130px, -18vh, -180px);
        padding: 0 20px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 350px;
    }
    
    .bottom-section {
        padding: 25px 20px;
    }
    
    .caption {
        margin-top: clamp(25px, 3vh, 40px);
        padding: 15px 25px;
    }
    
    .member-shop h1 {
        margin: 25px 0;
        padding: 0 20px;
    }
}

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .top-section {
        height: clamp(500px, 65vh, 750px);
        box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-180px, -25vh, -250px);
        padding: 0 30px;
    }
    
    .pc-case-image {
        min-height: 280px;
        max-height: 450px;
    }
    
    .bottom-section {
        padding: 30px 25px;
    }
    
    .caption {
        margin-top: clamp(30px, 3.5vh, 45px);
        padding: 18px 30px;
    }
    
    .member-shop h1 {
        margin: 30px 0;
        padding: 0 25px;
    }
}

/* Extra large devices (large desktops) */
@media (min-width: 1440px) {
    .top-section {
        height: clamp(600px, 70vh, 800px);
        box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-220px, -30vh, -300px);
        padding: 0 40px;
    }
    
    .pc-case-image {
        min-height: 350px;
        max-height: 520px;
    }
    
    .bottom-section {
        padding: 35px 30px;
    }
    
    .caption {
        margin-top: clamp(35px, 4vh, 50px);
        padding: 20px 35px;
    }
    
    .member-shop h1 {
        margin: 35px 0;
        padding: 0 30px;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .pc-case-image {
        max-height: 600px;
    }
    
    .bottom-section {
        padding: 40px 40px;
    }
    
    .caption {
        padding: 25px 40px;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    .top-section {
        height: 60vh;
    }
    
    .pc-cases-row {
        margin-top: -20vh;
        padding: 0 clamp(10px, 2vw, 20px);
    }
    
    .pc-case-image {
        max-height: 35vh;
        min-height: 25vh;
    }
    
    .bottom-section {
        padding: 15px clamp(10px, 2vw, 20px);
    }
    
    .caption {
        margin-top: 15px;
        padding: 10px 15px;
    }
}

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
    .top-section {
        height: 50vh;
    }
    
    .pc-cases-row {
        margin-top: -15vh;
        padding: 0 10px;
    }
    
    .pc-case-image {
        max-height: 30vh;
        min-height: 20vh;
    }
    
    .bottom-section {
        padding: 10px 15px;
    }
    
    .caption {
        margin-top: 10px;
        padding: 8px 15px;
    }
    
    .member-shop h1 {
        margin: 10px 0;
    }
}

/* OVERVIEW */


.main-wrapper {
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            background-color: #000; 
            color: #fff;
            overflow-x: hidden;
            box-sizing: border-box;
        }

.hero-banner {
            position: relative;
            width: 100%;
            height: clamp(300px, 50vh, 800px);
            margin: 0;
            padding: 0;
            background-color: #222; 
            background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
            box-sizing: border-box;
        }

.footer-area {
            position: relative;
            width: 100%;
            margin: 0;
            padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
            background-color: #000; 
            text-align: center;
            box-sizing: border-box;
        }

.showcase-grid {
            position: relative;
            width: 100%;
            max-width: 2500px;
            margin: clamp(-100px, -15vh, -200px) auto 0;
            display: flex;
            justify-content: center; 
            align-items: flex-end; 
            z-index: 10;
            padding: 0 clamp(15px, 3vw, 40px);
            box-sizing: border-box;
        }

.featured-img {
            width: 100%; 
            height: auto;
            max-width: 100%;
            min-height: clamp(150px, 25vh, 300px);
            max-height: clamp(250px, 40vh, 520px);
            object-fit: contain;
            object-position: center bottom;
            display: block;
            margin: 0;
            padding: 0;
        }

.text-overlay {
            margin: clamp(20px, 3vh, 50px) 0 0;
            padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
            z-index: 20;
            box-sizing: border-box;
        }

.text-overlay p {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(16px, 3.5vw, 32px);
            font-weight: 400;
            margin: 0;
            padding: 0;
            letter-spacing: clamp(0.5px, 0.1vw, 1px);
            line-height: 1.4;
        }

.heading-wrapper {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(15px, 3vw, 30px);
            box-sizing: border-box;
        }

.store-header h1 {
            text-align: center;
            color: white;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(28px, 7vw, 64px);
            margin: clamp(20px, 4vh, 40px) 0;
            padding: 0 clamp(15px, 3vw, 30px);
            line-height: 1.2;
            box-sizing: border-box;
        }

/* OVERVIEW */
.page-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
        }

        /* Row 1 - Hero Section */
.intro-section {
            font-family: "Space Grotesk", sans-serif;
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 30px);
            padding: clamp(20px, 4vw, 60px);
            min-height: 0;
        }

.intro-section h1 {
            grid-column: 1 / -1;
            font-size: clamp(28px, 6vw, 60px);
            font-weight: 700;
            margin: 0 auto;
            text-align: center;
            line-height: 1.2;
        }

.intro-section p {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            font-size: clamp(16px, 2.5vw, 32px);
            font-weight: 400;
            line-height: 1.6;
            color: white;
            padding: 0 clamp(10px, 2vw, 20px);
        }

/* Row 2, 3, 4, 5 - Content Sections */
.flex-section {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

.text-block {
            padding: clamp(25px, 5vw, 80px) clamp(20px, 4vw, 60px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            order: 1;
        }

.visual-block {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            min-height: clamp(250px, 40vh, 450px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            order: 2;
            width: 100%;
        }

.visual-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

.text-block h2 {
            font-size: clamp(28px, 5vw, 64px);
            margin-bottom: clamp(15px, 3vw, 25px);
            line-height: 1.2;
            width: 100%;
            padding-bottom: 1rem;
        }

.text-block p {
            font-size: clamp(14px, 2.2vw, 28px);
            font-weight: 400;
            line-height: 1.7;
            color: white;
            margin-bottom: clamp(20px, 4vw, 30px);
            max-width: 800px;
        }

.action-btn {
        text-decoration: none;
        color: white;
        font-size: 18px;
        font-weight: 500;
        padding: 15px 70px;
        border-radius: 70px;
        border: 1px solid #7B54B1;
        margin-top: 30px;
        background: linear-gradient(to right, rgba(168, 85, 247, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
        background-repeat: no-repeat;
        background-size: 80%;
        animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.action-btn:hover {
            transform: translateY(-2px);
            background-color: #a855f7;
        }

.action-btn:active {
            transform: translateY(0);
        }

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
            .hero-banner {
                height: clamp(250px, 35vh, 300px);
                background-position: center;
                box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-150px, -15vh, -100px);
                padding: 0 10px;
            }
            
            .featured-img {
                min-height: 120px;
                max-height: 200px;
            }
            
            .footer-area {
                padding: 15px 10px;
            }
            
            .text-overlay {
                margin-top: clamp(15px, 2vh, 30px);
                padding: 10px 15px;
            }
            
            .store-header h1 {
                margin: 15px 0;
                padding: 0 10px;
            }
        }

/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
            .hero-banner {
                height: clamp(300px, 45vh, 500px);
                background-position: top center;
                box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-90px, -14vh, -130px);
                padding: 0 15px;
            }
            
            .featured-img {
                min-height: 150px;
                max-height: 250px;
            }
            
            .footer-area {
                padding: 20px 15px;
            }
            
            .text-overlay {
                margin-top: clamp(18px, 2.5vh, 35px);
                padding: 12px 20px;
            }
            
            .store-header h1 {
                margin: 20px 0;
                padding: 0 15px;
            }
        }

/* Medium devices (tablets) */
@media (min-width: 768px) {
            .intro-section {
                gap: clamp(20px, 3vw, 30px);
                padding: clamp(30px, 5vw, 80px);
            }

            .intro-section p {
                width: 85%;
                font-size: clamp(18px, 2.8vw, 34px);
            }

            .text-block {
                padding: clamp(35px, 6vw, 70px) clamp(25px, 5vw, 50px);
            }

            .visual-block {
                min-height: clamp(300px, 45vh, 500px);
            }

            .action-btn {
                max-width: 300px;
                min-height: 52px;
            }
        }

@media (min-width: 768px) and (max-width: 1023px) {
            .hero-banner {
                height: clamp(400px, 55vh, 650px);
                box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-130px, -18vh, -180px);
                padding: 0 20px;
            }
            
            .featured-img {
                min-height: 200px;
                max-height: 350px;
            }
            
            .footer-area {
                padding: 25px 20px;
            }
            
            .text-overlay {
                margin-top: clamp(25px, 3vh, 40px);
                padding: 15px 25px;
            }
            
            .store-header h1 {
                margin: 25px 0;
                padding: 0 20px;
            }
        }

/* Desktop Breakpoint (1024px and up) */
@media (min-width: 1024px) {
            .intro-section {
                grid-template-columns: repeat(2, 1fr);
                align-items: center;
                padding: clamp(40px, 6vw, 100px);
            }

            .intro-section h1 {
                text-align: left;
                font-size: clamp(36px, 5vw, 60px);
            }

            .intro-section p {
                width: 100%;
                text-align: left;
                padding-left: 0;
                font-size: clamp(20px, 2.2vw, 32px);
            }

            .flex-section {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                min-height: clamp(450px, 55vh, 650px);
            }

            .text-block {
                text-align: left;
                align-items: flex-start;
                padding: clamp(50px, 7vw, 90px) clamp(40px, 6vw, 80px);
                order: 1;
            }

            .text-block h2 {
                text-align: left;
                font-size: clamp(32px, 4.5vw, 64px);
            }

            .text-block p {
                font-size: clamp(16px, 2vw, 28px);
            }

            .visual-block {
                min-height: 100%;
                order: 2;
            }

            /* Alternate layout for odd rows (content left, image right) */
            .flex-section:nth-child(odd) .text-block {
                order: 1;
            }

            .flex-section:nth-child(odd) .visual-block {
                order: 2;
            }

            /* Even rows (image left, content right) */
            .flex-section:nth-child(even) .text-block {
                order: 2;
            }

            .flex-section:nth-child(even) .visual-block {
                order: 1;
            }

            .action-btn {
                max-width: 320px;
                width: auto;
                min-height: 54px;
            }
        }

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
            .hero-banner {
                height: clamp(500px, 65vh, 750px);
                box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-180px, -25vh, -250px);
                padding: 0 30px;
            }
            
            .featured-img {
                min-height: 280px;
                max-height: 450px;
            }
            
            .footer-area {
                padding: 30px 25px;
            }
            
            .text-overlay {
                margin-top: clamp(30px, 3.5vh, 45px);
                padding: 18px 30px;
            }
            
            .store-header h1 {
                margin: 30px 0;
                padding: 0 25px;
            }
        }

/* Large Desktop Breakpoint (1440px and up) */
@media (min-width: 1440px) {
            .page-wrapper {
                max-width: 1920px;
                margin: 0 auto;
            }

            .text-block p {
                font-size: clamp(18px, 1.5vw, 28px);
            }

            .hero-banner {
                height: clamp(600px, 70vh, 800px);
                box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-220px, -30vh, -300px);
                padding: 0 40px;
            }
            
            .featured-img {
                min-height: 350px;
                max-height: 520px;
            }
            
            .footer-area {
                padding: 35px 30px;
            }
            
            .text-overlay {
                margin-top: clamp(35px, 4vh, 50px);
                padding: 20px 35px;
            }
            
            .store-header h1 {
                margin: 35px 0;
                padding: 0 30px;
            }
        }

/* Ultra-wide screens (1920px and up) */
@media (min-width: 1920px) {
            .intro-section h1 {
                font-size: 64px;
            }

            .intro-section p {
                font-size: 32px;
            }

            .text-block h2 {
                font-size: 64px;
            }

            .text-block p {
                font-size: 28px;
            }

            .featured-img {
                max-height: 600px;
            }
            
            .footer-area {
                padding: 40px 40px;
            }
            
            .text-overlay {
                padding: 25px 40px;
            }
        }

/* Small Mobile Optimization (max 375px) */
@media (max-width: 375px) {
            .intro-section {
                gap: 12px;
            }

            .text-block {
                padding: clamp(20px, 5vw, 30px) clamp(15px, 4vw, 20px);
            }

            .visual-block {
                min-height: clamp(200px, 35vh, 300px);
            }

            .action-btn {
                min-height: 42px;
                font-size: 13px;
            }
        }

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
            .hero-banner {
                height: 60vh;
            }
            
            .showcase-grid {
                margin-top: -20vh;
                padding: 0 clamp(10px, 2vw, 20px);
            }
            
            .featured-img {
                max-height: 35vh;
                min-height: 25vh;
            }
            
            .footer-area {
                padding: 15px clamp(10px, 2vw, 20px);
            }
            
            .text-overlay {
                margin-top: 15px;
                padding: 10px 15px;
            }

            .visual-block {
                min-height: 70vh;
            }
            
            .text-block {
                padding: clamp(20px, 4vh, 40px) clamp(20px, 4vw, 60px);
            }
        }

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
            .hero-banner {
                height: 50vh;
            }
            
            .showcase-grid {
                margin-top: -15vh;
                padding: 0 10px;
            }
            
            .featured-img {
                max-height: 30vh;
                min-height: 20vh;
            }
            
            .footer-area {
                padding: 10px 15px;
            }
            
            .text-overlay {
                margin-top: 10px;
                padding: 8px 15px;
            }
            
            .store-header h1 {
                margin: 10px 0;
            }
        }

/* Print styles */
@media print {
            .action-btn {
                background: #6d28d9;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }

/*FDAS PAGE BY PCESS*/
/*FDAS PAGE BY PCESS*/


.top-feature-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-hero-wrapper {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('/images/services/FDAS2.jpg');
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    z-index: 1;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,    /* Top is transparent */
        transparent 50%,   /* Transparent up to halfway */
        rgba(0, 0, 0, 0.3) 60%,  /* Start fading in at halfway */
        rgba(0, 0, 0, 0.8) 80%,  /* Darker at bottom */
        black 100%        /* Fully visible at bottom */
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 60%,
        rgba(0, 0, 0, 0.8) 80%,
        black 100%
    );
}

.header-text-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 60px;
    width: 100%;
    text-align: center;
    animation: fadeInLeft 1.5s ease-out;
    z-index: 2;
}

.fade-right {
    display: inline-block;
    animation: fadeInRight 1.5s ease-out;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(0);
    }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.header-text-layer h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}

.view-details-btn {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 20px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.view-details-btn:hover {
    background-color: #FF4500;
}

.selection-criteria-block {
    display: flex;
    align-items: center;
    max-width: 1350px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
   
    .selection-criteria-block.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .selection-criteria-block.animate-visible {
        animation: 2s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* Left Column - Visual Container */
.image-display-area {
    flex: 1;
    min-height: 500px;
    background-image: url("https://i.pinimg.com/736x/64/f7/28/64f728aaf40516331f0f6487c786662f.jpg");
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

.image-display-area:hover {
    /* Apply Gradient Border on Hover */
    border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
}

.selection-criteria-block:nth-child(2) .image-display-area {
    background-image: url("https://i.pinimg.com/736x/64/8f/15/8f15c8d3e4c5a4b8c9e1a4e5e.jpg");
}

.selection-criteria-block:nth-child(2) .image-display-area:hover {
    border-image: linear-gradient(90deg, #FF4500 0%, #FF6347 50%, #FF8C00 100%) 1;
}

/* Right Column - Content Container */
.info-details-box {
    flex: 1;
    padding-left: 70px;
}

@keyframes glow-fire {
    from {
        text-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
    }
    to {
        text-shadow: 0 0 30px rgba(255, 69, 0, 0.8), 0 0 40px rgba(255, 140, 0, 0.6);
    }
}


/* Title Styling */
.title-first-line {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: 0%;
}


/* Feature List Styling */
.key-advantages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.key-advantages-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.key-advantages-list li:hover{
    transform: translateY(-5px) scale(1.05);
}


.item-icon-style {
    font-size: 20px;
    margin-right: 15px;
    color: white;
    transform: rotate(-15deg);
}

.item-icon-style:hover {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}


.value-proposition-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 30px 20px;
    margin: auto;
}


.value-card-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-display-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}



.card-text-content {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.customer-feedback-module {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "content visual"
        "button button";
   
    gap: 10px; 
    max-width: 1000px; 
    margin: 20px auto; 
    padding: 0 10px; 
    align-items: start;

}

    .customer-feedback-module.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .customer-feedback-module.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }


.feedback-text-area {
    grid-area: content;
    padding-right: 20px;
    
}

.feedback-header-one {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.client-quote-text {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.rating-stars-container .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    
    
    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .rating-stars-container :hover {
        transform: translateY(-5px) scale(1.05);
    }


/* Product Visual (Right Column) */
.item-showcase-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(https://i.pinimg.com/736x/08/ad/46/08ad464419417d928e8cb3ae47dd8219.jpg);
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .item-showcase-visual:hover {
        /* 1. Revert to Color on Hover */
        
        /* 2. Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
    }

/* Button Container (Spans both columns) */
.call-to-action-wrapper {
    grid-area: button;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* See Reviews Button Styling */
.reviews-link-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.reviews-link-button:hover {
    background-color: #FF4500;
}

.bottom-promo-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.secondary-hero-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('https://i.pinimg.com/736x/fc/c4/28/fcc4281f495dd945fb8261ef33f0afcf.jpg');      
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%); /* Become fully transparent (bottom fade-out) */
    overflow: hidden;   
}

.bottom-text-layer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
}

.bottom-text-layer h1 {
    color: white;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-style: Bold;
    font-size: 36px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}


.link-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    border: 4px solid #fff;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.2s, color 0.3s;
    background-color: transparent;
}

.link-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    color: #fff;
}

.link-action-btn .fas {
    margin-left: 10px;
    font-size: 0.9em;
    transition: margin-left 0.3s;
}

.link-action-btn:hover .fas {
    margin-left: 15px;
}

/* FDAS RESPONSIVE DESIGN */

    @media (min-width: 1400px) {
    .top-feature-area {
        max-width: 1500px;
    }

    .selection-criteria-block {
        max-width: 1500px;
    }
    
    .value-proposition-grid {
        max-width: 1500px;
        gap: 50px;
    }

    .customer-feedback-module {
        max-width: 1400px;
    }
}


    @media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .selection-criteria-block {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-first-line {
        font-size: 2.8rem; 
    }
    
    /* Ensure the grid columns are spacious */
    .value-proposition-grid {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 30px auto;
    }
}


/* 🚀 LARGE SCREEN RESPONSIVENESS (Desktops: min-width: 1025px) */
@media (min-width: 1025px) {

    /* BOTTOM PROMO STRIP */
    .secondary-hero-wrapper {
        /* Increase height of the hero strip */
        height: 550px;
    }
    
    .bottom-text-layer {
        /* Adjust padding for larger viewports */
        padding: 50px 80px;
    }

    .bottom-text-layer h1 {
        /* Increase main heading size */
        font-size: 64px;
    }
}



    @media(max-width: 768px) {

        /* top feature area */
        .top-feature-area {
            width: 100%; /* Change from max-width */
            max-width: 100%; /* Ensure it doesn't overflow */
            margin-top: -150px;
        }

        /* PRIMARY HERO WRAPPER - Fix mobile overflow */
        .primary-hero-wrapper {
            width: 100% !important; /* Override 127% width on mobile */
            height: 450px; /* Adjust height for mobile */
        }

        /* Hero text adjustments for mobile */
        .header-text-layer {
            padding: 20px 30px;
            transform: translate(-50%, -60%); /* Elevate the text position even more */
        }

        .header-text-layer h1 {
            font-size: 28px; /* Smaller font for mobile */
            line-height: 1.1;
        }

        /* SELECTION CRITERIA BOX */
        .selection-criteria-block {
            flex-direction: column;
            padding: 0 20px;
            margin: 40px auto;
        }

        .image-display-area {
            width: 100%;
            min-height: 350px;
            margin-left: 0;
            margin-bottom: 30px;
            border-width: 8px;
        }

        .info-details-box {
            width: 100%;
            padding-left: 0;
            text-align: center;
        }

        .title-first-line {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .key-advantages-list li {
            font-size: 24px;
            line-height: 1.8;
            justify-content: center;
        }

        .item-icon-style {
            font-size: 18px;
            margin-right: 10px;
        }
    

        /*value-proposition grid */
        .value-proposition-grid {
            font-size: 2rem;
            grid-template-columns: 1fr; /* Stack items vertically */
        }

            .card-text-content{
                font-size: 1.5rem;
            }


        /* bottom promo strip */
        .bottom-promo-strip{
            font-size: 2rem;
        }
                    
        .secondary-hero-wrapper {
            max-width: 768px; /* Ensure it doesn't overflow */
        }

    }

    @media (min-width: 577px) and (max-width: 1024px) {
        /* PRIMARY HERO SECTION */
        .primary-hero-wrapper {
            height: 500px;
        }

        .header-text-layer {
            padding: 30px 40px;
        }

        .header-text-layer h1 {
            font-size: 38px;
        }

        /* SELECTION CRITERIA BLOCK */
        .selection-criteria-block {
            /* Keep them side-by-side but allow wrapping if needed */
            flex-direction: row; 
            flex-wrap: wrap; 
            padding: 0 30px; 
        }
        
        .image-display-area {
            min-height: 400px; 
        }

        .info-details-box {
            padding-left: 50px;
        }

        .title-first-line {
            font-size: 35px;
        }

        .key-advantages-list li {
            font-size: 20px;
        }
        
        /* VALUE PROPOSITION GRID */
        .value-proposition-grid {
            /* Cards may wrap to the next line */
            gap: 30px;
            padding: 25px 30px;
            justify-content: center;
        }
        
        .value-card-element {
            min-width: 300px; /* Give them more space than on mobile */
        }


        /* BOTTOM PROMO STRIP */
        .secondary-hero-wrapper {
            height: 450px;
        }
        
        .bottom-text-layer {
            padding: 30px 40px;
        }

        .bottom-text-layer h1 {
            font-size: 40px;
        }
    }



    @media (max-width: 768px) {
    .customer-feedback-module {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "visual"
            "button";
        margin: 40px auto;
        gap: 20px;
    }

    .feedback-text-area {
        padding-right: 0;
        text-align: center;
    }

    .feedback-header-one {
        font-size: 36px;
    }

    .client-quote-text {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .rating-stars-container .fas {
        font-size: 20px;
        margin-top: 15px;
    }

    .item-showcase-visual {
        min-height: 400px;
        border-width: 8px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .customer-feedback-module {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }

    .feedback-header-one {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .client-quote-text {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .rating-stars-container .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .item-showcase-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .feedback-header-one {
        font-size: 24px;
    }

    .client-quote-text {
        font-size: 16px;
    }

    .item-showcase-visual {
        min-height: 250px;
    }
}



/* BLOG */ /* BLOG */

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


.visual-deck-viewport {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

.visual-deck-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.7s ease-in-out;
}

.visual-deck-card {
    flex-shrink: 0;
    width: 33.333%;
    height: 100%;
    position: relative;
}

.deck-card-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
}

.deck-card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10%;
    box-sizing: border-box;
    z-index: 2;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
}

.text-focus-wrapper {
    font-family: "lexend";
    max-width: 500px;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.focus-main-title,
.focus-sub-title,
.focus-description,
.call-to-action-btn {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInSlide 0.6s ease-out forwards;
}

.focus-main-title {
    color: white;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 0.2em;
    animation-delay: 0.5s;
}

.focus-sub-title {
    font-size: 45px;
    font-weight: 200;
    letter-spacing: 0.1em;
    margin-bottom: 1em;
    color: white;
    animation-delay: 0.6s;
}

.focus-description {
    font-family: "Lexend";
    font-size: 24px;
    line-height: 1.5;
    font-weight: 200;
    margin-bottom: 2em;
    color: white;
    animation-delay: 0.7s;
}

.call-to-action-btn {
    display: inline-block;
    padding: 15px 30px;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    animation-delay: 0.8s;
}

.call-to-action-btn:hover {
    background-color: #fff;
    color: #000;
}

.deck-pagination-nav {
    position: absolute;
    bottom: 30px;
    left: 48%;
    z-index: 3;
    display: flex;
    gap: 10px;
    opacity: 0;
    transform: translate(-50%, 20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.9s; 
}

.dot-control {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot-control.active {
    background-color: #fff;
}

@media (max-width: 1024px) {
    .deck-card-content {
        padding-left: 5%;
    }

    .text-focus-wrapper {
        max-width: 400px;
    }

    .focus-main-title {
        font-size: 4.5vw;
    }

    .focus-sub-title {
        font-size: 4vw;
    }

    .focus-description {
        font-size: 2vw;
    }
}


@media (max-width: 768px) {
    .visual-deck-viewport {
        height: 70vh;
    }

    .deck-card-content {
        align-items: flex-start;
        padding: 10% 5%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
    }

    .text-focus-wrapper {
        max-width: 100%;
    }

    .focus-main-title {
        font-size: 32px;
    }

    .focus-sub-title {
        font-size: 28px;
    }

    .focus-description {
        font-size: 16px;
    }

    .call-to-action-btn {
        font-size: 1em;
        padding: 12px 24px;
    }

    .deck-pagination-nav {
        left: 45%;
        bottom: 40px;
        gap: 8px;
    }

    .dot-control {
        width: 10px;
        height: 10px;
    }
}

/*====================== LATEST PRODUCTS ===================*/

.catalog-display-area {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.catalog-display-area__title {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 40px;
    text-align: left;
}

.catalog-display-area__grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.item-preview {
    background-color: black;
    border-radius: 15px;
    height: 400px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.6s ease-out, transform 0.3s ease, box-shadow 0.3s ease;
}

        
.item-preview {
    opacity: 0;
    transform: translateY(50px);
}

.item-preview.animate {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s !important; 
}

    .item-preview:nth-child(2) { transition-delay: 0.2s; }
    .item-preview:nth-child(3) { transition-delay: 0.4s; }
    .item-preview:nth-child(4) { transition-delay: 0.6s; }
    .item-preview:nth-child(5) { transition-delay: 0.8s; }
    .item-preview:nth-child(6) { transition-delay: 0.10s; }
        
    .item-preview:hover,
    .item-preview.animate:hover {
    transform: translateY(-12px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-preview__image {
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

    .item-preview__image1 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image2 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image3 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image4 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image5 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image6 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }

.item-preview__details {
    color: white;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.item-preview__name {
    font-family: "Space Grotesk";
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.item-preview__description {
    font-family: "Lexend";
    font-size: 14px;
    color: white;
    margin-bottom: 20px;
    line-height: 1.4;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-preview__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.item-preview__price {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.item-preview__status {
    font-family: "Lexend";
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid;
    min-width: 80px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

.item-preview__status--in-stock {
    border-radius: 15px;
    color: white;
    border-color: white;
}
        
.item-preview__status--in-stock:hover {
    background-color: white;
    color: black;
    cursor: default;
}

.item-preview__status--pre-order {
    border-radius: 15px;
    color: white;
    border-color: white;
}

.item-preview__status--pre-order:hover {
    background-color: white;
    color: black;
}

.catalog-display-area__button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.cta-button {
    font-family: "Lexend";
    width: 320px;
    max-width: 100%;
    height: 65px;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button:hover {
    background-color: #fff;
    color: #000;
}

@media (max-width: 768px) {
    .catalog-display-area__title {
        font-size: 28px;
        margin-top: 40px;
}
    .item-preview {
        height: auto;
}
}

@media (max-width: 480px) {
    .catalog-display-area__grid-layout {
        grid-template-columns: 1fr;
        gap: 20px;
}

    .cta-button {
        height: 55px;
        font-size: 16px;
        width: 100%;
}
}

/*============= TRENDING GADGETS ====================*/

 .ds-animate-scroll {
            opacity: 0;
            transition: var(--ds-transition); 
        }

       
        @keyframes fadeInMove {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ds-main-container.ds-is-visible {
            animation: fadeInMove 0.8s ease-out forwards;
        }

        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .ds-timeline-item.ds-is-visible {
            animation: slideIn 0.6s ease-out forwards;
        }

        
        .ds-timeline-item:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-timeline-item:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-timeline-item:nth-child(3).ds-is-visible { animation-delay: 0.3s; }

        .ds-gadget-card.ds-is-visible {
            animation: fadeInMove 0.6s ease-out forwards;
        }

        .ds-gadgets-block .ds-gadget-card:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(3).ds-is-visible { animation-delay: 0.3s; }


        .ds-main-container {
            font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
            color: white;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            max-width: 1200px;
            width: 90%; 
            margin: 200px auto;
        }

        .ds-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .ds-section-title {
            font-size: 38px;
            font-weight: 700;
            margin: 0;
            background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ds-view-all-link {
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-weight: 500;
            transition: var(--ds-transition);
            position: relative;
        }

        .ds-view-all-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #0a58ca, #00d4ff);
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover::after {
            width: 100%;
        }

        .ds-view-all-link:hover {
            color: #00d4ff;
            transform: translateX(5px);
        }

        .ds-view-all-link-icon {
            margin-left: 8px;
            font-size: 0.9rem;
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover .ds-view-all-link-icon {
            transform: translateX(3px);
        }


        .ds-gadgets-block {
            margin-right: 30px;
            display: flex;
            flex-direction: column;
            gap: 60px;
        }

        .ds-gadget-card {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            padding: 18px;
            height: 160px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
        }

        .ds-gadget-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover::before {
            left: 100%;
        }

        .ds-gadget-card:hover {
            background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2), var(--ds-shadow-lg);
            transform: translateY(-5px) scale(1.02);
        }

        .ds-gadget-info {
            display: flex;
            align-items: flex-start;
            flex-grow: 1;
        }

        .ds-gadget-thumbnail {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 15px;
            margin-right: 15px;
            margin-top: 25px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }

        .ds-gadget-thumbnail img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            object-fit: cover;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail img {
            transform: scale(1.1);
        }

        .ds-gadget-content-area h3 {
            font-size: 1.1rem;
            margin: 0 0 5px 0;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-content-area h3 {
            color: #00d4ff;
        }

        .ds-gadget-meta {
            font-size: 0.8rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .ds-gadget-category {
            font-weight: 600;
            margin-right: 10px;
        }

        .ds-gadget-category--mobile,
        .ds-gadget-category--gaming {
            color: white;
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            text-align: center;
            padding: 4px 1px;
            border-radius: 15px;
            width: 80px;
            font-size: 12px;
            font-weight: 200;
            border: 1px solid rgba(0, 123, 255, 0.3);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-category--mobile,
        .ds-gadget-card:hover .ds-gadget-category--gaming {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.4) 0%, rgba(0, 123, 255, 0.25) 100%);
            border-color: rgba(0, 123, 255, 0.5);
        }

        .ds-gadget-time {
            color: #aaa;
        }

        .ds-gadget-description {
            font-size: 0.9rem;
            color: #ccc;
        }

        .ds-gadget-link-arrow {
            color: white;
            background: linear-gradient(135deg, #333 0%, #444 100%);
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 29px;
            margin-left: 20px;
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
            border: 1px solid #444;
        }

        .ds-gadget-card:hover .ds-gadget-link-arrow {
            background: linear-gradient(135deg, #0a58ca 0%, #00d4ff 100%);
            border-color: #00d4ff;
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
        }

        .ds-updates-block {
            margin-left: 30px;
            position: relative;
        }

        .ds-timeline-list {
            position: relative;
            padding-left: 20px;
        }

        .ds-timeline-list::before {
            content: '';
            position: absolute;
            top: 0;
            left: 21px;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, #0a58ca 0%, #2f8d46 50%, #C34814 100%);
            z-index: 0;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item {
            position: relative;
            margin-bottom: 25px;
            padding-bottom: 20px;
            padding-left: 30px;
        }

        .ds-timeline-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .ds-timeline-item::after { 
            content: '';
            position: absolute;
            left: 4px;
            top: 11px;
            width: 15px;
            height: 2px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
            z-index: 0;
        }

        .ds-timeline-icon {
            position: absolute;
            left: -10px;
            top: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            transition: var(--ds-transition);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item:hover .ds-timeline-icon {
            transform: scale(1.15);
            box-shadow: 0 0 20px currentColor;
        }

        .ds-timeline-item--upcoming .ds-timeline-icon { 
            color: #0a58ca;
            background: radial-gradient(circle, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.1) 100%);
        }
        .ds-timeline-item--launch .ds-timeline-icon { 
            color: #2f8d46;
            background: radial-gradient(circle, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.1) 100%);
        }
        .ds-timeline-item--partnership .ds-timeline-icon { 
            color: #C34814;
            background: radial-gradient(circle, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.15) 100%);
        }

        .ds-update-content {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            height: 220px;
            padding: 15px 20px;
            border-radius: 20px;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
        }

        .ds-update-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transition: var(--ds-transition);
        }

        .ds-update-content:hover::before {
            left: 100%;
        }

        .ds-update-content:hover {
            transform: translateY(-3px);
            box-shadow: var(--ds-shadow-lg);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover {
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2);
        }

        .ds-timeline-item--launch .ds-update-content:hover {
            border-color: #2f8d46;
            box-shadow: 0 8px 32px rgba(47, 141, 70, 0.2);
        }

        .ds-timeline-item--partnership .ds-update-content:hover {
            border-color: #C34814;
            box-shadow: 0 8px 32px rgba(195, 72, 20, 0.2);
        }

        .ds-update-meta-info {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 0.8rem;
        }

        .ds-update-category-tag {
            font-size: 15px;
            font-weight: 600;
            margin-right: 15px;
            padding: 4px;
            border-radius: 4px;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-category-tag {
            transform: scale(1.05);
        }

        .ds-timeline-item--upcoming .ds-update-category-tag { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-category-tag { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-category-tag { color: #C34814; }

        .ds-update-time-badgee,
        .ds-update-time-badge,
        .ds-update-time-badge-recent {
            color: white;
            text-align: center;
            padding: 4px 10px; 
            border-radius: 15px;
            width: 90px;
            font-weight: 400;
            transition: var(--ds-transition);
            border: 1px solid transparent;
            font-size: 0.8rem; 
        }

        .ds-update-time-badgee {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            border-color: rgba(0, 123, 255, 0.3);        
        }

        .ds-update-time-badge {
            background: linear-gradient(135deg, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.15) 100%);
            border-color: rgba(144, 255, 85, 0.3);  
        }

        .ds-update-time-badge-recent {
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.2) 100%);
            border-color: rgba(255, 107, 53, 0.3);           
        }

        .ds-update-content:hover .ds-update-time-badgee,
        .ds-update-content:hover .ds-update-time-badge,
        .ds-update-content:hover .ds-update-time-badge-recent {
            transform: scale(1.05);
        }

        .ds-update-content h3 {
            font-size: 1.1rem;
            margin: 0 0 10px 0;
            transition: var(--ds-transition);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover h3 { color: #00d4ff; }
        .ds-timeline-item--launch .ds-update-content:hover h3 { color: #90FF55; }
        .ds-timeline-item--partnership .ds-update-content:hover h3 { color: #FF6B35; }

        .ds-update-description {
            font-size: 0.9rem;
            color: #aaa;
            margin-bottom: 15px;
            margin-right: 150px;
        }

        .best-seller-thumbnail {
           width: 130px;
    height: 130px; /* Fixed square size */
    background: white; /* Changed to solid white instead of gradient */
    border-radius: 15px;
    margin-left: 320px;
    margin-top: -150px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: var(--ds-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px; /* Increased padding for better spacing */
        }

        .best-seller-thumbnail:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }

        .best-seller-thumbnail img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            display:block;
            border-radius: 15px;
            object-fit: cover;
            transition: var(--ds-transition);
        }

        .best-seller-thumbnail:hover img {
            transform: scale(1.1);
        }

        .ds-update-details-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
        }

        .ds-update-details-arrow {
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-details-arrow {
            transform: translateX(5px);
        }

       
        .ds-timeline-item--upcoming .ds-update-details-arrow { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-details-arrow { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-details-arrow { color: #C34814; }

        
        html {
            scroll-behavior: smooth;
        }

        /* Responsive adjustments */
        @media (max-width: 1240px) {
            .ds-main-container {
                width: 100%;
            }
        }

        @media (max-width: 992px) {
            .ds-main-container {
                grid-template-columns: 1fr;
                padding: 0 20px;
                width: auto;
                margin: 100px auto;
                gap: 50px;
            }
            
            .ds-gadgets-block {
                margin-right: 0;
            }
            
            .ds-updates-block {
                margin-left: 0;
            }
        }

        @media (max-width: 768px) {
            .ds-main-container {
                margin: 60px auto 60px;
                gap: 40px;
                padding: 0 15px;
            }
            
            .ds-section-title {
                font-size: 1.5rem;
            }
            
            .ds-gadgets-block {
                gap: 40px;
            }
            
            .ds-gadget-card {
                height: auto;
                min-height: 140px;
                flex-wrap: wrap;
                padding: 12px;
            }
            
            .ds-gadget-card:hover {
                transform: translateY(-3px) scale(1);
            }
            
            .ds-gadget-info {
                width: 100%;
            }
            
            .ds-gadget-thumbnail {
                width: 70px;
                height: 70px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 1rem;
            }
            
            .ds-gadget-description {
                font-size: 0.85rem;
            }
            
            .ds-gadget-link-arrow {
                margin-left: 0;
                margin-top: 10px;
                align-self: flex-end;
            }
            
            .ds-update-content {
                height: auto;
                min-height: 180px;
                padding: 12px 15px;
            }
            
            .ds-update-content h3 {
                font-size: 1rem;
            }
            
            .ds-update-description {
                font-size: 0.85rem;
            }
            
            .ds-timeline-list {
                padding-left: 15px;
            }
            
            .ds-timeline-list::before {
                left: 16px;
            }
            
            .ds-timeline-item {
                padding-left: 25px;
            }
        }

        @media (max-width: 480px) {
            .ds-main-container {
                margin: 40px auto;
                gap: 30px;
                padding: 0 10px;
            }
            
            .ds-section-header {
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-section-title {
                font-size: 1.3rem;
            }
            
            .ds-gadgets-block {
                gap: 30px;
            }
            
            .ds-gadget-card {
                padding: 10px;
                min-height: 120px;
            }
            
            .ds-gadget-thumbnail {
                width: 60px;
                height: 60px;
                margin-right: 10px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.95rem;
            }
            
            .ds-gadget-meta {
                font-size: 0.75rem;
                flex-wrap: wrap;
                gap: 5px;
            }
            
            .ds-gadget-description {
                font-size: 0.8rem;
            }
            
            .ds-gadget-link-arrow {
                width: 40px;
                height: 26px;
                font-size: 1rem;
            }
            
            .ds-gadget-category--mobile,
            .ds-gadget-category--gaming {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-content {
                padding: 10px 12px;
                min-height: 160px;
            }
            
            .ds-update-content h3 {
                font-size: 0.95rem;
            }
            
            .ds-update-description {
                font-size: 0.8rem;
                margin-bottom: 10px;
            }
            
            .ds-update-meta-info {
                font-size: 0.75rem;
            }
            
            .ds-update-category-tag {
                font-size: 13px;
                margin-right: 10px;
            }
            
            .ds-update-time-badgee,
            .ds-update-time-badge,
            .ds-update-time-badge-recent {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-details-row {
                font-size: 0.8rem;
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-timeline-icon {
                width: 24px;
                height: 24px;
                font-size: 0.85rem;
            }
            
            .ds-timeline-item::after {
                top: 10px;
            }
            
            .ds-timeline-item {
                margin-bottom: 20px;
                padding-bottom: 15px;
                padding-left: 20px;
            }
        }

        @media (max-width: 360px) {
            .ds-section-title {
                font-size: 1.2rem;
            }
            
            .ds-gadget-thumbnail {
                width: 55px;
                height: 55px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.9rem;
            }
        }

        /* Reduced motion for accessibility */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

/*=============== BLOG POST LATEST ================*/

.container-shell {
    font-family: "Space Grotesk", sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 15px; 
    box-sizing: border-box; 
    padding-top: 7rem;
    padding-bottom: 7rem;
}

/* --- New Scroll-Triggered Animation CSS --- */

/* Base style for elements that will animate (Start State: Hidden and slightly offset) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Featured (Showcase) zone has a slightly different animation (Start State: Slightly scaled down) */
.showcase-zone.animate-on-scroll {
    transform: scale(0.9);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Final State (triggered by JavaScript): Visible and in original position */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Featured zone's final visible state */
.showcase-zone.animate-on-scroll.is-visible {
    transform: scale(1);
}

/* Add brief delays for a staggered gallery effect */
.gallery-matrix > .content-block.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; }

/* Delay the side panel widgets */
.side-panel > .widget-container.animate-on-scroll:nth-child(1) { transition-delay: 0.2s; }
.side-panel > .widget-container.animate-on-scroll:nth-child(2) { transition-delay: 0.4s; }

/* TRENDING POSTS SCROLL BAR*/

.trending-posts-scroll {
  max-height: 390px;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 20px;
}

.trending-posts-scroll:hover {
  overflow-y: auto;
}

.trending-posts-scroll::-webkit-scrollbar {
  width: 8px;
}

.trending-posts-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* --- Original Design Styles --- */
    
.banner-strip {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap; 
}

.banner-strip h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px; 
}

.dual-column-frame {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: start;
}

.primary-zone {
    width: 100%;
}

.showcase-zone {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-zone:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.media-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.media-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.showcase-zone:hover .media-canvas {
    transform: scale(1.05);
}

.content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    padding: 40px 30px 30px;
    transition: padding 0.3s ease;
}

.showcase-zone:hover .content-overlay {
    padding: 50px 30px 30px;
}

.attributes-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.category-marker {
    background: rgba(59, 130, 246, 0.6);
    color: #fff;
    padding: 8px 18px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.time-stamp {
    color: #aaa;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.time-stamp::before {
    content: '•';
    color: #3b82f6;
}

.feature-title {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s ease;
    cursor: pointer;
}


.description-snippet {
    color: white ;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.progress-bullets {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.bullet-point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.bullet-point::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #3b82f6;
    transition: all 0.3s ease;
}

.bullet-point:hover {
    background: #666;
    transform: scale(1.2);
}

.bullet-point.active-state {
    background: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.side-panel {
    display: flex;
    flex-direction: column;
    gap: 43px;
    width: 100%;
}

.widget-container {
    color: white;
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 25px;
    width: 100%;
    transition: all 0.3s ease;
}

.widget-container:hover {
    border-color: #3b82f6;
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.widget-container h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.widget-container h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
}

.highlight-item {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #222;
    align-items: flex-start;
    transition: all 0.3s ease;
    cursor: pointer;
}

.highlight-item:hover {
    padding-left: 10px;
    background: rgba(59, 130, 246, 0.05);
}

.highlight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.position-badge {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    min-width: 40px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.highlight-item:hover .position-badge {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.item-content {
    flex: 1;
}

.item-content h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.highlight-item:hover .item-content h4 {
    color: #3b82f6;
}

.posted-time {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.highlight-item:hover .posted-time {
    color: #888;
}

.tag-collection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-element {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tag-element::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    transition: left 0.5s ease;
}

.tag-element:hover::before {
    left: 100%;
}

.tag-element:hover {
    background: #2a2a2a;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.2);
}

.gallery-matrix {
    color: white;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default for large screens */
    gap: 25px;
    width: 100%;
}

.content-block {
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
}

.content-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.content-block:hover::before {
    opacity: 1;
}

.content-block:hover {
    transform: translateY(-10px);
    border-color: #3b82f6;
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}

.preview-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image img {
    transform: scale(1.05);
}

.preview-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent);
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image::after {
    transform: translate(-50%, -50%) scale(1);
}

.text-section {
    padding: 25px;
    position: relative;
    z-index: 2;
}

.meta-information {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.subject-tag {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.subject-tag.gaming {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.content-block:hover .subject-tag.gaming {
    background: rgba(16, 185, 129, 0.2);
    transform: scale(1.05);
}

.subject-tag.arvr {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.content-block:hover .subject-tag.arvr {
    background: rgba(139, 92, 246, 0.2);
    transform: scale(1.05);
}

.subject-tag.security {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.content-block:hover .subject-tag.security {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.05);
}

.creation-date {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.content-block:hover .creation-date {
    color: #888;
}

.block-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.content-block:hover .block-title {
    color: #3b82f6;
}

.brief-description {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.content-block:hover .brief-description {
    color: #aaa;
}

.directional-icon {
    color: #3b82f6;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.content-block:hover .directional-icon {
    transform: translateX(10px);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* --- Media Queries for Responsiveness (Unchanged) --- */

/* Tablet/Medium Screens (Max 1024px) */
@media (max-width: 1024px) {
    
    .dual-column-frame {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    
    .side-panel {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 calc(50% - 10px); 
        max-width: calc(50% - 10px);
    }
}

    
@media (max-width: 640px) {
    .banner-strip h1 {
        font-size: 28px;
    }

    .media-wrapper {
        height: 350px; /* Smaller height for featured image */
    }

    .feature-title {
        font-size: 1.5rem;
    }

    /* Adjust gallery to a single column */
    .gallery-matrix {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Stack side panel widgets vertically */
    .side-panel {
        flex-direction: column;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/*================== END =====================*/

/* DOORLOCK SYSTEM BY PCESS */

.doorlock-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 70px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-doorlock-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;

    background-image:
    linear-gradient(200deg, rgba(62, 222, 47, 0) 30%, rgba(37, 228, 145, 0.5) 70%, rgba(27, 99, 255, 1) 100%),
    url('../images/pc-builds.jpg');
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
    to bottom,
    transparent 0%,  /* Start fully transparent (top fade-out) */
    black 10%,        /* Become fully visible at 5% */
    black 85%,       /* Stay fully visible until 95% */
    transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.doorlock-header {
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.doorlock-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}


.why-choose-layer {
    text-align: center;
    padding: 40px 20px;
}

    .why-choose-layer.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

	.why-choose-layer.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

.why-choose-question {
    font-family: 'Lexend', sans-serif;
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.why-choose-answer{
    font-size: 32px;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* client-nav section */


/* Base state for all sections - hidden by default */
.cnsection, .projsection {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Active section - visible with animation */
.cnsection:not(.d-none), .projsection:not(.d-none) {
    opacity: 1;
    transform: translateY(0);
    animation: slideInUp 0.6s ease-out forwards;
}

/* Keyframe animation for sliding in from bottom */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternative: Fade and Scale Animation */
.cnsection.scale-animation:not(.d-none), 
.projsection.scale-animation:not(.d-none) {
    animation: fadeScale 0.5s ease-out forwards;
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Staggered animation for child elements */
.cnsection:not(.d-none) .section-h1,
.projsection:not(.d-none) .proj-h1 {
    animation: slideInUp 0.6s ease-out 0.1s backwards;
}

.cnsection:not(.d-none) .section-p,
.projsection:not(.d-none) .proj-p {
    animation: slideInUp 0.6s ease-out 0.2s backwards;
}

.cnsection:not(.d-none) .dl-gradient-button,
.projsection:not(.d-none) .proj-gradient-button {
    animation: slideInUp 0.6s ease-out 0.3s backwards;
}

.cnsection:not(.d-none) .gradient-border-box,
.projsection:not(.d-none) .gradient-border-proj {
    animation: slideInRight 0.6s ease-out 0.2s backwards;
}

/* Slide in from right for images */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px); /* Start 30px to the left */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* End at the normal position */
    }
}

/* Button click feedback animation */
.clientbtn, .projbtn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clientbtn:active, .projbtn:active {
    transform: translateY(-5px) scale(0.98);
}

/* Smooth active indicator animation */
.clientbtn.active::after, .projbtn.active::after {
    animation: expandLine 0.4s ease-out forwards;
}

@keyframes expandLine {
    from {
        width: 0%;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}



.clientnavpart {
    margin-top: 30px;
    max-height: 670px;
}

.client-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for nav buttons */
.clientbtn {
    transition: color 0.2s ease;
    justify-content: center;
}

.clientbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.clientbtn.active {
    color: #fff !important;
    position: relative;
}

.clientbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

/* Replace Tailwind's 'hidden' with Bootstrap's 'd-none' */
.d-none {
    display: none !important; 
}

.section-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-box {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.section-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.cnsection {
    margin-top: 10px;
}

.section-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.section-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient */
.dl-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.dl-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* RESPONSIVE DESIGN FOR CLIENT NAV SECTION */

@media (max-width: 1280px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 100%;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1270px;
    }

    .cnsection{
        width: 1100px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}


@media (max-width: 1024px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1030px;
    }

    .cnsection{
        width: 1000px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 15px;
        width: 600px;
        align-content: center   ;
    }

    .client-nav {
         width: 500px;
    } 
    
    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content {
        width: 550px;
    }

    .cnsection {
        width: 550px;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .client-nav {
        width: 760px;
    }

    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content{
        width: 750px;
    }

    .cnsection{
        width: 750px;

    }
}


@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .cnsection, .projsection {
        transform: translateY(20px);
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .clientnavpart {
        margin-top: 15px;
        max-height: auto;
    }

    .client-nav {
        font-size: 20px;
    } 

    #nav-container {
        justify-content: center;
        padding-bottom: 1rem;
    }
    
    .clientbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .clientbtn.active::after {
        height: 2px;
    }

    .section-content {
        height: auto;
        min-height: 500px;
    }

    .cnsection {
        padding: 2rem 1rem !important;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}


@media (max-width: 430px) {

    .clientnavpart {
        margin-top: 15px;
        width: 400px;
        align-content: center   ;
    }

    .client-nav {
         width: 400px;
    } 
    
    .clientbtn {
        width: 85px;
        padding: 1px !important;
    }

    .section-content {
        width: 400px;
    }

    .cnsection {
        width: 400px;
    }

    .section-h1 {
        font-size: 26px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 250px;
    }

    .section-img {
        min-height: 250px;
    }

    .dl-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .clientnavpart {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .client-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .clientbtn {
        width: 80px;
        padding: 1px !important;
    }

    .section-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .cnsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }

    .section-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .section-p {
        font-size: 14px;
        margin-top: 20px;
        line-height: 1.4;
    }

    .gradient-border-box {
        min-height: 220px;
        margin-bottom: 1.5rem;
    }

    .section-img {
        min-height: 220px;
    }

    .dl-gradient-button {
        padding: 8px 20px;
        font-size: 0.75rem;
        max-width: 250px;
    }
}
/* MANY MORE SECTION */


.many-more {
    margin-top: 70px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
}

.and-many {
    font-size: 48px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}


@media (max-width: 1024px) {
    .and-many {
        font-size: 2rem;
        margin-left: 15px;
    }
}

@media (max-width: 768px) {
    .and-many {
        font-size: 1.8rem;
        margin-left: 15px;
    }
}

@media (max-width: 480px) {
    .and-many {
        font-size: 1.8rem;
    }
}

.many-more-container {
    margin-top: 60px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 400px;
}

    .many-more-container.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .many-more-container.animate-visible {
        animation: 1.2s anim-fadeIn linear forwards; 
    }

/* Replaced .card */
.clients-card {
    position: absolute;
    width: 90%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform .4s ease;
    cursor: pointer;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    min-height: 440px;
    display: flex;
}

.clients-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

/* Replaced .container */
.clients-container {
    width: 100%;
    max-width: 800px;
    max-height: 600px;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Replaced .cards */
.many-more-cards {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
}

/*
 * CORE ANIMATION LOGIC (Updated to use .clients-container)
 */

/* Side Cards (Left position: translateX(-40%)) */
.clients-container.active-card-1 #card-3, /* Card 3 moves left when 1 is active */
.clients-container.active-card-2 #card-1, /* Card 1 moves left when 2 is active */
.clients-container.active-card-3 #card-2 { /* Card 2 moves left when 3 is active */
    transform: translatex(-40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Side Cards (Right position: translateX(40%)) */
.clients-container.active-card-1 #card-2, /* Card 2 moves right when 1 is active */
.clients-container.active-card-2 #card-3, /* Card 3 moves right when 2 is active */
.clients-container.active-card-3 #card-1 { /* Card 1 moves right when 3 is active */
    transform: translatex(40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Center Card (translateX(0)) */
.clients-container.active-card-1 #card-1, /* Card 1 centers */
.clients-container.active-card-2 #card-2, /* Card 2 centers */
.clients-container.active-card-3 #card-3 { /* Card 3 centers */
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
    box-shadow: 0px 0px 15px 0px rgba(81, 81, 81, 0.47); 
}

/* RESPONSIVE DESIGN FOR MANY MORE SECTION */

@media (max-width: 1280px) {
    .clients-container {
        max-width: 1000px; /* Use a smaller max-width */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 450px; /* Reduced minimum card height */
        width: 700px;
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


@media (max-width: 820px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 760px; /* Use a smaller max-width */
        max-height: 580px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 590px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}



@media (max-width: 768px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        max-width: 90%; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 430px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 400px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 300px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 360px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 360px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 290px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


/* DOORLOCK BRAND SLIDER SECTION */

.doorlock-brand-slider {
    margin-top: 600px;
}

@media (max-width: 1280px) {
    .doorlock-brand-slider{
        width: 100%;
    }
}

@media (max-width: 820px) {
    .doorlock-brand-slider{
        margin-top: 550px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .doorlock-brand-slider{
        margin-top: 150px;
    }
}

@media (max-width: 420px) {
    .doorlock-brand-slider{
        margin-top: 150px;
        width: 100%;
    }
}


/* OTHER PROJECTS SECTION */

.other-proj-nav {
    margin-top: 150px;
    max-height: 670px;
    margin-bottom: 20px;
}

.proj-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for project nav buttons */
.projbtn {
    transition: color 0.2s ease;
}

.projbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.projbtn.active {
    color: #fff !important;
    position: relative;
}

.projbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

.projects-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-proj {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.proj-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.projsection {
    margin-top: 10px;
}

.proj-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.proj-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient for Projects */
.proj-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.proj-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* DOORLOCK RESPONSIVE DESIGN */

@media(max-width: 1280px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 820px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
        width: 100%;
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 768px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 430px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

/* OTHER PROJ AREA */

@media (max-width: 1280px) {
    .other-proj-nav{
        margin-top: 80px;
        max-width: auto;
        margin-bottom: -20px;
    }

    .proj-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .projects-content{
        width: 1270px;
    }

    .projsection{
        width: 1200px;
    }


    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 1024px) {
    .other-proj-nav{
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
    }

    .proj-nav {
        font-size: 24px;
    }

    .projects-content{
        width: 1020px;
    }

    .projsection{
        width: 1000px;
    }

    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .proj-nav {
        width: 760px;
    }

    .projbtn {
        width: 300px;
        padding: 1px !important;
    }

    .projects-content{
        width: 750px;
    }

    .projsection{
        width: 750px;

    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .other-proj-nav {
        margin-top: 15px;
        max-height: auto;
    }
    .proj-nav {
        font-size: 20px;
    }

    #navp-container {
        justify-content: flex-start;
        padding-bottom: 1rem;
    }

    .projbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .projbtn.active::after {
        height: 2px;
    }

    .projects-content {
        height: auto;
        min-height: 500px;
    }

    .proj-section {
        padding: 2rem 1rem !important;
    }

    .projsection {
        margin-top: 0px;
    }

    .proj-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .proj-p {
        font-size: 16px;
        margin-top: 40px;
        line-height: 1.5;
    }

    .gradient-border-proj {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
    }

    .proj-img {
        min-height: 300px;
    }

    .proj-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
        margin-top: 30px;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 410px;
    }

    .proj-nav {
        width: 400px;
    }

    .projbtn {
        width: 88px;
        padding: 1px !important;
    }

    .projects-content{
        width: 400px;
    }

    .projsection{
        width: 400px;
    }

    .proj-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .proj-p {
        font-size: 14px;
        margin-top: 20px;
    }

    .gradient-border-proj {
        min-height: 250px;
    }

    .proj-img {
        min-height: 250px;
    }

    .proj-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .other-proj-nav {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .proj-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .projbtn {
        width: 75px;
        padding: 1px !important;
    }

    .projects-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .projsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }
}

/* Remove default link underline */
a {
    text-decoration: none;
}



/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */
/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */

.public-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
            margin-bottom: 30px;
        }

        .flex-public {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1500px;
            margin: 30px auto;
            padding: clamp(40px, 8vw, 100px) clamp(20px, 4vw, 60px);
            gap: clamp(30px, 5vw, 80px);
            min-height: 500px;
            opacity: 0;
        }

        .flex-public.visible {
            animation: fadeInUp 0.8s ease-out forwards !important;
        }

        .flex-public.visible:nth-child(1) {
            animation: fadeInUp 0.8s ease-out 0s forwards;
        }
        .flex-public.visible:nth-child(2) {
            animation: fadeInUp 0.8s ease-out 0.15s forwards;
        }
        .flex-public.visible:nth-child(3) {
            animation: fadeInUp 0.8s ease-out 0.3s forwards;
        }
        .flex-public.visible:nth-child(4) {
            animation: fadeInUp 0.8s ease-out 0.45s forwards;
        }
        .flex-public.visible:nth-child(5) {
            animation: fadeInUp 0.8s ease-out 0.6s forwards;
        }

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

        .text-public {
            flex: 1;
            min-width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .text-public h2 {
            font-size: clamp(32px, 4vw, 52px);
            margin-bottom: 20px;
            background-clip: text;
            font-weight: 700;
            letter-spacing: -0.5px;
            font-family: 'Space Grotesk', sans-serif;
        }

        .text-public p {
            font-size: 1.5rem;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 30px;
            font-weight: 400;
            font-family: 'Lexend', sans-serif;
        }

        .public-btn {
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 600;
            padding: 12px 50px;
            border-radius: 50px;
            background: #0000;
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-block;
            width: fit-content;
            position: relative;
            overflow: hidden;
            border: 1px solid;
        }

        .public-btn::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: left 0.5s ease;
            z-index: 1;
        }

        .public-btn span {
            position: relative;
            z-index: 2;
        }

        .public-btn:hover {
            transform: translateY(-3px);
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
        }
        .public-btn:hover::before {
            left: 100%;
        }

        .public-btn:active {
            transform: translateY(-1px);
        }

        .demo-section {
            display: flex;
            gap: 30px;
            margin-top: 50px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .button-group h3 {
            color: #888;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        @keyframes gradientShiftp {
            0% {
                background-position: -200% center;
            }
            100% {
                background-position: 200% center;
            }
        }

        .visual-public {
            position: relative;
            max-width: 600px;
            height: 450px;
            border-radius: 20px;
            flex: 1;
        }

        /* Blur shadow background */
        .visual-public::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 101%;
            height: 100%;
            background: linear-gradient(
                90deg,
                #FF6666 0%,
                #FF894C 20%,
                #90FF55 40%,
                #7B94F6 60%,
                #FF77F1 80%,
                #FF6666 100%
            );
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            filter: blur(10px);
            z-index: 0;
            pointer-events: none;
        }

        .visual-public img {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
            z-index: 1;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .visual-public:hover img {
            transform: scale(1.03);
        }

        .flex-public:nth-child(even) {
            flex-direction: row-reverse;
        }

        /* Responsive Design */
        /* 344px - Extra Small Phones */
        @media (max-width: 344px) {
            .public-wrapper{
                margin-bottom: -100px;
                margin-top: 50px;
            }
            .flex-public {
                flex-direction: column !important;
                padding: 20px 12px;
                gap: 15px;
                margin-bottom: -30px !important;
                
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 24px;
                margin-bottom: 12px;
            }

            .text-public p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 250px;
                margin-bottom: -50px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 10px 30px;
                font-size: 14px;
                margin-bottom: -100px !important;
            }
        }

        /* 360px - Small Phones */
@media (max-width: 360px) {
    .public-wrapper {
        margin-top: -10px !important;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 20px 14px;
        gap: 16px;
        margin-bottom: -100px !important;
    }

    .text-public {
        min-width: 100%;
        font-size: 14px;
    }

    .text-public h2 {
        font-size: 26px !important;
        margin-bottom: 12px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 260px;
    }

    .visual-public img {
        width: 100% !important;
        height: 260px !important;

    }

    .public-btn {
        padding: 10px 32px;
        font-size: 14px;
    }
}

/* 375px - iPhone SE/6/7/8 */
@media (max-width: 375px) {
    .public-wrapper {
        margin-bottom: -50px;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 22px 16px;
        gap: 18px;
        margin: 16px auto;
        max-height: 580px;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 13px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 280px;
    }

    .visual-public img {
        width: 100% !important;
        height: 280px !important;
        
    }

    .public-btn {
        padding: 11px 35px;
        font-size: 14px;
    }
}

/* 390px - Pixel 4/5 */
@media (max-width: 390px) {
    .public-wrapper {
        margin-top: 50px;
        margin-bottom: 190px !important;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 24px 18px;
        gap: 15px;
        margin: 18px auto;
        transform: scale(0.9) !important;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 14px;
    }

    .text-public p {
        font-size: 15px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 230px;
        margin-top: -120px;
    }

    .visual-public img {
        width: 100% !important;
        height: 230px !important;
    }

    .public-btn {
        padding: 10px 35px !important;
        font-size: 15px !important;
        margin-bottom: -130px !important;
        
    }
}

        /* 412px - Galaxy S9 */
        @media (max-width: 412px) {
            .public-wrapper{
                margin-bottom: -10px;
                overflow: visible;
            }

            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 26px 20px;
                gap: 20px;
                margin-bottom: -100px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-bottom: -60px !important;
                margin-top: -60px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 12px 40px;
                font-size: 15px;
            }
        }

        /* 414px - iPhone XR */
        @media (max-width: 414px) {
            .flex-public {
                flex-direction: column !important;
                padding: 26px 20px;
                gap: 20px;
                margin: 18px auto;
                transform: scale(0.9) !important;
                margin-bottom: -30px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-top: -100px;
                margin-bottom: -40px;
            }

            .public-btn {
                padding: 12px 30px;
                font-size: 15px;
                margin-bottom: -100px !important;
            }
        }

        /* 430px - Galaxy S22 */
        @media (min-width: 320px) and (max-width: 430px) {
            .public-wrapper {
                margin-bottom: -40px !important;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 28px 22px;
                gap: 20px;
                margin-top: -100px !important;
            }

            .text-public {
                min-width: 350px !important;
                margin: 10px !important;
                transform: scale(0.9);
            }

            .text-public h2 {
                font-size: 34px !important;
                margin-bottom: 15px;
            }

            .text-public p {
                font-size: 15px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 330px;
                margin-bottom: -50px;
                margin-top: -40px;
            }

            .public-btn {
                padding: 10px 32px !important;
                font-size: 15px !important;
                transform: scale(0.9);
                margin-bottom: -90px !important;
            }
        }

        /* 540px - Small Tablets */
        @media (max-width: 540px) {
            .flex-public {
                flex-direction: column !important;
                padding: 30px 24px;
                gap: 22px;
                margin: 20px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 30px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public{
                max-height: 270px !important;
                width: 390px !important;
            }

            .visual-public img{
                max-width: 390px !important;
                max-height: 250px !important;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 768px - iPad/Tablet */
        @media (max-width: 768px) {
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 35px 30px;
                gap: 25px;
                margin: 25px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 38px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 380px;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
        }

        /* 853px - Large Tablet */
        @media (max-width: 853px) {
            .public-wrapper{
                margin-bottom: 40px;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 50px 45px !important;
                gap: 28px;
                margin-top: 70px !important;
            }

            .text-public {
                min-width: 100%;
                margin: auto;
                text-align: center;
                align-items: center;
                margin-bottom: -50px;
            }

            .text-public h2 {
                font-size: 48px !important;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 22px !important;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                order: -1;
                max-width: 590px !important;
            }

            .visual-public img{
                width: 590px;
                height: 380px !important;  
            }

            .public-btn {
                padding: 10px 40px !important;
                font-size: 18px !important;
            }
        }

        /* 912px - Large Tablet Landscape */
        @media (max-width: 912px) {
            .flex-public {
                flex-direction: row;
                min-height: auto;
                padding: 40px 35px;
                gap: 30px;
                margin: 25px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 36px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public {
                max-width: 400px;
                height: 320px;
                flex: 1;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 992px - Small Desktop */
        @media (max-width: 992px) {
            .flex-public {
                flex-direction: row;
                min-height: 450px;
                padding: 45px 40px;
                gap: 40px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 40px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                max-width: 450px;
                height: 350px;
                flex: 1;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
        }

        /* 1024px - Tablet Landscape / Desktop */
        @media (max-width: 1024px) {
            .flex-public {
                flex-direction: row;
                min-height: 480px;
                padding: 50px 45px;
                gap: 45px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 350px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 42px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 17px !important;
                line-height: 1.75;
                margin-bottom: 24px;
            }

            .visual-public {
                max-width: 500px;
                height: 330px !important;
                flex: 1;
            }

            .public-btn {
                padding: 10px 35px !important;
                font-size: 16px;
            }
        }

        /* 1280px - Full Desktop */
        @media (max-width: 1280px) {
            .flex-public {
                flex-direction: row;
                min-height: 500px;
                padding: 60px 50px;
                gap: 50px;
                margin: 30px 40px;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 380px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 46px;
                margin-bottom: 20px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.8;
                margin-bottom: 26px;
            }

            .visual-public {
                max-width: 550px;
                height: 400px;
                flex: 1;
            }

            .public-btn {
                padding: 14px 52px;
                font-size: 16px;
            }
        }


        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */
        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease-out;
            margin-top: 40px;
        }

        .modal-overlay.active {
            display: flex;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .modal-content-public {
            background: black;
            border: 2px solid #7B54B1;
            border-radius: 20px;
            padding: 50px;
            max-width: 850px;
            width: 90%;
            position: relative;
            display: flex;
            gap: 50px;
            animation: slideUp 0.4s ease-out;
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4), -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
            margin-top: 0px;
        }

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

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: #a78bfa;
            font-size: 32px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            color: #c084fc;
            transform: scale(1.2);
        }

        .testimonial-image {
            flex: 0 0 450px;
            height: 400px;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 0px 30px rgba(168, 85, 247, 0.2);
        }

        .testimonial-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .testimonial-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .testimonial-text h2 {
            font-size: 28px;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #a78bfa, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-family: 'Space Grotesk', sans-serif;
        }

        .testimonial-text p {
            font-size: 18px;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 20px;
            font-family: 'Lexend', sans-serif;
        }

        .public-stars {
            display: flex;
            gap: 8px;
            font-size: 24px;
            display: inline-block; 
    
            /* Ensure the animation is fully defined */
            animation: rgbGoldPulse 2s ease-in-out infinite alternate;
        }

        @media (max-width: 768px) and (min-width: 541px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 35px;
                flex-direction: column;
                max-width: 750px;
                margin: auto;
            }

            .testimonial-image img {
                width: 790px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 8px;
            }
        }

        @media (max-width: 344px) {
            .modal-content-public {
                padding: 20px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 400px;
                height: 410px !important;
            }

            .testimonial-text h2 {
                font-size: 18px;
                margin-bottom: 12px;
            }

            .testimonial-text p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 12px;
            }

            .public-stars {
                font-size: 16px;
                gap: 5px;
            }

            .close-btn {
                font-size: 24px;
                width: 32px;
                height: 32px;
            }
        }

        /* Mobile: 360px */
        @media (max-width: 360px) and (min-width: 345px) {
            .modal-content-public {
                padding: 25px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 210px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 430px;
            }

            .testimonial-text h2 {
                font-size: 20px;
                margin-bottom: 14px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 14px;
            }

            .public-stars {
                font-size: 18px;
                gap: 6px;
            }

            .close-btn {
                font-size: 26px;
                width: 34px;
                height: 34px;
            }
        }

        /* Mobile: 375px */
        @media (max-width: 375px) and (min-width: 361px) {
            .modal-content-public {
                padding: 28px;
                gap: 22px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 420px;
            }

            .testimonial-text h2 {
                font-size: 21px;
                margin-bottom: 15px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .public-stars {
                font-size: 19px;
                gap: 6px;
            }

            .close-btn {
                font-size: 28px;
            }
        }

        /* Mobile: 390px */
        @media (max-width: 390px) and (min-width: 376px) {
            .modal-content-public {
                padding: 30px;
                gap: 24px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 440px;
            }

            .testimonial-text h2 {
                font-size: 22px;
                margin-bottom: 16px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 20px;
                gap: 6px;
            }
        }

        /* Mobile: 412px */
        @media (min-width: 400px) and (max-width: 412px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 470px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 13px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
        }

        /* Mobile: 414px */
        @media (max-width: 414px) and (min-width: 413px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 450px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 17px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
        }

        /* Mobile: 430px */
        @media (max-width: 430px) and (min-width: 415px) {
            .modal-content-public {
                padding: 35px;
                gap: 26px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 460px;
            }

            .testimonial-text h2 {
                font-size: 24px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 7px;
            }
        }

        /* Tablet: 540px */
        @media (max-width: 540px) and (min-width: 431px) {
            .modal-content-public {
                padding: 40px;
                gap: 30px;
                flex-direction: column;
                max-width: 440px;
                max-height: 500px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 200px;
                width: 95%;
                margin: auto;
            }

            .testimonial-image img{
                width: 550px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.7;
                margin-bottom: 5px;
            }

            .public-stars {
                font-size: 20px;
                gap: 8px;
            }
        }


        /* Tablet: 853px */
        @media (min-width: 810px) and (max-width: 820px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: column !important;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image{
                max-width: 750px;
                height: 400px !important;
                margin: auto;
            }

            .testimonial-image img{
                width: 750px !important;
                height: 700px !important;
            }

            .testimonial-text h2 {
                font-size: px !important;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 18px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

         /* Tablet: 853px */
        @media (max-width: 853px) and (min-width: 769px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: row;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image img{
                width: 650px !important;
                height: 650px;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        @media (max-width: 912px) and (min-width: 854px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 40px;
                flex-direction: column;
                max-width: 800px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 360px;
                width: 720px;
                margin: auto;
            }

            .testimonial-image img{
                width: 900px !important;
                height: 750px;
            }

            .testimonial-text h2 {
                font-size: 30px !important;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 20px !important;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Tablet: 992px */
        @media (max-width: 992px) and (min-width: 941px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 800px;
            }

            .testimonial-image {
                flex: 0 0 350px;
                height: 320px;
            }

            .testimonial-text h2 {
                font-size: 26px;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Desktop: 1024px */
        @media (max-width: 1024px) and (min-width: 993px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 870px;
                height: 400px;
            }
            .modal-overlay {
                height: 700px;
                margin: auto;
            }
            .testimonial-image {
                flex: 0 0 400px;
                height: 300px;
            }

            .testimonial-image img{
                width: 600px;
                height: 550px;
            }

            .testimonial-text h2 {
                font-size: 36px;
                margin-bottom: -10px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

        /* Desktop: 1280px and above */
        @media (min-width: 1100px) and (max-width: 1280px){
            .modal-content-public {
                padding: 50px;
                gap: 40px;
                max-width: 1100px;
                flex-direction: row;
                height: 550px;
            }

            .testimonial-image {
                flex: 0 0 550px !important;
                height: 400px !important;
                margin: auto;

            }

            .testimonial-image img{
                flex: 0 0 300px !important;
                height: 400px;
                margin: auto;
            }

            .testimonial-text h2 {
                font-size: 28px;
                margin-bottom: 20px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 20px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

.public-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-public-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;
    margin-top: -40px;
    background-image: linear-gradient(180deg, rgba(255, 23, 68, 0) 30%, rgba(255, 23, 68, 0.5) 60%, rgba(187, 134, 252, 1) 100%),
    url('https://i.pinimg.com/1200x/e6/f8/96/e6f896b726a7fe83a306673b2c5c4a18.jpg');
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 85%,
    transparent 100%);
    overflow: hidden;
}

.public-header {
    position: absolute;
    justify-content: center;
    margin-top: 480px;
    text-align: center;
    padding: 40px 60px;
    width: 100%;
}

.public-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.publicproj {
    text-align: center;
    padding: 40px 20px;
}

.publicproj.is-hidden {
    opacity: 0;
}

.publicproj.animate-visible {
    animation: 1.5s anim-fadeIn linear forwards;
}

.are-public {
    font-size: 32px !important;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* 344px - 349px */
@media (min-width: 344px) and (max-width: 349px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 250px;
        padding: 20px 15px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.1;
    }
    .publicproj {
        padding: 30px 12px;
    }
    .are-public {
        font-size: 14px !important;
        margin-top: -50px;
        margin-bottom: -90px !important;
    }
}

/* 350px - 360px */
@media (min-width: 350px) and (max-width: 360px) {
    .primary-public-wrapper {
        height: 320px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 200px;
        padding: 25px 18px;
    }
    .public-header h1 {
        font-size: 26px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 30px 14px;
    }
    .are-public {
        font-size: 15px !important;
        margin-bottom: -60px !important;
        margin-top: -40px;
    }
}

/* 361px - 375px */
@media (min-width: 361px) and (max-width: 375px) {
    .primary-public-wrapper {
        height: 350px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 160px !important;
        padding: 28px 20px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 32px 15px;
    }
    .are-public {
        font-size: 16px !important;
        margin-bottom: -100px !important;
        margin-top: -60px !important;
    }
}

/* 376px - 390px */
@media (min-width: 376px) and (max-width: 390px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 230px;
        padding: 30px 22px;
    }
    .public-header h1 {
        font-size: 30px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 34px 16px;
    }
    .are-public {
        font-size: 17px !important;
        margin-top: -50px;
        margin-bottom: -30px !important;
    }
}

/* 391px - 412px */
@media (min-width: 391px) and (max-width: 412px) {
    .primary-public-wrapper {
        height: 380px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 230px !important;
        padding: 32px 24px;
    }
    .public-header h1 {
        font-size: 32px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px !important;
    }
}

/* 413px - 414px */
@media (min-width: 413px) and (max-width: 414px) {
    .primary-public-wrapper {
        height: 485px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 235px !important;
        padding: 32px 25px;
    }
    .public-header h1 {
        font-size: 40px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-top: -40px !important;
        margin-bottom: -20px !important;
    }
}

/* 415px - 429px */
@media (min-width: 415px) and (max-width: 430px) {
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 33px 26px;
    }
    .public-header h1 {
        font-size: 36px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 19px;
    }
    .are-public {
        font-size: 19px !important;
        margin-top: -40px;
        margin-bottom: 30px !important;
    }
}

/* 530px - 540px */
@media (min-width: 530px) and (max-width: 540px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 450px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 260px !important;
    }
    .public-header h1 {
        font-size: 42px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 25px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px;
        margin-top: -40px;
        max-width: 100%;
    }
}

/* 760px - 768px */
@media (min-width: 760px) and (max-width: 768px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 300px !important;
        padding: 38px 45px;
    }
    .public-header h1 {
        font-size: 45px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 30px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 810px - 820px */
@media (min-width: 810px) and (max-width: 820px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 850px - 853px */
@media (min-width: 850px) and (max-width: 853px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 900px - 912px */
@media (min-width: 900px) and (max-width: 912px) {
    .public-area {
        margin: 48px auto 48px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 300px;
        padding: 39px 55px;
    }
    .public-header h1 {
        font-size: 50px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 45px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 980px - 992px */
@media (min-width: 980px) and (max-width: 992px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 600px !important;
        margin-top: -40px;
    }
    .public-header {
        margin-top: 450px;
        padding: 40px 58px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 30px !important;
        margin-bottom: 2rem;
    }
}

/* 1000px - 1024px */
@media (min-width: 1000px) and (max-width: 1024px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 400px !important;
        margin-top: -80px !important;
    }
    .public-header {
        margin-top: 150px !important;
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 58px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
        margin-top: -60px;
    }
}

/* 1270px - 1280px */
@media (min-width: 1270px) and (max-width: 1280px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 480px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 270px;  
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
        margin-top: -50px;
    }
}

/*Mission Vision CSS*/
/* Mission and Vision Section */
.mission-vision-wrapper {
    background: #000000;
    padding: 80px 20px;
    position: relative;
    overflow-x: hidden;
}

.mission-vision-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #333 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
    animation: dotPulse 4s linear infinite;
}

@keyframes dotPulse {
    0% { opacity: 0.2; }
    15% { opacity: 0.3; }
    30% { opacity: 0.45; }
    50% { opacity: 0.7; }
    70% { opacity: 0.45; }
    85% { opacity: 0.3; }
    100% { opacity: 0.2; }
}

.mission-vision-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4  0px;
    position: relative;
    z-index: 1;
}

.mission,
.vision {
    background: #0a0a0a;
    padding: 60px 40px;
    border-radius: 20px;
    border: 2px solid;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission {
    animation-delay: 0.2s;
}

.vision {
    animation-delay: 0.4s;
}

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

.mission {
    border-color: #00ff88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    animation: fadeInUp 0.8s ease-out 0.2s forwards, borderPulse 3s ease-in-out infinite;
}

.vision {
    border-color: #0088ff;
    box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    animation: fadeInUp 0.8s ease-out 0.4s forwards, borderPulseBlue 3s ease-in-out infinite;
}

.mission:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 255, 136, 0.5);
    border-color: #00ffaa;
}

.vision:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 136, 255, 0.5);
    border-color: #00aaff;
}

/* Animated glow effect */
.mission::before,
.vision::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 8s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Shimmer effect on hover */
.mission::after,
.vision::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.mission:hover::after,
.vision:hover::after {
    transform: translateX(100%);
}

@keyframes borderPulse {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 255, 136, 0.6);
    }
}

@keyframes borderPulseBlue {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 136, 255, 0.6);
    }
}

.mission h2,
.vision h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: slideInLeft 0.8s ease-out;
}

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

.mission p,
.vision p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #e0e0e0;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 968px) {
    .mission-vision-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .mission,
    .vision {
        padding: 50px 35px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 640px) {
    .mission-vision-wrapper {
        padding: 60px 15px;
    }

    .mission,
    .vision {
        padding: 40px 25px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .mission p,
    .vision p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .mission,
    .vision {
        padding: 30px 20px;
    }

    .mission h2,
    .vision h2 {
        font-size: 1.75rem;
        margin-bottom: 15px;
    }

    .mission p,
    .vision p {
        font-size: 0.9rem;
    }

}

/* FDAS Details Page Styles */
.glow-model-container {
    position: relative;
    overflow: visible;
}

.glow-model-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    opacity: 0.3;
    filter: blur(20px);
    z-index: -1;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.model-container {
    position: relative;
    z-index: 1;
}

.gradient-icon {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modern-feature-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: 0.8rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.modern-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.1), rgba(103, 28, 104, 0.1), rgba(123, 84, 177, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.modern-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
}

.modern-feature-card:hover::before {
    opacity: 1;
}

.feature-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.15), rgba(123, 84, 177, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.modern-feature-card:hover .feature-icon-wrapper {
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.25), rgba(123, 84, 177, 0.25));
    transform: scale(1.05);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.feature-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(5px);
}

.feature-item .icon-large {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 70px;
    text-align: center;
}

.feature-item .feature-content h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
}

.feature-item .feature-content p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    font-family: 'Lexend', sans-serif;
}

.gallery-section {
    padding: 80px 0;
    background: #000000;
}

.gallery {
    --size: 100px;
    display: grid;
    grid-template-columns: repeat(6, var(--size));
    grid-auto-rows: var(--size);
    margin-bottom: var(--size);
    place-items: start center;
    gap: 5px;
}

.gallery:has(:hover) img:not(:hover),
.gallery:has(:focus) img:not(:focus) {
    filter: brightness(0.5) contrast(0.5);
}

.gallery img {
    object-fit: cover;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z");
    transition: clip-path 0.25s, filter 0.75s;
    grid-column: auto / span 2;
    border-radius: 5px;
}

.gallery img:nth-child(5n - 1) { 
    grid-column: 2 / span 2 
}

.gallery img:hover,
.gallery img:focus {
    clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z");
    z-index: 1;
    transition: clip-path 0.25s, filter 0.25s;
}

.gallery img:focus {
    outline: 1px dashed black;
    outline-offset: -5px;
}

.fdas-invest-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.fdas-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(10px);
}

.benefit-icon {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.benefit-text {
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
}

/* Mobile responsive for gallery */
@media (max-width: 767px) {
    .gallery-section {
        padding: 40px 0;
    }
    
    /* Hide gallery on mobile, show product visual instead */
    .gallery {
        display: none;
    }
    
    .mobile-product-visual {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        margin: 0 auto 40px auto;
        
        /* Use FDAS-related image */
        background-image: url(https://cdn.pixabay.com/photo/2023/09/25/17/12/fire-alarm-8275669_1280.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: 8px solid transparent;
        border-radius: 15px;
        transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
    }
    
    .mobile-product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #AC3838 0%, #671C68 50%, #7B54B1 100%) 1;
    }
}

/* Hide mobile product visual on desktop */
.mobile-product-visual {
    display: none;
}

/* FDAS Details Page Additional Styles */
.fire-alarm-model-section {
    padding: 80px 0;
    background: #000000;
}

.simplex-sensor-model-section {
    padding: 80px 0;
    background: #000000;
}

.model-container {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.model-viewer-fdas {
    width: 100%;
    height: 100%;
    background: #000;
}

.fdas-footer {
    background-color: #090909;
    padding: 0px 30px;
}

.fdas-copyright {
    color: #ffffff;
    font-family: 'Lexend', sans-serif;
}

.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-left: 1rem;
}

.navbar-toggler-custom {
    margin-right: 1rem;
}

.CompanyInfo-logo {
    width: 17.1875rem;
    height: 6.25rem;
}

/* FDAS Investment Carousel Styles */
.fdas-investment-carousel {
    padding: 80px 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.fdas-investment-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05), rgba(103, 28, 104, 0.05), rgba(123, 84, 177, 0.05));
    z-index: 1;
}

.carousel-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 2;
    margin-bottom: 3rem;
}

.carousel-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-container {
    position: relative;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    transform: translateX(100%);
}

.carousel-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.carousel-content {
    display: flex;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    border-radius: 20px;
    overflow: hidden;
}

.carousel-image {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    display: none;
}

.carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.carousel-slide:hover .carousel-image img {
    transform: scale(1.05);
}

.carousel-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 6rem 3rem 3rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
    position: relative;
    z-index: 2;
}

.carousel-text h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.carousel-text p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.carousel-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 10;
    pointer-events: none;
}

.carousel-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    margin: 0 0.5rem;
}

.carousel-btn:hover {
    background: linear-gradient(135deg, rgba(172, 56, 56, 1), rgba(123, 84, 177, 1));
    transform: scale(1.1);
}

.carousel-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 10;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    transform: scale(1.2);
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .fdas-investment-carousel {
        padding: 40px 0;
    }
    
    .carousel-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    .carousel-container {
        height: 400px;
    }
    
    .carousel-content {
        flex-direction: column;
        position: relative;
    }
    
    .carousel-image {
        height: 100%;
        position: relative;
    }
    
    .carousel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .carousel-overlay {
        display: block;
        background: rgba(0, 0, 0, 0.8);
    }
    
    .carousel-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 4rem);
        padding: 2rem;
        background: transparent;
        text-align: center;
    }
    
    .carousel-text h3 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.9rem;
        margin-bottom: 0;
        padding: 0 3rem;
        text-align: center;
    }
    
    .carousel-controls {
        padding: 0 1rem;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border: none;
        background: transparent;
        color: white;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        backdrop-filter: none;
        border-radius: 0;
    }
    
    .carousel-btn:hover {
        background: transparent;
        transform: scale(1.1);
        color: rgba(255, 255, 255, 0.9);
    }
    
    .carousel-indicators {
        display: none;
    }
    
    .indicator {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        height: 350px;
    }
    
    .carousel-text {
        padding: 1.5rem;
    }
    
    .carousel-text h3 {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }
}

/* ========================================
   ABOUT V2 PAGE - UNIQUE STYLES
   ======================================== */

/* Hero Logo */
.about-v2-hero-logo {
    width: 350px;
    height: 350px;
    margin-bottom: -20px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.2)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.1));
}

/* Black Hole Container */
.about-v2-blackhole-container {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Modern About Section */
.about-v2-modern-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
}

.about-v2-modern-section .row {
    min-height: 70vh;
    align-items: center;
}

.about-v2-modern-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

.about-v2-modern-content {
    padding: 0 50px;
    color: #ffffff;
}

.about-v2-modern-heading {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-v2-modern-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    font-family: 'Lexend', sans-serif;
    color: #e0e0e0;
}

/* Feature Icons */
.about-v2-feature-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.about-v2-feature-item {
    display: flex;
    align-items: center;
}

.about-v2-feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #f85858, #ef5ef1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.about-v2-feature-icon i {
    color: white;
    font-size: 20px;
}

.about-v2-feature-item h4 {
    color: #ffffff;
    margin-bottom: 3px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
}

.about-v2-feature-item p {
    color: #a0a0a0;
    margin: 0;
    font-size: 0.85rem;
}

/* Hover effects for about-v2 feature items */
.about-v2-feature-item:hover .about-v2-feature-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.about-v2-feature-item:hover {
    transform: translateX(5px);
    transition: transform 0.3s ease;
}

/* Action Buttons */
.about-v2-action-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.about-v2-btn-primary {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.about-v2-btn-secondary {
    background: transparent;
    color: white;
    padding: 12px 30px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Mission Section */
.about-v2-mission-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
}

.about-v2-mission-content {
    padding: 0 50px;
    color: #ffffff;
    text-align: right;
}

.about-v2-mission-heading {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(90deg, #5b1eb1, #f85858, #ef5ef1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-v2-mission-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
    font-family: 'Lexend', sans-serif;
    color: #e0e0e0;
}

.about-v2-mission-values {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
}

.about-v2-value-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.about-v2-value-text {
    text-align: right;
}

.about-v2-value-text h5 {
    color: #ffffff;
    margin-bottom: 2px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
}

.about-v2-value-text p {
    color: #a0a0a0;
    margin: 0;
    font-size: 0.85rem;
}

.about-v2-value-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #5b1eb1, #f85858);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    margin-right: 0;
}

.about-v2-value-icon i {
    color: white;
    font-size: 18px;
}

.about-v2-mission-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}

/* Vision Section */
.about-v2-vision-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
}

.about-v2-vision-section .row {
    min-height: 70vh;
    align-items: center;
}

.about-v2-vision-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

.about-v2-vision-content {
    padding: 0 50px;
    color: #ffffff;
}

.about-v2-vision-heading {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(90deg, #ef5ef1, #5b1eb1, #f85858);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-v2-vision-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
    font-family: 'Lexend', sans-serif;
    color: #e0e0e0;
}

.about-v2-vision-pillars {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-v2-pillar-item {
    display: flex;
    align-items: center;
}

.about-v2-pillar-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #ef5ef1, #5b1eb1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.about-v2-pillar-icon i {
    color: white;
    font-size: 18px;
}

.about-v2-pillar-item h5 {
    color: #ffffff;
    margin-bottom: 2px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
}

.about-v2-pillar-item p {
    color: #a0a0a0;
    margin: 0;
    font-size: 0.85rem;
}

/* Hover Effects */
.about-v2-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(248, 88, 88, 0.3);
}

.about-v2-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .about-v2-modern-content,
    .about-v2-mission-content,
    .about-v2-vision-content {
        padding: 0 20px;
    }
    
    .about-v2-modern-heading,
    .about-v2-mission-heading,
    .about-v2-vision-heading {
        font-size: 2rem;
    }
    
    .about-v2-modern-text,
    .about-v2-mission-text,
    .about-v2-vision-text {
        font-size: 1rem;
    }
    
    .about-v2-feature-icons {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .about-v2-action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .about-v2-mission-content {
        text-align: left;
    }
    
    .about-v2-mission-values {
        align-items: flex-start;
    }
    
    .about-v2-value-item {
        justify-content: flex-start;
    }
    
    .about-v2-value-icon {
        margin-left: 0;
        margin-right: 15px;
    }
    
    .about-v2-value-text {
        text-align: left;
    }
}

/* What We Offer Section */
.what-we-offer-section {
    background: #0a0a0a;
    padding: 80px 0 0;
    position: relative;
}
.what-we-offer-section .container-fluid:first-child {
    text-align: center;
    margin-bottom: 50px;
}
.what-we-offer-section h2 {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}
.what-we-offer-section .container-fluid:last-child {
    display: flex;
    width: 100%;
    padding: 0 2% 4% 2%;
    box-sizing: border-box;
    height: calc(100vh - 130px);
    position: relative;
}
.what-we-offer-section .box {
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0;
    box-shadow: 0 20px 30px rgba(0,0,0,.1);
    line-height: 0;
    display: flex;
    flex-direction: column;
}
.what-we-offer-section .box span {
    font-size: 2.5vh;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 1.2;
    color: #ffffff;
    font-family: 'Space Grotesk', sans-serif;
    padding: 1vh 15px;
    box-sizing: border-box;
    order: 1;
}
.what-we-offer-section .box img {
    width: 200%;
    height: calc(100% - 10vh);
    object-fit: cover;
    transition: .5s;
    order: 2;
}
/* What We Offer Hover Effects */
.what-we-offer-section .box:hover { 
    flex: 1 1 100% !important; 
    z-index: 10;
    position: relative;
}
.what-we-offer-section .box:hover img {
    width: 100% !important;
    height: 100% !important;
}
/* All service boxes now use consistent font size from main rule */

/* Service Logo Overlay */
.service-logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
    background: rgba(0, 0, 0, 0.96);
    border-radius: 0px;
}

.service-logo-overlay img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

/* Ensure text stays above overlay */
.what-we-offer-section .box span {
    position: relative;
    z-index: 10;
}

/* Hide logo overlay when hovering over any box */
.what-we-offer-section .box:hover ~ .service-logo-overlay,
.what-we-offer-section .container-fluid:hover .service-logo-overlay {
    opacity: 0;
}

/* Custom CSS for dreampcbuildanditsolutionsinc */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

/* Body and layout adjustments */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000000;
    padding-top: 76px; /* Account for fixed navbar */
}


/* Navigation Styles */
.navbar {
    background-color: #000000 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    width: 100%;
    height: 80px; /* Important: Define navbar height */
}

/* Optional: Remove padding/margin that could cause centering issues */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Flex container for navbar */
.navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    width: 100%;
}

/* Logo + Text wrapper */
.navbar-brand {
    display: flex;
    align-items: center;
    margin-right: auto; /* Pushes everything else away */
    font-weight: 600;
    font-size: 1.2rem;
    color: #fff !important;
    text-decoration: none;
    transition: none;
    transform: none;
}

/* Logo Image */
.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: none;
    display: block;
    transition: none;
    transform: none;
    animation: none;
    margin-right: 8px;
}

.brand-logo:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Brand Text */
.brand-text {
    font-weight: 600;
    letter-spacing: -0.5px;
    transition: none;
    transform: none;
    animation: none;
}

/* Nav links container */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*Mobile Navbar*/
.navbar-toggler {
    background: transparent;
    border: none;
}

/* Services Slider Navigation Buttons */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    font-size: 18px;
}

.slider-nav-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

.slider-nav-btn.prev {
    left: 20px;
}

.slider-nav-btn.next {
    right: 20px;
}

/* Mobile navigation collapse background */
.navbar-collapse {
    background-color: #000000 !important;
    padding-bottom: 1rem; /* Add gap at bottom of mobile navbar dropdown */
}

/* Nav links */
.navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', sans-serif;
}

.navbar-nav .nav-link:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    color: transparent !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
    background-color: transparent !important;
    transform: none !important;
}

.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav .nav-item .nav-link.active:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

.navbar-nav .nav-link[href="index.html"].active {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

/* Remove blue focus outline from navbar links */
.navbar-nav .nav-link:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* ============ HERO SECTION STYLES ============= */

.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 260px 0 0;
}

/* Add gradient fade to hero section bottom */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 20%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.7) 80%,
        rgba(0, 0, 0, 0.9) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.gradient-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 70%;
        height: 100%;
        background: black;
}

.wave-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* First layer - Large diagonal sweep */
.wave-overlay::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 120%;
    height: 140%;
    background: 
        linear-gradient(135deg, 
        transparent 20%, 
        transparent 35%,
        rgba(160, 74, 179, 0.2) 40%,
        rgba(102, 11, 35, 0.3) 45%,
        rgba(160, 74, 179, 0.1) 55%,
        transparent 70%,
        transparent 100%
    );
        animation: diagonalFlow 11s ease-in-out infinite;
        transform-origin: center;
}

/* Second layer - Curved abstract shape */
.wave-overlay::after {
        content: '';
        position: absolute;
        bottom: 5%;
        left: -20%;
        width: 150%;
        height: 100%;
        background: 
        radial-gradient(ellipse 1200px 800px at 30% 80%, 
        rgba(160, 74, 179, 0.2) 30%, 
        rgba(102, 11, 35, 0.15) 35%,
        transparent 60%
    ),
        radial-gradient(ellipse 900px 600px at 80% 30%, 
        rgba(31, 2, 6, 0.18) 0%, 
        transparent 50%
    );
        animation: abstractMove 12s ease-in-out infinite;
        filter: blur(85px);
}

/* Third layer - Dynamic top gradient */
.gradient-background::before {
        content: '';
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translateX(-50%);
        width: 150%;
        height: 80%;
        z-index: 1;
        background: 
        linear-gradient(180deg,
        rgba(102, 11, 35, 0.15) 30%,
        rgba(160, 74, 179, 0.12) 50%,
        transparent 70%
    );
        animation: topFlow 4s ease-in-out infinite;
        filter: blur(80px);
}

    @keyframes diagonalFlow {
        0%, 100% {
        transform: translate(0%, 0%) rotate(0deg);
        opacity: 1;
}
        25% {
        transform: translate(-15%, 10%) rotate(-5deg);
        opacity: 0.8;
}
        50% {
        transform: translate(-25%, 15%) rotate(-8deg);
        opacity: 1;
}
        75% {
        transform: translate(-15%, 8%) rotate(-3deg);
        opacity: 0.9;
}
}

    @keyframes abstractMove {
        0%, 100% {
        transform: translate(0%, 0%) scale(1);
}
        33% {
        transform: translate(15%, -10%) scale(1.1);
}
        66% {
        transform: translate(-10%, 12%) scale(0.7);
}
}

    @keyframes topFlow {
        0%, 100% {
        transform: translateX(-50%) translateY(15%);
}
        50% {
        transform: translateX(-45%) translateY(25%);
}
}


.hero-content {
    z-index: 2;
    position: relative
}

#model-logo {
  width: 100%;
  max-width: 550px;
  height: 700px;
  margin-top: -400px;
}


#model-logo::part(default-camera) {
  transform: rotateX(-90deg);
}

/* Adjust positioning for the container */
.col-lg-5.position-relative {
  padding-left: 100px;
}

/* Responsive adjustments */

@media (min-width: 768px) and (max-width: 820px) {
  #model-logo {
    height: 480px;
    max-width: 420px;
    margin-top: 30px;
    margin-bottom: -35px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 45px;
    justify-content: center !important;
  }
  .call-to-action-btn{
    margin-top: 20px;
  }
}

@media (min-width: 390px) and (max-width: 430px) {
  #model-logo {
    height: 280px;
    max-width: 250px;
    margin-top: -50px;
    margin-bottom: -50px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 75px;
    justify-content: center !important;
  } 
}

@media (min-width: 375px) and (max-width: 414px) {
  #model-logo {
    height: 260px;
    max-width: 220px;
    margin-top: -70px;
    margin-bottom: -45px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 78px;
    justify-content: center !important;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  #model-logo {
    height: 550px;
    max-width: 500px;
    margin-top: 0;
    margin-bottom: 40px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 15px;
  }
}

@media (max-width: 375px) {
  #model-logo {
    height: 240px;
    max-width: 200px;
    margin-top: 0;
    margin-bottom: -70px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 65px;
    justify-content: center !important;
  }
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    
}

.manual-titleposition {
    position: absolute;
    bottom: 15rem;
    left: -10rem; /* Custom stylized position */
    z-index: 3;
    margin: 0;
    font-size: 12rem !important;
    line-height: 1;
    transition: left 0.3s ease-in-out;
}

.manual-subtitleposition {
    position: absolute;
    bottom: 6rem;
    left: 4rem;
    margin: 0;
    font-size: 8rem !important;
    line-height: 1;
    white-space: nowrap;
}

.hero-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.5rem;
    font-weight: 100;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
   
}

.hero-description {
    font-family: 'Lexend', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #b3b3b3;
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 600px;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-btn-primary {
    font-family: 'Lexend', sans-serif;
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: PulseButton 3s ease-in-out 1.6s infinite;
}

    .hero-btn-primary:hover {
        background: #ffffff;
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px  rgba(102, 11, 35, 0.4);
    }

.hero-btn-secondary {
    font-family: 'Lexend', sans-serif;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: PulseButton 3s ease-in-out 1.6s infinite;
}

    .hero-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px  rgba(102, 11, 35, 0.4); 
    }

@keyframes PulseButton {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}   

.manual-descriptionposition {
    position: absolute;
    bottom: -0.5rem;
    left: 4.5rem;
    font-size: 1.75rem;
    max-width: 700px;
    color: #b3b3b3;
    z-index: 3;
}

.manual-buttonposition {
    position: absolute;
    top: -0.6rem;
    left: 4.5rem;
    z-index: 3;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Responsive Fix for Small Screens */
@media (max-width: 1024px) {
    .hero-section {
        padding: 2rem 1rem !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-content {
        padding-top: 2.5rem;
        padding-bottom: 8rem;
        width: 100%;
    }

    .manual-titleposition,
    .manual-subtitleposition,
    .manual-descriptionposition,
    .manual-buttonposition {
        position: static !important;
        margin: 0.5rem auto !important;
        text-align: center;
        width: 85% !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .manual-titleposition {
        font-size: clamp(3.5rem, 9vw, 5rem) !important;
        line-height: 1.1;
    }

    .manual-subtitleposition {
        font-size: clamp(2rem, 7vw, 4rem) !important;
        white-space: normal !important;
        margin-top: -13px !important;
    }

    .manual-descriptionposition {
        font-size: clamp(1rem, 3vw, 1.2rem) !important;
        line-height: 1.5;
    }

    .manual-buttonposition {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        font-size: 14px;
        width: 80% !important;
        justify-content: center;
    }
}

/* ALIGN TITLE WITH SUBTITLE ON ULTRA-WIDE SCREENS */
@media (min-width: 1920px) {
    .manual-titleposition {
        left: 4rem !important; /* aligns with subtitle */
    }
}


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

/* PROJECTS SECTION STYLES */
.projects-section {
    padding: 10px 0;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin-top: -115px;
}

/* Hero to Projects Transition Overlay */
.hero-projects-overlay {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 8%,
        rgba(0, 0, 0, 0.4) 15%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0.75) 35%,
        rgba(0, 0, 0, 0.85) 45%,
        rgba(0, 0, 0, 0.9) 50%,
        rgba(0, 0, 0, 0.85) 55%,
        rgba(0, 0, 0, 0.75) 65%,
        rgba(0, 0, 0, 0.6) 75%,
        rgba(0, 0, 0, 0.4) 85%,
        rgba(0, 0, 0, 0.2) 92%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 2;
    margin-top: -200px;
    margin-bottom: -200px;
    pointer-events: none;
}

    .projects-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        pointer-events: none;
    }

    .projects-section > .container {
        position: relative;
        z-index: 1;
    }


/* Project Cards */
.project-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 250px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-card-small {
    height: 250px;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.project-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.project-card:hover .project-card-bg {
    transform: scale(1.05);
}

.project-card-bg-pc {
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pc::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 150, 136, 0.6) 0%, rgba(0, 188, 212, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-fdas {
    background-image: url('/images/dpc-fdas.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-fdas::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 87, 34, 0.6) 0%, rgba(255, 152, 0, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-cctv {
    background-image: url('/images/dpc-cctv.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-cctv::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

    .project-card-bg-doorlock {
    background-image: url('/images/services/accessControlSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-doorlock::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-pa {
    background-image: url('/images/services/paSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pa::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(156, 39, 176, 0.6) 0%, rgba(186, 104, 200, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-led {
    background-image: url('/images/services/LEDWall.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-led::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(233, 30, 99, 0.6) 0%, rgba(240, 98, 146, 0.4) 100%);
        background-blend-mode: overlay;
    }


.project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    z-index: 2;
}

.project-card-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.project-card-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

.project-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    border-width: 2px;
    background: linear-gradient(90deg, #ff0000, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082, #ee82ee, #ff0000, #ff0000);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

 .project-card-icon :hover{
    /* To make the text itself look like a gradient */
    background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    -webkit-background-clip: text; /* Clip the gradient to the shape of the text */
    background-clip: text; /* Standard property for compatibility */
    -webkit-text-fill-color: transparent; /* Make the text invisible to show the clipped background */
    transform: scale(1.3);
    border-color: rgba(255, 255, 255, 0.2);
 }

.project-card-icon i {
    color: #ffffff !important;
    font-size: 1rem;
}

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

    .projects-description {
        font-size: 1rem;
    }

}

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

    .projects-title,
    .projects-subtitle {
        font-size: 2rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .project-card,
    .project-card-small {
        height: 200px;
    }

    .project-card-title {
        font-size: 1.1rem;
    }

    .project-card-overlay {
        padding: 1.5rem;
    }
    
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .project-card-title {
        font-size: 1rem;
    }

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

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

.projects-header {
    position: relative;
    height: 450px;
    padding: 60px 0;
    margin-bottom: 60px;
    margin-left: -15px;
    margin-right: -15px;
    overflow: visible;
    background-image: url('/images/dpc-project-img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Add gradient fade to projects header top */
.projects-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.1) 85%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.projects-header::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 300px;
    background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
    filter: blur(70px) brightness(1.5);
    z-index: 1;
    opacity: 1.2;
}
.projects-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .projects-header-content {
        padding: 0px 20px;
        position: relative;
        z-index: 2;
        text-align: center;
        margin-top: -200px;
    }
    .projects-header {
        height: 250px;
        margin-top: 9px;
        background-attachment: scroll;
    }
    .projects-header::after {
        content: "";
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
        filter: blur(70px);
        z-index: 1;
    }
}
.projects-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 300;
}

.projects-section-title {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Responsive Design for Header */
@media (max-width: 992px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.8rem;
    }

    .projects-description {
        font-size: 1.1rem;
        padding: 0 2rem;
    }
}

@media (max-width: 768px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.2rem;
    }

    .projects-description {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .projects-section-title {
        font-size: 1.3rem;
    }
}

/* Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

.projects-subtitle {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}





/* === FINAL OVERRIDE for .projects-section-title === */
.projects-section-title {
    margin-top: 50px;
    padding-top: 180px;
    padding-bottom: 50px;
    font-size: 10rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
    opacity: 1; 
}

.projects-section-title:hover{
    transform: translateY(-8px) scale(1.1);
}

@media (max-width: 992px) {
    .projects-section-title {
        font-size: 6rem;
    }
}

@media (max-width: 768px) {
    .projects-section-title {
        font-size: 4rem;
    }
}

@media (max-width: 576px) {
    .projects-section-title {
        font-size: 2.8rem;
    }
}

/* Logo Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

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

/* Responsive Design for Hero Section */
@media (max-width: 992px) {
    .hero-title,
    .hero-subtitle {
        font-size: 3.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 60px 0;
        text-align: center;
        background-color: #000000;
        margin-top: 5rem;
    }

    .hero-title,
    .hero-subtitle {
        font-size: 2.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-title,
    .hero-subtitle {
        font-size: 2rem;
        
    }

    .hero-logo {
        width: 150px;
        height: 150px;
    }

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

/* Main content area */
.main-content {
    min-height: calc(100vh - 140px);
    padding: 2rem 0;
    margin-top: 90px; /* Same as navbar height */
}

/* Container adjustments */
.container {
    max-width: 1200px;
}

/* Remove default margins from headings */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}

/* Button styles */
.btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0a58ca;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
    }

/* Card styles */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }

/* Footer styles */
footer {
    background-color: #000000 !important;
    margin-top: auto;
}
footer a {
    transition: color 0.3s ease;
}
footer a:hover {
    color: #0d6efd !important;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .CompanyInfo-footer, .CompanyServices-footer {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        padding-bottom: 15px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .brand-text {
        display: none;
    }

    .brand-logo {
        width: 32px;
        height: 32px;
        
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0;
    }

    body {
        padding-top: 70px;
    }
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Utility classes */
.text-gradient {
    background: linear-gradient(45deg, #0d6efd, #6610f2);
    -webkit-text-fill-color: transparent;
}

.shadow-custom {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Focus states for accessibility */
.nav-link:focus,
.btn:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Contact Hero Section */
.contact-hero {
    min-height: 100vh;
    background: #000000;
    display: flex;
    align-items: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

    .contact-hero .container {
        position: relative;
        z-index: 2;
    }

/* Hero Title */
.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-align: center;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
 }


.sync-text {
    background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Hero Subtitle */
.hero-subtitle {
    font-family: 'Lexend', sans-serif;
    font-size: 1.2rem;
    color: white;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* Contact Form Container */
.contact-form-container {
    background: #000000;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #FDFDFD;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 20px rgba(255, 102, 102, 0.3), 0 0 40px rgba(255, 137, 76, 0.2), 0 0 60px rgba(144, 255, 85, 0.2), 0 0 80px rgba(123, 148, 246, 0.2), 0 0 100px rgba(255, 119, 241, 0.2);
}

    .contact-form-container::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
        background-size: 300% 300%;
        border-radius: 20px;
        z-index: -1;
        animation: gradientShift 3s ease-in-out infinite;
    }

    .contact-form-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000000;
        border-radius: 18px;
        z-index: -1;
    }

/* Form Inputs */
.contact-input,
.contact-textarea {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #ffffff;
    padding: 15px 20px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .contact-input:focus,
    .contact-textarea:focus {
        background: rgba(255, 255, 255, 0.05);
        border-color: #4ecdc4;
        box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
        color: #ffffff;
    }

    .contact-input::placeholder,
    .contact-textarea::placeholder {
        color: rgba(255, 255, 255, 0.6);
        font-family: 'Lexend', sans-serif;
    }

.contact-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Submit Button */
.contact-submit-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #ffffff;
    padding: 15px 40px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
}

    .contact-submit-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #4ecdc4;
        color: #4ecdc4;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
    }

    .contact-submit-btn:active {
        transform: translateY(0);
    }

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

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .contact-form-container {
        padding: 30px 20px;
        margin: 0 15px;
    }

    .contact-input,
    .contact-textarea {
        padding: 12px 15px;
    }

    .contact-submit-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
        
    }

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

    .contact-form-container {
        padding: 25px 15px;
    }
}


/* Social Icons Container */
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: nowrap;
}

/* Individual Social Icon Styling */
.social-icon {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
    transform: translateY(0);
}

    /* Hover state for the container */
    .social-icon:hover {
        transform: translateY(-8px) scale(1.1);
    }

    /* Icon image styling */
    .social-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: all 0.3s ease;
        filter: brightness(0.9);
    }

    /* Image hover effect - Glowing lines/outlines */
    .social-icon:hover img {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
        animation: glowPulse 2s ease-in-out infinite;
    }

/* Pulsing glow animation */
@keyframes glowPulse {
    0%, 100% {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
    }

    50% {
        filter: brightness(1.4) contrast(1.2) drop-shadow(0 0 12px #FF6666) drop-shadow(0 0 16px #FF894C) drop-shadow(0 0 20px #90FF55) drop-shadow(0 0 24px #7B94F6) drop-shadow(0 0 28px #FF77F1);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .social-icons {
        gap: 15px;
        padding: 15px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .social-icons {
        gap: 10px;
        padding: 10px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 45px;
        height: 45px;
    }
}

/* Address styling with Lexend font */
address {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem; /* small font size */
    margin-bottom: 1rem; /* mb-3 equivalent */
    font-style: normal; /* Remove default italic styling from address element */
    line-height: 1.5;
}

/* Gradient hover for address */
address.text-white:hover {
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}

/* Alternative class-based approach if you prefer */
.address-lexend {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    font-style: normal;
    line-height: 1.5;
}

/* Menu and Help Center Section Headers */
.col-md-2 h6 {
    font-family: 'Lexend', sans-serif;
    color: #000000;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Menu and Help Center Lists */
.col-md-2 ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Menu and Help Center List Items */
.col-md-2 ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

/* Menu and Help Center Links */
.col-md-2 ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Hover effects for links */
.col-md-2 ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* Gradient hover for CompanyServices-footer links */
.CompanyServices-footer a:hover {
    color: transparent !important;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
}

/* Alternative more specific selectors if needed */
.menu-section h6,
.help-center-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #555555;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.menu-section ul,
.help-center-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-section ul li,
.help-center-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.menu-section ul li a,
.help-center-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.menu-section ul li a:hover,
.help-center-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* General footer section styling with Lexend */
.footer-section {
    font-family: 'Lexend', sans-serif;
}

.footer-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #ffffff;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.footer-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.footer-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.footer-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/*============= SERVICES =============*/

.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.offers-firsttitle {
    font-family: 'Lexend', sans-serif;
    font-size: 3rem;
    font-weight: 200;
    color: #ffffff;
    margin-bottom: 0;
    animation: fadeInDown 0.8s ease-out;
}

.offers-secondpctitle {
    background: linear-gradient(to right, #a7363c, #671C68, #7B54B1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondcctvtitle {
    background: linear-gradient(to right, #5CE1FF, #5CFFB8, #56D86A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondfdastitle {
    background: linear-gradient(to right, #FF6666, #C34814, #F3A335);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-seconddoorlocktitle {
    background: linear-gradient(to right, #BA1022, #EC0120, #FD6A59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.video-overlay-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.video-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: white;
    
}

/* RESPONSIVE - Video Overlay */

/* Ultra-wide screens (1440px+) */
@media (min-width: 1440px) {
    .video-overlay-title {
        font-size: 5rem;
        margin-bottom: 1.5rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 18px 48px;
        font-size: 1.1rem;
    }
}

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .video-overlay-title {
        font-size: 4.5rem;
        margin-bottom: 1.3rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.3rem;
        margin-bottom: 1.8rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 16px 44px;
        font-size: 1rem;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .video-overlay-title {
        font-size: 4rem;
        margin-bottom: 1.2rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.6rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 15px 40px;
        font-size: 0.95rem;
    }
}

/* Tablet landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .video-overlay-title {
        font-size: 3rem;
        margin-bottom: 1rem;
        text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 1rem;
        margin-bottom: 1.4rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 36px;
        font-size: 0.9rem;
    }
}

/* Tablet portrait (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 12px 32px;
        font-size: 0.85rem;
    }
}

/* Mobile large (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2rem;
        margin-bottom: 0.7rem;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 11px 28px;
        font-size: 0.8rem;
    }
}

/* Mobile small (320px - 479px) */
@media (max-width: 479px) {
    .video-overlay-container {
        height: 100vh; /* Increased from 60vh to 80vh for taller mobile video section */
    }
    
    .video-overlay-content {
        padding: 0 2rem; /* Increased padding for mobile */
        text-align: center; /* Center align content on mobile */
        width: 90%; /* Ensure content doesn't reach edges */
    }
    
    /* Fix about video for mobile */
    .about-video {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 250px !important;
        object-fit: cover;
        margin-top: 0 !important;
    }
    
    .col-lg-5.col-md-12.d-flex.justify-content-center.align-items-start.position-relative {
        width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Stack mission and vision cards vertically on mobile */
    .mission-vision-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Center projects header text on mobile */
    .projects-header {
        height: auto !important;
        min-height: 100vh;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-attachment: scroll !important;
    }
    
    .projects-header-content {
        margin-top: 0 !important;
        padding: 2rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: auto !important;
    }
    
    .video-overlay-title {
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.75rem;
        margin-bottom: 0.9rem;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 10px 24px;
        font-size: 0.75rem;
    }
}

/* ENHANCED TITLE ANIMATION */
.video-overlay-title {
    font-family: "Space Grotesk";
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    animation: titleEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               titleGlow 3s ease-in-out 1.2s infinite;
    opacity: 0;
}

/* Title entrance animation with bounce effect */
@keyframes titleEntrance {
    0% {
        opacity: 0;
        transform: translateY(-80px) scale(0.5) rotateX(90deg);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: translateY(10px) scale(1.05) rotateX(-5deg);
        filter: blur(0px);
    }
    80% {
        transform: translateY(-5px) scale(0.98) rotateX(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0px);
    }
}


@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 30px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 50px rgba(255, 255, 255, 0.6),
                     0 0 70px rgba(172, 56, 56, 0.4);
    }
}

.video-overlay-subtitle {
    font-family: "Lexend";
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    animation: subtitleFade 1s ease-out 0.3s backwards;
}

@keyframes subtitleFade {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


.video-overlay-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 50px;
    font-family: "Lexend";
    font-weight: 400;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    position: relative;
    overflow: hidden;
    animation: buttonEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulse 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


@keyframes buttonEntrance {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}


.video-overlay-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}


.video-overlay-button:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.7),
                0 0 50px rgba(172, 56, 56, 0.4);
    
}

.video-overlay-button:hover::before {
    animation: shimmer 1s infinite;
}

.video-overlay-button:active {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.6);
}

/* Ripple effect on click */
.video-overlay-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s, opacity 0.6s;
    opacity: 0;
}

.video-overlay-button:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}
/* ANIMATIONS */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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


@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* SLIDER CONTAINER STYLES */
.services-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000000;
    margin-top: 0;
    padding-top: 5px;
}

.services-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 400%;
}

/* 2. The Wrapper (The Sliding Track) */
#sliderWrapper {
    display: flex;          /* CRITICAL: Lines the slides (sections) up horizontally */
    width: 400%;            /* Total width: 4 slides * 100% = 400% */
    height: 100%;
    /* CRITICAL: This property makes the transition smooth */
    transition: transform 0.6s ease-in-out; 
}

/* 3. The Individual Slides (The content sections) */
#sliderWrapper > .offers-section {
    width: 25%;             /* Each slide takes up 1/4 of the 400% width */
    flex-shrink: 0;         /* CRITICAL: Prevents the slides from shrinking */
    height: 100%;
    box-sizing: border-box; 
    /* You may want to add overflow-y: auto; here if content might exceed the height */
}

/* SLIDER INDICATORS */
.slider-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    animation: indicatorPulse 2s ease-in-out infinite;
}

.indicator.active {
    background: white;
    transform: scale(1.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: none;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

@keyframes indicatorPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* COMPANY OFFER SECTION STYLES */
.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
    flex: 0 0 25%;
    width: 25%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    margin-top: -70px;
    transform: translateY(0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    position: relative;
}

.offers-section.active {
    opacity: 1;
    transform: translateY(0);
}

.offers-section.d-none {
    display: none !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.offers-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* MAP STYLES WITH ANIMATIONS */
.map-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem 0;
    width: 100%;
    overflow-x: hidden;
}

.map-scaler {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.map-scaler-inner {
    position: relative;
    width: 300px;
    height: 523px;
    transform: scale(calc(min(100vw, 1400px) / 1400));
    transform-origin: top center;
}

.map-container {
    position: absolute;
    width: 300px;
    height: 523px;
    top: 0;
    left: 0;
    animation: mapAppear 1.2s ease-out;
}

@keyframes mapAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

.label {
    position: absolute;
    color: white;
    text-align: center;
    animation: labelSlideIn 0.8s ease-out backwards;
}

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

.label-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.label-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.count-count {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    animation: countUp 1.5s ease-out;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.count-text {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 1;
}

.pc-icon {
    width: 94px;
    height: auto;
    animation: floatAnimation 3s ease-in-out infinite;
}

.left-label {
    top: 50%;
    left: -250px;
    transform: translateY(-50%);
    animation-delay: 0.2s;
}

.right-label.top {
    top: 60px;
    right: -250px;
    animation-delay: 0.4s;
}

.right-label.bottom {
    bottom: 100px;
    right: -350px;
    animation-delay: 0.6s;
}

.line-image {
    position: absolute;
    width: 160px;
    height: auto;
    transform: translateY(-100%);
    transform-origin: bottom left;
    animation: drawLine 1s ease-out backwards;
}

@keyframes drawLine {
    from {
        opacity: 0;
        transform: translateY(-100%) scaleY(0);
    }
    to {
        opacity: 1;
        transform: translateY(-100%) scaleY(1);
    }
}

/* GRADIENT BUTTONS */
.gradientpccolor-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 25%, #7B54B1 75%, #000000 100%);
}

.gradientcctvcolor-button {
    background: linear-gradient(135deg, #5CE1FF 0%, #5CFFB8 25%, #56D86A 75%, #000000 100%);
}

.gradientfdascolor-button {
    background: linear-gradient(135deg, #FF6666 0%, #C34814 25%, #F3A335 75%, #000000 100%);
}

.gradientdoorlockcolor-button {
    background: linear-gradient(135deg, #BA1022 0%, #EC0120 25%, #FD6A59 75%, #000000 100%);
}

.gradient-button {
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(172, 56, 56, 0.3);
    outline: none;
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    animation: buttonAppear 0.8s ease-out 0.8s backwards;
}

@keyframes buttonAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gradient-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(172, 56, 56, 0.4);
}

.gradient-button:active {
    transform: translateY(0);
}

/* GRADIENT LOOP WITH SHADOW */
@keyframes gradientCycle {
    0% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(0deg);
    }
    50% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(180deg);
    }
    100% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(360deg);
    }
}

.glow-gradient {
    border: none;
    border-radius: 0;
    animation: gradientCycle 6s linear infinite;
    transition: all 0.3s ease-in-out;
}

/* Responsive fallback */
@media (max-width: 600px) {
    .left-label,
    .right-label.top,
    .right-label.bottom {
        position: static;
        text-align: center;
        margin-top: 1rem;
        transform: none;
    }

    .label-content {
        justify-content: center;
    }

    .line-image {
        display: none;
    }

    .offers-firsttitle {
        font-size: 2.5rem;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }

    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}

/* RESPONSIVE - Keep PC design at any screen size */

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .map-scaler-inner {
        transform: scale(0.85);}
    .offers-firsttitle {
        font-size: 2.5rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }
    .left-label,
    .right-label.top,
    .right-label.bottom {
        font-size: 1rem;
    }
    .gradient-button{
        margin-top: -70px !important;
        padding: 15px 25px !important;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .offers-section {
        margin-top: -20px;
    }
    .map-scaler-inner {
        transform: scale(0.68);
        margin-top: -50px;
    }
    .offers-firsttitle {
        font-size: 2rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2.5rem;
    }
    .gradient-button{
        margin-top: -170px;
        padding: 11px 25px;
        font-size: 1rem;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.95rem;
    }

            .fp-wrapper {
                padding: 0 1rem;
            }

            .fp-main-section {
                padding: 60px 0;
            }

            .fp-header-title {
                font-size: clamp(24px, 4vw, 32px);
                margin-bottom: 25px;
            }

            .fp-card {
                height: 450px !important;
            }

            .fp-card-category {
                font-size: 12px !important;
            }

            .fp-card-content {
                padding: 20px !important;
            }

            .fp-card-title {
                font-size: 1.4rem !important;
                margin-bottom: 10px !important;
            }

            .fp-card-description {
                font-size: 0.80rem !important;
                margin-bottom: 18px;
            }

            .fp-card-tag {
                font-size: 12px !important;
                margin: auto;
                margin-top: -10px;
            }
            }

            .fp-image-wrapper {
                height: 170px !important;
            }

            .fp-all-button {
                margin-top: -20px;
                padding: 12px 30px !important;
                font-size: 15px !important;
            }


@media (max-width: 540px) {
    .offers-section {
        padding: 30px 15px;
        margin-top: -60px !important;
    }

    .offers-header {
        margin-bottom: 30px;
    }

    .offers-firsttitle {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    /* ===== MAP CONTAINER ===== */
    .map-wrapper {
        margin-bottom: 40px;
        position: relative;
        overflow: visible !important;
        padding: 0 100px;
        margin-left: 50px;
    }

    .map-scaler {
        padding: 0;
        position: relative;
        width: 100%;
        overflow: visible !important;
        margin: auto;
    }

    .map-scaler-inner {
        transform: scale(0.85) !important;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        width: 100%;
        height: auto;
        overflow: visible !important;
        margin: auto;
    }

    .map-container {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible !important;
    }

    .map-image {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* ===== DOTTED LINES ===== */
    .line-image {
        position: absolute !important;
        max-width: 60px;
        height: auto;
    }

    /* ===== LABELS/METRICS ===== */
    .label {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .label-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .label-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .count-count {
        font-size: 1.8rem;
        font-weight: bold;
        white-space: nowrap;
    }

    .count-text {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .pc-icon {
        width: 50px;
        height: 50px;
    }

    /* Position labels specifically for mobile */
    .left-label {
        left: 10px;
        top: 55%;
        transform: translateY(-50%);
    }

    .right-label.top {
        right: 10px;
        top: 30%;
        transform: translateY(-50%);
    }

    .right-label.bottom {
        right: 10px;
        bottom: 28%;
        transform: translateY(50%);
    }

    /* ===== BUTTON ===== */
    .gradient-button {
        padding: 12px 32px;
        font-size: 0.9rem;
        margin-top: -100px !important;
        width: auto;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 2.3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.85rem;
    }
}

/* Tablets landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .offers-section{
        margin-top: -80px !important;
    }
    .map-scaler-inner {
        transform: scale(0.90);
    }
    
    .left-label {
        left: -150px;
    }
    
    .right-label.top {
        right: -100px;
        top: -30px;
    }
    
    .right-label.bottom {
        right: -190px;
        top: 220px;
    }
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
        margin-left: -100px !important;
        margin-top: 150px !important;
    }
     .gradient-button {
        padding: 14px 28px;
        font-size: 20px;
        margin-top: 40px !important;
    }

}

/* Tablets portrait (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .map-scaler-inner {
        transform: scale(0.65);
    }
    
    .left-label {
        left: -180px;
    }
    
    .right-label.top {
        right: -180px;
    }
    
    .right-label.bottom {
        right: -220px;
    }
    
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
    }
}

/* Mobile large (361px - 480px) */
@media (max-width: 480px) {
    .offers-section {
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.70) !important;
        margin-left: -60px;
    }
    
    .map-wrapper {
        padding: 2rem 0;
    }
    
    .left-label {
        left: -50px;
    }
    
    .right-label.top {
        right: -30px;
        margin-top: -20px;
        position: absolute;
    }
    
    .right-label.bottom {
        margin-right: -100px !important;
        bottom: 150px;
        position: absolute;
    }
    
    .count-count {
        font-size: 40px;
    }
    
    .count-text {
        font-size: 18px;
    }
    
    .pc-icon {
        width: 60px;
    }
    
    .line-image {
        width: 120px;
    }
    
    .offers-firsttitle {
        font-size: 2rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2.5rem;
    }
    
    .gradient-button {
        padding: 14px 28px;
        font-size: 16px;
    }
}

/* Mobile small (320px - 360px) */
@media (max-width: 360px) {
    .offers-section {
        padding: 40px 0;
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.65) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    
    .left-label {
        left: -70px;
    }
    
    .right-label.top {
        margin-right: 30px;
        margin-top: 20px !important;
    }
    
    .right-label.bottom {
        margin-right: -90px !important;
        bottom: 120px;
        position: absolute;
    }
    
    .count-count {
        font-size: 32px;
    }
    
    .count-text {
        font-size: 16px;
    }
    
    .pc-icon {
        width: 50px;
    }
    
    .line-image {
        width: 100px;
    }
    
    .offers-firsttitle {
        font-size: 1.5rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2rem;
    }
    
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -210px !important;
    }
}

@media (max-width: 375px) {
    .offers-section {
        padding: 40px 0;
    }
    
    .map-scaler-inner {
        transform: scale(0.60) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -260px !important;
    }
}

@media (min-width: 912px) {
            .fp-wrapper {
                padding: 0 2rem;
                max-width: 600px;
            }

            .fp-main-section {
                padding: 80px 0;
            }

            .fp-header-title {
                font-size: clamp(28px, 5vw, 40px);
                margin-bottom: 30px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                margin-bottom: 40px;
            }

            .fp-card-content {
                padding: 30px;
            }

            .fp-card-title {
                font-size: 1.8rem;
                margin-bottom: 15px;
            }

            .fp-card-description {
                font-size: 1rem;
                line-height: 1.6;
                margin-bottom: 20px;
            }

            .fp-image-wrapper {
                height: 280px;
            }

            .fp-all-button {
                padding: 16px 50px;
                font-size: 18px;
            }
        }

        /* Tablet Medium (853px to 911px) */
        @media (min-width: 853px) and (max-width: 911px) {
            .fp-wrapper {
                padding: 0 1.5rem;
                max-width: 90px;
            }

            .fp-main-section {
                padding: 70px 0;
            }

            .fp-header-title {
                font-size: clamp(26px, 4.5vw, 36px);
                margin-bottom: 28px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 16px;
                margin-bottom: 35px;
            }

            .fp-card-content {
                padding: 26px;
            }

            .fp-card-title {
                font-size: 1.6rem;
                margin-bottom: 13px;
            }

            .fp-card-description {
                font-size: 0.95rem;
                line-height: 1.6;
                margin-bottom: 18px;
            }

            .fp-image-wrapper {
                height: 260px;
            }

            .fp-all-button {
                padding: 15px 48px;
                font-size: 17px;
            }
        }


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

/* GLOBAL RESET/BEST PRACTICE for Responsiveness */
* {
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* ========================================================================= */
/* CORE SHOWCASE BLOCK & FONT SCALING */
/* ========================================================================= */

.core-showcase-block {
    background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
    /* Use relative padding unit for vertical spacing, scales better than a fixed 120px */
    padding: 10vh 0; 
    position: relative;
    overflow: hidden;
}

.core-showcase-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.core-showcase-block::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    animation: core-pulse-bg 8s ease-in-out infinite;
}

@keyframes core-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

.showcase-header {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.showcase-subtext {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 3rem; /* Reduced from 4rem */
    font-weight: 300;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
}

.concept-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease-out, transform 0.8s ease-out;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none; 
}

.concept-tile:nth-child(1) { transition-delay: 0.1s; }
.concept-tile:nth-child(2) { transition-delay: 0.2s; }
.concept-tile:nth-child(3) { transition-delay: 0.3s; }
.concept-tile:nth-child(4) { transition-delay: 0.4s; }
.concept-tile:nth-child(5) { transition-delay: 0.5s; }
.concept-tile:nth-child(6) { transition-delay: 0.6s; }

.showcase-tile-container {
    /* Auto-fit is the key for responsiveness here */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.concept-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.concept-tile::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(172, 56, 56, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.concept-tile:hover {
    transform: translateY(-15px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
}

.concept-tile:hover::before {
    transform: scaleX(1);
}

.concept-tile:hover::after {
    width: 400px;
    height: 400px;
}

.concept-tile:hover .concept-icon-wrap {
    transform: scale(1.1) rotateY(360deg);
}

.concept-tile:hover .concept-icon-wrap svg {
    animation: icon-bounce 0.6s ease;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.concept-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.concept-icon-wrap svg {
    width: 40px;
    height: 40px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.concept-title-text {
    font-family: "Space Grotesk";
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-title-text {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.concept-detail-text {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-detail-text {
    color: #ccc;
}

/* ========================================================================= */
/* METRIC SHOWCASE ZONE */
/* ========================================================================= */

.metric-showcase-zone {
    font-family: "Space Grotesk";
    background: #000000;
    padding: 100px 0;
    position: relative;
}

.data-figure-layout {
    /* Auto-fit is great here, scales well */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.figure-unit-card {
    text-align: center;
    animation: slightFloat 3s ease-in-out infinite alternate; 
}

.figure-unit-card:nth-child(even) {
    animation-delay: 0.3s;
}

.figure-unit-card:nth-child(3n) {
    animation-delay: 0.9s;
}

.figure-count-value {
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.figure-description-text {
    font-size: 1.2rem;
    color: white;
    font-weight: 300;
}

@keyframes slightFloat {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

/* ========================================================================= */
/* PROCESS SECTION */
/* ========================================================================= */

.process-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.container-our {
    text-align: center;
}

.section-title-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    
}

.section-subtitle-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 50px; /* Reduced from 100px */
    font-weight: 300;
    position: relative;
    z-index: 2;
    animation: subtext-slide-in 1s ease-out 0.2s backwards; 
}

.process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(103, 28, 104, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 60% 70%, rgba(123, 84, 177, 0.1) 0%, transparent 40%);
    animation: gradientShift 10s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.process-timeline {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.process-step {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
    position: relative;
    opacity: 0; 
    transform: translateX(0); 
    transition: none; 
}

.process-step.animate-left {
    animation: stepSlideIn 0.8s ease-out forwards; 
}

.process-step:nth-child(even).animate-right {
    animation: stepSlideInRight 0.8s ease-out forwards;
}


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

.process-step:nth-child(even) {
    flex-direction: row-reverse;
}

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

.step-number {
    font-family: "Space Grotesk";
    width: 60px;
    height: 60px;
    color: white;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
    transition: all 0.4s ease;
}

.process-step:hover .step-number {
    transform: scale(1.15) rotateZ(360deg);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.step-content {
    color: white;
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.step-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.process-step:hover .step-content {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(172, 56, 56, 0.3);
    transform: translateX(10px);
}

.process-step:nth-child(even):hover .step-content {
    transform: translateX(-10px);
}

.process-step:hover .step-content::before {
    opacity: 1;
}

.step-title {
    font-family: "Space Grotesk";
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.process-step:hover .step-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step-description {
    font-family: "Lexend";
    color:white;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.process-step:hover .step-description {
    color: #ccc;
}

/* ========================================================================= */
/* FUTURE PROJECTS (FP) SECTION */
/* ========================================================================= */

.fp-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.fp-main-section {
    padding: 80px 0; /* Reduced from 120px 0 */
    position: relative;
    overflow: hidden;
}

.fp-main-section::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(123, 84, 177, 0.05) 0%, transparent 50%);
    animation: fp-pulse-bg 12s ease-in-out infinite;
}

@keyframes fp-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

/* ------------------------------------------------ */
/* SCROLL ANIMATION STARTING STATES (HIDDEN) */
/* ------------------------------------------------ */

/* The hidden class sets the initial position and opacity, which is then animated away */
.hidden-scroll {
    opacity: 0;
    /* Use 'will-change' for performance hint */
    will-change: transform, opacity; 
}

/* Header Hidden State */
.fp-header-title.hidden-scroll {
    transform: translateY(-30px);
}

/* Card Hidden State */
.fp-card.hidden-scroll {
    transform: translateY(50px) scale(0.9);
}

/* Button Link Hidden State */
.fp-all-projects-link.hidden-scroll {
    transform: translateY(30px);
}


/* ------------------------------------------------ */
/* SCROLL ANIMATION TRIGGERED STATES (VISIBLE) */
/* ------------------------------------------------ */

/* The animated class applies the animation keyframe */

/* Header Animation Trigger */
.fp-header-title.animated {
    animation: fp-header-slide-in 1s ease-out forwards;
}

/* Card Animation Trigger */
.fp-card.animated {
    /* The animation-delay is set dynamically by JavaScript based on data-delay */
    animation: fp-card-fade-in 0.9s ease-out forwards;
}

/* Button Link Animation Trigger */
.fp-all-projects-link.animated {
    animation: fp-btn-fade-in 1s ease-out forwards;
}


/* ------------------------------------------------ */
/* ORIGINAL KEYFRAMES (Keep these as they are) */
/* ------------------------------------------------ */

@keyframes fp-header-slide-in {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fp-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fp-btn-fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------------ */
/* REST OF ORIGINAL STYLES (Keep as they are) */
/* ------------------------------------------------ */

.fp-header-title {
    font-family: "Space Grotesk";
    color: white;
    text-align: left;
    /* Fluid font size: min 28px, preferred 5vw, max 40px */
    font-size: clamp(28px, 5vw, 40px); 
    font-weight: 500;
    margin-bottom: 30px; /* Reduced from 50px */
    position: relative;
    z-index: 2;
}

.fp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px; /* Reduced from 40px */
    position: relative;
    z-index: 2;
    margin-bottom: 40px; /* Reduced from 60px */
}

.fp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.fp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
    z-index: 2;
}

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

.fp-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.fp-image-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.fp-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.fp-card:hover .fp-card-image {
    transform: scale(1.1) rotate(2deg);
}

.fp-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-card:hover .fp-image-overlay {
    opacity: 1;
}

.fp-view-button {
    padding: 9px 28px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.fp-card:hover .fp-view-button {
    transform: translateY(0);
    opacity: 1;
}

.fp-view-button:hover {
    transform: translateY(0) scale(1.05);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.5);
}

.fp-card-content {
    padding: 30px;
}

.fp-card-category {
    font-family: "Lexend";
    display: inline-block;
    padding: 6px 16px;
    background: rgba(172, 56, 56, 0.2);
    border: 1px solid rgba(172, 56, 56, 0.4);
    border-radius: 20px;
    font-size: 14px;
    color: #AC3838;
    margin-bottom: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-category {
    background: rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.6);
}

.fp-card-title {
    font-family: "Space Grotesk";
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fp-card-description {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.fp-card:hover .fp-card-description {
    color: #ccc;
}

.fp-card-tags {
    font-family: "Lexend";
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fp-card-tag {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    font-size: 13px;
    color: #999;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-tag {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(172, 56, 56, 0.3);
    color: #bbb;
}

.fp-all-projects-link {
    text-align: center;
    position: relative;
    z-index: 2;
}

.fp-all-button {
    font-family: "Lexend";
    padding: 16px 50px;
    background: transparent;
    border: 2px solid rgba(172, 56, 56, 0.5);
    border-radius: 30px;
    color: white;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.fp-all-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    z-index: -1;
}

.fp-all-button:hover {
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.fp-all-button:hover::before {
    width: 300px;
    height: 300px;
}


    

/* ========================================================================= */
/* FAQ SECTION */
/* ========================================================================= */

.faq-section {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.container-faq {
    text-align: center;
}

.section-title-faq {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-subtitle-faq {
    font-family: "Lexend";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 4rem;
    font-weight: 300;
    position: relative;
    z-index: 2;
}

.faq-container {
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.faq-item {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    margin-bottom: 30px;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* --- NEW SCROLL ANIMATION CSS --- */

/* 1. Initial State (Hidden and slightly offset) */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}

/* 2. Target State (Visible and in final position) - added by JavaScript */
.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Staggered Delay for FAQ items */
.faq-item.scroll-animate:nth-child(1) { transition-delay: 0.1s; }
.faq-item.scroll-animate:nth-child(2) { transition-delay: 0.2s; }
.faq-item.scroll-animate:nth-child(3) { transition-delay: 0.3s; }
.faq-item.scroll-animate:nth-child(4) { transition-delay: 0.4s; }
.faq-item.scroll-animate:nth-child(5) { transition-delay: 0.5s; }

.section-title-faq.scroll-animate { transition-delay: 0s; }
.section-subtitle-faq.scroll-animate { transition-delay: 0.1s; }

/* Existing FAQ styles */

.faq-item:hover {
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.15);
}

.faq-item.active {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(172, 56, 56, 0.4);
}

.faq-question {
    font-family: "Space Grotesk";
    padding: 25px 30px;
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

.faq-question::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #AC3838, #671C68, #7B54B1);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::before {
    transform: scaleY(1);
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 35px;
}

.faq-answer {
    font-family: "Lexend";
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    color: white;
}

.faq-item.active .faq-answer {
    padding: 0 30px 25px;
    max-height: 500px;
}

.faq-toggle {
    font-size: 1.5rem;
    transition: all 0.4s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(172, 56, 56, 0.2);
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #AC3838, #7B54B1);
}

.faq-section {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.faq-section::after {
    content: "";
    position: absolute;
    bottom: 310px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}

/* ========================================================================= */
/* MEDIA QUERIES FOR RESPONSIVENESS */
/* ========================================================================= */

@media (max-width: 1024px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 150px !important; /* Slight reduction for tablets */
    }
}




/* Tablet and Smaller Devices (Max Width 992px) */
@media (max-width: 992px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 350px !important; /* Slight reduction for tablets */
    }
}

@media (min-width: 853px) and (max-width: 991px) {
    .data-figure-layout {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        padding: 0 1rem;
    }
    
    .figure-count-value {
        font-size: 3rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
}

@media (max-width: 550px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 200px !important; /* Slight reduction for tablets */
    }
}

/* Mobile Devices (Max Width 768px) */
@media (max-width: 768px) {
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 60px 0; /* Consistent vertical padding for mobile */
    }
    
    .showcase-tile-container {
        /* Force single column for a better mobile experience */
        grid-template-columns: 1fr; 
        gap: 15px;
    }
    
    .concept-tile {
        padding: 25px 20px; /* Reduced tile padding */
    }

    .showcase-subtext, 
    .section-subtitle-faq {
        margin-bottom: 2rem;
    }

    /* Metrics Section - Smaller font and less float */
    .figure-count-value {
        font-size: 2rem; 
    }
    
    .data-figure-layout {
        gap: -50px;
    }

    /* Process Timeline - Vertical stacking for mobile */
    .process-step {
        flex-direction: column; /* Stacks number and content vertically */
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }

    .process-step:nth-child(even) {
        flex-direction: column; /* Removes the row-reverse from even items */
    }
    
    /* Remove horizontal translations on hover for stacked layout */
    .process-step:hover .step-content,
    .process-step:nth-child(even):hover .step-content {
        transform: none; 
    }
    
    .step-number {
        margin: 0 auto 15px; /* Center the number circle and add space below */
    }
    
    .step-content {
        padding: 20px;
    }

    /* FAQ Section */
    .faq-question {
        font-size: 1rem;
        padding: 20px 25px;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 25px 20px;
    }

    /* Future Projects Card Grid - Single column on mobile */
    .fp-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .fp-card-content {
        padding: 20px;
    }
    
    .fp-image-wrapper {
        height: 220px;
    }

    .fp-all-button {
        padding: 12px 30px; 
        font-size: 16px;
    }
}

/* Small Mobile Devices (Max Width 480px) */
@media (max-width: 480px) {
    /* Reduce all main section padding further */
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 40px 0;
    }

    /* Adjust main wrapper padding for very small screens */
    .showcase-tile-container, 
    .data-figure-layout, 
    .process-timeline, 
    .faq-container, 
    .fp-wrapper {
        padding: 0 1rem; /* Minimum horizontal padding */
    }

    /* Further compress header elements */
    .showcase-subtext,
    .section-subtitle-our,
    .section-subtitle-faq {
        margin-bottom: 25px;
    }
    
    /* Metric Values */
    .figure-count-value {
        font-size: 2.2rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
    
    .concept-title-text {
        font-size: 1.3rem;
    }
    
    .fp-card-title {
        font-size: 1.5rem;
    }
}

/*============= END ==================*/
    
/* And MANY MORE SECTION STYLES */
.andmanymore-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.andmanymore-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 5rem;
    font-weight: 500;
    margin-top: -0.8rem;
    color: #ffffff;
}

.andmanymore-paragraph p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.9rem;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 2rem;
    color: #cccccc;
    line-height: 1.6;
    font-weight: 300;
}
/* Responsive tweak */
@media (max-width: 768px) {
    .andmanymore-paragraph p {
        font-size: 0.95rem;
        padding: 0 1rem;
    }
}

/* Stats container styling */
.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
    margin-top: 3rem;
    text-align: center;
}

/* Each stat item */
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 150px;
}

/* Gradient icon replacing image */
.icon-gradient {
    width: 107px;
    height: 107px;
    background: linear-gradient(90deg, #FF6666, #66BFFF, #FF66C7, #FF6666, #66BFFF, #FF66C7, #FF6666 );
    background-size: 200% 100%; /* Full span of duplicated colors */
    animation: gradientSlideSeamless 2s linear infinite;
    /* PNG mask */
    -webkit-mask-image: var(--img);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--img);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-bottom: 1rem;
}
/* Number styling */
.stat-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

/* Label styling */
.stat-label {
    font-family: 'Lexend', sans-serif;
    font-size: 2rem;
    color: #ffffff;
    font-weight: 400;
}

@keyframes gradientSlideSeamless {
    0% {
        background-position: 0% 50%;
    }

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



/* Responsive adjustments */
@media (max-width: 768px) {
    .andmanymore-title {
        font-size: 2.5rem;
        margin-top: -2rem;
    }

    .stat-item {
        max-width: 120px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.875rem;
    }

    .stat-item img {
        width: 40px;
        height: 40px;
    }

    .title-strength {
        width: 100%;
        font-size: 2.9rem !important;
        margin-top: -3rem !important;
    }

}


/* Company Strength CSS */
.company-strength {
    background-color: #000000
}
.title-strength {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.25rem;
    font-weight: 500;
    margin-top: -0.5rem;
    color: #ffffff;
    text-align:center;
}
.strTitleCard {
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
}
.card-str1.card, .card-str2.card, .card-str3.card {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-str1.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
    box-shadow: 0 0 30px rgba(123, 242, 255, 0.8),
                0 0 60px rgba(76, 168, 255, 0.6),
                0 0 90px rgba(35, 50, 215, 0.4),
                0 0 120px rgba(35, 50, 215, 0.2);
}
.card-str2.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
    box-shadow: 0 0 30px rgba(132, 9, 180, 0.8),
                0 0 60px rgba(189, 5, 149, 0.6),
                0 0 90px rgba(189, 5, 45, 0.4),
                0 0 120px rgba(189, 5, 45, 0.2);
}
.card-str3.card:hover {
     border: 3px solid;
     border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
     box-shadow: 0 0 30px rgba(243, 249, 59, 0.8),
                0 0 60px rgba(163, 249, 59, 0.6),
                0 0 90px rgba(81, 249, 59, 0.4),
                0 0 120px rgba(81, 249, 59, 0.2);
}
/*Brands Animation CSS*/
.brands-animation {
    background-color: #000000;
}
.title-brands {
    color: #FFF;
    font-size: 40px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
}
.brand-slider {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    margin: 50px auto;
}

.brand-slider-track {
    display: flex;
    width: 200%;
    height: 100%;
    animation: slideLeft 20s linear infinite;
}
.brand-slider-track > div {
    width: 50%;
    height: 100%;
    position: relative;
}
.brand-slider-track img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}


/*slider in shop*/



.brandgroup-default {
    opacity: 1;
    z-index: 1;
}

.brandgroup-hover {
    opacity: 0;
    z-index: 2;
}

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

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

/*Customer Reviews*/
.reviews {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 250px;
    padding-bottom: 250px;
    overflow: hidden;
    z-index: 0;
    border: none;
    margin-top: 20px;
}
.reviews::after {
    content: "";
    position: absolute;
    bottom: 90px;
    left: 50%;
    top: 200px;
    transform: translateX(-50%);
    width: 100%;
    height: 75%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%),
                radial-gradient(circle at center, #A04AB3 0%, #660B23 40%, #1F0206 65%, transparent 100%);
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: -1;
    border: 0;
    pointer-events: none;
}

.title-reviews {
    color: #AEAEAE;
    font-weight: 300;
    font-size: 40px;
    font-family: 'Lexend', sans-serif;
    z-index: 1;
}

.client-says {
    color: #FFF;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.client-name {
    color: #AEAEAE;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.card-reviews {
    background: rgba(9, 9, 9, 0.6);
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

.star-rating, .card-details {
    position: relative;
    top: -30px;
}

.review-img {
    width: 120px;
    height: 120px;
    top: -50px;
    position: relative;
    z-index: 2;
}
#reviewsCarousel {
    z-index: 1;
}
.carousel-control-prev, .carousel-control-next {
    width: auto;
    top: 54%;
    transform: translateY(-50%);
    opacity: 1;
}

.carousel-control-prev {
    left: -80px;
}

.carousel-control-next {
    right: -80px;
}

@media (min-width: 300px) and (max-width: 1280px) {
    .carousel-control-prev,
    .carousel-control-next {
        position: sticky;
        width: auto;
        padding: 0;
        top: 54%;
        position: absolute;
        transform: translateY(-50%);
    }

    .carousel-control-prev {
        left: 10px;
    }

    .carousel-control-next {
        right: 10px;
    }
    .reviews {
        padding: 0px 20px;
        position: relative;
    }
    .card-reviews {
        margin-top: 100px;
        height: 500px;
    }
}
/* ================ CONTACT =====================/*



/* CONTACT FORM */
.contactForm {
    position: relative;
    background-color: #090909;
    padding: 100px 0px;
    overflow: hidden;
}

    .contactForm::after {
        content: "";
        position: relative;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient( 90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06% );
        filter: blur(80px);
        border-radius: 50%;
        z-index: 0;
    }

.contactForm {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.contactForm::after {
    content: "";
    position: absolute;
    bottom: 210px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.title-contactForm {
    color: #FFF;
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactDes {
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactSync {
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
    background: linear-gradient(90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
}

.card-contactForm.card {
    border: 2px solid;
    border-color: #FDFDFD;
    border-radius: 10px;
    background: #090909;
    transform: none !important;
    transition: none !important;
    z-index: 1;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .contactForm {
        padding: 20px 20px;
    }
}

/* =================== END ======================== */

/* About Section Styles */

.about-section {
    background: #000000;
    color: #eee;
    min-height: 100vh;
    padding-top: 5rem;
    padding-bottom: 3rem;

    position: relative;
}

.about-video {
    max-width: 100%;
    height: 500px;
    object-fit: cover;
    background: #222;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    min-width: 400px;
}

.about-label {
    font-family: 'Lexend', sans-serif;
    font-weight: 200;
    font-size: 24px;
    color: #AEAEAE;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 55px;
    color: #FFFFFF;
    background: linear-gradient(
        90deg,
        #4d4c4c 0%,
        #ffffff 25%,
        #ffffff 50%,
        #ffffff 75%,
        #4d4c4c 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
}

@keyframes anim-lineUp {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }
    20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translateY(0%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes shine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


.about-lead {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: inherit;
    margin-bottom: 1rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-desc {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #AEAEAE;
    margin-bottom: 1.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}
.hero-btn-about {
    font-family: 'Lexend', sans-serif;
    color: #000000 !important;
    background: #D9D9D9;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-btn-about:hover {
        background: transparent ;
        color: #FFFFFF !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);

        background: linear-gradient(
        90deg,
        #000000 0%,
        #000000 25%,
        #000000 50%,
        #000000 75%,
        #ffffff33 100%
    );
    background-size: 200% 100%;
    -webkit-text-fill-color: white;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
    }



@media (max-width: 1024px) {
    .hero-btn-about {
        width: 90% !important;
        justify-content: center;
    }
}
@media (min-width: 300px) and (max-width: 980px) {
    .about-section {
        padding-bottom: 0.5rem;
    }
    .about-video {
        max-width: 100%;
        height: 350px;
        object-fit: cover;
        background: #222;
        border-radius: 0.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        min-width: 300px;
        margin-top: -2rem;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }

    .about-content {
        padding: 30px 30px 0 30px; /* top, right, bottom, left */
    }
    .about-btn {
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }
    .about-title,
    .about-lead,
    .about-desc,
    .about-label {
        transform: none !important;
        text-align: center;
    }
}

@media (min-width: 1024px) and (max-width: 1120px) {
    .about-content {
        padding: 20px;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }
}

/* Team Section Styles */
.team-section {
    background-color: #111;
    color: #fff;
    padding-top: 3rem;
    padding-bottom: 0;
    margin-bottom: 0;
}

.team-intro {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.team-intro-icon {
    height: 0.8em;
    margin-left: -0.3em;
    position: relative;
    top: -0.4em;
     animation: clickSimulate 1.5s ease-in-out infinite;
}

@keyframes clickSimulate {
    0%, 90%, 100% {
        transform: translateY(0) scale(1);
    }
    5% {
        transform: translateY(5px) scale(.25);
    }
    10% {
        transform: translateY(0) scale(1);
    }

}

.team-desc {
    font-size: 1rem;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
}

.team-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    font-size: 22vw;
    line-height: 1;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    margin-top: 12rem;
    padding: 0;
    display: block;
    width: 100%;
    word-break: break-word;
    transform: translateY(-120px);
}

/* Keyframes for smooth gradient shifting */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Shared styling for all category titles */
.leaders-category,
.marketing-category,
.technicians-category,
.admin-category,
.developers-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    line-height: 1;
    text-align: center;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    background-image: linear-gradient(90deg, #74FEBD, #2FA2B7, #4B18E3, #FDFDFD);
    background-size: 400% 100%;
    background-repeat: no-repeat;
    animation: gradientShift 4s linear infinite;
}

.leaders-category {
    margin-top: 13rem;
    transform: translateY(-125px);
    font-size: 320px;
    animation-delay: 0s;
}

.admin-category {
    margin-top: 1rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.marketing-category {
    margin-top: -3rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.technicians-category {
    margin-top: -1rem;
    transform: translateY(-175px);
    font-size: 195px;
    animation-delay: 1s;
}

.developers-category {
    margin-top: -3rem;
    transform: translateY(-170px);
    font-size: 210px;
    animation-delay: 1.5s;
}

.leaders-group,
.admin-group,
.marketing-group,
.technicians-group,
.developers-group {
    margin-bottom: 3rem;
}

.team-wrapper {
    margin-top: -120px;
    padding-bottom: 200px;
    position: relative;
}

.team-img {
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    margin-bottom: 1rem;
    margin-right: 0;
    transform: translateY(-245px);
}



.team-name {
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-230px);
    text-align: center;
    white-space: nowrap;
    animation: lights 5s 750ms linear infinite;
}


    @keyframes lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
}


.team-role {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-215px);
    text-align: center;
}

.row.justify-content-center > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
}

    .row.justify-content-center > [class*="col-"]:first-child {
        margin-left: 0;
    }

@media (max-width: 1280px) {
    .team-category,
    .leaders-category,
    .admin-category,
    .marketing-category,
    .technicians-category,
    .developers-category {
        margin-top: 3rem;
        transform: translateY(0);
    }

    .leaders-category {
        font-size: 16vw;
    }

    .marketing-category {
        font-size: 13vw;
    }

    .technicians-category {
        font-size: 13vw;
    }

    .admin-category{
        font-size: 13vw;
    }

    .developers-category {
        font-size: 13vw;
    }

    .team-img {
        width: 120px;
        height: 120px;
        transform: none;
    }

    .team-name,
    .team-role {
        transform: none;
        font-size: 18px;
    }

    .row.justify-content-center > [class*="col-"] {
        margin-left: 0;
    }
}


/* Join Team Section  */
.bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    top: 0;
    left: 0;
}

.bubble {
    position: absolute;
    bottom: -100px;
    width: 40px;
    height: 40px;
    background: #000000;
    border-radius: 50%;
    opacity: 0.5;
    animation: rise 10s infinite ease-in;
}

    .bubble:nth-child(1) {
        width: 40px;
        height: 40px;
        left: 10%;
        animation-duration: 8s;
    }

    .bubble:nth-child(2) {
        width: 20px;
        height: 20px;
        left: 20%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(3) {
        width: 50px;
        height: 50px;
        left: 35%;
        animation-duration: 7s;
        animation-delay: 2s;
    }

    .bubble:nth-child(4) {
        width: 80px;
        height: 80px;
        left: 50%;
        animation-duration: 11s;
        animation-delay: 0s;
    }

    .bubble:nth-child(5) {
        width: 35px;
        height: 35px;
        left: 55%;
        animation-duration: 6s;
        animation-delay: 1s;
    }

    .bubble:nth-child(6) {
        width: 45px;
        height: 45px;
        left: 65%;
        animation-duration: 8s;
        animation-delay: 3s;
    }

    .bubble:nth-child(7) {
        width: 90px;
        height: 90px;
        left: 70%;
        animation-duration: 12s;
        animation-delay: 2s;
    }

    .bubble:nth-child(8) {
        width: 25px;
        height: 25px;
        left: 80%;
        animation-duration: 6s;
        animation-delay: 2s;
    }

    .bubble:nth-child(9) {
        width: 15px;
        height: 15px;
        left: 70%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(10) {
        width: 90px;
        height: 90px;
        left: 25%;
        animation-duration: 10s;
        animation-delay: 4s;
    }

@keyframes rise {
    0% {
        bottom: -100px;
        transform: translateX(0);
    }

    50% {
        transform: translate(100px);
    }

    100% {
        bottom: 1080px;
        transform: translateX(-200px);
    }
}

@keyframes anime {
    0% {
        top: 0;
    }

    50% {
        top: -1800px;
    }
    /* 200 - 2000 */
    100% {
        top: 0;
    }
}

/* join-team-section with its background and overlay */
.join-team-section {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, #7B9FFF 0%, #E17BCF 100%);
    background-size: 200% 200%;
    animation: joinGradientMove 3s linear infinite;
    padding: 4rem 1rem;
    color: #fff;
    margin-top: -25em;
    text-align: center;
}

    .join-team-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.1);
        pointer-events: none;
        z-index: 0;
        border-radius: inherit;
    }

/* animate join-team-section gradient background */
@keyframes joinGradientMove {
    0% {
        background-position: 0% 50%;
    }

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

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

.join-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 3rem;
    line-height: 1;
    color: #FDFDFD;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.join-btn {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1;
    color: #FDFDFD;
    border: 2px solid #fff;
    border-radius: 32px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: all 0.3s ease;
    padding: 0.75em 2em;
    background: transparent;
    margin-top: 3em;
    position: relative;
}

    .join-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }

.join-arrow-img {
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin-left: 0.3em;
}

@media (max-width: 1280px) {
    .join-team-section {
        margin-top: -13rem;
    }
}
/* END ABOUT CSS THAT WAS REPLACED */

/* =============== CONTACT US ================= */

@keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        @keyframes rainbowBorder {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes rainbowGlow {
            0% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
            14% { border-color: #ff7700; box-shadow: 0 0 20px rgba(255, 119, 0, 0.5); }
            28% { border-color: #ffff00; box-shadow: 0 0 20px rgba(255, 255, 0, 0.5); }
            42% { border-color: #00ff00; box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); }
            56% { border-color: #0000ff; box-shadow: 0 0 20px rgba(0, 0, 255, 0.5); }
            70% { border-color: #4b0082; box-shadow: 0 0 20px rgba(75, 0, 130, 0.5); }
            84% { border-color: #9400d3; box-shadow: 0 0 20px rgba(148, 0, 211, 0.5); }
            100% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
        }

        .banner-top-area {
            position: relative;
            min-height: 300px;
            height: clamp(250px, 55vh, 550px);
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('/images/blogs/blogs-landpage/blog-carousel-2.jpg') center/cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: clamp(15px, 4vw, 150px);
            animation: fadeInDown 1s ease-out;

            /* New properties for the fade-out effect at both top and bottom */
            mask-image: linear-gradient(
                to bottom,
                transparent 0%,  /* Start fully transparent (top fade-out) */
                black 10%,        /* Become fully visible at 5% */
                black 85%,       /* Stay fully visible until 95% */
                transparent 100% /* Become fully transparent (bottom fade-out) */
            );
            overflow: hidden;

        }

        .banner-top-area h1 {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(28px, 7vw, 65px);
            font-weight: 700;
            color: white;
            animation: fadeInDown 1s ease-out;
        }

        .send-us h2 {
            font-family: "Space Grotesk";
            font-size: clamp(24px, 5vw, 36px);
            font-weight: 600;
            margin-bottom: clamp(20px, 4vw, 45px); 
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        .reach-us-main-container {
            max-width: 1200px;
            margin: clamp(-120px, -18vw, -250px) auto 60px;
            padding: 0 clamp(12px, 2.5vw, 20px);
            position: relative;
            z-index: 10;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
        }

        .dual-panel-layout {
            box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
            display: grid;
            grid-template-columns: 1fr;
            overflow: hidden;
            position: relative;
            padding: 2px;
            background: linear-gradient(90deg, 
                #ff0000, #ff7700, #ffff00, #00ff00, 
                #0000ff, #4b0082, #9400d3, #ff0000);
            background-size: 200% 200%;
            animation: rainbowBorder 3s linear infinite;
        }

        @media (min-width: 1024px) {
            .dual-panel-layout {
                grid-template-columns: 1.5fr 1fr;
            }
        }

        .dual-panel-layout::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            border-radius: 18px;
            background: rgb(8, 8, 8);
            z-index: 1;
        }

        .input-panel-wrapper {
            padding: clamp(25px, 5vw, 60px) clamp(18px, 5vw, 80px);
            background: rgb(8, 8, 8);
            position: relative;
            z-index: 2;
        }

        .field-container {
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        .dual-field-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 20px);
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        @media (min-width: 640px) {
            .dual-field-row {
                grid-template-columns: 1fr 1fr;
            }
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: white;
            font-family: "Lexend", sans-serif;
            font-weight: 500;
            font-size: clamp(14px, 2vw, 16px);
        }

        input, textarea {
            color: white;
            font-family: "Lexend", sans-serif;
            width: 100%;
            padding: clamp(12px, 2vw, 15px) clamp(15px, 2.5vw, 20px);
            border: 1px solid gray;
            border-radius: 10px;
            background: rgb(15, 15, 15);
            font-size: clamp(14px, 2vw, 16px);
            transition: all 0.3s ease;
        }

        input:hover, textarea:hover,
        input:focus, textarea:focus {
            outline: none;
            animation: rainbowGlow 2s linear infinite;
        }

        textarea {
            resize: vertical;
            min-height: clamp(120px, 20vw, 150px);
        }

        .action-button-primary {
            display: block;
            margin: 0 auto;
            width: min(100%, 300px);
            max-width: 100%;
            height: 50px;
            padding: 10px 20px;
            font-family: "Lexend", sans-serif;
            background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: clamp(15px, 2vw, 17px);
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        @media (min-width: 640px) {
            .action-button-primary {
                width: 60%;
            }
        }

        @media (min-width: 1024px) {
            .action-button-primary {
                width: 40%;
            }
        }

        .action-button-primary:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 5px 7px rgba(172, 56, 56, 0.7),
                        0 0 8px rgba(172, 56, 56, 0.4);
        }

        .details-panel-wrapper {
            padding: clamp(30px, 5vw, 50px);
            background: rgb(4, 4, 4);
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 2;
        }

        .details-panel-wrapper h2 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(28px, 5vw, 36px);
            font-weight: 600;
            margin-top: clamp(15px, 3vw, 35px);
            margin-left: 0;
            margin-bottom: 20px;
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        @media (min-width: 768px) {
            .details-panel-wrapper h2 {
                margin-left: clamp(0px, 4vw, 55px);
            }
        }

        .details-card-item {
            background: rgb(15, 15, 15);
            padding: clamp(15px, 3vw, 20px);
            width: 100%;
            max-width: 300px;
            border-radius: 15px;
            margin-bottom: clamp(20px, 4vw, 30px);
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .details-card-item {
                max-width: 100%;
            }
        }

        .details-card-item:nth-child(1) {
            animation: floatAlt 4s ease-in-out infinite;
        }

        .details-card-item:nth-child(2) {
            animation: floatAlt 5s ease-in-out infinite;
        }

        .details-card-item:nth-child(3) {
            animation: floatAlt 4.5s ease-in-out infinite;
        }

        .details-card-item h3 {
            font-size: clamp(18px, 3vw, 23px);
            margin-bottom: clamp(12px, 2vw, 20px);
            color: white;
            font-family: "Space Grotesk", sans-serif;
        }

        .details-card-item p {
            color: #8a8a8a;
            font-size: clamp(13px, 2vw, 15px);
            font-family: "Lexend", sans-serif;
            line-height: 1.5;
            margin: 5px 0;
        }

        .scroll-animate {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .scroll-animate.active {
            opacity: 1;
            transform: translateY(0);
        }

        .map-section {
            padding: clamp(30px, 7vw, 70px);
            width: 95%;
            max-width: 1400px;
            margin: 0 auto;
        }

        .where-to h1 {
            color: white;
            font-size: clamp(28px, 6vw, 46px);
            font-weight: 700;
            font-family: "Space Grotesk";
            padding-left: clamp(10px, 3vw, 45px);
            margin-bottom: 20px;
        }

        .where-to iframe {
            padding: clamp(10px, 3vw, 28px);
            height: clamp(300px, 50vw, 600px);
            width: 100%;
            border-radius: clamp(20px, 5vw, 50px);
        }

        @media (max-width: 640px) {
            .banner-top-area {
                min-height: 220px;
                height: 40vh;
            }

            .reach-us-main-container {
                margin-top: -80px;
                margin-bottom: 40px;
            }

            .input-panel-wrapper {
                padding: 25px 18px;
            }

            .details-panel-wrapper {
                padding: 25px 18px;
            }

            .send-us h2 {
                margin-bottom: 20px;
            }

            .details-panel-wrapper h2 {
                margin-top: 10px;
                margin-bottom: 15px;
            }

            .details-card-item {
                margin-bottom: 18px;
            }

            .map-section {
                padding: 30px 15px;
            }

            .where-to iframe {
                padding: 12px;
                border-radius: 20px;
            }
        }

/* ================ END ===================== */

/* Contact Us Style V1 */
/* Container */
.contact-container {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* Shared Panel Styles */
.contact-panel {
    flex: 1;
    font-family: 'Lexend', sans-serif;
    background: #090909;
    color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* LEFT PANEL */
.contact-left-panel {
    margin-left: 2rem;
    border-radius: 1rem 0 0 1rem;
    z-index: 1;
}

    /* Border animation */
    .contact-left-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2px;
        background: linear-gradient(270deg, red, orange, yellow, lime, cyan, blue, violet, red);
        background-size: 400% 400%;
        animation: animated-border 8s linear infinite;
        border-radius: 1rem 0 0 1rem;
        box-sizing: border-box;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
    }

    /* Soft glow */
    .contact-left-panel::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 0 25px rgba(255,255,255,0.07), 0 0 60px rgba(255,255,255,0.05);
        border-radius: 1rem 0 0 1rem;
        z-index: -2;
    }

/* Animate background border */
@keyframes animated-border {
    0% {
        background-position: 0% 50%;
    }

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

/* Content Wrapper (with spacing) */
.contact-left-inner,
.contact-right-inner {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Title & subtitle alignment */
.contact-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.contact-subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* CONTACT ITEMS */
.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.icon {
    margin-left: 3rem;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
}

    .icon img {
        width: 100%;
        height: auto;
    }

    .icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-left: 5rem;
        width: 6rem;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-50%);
    }

.info {
    margin-left: 14rem;
    flex: 1;
}

    .info h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .info p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0.2rem 0;
    }

/* SOCIAL ICONS */
.social-icons {
    margin-top: 2rem;
    display: flex;
    gap: 0.3rem;
}

.social-icon img {
    width: 1.5rem;
    height: 1.5rem;
}

/* RIGHT PANEL */
.contact-right-panel {
    margin-right: 2rem;
    border-radius: 0 1rem 1rem 0;
    z-index: 1;
}

.inquiry-options {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.inquiry-option {
    position: relative;
}

    .inquiry-option input[type="radio"] {
        display: none;
    }

    .inquiry-option span {
        display: inline-block;
        padding: 0.5rem 1.25rem;
        border: 2px solid white;
        color: white;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        cursor: pointer;
        background-color: transparent;
    }

    /* Gradient style when checked OR hovered */
    .inquiry-option input[type="radio"]:checked + .inquiry-str1,
    .inquiry-str1:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
        box-shadow: 0 0 4px rgba(123, 242, 255, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str2,
    .inquiry-str2:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
        box-shadow: 0 0 4px rgba(189, 5, 149, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str3,
    .inquiry-str3:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
        box-shadow: 0 0 4px rgba(81, 249, 59, 0.25);
    }

/* Form fields */
.form-group {
    margin-bottom: 1.5rem;
}

    .form-group input,
    .form-group textarea {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid white;
        color: white;
        font-size: 0.95rem;
        padding: 0.5rem 0;
        outline: none;
    }

textarea {
    resize: vertical;
    min-height: 80px;
}

/* Update preference radios */
.radio-group {
    margin-bottom: 2rem;
}

    .radio-group label {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .radio-group input[type="radio"] {
        margin-right: 0.5rem;
    }

/*Submit Button*/
.submit-button {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.95rem;
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Lexend', sans-serif;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

    /* Gradient fill on hover */
    .submit-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #d8b4fe, #a5f3fc, #bbf7d0);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 2rem;
    }

    .submit-button:hover::before {
        opacity: 1;
    }

    .submit-button:hover {
        color: black;
        font-weight: bold;
    }

/* ===== Responsive Layout ===== */
@media (max-width: 1024px) {
    .contact-left-inner,
    .contact-right-inner {
        padding: 1.5rem;
    }

    .info {
        margin-left: 10rem;
    }

    .icon::after {
        margin-left: 2rem;
        width: 3rem;
    }
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-left-panel,
    .contact-right-panel {
        margin: 1rem 1rem 0 1rem;
        border-radius: 1rem;
    }

        .contact-left-panel::before,
        .contact-left-panel::after,
        .contact-right-panel::before,
        .contact-right-panel::after {
            border-radius: 1rem !important;
        }

    .contact-title {
        font-size: 1.3rem;
    }

    .info {
        margin-left: 6rem;
    }

    .icon {
        margin-left: 1.5rem;
        width: 2rem;
        height: 2rem;
    }

        .icon::after {
            display: none;
        }

    .form-group input,
    .form-group textarea {
        font-size: 0.9rem;
    }

    .submit-button {
        font-size: 0.9rem;
    }

    .inquiry-options {
        flex-direction: column;
    }

    .inquiry-option span {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .info h3 {
        font-size: 1rem;
    }

    .info p {
        font-size: 0.85rem;
    }

    .contact-title {
        font-size: 1.2rem;
    }

    .social-icons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .social-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .radio-group label {
        font-size: 0.85rem;
    }

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

/* Sync Rainbow Texts - Right to Left */
@keyframes gradientCycletext {
    0% {
        background-position: 100% 50%;
    }

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

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

.glow-gradient-text {
    background: linear-gradient( 90deg, #FF6666 0%, #FF8A66 16.66%, #FFF266 33.33%, #85FF66 50%, #66BFFF 66.66%, #9966FF 83.33%, #FF66C7 100% );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    animation: gradientCycletext 6s ease-in-out infinite;
}

/*Blogs Carousel*/
.BlogLandPage .carousel-inner,
.BlogLandPage .carousel-item,
.BlogLandPage .blogsCarousel-img {
    height: 500px;
    width: 100%;
    bottom: 50px;
    
}

.BlogLandPage .blogsCarousel-img {
    object-fit: cover; 
}

/*Latest Product*/
.LatestProduct {
    background-color: #000000;
    padding: 80px 20px;
}

.title-LatestProduct {
    color: #FFF;
    font-size: 34px;
    font-weight: 600;
}
.card-productName {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productPrice {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productStatus {
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
}
.card-product.card {
    border: 1px solid;
    border-color: #D9D9D9;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-product.card:hover {
    border-radius: 15px;
    background: linear-gradient(#000, #000) padding-box, 
    linear-gradient(90deg, #8409B4, #BD0595, #BD052D) border-box; 
    border: 3px solid transparent;
}
.btn-LastestProduct {
    background: transparent;
    color: #FDFDFD;
    border: none;
    border-radius: 10px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
.btn-check:checked + .btn-LastestProduct:hover {
    background: #FDFDFD;
    color: #090909;
    border: none;
}
.btn-check:not(:checked) + .btn-LastestProduct:hover {
    border: 1px solid #FDFDFD;
    color: #FDFDFD;
}

.btn-check:checked + .btn-LastestProduct {
    background: #FDFDFD;
    color: #090909;
    border: none;
}

/* Custom CSS for Trending Gadgets & DPC Updates */

/* Font Definitions */
.space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

.lexend {
    font-family: 'Lexend', sans-serif;
}

/* Main Container */
.tech-showcase-container {
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
    min-height: 100vh;
    padding: 80px 0;
    overflow: hidden;
}

/* Section Headers */
.tech-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.tech-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.tech-view-all {
    color: #64748b;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tech-view-all:hover {
        color: #3b82f6;
        transform: translateX(5px);
    }

/* Trending Gadgets Section */
.trending-gadgets-section {
    margin-bottom: 80px;
}

.trending-card {
    background: #000000;
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

    .trending-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .trending-card:hover::before {
        opacity: 1;
    }

    .trending-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .trending-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.trending-card-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.trending-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

    .trending-card-icon i {
        font-size: 2rem;
        color: white;
    }

.trending-card-info {
    flex: 1;
}

.trending-card-category {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .trending-card-category.mobile-tech {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .trending-card-category.gaming {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }

    .trending-card-category.smart-home {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.trending-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.trending-card-description {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
}

.trending-card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #64748b;
}

.trending-card-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.trending-card-arrow {
    margin-left: auto;
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.trending-card:hover .trending-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* DPC Updates Section */
.dpc-updates-section {
    margin-top: 80px;
}

.dpc-update-card {
    background: #000000;
    border-radius: 20px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 250px;
}

    .dpc-update-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(147, 51, 234, 0.8) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .dpc-update-card:hover::before {
        opacity: 0.3;
    }

    .dpc-update-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .dpc-update-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.dpc-card-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.dpc-update-card:hover .dpc-card-background {
    transform: scale(1.05);
}

.dpc-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
}

.dpc-card-content {
    position: relative;
    z-index: 3;
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dpc-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.dpc-card-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .dpc-card-status.upcoming {
        background: rgba(59, 130, 246, 0.2);
        color: #3b82f6;
    }

    .dpc-card-status.product-launch {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .dpc-card-status.partnership {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.dpc-card-countdown {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: auto;
}

.dpc-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}

.dpc-card-description {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.dpc-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.dpc-card-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.dpc-card-date, .dpc-card-location {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dpc-card-arrow {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.dpc-update-card:hover .dpc-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* Modal Styles */
.dpc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .dpc-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.dpc-modal-content {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.dpc-modal-overlay.active .dpc-modal-content {
    transform: scale(1);
}

.dpc-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .dpc-modal-close:hover {
        background: #ef4444;
        color: white;
    }

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

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

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

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

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

    .trending-card-content {
        flex-direction: column;
        text-align: center;
    }

    .trending-card-icon {
        width: 60px;
        height: 60px;
    }

        .trending-card-icon i {
            font-size: 1.5rem;
        }

    .dpc-card-content {
        padding: 20px;
    }

    .dpc-card-title {
        font-size: 1.3rem;
    }

    .dpc-modal-content {
        padding: 30px;
        margin: 20px;
    }
}


        .blog-section-blog-post {
            padding: 60px 0;
            background-color: #000000;
        }

        .section-header-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .section-title-blog-post {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 0;
        }

        .view-all-link-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .view-all-link-blog-post:hover {
            color: #66b3ff;
        }

        .featured-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            height: 400px;
            margin-bottom: 40px;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .featured-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .featured-image-blog-post {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

        .featured-overlay-blog-post {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            padding: 40px 30px 30px;
        }

        .featured-category-blog-post {
            background-color: #4a9eff;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            display: inline-block;
            margin-bottom: 15px;
        }

        .featured-title-blog-post {
            font-size: 2rem;
            font-weight: bold;
            margin: 0;
            color: white;
        }

        .blog-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }

        .blog-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

        .blog-card-image-blog-post {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .blog-card-content-blog-post {
            padding: 25px;
        }

        .blog-card-meta-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .blog-card-category-blog-post {
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
            color: white;
        }

        .gaming-blog-post { background-color: #00ff88; color: #000; }
        .ai-vr-blog-post { background-color: #4a9eff; }
        .security-blog-post { background-color: #ff6b6b; }

        .blog-card-date-blog-post {
            color: #888;
            font-size: 0.9rem;
        }

        .blog-card-title-blog-post {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 12px;
            color: white;
        }

        .blog-card-excerpt-blog-post {
            color: #ccc;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .read-more-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .read-more-blog-post:hover {
            color: #66b3ff;
        }

        .sidebar-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            padding: 30px;
            border: 1px solid #333;
            margin-bottom: 30px;
        }

        .sidebar-title-blog-post {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 25px;
            color: white;
        }

        .trending-item-blog-post {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #333;
        }

        .trending-item-blog-post:last-child {
            border-bottom: none;
        }

        .trending-number-blog-post {
            background-color: #4a9eff;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .trending-content-blog-post h6 {
            margin: 0;
            font-weight: 600;
            color: white;
        }

        .trending-content-blog-post small {
            color: #888;
        }

        .category-tag-blog-post {
            background-color: #333;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 0.9rem;
            margin: 5px;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .category-tag-blog-post:hover {
            background-color: #4a9eff;
            color: white;
        }

        .arrow-icon-blog-post {
            margin-left: 8px;
        }

        @media (max-width: 768px) {
            .section-header-blog-post {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

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

            .featured-card-blog-post {
                height: 300px;
            }

            .featured-title-blog-post {
                font-size: 1.5rem;
            }
        }

        .chat-widget-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }

        .chat-toggle-btn {
            width: 60px;
            height: 60px;
            background-color: white;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            overflow: hidden;
            padding: 8px;
        }

        .chat-toggle-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .chat-toggle-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .chat-window {
            position: fixed;
            bottom: 100px;
            right: 20px;
            width: 350px;
            height: 500px;
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            transform: translateY(100%) scale(0.8);
            opacity: 0;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            z-index: 1001;
            overflow: hidden;
        }

        .chat-window.active {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .chat-header {
            background-color: #000;
            color: #fff;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 20px 20px 0 0;
        }

        .chat-header-info {
            display: flex;
            align-items: center;
        }

        .assistant-avatar {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            overflow: hidden;
        }

        .assistant-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .chat-header-text h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .status-indicator {
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background-color: #00ff88;
            border-radius: 50%;
            margin-right: 8px;
        }

        .close-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            background-image: url('/images/dpcbits10.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .chat-body {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f8f8f8;
        }

        .message {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
        }

        .message.bot .message-avatar {
            background-color: #000;
            color: #fff;
            overflow: hidden;
        }

        .message.bot .message-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .message.user .message-avatar {
            background-color: #fff;
            color: #000;
            border: 2px solid #000;
            margin-right: 0;
            margin-left: 12px;
        }

        .message-content {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.4;
        }

        .message.bot .message-content {
            background-color: #fff;
            color: #000;
            border: 1px solid #e0e0e0;
        }

        .message.user .message-content {
            background-color: #000;
            color: #fff;
        }

        .quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }

        .quick-reply-btn {
            background-color: #fff;
            border: 2px solid #000;
            color: #000;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Space Grotesk', sans-serif;
        }

        .quick-reply-btn:hover {
            background-color: #000;
            color: #fff;
        }

        .chat-input-container {
            padding: 20px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
        }

        .chat-input-wrapper {
            display: flex;
            align-items: center;
            background-color: #f8f8f8;
            border-radius: 25px;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            transition: border-color 0.3s ease;
        }

        .chat-input-wrapper:focus-within {
            border-color: #000;
        }

        .chat-input {
            flex: 1;
            border: none;
            background: none;
            outline: none;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            color: #000;
        }

        .chat-input::placeholder {
            color: #999;
        }

        .send-btn {
            background-color: #000;
            border: none;
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
            font-size: 16px;
            transition: transform 0.2s ease;
        }

        .send-btn:hover {
            transform: scale(1.1);
        }

        .typing-indicator {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background-color: #fff;
            border-radius: 16px;
            margin-left: 44px;
            width: fit-content;
            border: 1px solid #e0e0e0;
        }

        .typing-dots {
            display: flex;
            gap: 4px;
        }

        .typing-dot {
            width: 6px;
            height: 6px;
            background-color: #999;
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-10px); opacity: 1; }
        }

        /* Mobile responsiveness */
        @media (max-width: 768px) {
            .chat-window {
                width: calc(100vw - 40px);
                height: 500px;
                right: 20px;
                bottom: 100px;
            }

            .message-content {
                max-width: 85%;
            }
        }        

        .company-info-section {
            background: #000000;
            color: #ffffff;
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        
        .company-info-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
            pointer-events: none;
        }
        
        /* 3D Hero Animation */
        .hero-3d-container {
            position: relative;
            height: 800px;
            margin-bottom: 2rem;
        }
        
        .hero-3d-scene {
            width: 100%;
            height: 100%;
            perspective: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .floating-cube {
            width: 100px;
            height: 100px;
            position: absolute;
            transform-style: preserve-3d;
            animation: floatRotate 6s ease-in-out infinite;
        }
        
        .cube-face {
            position: absolute;
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border: 1px solid rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
        }
        
        .cube-face.front { transform: rotateY(0deg) translateZ(50px); }
        .cube-face.back { transform: rotateY(180deg) translateZ(50px); }
        .cube-face.right { transform: rotateY(90deg) translateZ(50px); }
        .cube-face.left { transform: rotateY(-90deg) translateZ(50px); }
        .cube-face.top { transform: rotateX(90deg) translateZ(50px); }
        .cube-face.bottom { transform: rotateX(-90deg) translateZ(50px); }
        
        .floating-cube:nth-child(1) {
            top: 10%;
            left: 20%;
            animation-delay: 0s;
        }
        
        .floating-cube:nth-child(2) {
            top: 60%;
            right: 15%;
            animation-delay: 2s;
            transform: scale(0.7);
        }
        
        .floating-cube:nth-child(3) {
            top: 30%;
            left: 70%;
            animation-delay: 4s;
            transform: scale(0.5);
        }
        
        @keyframes floatRotate {
            0%, 100% {
                transform: translateY(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            25% {
                transform: translateY(-20px) rotateX(90deg) rotateY(45deg) rotateZ(45deg);
            }
            50% {
                transform: translateY(0px) rotateX(180deg) rotateY(90deg) rotateZ(90deg);
            }
            75% {
                transform: translateY(20px) rotateX(270deg) rotateY(135deg) rotateZ(135deg);
            }
        }
        
        .company-hero {
            text-align: center;
            margin-bottom: 60px;
        }
        
/* Option 1: Smooth Fade-in with Slide Up */
        .hero-option-1 .company-hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff, #e0e0e0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            
            /* Animation */
            animation: fadeInSlideUp 1.2s ease-out forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        .hero-option-1 .company-hero p {
            font-size: 1.25rem;
            font-weight: 300;
            opacity: 0;
            max-width: 600px;
            margin: 0 auto;
            color: rgba(255,255,255,0.9);
            
            /* Animation with delay */
            animation: fadeInSlideUp 1.2s ease-out 0.3s forwards;
            transform: translateY(30px);
        }

        @keyframes fadeInSlideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .info-card {
            background: #ffffff;
            color: #000000;
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: none;
            box-shadow: 0 10px 30px rgba(255,255,255,0.1);
            transition: all 0.3s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .info-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, rgba(0,0,0,0.05), transparent);
            border-radius: 50%;
            transition: all 0.3s ease;
            transform: scale(0);
        }
        
        .info-card:hover::before {
            transform: scale(3);
        }
        
        .info-card:hover {
            transform: translateY(-5px) rotateX(2deg);
            box-shadow: 0 20px 40px rgba(255,255,255,0.15);
        }
        
        /* 3D Service Cards */
        .service-item {
            background: rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.4s ease;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .service-item::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 50%;
            transform: translate(-50%, -50%) translateZ(20px);
            transition: all 0.4s ease;
            z-index: 0;
        }
        
        .service-item:hover {
            background: rgba(255,255,255,0.12);
            transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
            box-shadow: 
                0 20px 40px rgba(255,255,255,0.1),
                0 0 0 1px rgba(255,255,255,0.2);
        }
        
        .service-item:hover::before {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
            transform: translate(-50%, -50%) translateZ(30px) rotateZ(180deg);
        }
        
        .service-item h4,
        .service-item p {
            position: relative;
            z-index: 2;
        }
        .info-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #000000;
            position: relative;
            z-index: 2;
        }
        
        .info-card p, .info-card li {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
            color: #333333;
            position: relative;
            z-index: 2;
        }
        
        .info-card ul {
            padding-left: 1.25rem;
            margin-bottom: 0;
            position: relative;
            z-index: 2;
        }
        
        .info-card li {
            margin-bottom: 0.5rem;
        }
        
        .services-grid {
            margin-top: 3rem;
        }
        
        /* 3D Icons for Services */
        .service-icon {
            width: 120px;
            height: 80px;
            margin: 0 auto 1rem auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all 0.4s ease;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 12px;
            overflow: hidden;
        }
        
        .service-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            transition: all 0.4s ease;
            transform: translateZ(10px);
        }
        
        .service-item:hover .service-icon {
            transform: rotateX(5deg) rotateY(5deg) scale(1.05);
        }
        
        .service-item:hover .service-icon img {
            transform: translateZ(15px) scale(1.1);
        }
        
        .icon-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.3), transparent);
            border-radius: 12px;
            transition: all 0.4s ease;
            z-index: 2;
        }
        
        .service-item:hover .icon-overlay {
            background: linear-gradient(135deg, rgba(0,0,0,0.1), transparent);
        }
        
        .stats-container {
            background: rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 2rem;
            margin: 3rem 5rem;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .stat-item {
            text-align: center;
            margin-bottom: 1rem;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #ffffff;
            display: block;
        }
        
        .stat-label {
            font-size: 0.9rem;
            font-weight: 400;
            opacity: 0.7;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        @media (max-width: 768px) {
            .company-hero h1 {
                font-size: 2.5rem;
            }
            
            .info-card {
                padding: 1.5rem;
            }
            
            .stat-number {
                font-size: 2rem;
            }
        } 
        
/* Hero Section - Break out of container constraints */
.hero-section {
    position: relative;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    margin-left: calc(-50vw + 50%); /* Center and break out of parent container */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    font-family: 'League Spartan', sans-serif;
}

/* Remove container constraints completely for hero section */
.hero-section .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Hero Video - Cover entire viewport */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Override any parent container constraints that might affect the hero */
.company-info-section .container {
    max-width: none;
    padding: 0;
    overflow: visible;
}

/* Alternative approach - if above doesn't work, use this instead */
.hero-section-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

.hero-section-fullscreen .hero-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}     

 .container {
            position: relative;
            z-index: 10;
        }

        /* Filter Buttons */
        .btn-LastestProduct {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: #495057;
            transition: var(--transition-smooth);
            border-radius: 50px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-LastestProduct:hover {
            background: rgba(255, 255, 255, 1);
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
        }

        .btn-check:checked + .btn-LastestProduct {
            background: var(--gradient-bg);
            border-color: transparent;
            color: white;
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
        }

        /* Slider Container */
        .cards-slider-container {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            background: #000000;
            backdrop-filter: blur(20px);
            padding: 2rem;
            margin-top: 2rem;
            margin-left: -15px;
            margin-right: -15px;
            width: calc(100% + 30px);
        }

        .cards-slider {
            display: flex;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            gap: 2rem;
        }

        .card-slide {
            min-width: calc(33.333% - 3.33rem);
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            .card-slide {
                min-width: calc(50% - 2.5rem);
            }
        }

        @media (max-width: 576px) {
            .card-slide {
                min-width: calc(100% - 1rem);
                max-width: 320px;
                margin: 0 auto;
            }
        }

        @media (max-width: 480px) {
            .card-slide {
                min-width: calc(100% - 0.5rem);
                max-width: 280px;
            }
        }

        /* Product Cards */
        .product-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            transition: var(--transition-smooth);
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-bg);
            transform: scaleX(0);
            transition: transform 0.4s ease;
            transform-origin: left;
        }

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

        .product-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: var(--card-hover-shadow);
            border-color: rgba(0, 123, 255, 0.3);
        }

        .product-card:hover .product-icon {
            transform: scale(1.2) rotate(10deg);
            color: var(--primary-color);
        }

        .product-card:hover .product-title {
            color: var(--primary-color);
        }

        .product-card:hover .btn-product {
            transform: scale(1.1);
            background: var(--gradient-bg);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
        }

        .product-icon {
            font-size: 3.5rem;
            background: var(--gradient-bg);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1.5rem;
            transition: var(--transition-smooth);
            /* Fallback for browsers that don't support background-clip */
            color: var(--primary-color);
        }

        /* Ensure icons are visible */
        .product-icon i {
            display: inline-block;
            font-style: normal;
        }

        /* Fallback if Font Awesome doesn't load */
        .product-icon i:before {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", FontAwesome, sans-serif;
            font-weight: 900;
        }

        .product-title {
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 1rem;
            transition: var(--transition-smooth);
            font-size: 1.25rem;
        }

        .product-description {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.6;
            opacity: 0.9;
        }

        .btn-product {
            background: linear-gradient(135deg, #840984 0%, #BD0595 50%, #BD052D 100%);
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            transition: var(--transition-smooth);
            font-weight: 600;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .btn-product::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: left 0.5s;
        }

        .btn-product:hover::before {
            left: 100%;
        }

        /* Navigation Buttons */
        .slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-smooth);
            z-index: 100;
            color: var(--primary-color);
            font-size: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .slider-nav:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 8px 30px rgba(0, 123, 255, 0.3);
        }

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

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

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

        .parallax-element {
            position: absolute;
            background: var(--gradient-bg);
            border-radius: 50%;
            opacity: 0.1;
            animation: float 20s ease-in-out infinite;
        }

        .parallax-element:nth-child(1) {
            width: 100px;
            height: 100px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .parallax-element:nth-child(2) {
            width: 150px;
            height: 150px;
            top: 60%;
            right: 10%;
            animation-delay: -5s;
        }

        .parallax-element:nth-child(3) {
            width: 80px;
            height: 80px;
            bottom: 20%;
            left: 20%;
            animation-delay: -10s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-30px) rotate(120deg); }
            66% { transform: translateY(-60px) rotate(240deg); }
        }

        /* Slider Indicators */
        .slider-indicators {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: var(--transition-smooth);
        }

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

        .indicator:hover {
            background: var(--primary-hover);
            transform: scale(1.1);
        }

        /* Loading Animation */
        .card-slide {
            opacity: 0;
            animation: slideIn 0.8s ease-out forwards;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .category-banner {
            background: linear-gradient(135deg, #1F0206 0%, #660B23 100%);
            border-radius: 20px;
            padding: 30px;
            margin: 40px 0 30px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .category-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: shimmer 3s infinite;
        }
        
        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        .category-banner h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .category-banner p {
            font-size: 1.1rem;
            margin: 10px 0 0 0;
            opacity: 0.9;
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .card-product {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-product:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }        

.setup {
            position: block;
            margin: auto;
            width: 50%;
        }




/* PC - DETAILS */

.main-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.hero-content-container {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;

    
    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/1200x/5b/6d/40/5b6d40fc0b5f754168a8c7f95dba3485.jpg'); 
    background-size: cover;
    background-position: center;
}

.text-overlay {
    position: absolute;
    bottom: 50px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.text-overlay h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.see-more-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 30px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-more-button:hover {
    background-color: #7B54B1;
}

.why-choose-us-section {
    font-family: "Lexend";
    display: flex;
    align-items: center; 
    max-width: 1300px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
    .why-choose-us-section.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .why-choose-us-section.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but the 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }


/* Left Column - Visual Container */
.visual-container {
    flex: 1;
    min-height: 500px;
    background-image: url("../images/products/robot-pc-case.png"); 
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .visual-container:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }

/* Right Column - Content Container */
.content-container {
    flex: 1;
    padding-left: 70px;
}

/* Title Styling */
.title-line-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;

}

/* Feature List Styling */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.feature-list li:hover{
    transform: translateY(-5px) scale(1.05);
}




.feature-icon {
    font-size: 20px; 
    margin-right: 15px;
    color: white; 
    transform: rotate(-15deg); 
}


.benefits-layout {
    font-family: "lexend";
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 60px 20px;
    margin: auto;
}


.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}


.card-description {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.testimonials-section {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto; 
    grid-template-areas: 
        "content visual"
        "button button"; 
    
    gap: 10px; 
    max-width: 1000px; 
    margin: 70px auto; 
    padding: 0 10px; 
    align-items: start;
}

    .testimonials-section.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .testimonials-section.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }



.testimonial-content {
    grid-area: content;
    padding-right: 20px; 
}

.testimonial-heading-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.quote {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.star-rating .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    
  
    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .star-rating :hover {
        transform: translateY(-5px) scale(1.05);
    }

@keyframes rgbGoldPulse {
    0% {
        text-shadow: 
            0 0 3px rgba(255, 215, 0, 0.7), 
            0 0 3px rgba(255, 165, 0, 0.5);
    }
    50% {
        /* This is the peak, adding the subtle RGB glow */
        text-shadow: 
            0 0 3px rgba(255, 223, 0, 0.8), 
            0 0 3px rgba(255, 175, 0, 0.6),  
            0 0 3px rgba(255, 0, 0, 0.1), 
            0 0 3px rgba(0, 255, 0, 0.1), 
            0 0 3px rgba(0, 0, 255, 0.1);    
    }
    100% {
        text-shadow: 
            0 0 3px rgba(255, 220, 0, 0.75),
            0 0 3px rgba(255, 170, 0, 0.55);
    }
}

/* Product Visual (Right Column) */
.product-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(../images/products/gaming-pc.png); /* REPLACE with your actual image path or URL */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }


/* Button Container (Spans both columns) */
.button-container {
    grid-area: button;
    display: flex;
    justify-content: center; 
    margin-top: 40px; 
}

/* See Reviews Button Styling */
.see-reviews-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-reviews-button:hover {
    background-color: #9370DB;
}

.main-promo-bot {
    font-family: "Space Grotesk";
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.hero-content-container-bot {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/736x/f2/04/2c/f2042ce98e8fccbb9383535424e608b4.jpg');      
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.text-overlay-bot {
    position: absolute;
    bottom: 30px;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}

.text-overlay-bot h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

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



@media (min-width: 1400px) {
    .main-promo {
        max-width: 1500px;
    }

    .why-choose-us-section {
        max-width: 1500px;
    }

    .title-line-1 {
        font-size: 2rem; 
    }
    
    .benefits-layout {
        max-width: 1500px;
        gap: 50px;
    }

    .testimonials-section {
        max-width: 1400px;
    }
}

@media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .why-choose-us-section {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-line-1 {
        font-size: 2.8rem; 
    }

    .benefits-layout {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 80px auto;
    }

}

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 30px 40px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 40px;
    }

    .why-choose-us-section {
        padding: 0 30px;
        margin: 60px auto;
    }

    .content-container {
        padding-left: 30px;
    }

    .visual-container {
        min-height: 400px;
    }

    .testimonial-heading-1 {
        font-size: 42px;
    }

    .quote {
        font-size: 30px;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    

    .product-visual {
        min-height: 400px;
    }
}

/* Mobile (up to 768px) */
@media (max-width: 768px) {
    .main-promo {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
        margin-top: -150px;
    }

    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 20px 25px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 28px;
    }


    .why-choose-us-section {
        flex-direction: column;
        padding: 0 20px;
        margin: 40px auto;
        text-align: center;
    }

    .visual-container {
        width: 100%;
        min-height: 350px;
        margin-left: 0;
        margin-bottom: 30px;
        border-width: 8px;
    }

    .content-container {
        padding-left: 0;
        width: 100%;
    }

    .feature-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .feature-list li {
        font-size: 24px;
        line-height: 1.8;
        justify-content: center;
    }

    .feature-icon {
        font-size: 18px;
        margin-right: 10px;
    }

    .benefits-layout {
        font-size: 2rem;
        grid-template-columns: 1fr; /* Stack items vertically */

    }

    .benefit-card {
        min-width: 100%;
    }


    .card-description {
        font-size: 1.5rem;
    }

    .testimonials-section {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "content"
            "visual"
            "button";
        margin: 40px auto;
        padding: 20px;
    }

    .testimonial-content {
        padding-right: 0;
        text-align: center;
    }

    .testimonial-heading-1 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .quote {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .star-rating {
        text-align: center;
        font-size: 20px;
        margin-top: 40px;
    }

    .product-visual {
        min-height: 400px;
        border-width: 8px;
    }

    .button-container {
        margin-top: 20px;
    }

    .main-promo-bot {
        font-size: 2rem;
    }

    .hero-content-container-bot {
        max-width: 768px; /* Ensure it doesn't overflow */
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    .hero-content-container,
    .hero-content-container-bot {
        height: 500px;
        max-width: 100%;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 24px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 15px 20px;
    }


    .title-line-1 {
        font-size: 35px;
    }

    .feature-list li {
        font-size: 20px;
    }

    .testimonials-section {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }
    

    .testimonial-heading-1 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .quote {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .star-rating .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .product-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .testimonial-heading-1 {
        font-size: 24px;
    }

    .quote {
        font-size: 16px;
    }

    .product-visual {
        min-height: 250px;
    }
}



/* custom.html design by PRINCESS*/

.cspcb {
    background-color: #2f8d46;
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-repeat: repeat;
    -webkit-text-fill-color: transparent;
    margin-top: 20px;
    font-size: 80px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 1000;
    -webkit-font-smoothing: antialiased;
    animation: 3s anim-lineUp linear;
}
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-cspcb {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    text-align: center;
    color: white;
    max-width: 1000px;
    margin: 0 auto  3rem;
    line-height: 1.6;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* llllllll */

.projects-images{
    margin: 50px;
    display: inline-block;
}

.projects-img-card1 {
    --g: 4px;     /* the gap */
    --b: 12px;    /* border thickness*/
    --c: indigo; /* the color */
    max-width: 120%;
    height: 20vh;
    margin-block: 4rem;
    display: inline-block;
    align-content: center;
    
    padding: calc(var(--g) + var(--b));
    --_c: #0000 0 25%, var(--c) 0 50%;
    --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
    --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
    background:
    var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
    var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
    background-size: 200% var(--b),var(--b) 200%;
    cursor: pointer;
    filter: grayscale(50%);
    transition: .3s;
}

.projects-img-card1{
    row-gap: 20px; /* Gap between rows (vertical space) */
    column-gap: 10px; /* Optional: Gap between columns (horizontal space) */
}
.projects-img-card1:hover {
  --_p: 75%;
  filter: grayscale(0%);
  --c: #AC3838; /* new color */
}

.projects-img {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    display: block;
    align-content: center;
    width: 100%;

}

.projects-image-title{
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    margin-top: 15px;
}

/*================ CCTV DETAILS ==================*/

.cctv-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; 
    max-width: 2000px; 
    margin: 0px auto 0 auto;
}

.cctv-content-container {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(50, 0, 0, 0.9) 0%, rgba(150, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 100%),
    url('/images/services/cctv.jpg'); 
    background-size: cover;
    background-position: center;
    animation: fadeInUp 1.1s ease-out forwards;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.cctv-text-overlay {
    font-family: "Space Grotesk";
    position: absolute;
    bottom: 30px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
    animation: fadeInUp 0.7s ease-out forwards;
}

.cctv-text-overlay h1 {
    color: white;
    font-size: 64px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    
}

.security-section {
    padding: 20px 20px; 
    text-align: center; 
    width: 100%; 
    
}

.animate-on-scroll .security-section {
    opacity: 0;
    transform: translateY(20px);
}

.animate-on-scroll.is-visible .security-section {
    opacity: 1;
    transform: translateY(0);
}

.section-title {
    font-family: "Lexend"; 
    font-size: 58px; 
    font-weight: 500; 
    margin-bottom: 10px; 
    margin-top: 20px;
}

.section-text {
    font-family:"Space Grotesk"; 
    color: white;
    font-size: 28px;
    line-height: 1.6;
    max-width: 1300px; 
    margin: 10px auto; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 270px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 12px;
    }

    .cctv-text-overlay h1 {
        font-size: 21px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 22px;
    }

    .section-text {
        font-size: 12px;
        max-width: 100%;
        padding: 0 6px;
    }

    .security-section {
        padding: 10px 8px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 285px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 13px 14px;
    }

    .cctv-text-overlay h1 {
        font-size: 23px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 23px;
    }

    .section-text {
        font-size: 12.5px;
        max-width: 100%;
        padding: 0 6px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 300px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 14px 15px;
    }

    .cctv-text-overlay h1 {
        font-size: 25px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 24px;
    }

    .section-text {
        font-size: 13px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 310px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 15px 16px;
    }

    .cctv-text-overlay h1 {
        font-size: 26px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 25px;
    }

    .section-text {
        font-size: 13.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 400px) and (max-width: 412px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 325px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 16px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 28px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 26px;
    }

    .section-text {
        font-size: 14px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 330px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 17px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 29px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 27px;
    }

    .section-text {
        font-size: 14.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 340px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 18px 20px;
    }

    .cctv-text-overlay h1 {
        font-size: 30px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 28px;
    }

    .section-text {
        font-size: 15px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 380px;
        margin-bottom: 25px;
        margin-top: -125px;
    }

    .cctv-text-overlay {
        padding: 20px 25px;
    }

    .cctv-text-overlay h1 {
        font-size: 34px;
    }

    .section-title {
        font-size: 32px;
    }

    .section-text {
        font-size: 17px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 450px;
        margin-bottom: 30px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 25px 30px;
    }

    .cctv-text-overlay h1 {
        font-size: 42px;
    }

    .section-title {
        font-size: 38px;
    }

    .section-text {
        font-size: 20px;
        max-width: 100%;
        padding: 0 15px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 470px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 24px 34px;
    }

    .cctv-text-overlay h1 {
        font-size: 44px;
    }

    .section-title {
        font-size: 39px;
    }

    .section-text {
        font-size: 20.5px;
        max-width: 720px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 490px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 26px 36px;
    }

    .cctv-text-overlay h1 {
        font-size: 46px;
    }

    .section-title {
        font-size: 40px;
    }

    .section-text {
        font-size: 21px;
        max-width: 750px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 510px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 28px 38px;
    }

    .cctv-text-overlay h1 {
        font-size: 48px;
    }

    .section-title {
        font-size: 42px;
    }

    .section-text {
        font-size: 22px;
        max-width: 800px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 530px;
    }

    .cctv-text-overlay {
        padding: 30px 40px;
    }

    .cctv-text-overlay h1 {
        font-size: 50px;
    }

    .section-title {
        font-size: 44px;
    }

    .section-text {
        font-size: 23px;
        max-width: 850px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 550px;
        margin-top: -60px;
    }

    .cctv-text-overlay {
        padding: 30px 45px;
    }

    .cctv-text-overlay h1 {
        font-size: 52px;
    }

    .section-title {
        font-size: 46px;
    }

    .section-text {
        font-size: 24px;
        max-width: 900px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 600px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 35px 50px;
    }

    .cctv-text-overlay h1 {
        font-size: 60px;
    }

    .section-title {
        font-size: 54px;
    }

    .section-text {
        font-size: 26px;
        max-width: 1200px;
    }
}

/* CCTV VIDEO */

.cctv-video {
    position: relative;
    width: 100%; 
    max-width: 2000px; 
    height: 800px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: #000;
    padding-bottom: 30px;
    box-sizing: border-box;
}


#bgVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%); 
    object-fit: cover;
}


.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}


.hero-content-vid {
    position: relative;
    z-index: 3;
    margin-bottom: 0; 
}

.btn-find-out-more {
    font-family: "Lexend"; 
    display: inline-block;
    padding: 5px 40px;
    text-decoration: none;
    font-size: 20px;
    font-weight: light;
    color: #ffffff;
    border-radius: 30px;
    width: 298pxpx;
    height: 45pxpx;
    margin-bottom: 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: linear-gradient(88.78deg, #BA1022 0.07%, #EC0120 50%, #FD6A59 99.93%);
    border: none;
    cursor: pointer;
    animation: buttonEntrancee 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulsee 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes buttonEntrancee {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulsee {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}

.btn-find-out-more:hover {
    background: linear-gradient(to right, #e00000 0%, #222222 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.project-overview {
    margin-top: 60px;
    padding: 20px 20px;
    text-align: center;
}

.overview {
    font-family:"Space Grotesk";
    color: white;
    font-weight: 500;
    font-size: 64px;
    line-height: 1.6;
    margin: 0 auto;
}


@media (max-width: 1200px) {
    .cctv-video {
        /* Reduce height for a more compact presentation */
        height: 600px;
        /* Adjust margin */
        margin: 30px auto;
        /* Reduce bottom padding */
        padding-bottom: 20px;
    }

    .overview {
        /* Decrease the large font size for tablets */
        font-size: 48px;
    }
}


@media (max-width: 768px) {
    .cctv-video {
        /* Further reduce height for mobile viewports */
        height: 450px;
        margin: 20px auto;
        width: auto; /* Ensure no horizontal scroll is caused by margin */
    }

    .overview {
        /* Major decrease in font size for mobile */
        font-size: 36px;
        line-height: 1.4;
    }

    .btn-find-out-more {
        /* Adjust button dimensions and font size */
        font-size: 18px;
        padding: 8px 30px;
        /* Remove fixed width/height properties and rely on padding/content */
        width: auto;
        height: auto;
        margin-bottom: 10px;
    }

    .project-overview {
        /* Reduce padding */
        padding: 10px 10px;
    }
}


@media (max-width: 480px) {
    .cctv-video {
        width: auto;
        height: 350px;
        padding-bottom: 10px;
    }

    .overview {
        /* Smallest font size for main header text */
        font-size: 20px;
    }

    .btn-find-out-more {
        font-size: 16px;
        padding: 6px 20px;
        border-radius: 20px;
    }
}

/* CCTV DETAILS CARDS*/


/* NEW: Keyframe animation for fade-in and subtle rise */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(90px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NEW: Initial hidden state for the scroll animation targets */
.surveillance-carousel-container.hidden,
.navigation-dots-container.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: none; /* Temporarily disable transition for initial state */
}

/* NEW: Class to apply animation after scroll trigger */
.surveillance-carousel-container.scroll-animation,
.navigation-dots-container.scroll-animation {
    animation: fadeInUp 1.5s ease-out forwards; 
    /* Optional: Add a slight delay for the dots container for a staggered effect */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Restore any existing transition */
}

/* Add staggered effect for the dots container */
.navigation-dots-container.scroll-animation {
    animation-delay: 0.3s;
}

.surveillance-carousel-container {
    margin: 0 auto;
    width: 100%;
    padding: 50px 0;
    background-color: #000;
    overflow: hidden;
    position: relative;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s; 
}

.overview {
    /* ... existing styles ... */
    /* ADDED: Initial state for 'overview' text (optional, but good for consistent animation) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 0.8s ease-out;
}

/* NEW: Class to animate 'overview' text */
.overview.scroll-animation {
    opacity: 1;
    transform: translateY(0);
}


.carousel-viewport-wrapper {
    width: 100%;
    height: 600px;
    position: relative;
    perspective: 2000px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    user-select: none;
}

.carousel-viewport-wrapper.dragging {
    cursor: grabbing;
}

.rotating-carousel-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.surveillance-card-element {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    height: 560px;
    margin-left: -175px;
    margin-top: -280px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #222;
    cursor: pointer;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    user-select: none;
}

.card-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.gradient-info-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.location-title-text {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.description-snippet-text {
    font-family: "Lexend";
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.external-action-icon {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    pointer-events: all;
}

.external-action-icon:hover {
    opacity: 1;
}

.navigation-dots-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s;
}

.position-indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.5;
}

.position-indicator-dot.current-active {
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    opacity: 1;
}

/* Responsive breakpoints */
@media (max-width: 1400px) {
    .carousel-viewport-wrapper {
        height: 550px;
        perspective: 1800px;
    }
}

@media (max-width: 1200px) {
    .carousel-viewport-wrapper {
        height: 520px;
        perspective: 1600px;
    }

    .surveillance-card-element {
        width: 320px;
        height: 520px;
        margin-left: -160px;
        margin-top: -260px;
    }
}

@media (max-width: 1024px) {
    .carousel-viewport-wrapper {
        height: 500px;
        perspective: 1500px;
    }

    .surveillance-card-element {
        width: 300px;
        height: 500px;
        margin-left: -150px;
        margin-top: -250px;
    }

    .gradient-info-panel {
        padding: 18px;
        min-height: 150px;
    }

    .location-title-text {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .surveillance-carousel-container {
        padding: 60px 0;
    }

    .carousel-viewport-wrapper {
        height: 450px;
        perspective: 1200px;
    }

    .surveillance-card-element {
        width: 260px;
        height: 420px;
        margin-left: -130px;
        margin-top: -210px;
    }

    .gradient-info-panel {
        padding: 15px;
        min-height: 130px;
    }

    .location-title-text {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .description-snippet-text {
        font-size: 9px;
        margin-bottom: 8px;
    }

    .navigation-dots-container {
        margin-top: 40px;
        gap: 15px;
    }

    .position-indicator-dot {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 640px) {
    .carousel-viewport-wrapper {
        height: 420px;
        perspective: 1100px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }
}

@media (max-width: 480px) {
    .surveillance-carousel-container {
        padding: 40px 0;
    }

    .carousel-viewport-wrapper {
        height: 380px;
        perspective: 1000px;
    }

    .surveillance-card-element {
        width: 220px;
        height: 350px;
        margin-left: -110px;
        margin-top: -175px;
    }

    .gradient-info-panel {
        padding: 12px;
        min-height: 110px;
    }

    .location-title-text {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .description-snippet-text {
        font-size: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 6px;
    }

    .external-action-icon svg {
        width: 20px;
        height: 20px;
    }

    .navigation-dots-container {
        margin-top: 30px;
        gap: 12px;
    }

    .position-indicator-dot {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 375px) {
    .carousel-viewport-wrapper {
        height: 350px;
    }

    .surveillance-card-element {
        width: 200px;
        height: 320px;
        margin-left: -100px;
        margin-top: -160px;
    }

    .location-title-text {
        font-size: 12px;
    }

    .description-snippet-text {
        font-size: 7.5px;
    }

    .external-action-icon {
        display: none;
    }
}

@media (max-width: 320px) {
    .carousel-viewport-wrapper {
        height: 320px;
    }

    .surveillance-card-element {
        width: 180px;
        height: 290px;
        margin-left: -90px;
        margin-top: -145px;
    }

    .gradient-info-panel {
        padding: 10px;
        min-height: 90px;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .surveillance-carousel-container {
        padding: 30px 0;
    }

    .carousel-viewport-wrapper {
        height: 400px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }

    .navigation-dots-container {
        margin-top: 25px;
    }
}


.item-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.slider-item:not(.active) .item-content-overlay {
    opacity: 0.96;
}

.item-heading {
    font-family: "Space Grotesk";
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.item-text {
    font-family: "Space Grotesk";
    font-size: 10px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.item-external-link {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.item-external-link:hover {
    opacity: 1;
}

.slider-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
}

.indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.indicator-dot.active {
    background-color:linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    border-color: #ff0000;
}

@media (max-width: 1024px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-item:not(.active) {
        width: 200px;
        height: 350px;
        margin: 0 10px;
    }
    .slider-item.active {
        justify-content: center;
        width: 300px;
        height: 500px;
        margin: 0 20px;
    }
    .item-heading {
        font-size: 1.1em;
    }
    .item-text {
        font-size: 0.85em;
    }
    .slider-track {
        padding: 0 5%;
    }
}

@media (max-width: 768px) {
    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 150px;
        height: 280px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.8);
    }
    .slider-item.active {
        width: 250px;
        height: 400px;
        margin: 0 10px;
    }
    .item-content-overlay {
        padding: 15px;
        min-height: 120px;
    }
    .item-heading {
        font-size: 1em;
    }
    .item-text {
        font-size: 0.8em;
    }
    .slider-track {
        padding: 0 2%;
    }
}

@media (max-width: 480px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-track {
        justify-content: flex-start;
        padding: 0 20px;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 100px;
        height: 180px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.7);
    }
    .slider-item.active {
        width: 280px;
        height: 450px;
        margin: 0 10px;
    }
    .item-heading {
        font-size: 0.9em;
    }
    .item-text {
        font-size: 0.75em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .item-external-link {
        display: none;
    }
}

/* CCTV FLASHCARDS */

.ui-main-panel {
    margin: 80px auto;
    width: 100%;     
    width: 1700px;
    height: 600px;
    padding: 20px;
    background: linear-gradient(180deg, #D9D9D9 0%, #737373 100%);
    border-radius: 50px;
    border: 5px solid;
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    overflow: hidden; 
}

.panel-text-module {
    padding: 20px 0 20px 100px;
}

.panel-text-module p {
    font-family: "Space Grotesk";
    color: #ffffff;
    font-size: 32px;
    line-height: 1.6;
    width: 950px;

}

.surveillance-slider-zone {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-stack-viewport {
    position: relative;
    width: 50px; 
    height: 380px;
}

.security-image-card {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 280px;
    height: 380px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    cursor: pointer; 
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); 

    /* Initial hidden/back position for all cards */
    transform: translate(-50%, -50%) translate3d(0, 0, -200px) rotateY(0deg) scale(0.8);
    opacity: 0;
    z-index: 0;
}

.security-image-card[data-index="0"] { background-image: url('/images/services/PASIG-THREELIGHTS-2.jpg'); } 
.security-image-card[data-index="1"] { background-image: url('/images/services/BENJAMIN-CAMERINO-2.jpg'); }
.security-image-card[data-index="2"] { background-image: url('/images/services/BJMP-Teresa-\ District-JAIL-2.jpg'); }
.security-image-card[data-index="3"] { background-image: url('/images/services/RON-GONZALES-2.jpg'); }


.security-image-card.card--active {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
    z-index: 10;
    cursor: pointer;
}


.security-image-card.card--stacked-1 {
    transform: translate(-50%, -50%) translate3d(-10px, 10px, -20px) rotate(-3deg);
    opacity: 1;
    z-index: 9;
    filter: brightness(0.8);
    cursor: default;
}

.security-image-card.card--stacked-2 {
    transform: translate(-50%, -50%) translate3d(-20px, 20px, -40px) rotate(-6deg);
    opacity: 1;
    z-index: 8;
    filter: brightness(0.7);
    cursor: default;
}

.security-image-card.card--stacked-3 {
    transform: translate(-50%, -50%) translate3d(-30px, 30px, -60px) rotate(-9deg);
    opacity: 1;
    z-index: 7;
    filter: brightness(0.6);
    cursor: default;
}


.security-image-card.card--slide-out {
    transform: translate(-50%, -50%) translate3d(100px, 0, 0) rotate(5deg) scale(0.9);
    opacity: 0;
    z-index: 11; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .ui-main-panel {
        width: 95%;
        height: 550px;
        margin: 15px auto;
        padding: 8px;
        border-radius: 20px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 8px;
        text-align: center;
        margin-bottom: -40px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 280px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 150px;
        height: 200px;
    }

    .security-image-card {
        width: 160px;
        height: 230px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .ui-main-panel {
        width: 95%;
        min-height: 580px;
        margin: 16px auto;
        padding: 9px;
        border-radius: 22px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 290px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 220px;
        height: 260px;
    }

    .security-image-card {
        width: 170px;
        height: 240px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .ui-main-panel {
        width: 95%;
        min-height: 620px;
        margin: 20px auto;
        padding: 9px;
        border-radius: 24px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -50px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 270px;
        width: 100%;
        margin-left: 20px;
    }

    .card-stack-viewport {
        width: 230px;
        height: 270px;
    }

    .security-image-card {
        width: 180px;
        height: 230px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 18px auto;
        padding: 10px;
        border-radius: 25px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 16.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 310px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 240px;
        height: 280px;
    }

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

@media (min-width: 400px) and (max-width: 412px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 26px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 320px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 250px;
        height: 290px;
    }

    .security-image-card {
        width: 200px;
        height: 270px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 27px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 17.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 325px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 255px;
        height: 295px;
    }

    .security-image-card {
        width: 205px;
        height: 275px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 20px auto;
        padding: 10px;
        border-radius: 28px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 18px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 330px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 260px;
        height: 300px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 22px auto;
        padding: 12px;
        border-radius: 30px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 12px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 19px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 350px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 280px;
        height: 320px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 28px auto;
        padding: 15px;
        border-radius: 38px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 18px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 23px;
        line-height: 1.55;
        width: 100%;
        margin-bottom: -20px;
    }

    .surveillance-slider-zone {
        height: 380px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 290px;
        height: 340px;
    }

    .security-image-card {
        width: 235px;
        height: 320px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 30px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 390px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 295px;
        height: 345px;
    }

    .security-image-card {
        width: 238px;
        height: 325px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .ui-main-panel {
        width: 95%;
        min-height: 790px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 20px 35px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 395px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 298px;
        height: 348px;
    }

    .security-image-card {
        width: 240px;
        height: 328px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .ui-main-panel {
        width: 95%;
        min-height: 850px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 40px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 400px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 300px;
        height: 350px;
    }

    .security-image-card {
        width: 290px;
        height: 380px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 820px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .panel-text-module {
        padding: 20px 45px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 410px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 305px;
        height: 355px;
    }

    .security-image-card {
        width: 245px;
        height: 335px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 850px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 50px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 415px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 308px;
        height: 358px;
    }

    .security-image-card {
        width: 298px;
        height: 388px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .ui-main-panel {
        width: 95%;
        height: 580px;
        margin: 60px auto;
        padding: 18px;
        border-radius: 45px;
        border-width: 5px;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .panel-text-module {
        padding: 20px 0 20px 70px;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: auto;
        width: 100%;
    }

    .card-stack-viewport {
        width: 350px;
        height: 400px;
    }

    .security-image-card {
        margin-top: 10px;
        margin-left: 10px;
        width: 290px;
        height: 390px;
    }

}

/* ====================== End ======================= */

/* PC BUILD DETAILS */

.pc-project-container {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #000; 
    color: #fff;
    overflow-x: hidden;
    box-sizing: border-box;
}

.top-section {
    position: relative;
    width: 100%;
    height: 650px;
    margin: 0;
    padding: 0;
    background-color: #222; 
    background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
    box-sizing: border-box;
    animation: fadeIn 1s ease-out, subtleZoom 20s ease-in-out infinite alternate;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes subtleZoom {
    from {
        background-size: 100%;
    }
    to {
        background-size: 105%;
    }
}

.bottom-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
    background-color: #000; 
    text-align: center;
    box-sizing: border-box;
    animation: fadeInUp 1s ease-out 0.3s both;
}

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

.pc-cases-row {
    position: relative;
    width: 100%;
    max-width: 2500px;
    margin: clamp(-100px, -15vh, -200px) auto 0;
    display: flex;
    justify-content: center; 
    align-items: flex-end; 
    z-index: 10;
    padding: 0 clamp(15px, 3vw, 40px);
    box-sizing: border-box;
    animation: slideUp 1.2s ease-out 0.5s both;
}

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

.pc-case-image {
    width: 100%; 
    height: auto;
    max-width: 100%;
    min-height: clamp(150px, 25vh, 300px);
    max-height: clamp(250px, 40vh, 520px);
    object-fit: contain;
    object-position: center bottom;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.pc-case-image:hover {
    transform: scale(1.05) translateY(-10px);
    filter: brightness(1.1);
}

.caption {
    margin: clamp(20px, 3vh, 50px) 0 0;
    padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
    z-index: 20;
    box-sizing: border-box;
    animation: fadeIn 1s ease-out 0.8s both;
}

.caption p {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(16px, 3.5vw, 32px);
    font-weight: 400;
    margin-top: 20px;
    padding: 0;
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    line-height: 1.4;
}

.sr-title {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto 50px;
    padding: 0 clamp(15px, 3vw, 30px);
    box-sizing: border-box;
}

.member-shop h1 {
    text-align: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 7vw, 64px);
    margin: clamp(20px, 4vh, 40px) 0;
    padding: 0 clamp(15px, 3vw, 30px);
    line-height: 1.2;
    box-sizing: border-box;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Universal box-sizing */
* {
    box-sizing: border-box;
}

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
    .top-section {
        height: clamp(250px, 35vh, 300px);
        background-position: center;
        box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        animation: subtlePulse 8s ease-in-out infinite;
    }
    
    .pc-cases-row {
        margin-top: clamp(-150px, -15vh, -100px);
        padding: 0 10px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 500px;
        animation: floatIn 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(30px);
    }
    
    .pc-case-image:nth-child(1) {
        animation-delay: 0.2s;
    }
    
    .pc-case-image:nth-child(2) {
        animation-delay: 0.4s;
    }
    
    .pc-case-image:nth-child(3) {
        animation-delay: 0.6s;
    }
    
    .bottom-section {
        padding: 15px 10px;
        animation: fadeInUp 1s ease-out 0.8s forwards;
        opacity: 0;
    }
    
    .caption {
        margin-top: clamp(15px, 2vh, 30px);
        padding: 10px 15px;
        animation: slideInLeft 0.6s ease-out 1.2s forwards;
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .member-shop h1 {
        margin: 15px 0;
        padding: 0 10px;
        animation: fadeInScale 0.7s ease-out 0.3s forwards;
        opacity: 0;
        transform: scale(0.9);
    }
    
    /* Keyframe animations */
    @keyframes floatIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInLeft {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes fadeInScale {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes subtlePulse {
        0%, 100% {
            box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        }
        50% {
            box-shadow: inset 50px 50px 120px rgba(100, 0, 150, 0.5);
        }
    }
}
/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
    .top-section {
        height: clamp(300px, 45vh, 500px);
        background-position: top center;
        box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-90px, -14vh, -130px);
        padding: 0 15px;
    }
    
    .pc-case-image {
        min-height: 150px;
        max-height: 250px;
    }
    
    .bottom-section {
        padding: 20px 15px;
    }
    
    .caption {
        margin-top: clamp(18px, 2.5vh, 35px);
        padding: 12px 20px;
    }
    
    .member-shop h1 {
        margin: 20px 0;
        padding: 0 15px;
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    .top-section {
        height: clamp(400px, 55vh, 650px);
        box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-130px, -18vh, -180px);
        padding: 0 20px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 350px;
    }
    
    .bottom-section {
        padding: 25px 20px;
    }
    
    .caption {
        margin-top: clamp(25px, 3vh, 40px);
        padding: 15px 25px;
    }
    
    .member-shop h1 {
        margin: 25px 0;
        padding: 0 20px;
    }
}

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .top-section {
        height: clamp(500px, 65vh, 750px);
        box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-180px, -25vh, -250px);
        padding: 0 30px;
    }
    
    .pc-case-image {
        min-height: 280px;
        max-height: 450px;
    }
    
    .bottom-section {
        padding: 30px 25px;
    }
    
    .caption {
        margin-top: clamp(30px, 3.5vh, 45px);
        padding: 18px 30px;
    }
    
    .member-shop h1 {
        margin: 30px 0;
        padding: 0 25px;
    }
}

/* Extra large devices (large desktops) */
@media (min-width: 1440px) {
    .top-section {
        height: clamp(600px, 70vh, 800px);
        box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-220px, -30vh, -300px);
        padding: 0 40px;
    }
    
    .pc-case-image {
        min-height: 350px;
        max-height: 520px;
    }
    
    .bottom-section {
        padding: 35px 30px;
    }
    
    .caption {
        margin-top: clamp(35px, 4vh, 50px);
        padding: 20px 35px;
    }
    
    .member-shop h1 {
        margin: 35px 0;
        padding: 0 30px;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .pc-case-image {
        max-height: 600px;
    }
    
    .bottom-section {
        padding: 40px 40px;
    }
    
    .caption {
        padding: 25px 40px;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    .top-section {
        height: 60vh;
    }
    
    .pc-cases-row {
        margin-top: -20vh;
        padding: 0 clamp(10px, 2vw, 20px);
    }
    
    .pc-case-image {
        max-height: 35vh;
        min-height: 25vh;
    }
    
    .bottom-section {
        padding: 15px clamp(10px, 2vw, 20px);
    }
    
    .caption {
        margin-top: 15px;
        padding: 10px 15px;
    }
}

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
    .top-section {
        height: 50vh;
    }
    
    .pc-cases-row {
        margin-top: -15vh;
        padding: 0 10px;
    }
    
    .pc-case-image {
        max-height: 30vh;
        min-height: 20vh;
    }
    
    .bottom-section {
        padding: 10px 15px;
    }
    
    .caption {
        margin-top: 10px;
        padding: 8px 15px;
    }
    
    .member-shop h1 {
        margin: 10px 0;
    }
}

/* OVERVIEW */


.main-wrapper {
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            background-color: #000; 
            color: #fff;
            overflow-x: hidden;
            box-sizing: border-box;
        }

.hero-banner {
            position: relative;
            width: 100%;
            height: clamp(300px, 50vh, 800px);
            margin: 0;
            padding: 0;
            background-color: #222; 
            background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
            box-sizing: border-box;
        }

.footer-area {
            position: relative;
            width: 100%;
            margin: 0;
            padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
            background-color: #000; 
            text-align: center;
            box-sizing: border-box;
        }

.showcase-grid {
            position: relative;
            width: 100%;
            max-width: 2500px;
            margin: clamp(-100px, -15vh, -200px) auto 0;
            display: flex;
            justify-content: center; 
            align-items: flex-end; 
            z-index: 10;
            padding: 0 clamp(15px, 3vw, 40px);
            box-sizing: border-box;
        }

.featured-img {
            width: 100%; 
            height: auto;
            max-width: 100%;
            min-height: clamp(150px, 25vh, 300px);
            max-height: clamp(250px, 40vh, 520px);
            object-fit: contain;
            object-position: center bottom;
            display: block;
            margin: 0;
            padding: 0;
        }

.text-overlay {
            margin: clamp(20px, 3vh, 50px) 0 0;
            padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
            z-index: 20;
            box-sizing: border-box;
        }

.text-overlay p {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(16px, 3.5vw, 32px);
            font-weight: 400;
            margin: 0;
            padding: 0;
            letter-spacing: clamp(0.5px, 0.1vw, 1px);
            line-height: 1.4;
        }

.heading-wrapper {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(15px, 3vw, 30px);
            box-sizing: border-box;
        }

.store-header h1 {
            text-align: center;
            color: white;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(28px, 7vw, 64px);
            margin: clamp(20px, 4vh, 40px) 0;
            padding: 0 clamp(15px, 3vw, 30px);
            line-height: 1.2;
            box-sizing: border-box;
        }

/* OVERVIEW */
.page-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
        }

        /* Row 1 - Hero Section */
.intro-section {
            font-family: "Space Grotesk", sans-serif;
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 30px);
            padding: clamp(20px, 4vw, 60px);
            min-height: 0;
        }

.intro-section h1 {
            grid-column: 1 / -1;
            font-size: clamp(28px, 6vw, 60px);
            font-weight: 700;
            margin: 0 auto;
            text-align: center;
            line-height: 1.2;
        }

.intro-section p {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            font-size: clamp(16px, 2.5vw, 32px);
            font-weight: 400;
            line-height: 1.6;
            color: white;
            padding: 0 clamp(10px, 2vw, 20px);
        }

/* Row 2, 3, 4, 5 - Content Sections */
.flex-section {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

.text-block {
            padding: clamp(25px, 5vw, 80px) clamp(20px, 4vw, 60px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            order: 1;
        }

.visual-block {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            min-height: clamp(250px, 40vh, 450px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            order: 2;
            width: 100%;
        }

.visual-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

.text-block h2 {
            font-size: clamp(28px, 5vw, 64px);
            margin-bottom: clamp(15px, 3vw, 25px);
            line-height: 1.2;
            width: 100%;
            padding-bottom: 1rem;
        }

.text-block p {
            font-size: clamp(14px, 2.2vw, 28px);
            font-weight: 400;
            line-height: 1.7;
            color: white;
            margin-bottom: clamp(20px, 4vw, 30px);
            max-width: 800px;
        }

.action-btn {
        text-decoration: none;
        color: white;
        font-size: 18px;
        font-weight: 500;
        padding: 15px 70px;
        border-radius: 70px;
        border: 1px solid #7B54B1;
        margin-top: 30px;
        background: linear-gradient(to right, rgba(168, 85, 247, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
        background-repeat: no-repeat;
        background-size: 80%;
        animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.action-btn:hover {
            transform: translateY(-2px);
            background-color: #a855f7;
        }

.action-btn:active {
            transform: translateY(0);
        }

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
            .hero-banner {
                height: clamp(250px, 35vh, 300px);
                background-position: center;
                box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-150px, -15vh, -100px);
                padding: 0 10px;
            }
            
            .featured-img {
                min-height: 120px;
                max-height: 200px;
            }
            
            .footer-area {
                padding: 15px 10px;
            }
            
            .text-overlay {
                margin-top: clamp(15px, 2vh, 30px);
                padding: 10px 15px;
            }
            
            .store-header h1 {
                margin: 15px 0;
                padding: 0 10px;
            }
        }

/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
            .hero-banner {
                height: clamp(300px, 45vh, 500px);
                background-position: top center;
                box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-90px, -14vh, -130px);
                padding: 0 15px;
            }
            
            .featured-img {
                min-height: 150px;
                max-height: 250px;
            }
            
            .footer-area {
                padding: 20px 15px;
            }
            
            .text-overlay {
                margin-top: clamp(18px, 2.5vh, 35px);
                padding: 12px 20px;
            }
            
            .store-header h1 {
                margin: 20px 0;
                padding: 0 15px;
            }
        }

/* Medium devices (tablets) */
@media (min-width: 768px) {
            .intro-section {
                gap: clamp(20px, 3vw, 30px);
                padding: clamp(30px, 5vw, 80px);
            }

            .intro-section p {
                width: 85%;
                font-size: clamp(18px, 2.8vw, 34px);
            }

            .text-block {
                padding: clamp(35px, 6vw, 70px) clamp(25px, 5vw, 50px);
            }

            .visual-block {
                min-height: clamp(300px, 45vh, 500px);
            }

            .action-btn {
                max-width: 300px;
                min-height: 52px;
            }
        }

@media (min-width: 768px) and (max-width: 1023px) {
            .hero-banner {
                height: clamp(400px, 55vh, 650px);
                box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-130px, -18vh, -180px);
                padding: 0 20px;
            }
            
            .featured-img {
                min-height: 200px;
                max-height: 350px;
            }
            
            .footer-area {
                padding: 25px 20px;
            }
            
            .text-overlay {
                margin-top: clamp(25px, 3vh, 40px);
                padding: 15px 25px;
            }
            
            .store-header h1 {
                margin: 25px 0;
                padding: 0 20px;
            }
        }

/* Desktop Breakpoint (1024px and up) */
@media (min-width: 1024px) {
            .intro-section {
                grid-template-columns: repeat(2, 1fr);
                align-items: center;
                padding: clamp(40px, 6vw, 100px);
            }

            .intro-section h1 {
                text-align: left;
                font-size: clamp(36px, 5vw, 60px);
            }

            .intro-section p {
                width: 100%;
                text-align: left;
                padding-left: 0;
                font-size: clamp(20px, 2.2vw, 32px);
            }

            .flex-section {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                min-height: clamp(450px, 55vh, 650px);
            }

            .text-block {
                text-align: left;
                align-items: flex-start;
                padding: clamp(50px, 7vw, 90px) clamp(40px, 6vw, 80px);
                order: 1;
            }

            .text-block h2 {
                text-align: left;
                font-size: clamp(32px, 4.5vw, 64px);
            }

            .text-block p {
                font-size: clamp(16px, 2vw, 28px);
            }

            .visual-block {
                min-height: 100%;
                order: 2;
            }

            /* Alternate layout for odd rows (content left, image right) */
            .flex-section:nth-child(odd) .text-block {
                order: 1;
            }

            .flex-section:nth-child(odd) .visual-block {
                order: 2;
            }

            /* Even rows (image left, content right) */
            .flex-section:nth-child(even) .text-block {
                order: 2;
            }

            .flex-section:nth-child(even) .visual-block {
                order: 1;
            }

            .action-btn {
                max-width: 320px;
                width: auto;
                min-height: 54px;
            }
        }

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
            .hero-banner {
                height: clamp(500px, 65vh, 750px);
                box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-180px, -25vh, -250px);
                padding: 0 30px;
            }
            
            .featured-img {
                min-height: 280px;
                max-height: 450px;
            }
            
            .footer-area {
                padding: 30px 25px;
            }
            
            .text-overlay {
                margin-top: clamp(30px, 3.5vh, 45px);
                padding: 18px 30px;
            }
            
            .store-header h1 {
                margin: 30px 0;
                padding: 0 25px;
            }
        }

/* Large Desktop Breakpoint (1440px and up) */
@media (min-width: 1440px) {
            .page-wrapper {
                max-width: 1920px;
                margin: 0 auto;
            }

            .text-block p {
                font-size: clamp(18px, 1.5vw, 28px);
            }

            .hero-banner {
                height: clamp(600px, 70vh, 800px);
                box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-220px, -30vh, -300px);
                padding: 0 40px;
            }
            
            .featured-img {
                min-height: 350px;
                max-height: 520px;
            }
            
            .footer-area {
                padding: 35px 30px;
            }
            
            .text-overlay {
                margin-top: clamp(35px, 4vh, 50px);
                padding: 20px 35px;
            }
            
            .store-header h1 {
                margin: 35px 0;
                padding: 0 30px;
            }
        }

/* Ultra-wide screens (1920px and up) */
@media (min-width: 1920px) {
            .intro-section h1 {
                font-size: 64px;
            }

            .intro-section p {
                font-size: 32px;
            }

            .text-block h2 {
                font-size: 64px;
            }

            .text-block p {
                font-size: 28px;
            }

            .featured-img {
                max-height: 600px;
            }
            
            .footer-area {
                padding: 40px 40px;
            }
            
            .text-overlay {
                padding: 25px 40px;
            }
        }

/* Small Mobile Optimization (max 375px) */
@media (max-width: 375px) {
            .intro-section {
                gap: 12px;
            }

            .text-block {
                padding: clamp(20px, 5vw, 30px) clamp(15px, 4vw, 20px);
            }

            .visual-block {
                min-height: clamp(200px, 35vh, 300px);
            }

            .action-btn {
                min-height: 42px;
                font-size: 13px;
            }
        }

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
            .hero-banner {
                height: 60vh;
            }
            
            .showcase-grid {
                margin-top: -20vh;
                padding: 0 clamp(10px, 2vw, 20px);
            }
            
            .featured-img {
                max-height: 35vh;
                min-height: 25vh;
            }
            
            .footer-area {
                padding: 15px clamp(10px, 2vw, 20px);
            }
            
            .text-overlay {
                margin-top: 15px;
                padding: 10px 15px;
            }

            .visual-block {
                min-height: 70vh;
            }
            
            .text-block {
                padding: clamp(20px, 4vh, 40px) clamp(20px, 4vw, 60px);
            }
        }

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
            .hero-banner {
                height: 50vh;
            }
            
            .showcase-grid {
                margin-top: -15vh;
                padding: 0 10px;
            }
            
            .featured-img {
                max-height: 30vh;
                min-height: 20vh;
            }
            
            .footer-area {
                padding: 10px 15px;
            }
            
            .text-overlay {
                margin-top: 10px;
                padding: 8px 15px;
            }
            
            .store-header h1 {
                margin: 10px 0;
            }
        }

/* Print styles */
@media print {
            .action-btn {
                background: #6d28d9;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }

/*FDAS PAGE BY PCESS*/
/*FDAS PAGE BY PCESS*/


.top-feature-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-hero-wrapper {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('/images/services/FDAS2.jpg');
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    z-index: 1;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,    /* Top is transparent */
        transparent 50%,   /* Transparent up to halfway */
        rgba(0, 0, 0, 0.3) 60%,  /* Start fading in at halfway */
        rgba(0, 0, 0, 0.8) 80%,  /* Darker at bottom */
        black 100%        /* Fully visible at bottom */
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 60%,
        rgba(0, 0, 0, 0.8) 80%,
        black 100%
    );
}

.header-text-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 60px;
    width: 100%;
    text-align: center;
    animation: fadeInLeft 1.5s ease-out;
    z-index: 2;
}

.fade-right {
    display: inline-block;
    animation: fadeInRight 1.5s ease-out;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(0);
    }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.header-text-layer h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}

.view-details-btn {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 20px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.view-details-btn:hover {
    background-color: #FF4500;
}

.selection-criteria-block {
    display: flex;
    align-items: center;
    max-width: 1350px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
   
    .selection-criteria-block.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .selection-criteria-block.animate-visible {
        animation: 2s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* Left Column - Visual Container */
.image-display-area {
    flex: 1;
    min-height: 500px;
    background-image: url("https://i.pinimg.com/736x/64/f7/28/64f728aaf40516331f0f6487c786662f.jpg");
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

.image-display-area:hover {
    /* Apply Gradient Border on Hover */
    border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
}

.selection-criteria-block:nth-child(2) .image-display-area {
    background-image: url("https://i.pinimg.com/736x/64/8f/15/8f15c8d3e4c5a4b8c9e1a4e5e.jpg");
}

.selection-criteria-block:nth-child(2) .image-display-area:hover {
    border-image: linear-gradient(90deg, #FF4500 0%, #FF6347 50%, #FF8C00 100%) 1;
}

/* Right Column - Content Container */
.info-details-box {
    flex: 1;
    padding-left: 70px;
}

@keyframes glow-fire {
    from {
        text-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
    }
    to {
        text-shadow: 0 0 30px rgba(255, 69, 0, 0.8), 0 0 40px rgba(255, 140, 0, 0.6);
    }
}


/* Title Styling */
.title-first-line {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: 0%;
}


/* Feature List Styling */
.key-advantages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.key-advantages-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.key-advantages-list li:hover{
    transform: translateY(-5px) scale(1.05);
}


.item-icon-style {
    font-size: 20px;
    margin-right: 15px;
    color: white;
    transform: rotate(-15deg);
}

.item-icon-style:hover {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}


.value-proposition-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 30px 20px;
    margin: auto;
}


.value-card-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-display-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}



.card-text-content {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.customer-feedback-module {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "content visual"
        "button button";
   
    gap: 10px; 
    max-width: 1000px; 
    margin: 20px auto; 
    padding: 0 10px; 
    align-items: start;

}

    .customer-feedback-module.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .customer-feedback-module.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }


.feedback-text-area {
    grid-area: content;
    padding-right: 20px;
    
}

.feedback-header-one {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.client-quote-text {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.rating-stars-container .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    
    
    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .rating-stars-container :hover {
        transform: translateY(-5px) scale(1.05);
    }


/* Product Visual (Right Column) */
.item-showcase-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(https://i.pinimg.com/736x/08/ad/46/08ad464419417d928e8cb3ae47dd8219.jpg);
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .item-showcase-visual:hover {
        /* 1. Revert to Color on Hover */
        
        /* 2. Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
    }

/* Button Container (Spans both columns) */
.call-to-action-wrapper {
    grid-area: button;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* See Reviews Button Styling */
.reviews-link-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.reviews-link-button:hover {
    background-color: #FF4500;
}

.bottom-promo-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.secondary-hero-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('https://i.pinimg.com/736x/fc/c4/28/fcc4281f495dd945fb8261ef33f0afcf.jpg');      
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%); /* Become fully transparent (bottom fade-out) */
    overflow: hidden;   
}

.bottom-text-layer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
}

.bottom-text-layer h1 {
    color: white;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-style: Bold;
    font-size: 36px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}


.link-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    border: 4px solid #fff;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.2s, color 0.3s;
    background-color: transparent;
}

.link-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    color: #fff;
}

.link-action-btn .fas {
    margin-left: 10px;
    font-size: 0.9em;
    transition: margin-left 0.3s;
}

.link-action-btn:hover .fas {
    margin-left: 15px;
}

/* FDAS RESPONSIVE DESIGN */

    @media (min-width: 1400px) {
    .top-feature-area {
        max-width: 1500px;
    }

    .selection-criteria-block {
        max-width: 1500px;
    }
    
    .value-proposition-grid {
        max-width: 1500px;
        gap: 50px;
    }

    .customer-feedback-module {
        max-width: 1400px;
    }
}


    @media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .selection-criteria-block {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-first-line {
        font-size: 2.8rem; 
    }
    
    /* Ensure the grid columns are spacious */
    .value-proposition-grid {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 30px auto;
    }
}


/* 🚀 LARGE SCREEN RESPONSIVENESS (Desktops: min-width: 1025px) */
@media (min-width: 1025px) {

    /* BOTTOM PROMO STRIP */
    .secondary-hero-wrapper {
        /* Increase height of the hero strip */
        height: 550px;
    }
    
    .bottom-text-layer {
        /* Adjust padding for larger viewports */
        padding: 50px 80px;
    }

    .bottom-text-layer h1 {
        /* Increase main heading size */
        font-size: 64px;
    }
}



    @media(max-width: 768px) {

        /* top feature area */
        .top-feature-area {
            width: 100%; /* Change from max-width */
            max-width: 100%; /* Ensure it doesn't overflow */
            margin-top: -150px;
        }

        /* PRIMARY HERO WRAPPER - Fix mobile overflow */
        .primary-hero-wrapper {
            width: 100% !important; /* Override 127% width on mobile */
            height: 450px; /* Adjust height for mobile */
        }

        /* Hero text adjustments for mobile */
        .header-text-layer {
            padding: 20px 30px;
            transform: translate(-50%, -60%); /* Elevate the text position even more */
        }

        .header-text-layer h1 {
            font-size: 28px; /* Smaller font for mobile */
            line-height: 1.1;
        }

        /* SELECTION CRITERIA BOX */
        .selection-criteria-block {
            flex-direction: column;
            padding: 0 20px;
            margin: 40px auto;
        }

        .image-display-area {
            width: 100%;
            min-height: 350px;
            margin-left: 0;
            margin-bottom: 30px;
            border-width: 8px;
        }

        .info-details-box {
            width: 100%;
            padding-left: 0;
            text-align: center;
        }

        .title-first-line {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .key-advantages-list li {
            font-size: 24px;
            line-height: 1.8;
            justify-content: center;
        }

        .item-icon-style {
            font-size: 18px;
            margin-right: 10px;
        }
    

        /*value-proposition grid */
        .value-proposition-grid {
            font-size: 2rem;
            grid-template-columns: 1fr; /* Stack items vertically */
        }

            .card-text-content{
                font-size: 1.5rem;
            }


        /* bottom promo strip */
        .bottom-promo-strip{
            font-size: 2rem;
        }
                    
        .secondary-hero-wrapper {
            max-width: 768px; /* Ensure it doesn't overflow */
        }

    }

    @media (min-width: 577px) and (max-width: 1024px) {
        /* PRIMARY HERO SECTION */
        .primary-hero-wrapper {
            height: 500px;
        }

        .header-text-layer {
            padding: 30px 40px;
        }

        .header-text-layer h1 {
            font-size: 38px;
        }

        /* SELECTION CRITERIA BLOCK */
        .selection-criteria-block {
            /* Keep them side-by-side but allow wrapping if needed */
            flex-direction: row; 
            flex-wrap: wrap; 
            padding: 0 30px; 
        }
        
        .image-display-area {
            min-height: 400px; 
        }

        .info-details-box {
            padding-left: 50px;
        }

        .title-first-line {
            font-size: 35px;
        }

        .key-advantages-list li {
            font-size: 20px;
        }
        
        /* VALUE PROPOSITION GRID */
        .value-proposition-grid {
            /* Cards may wrap to the next line */
            gap: 30px;
            padding: 25px 30px;
            justify-content: center;
        }
        
        .value-card-element {
            min-width: 300px; /* Give them more space than on mobile */
        }


        /* BOTTOM PROMO STRIP */
        .secondary-hero-wrapper {
            height: 450px;
        }
        
        .bottom-text-layer {
            padding: 30px 40px;
        }

        .bottom-text-layer h1 {
            font-size: 40px;
        }
    }



    @media (max-width: 768px) {
    .customer-feedback-module {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "visual"
            "button";
        margin: 40px auto;
        gap: 20px;
    }

    .feedback-text-area {
        padding-right: 0;
        text-align: center;
    }

    .feedback-header-one {
        font-size: 36px;
    }

    .client-quote-text {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .rating-stars-container .fas {
        font-size: 20px;
        margin-top: 15px;
    }

    .item-showcase-visual {
        min-height: 400px;
        border-width: 8px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .customer-feedback-module {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }

    .feedback-header-one {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .client-quote-text {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .rating-stars-container .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .item-showcase-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .feedback-header-one {
        font-size: 24px;
    }

    .client-quote-text {
        font-size: 16px;
    }

    .item-showcase-visual {
        min-height: 250px;
    }
}



/* BLOG */ /* BLOG */

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


.visual-deck-viewport {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

.visual-deck-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.7s ease-in-out;
}

.visual-deck-card {
    flex-shrink: 0;
    width: 33.333%;
    height: 100%;
    position: relative;
}

.deck-card-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
}

.deck-card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10%;
    box-sizing: border-box;
    z-index: 2;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
}

.text-focus-wrapper {
    font-family: "lexend";
    max-width: 500px;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.focus-main-title,
.focus-sub-title,
.focus-description,
.call-to-action-btn {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInSlide 0.6s ease-out forwards;
}

.focus-main-title {
    color: white;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 0.2em;
    animation-delay: 0.5s;
}

.focus-sub-title {
    font-size: 45px;
    font-weight: 200;
    letter-spacing: 0.1em;
    margin-bottom: 1em;
    color: white;
    animation-delay: 0.6s;
}

.focus-description {
    font-family: "Lexend";
    font-size: 24px;
    line-height: 1.5;
    font-weight: 200;
    margin-bottom: 2em;
    color: white;
    animation-delay: 0.7s;
}

.call-to-action-btn {
    display: inline-block;
    padding: 15px 30px;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    animation-delay: 0.8s;
    margin-top: 15px;
}

.call-to-action-btn:hover {
    background-color: #fff;
    color: #000;
}

.deck-pagination-nav {
    position: absolute;
    bottom: 30px;
    left: 48%;
    z-index: 3;
    display: flex;
    gap: 10px;
    opacity: 0;
    transform: translate(-50%, 20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.9s; 
}

.dot-control {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot-control.active {
    background-color: #fff;
}

@media (max-width: 1024px) {
    .deck-card-content {
        padding-left: 5%;
    }

    .text-focus-wrapper {
        max-width: 400px;
    }

    .focus-main-title {
        font-size: 4.5vw;
    }

    .focus-sub-title {
        font-size: 4vw;
    }

    .focus-description {
        font-size: 2vw;
    }
}


@media (max-width: 768px) {
    .visual-deck-viewport {
        height: 70vh;
    }

    .deck-card-content {
        align-items: flex-start;
        padding: 10% 5%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
    }

    .text-focus-wrapper {
        max-width: 100%;
    }

    .focus-main-title {
        font-size: 32px;
    }

    .focus-sub-title {
        font-size: 28px;
    }

    .focus-description {
        font-size: 16px;
    }

    .call-to-action-btn {
        font-size: 1em;
        padding: 12px 24px;
    }

    .deck-pagination-nav {
        left: 45%;
        bottom: 40px;
        gap: 8px;
    }

    .dot-control {
        width: 10px;
        height: 10px;
    }
}

/*====================== LATEST PRODUCTS ===================*/

.catalog-display-area {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.catalog-display-area__title {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 40px;
    text-align: left;
}

.catalog-display-area__grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.item-preview {
    background-color: black;
    border-radius: 15px;
    height: 400px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.6s ease-out, transform 0.3s ease, box-shadow 0.3s ease;
}

        
.item-preview {
    opacity: 0;
    transform: translateY(50px);
}

.item-preview.animate {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s !important; 
}

    .item-preview:nth-child(2) { transition-delay: 0.2s; }
    .item-preview:nth-child(3) { transition-delay: 0.4s; }
    .item-preview:nth-child(4) { transition-delay: 0.6s; }
    .item-preview:nth-child(5) { transition-delay: 0.8s; }
    .item-preview:nth-child(6) { transition-delay: 0.10s; }
        
    .item-preview:hover,
    .item-preview.animate:hover {
    transform: translateY(-12px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-preview__image {
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

    .item-preview__image1 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image2 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image3 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image4 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image5 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image6 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }

.item-preview__details {
    color: white;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.item-preview__name {
    font-family: "Space Grotesk";
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.item-preview__description {
    font-family: "Lexend";
    font-size: 13px;
    color: white;
    margin-bottom: 10px;
    line-height: 1.4;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-preview__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.item-preview__price {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.item-preview__status {
    font-family: "Lexend";
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid;
    min-width: 80px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

.item-preview__status--in-stock {
    border-radius: 15px;
    color: white;
    border-color: white;
}
        
.item-preview__status--in-stock:hover {
    background-color: white;
    color: black;
    cursor: default;
}

.item-preview__status--pre-order {
    border-radius: 15px;
    color: white;
    border-color: white;
}

.item-preview__status--pre-order:hover {
    background-color: white;
    color: black;
}

.catalog-display-area__button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.cta-button {
    font-family: "Lexend";
    width: 320px;
    max-width: 100%;
    height: 65px;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button:hover {
    background-color: #fff;
    color: #000;
}

@media (max-width: 768px) {
    .catalog-display-area__title {
        font-size: 28px;
        margin-top: 40px;
}
    .item-preview {
        height: auto;
}
}

@media (max-width: 480px) {
    .catalog-display-area__grid-layout {
        grid-template-columns: 1fr;
        gap: 20px;
}

@media (max-width: 768px){
    .ds-timeline-item{
        padding-left: 40px;
    }

}
    .cta-button {
        height: 55px;
        font-size: 16px;
        width: 100%;
}
}

/*============= TRENDING GADGETS ====================*/

 .ds-animate-scroll {
            opacity: 0;
            transition: var(--ds-transition); 
        }

       
        @keyframes fadeInMove {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ds-main-container.ds-is-visible {
            animation: fadeInMove 0.8s ease-out forwards;
        }

        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .ds-timeline-item.ds-is-visible {
            animation: slideIn 0.6s ease-out forwards;
        }

        
        .ds-timeline-item:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-timeline-item:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-timeline-item:nth-child(3).ds-is-visible { animation-delay: 0.3s; }

        .ds-gadget-card.ds-is-visible {
            animation: fadeInMove 0.6s ease-out forwards;
        }

        .ds-gadgets-block .ds-gadget-card:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(3).ds-is-visible { animation-delay: 0.3s; }


        .ds-main-container {
            font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
            color: white;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            max-width: 1250px;
            width: 90%; 
            margin: 200px auto;
        }

        .ds-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;

        }

        /* MOBILE VIEW SPACING FOR "DPC BEST SELLER" AND "VIEW ALL"*/
        @media (max-width:768px){
            .ds-section-header{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width:100%;
                padding: 0 10px;
                box-sizing: border-box;
                margin-left: 0;
                left: 0;
                transform: none;
            }
        }

        .ds-section-title {
            font-size: 38px;
            font-weight: 700;
            margin: 0;
            background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ds-view-all-link {
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-weight: 500;
            transition: var(--ds-transition);
            position: relative;
        }

        .ds-view-all-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #0a58ca, #00d4ff);
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover::after {
            width: 100%;
        }

        .ds-view-all-link:hover {
            color: #00d4ff;
            transform: translateX(5px);
        }

        .ds-view-all-link-icon {
            margin-left: 8px;
            font-size: 0.9rem;
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover .ds-view-all-link-icon {
            transform: translateX(3px);
        }


        .ds-gadgets-block {
            margin-right: 30px;
            display: flex;
            flex-direction: column;
            gap: 60px;
        }

        .ds-gadget-card {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            padding: 18px;
            height: 160px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
        }

        .ds-gadget-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover::before {
            left: 100%;
        }

        .ds-gadget-card:hover {
            background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2), var(--ds-shadow-lg);
            transform: translateY(-5px) scale(1.02);
        }

        .ds-gadget-info {
            display: flex;
            align-items: flex-start;
            flex-grow: 1;
        }

        .ds-gadget-thumbnail {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 15px;
            margin-right: 15px;
            margin-top: 25px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }

        .ds-gadget-thumbnail img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            object-fit: cover;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail img {
            transform: scale(1.1);
        }

        .ds-gadget-content-area h3 {
            font-size: 1.1rem;
            margin: 0 0 5px 0;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-content-area h3 {
            color: #00d4ff;
        }

        .ds-gadget-meta {
            font-size: 0.8rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .ds-gadget-category {
            font-weight: 600;
            margin-right: 10px;
        }

        .ds-gadget-category--mobile,
        .ds-gadget-category--gaming {
            color: white;
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            text-align: center;
            padding: 4px 1px;
            border-radius: 15px;
            width: 80px;
            font-size: 12px;
            font-weight: 200;
            border: 1px solid rgba(0, 123, 255, 0.3);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-category--mobile,
        .ds-gadget-card:hover .ds-gadget-category--gaming {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.4) 0%, rgba(0, 123, 255, 0.25) 100%);
            border-color: rgba(0, 123, 255, 0.5);
        }

        .ds-gadget-time {
            color: #aaa;
        }

        .ds-gadget-description {
            font-size: 0.9rem;
            color: #ccc;
        }

        .ds-gadget-link-arrow {
            color: white;
            background: linear-gradient(135deg, #333 0%, #444 100%);
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 29px;
            margin-left: 20px;
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
            border: 1px solid #444;
        }

        .ds-gadget-card:hover .ds-gadget-link-arrow {
            background: linear-gradient(135deg, #0a58ca 0%, #00d4ff 100%);
            border-color: #00d4ff;
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
        }

        @media (min-width: 431) and (max-width:768px){
            .ds-updates-block{
                display: flex;
                flex-direction: column;
                padding: 0 10px;
                align-items: center;
                transform: none;
                left: 0;
                overflow-x: hidden;
                box-sizing: border-box;
                width: 100%;

            .ds-updates-block img{
            width: 80% !important; 
            max-width: 200px;
            height: auto !important;
            margin-bottom: 15px !important; /* Space between image and text */
            }
            .ds-timeline-list{
                padding-left: 30px;
                position: relative;
            }
            .ds-timeline-item{
                padding-left: 20px;
            }
            
            }

        }


        .ds-updates-block {
            margin-left: 30px;
            position: relative;
            max-width:1200;
            margin: 0 auto;
        }

        .ds-timeline-list {
            position: relative;
            padding-left: 40px;
        }

        .ds-timeline-list::before {
            content: '';
            position: absolute;
            top: 0;
            left: 21px;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, #0a58ca 0%, #2f8d46 50%, #C34814 100%);
            z-index: 0;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item {
            position: relative;
            margin-bottom: 25px;
            padding-bottom: 20px;
            padding-left: 10px;
        }

        .ds-timeline-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .ds-timeline-item::after { 
            content: '';
            position: absolute;
            left: 4px;
            top: 11px;
            width: 15px;
            height: 2px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
            z-index: 0;
        }

        .ds-timeline-icon {
            position: absolute;
            left: -32px;
            top: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            transition: var(--ds-transition);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item:hover .ds-timeline-icon {
            transform: scale(1.15);
            box-shadow: 0 0 20px currentColor;
        }

        .ds-timeline-item--upcoming .ds-timeline-icon { 
            color: #0a58ca;
            background: radial-gradient(circle, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.1) 100%);
        }
        .ds-timeline-item--launch .ds-timeline-icon { 
            color: #2f8d46;
            background: radial-gradient(circle, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.1) 100%);
        }
        .ds-timeline-item--partnership .ds-timeline-icon { 
            color: #C34814;
            background: radial-gradient(circle, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.15) 100%);
        }

        .ds-update-content {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            height: 220px;
            padding: 15px 20px;
            border-radius: 20px;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
            align-items: center;
            justify-content: space-between;
        }
        .ds-text-side{
            flex: 2;
            width: 100%;
            display:block;
            font-size: 100px;
            
        }

        @media (max-width: 768px){
            .ds-update-content{
                display: flex;
                flex-direction: column;
                padding: 14px;
            }
            
        }

        .ds-update-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transition: var(--ds-transition);
        }

        .ds-update-content:hover::before {
            left: 100%;
        }

        .ds-update-content:hover {
            transform: translateY(-3px);
            box-shadow: var(--ds-shadow-lg);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover {
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2);
        }

        .ds-timeline-item--launch .ds-update-content:hover {
            border-color: #2f8d46;
            box-shadow: 0 8px 32px rgba(47, 141, 70, 0.2);
        }

        .ds-timeline-item--partnership .ds-update-content:hover {
            border-color: #C34814;
            box-shadow: 0 8px 32px rgba(195, 72, 20, 0.2);
        }

        .ds-update-meta-info {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 0.8rem;
        }

        .ds-update-category-tag {
            font-size: 15px;
            font-weight: 600;
            margin-right: 15px;
            padding: 4px;
            border-radius: 4px;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-category-tag {
            transform: scale(1.05);
        }

        .ds-timeline-item--upcoming .ds-update-category-tag { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-category-tag { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-category-tag { color: #C34814; }

        .ds-update-time-badgee,
        .ds-update-time-badge,
        .ds-update-time-badge-recent {
            color: white;
            text-align: center;
            padding: 4px 10px; 
            border-radius: 15px;
            width: 90px;
            font-weight: 400;
            transition: var(--ds-transition);
            border: 1px solid transparent;
            font-size: 0.8rem; 
        }

        .ds-update-time-badgee {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            border-color: rgba(0, 123, 255, 0.3);        
        }

        .ds-update-time-badge {
            background: linear-gradient(135deg, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.15) 100%);
            border-color: rgba(144, 255, 85, 0.3);  
        }

        .ds-update-time-badge-recent {
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.2) 100%);
            border-color: rgba(255, 107, 53, 0.3);           
        }

        .ds-update-content:hover .ds-update-time-badgee,
        .ds-update-content:hover .ds-update-time-badge,
        .ds-update-content:hover .ds-update-time-badge-recent {
            transform: scale(1.05);
        }

        .ds-update-content h3 {
            font-size: 1.1rem;
            margin: 0 0 10px 0;
            transition: var(--ds-transition);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover h3 { color: #00d4ff; }
        .ds-timeline-item--launch .ds-update-content:hover h3 { color: #90FF55; }
        .ds-timeline-item--partnership .ds-update-content:hover h3 { color: #FF6B35; }

        .ds-update-description {
            font-size: 0.9rem;
            color: #aaa;
            margin-bottom: 15px;
            margin-right: 150px;
        }

        @media (max-width: 768px){
            .ds-update-description{
                display: block;
                width: 100%;
                margin-bottom: 10px;

            }
            .ds-update-meta-info{
                margin:10 px;
            }
        }

        .best-seller-thumbnail {
            width: 130px;
            height: 130px; /* Fixed square size */
            background: transparent;
            border-radius: 15px;
            margin-left: 380px;
            margin-top: -150px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            transition: var(--ds-transition);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px; /* Increased padding for better spacing */
            box-sizing: border-box;
        }

        .best-seller-thumbnail img{
          
            width: 10px;
            height: 10px;
            padding: 10px;

        }

    @media (max-width: 1024px){
        .best-seller-thumbnail{
            width: 100px;
            height: 100px;
            min-width: 100%;
            margin-left: 0;
            margin-top: 0;
            margin-bottom: 15px;
            
            
        }
        .best-seller-thumbnail img {
            width: 100%;
            height: 140px;
            display:block;
            object-fit: contain;
    }
}
        .best-seller-thumbnail:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }


        .best-seller-thumbnail:hover img {
            transform: scale(1.1);
        }

        .ds-update-details-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
        }

        .ds-update-details-arrow {
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-details-arrow {
            transform: translateX(5px);
        }

       
        .ds-timeline-item--upcoming .ds-update-details-arrow { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-details-arrow { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-details-arrow { color: #C34814; }

        
        html {
            scroll-behavior: smooth;
        }

        /* Responsive adjustments */
        @media (max-width: 1240px) {
            .ds-main-container {
                width: 100%;
                display: flex;
                flex-direction: column;
            }
        }

        @media (max-width: 992px) {
            .ds-main-container {
                grid-template-columns: 1fr;
                padding: 0 20px;
                width: auto;
                margin: 100px auto;
                gap: 50px;
            }
            
            .ds-gadgets-block {
                margin-right: 0;
            }
            
            .ds-updates-block {
                margin-left: 0;
            }
        }

        @media (max-width: 1024px) {
            .ds-main-container {
                margin: 60px auto 60px;
                gap: 40px;
                padding: 0 15px;
            }
            
            .ds-section-title {
                font-size: 1.5rem;
            }
            
            .ds-gadgets-block {
                gap: 40px;
            }
            
            .ds-gadget-card {
                height: auto;
                min-height: 140px;
                flex-wrap: wrap;
                padding: 12px;
            }
            
            .ds-gadget-card:hover {
                transform: translateY(-3px) scale(1);
            }
            
            .ds-gadget-info {
                width: 100%;
            }
            
            .ds-gadget-thumbnail {
                width: 70px;
                height: 70px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 1rem;
            }
            
            .ds-gadget-description {
                font-size: 0.85rem;
            }
            
            .ds-gadget-link-arrow {
                margin-left: 0;
                margin-top: 10px;
                align-self: flex-end;
            }
            
            .ds-update-content {
                height: auto;
                min-height: 180px;
                padding: 12px 15px;
            }
            
            .ds-update-content h3 {
                font-size: 1rem;
            }
            
            .ds-update-description {
                font-size: 0.85rem;
            }
            
            .ds-timeline-list {
                padding-left: 10px;
            }
            
            .ds-timeline-list::before {
                left: 16px;
            }
            
            .ds-timeline-item {
                padding-left: 25px;
            }
            .ds-timeline-icon{
                margin-left: 25px;
            }
        }

        @media (max-width: 480px) {
            .ds-main-container {
                margin: 40px auto;
                gap: 30px;
                padding: 0 10px;
            }
            body{
                padding:5px;
            }
            
            .ds-section-header {
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-section-title {
                font-size: 1.3rem;
            }
            
            .ds-gadgets-block {
                gap: 30px;
            }
            
            .ds-gadget-card {
                padding: 10px;
                min-height: 120px;
            }
            
            .ds-gadget-thumbnail {
                width: 60px;
                height: 60px;
                margin-right: 10px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.95rem;
            }
            
            .ds-gadget-meta {
                font-size: 0.75rem;
                flex-wrap: wrap;
                gap: 5px;
            }
            
            .ds-gadget-description {
                font-size: 0.8rem;
            }
            
            .ds-gadget-link-arrow {
                width: 40px;
                height: 26px;
                font-size: 1rem;
            }
            
            .ds-gadget-category--mobile,
            .ds-gadget-category--gaming {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-content {
                padding: 10px 12px;
                min-height: 160px;
            }
            
            .ds-update-content h3 {
                font-size: 0.95rem;
            }
            
            .ds-update-description {
                font-size: 0.8rem;
                margin-bottom: 10px;
            }
            
            .ds-update-meta-info {
                font-size: 0.75rem;
            }
            
            .ds-update-category-tag {
                font-size: 13px;
                margin-right: 10px;
            }
            
            .ds-update-time-badgee,
            .ds-update-time-badge,
            .ds-update-time-badge-recent {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-details-row {
                font-size: 0.8rem;
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-timeline-icon {
                width: 24px;
                height: 24px;
                font-size: 0.85rem;
                margin-right: 25px;
            }
            
            .ds-timeline-item::after {
                top: 10px;
            }
            
            .ds-timeline-item {
                margin-bottom: 20px;
                padding-bottom: 15px;
                padding-left: 20px;
            }
           
        }

        @media (max-width: 360px) {
            .ds-section-title {
                font-size: 1.2rem;
            }
            
            .ds-gadget-thumbnail {
                width: 55px;
                height: 55px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.9rem;
            }
        }

        /* Reduced motion for accessibility */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

/*=============== BLOG POST LATEST ================*/



/* --- New Scroll-Triggered Animation CSS --- */

/* Base style for elements that will animate (Start State: Hidden and slightly offset) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Featured (Showcase) zone has a slightly different animation (Start State: Slightly scaled down) */
.showcase-zone.animate-on-scroll {
    transform: scale(0.9);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Final State (triggered by JavaScript): Visible and in original position */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Featured zone's final visible state */
.showcase-zone.animate-on-scroll.is-visible {
    transform: scale(1);
}

/* Add brief delays for a staggered gallery effect */
.gallery-matrix > .content-block.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; }

/* Delay the side panel widgets */
.side-panel > .widget-container.animate-on-scroll:nth-child(1) { transition-delay: 0.2s; }
.side-panel > .widget-container.animate-on-scroll:nth-child(2) { transition-delay: 0.4s; }

/* TRENDING POSTS SCROLL BAR*/

.trending-posts-scroll {
  max-height: 390px;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 20px;
}

.trending-posts-scroll:hover {
  overflow-y: auto;
}

.trending-posts-scroll::-webkit-scrollbar {
  width: 8px;
}

.trending-posts-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* --- Original Design Styles --- */
    
.banner-strip {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap; 
}

.banner-strip h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px; 
}

.dual-column-frame {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: start;
}

.primary-zone {
    width: 100%;
}

.showcase-zone {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-zone:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.media-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.media-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.showcase-zone:hover .media-canvas {
    transform: scale(1.05);
}

.content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    padding: 40px 30px 30px;
    transition: padding 0.3s ease;
}

.showcase-zone:hover .content-overlay {
    padding: 50px 30px 30px;
}

.attributes-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.category-marker {
    background: rgba(59, 130, 246, 0.6);
    color: #fff;
    padding: 8px 18px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.time-stamp {
    color: #aaa;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.time-stamp::before {
    content: '•';
    color: #3b82f6;
}

.feature-title {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s ease;
    cursor: pointer;
}


.description-snippet {
    color: white ;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.progress-bullets {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.bullet-point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.bullet-point::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #3b82f6;
    transition: all 0.3s ease;
}

.bullet-point:hover {
    background: #666;
    transform: scale(1.2);
}

.bullet-point.active-state {
    background: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.side-panel {
    display: flex;
    flex-direction: column;
    gap: 43px;
    width: 100%;
}

.widget-container {
    color: white;
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 25px;
    width: 100%;
    transition: all 0.3s ease;
}

.widget-container:hover {
    border-color: #3b82f6;
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.widget-container h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.widget-container h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
}

.highlight-item {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #222;
    align-items: flex-start;
    transition: all 0.3s ease;
    cursor: pointer;
}

.highlight-item:hover {
    padding-left: 10px;
    background: rgba(59, 130, 246, 0.05);
}

.highlight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.position-badge {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    min-width: 40px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.highlight-item:hover .position-badge {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.item-content {
    flex: 1;
}

.item-content h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.highlight-item:hover .item-content h4 {
    color: #3b82f6;
}

.posted-time {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.highlight-item:hover .posted-time {
    color: #888;
}

.tag-collection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-element {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tag-element::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    transition: left 0.5s ease;
}

.tag-element:hover::before {
    left: 100%;
}

.tag-element:hover {
    background: #2a2a2a;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.2);
}

.gallery-matrix {
    color: white;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default for large screens */
    gap: 25px;
    width: 100%;
}

.content-block {
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
}

.content-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.content-block:hover::before {
    opacity: 1;
}

.content-block:hover {
    transform: translateY(-10px);
    border-color: #3b82f6;
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}

.preview-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image img {
    transform: scale(1.05);
}

.preview-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent);
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image::after {
    transform: translate(-50%, -50%) scale(1);
}

.text-section {
    padding: 25px;
    position: relative;
    z-index: 2;
}

.meta-information {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.subject-tag {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.subject-tag.gaming {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.content-block:hover .subject-tag.gaming {
    background: rgba(16, 185, 129, 0.2);
    transform: scale(1.05);
}

.subject-tag.arvr {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.content-block:hover .subject-tag.arvr {
    background: rgba(139, 92, 246, 0.2);
    transform: scale(1.05);
}

.subject-tag.security {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.content-block:hover .subject-tag.security {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.05);
}

.creation-date {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.content-block:hover .creation-date {
    color: #888;
}

.block-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.content-block:hover .block-title {
    color: #3b82f6;
}

.brief-description {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.content-block:hover .brief-description {
    color: #aaa;
}

.directional-icon {
    color: #3b82f6;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.content-block:hover .directional-icon {
    transform: translateX(10px);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* --- Media Queries for Responsiveness (Unchanged) --- */

/* Tablet/Medium Screens (Max 1024px) */
@media (max-width: 1024px) {
    
    .dual-column-frame {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    
    .side-panel {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 calc(50% - 10px); 
        max-width: calc(50% - 10px);
    }
    
}

    
@media (max-width: 640px) {
    .banner-strip h1 {
        font-size: 28px;
    }

    .media-wrapper {
        height: 350px; /* Smaller height for featured image */
    }

    .feature-title {
        font-size: 1.5rem;
    }

    /* Adjust gallery to a single column */
    .gallery-matrix {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Stack side panel widgets vertically */
    .side-panel {
        flex-direction: column;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/*================== END =====================*/

/* DOORLOCK SYSTEM BY PCESS */

.doorlock-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 70px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-doorlock-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;

    background-image:
    linear-gradient(200deg, rgba(62, 222, 47, 0) 30%, rgba(37, 228, 145, 0.5) 70%, rgba(27, 99, 255, 1) 100%),
    url('../images/pc-builds.jpg');
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
    to bottom,
    transparent 0%,  /* Start fully transparent (top fade-out) */
    black 10%,        /* Become fully visible at 5% */
    black 85%,       /* Stay fully visible until 95% */
    transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.doorlock-header {
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.doorlock-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}


.why-choose-layer {
    text-align: center;
    padding: 40px 20px;
}

    .why-choose-layer.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

	.why-choose-layer.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

.why-choose-question {
    font-family: 'Lexend', sans-serif;
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.why-choose-answer{
    font-size: 32px;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* client-nav section */


/* Base state for all sections - hidden by default */
.cnsection, .projsection {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Active section - visible with animation */
.cnsection:not(.d-none), .projsection:not(.d-none) {
    opacity: 1;
    transform: translateY(0);
    animation: slideInUp 0.6s ease-out forwards;
}

/* Keyframe animation for sliding in from bottom */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternative: Fade and Scale Animation */
.cnsection.scale-animation:not(.d-none), 
.projsection.scale-animation:not(.d-none) {
    animation: fadeScale 0.5s ease-out forwards;
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Staggered animation for child elements */
.cnsection:not(.d-none) .section-h1,
.projsection:not(.d-none) .proj-h1 {
    animation: slideInUp 0.6s ease-out 0.1s backwards;
}

.cnsection:not(.d-none) .section-p,
.projsection:not(.d-none) .proj-p {
    animation: slideInUp 0.6s ease-out 0.2s backwards;
}

.cnsection:not(.d-none) .dl-gradient-button,
.projsection:not(.d-none) .proj-gradient-button {
    animation: slideInUp 0.6s ease-out 0.3s backwards;
}

.cnsection:not(.d-none) .gradient-border-box,
.projsection:not(.d-none) .gradient-border-proj {
    animation: slideInRight 0.6s ease-out 0.2s backwards;
}

/* Slide in from right for images */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px); /* Start 30px to the left */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* End at the normal position */
    }
}

/* Button click feedback animation */
.clientbtn, .projbtn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clientbtn:active, .projbtn:active {
    transform: translateY(-5px) scale(0.98);
}

/* Smooth active indicator animation */
.clientbtn.active::after, .projbtn.active::after {
    animation: expandLine 0.4s ease-out forwards;
}

@keyframes expandLine {
    from {
        width: 0%;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}



.clientnavpart {
    margin-top: 30px;
    max-height: 670px;
}

.client-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for nav buttons */
.clientbtn {
    transition: color 0.2s ease;
    justify-content: center;
}

.clientbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.clientbtn.active {
    color: #fff !important;
    position: relative;
}

.clientbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

/* Replace Tailwind's 'hidden' with Bootstrap's 'd-none' */
.d-none {
    display: none !important; 
}

.section-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-box {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.section-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.cnsection {
    margin-top: 10px;
}

.section-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.section-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient */
.dl-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.dl-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* RESPONSIVE DESIGN FOR CLIENT NAV SECTION */

@media (max-width: 1280px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 100%;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1270px;
    }

    .cnsection{
        width: 1100px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}


@media (max-width: 1024px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1030px;
    }

    .cnsection{
        width: 1000px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 15px;
        width: 600px;
        align-content: center   ;
    }

    .client-nav {
         width: 500px;
    } 
    
    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content {
        width: 550px;
    }

    .cnsection {
        width: 550px;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .client-nav {
        width: 760px;
    }

    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content{
        width: 750px;
    }

    .cnsection{
        width: 750px;

    }
}


@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .cnsection, .projsection {
        transform: translateY(20px);
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .clientnavpart {
        margin-top: 15px;
        max-height: auto;
    }

    .client-nav {
        font-size: 20px;
    } 

    #nav-container {
        justify-content: center;
        padding-bottom: 1rem;
    }
    
    .clientbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .clientbtn.active::after {
        height: 2px;
    }

    .section-content {
        height: auto;
        min-height: 500px;
    }

    .cnsection {
        padding: 2rem 1rem !important;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}


@media (max-width: 430px) {

    .clientnavpart {
        margin-top: 15px;
        width: 400px;
        align-content: center   ;
    }

    .client-nav {
         width: 400px;
    } 
    
    .clientbtn {
        width: 85px;
        padding: 1px !important;
    }

    .section-content {
        width: 400px;
    }

    .cnsection {
        width: 400px;
    }

    .section-h1 {
        font-size: 26px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 250px;
    }

    .section-img {
        min-height: 250px;
    }

    .dl-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .clientnavpart {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .client-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .clientbtn {
        width: 80px;
        padding: 1px !important;
    }

    .section-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .cnsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }

    .section-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .section-p {
        font-size: 14px;
        margin-top: 20px;
        line-height: 1.4;
    }

    .gradient-border-box {
        min-height: 220px;
        margin-bottom: 1.5rem;
    }

    .section-img {
        min-height: 220px;
    }

    .dl-gradient-button {
        padding: 8px 20px;
        font-size: 0.75rem;
        max-width: 250px;
    }
}
/* MANY MORE SECTION */


.many-more {
    margin-top: 70px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
}

.and-many {
    font-size: 48px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}


@media (max-width: 1024px) {
    .and-many {
        font-size: 2rem;
        margin-left: 15px;
    }
}

@media (max-width: 768px) {
    .and-many {
        font-size: 1.8rem;
        margin-left: 15px;
    }
}

@media (max-width: 480px) {
    .and-many {
        font-size: 1.8rem;
    }
}

.many-more-container {
    margin-top: 60px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 400px;
}

    .many-more-container.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .many-more-container.animate-visible {
        animation: 1.2s anim-fadeIn linear forwards; 
    }

/* Replaced .card */
.clients-card {
    position: absolute;
    width: 90%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform .4s ease;
    cursor: pointer;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    min-height: 440px;
    display: flex;
}

.clients-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

/* Replaced .container */
.clients-container {
    width: 100%;
    max-width: 800px;
    max-height: 600px;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Replaced .cards */
.many-more-cards {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
}

/*
 * CORE ANIMATION LOGIC (Updated to use .clients-container)
 */

/* Side Cards (Left position: translateX(-40%)) */
.clients-container.active-card-1 #card-3, /* Card 3 moves left when 1 is active */
.clients-container.active-card-2 #card-1, /* Card 1 moves left when 2 is active */
.clients-container.active-card-3 #card-2 { /* Card 2 moves left when 3 is active */
    transform: translatex(-40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Side Cards (Right position: translateX(40%)) */
.clients-container.active-card-1 #card-2, /* Card 2 moves right when 1 is active */
.clients-container.active-card-2 #card-3, /* Card 3 moves right when 2 is active */
.clients-container.active-card-3 #card-1 { /* Card 1 moves right when 3 is active */
    transform: translatex(40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Center Card (translateX(0)) */
.clients-container.active-card-1 #card-1, /* Card 1 centers */
.clients-container.active-card-2 #card-2, /* Card 2 centers */
.clients-container.active-card-3 #card-3 { /* Card 3 centers */
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
    box-shadow: 0px 0px 15px 0px rgba(81, 81, 81, 0.47); 
}

/* RESPONSIVE DESIGN FOR MANY MORE SECTION */

@media (max-width: 1280px) {
    .clients-container {
        max-width: 1000px; /* Use a smaller max-width */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 450px; /* Reduced minimum card height */
        width: 700px;
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


@media (max-width: 820px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 760px; /* Use a smaller max-width */
        max-height: 580px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 590px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}



@media (max-width: 768px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        max-width: 90%; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 430px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 400px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 300px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 360px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 360px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 290px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


/* DOORLOCK BRAND SLIDER SECTION */

.doorlock-brand-slider {
    margin-top: 600px;
}

@media (max-width: 1280px) {
    .doorlock-brand-slider{
        width: 100%;
    }
}

@media (max-width: 820px) {
    .doorlock-brand-slider{
        margin-top: 550px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .doorlock-brand-slider{
        margin-top: 150px;
    }
}

@media (max-width: 420px) {
    .doorlock-brand-slider{
        margin-top: 150px;
        width: 100%;
    }
}


/* OTHER PROJECTS SECTION */

.other-proj-nav {
    margin-top: 150px;
    max-height: 670px;
    margin-bottom: 20px;
}

.proj-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for project nav buttons */
.projbtn {
    transition: color 0.2s ease;
}

.projbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.projbtn.active {
    color: #fff !important;
    position: relative;
}

.projbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

.projects-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-proj {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.proj-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.projsection {
    margin-top: 10px;
}

.proj-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.proj-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient for Projects */
.proj-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.proj-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* DOORLOCK RESPONSIVE DESIGN */

@media(max-width: 1280px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 820px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
        width: 100%;
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 768px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 430px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

/* OTHER PROJ AREA */

@media (max-width: 1280px) {
    .other-proj-nav{
        margin-top: 80px;
        max-width: auto;
        margin-bottom: -20px;
    }

    .proj-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .projects-content{
        width: 1270px;
    }

    .projsection{
        width: 1200px;
    }


    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 1024px) {
    .other-proj-nav{
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
    }

    .proj-nav {
        font-size: 24px;
    }

    .projects-content{
        width: 1020px;
    }

    .projsection{
        width: 1000px;
    }

    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .proj-nav {
        width: 760px;
    }

    .projbtn {
        width: 300px;
        padding: 1px !important;
    }

    .projects-content{
        width: 750px;
    }

    .projsection{
        width: 750px;

    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .other-proj-nav {
        margin-top: 15px;
        max-height: auto;
    }
    .proj-nav {
        font-size: 20px;
    }

    #navp-container {
        justify-content: flex-start;
        padding-bottom: 1rem;
    }

    .projbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .projbtn.active::after {
        height: 2px;
    }

    .projects-content {
        height: auto;
        min-height: 500px;
    }

    .proj-section {
        padding: 2rem 1rem !important;
    }

    .projsection {
        margin-top: 0px;
    }

    .proj-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .proj-p {
        font-size: 16px;
        margin-top: 40px;
        line-height: 1.5;
    }

    .gradient-border-proj {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
    }

    .proj-img {
        min-height: 300px;
    }

    .proj-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
        margin-top: 30px;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 410px;
    }

    .proj-nav {
        width: 400px;
    }

    .projbtn {
        width: 88px;
        padding: 1px !important;
    }

    .projects-content{
        width: 400px;
    }

    .projsection{
        width: 400px;
    }

    .proj-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .proj-p {
        font-size: 14px;
        margin-top: 20px;
    }

    .gradient-border-proj {
        min-height: 250px;
    }

    .proj-img {
        min-height: 250px;
    }

    .proj-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .other-proj-nav {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .proj-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .projbtn {
        width: 75px;
        padding: 1px !important;
    }

    .projects-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .projsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }
}

/* Remove default link underline */
a {
    text-decoration: none;
}




/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */
/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */

.public-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
            margin-bottom: 30px;
        }

        .flex-public {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1500px;
            margin: 30px auto;
            padding: clamp(40px, 8vw, 100px) clamp(20px, 4vw, 60px);
            gap: clamp(30px, 5vw, 80px);
            min-height: 500px;
            opacity: 0;
        }

        .flex-public.visible {
            animation: fadeInUp 0.8s ease-out forwards !important;
        }

        .flex-public.visible:nth-child(1) {
            animation: fadeInUp 0.8s ease-out 0s forwards;
        }
        .flex-public.visible:nth-child(2) {
            animation: fadeInUp 0.8s ease-out 0.15s forwards;
        }
        .flex-public.visible:nth-child(3) {
            animation: fadeInUp 0.8s ease-out 0.3s forwards;
        }
        .flex-public.visible:nth-child(4) {
            animation: fadeInUp 0.8s ease-out 0.45s forwards;
        }
        .flex-public.visible:nth-child(5) {
            animation: fadeInUp 0.8s ease-out 0.6s forwards;
        }

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

        .text-public {
            flex: 1;
            min-width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .text-public h2 {
            font-size: clamp(32px, 4vw, 52px);
            margin-bottom: 20px;
            background-clip: text;
            font-weight: 700;
            letter-spacing: -0.5px;
            font-family: 'Space Grotesk', sans-serif;
        }

        .text-public p {
            font-size: 1.5rem;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 30px;
            font-weight: 400;
            font-family: 'Lexend', sans-serif;
        }

        .public-btn {
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 600;
            padding: 12px 50px;
            border-radius: 50px;
            background: #0000;
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-block;
            width: fit-content;
            position: relative;
            overflow: hidden;
            border: 1px solid;
        }

        .public-btn::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: left 0.5s ease;
            z-index: 1;
        }

        .public-btn span {
            position: relative;
            z-index: 2;
        }

        .public-btn:hover {
            transform: translateY(-3px);
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
        }
        .public-btn:hover::before {
            left: 100%;
        }

        .public-btn:active {
            transform: translateY(-1px);
        }

        .demo-section {
            display: flex;
            gap: 30px;
            margin-top: 50px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .button-group h3 {
            color: #888;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        @keyframes gradientShiftp {
            0% {
                background-position: -200% center;
            }
            100% {
                background-position: 200% center;
            }
        }

        .visual-public {
            position: relative;
            max-width: 600px;
            height: 450px;
            border-radius: 20px;
            flex: 1;
        }

        /* Blur shadow background */
        .visual-public::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 101%;
            height: 100%;
            background: linear-gradient(
                90deg,
                #FF6666 0%,
                #FF894C 20%,
                #90FF55 40%,
                #7B94F6 60%,
                #FF77F1 80%,
                #FF6666 100%
            );
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            filter: blur(10px);
            z-index: 0;
            pointer-events: none;
        }

        .visual-public img {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
            z-index: 1;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .visual-public:hover img {
            transform: scale(1.03);
        }

        .flex-public:nth-child(even) {
            flex-direction: row-reverse;
        }

        /* Responsive Design */
        /* 344px - Extra Small Phones */
        @media (max-width: 344px) {
            .public-wrapper{
                margin-bottom: -100px;
                margin-top: 50px;
            }
            .flex-public {
                flex-direction: column !important;
                padding: 20px 12px;
                gap: 15px;
                margin-bottom: -30px !important;
                
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 24px;
                margin-bottom: 12px;
            }

            .text-public p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 250px;
                margin-bottom: -50px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 10px 30px;
                font-size: 14px;
                margin-bottom: -100px !important;
            }
           
        }

        /* 360px - Small Phones */
@media (max-width: 360px) {
    .public-wrapper {
        margin-top: -10px !important;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 20px 14px;
        gap: 16px;
        margin-bottom: -100px !important;
    }

    .text-public {
        min-width: 100%;
        font-size: 14px;
    }

    .text-public h2 {
        font-size: 26px !important;
        margin-bottom: 12px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 260px;
    }

    .visual-public img {
        width: 100% !important;
        height: 260px !important;

    }

    .public-btn {
        padding: 10px 32px;
        font-size: 14px;
    }
}

/* 375px - iPhone SE/6/7/8 */
@media (max-width: 375px) {
    .public-wrapper {
        margin-bottom: -50px;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 22px 16px;
        gap: 18px;
        margin: 16px auto;
        max-height: 580px;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 13px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 280px;
    }

    .visual-public img {
        width: 100% !important;
        height: 280px !important;
        
    }

    .public-btn {
        padding: 11px 35px;
        font-size: 14px;
    }
}

/* 390px - Pixel 4/5 */
@media (max-width: 390px) {
    .public-wrapper {
        margin-top: 50px;
        margin-bottom: 190px !important;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 24px 18px;
        gap: 15px;
        margin: 18px auto;
        transform: scale(0.9) !important;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 14px;
    }

    .text-public p {
        font-size: 15px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 230px;
        margin-top: -120px;
    }

    .visual-public img {
        width: 100% !important;
        height: 230px !important;
    }

    .public-btn {
        padding: 10px 35px !important;
        font-size: 15px !important;
        margin-bottom: -130px !important;
        
    }
}

        /* 412px - Galaxy S9 */
        @media (max-width: 412px) {
            .public-wrapper{
                margin-bottom: -10px;
                overflow: visible;
            }

            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 26px 20px;
                gap: 20px;
                margin-bottom: -100px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-bottom: -60px !important;
                margin-top: -60px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 12px 40px;
                font-size: 15px;
            }
            

        }

        /* 414px - iPhone XR */
        @media (max-width: 414px) {
            .flex-public {
                flex-direction: column !important;
                padding: 26px 20px;
                gap: 20px;
                margin: 18px auto;
                transform: scale(0.9) !important;
                margin-bottom: -30px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-top: -100px;
                margin-bottom: -40px;
            }

            .public-btn {
                padding: 12px 30px;
                font-size: 15px;
                margin-bottom: -100px !important;
            }
        }

        /* 430px - Galaxy S22 */
        @media (min-width: 320px) and (max-width: 430px) {
            .public-wrapper {
                margin-bottom: -40px !important;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 28px 22px;
                gap: 20px;
                margin-top: -100px !important;
            }

            .text-public {
                min-width: 350px !important;
                margin: 10px !important;
                transform: scale(0.9);
            }

            .text-public h2 {
                font-size: 34px !important;
                margin-bottom: 15px;
            }

            .text-public p {
                font-size: 15px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 330px;
                margin-bottom: -50px;
                margin-top: -40px;
            }

            .public-btn {
                padding: 10px 32px !important;
                font-size: 15px !important;
                transform: scale(0.9);
                margin-bottom: -90px !important;
            }
        }

        /* 540px - Small Tablets */
        @media (max-width: 540px) {
            .flex-public {
                flex-direction: column !important;
                padding: 30px 24px;
                gap: 22px;
                margin: 20px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 30px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public{
                max-height: 270px !important;
                width: 390px !important;
            }

            .visual-public img{
                max-width: 390px !important;
                max-height: 250px !important;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 768px - iPad/Tablet */
        @media (max-width: 853px) {
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 35px 30px;
                gap: 25px;
                margin: 25px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 38px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 380px;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
            
        }

        /* 853px - Large Tablet */
        @media (max-width: 853px) {
            .public-wrapper{
                margin-bottom: 40px;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 50px 45px !important;
                gap: 28px;
                margin-top: 70px !important;
            }

            .text-public {
                min-width: 100%;
                margin: auto;
                text-align: center;
                align-items: center;
                margin-bottom: -50px;
            }

            .text-public h2 {
                font-size: 48px !important;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 22px !important;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                order: -1;
                max-width: 590px !important;
            }

            .visual-public img{
                width: 590px;
                height: 380px !important;  
            }

            .public-btn {
                padding: 10px 40px !important;
                font-size: 18px !important;
            }
        }

        /* 912px - Large Tablet Landscape */
        @media (max-width: 912px) {
            .flex-public {
                flex-direction: row;
                min-height: auto;
                padding: 40px 35px;
                gap: 30px;
                margin: 25px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 36px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public {
                max-width: 400px;
                height: 320px;
                flex: 1;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 992px - Small Desktop */
        @media (max-width: 992px) {
            .flex-public {
                flex-direction: row;
                min-height: 450px;
                padding: 45px 40px;
                gap: 40px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 40px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                max-width: 450px;
                height: 350px;
                flex: 1;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
        }

        /* 1024px - Tablet Landscape / Desktop */
        @media (max-width: 1024px) {
            .flex-public {
                flex-direction: row;
                min-height: 480px;
                padding: 50px 45px;
                gap: 45px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 350px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 42px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 17px !important;
                line-height: 1.75;
                margin-bottom: 24px;
            }

            .visual-public {
                max-width: 500px;
                height: 330px !important;
                flex: 1;
            }

            .public-btn {
                padding: 10px 35px !important;
                font-size: 16px;
            }
            .ds-section-title{
                margin-left: 20px;
            }
            .ds-view-all-link{
                margin-right: 30px;
            }
        }

        /* 1280px - Full Desktop */
        @media (max-width: 1280px) {
            .flex-public {
                flex-direction: row;
                min-height: 500px;
                padding: 60px 50px;
                gap: 50px;
                margin: 30px 40px;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 380px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 46px;
                margin-bottom: 20px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.8;
                margin-bottom: 26px;
            }

            .visual-public {
                max-width: 550px;
                height: 400px;
                flex: 1;
            }

            .public-btn {
                padding: 14px 52px;
                font-size: 16px;
            }
        }


        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */
        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease-out;
            margin-top: 40px;
        }

        .modal-overlay.active {
            display: flex;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .modal-content-public {
            background: black;
            border: 2px solid #7B54B1;
            border-radius: 20px;
            padding: 50px;
            max-width: 850px;
            width: 90%;
            position: relative;
            display: flex;
            gap: 50px;
            animation: slideUp 0.4s ease-out;
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4), -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
            margin-top: 0px;
        }

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

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: #a78bfa;
            font-size: 32px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            color: #c084fc;
            transform: scale(1.2);
        }

        .testimonial-image {
            flex: 0 0 450px;
            height: 400px;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 0px 30px rgba(168, 85, 247, 0.2);
        }

        .testimonial-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .testimonial-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .testimonial-text h2 {
            font-size: 28px;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #a78bfa, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-family: 'Space Grotesk', sans-serif;
        }

        .testimonial-text p {
            font-size: 18px;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 20px;
            font-family: 'Lexend', sans-serif;
        }

        .public-stars {
            display: flex;
            gap: 8px;
            font-size: 24px;
            display: inline-block; 
    
            /* Ensure the animation is fully defined */
            animation: rgbGoldPulse 2s ease-in-out infinite alternate;
        }

        @media (max-width: 768px) and (min-width: 541px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 35px;
                flex-direction: column;
                max-width: 750px;
                margin: auto;
            }

            .testimonial-image img {
                width: 790px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 8px;
            }
        }

        @media (max-width: 344px) {
            .modal-content-public {
                padding: 20px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 400px;
                height: 410px !important;
            }

            .testimonial-text h2 {
                font-size: 18px;
                margin-bottom: 12px;
            }

            .testimonial-text p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 12px;
            }

            .public-stars {
                font-size: 16px;
                gap: 5px;
            }

            .close-btn {
                font-size: 24px;
                width: 32px;
                height: 32px;
            }
        }

        /* Mobile: 360px */
        @media (max-width: 360px) and (min-width: 345px) {
            .modal-content-public {
                padding: 25px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 210px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 430px;
            }

            .testimonial-text h2 {
                font-size: 20px;
                margin-bottom: 14px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 14px;
            }

            .public-stars {
                font-size: 18px;
                gap: 6px;
            }

            .close-btn {
                font-size: 26px;
                width: 34px;
                height: 34px;
            }
        }

        /* Mobile: 375px */
        @media (max-width: 375px) and (min-width: 361px) {
            .modal-content-public {
                padding: 28px;
                gap: 22px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 420px;
            }

            .testimonial-text h2 {
                font-size: 21px;
                margin-bottom: 15px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .public-stars {
                font-size: 19px;
                gap: 6px;
            }

            .close-btn {
                font-size: 28px;
            }
        }

        /* Mobile: 390px */
        @media (max-width: 390px) and (min-width: 376px) {
            .modal-content-public {
                padding: 30px;
                gap: 24px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 440px;
            }

            .testimonial-text h2 {
                font-size: 22px;
                margin-bottom: 16px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 20px;
                gap: 6px;
            }
        }

        /* Mobile: 412px */
        @media (min-width: 400px) and (max-width: 412px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 470px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 13px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
            
        }

        /* Mobile: 414px */
        @media (max-width: 414px) and (min-width: 413px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 450px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 17px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
        }

        /* Mobile: 430px */
        @media (max-width: 430px) and (min-width: 415px) {
            .modal-content-public {
                padding: 35px;
                gap: 26px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 460px;
            }

            .testimonial-text h2 {
                font-size: 24px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 7px;
            }
        }

        /* Tablet: 540px */
        @media (max-width: 540px) and (min-width: 431px) {
            .modal-content-public {
                padding: 40px;
                gap: 30px;
                flex-direction: column;
                max-width: 440px;
                max-height: 500px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 200px;
                width: 95%;
                margin: auto;
            }

            .testimonial-image img{
                width: 550px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.7;
                margin-bottom: 5px;
            }

            .public-stars {
                font-size: 20px;
                gap: 8px;
            }

        }


        /* Tablet: 853px */
        @media (min-width: 810px) and (max-width: 820px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: column !important;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image{
                max-width: 750px;
                height: 400px !important;
                margin: auto;
            }

            .testimonial-image img{
                width: 750px !important;
                height: 700px !important;
            }

            .testimonial-text h2 {
                font-size: px !important;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 18px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

         /* Tablet: 853px */
        @media (max-width: 1024px) and (min-width: 769px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: row;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image img{
                width: 650px !important;
                height: 650px;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
            .ds-update-content{
                display: grid;
                grid-template-columns: 1fr auto;
                gap:20px;
                align-items: start;
            }
            .best-seller-thumbnail{
                grid-column: 2;
                grid-row: 1 / -1;
                margin-top: 0;
                align-self: center;
                width: 150px;
               
            }
            .best-seller-thumbnail img{
                height: 120px;
            }
            .ds-update-details-row{
                justify-content: flex-start;
            }
        }

        @media (max-width: 912px) and (min-width: 854px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 40px;
                flex-direction: column;
                max-width: 800px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 360px;
                width: 720px;
                margin: auto;
            }

            .testimonial-image img{
                width: 900px !important;
                height: 750px;
            }

            .testimonial-text h2 {
                font-size: 30px !important;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 20px !important;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Tablet: 992px */
        @media (max-width: 992px) and (min-width: 941px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 800px;
            }

            .testimonial-image {
                flex: 0 0 350px;
                height: 320px;
            }

            .testimonial-text h2 {
                font-size: 26px;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Desktop: 1024px */
        @media (max-width: 1024px) and (min-width: 993px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 870px;
                height: 400px;
            }
            .modal-overlay {
                height: 700px;
                margin: auto;
            }
            .testimonial-image {
                flex: 0 0 400px;
                height: 300px;
            }

            .testimonial-image img{
                width: 600px;
                height: 550px;
            }

            .testimonial-text h2 {
                font-size: 36px;
                margin-bottom: -10px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

        /* Desktop: 1280px and above */
        @media (min-width: 1100px) and (max-width: 1280px){
            .modal-content-public {
                padding: 50px;
                gap: 40px;
                max-width: 1100px;
                flex-direction: row;
                height: 550px;
            }

            .testimonial-image {
                flex: 0 0 550px !important;
                height: 400px !important;
                margin: auto;

            }

            .testimonial-image img{
                flex: 0 0 300px !important;
                height: 400px;
                margin: auto;
            }

            .testimonial-text h2 {
                font-size: 28px;
                margin-bottom: 20px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 20px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

.public-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-public-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;
    margin-top: -40px;
    background-image: linear-gradient(180deg, rgba(255, 23, 68, 0) 30%, rgba(255, 23, 68, 0.5) 60%, rgba(187, 134, 252, 1) 100%),
    url('https://i.pinimg.com/1200x/e6/f8/96/e6f896b726a7fe83a306673b2c5c4a18.jpg');
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 85%,
    transparent 100%);
    overflow: hidden;
}

.public-header {
    position: absolute;
    justify-content: center;
    margin-top: 480px;
    text-align: center;
    padding: 40px 60px;
    width: 100%;
}

.public-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.publicproj {
    text-align: center;
    padding: 40px 20px;
}

.publicproj.is-hidden {
    opacity: 0;
}

.publicproj.animate-visible {
    animation: 1.5s anim-fadeIn linear forwards;
}

.are-public {
    font-size: 32px !important;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* 344px - 349px */
@media (min-width: 344px) and (max-width: 349px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 250px;
        padding: 20px 15px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.1;
    }
    .publicproj {
        padding: 30px 12px;
    }
    .are-public {
        font-size: 14px !important;
        margin-top: -50px;
        margin-bottom: -90px !important;
    }
}

/* 350px - 360px */
@media (min-width: 350px) and (max-width: 360px) {
    .primary-public-wrapper {
        height: 320px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 200px;
        padding: 25px 18px;
    }
    .public-header h1 {
        font-size: 26px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 30px 14px;
    }
    .are-public {
        font-size: 15px !important;
        margin-bottom: -60px !important;
        margin-top: -40px;
    }
}

/* 361px - 375px */
@media (min-width: 361px) and (max-width: 375px) {
    .primary-public-wrapper {
        height: 350px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 160px !important;
        padding: 28px 20px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 32px 15px;
    }
    .are-public {
        font-size: 16px !important;
        margin-bottom: -100px !important;
        margin-top: -60px !important;
    }
}

/* 376px - 390px */
@media (min-width: 376px) and (max-width: 390px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 230px;
        padding: 30px 22px;
    }
    .public-header h1 {
        font-size: 30px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 34px 16px;
    }
    .are-public {
        font-size: 17px !important;
        margin-top: -50px;
        margin-bottom: -30px !important;
    }
}

/* 391px - 412px */
@media (min-width: 391px) and (max-width: 412px) {
    .primary-public-wrapper {
        height: 380px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 230px !important;
        padding: 32px 24px;
    }
    .public-header h1 {
        font-size: 32px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px !important;
    }
}

/* 413px - 414px */
@media (min-width: 413px) and (max-width: 414px) {
    .primary-public-wrapper {
        height: 485px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 235px !important;
        padding: 32px 25px;
    }
    .public-header h1 {
        font-size: 40px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-top: -40px !important;
        margin-bottom: -20px !important;
    }
}

/* 415px - 429px */
@media (min-width: 415px) and (max-width: 430px) {
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 33px 26px;
    }
    .public-header h1 {
        font-size: 36px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 19px;
    }
    .are-public {
        font-size: 19px !important;
        margin-top: -40px;
        margin-bottom: 30px !important;
    }
}

/* 530px - 540px */
@media (min-width: 530px) and (max-width: 540px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 450px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 260px !important;
    }
    .public-header h1 {
        font-size: 42px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 25px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px;
        margin-top: -40px;
        max-width: 100%;
    }
}

/* 760px - 768px */
@media (min-width: 760px) and (max-width: 768px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 300px !important;
        padding: 38px 45px;
    }
    .public-header h1 {
        font-size: 45px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 30px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 810px - 820px */
@media (min-width: 810px) and (max-width: 820px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 850px - 853px */
@media (min-width: 850px) and (max-width: 853px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 900px - 912px */
@media (min-width: 900px) and (max-width: 912px) {
    .public-area {
        margin: 48px auto 48px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 300px;
        padding: 39px 55px;
    }
    .public-header h1 {
        font-size: 50px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 45px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 980px - 992px */
@media (min-width: 980px) and (max-width: 992px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 600px !important;
        margin-top: -40px;
    }
    .public-header {
        margin-top: 450px;
        padding: 40px 58px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 30px !important;
        margin-bottom: 2rem;
    }
}

/* 1000px - 1024px */
@media (min-width: 1000px) and (max-width: 1024px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 400px !important;
        margin-top: -80px !important;
    }
    .public-header {
        margin-top: 150px !important;
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 58px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
        margin-top: -60px;
    }
}

/* 1270px - 1280px */
@media (min-width: 1270px) and (max-width: 1280px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 480px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 270px;  
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
        margin-top: -50px;
    }
}

/*Mission Vision CSS*/
/* Mission and Vision Section */
.mission-vision-wrapper {
    background: #000000;
    padding: 80px 20px;
    position: relative;
    overflow-x: hidden;
}

.mission-vision-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #333 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
    animation: dotPulse 4s linear infinite;
}

@keyframes dotPulse {
    0% { opacity: 0.2; }
    15% { opacity: 0.3; }
    30% { opacity: 0.45; }
    50% { opacity: 0.7; }
    70% { opacity: 0.45; }
    85% { opacity: 0.3; }
    100% { opacity: 0.2; }
}

.mission-vision-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4  0px;
    position: relative;
    z-index: 1;
}

.mission,
.vision {
    background: #0a0a0a;
    padding: 60px 40px;
    border-radius: 20px;
    border: 2px solid;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission {
    animation-delay: 0.2s;
}

.vision {
    animation-delay: 0.4s;
}

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

.mission {
    border-color: #00ff88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    animation: fadeInUp 0.8s ease-out 0.2s forwards, borderPulse 3s ease-in-out infinite;
}

.vision {
    border-color: #0088ff;
    box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    animation: fadeInUp 0.8s ease-out 0.4s forwards, borderPulseBlue 3s ease-in-out infinite;
}

.mission:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 255, 136, 0.5);
    border-color: #00ffaa;
}

.vision:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 136, 255, 0.5);
    border-color: #00aaff;
}

/* Animated glow effect */
.mission::before,
.vision::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 8s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Shimmer effect on hover */
.mission::after,
.vision::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.mission:hover::after,
.vision:hover::after {
    transform: translateX(100%);
}

@keyframes borderPulse {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 255, 136, 0.6);
    }
}

@keyframes borderPulseBlue {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 136, 255, 0.6);
    }
}

.mission h2,
.vision h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: slideInLeft 0.8s ease-out;
}

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

.mission p,
.vision p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #e0e0e0;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 968px) {
    .mission-vision-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .mission,
    .vision {
        padding: 50px 35px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 640px) {
    .mission-vision-wrapper {
        padding: 60px 15px;
    }

    .mission,
    .vision {
        padding: 40px 25px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .mission p,
    .vision p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .mission,
    .vision {
        padding: 30px 20px;
    }

    .mission h2,
    .vision h2 {
        font-size: 1.75rem;
        margin-bottom: 15px;
    }

    .mission p,
    .vision p {
        font-size: 0.9rem;
    }

}

/* FDAS Details Page Styles */
.glow-model-container {
    position: relative;
    overflow: visible;
}

.glow-model-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    opacity: 0.3;
    filter: blur(20px);
    z-index: -1;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.model-container {
    position: relative;
    z-index: 1;
}

.gradient-icon {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modern-feature-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: 0.8rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.modern-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.1), rgba(103, 28, 104, 0.1), rgba(123, 84, 177, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.modern-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
}

.modern-feature-card:hover::before {
    opacity: 1;
}

.feature-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.15), rgba(123, 84, 177, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.modern-feature-card:hover .feature-icon-wrapper {
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.25), rgba(123, 84, 177, 0.25));
    transform: scale(1.05);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.feature-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(5px);
}

.feature-item .icon-large {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 70px;
    text-align: center;
}

.feature-item .feature-content h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
}

.feature-item .feature-content p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    font-family: 'Lexend', sans-serif;
}

.gallery-section {
    padding: 80px 0;
    background: #000000;
}

.gallery {
    --size: 100px;
    display: grid;
    grid-template-columns: repeat(6, var(--size));
    grid-auto-rows: var(--size);
    margin-bottom: var(--size);
    place-items: start center;
    gap: 5px;
}

.gallery:has(:hover) img:not(:hover),
.gallery:has(:focus) img:not(:focus) {
    filter: brightness(0.5) contrast(0.5);
}

.gallery img {
    object-fit: cover;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z");
    transition: clip-path 0.25s, filter 0.75s;
    grid-column: auto / span 2;
    border-radius: 5px;
}

.gallery img:nth-child(5n - 1) { 
    grid-column: 2 / span 2 
}

.gallery img:hover,
.gallery img:focus {
    clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z");
    z-index: 1;
    transition: clip-path 0.25s, filter 0.25s;
}

.gallery img:focus {
    outline: 1px dashed black;
    outline-offset: -5px;
}

.fdas-invest-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.fdas-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(10px);
}

.benefit-icon {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.benefit-text {
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
}

/* Mobile responsive for gallery */
@media (max-width: 767px) {
    .gallery-section {
        padding: 40px 0;
    }
    
    /* Hide gallery on mobile, show product visual instead */
    .gallery {
        display: none;
    }
    
    .mobile-product-visual {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        margin: 0 auto 40px auto;
        
        /* Use FDAS-related image */
        background-image: url(https://cdn.pixabay.com/photo/2023/09/25/17/12/fire-alarm-8275669_1280.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: 8px solid transparent;
        border-radius: 15px;
        transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
    }
    
    .mobile-product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #AC3838 0%, #671C68 50%, #7B54B1 100%) 1;
    }
}

/* Hide mobile product visual on desktop */
.mobile-product-visual {
    display: none;
}

/* FDAS Details Page Additional Styles */
.fire-alarm-model-section {
    padding: 80px 0;
    background: #000000;
}

.simplex-sensor-model-section {
    padding: 80px 0;
    background: #000000;
}

.model-container {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.model-viewer-fdas {
    width: 100%;
    height: 100%;
    background: #000;
}

.fdas-footer {
    background-color: #090909;
    padding: 0px 30px;
}

.fdas-copyright {
    color: #ffffff;
    font-family: 'Lexend', sans-serif;
}

.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-left: 1rem;
}

.navbar-toggler-custom {
    margin-right: 1rem;
}

.CompanyInfo-logo {
    width: 17.1875rem;
    height: 6.25rem;
}

/* FDAS Investment Carousel Styles */
.fdas-investment-carousel {
    padding: 80px 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.fdas-investment-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05), rgba(103, 28, 104, 0.05), rgba(123, 84, 177, 0.05));
    z-index: 1;
}

.carousel-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 2;
    margin-bottom: 3rem;
}

.carousel-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-container {
    position: relative;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    transform: translateX(100%);
}

.carousel-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.carousel-content {
    display: flex;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    border-radius: 20px;
    overflow: hidden;
}

.carousel-image {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    display: none;
}

.carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.carousel-slide:hover .carousel-image img {
    transform: scale(1.05);
}

.carousel-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 6rem 3rem 3rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
    position: relative;
    z-index: 2;
}

.carousel-text h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.carousel-text p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.carousel-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 10;
    pointer-events: none;
}

.carousel-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    margin: 0 0.5rem;
}

.carousel-btn:hover {
    background: linear-gradient(135deg, rgba(172, 56, 56, 1), rgba(123, 84, 177, 1));
    transform: scale(1.1);
}

.carousel-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 10;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    transform: scale(1.2);
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .fdas-investment-carousel {
        padding: 40px 0;
    }
    
    .carousel-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    .carousel-container {
        height: 400px;
    }
    
    .carousel-content {
        flex-direction: column;
        position: relative;
    }
    
    .carousel-image {
        height: 100%;
        position: relative;
    }
    
    .carousel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .carousel-overlay {
        display: block;
        background: rgba(0, 0, 0, 0.8);
    }
    
    .carousel-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 4rem);
        padding: 2rem;
        background: transparent;
        text-align: center;
    }
    
    .carousel-text h3 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.9rem;
        margin-bottom: 0;
        padding: 0 3rem;
        text-align: center;
    }
    
    .carousel-controls {
        padding: 0 1rem;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border: none;
        background: transparent;
        color: white;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        backdrop-filter: none;
        border-radius: 0;
    }
    
    .carousel-btn:hover {
        background: transparent;
        transform: scale(1.1);
        color: rgba(255, 255, 255, 0.9);
    }
    
    .carousel-indicators {
        display: none;
    }
    
    .indicator {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        height: 350px;
    }
    
    .carousel-text {
        padding: 1.5rem;
    }
    
    .carousel-text h3 {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }
}


/* Custom CSS for dreampcbuildanditsolutionsinc */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

/* Body and layout adjustments */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000000;
    padding-top: 76px; /* Account for fixed navbar */
}


/* Navigation Styles */
.navbar {
    background-color: #000000 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    width: 100%;
    height: 80px; /* Important: Define navbar height */
}

/* Optional: Remove padding/margin that could cause centering issues */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Flex container for navbar */
.navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    width: 100%;
}

/* Logo + Text wrapper */
.navbar-brand {
    display: flex;
    align-items: center;
    margin-right: auto; /* Pushes everything else away */
    font-weight: 600;
    font-size: 1.2rem;
    color: #fff !important;
    text-decoration: none;
    transition: none;
    transform: none;
}

/* Logo Image */
.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: none;
    display: block;
    transition: none;
    transform: none;
    animation: none;
    margin-right: 8px;
}

.brand-logo:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Brand Text */
.brand-text {
    font-weight: 600;
    letter-spacing: -0.5px;
    transition: none;
    transform: none;
    animation: none;
}

/* Nav links container */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*Mobile Navbar*/
.navbar-toggler {
    background: transparent;
    border: none;
}

/* Services Slider Navigation Buttons */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    font-size: 18px;
}

.slider-nav-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

.slider-nav-btn.prev {
    left: 20px;
}

.slider-nav-btn.next {
    right: 20px;
}

/* Mobile navigation collapse background */
.navbar-collapse {
    background-color: #000000 !important;
    padding-bottom: 1rem; /* Add gap at bottom of mobile navbar dropdown */
}

/* Nav links */
.navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', sans-serif;
}

.navbar-nav .nav-link:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    color: transparent !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
    background-color: transparent !important;
    transform: none !important;
}

.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav .nav-item .nav-link.active:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

.navbar-nav .nav-link[href="index.html"].active {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

/* Remove blue focus outline from navbar links */
.navbar-nav .nav-link:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* ============ HERO SECTION STYLES ============= */

.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 260px 0 0;
}

/* Add gradient fade to hero section bottom */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 20%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.7) 80%,
        rgba(0, 0, 0, 0.9) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.gradient-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 70%;
        height: 100%;
        background: black;
}

.wave-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* First layer - Large diagonal sweep */
.wave-overlay::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 120%;
    height: 140%;
    background: 
        linear-gradient(135deg, 
        transparent 20%, 
        transparent 35%,
        rgba(160, 74, 179, 0.2) 40%,
        rgba(102, 11, 35, 0.3) 45%,
        rgba(160, 74, 179, 0.1) 55%,
        transparent 70%,
        transparent 100%
    );
        animation: diagonalFlow 11s ease-in-out infinite;
        transform-origin: center;
}

/* Second layer - Curved abstract shape */
.wave-overlay::after {
        content: '';
        position: absolute;
        bottom: 5%;
        left: -20%;
        width: 150%;
        height: 100%;
        background: 
        radial-gradient(ellipse 1200px 800px at 30% 80%, 
        rgba(160, 74, 179, 0.2) 30%, 
        rgba(102, 11, 35, 0.15) 35%,
        transparent 60%
    ),
        radial-gradient(ellipse 900px 600px at 80% 30%, 
        rgba(31, 2, 6, 0.18) 0%, 
        transparent 50%
    );
        animation: abstractMove 12s ease-in-out infinite;
        filter: blur(85px);
}

/* Third layer - Dynamic top gradient */
.gradient-background::before {
        content: '';
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translateX(-50%);
        width: 150%;
        height: 80%;
        z-index: 1;
        background: 
        linear-gradient(180deg,
        rgba(102, 11, 35, 0.15) 30%,
        rgba(160, 74, 179, 0.12) 50%,
        transparent 70%
    );
        animation: topFlow 4s ease-in-out infinite;
        filter: blur(80px);
}

    @keyframes diagonalFlow {
        0%, 100% {
        transform: translate(0%, 0%) rotate(0deg);
        opacity: 1;
}
        25% {
        transform: translate(-15%, 10%) rotate(-5deg);
        opacity: 0.8;
}
        50% {
        transform: translate(-25%, 15%) rotate(-8deg);
        opacity: 1;
}
        75% {
        transform: translate(-15%, 8%) rotate(-3deg);
        opacity: 0.9;
}
}

    @keyframes abstractMove {
        0%, 100% {
        transform: translate(0%, 0%) scale(1);
}
        33% {
        transform: translate(15%, -10%) scale(1.1);
}
        66% {
        transform: translate(-10%, 12%) scale(0.7);
}
}

    @keyframes topFlow {
        0%, 100% {
        transform: translateX(-50%) translateY(15%);
}
        50% {
        transform: translateX(-45%) translateY(25%);
}
}


.hero-content {
    z-index: 2;
    position: relative
}

#model-logo {
  width: 100%;
  max-width: 500px;
  height: 800px;
  margin-top: -200px;
}


#model-logo::part(default-camera) {
  transform: rotateX(-90deg);
}

/* Adjust positioning for the container */
.col-lg-5.position-relative {
  padding-left: 100px;
}

/* Responsive adjustments */

@media (min-width: 768px) and (max-width: 820px) {
  #model-logo {
    height: 480px;
    max-width: 420px;
    margin-top: 30px;
    margin-bottom: -35px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 45px;
    justify-content: center !important;
  }
  .call-to-action-btn{
    margin-top: 20px;
  }
}

@media (min-width: 390px) and (max-width: 430px) {
  #model-logo {
    height: 280px;
    max-width: 250px;
    margin-top: -50px;
    margin-bottom: -50px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 75px;
    justify-content: center !important;
  } 
}

@media (min-width: 375px) and (max-width: 414px) {
  #model-logo {
    height: 260px;
    max-width: 220px;
    margin-top: 25px;
    margin-bottom: -45px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 78px;
    justify-content: center !important;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  #model-logo {
    height: 550px;
    max-width: 500px;
    margin-top: 0;
    margin-bottom: 40px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 15px;
  }
}

@media (max-width: 375px) {
  #model-logo {
    height: 240px;
    max-width: 200px;
    margin-top: 0;
    margin-bottom: -70px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 65px;
    justify-content: center !important;
  }
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    
}

.manual-titleposition {
    position: absolute;
    bottom: 15rem;
    left: -10rem; /* Custom stylized position */
    z-index: 3;
    margin: 0;
    font-size: 12rem !important;
    line-height: 1;
    transition: left 0.3s ease-in-out;
}

.manual-subtitleposition {
    position: absolute;
    bottom: 6rem;
    left: 4rem;
    margin: 0;
    font-size: 8rem !important;
    line-height: 1;
    white-space: nowrap;
}

.hero-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.5rem;
    font-weight: 100;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
   
}

.hero-description {
    font-family: 'Lexend', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #b3b3b3;
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 600px;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-btn-primary {
    font-family: 'Lexend', sans-serif;
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: PulseButton 3s ease-in-out 1.6s infinite;
}

    .hero-btn-primary:hover {
        background: #ffffff;
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px  rgba(102, 11, 35, 0.4);
    }

.hero-btn-secondary {
    font-family: 'Lexend', sans-serif;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: PulseButton 3s ease-in-out 1.6s infinite;
}

    .hero-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px  rgba(102, 11, 35, 0.4); 
    }

@keyframes PulseButton {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}   

.manual-descriptionposition {
    position: absolute;
    bottom: -0.5rem;
    left: 4.5rem;
    font-size: 1.75rem;
    max-width: 700px;
    color: #b3b3b3;
    z-index: 3;
}

.manual-buttonposition {
    position: absolute;
    top: -0.6rem;
    left: 4.5rem;
    z-index: 3;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Responsive Fix for Small Screens */
@media (max-width: 1024px) {
    .hero-section {
        padding: 2rem 1rem !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-content {
        padding-top: 2.5rem;
        padding-bottom: 8rem;
        width: 100%;
    }

    .manual-titleposition,
    .manual-subtitleposition,
    .manual-descriptionposition,
    .manual-buttonposition {
        position: static !important;
        margin: 0.5rem auto !important;
        text-align: center;
        width: 85% !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .manual-titleposition {
        font-size: clamp(3.5rem, 9vw, 5rem) !important;
        line-height: 1.1;
    }

    .manual-subtitleposition {
        font-size: clamp(2rem, 7vw, 4rem) !important;
        white-space: normal !important;
        margin-top: -13px !important;
    }

    .manual-descriptionposition {
        font-size: clamp(1rem, 3vw, 1.2rem) !important;
        line-height: 1.5;
    }

    .manual-buttonposition {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        font-size: 14px;
        width: 80% !important;
        justify-content: center;
    }
}

/* ALIGN TITLE WITH SUBTITLE ON ULTRA-WIDE SCREENS */
@media (min-width: 1920px) {
    .manual-titleposition {
        left: 4rem !important; /* aligns with subtitle */
    }
}


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

/* PROJECTS SECTION STYLES */
.projects-section {
    padding: 10px 0;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin-top: -115px;
}

/* Hero to Projects Transition Overlay */
.hero-projects-overlay {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 8%,
        rgba(0, 0, 0, 0.4) 15%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0.75) 35%,
        rgba(0, 0, 0, 0.85) 45%,
        rgba(0, 0, 0, 0.9) 50%,
        rgba(0, 0, 0, 0.85) 55%,
        rgba(0, 0, 0, 0.75) 65%,
        rgba(0, 0, 0, 0.6) 75%,
        rgba(0, 0, 0, 0.4) 85%,
        rgba(0, 0, 0, 0.2) 92%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 2;
    margin-top: -200px;
    margin-bottom: -200px;
    pointer-events: none;
}

    .projects-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        pointer-events: none;
    }

    .projects-section > .container {
        position: relative;
        z-index: 1;
    }


/* Project Cards */
.project-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 250px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-card-small {
    height: 250px;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.project-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.project-card:hover .project-card-bg {
    transform: scale(1.05);
}

.project-card-bg-pc {
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pc::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 150, 136, 0.6) 0%, rgba(0, 188, 212, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-fdas {
    background-image: url('/images/dpc-fdas.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-fdas::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 87, 34, 0.6) 0%, rgba(255, 152, 0, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-cctv {
    background-image: url('/images/dpc-cctv.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-cctv::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

    .project-card-bg-doorlock {
    background-image: url('/images/services/accessControlSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-doorlock::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-pa {
    background-image: url('/images/services/paSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pa::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(156, 39, 176, 0.6) 0%, rgba(186, 104, 200, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-led {
    background-image: url('/images/services/LEDWall.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-led::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(233, 30, 99, 0.6) 0%, rgba(240, 98, 146, 0.4) 100%);
        background-blend-mode: overlay;
    }


.project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    z-index: 2;
}

.project-card-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.project-card-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

.project-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    border-width: 2px;
    background: linear-gradient(90deg, #ff0000, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082, #ee82ee, #ff0000, #ff0000);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

 .project-card-icon :hover{
    /* To make the text itself look like a gradient */
    background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    -webkit-background-clip: text; /* Clip the gradient to the shape of the text */
    background-clip: text; /* Standard property for compatibility */
    -webkit-text-fill-color: transparent; /* Make the text invisible to show the clipped background */
    transform: scale(1.3);
    border-color: rgba(255, 255, 255, 0.2);
 }

.project-card-icon i {
    color: #ffffff !important;
    font-size: 1rem;
}

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

    .projects-description {
        font-size: 1rem;
    }

}

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

    .projects-title,
    .projects-subtitle {
        font-size: 2rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .project-card,
    .project-card-small {
        height: 200px;
    }

    .project-card-title {
        font-size: 1.1rem;
    }

    .project-card-overlay {
        padding: 1.5rem;
    }
    
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .project-card-title {
        font-size: 1rem;
    }

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

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

.projects-header {
    position: relative;
    height: 450px;
    padding: 60px 0;
    margin-bottom: 60px;
    margin-left: -15px;
    margin-right: -15px;
    overflow: visible;
    background-image: url('/images/dpc-project-img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Add gradient fade to projects header top */
.projects-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.1) 85%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.projects-header::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 300px;
    background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
    filter: blur(70px) brightness(1.5);
    z-index: 1;
    opacity: 1.2;
}
.projects-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .projects-header-content {
        padding: 0px 20px;
        position: relative;
        z-index: 2;
        text-align: center;
        margin-top: -200px;
    }
    .projects-header {
        height: 250px;
        margin-top: 9px;
        background-attachment: scroll;
    }
    .projects-header::after {
        content: "";
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
        filter: blur(70px);
        z-index: 1;
    }
}
.projects-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 300;
}

.projects-section-title {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Responsive Design for Header */
@media (max-width: 992px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.8rem;
    }

    .projects-description {
        font-size: 1.1rem;
        padding: 0 2rem;
    }
}

@media (max-width: 768px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.2rem;
    }

    .projects-description {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .projects-section-title {
        font-size: 1.3rem;
    }
}

/* Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

.projects-subtitle {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}





/* === FINAL OVERRIDE for .projects-section-title === */
.projects-section-title {
    margin-top: 50px;
    padding-top: 180px;
    padding-bottom: 50px;
    font-size: 10rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
    opacity: 1; 
}

.projects-section-title:hover{
    transform: translateY(-8px) scale(1.1);
}

@media (max-width: 992px) {
    .projects-section-title {
        font-size: 6rem;
    }
}

@media (max-width: 768px) {
    .projects-section-title {
        font-size: 4rem;
    }
}

@media (max-width: 576px) {
    .projects-section-title {
        font-size: 2.8rem;
    }
}

/* Logo Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

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

/* Responsive Design for Hero Section */
@media (max-width: 992px) {
    .hero-title,
    .hero-subtitle {
        font-size: 3.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 60px 0;
        text-align: center;
        background-color: #000000;
        margin-top: 5rem;
    }

    .hero-title,
    .hero-subtitle {
        font-size: 2.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-title,
    .hero-subtitle {
        font-size: 2rem;
        
    }

    .hero-logo {
        width: 150px;
        height: 150px;
    }

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

/* Main content area */
.main-content {
    min-height: calc(100vh - 140px);
    padding: 2rem 0;
    margin-top: 90px; /* Same as navbar height */
}

/* Container adjustments */
.container {
    max-width: 1200px;
}

/* Remove default margins from headings */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}

/* Button styles */
.btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0a58ca;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
    }

/* Card styles */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }

/* Footer styles */
footer {
    background-color: #000000 !important;
    margin-top: auto;
}
footer a {
    transition: color 0.3s ease;
}
footer a:hover {
    color: #0d6efd !important;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .CompanyInfo-footer, .CompanyServices-footer {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        padding-bottom: 15px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .brand-text {
        display: none;
    }

    .brand-logo {
        width: 32px;
        height: 32px;
        
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0;
    }

    body {
        padding-top: 70px;
    }
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Utility classes */
.text-gradient {
    background: linear-gradient(45deg, #0d6efd, #6610f2);
    -webkit-text-fill-color: transparent;
}

.shadow-custom {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Focus states for accessibility */
.nav-link:focus,
.btn:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Contact Hero Section */
.contact-hero {
    min-height: 100vh;
    background: #000000;
    display: flex;
    align-items: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

    .contact-hero .container {
        position: relative;
        z-index: 2;
    }

/* Hero Title */
.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-align: center;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
 }


.sync-text {
    background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Hero Subtitle */
.hero-subtitle {
    font-family: 'Lexend', sans-serif;
    font-size: 1.2rem;
    color: white;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* Contact Form Container */
.contact-form-container {
    background: #000000;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #FDFDFD;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 20px rgba(255, 102, 102, 0.3), 0 0 40px rgba(255, 137, 76, 0.2), 0 0 60px rgba(144, 255, 85, 0.2), 0 0 80px rgba(123, 148, 246, 0.2), 0 0 100px rgba(255, 119, 241, 0.2);
}

    .contact-form-container::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
        background-size: 300% 300%;
        border-radius: 20px;
        z-index: -1;
        animation: gradientShift 3s ease-in-out infinite;
    }

    .contact-form-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000000;
        border-radius: 18px;
        z-index: -1;
    }

/* Form Inputs */
.contact-input,
.contact-textarea {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #ffffff;
    padding: 15px 20px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .contact-input:focus,
    .contact-textarea:focus {
        background: rgba(255, 255, 255, 0.05);
        border-color: #4ecdc4;
        box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
        color: #ffffff;
    }

    .contact-input::placeholder,
    .contact-textarea::placeholder {
        color: rgba(255, 255, 255, 0.6);
        font-family: 'Lexend', sans-serif;
    }

.contact-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Submit Button */
.contact-submit-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #ffffff;
    padding: 15px 40px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
}

    .contact-submit-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #4ecdc4;
        color: #4ecdc4;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
    }

    .contact-submit-btn:active {
        transform: translateY(0);
    }

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

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .contact-form-container {
        padding: 30px 20px;
        margin: 0 15px;
    }

    .contact-input,
    .contact-textarea {
        padding: 12px 15px;
    }

    .contact-submit-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
        
    }

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

    .contact-form-container {
        padding: 25px 15px;
    }
}


/* Social Icons Container */
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: nowrap;
}

/* Individual Social Icon Styling */
.social-icon {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
    transform: translateY(0);
}

    /* Hover state for the container */
    .social-icon:hover {
        transform: translateY(-8px) scale(1.1);
    }

    /* Icon image styling */
    .social-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: all 0.3s ease;
        filter: brightness(0.9);
    }

    /* Image hover effect - Glowing lines/outlines */
    .social-icon:hover img {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
        animation: glowPulse 2s ease-in-out infinite;
    }

/* Pulsing glow animation */
@keyframes glowPulse {
    0%, 100% {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
    }

    50% {
        filter: brightness(1.4) contrast(1.2) drop-shadow(0 0 12px #FF6666) drop-shadow(0 0 16px #FF894C) drop-shadow(0 0 20px #90FF55) drop-shadow(0 0 24px #7B94F6) drop-shadow(0 0 28px #FF77F1);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .social-icons {
        gap: 15px;
        padding: 15px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .social-icons {
        gap: 10px;
        padding: 10px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 45px;
        height: 45px;
    }
}

/* Address styling with Lexend font */
address {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem; /* small font size */
    margin-bottom: 1rem; /* mb-3 equivalent */
    font-style: normal; /* Remove default italic styling from address element */
    line-height: 1.5;
}

/* Gradient hover for address */
address.text-white:hover {
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}

/* Alternative class-based approach if you prefer */
.address-lexend {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    font-style: normal;
    line-height: 1.5;
}

/* Menu and Help Center Section Headers */
.col-md-2 h6 {
    font-family: 'Lexend', sans-serif;
    color: #000000;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Menu and Help Center Lists */
.col-md-2 ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Menu and Help Center List Items */
.col-md-2 ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

/* Menu and Help Center Links */
.col-md-2 ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Hover effects for links */
.col-md-2 ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* Gradient hover for CompanyServices-footer links */
.CompanyServices-footer a:hover {
    color: transparent !important;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
}

/* Alternative more specific selectors if needed */
.menu-section h6,
.help-center-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #555555;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.menu-section ul,
.help-center-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-section ul li,
.help-center-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.menu-section ul li a,
.help-center-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.menu-section ul li a:hover,
.help-center-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* General footer section styling with Lexend */
.footer-section {
    font-family: 'Lexend', sans-serif;
}

.footer-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #ffffff;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.footer-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.footer-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.footer-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/*============= SERVICES =============*/

.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.offers-firsttitle {
    font-family: 'Lexend', sans-serif;
    font-size: 3rem;
    font-weight: 200;
    color: #ffffff;
    margin-bottom: 0;
    animation: fadeInDown 0.8s ease-out;
}

.offers-secondpctitle {
    background: linear-gradient(to right, #a7363c, #671C68, #7B54B1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondcctvtitle {
    background: linear-gradient(to right, #5CE1FF, #5CFFB8, #56D86A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondfdastitle {
    background: linear-gradient(to right, #FF6666, #C34814, #F3A335);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-seconddoorlocktitle {
    background: linear-gradient(to right, #BA1022, #EC0120, #FD6A59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.video-overlay-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.video-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: white;
    
}

/* RESPONSIVE - Video Overlay */

/* Ultra-wide screens (1440px+) */
@media (min-width: 1440px) {
    .video-overlay-title {
        font-size: 5rem;
        margin-bottom: 1.5rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 18px 48px;
        font-size: 1.1rem;
    }
}

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .video-overlay-title {
        font-size: 4.5rem;
        margin-bottom: 1.3rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.3rem;
        margin-bottom: 1.8rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 16px 44px;
        font-size: 1rem;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .video-overlay-title {
        font-size: 4rem;
        margin-bottom: 1.2rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.6rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 15px 40px;
        font-size: 0.95rem;
    }
}

/* Tablet landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .video-overlay-title {
        font-size: 3rem;
        margin-bottom: 1rem;
        text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 1rem;
        margin-bottom: 1.4rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 36px;
        font-size: 0.9rem;
    }
}

/* Tablet portrait (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 12px 32px;
        font-size: 0.85rem;
    }
}

/* Mobile large (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2rem;
        margin-bottom: 0.7rem;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 11px 28px;
        font-size: 0.8rem;
    }
}

/* Mobile small (320px - 479px) */
@media (max-width: 479px) {
    .video-overlay-container {
        height: 100vh; /* Increased from 60vh to 80vh for taller mobile video section */
    }
    
    .video-overlay-content {
        padding: 0 2rem; /* Increased padding for mobile */
        text-align: center; /* Center align content on mobile */
        width: 90%; /* Ensure content doesn't reach edges */
    }
    
    /* Fix about video for mobile */
    .about-video {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 250px !important;
        object-fit: cover;
        margin-top: 0 !important;
    }
    
    .col-lg-5.col-md-12.d-flex.justify-content-center.align-items-start.position-relative {
        width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Stack mission and vision cards vertically on mobile */
    .mission-vision-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Center projects header text on mobile */
    .projects-header {
        height: auto !important;
        min-height: 100vh;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-attachment: scroll !important;
    }
    
    .projects-header-content {
        margin-top: 0 !important;
        padding: 2rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: auto !important;
    }
    
    .video-overlay-title {
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.75rem;
        margin-bottom: 0.9rem;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 10px 24px;
        font-size: 0.75rem;
    }
}

/* ENHANCED TITLE ANIMATION */
.video-overlay-title {
    font-family: "Space Grotesk";
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    animation: titleEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               titleGlow 3s ease-in-out 1.2s infinite;
    opacity: 0;
}

/* Title entrance animation with bounce effect */
@keyframes titleEntrance {
    0% {
        opacity: 0;
        transform: translateY(-80px) scale(0.5) rotateX(90deg);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: translateY(10px) scale(1.05) rotateX(-5deg);
        filter: blur(0px);
    }
    80% {
        transform: translateY(-5px) scale(0.98) rotateX(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0px);
    }
}


@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 30px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 50px rgba(255, 255, 255, 0.6),
                     0 0 70px rgba(172, 56, 56, 0.4);
    }
}

.video-overlay-subtitle {
    font-family: "Lexend";
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    animation: subtitleFade 1s ease-out 0.3s backwards;
}

@keyframes subtitleFade {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


.video-overlay-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 50px;
    font-family: "Lexend";
    font-weight: 400;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    position: relative;
    overflow: hidden;
    animation: buttonEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulse 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


@keyframes buttonEntrance {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}


.video-overlay-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}


.video-overlay-button:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.7),
                0 0 50px rgba(172, 56, 56, 0.4);
    
}

.video-overlay-button:hover::before {
    animation: shimmer 1s infinite;
}

.video-overlay-button:active {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.6);
}

/* Ripple effect on click */
.video-overlay-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s, opacity 0.6s;
    opacity: 0;
}

.video-overlay-button:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}
/* ANIMATIONS */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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


@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* SLIDER CONTAINER STYLES */
.services-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000000;
    margin-top: 0;
    padding-top: 5px;
}

.services-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 400%;
}

/* 2. The Wrapper (The Sliding Track) */
#sliderWrapper {
    display: flex;          /* CRITICAL: Lines the slides (sections) up horizontally */
    width: 400%;            /* Total width: 4 slides * 100% = 400% */
    height: 100%;
    /* CRITICAL: This property makes the transition smooth */
    transition: transform 0.6s ease-in-out; 
}

/* 3. The Individual Slides (The content sections) */
#sliderWrapper > .offers-section {
    width: 25%;             /* Each slide takes up 1/4 of the 400% width */
    flex-shrink: 0;         /* CRITICAL: Prevents the slides from shrinking */
    height: 100%;
    box-sizing: border-box; 
    /* You may want to add overflow-y: auto; here if content might exceed the height */
}

/* SLIDER INDICATORS */
.slider-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    animation: indicatorPulse 2s ease-in-out infinite;
}

.indicator.active {
    background: white;
    transform: scale(1.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: none;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

@keyframes indicatorPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* COMPANY OFFER SECTION STYLES */
.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
    flex: 0 0 25%;
    width: 25%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    margin-top: -70px;
    transform: translateY(0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    position: relative;
}

.offers-section.active {
    opacity: 1;
    transform: translateY(0);
}

.offers-section.d-none {
    display: none !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.offers-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* MAP STYLES WITH ANIMATIONS */
.map-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem 0;
    width: 100%;
    overflow-x: hidden;
}

.map-scaler {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.map-scaler-inner {
    position: relative;
    width: 300px;
    height: 523px;
    transform: scale(calc(min(100vw, 1400px) / 1400));
    transform-origin: top center;
}

.map-container {
    position: absolute;
    width: 300px;
    height: 523px;
    top: 0;
    left: 0;
    animation: mapAppear 1.2s ease-out;
}

@keyframes mapAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

.label {
    position: absolute;
    color: white;
    text-align: center;
    animation: labelSlideIn 0.8s ease-out backwards;
}

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

.label-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.label-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.count-count {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    animation: countUp 1.5s ease-out;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.count-text {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 1;
}

.pc-icon {
    width: 94px;
    height: auto;
    animation: floatAnimation 3s ease-in-out infinite;
}

.left-label {
    top: 50%;
    left: -250px;
    transform: translateY(-50%);
    animation-delay: 0.2s;
}

.right-label.top {
    top: 60px;
    right: -250px;
    animation-delay: 0.4s;
}

.right-label.bottom {
    bottom: 100px;
    right: -350px;
    animation-delay: 0.6s;
}

.line-image {
    position: absolute;
    width: 160px;
    height: auto;
    transform: translateY(-100%);
    transform-origin: bottom left;
    animation: drawLine 1s ease-out backwards;
}

@keyframes drawLine {
    from {
        opacity: 0;
        transform: translateY(-100%) scaleY(0);
    }
    to {
        opacity: 1;
        transform: translateY(-100%) scaleY(1);
    }
}

/* GRADIENT BUTTONS */
.gradientpccolor-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 25%, #7B54B1 75%, #000000 100%);
}

.gradientcctvcolor-button {
    background: linear-gradient(135deg, #5CE1FF 0%, #5CFFB8 25%, #56D86A 75%, #000000 100%);
}

.gradientfdascolor-button {
    background: linear-gradient(135deg, #FF6666 0%, #C34814 25%, #F3A335 75%, #000000 100%);
}

.gradientdoorlockcolor-button {
    background: linear-gradient(135deg, #BA1022 0%, #EC0120 25%, #FD6A59 75%, #000000 100%);
}

.gradient-button {
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(172, 56, 56, 0.3);
    outline: none;
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    animation: buttonAppear 0.8s ease-out 0.8s backwards;
}

@keyframes buttonAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gradient-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(172, 56, 56, 0.4);
}

.gradient-button:active {
    transform: translateY(0);
}

/* GRADIENT LOOP WITH SHADOW */
@keyframes gradientCycle {
    0% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(0deg);
    }
    50% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(180deg);
    }
    100% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(360deg);
    }
}

.glow-gradient {
    border: none;
    border-radius: 0;
    animation: gradientCycle 6s linear infinite;
    transition: all 0.3s ease-in-out;
}

/* Responsive fallback */
@media (max-width: 600px) {
    .left-label,
    .right-label.top,
    .right-label.bottom {
        position: static;
        text-align: center;
        margin-top: 1rem;
        transform: none;
    }

    .label-content {
        justify-content: center;
    }

    .line-image {
        display: none;
    }

    .offers-firsttitle {
        font-size: 2.5rem;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }

    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}

/* RESPONSIVE - Keep PC design at any screen size */

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .map-scaler-inner {
        transform: scale(0.85);}
    .offers-firsttitle {
        font-size: 2.5rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }
    .left-label,
    .right-label.top,
    .right-label.bottom {
        font-size: 1rem;
    }
    .gradient-button{
        margin-top: -70px !important;
        padding: 15px 25px !important;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .offers-section {
        margin-top: -20px;
    }
    .map-scaler-inner {
        transform: scale(0.68);
        margin-top: -50px;
    }
    .offers-firsttitle {
        font-size: 2rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2.5rem;
    }
    .gradient-button{
        margin-top: -170px;
        padding: 11px 25px;
        font-size: 1rem;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.95rem;
    }

            .fp-wrapper {
                padding: 0 1rem;
            }

            .fp-main-section {
                padding: 60px 0;
            }

            .fp-header-title {
                font-size: clamp(24px, 4vw, 32px);
                margin-bottom: 25px;
            }

            .fp-card {
                height: 450px !important;
            }

            .fp-card-category {
                font-size: 12px !important;
            }

            .fp-card-content {
                padding: 20px !important;
            }

            .fp-card-title {
                font-size: 1.4rem !important;
                margin-bottom: 10px !important;
            }

            .fp-card-description {
                font-size: 0.80rem !important;
                margin-bottom: 18px;
            }

            .fp-card-tag {
                font-size: 12px !important;
                margin: auto;
                margin-top: -10px;
            }
            }

            .fp-image-wrapper {
                height: 170px !important;
            }

            .fp-all-button {
                margin-top: -20px;
                padding: 12px 30px !important;
                font-size: 15px !important;
            }


@media (max-width: 540px) {
    .offers-section {
        padding: 30px 15px;
        margin-top: -60px !important;
    }

    .offers-header {
        margin-bottom: 30px;
    }

    .offers-firsttitle {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    /* ===== MAP CONTAINER ===== */
    .map-wrapper {
        margin-bottom: 40px;
        position: relative;
        overflow: visible !important;
        padding: 0 100px;
        margin-left: 50px;
    }

    .map-scaler {
        padding: 0;
        position: relative;
        width: 100%;
        overflow: visible !important;
        margin: auto;
    }

    .map-scaler-inner {
        transform: scale(0.85) !important;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        width: 100%;
        height: auto;
        overflow: visible !important;
        margin: auto;
    }

    .map-container {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible !important;
    }

    .map-image {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* ===== DOTTED LINES ===== */
    .line-image {
        position: absolute !important;
        max-width: 60px;
        height: auto;
    }

    /* ===== LABELS/METRICS ===== */
    .label {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .label-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .label-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .count-count {
        font-size: 1.8rem;
        font-weight: bold;
        white-space: nowrap;
    }

    .count-text {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .pc-icon {
        width: 50px;
        height: 50px;
    }

    /* Position labels specifically for mobile */
    .left-label {
        left: 10px;
        top: 55%;
        transform: translateY(-50%);
    }

    .right-label.top {
        right: 10px;
        top: 30%;
        transform: translateY(-50%);
    }

    .right-label.bottom {
        right: 10px;
        bottom: 28%;
        transform: translateY(50%);
    }

    /* ===== BUTTON ===== */
    .gradient-button {
        padding: 12px 32px;
        font-size: 0.9rem;
        margin-top: -100px !important;
        width: auto;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 2.3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.85rem;
    }
}

/* Tablets landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .offers-section{
        margin-top: -80px !important;
    }
    .map-scaler-inner {
        transform: scale(0.90);
    }
    
    .left-label {
        left: -150px;
    }
    
    .right-label.top {
        right: -100px;
        top: -30px;
    }
    
    .right-label.bottom {
        right: -190px;
        top: 220px;
    }
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
        margin-left: -100px !important;
        margin-top: 150px !important;
    }
     .gradient-button {
        padding: 14px 28px;
        font-size: 20px;
        margin-top: 40px !important;
    }

}

/* Tablets portrait (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .map-scaler-inner {
        transform: scale(0.65);
    }
    
    .left-label {
        left: -180px;
    }
    
    .right-label.top {
        right: -180px;
    }
    
    .right-label.bottom {
        right: -220px;
    }
    
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
    }
}

/* Mobile large (361px - 480px) */
@media (max-width: 480px) {
    .offers-section {
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.70) !important;
        margin-left: -60px;
    }
    
    .map-wrapper {
        padding: 2rem 0;
    }
    
    .left-label {
        left: -50px;
    }
    
    .right-label.top {
        right: -30px;
        margin-top: -20px;
        position: absolute;
    }
    
    .right-label.bottom {
        margin-right: -100px !important;
        bottom: 150px;
        position: absolute;
    }
    
    .count-count {
        font-size: 40px;
    }
    
    .count-text {
        font-size: 18px;
    }
    
    .pc-icon {
        width: 60px;
    }
    
    .line-image {
        width: 120px;
    }
    
    .offers-firsttitle {
        font-size: 2rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2.5rem;
    }
    
    .gradient-button {
        padding: 14px 28px;
        font-size: 16px;
    }
}

/* Mobile small (320px - 360px) */
@media (max-width: 360px) {
    .offers-section {
        padding: 40px 0;
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.65) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    
    .left-label {
        left: -70px;
    }
    
    .right-label.top {
        margin-right: 30px;
        margin-top: 20px !important;
    }
    
    .right-label.bottom {
        margin-right: -90px !important;
        bottom: 120px;
        position: absolute;
    }
    
    .count-count {
        font-size: 32px;
    }
    
    .count-text {
        font-size: 16px;
    }
    
    .pc-icon {
        width: 50px;
    }
    
    .line-image {
        width: 100px;
    }
    
    .offers-firsttitle {
        font-size: 1.5rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2rem;
    }
    
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -210px !important;
    }
}

@media (max-width: 375px) {
    .offers-section {
        padding: 40px 0;
    }
    
    .map-scaler-inner {
        transform: scale(0.60) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -260px !important;
    }
}

@media (min-width: 912px) {
            .fp-wrapper {
                padding: 0 2rem;
                max-width: 600px;
            }

            .fp-main-section {
                padding: 80px 0;
            }

            .fp-header-title {
                font-size: clamp(28px, 5vw, 40px);
                margin-bottom: 30px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                margin-bottom: 40px;
            }

            .fp-card-content {
                padding: 30px;
            }

            .fp-card-title {
                font-size: 1.8rem;
                margin-bottom: 15px;
            }

            .fp-card-description {
                font-size: 1rem;
                line-height: 1.6;
                margin-bottom: 20px;
            }

            .fp-image-wrapper {
                height: 280px;
            }

            .fp-all-button {
                padding: 16px 50px;
                font-size: 18px;
            }
        }

        /* Tablet Medium (853px to 911px) */
        @media (min-width: 853px) and (max-width: 911px) {
            .fp-wrapper {
                padding: 0 1.5rem;
                max-width: 90px;
            }

            .fp-main-section {
                padding: 70px 0;
            }

            .fp-header-title {
                font-size: clamp(26px, 4.5vw, 36px);
                margin-bottom: 28px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 16px;
                margin-bottom: 35px;
            }

            .fp-card-content {
                padding: 26px;
            }

            .fp-card-title {
                font-size: 1.6rem;
                margin-bottom: 13px;
            }

            .fp-card-description {
                font-size: 0.95rem;
                line-height: 1.6;
                margin-bottom: 18px;
            }

            .fp-image-wrapper {
                height: 260px;
            }

            .fp-all-button {
                padding: 15px 48px;
                font-size: 17px;
            }
        }


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

/* GLOBAL RESET/BEST PRACTICE for Responsiveness */
* {
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* ========================================================================= */
/* CORE SHOWCASE BLOCK & FONT SCALING */
/* ========================================================================= */

.core-showcase-block {
    background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
    /* Use relative padding unit for vertical spacing, scales better than a fixed 120px */
    padding: 10vh 0; 
    position: relative;
    overflow: hidden;
}

.core-showcase-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.core-showcase-block::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    animation: core-pulse-bg 8s ease-in-out infinite;
}

@keyframes core-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

.showcase-header {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.showcase-subtext {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 3rem; /* Reduced from 4rem */
    font-weight: 300;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
}

.concept-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease-out, transform 0.8s ease-out;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none; 
}

.concept-tile:nth-child(1) { transition-delay: 0.1s; }
.concept-tile:nth-child(2) { transition-delay: 0.2s; }
.concept-tile:nth-child(3) { transition-delay: 0.3s; }
.concept-tile:nth-child(4) { transition-delay: 0.4s; }
.concept-tile:nth-child(5) { transition-delay: 0.5s; }
.concept-tile:nth-child(6) { transition-delay: 0.6s; }

.showcase-tile-container {
    /* Auto-fit is the key for responsiveness here */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.concept-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.concept-tile::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(172, 56, 56, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.concept-tile:hover {
    transform: translateY(-15px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
}

.concept-tile:hover::before {
    transform: scaleX(1);
}

.concept-tile:hover::after {
    width: 400px;
    height: 400px;
}

.concept-tile:hover .concept-icon-wrap {
    transform: scale(1.1) rotateY(360deg);
}

.concept-tile:hover .concept-icon-wrap svg {
    animation: icon-bounce 0.6s ease;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.concept-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.concept-icon-wrap svg {
    width: 40px;
    height: 40px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.concept-title-text {
    font-family: "Space Grotesk";
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-title-text {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.concept-detail-text {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-detail-text {
    color: #ccc;
}

/* ========================================================================= */
/* METRIC SHOWCASE ZONE */
/* ========================================================================= */

.metric-showcase-zone {
    font-family: "Space Grotesk";
    background: #000000;
    padding: 100px 0;
    position: relative;
}

.data-figure-layout {
    /* Auto-fit is great here, scales well */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.figure-unit-card {
    text-align: center;
    animation: slightFloat 3s ease-in-out infinite alternate; 
}

.figure-unit-card:nth-child(even) {
    animation-delay: 0.3s;
}

.figure-unit-card:nth-child(3n) {
    animation-delay: 0.9s;
}

.figure-count-value {
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.figure-description-text {
    font-size: 1.2rem;
    color: white;
    font-weight: 300;
}

@keyframes slightFloat {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

/* ========================================================================= */
/* PROCESS SECTION */
/* ========================================================================= */

.process-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.container-our {
    text-align: center;
}

.section-title-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    
}

.section-subtitle-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 50px; /* Reduced from 100px */
    font-weight: 300;
    position: relative;
    z-index: 2;
    animation: subtext-slide-in 1s ease-out 0.2s backwards; 
}

.process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(103, 28, 104, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 60% 70%, rgba(123, 84, 177, 0.1) 0%, transparent 40%);
    animation: gradientShift 10s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.process-timeline {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.process-step {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
    position: relative;
    opacity: 0; 
    transform: translateX(0); 
    transition: none; 
}

.process-step.animate-left {
    animation: stepSlideIn 0.8s ease-out forwards; 
}

.process-step:nth-child(even).animate-right {
    animation: stepSlideInRight 0.8s ease-out forwards;
}


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

.process-step:nth-child(even) {
    flex-direction: row-reverse;
}

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

.step-number {
    font-family: "Space Grotesk";
    width: 60px;
    height: 60px;
    color: white;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
    transition: all 0.4s ease;
}

.process-step:hover .step-number {
    transform: scale(1.15) rotateZ(360deg);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.step-content {
    color: white;
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.step-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.process-step:hover .step-content {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(172, 56, 56, 0.3);
    transform: translateX(10px);
}

.process-step:nth-child(even):hover .step-content {
    transform: translateX(-10px);
}

.process-step:hover .step-content::before {
    opacity: 1;
}

.step-title {
    font-family: "Space Grotesk";
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.process-step:hover .step-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step-description {
    font-family: "Lexend";
    color:white;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.process-step:hover .step-description {
    color: #ccc;
}

/* ========================================================================= */
/* FUTURE PROJECTS (FP) SECTION */
/* ========================================================================= */

.fp-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.fp-main-section {
    padding: 80px 0; /* Reduced from 120px 0 */
    position: relative;
    overflow: hidden;
}

.fp-main-section::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(123, 84, 177, 0.05) 0%, transparent 50%);
    animation: fp-pulse-bg 12s ease-in-out infinite;
}

@keyframes fp-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

/* ------------------------------------------------ */
/* SCROLL ANIMATION STARTING STATES (HIDDEN) */
/* ------------------------------------------------ */

/* The hidden class sets the initial position and opacity, which is then animated away */
.hidden-scroll {
    opacity: 0;
    /* Use 'will-change' for performance hint */
    will-change: transform, opacity; 
}

/* Header Hidden State */
.fp-header-title.hidden-scroll {
    transform: translateY(-30px);
}

/* Card Hidden State */
.fp-card.hidden-scroll {
    transform: translateY(50px) scale(0.9);
}

/* Button Link Hidden State */
.fp-all-projects-link.hidden-scroll {
    transform: translateY(30px);
}


/* ------------------------------------------------ */
/* SCROLL ANIMATION TRIGGERED STATES (VISIBLE) */
/* ------------------------------------------------ */

/* The animated class applies the animation keyframe */

/* Header Animation Trigger */
.fp-header-title.animated {
    animation: fp-header-slide-in 1s ease-out forwards;
}

/* Card Animation Trigger */
.fp-card.animated {
    /* The animation-delay is set dynamically by JavaScript based on data-delay */
    animation: fp-card-fade-in 0.9s ease-out forwards;
}

/* Button Link Animation Trigger */
.fp-all-projects-link.animated {
    animation: fp-btn-fade-in 1s ease-out forwards;
}


/* ------------------------------------------------ */
/* ORIGINAL KEYFRAMES (Keep these as they are) */
/* ------------------------------------------------ */

@keyframes fp-header-slide-in {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fp-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fp-btn-fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------------ */
/* REST OF ORIGINAL STYLES (Keep as they are) */
/* ------------------------------------------------ */

.fp-header-title {
    font-family: "Space Grotesk";
    color: white;
    text-align: left;
    /* Fluid font size: min 28px, preferred 5vw, max 40px */
    font-size: clamp(28px, 5vw, 40px); 
    font-weight: 500;
    margin-bottom: 30px; /* Reduced from 50px */
    position: relative;
    z-index: 2;
}

.fp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px; /* Reduced from 40px */
    position: relative;
    z-index: 2;
    margin-bottom: 40px; /* Reduced from 60px */
}

.fp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.fp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
    z-index: 2;
}

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

.fp-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.fp-image-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.fp-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.fp-card:hover .fp-card-image {
    transform: scale(1.1) rotate(2deg);
}

.fp-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-card:hover .fp-image-overlay {
    opacity: 1;
}

.fp-view-button {
    padding: 9px 28px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.fp-card:hover .fp-view-button {
    transform: translateY(0);
    opacity: 1;
}

.fp-view-button:hover {
    transform: translateY(0) scale(1.05);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.5);
}

.fp-card-content {
    padding: 30px;
}

.fp-card-category {
    font-family: "Lexend";
    display: inline-block;
    padding: 6px 16px;
    background: rgba(172, 56, 56, 0.2);
    border: 1px solid rgba(172, 56, 56, 0.4);
    border-radius: 20px;
    font-size: 14px;
    color: #AC3838;
    margin-bottom: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-category {
    background: rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.6);
}

.fp-card-title {
    font-family: "Space Grotesk";
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fp-card-description {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.fp-card:hover .fp-card-description {
    color: #ccc;
}

.fp-card-tags {
    font-family: "Lexend";
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fp-card-tag {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    font-size: 13px;
    color: #999;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-tag {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(172, 56, 56, 0.3);
    color: #bbb;
}

.fp-all-projects-link {
    text-align: center;
    position: relative;
    z-index: 2;
}

.fp-all-button {
    font-family: "Lexend";
    padding: 16px 50px;
    background: transparent;
    border: 2px solid rgba(172, 56, 56, 0.5);
    border-radius: 30px;
    color: white;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.fp-all-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    z-index: -1;
}

.fp-all-button:hover {
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.fp-all-button:hover::before {
    width: 300px;
    height: 300px;
}


    

/* ========================================================================= */
/* FAQ SECTION */
/* ========================================================================= */

.faq-section {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.container-faq {
    text-align: center;
}

.section-title-faq {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-subtitle-faq {
    font-family: "Lexend";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 4rem;
    font-weight: 300;
    position: relative;
    z-index: 2;
}

.faq-container {
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.faq-item {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    margin-bottom: 30px;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* --- NEW SCROLL ANIMATION CSS --- */

/* 1. Initial State (Hidden and slightly offset) */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}

/* 2. Target State (Visible and in final position) - added by JavaScript */
.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Staggered Delay for FAQ items */
.faq-item.scroll-animate:nth-child(1) { transition-delay: 0.1s; }
.faq-item.scroll-animate:nth-child(2) { transition-delay: 0.2s; }
.faq-item.scroll-animate:nth-child(3) { transition-delay: 0.3s; }
.faq-item.scroll-animate:nth-child(4) { transition-delay: 0.4s; }
.faq-item.scroll-animate:nth-child(5) { transition-delay: 0.5s; }

.section-title-faq.scroll-animate { transition-delay: 0s; }
.section-subtitle-faq.scroll-animate { transition-delay: 0.1s; }

/* Existing FAQ styles */

.faq-item:hover {
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.15);
}

.faq-item.active {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(172, 56, 56, 0.4);
}

.faq-question {
    font-family: "Space Grotesk";
    padding: 25px 30px;
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

.faq-question::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #AC3838, #671C68, #7B54B1);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::before {
    transform: scaleY(1);
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 35px;
}

.faq-answer {
    font-family: "Lexend";
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    color: white;
}

.faq-item.active .faq-answer {
    padding: 0 30px 25px;
    max-height: 500px;
}

.faq-toggle {
    font-size: 1.5rem;
    transition: all 0.4s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(172, 56, 56, 0.2);
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #AC3838, #7B54B1);
}

.faq-section {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.faq-section::after {
    content: "";
    position: absolute;
    bottom: 310px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}

/* ========================================================================= */
/* MEDIA QUERIES FOR RESPONSIVENESS */
/* ========================================================================= */

@media (max-width: 1024px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 150px !important; /* Slight reduction for tablets */
    }
}




/* Tablet and Smaller Devices (Max Width 992px) */
@media (max-width: 992px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 350px !important; /* Slight reduction for tablets */
    }
}

@media (min-width: 853px) and (max-width: 991px) {
    .data-figure-layout {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        padding: 0 1rem;
    }
    
    .figure-count-value {
        font-size: 3rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
}

@media (max-width: 550px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 200px !important; /* Slight reduction for tablets */
    }
}

/* Mobile Devices (Max Width 768px) */
@media (max-width: 768px) {
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 60px 0; /* Consistent vertical padding for mobile */
    }
    
    .showcase-tile-container {
        /* Force single column for a better mobile experience */
        grid-template-columns: 1fr; 
        gap: 15px;
    }
    
    .concept-tile {
        padding: 25px 20px; /* Reduced tile padding */
    }

    .showcase-subtext, 
    .section-subtitle-faq {
        margin-bottom: 2rem;
    }

    /* Metrics Section - Smaller font and less float */
    .figure-count-value {
        font-size: 2rem; 
    }
    
    .data-figure-layout {
        gap: -50px;
    }

    /* Process Timeline - Vertical stacking for mobile */
    .process-step {
        flex-direction: column; /* Stacks number and content vertically */
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }

    .process-step:nth-child(even) {
        flex-direction: column; /* Removes the row-reverse from even items */
    }
    
    /* Remove horizontal translations on hover for stacked layout */
    .process-step:hover .step-content,
    .process-step:nth-child(even):hover .step-content {
        transform: none; 
    }
    
    .step-number {
        margin: 0 auto 15px; /* Center the number circle and add space below */
    }
    
    .step-content {
        padding: 20px;
    }

    /* FAQ Section */
    .faq-question {
        font-size: 1rem;
        padding: 20px 25px;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 25px 20px;
    }

    /* Future Projects Card Grid - Single column on mobile */
    .fp-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .fp-card-content {
        padding: 20px;
    }
    
    .fp-image-wrapper {
        height: 220px;
    }

    .fp-all-button {
        padding: 12px 30px; 
        font-size: 16px;
    }
}

/* Small Mobile Devices (Max Width 480px) */
@media (max-width: 480px) {
    /* Reduce all main section padding further */
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 40px 0;
    }

    /* Adjust main wrapper padding for very small screens */
    .showcase-tile-container, 
    .data-figure-layout, 
    .process-timeline, 
    .faq-container, 
    .fp-wrapper {
        padding: 0 1rem; /* Minimum horizontal padding */
    }

    /* Further compress header elements */
    .showcase-subtext,
    .section-subtitle-our,
    .section-subtitle-faq {
        margin-bottom: 25px;
    }
    
    /* Metric Values */
    .figure-count-value {
        font-size: 2.2rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
    
    .concept-title-text {
        font-size: 1.3rem;
    }
    
    .fp-card-title {
        font-size: 1.5rem;
    }
}

/*============= END ==================*/
    
/* And MANY MORE SECTION STYLES */
.andmanymore-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.andmanymore-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 5rem;
    font-weight: 500;
    margin-top: -0.8rem;
    color: #ffffff;
}

.andmanymore-paragraph p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.9rem;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 2rem;
    color: #cccccc;
    line-height: 1.6;
    font-weight: 300;
}
/* Responsive tweak */
@media (max-width: 768px) {
    .andmanymore-paragraph p {
        font-size: 0.95rem;
        padding: 0 1rem;
    }
}

/* Stats container styling */
.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
    margin-top: 3rem;
    text-align: center;
}

/* Each stat item */
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 150px;
}

/* Gradient icon replacing image */
.icon-gradient {
    width: 107px;
    height: 107px;
    background: linear-gradient(90deg, #FF6666, #66BFFF, #FF66C7, #FF6666, #66BFFF, #FF66C7, #FF6666 );
    background-size: 200% 100%; /* Full span of duplicated colors */
    animation: gradientSlideSeamless 2s linear infinite;
    /* PNG mask */
    -webkit-mask-image: var(--img);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--img);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-bottom: 1rem;
}
/* Number styling */
.stat-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

/* Label styling */
.stat-label {
    font-family: 'Lexend', sans-serif;
    font-size: 2rem;
    color: #ffffff;
    font-weight: 400;
}

@keyframes gradientSlideSeamless {
    0% {
        background-position: 0% 50%;
    }

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



/* Responsive adjustments */
@media (max-width: 768px) {
    .andmanymore-title {
        font-size: 2.5rem;
        margin-top: -2rem;
    }

    .stat-item {
        max-width: 120px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.875rem;
    }

    .stat-item img {
        width: 40px;
        height: 40px;
    }

    .title-strength {
        width: 100%;
        font-size: 2.9rem !important;
        margin-top: -3rem !important;
    }

}


/* Company Strength CSS */
.company-strength {
    background-color: #000000
}
.title-strength {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.25rem;
    font-weight: 500;
    margin-top: -0.5rem;
    color: #ffffff;
    text-align:center;
}
.strTitleCard {
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
}
.card-str1.card, .card-str2.card, .card-str3.card {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-str1.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
    box-shadow: 0 0 30px rgba(123, 242, 255, 0.8),
                0 0 60px rgba(76, 168, 255, 0.6),
                0 0 90px rgba(35, 50, 215, 0.4),
                0 0 120px rgba(35, 50, 215, 0.2);
}
.card-str2.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
    box-shadow: 0 0 30px rgba(132, 9, 180, 0.8),
                0 0 60px rgba(189, 5, 149, 0.6),
                0 0 90px rgba(189, 5, 45, 0.4),
                0 0 120px rgba(189, 5, 45, 0.2);
}
.card-str3.card:hover {
     border: 3px solid;
     border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
     box-shadow: 0 0 30px rgba(243, 249, 59, 0.8),
                0 0 60px rgba(163, 249, 59, 0.6),
                0 0 90px rgba(81, 249, 59, 0.4),
                0 0 120px rgba(81, 249, 59, 0.2);
}
/*Brands Animation CSS*/
.brands-animation {
    background-color: #000000;
}
.title-brands {
    color: #FFF;
    font-size: 40px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
}
.brand-slider {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    margin: 50px auto;
}

.brand-slider-track {
    display: flex;
    width: 200%;
    height: 100%;
    animation: slideLeft 20s linear infinite;
}
.brand-slider-track > div {
    width: 50%;
    height: 100%;
    position: relative;
}
.brand-slider-track img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}


/*slider in shop*/



.brandgroup-default {
    opacity: 1;
    z-index: 1;
}

.brandgroup-hover {
    opacity: 0;
    z-index: 2;
}

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

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

/*Customer Reviews*/
.reviews {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 250px;
    padding-bottom: 250px;
    overflow: hidden;
    z-index: 0;
    border: none;
    margin-top: 20px;
}
.reviews::after {
    content: "";
    position: absolute;
    bottom: 90px;
    left: 50%;
    top: 200px;
    transform: translateX(-50%);
    width: 100%;
    height: 75%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%),
                radial-gradient(circle at center, #A04AB3 0%, #660B23 40%, #1F0206 65%, transparent 100%);
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: -1;
    border: 0;
    pointer-events: none;
}

.title-reviews {
    color: #AEAEAE;
    font-weight: 300;
    font-size: 40px;
    font-family: 'Lexend', sans-serif;
    z-index: 1;
}

.client-says {
    color: #FFF;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.client-name {
    color: #AEAEAE;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.card-reviews {
    background: rgba(9, 9, 9, 0.6);
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

.star-rating, .card-details {
    position: relative;
    top: -30px;
}

.review-img {
    width: 120px;
    height: 120px;
    top: -50px;
    position: relative;
    z-index: 2;
}
#reviewsCarousel {
    z-index: 1;
}
.carousel-control-prev, .carousel-control-next {
    width: auto;
    top: 54%;
    transform: translateY(-50%);
    opacity: 1;
}

.carousel-control-prev {
    left: -80px;
}

.carousel-control-next {
    right: -80px;
}

@media (min-width: 300px) and (max-width: 1280px) {
    .carousel-control-prev,
    .carousel-control-next {
        position: sticky;
        width: auto;
        padding: 0;
        top: 54%;
        position: absolute;
        transform: translateY(-50%);
    }

    .carousel-control-prev {
        left: 10px;
    }

    .carousel-control-next {
        right: 10px;
    }
    .reviews {
        padding: 0px 20px;
        position: relative;
    }
    .card-reviews {
        margin-top: 100px;
        height: 500px;
    }
}
/* ================ CONTACT =====================/*



/* CONTACT FORM */
.contactForm {
    position: relative;
    background-color: #090909;
    padding: 100px 0px;
    overflow: hidden;
}

    .contactForm::after {
        content: "";
        position: relative;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient( 90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06% );
        filter: blur(80px);
        border-radius: 50%;
        z-index: 0;
    }

.contactForm {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.contactForm::after {
    content: "";
    position: absolute;
    bottom: 210px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.title-contactForm {
    color: #FFF;
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactDes {
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactSync {
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
    background: linear-gradient(90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
}

.card-contactForm.card {
    border: 2px solid;
    border-color: #FDFDFD;
    border-radius: 10px;
    background: #090909;
    transform: none !important;
    transition: none !important;
    z-index: 1;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .contactForm {
        padding: 20px 20px;
    }
}

/* =================== END ======================== */

/* About Section Styles */

.about-section {
    background: #000000;
    color: #eee;
    min-height: 100vh;
    padding-top: 5rem;
    padding-bottom: 3rem;

    position: relative;
}

.about-video {
    max-width: 100%;
    height: 500px;
    object-fit: cover;
    background: #222;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    min-width: 400px;
}

.about-label {
    font-family: 'Lexend', sans-serif;
    font-weight: 200;
    font-size: 24px;
    color: #AEAEAE;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 55px;
    color: #FFFFFF;
    background: linear-gradient(
        90deg,
        #4d4c4c 0%,
        #ffffff 25%,
        #ffffff 50%,
        #ffffff 75%,
        #4d4c4c 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
}

@keyframes anim-lineUp {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }
    20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translateY(0%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes shine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


.about-lead {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: inherit;
    margin-bottom: 1rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-desc {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #AEAEAE;
    margin-bottom: 1.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}
.hero-btn-about {
    font-family: 'Lexend', sans-serif;
    color: #000000 !important;
    background: #D9D9D9;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-btn-about:hover {
        background: transparent ;
        color: #FFFFFF !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);

        background: linear-gradient(
        90deg,
        #000000 0%,
        #000000 25%,
        #000000 50%,
        #000000 75%,
        #ffffff33 100%
    );
    background-size: 200% 100%;
    -webkit-text-fill-color: white;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
    }



@media (max-width: 1024px) {
    .hero-btn-about {
        width: 90% !important;
        justify-content: center;
    }
}
@media (min-width: 300px) and (max-width: 980px) {
    .about-section {
        padding-bottom: 0.5rem;
    }
    .about-video {
        max-width: 100%;
        height: 350px;
        object-fit: cover;
        background: #222;
        border-radius: 0.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        min-width: 300px;
        margin-top: -2rem;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }

    .about-content {
        padding: 30px 30px 0 30px; /* top, right, bottom, left */
    }
    .about-btn {
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }
    .about-title,
    .about-lead,
    .about-desc,
    .about-label {
        transform: none !important;
        text-align: center;
    }
}

@media (min-width: 1024px) and (max-width: 1120px) {
    .about-content {
        padding: 20px;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }
}

/* Team Section Styles */
.team-section {
    background-color: #111;
    color: #fff;
    padding-top: 3rem;
    padding-bottom: 0;
    margin-bottom: 0;
}

.team-intro {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.team-intro-icon {
    height: 0.8em;
    margin-left: -0.3em;
    position: relative;
    top: -0.4em;
     animation: clickSimulate 1.5s ease-in-out infinite;
}

@keyframes clickSimulate {
    0%, 90%, 100% {
        transform: translateY(0) scale(1);
    }
    5% {
        transform: translateY(5px) scale(.25);
    }
    10% {
        transform: translateY(0) scale(1);
    }

}

.team-desc {
    font-size: 1rem;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
}

.team-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    font-size: 22vw;
    line-height: 1;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    margin-top: 12rem;
    padding: 0;
    display: block;
    width: 100%;
    word-break: break-word;
    transform: translateY(-120px);
}

/* Keyframes for smooth gradient shifting */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Shared styling for all category titles */
.leaders-category,
.marketing-category,
.technicians-category,
.admin-category,
.developers-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    line-height: 1;
    text-align: center;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    background-image: linear-gradient(90deg, #74FEBD, #2FA2B7, #4B18E3, #FDFDFD);
    background-size: 400% 100%;
    background-repeat: no-repeat;
    animation: gradientShift 4s linear infinite;
}

.leaders-category {
    margin-top: 13rem;
    transform: translateY(-125px);
    font-size: 320px;
    animation-delay: 0s;
}

.admin-category {
    margin-top: 1rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.marketing-category {
    margin-top: -3rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.technicians-category {
    margin-top: -1rem;
    transform: translateY(-175px);
    font-size: 195px;
    animation-delay: 1s;
}

.developers-category {
    margin-top: -3rem;
    transform: translateY(-170px);
    font-size: 210px;
    animation-delay: 1.5s;
}

.leaders-group,
.admin-group,
.marketing-group,
.technicians-group,
.developers-group {
    margin-bottom: 3rem;
}

.team-wrapper {
    margin-top: -120px;
    padding-bottom: 200px;
    position: relative;
}

.team-img {
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    margin-bottom: 1rem;
    margin-right: 0;
    transform: translateY(-245px);
}



.team-name {
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-230px);
    text-align: center;
    white-space: nowrap;
    animation: lights 5s 750ms linear infinite;
}


    @keyframes lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
}


.team-role {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-215px);
    text-align: center;
}

.row.justify-content-center > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
}

    .row.justify-content-center > [class*="col-"]:first-child {
        margin-left: 0;
    }

@media (max-width: 1280px) {
    .team-category,
    .leaders-category,
    .admin-category,
    .marketing-category,
    .technicians-category,
    .developers-category {
        margin-top: 3rem;
        transform: translateY(0);
    }

    .leaders-category {
        font-size: 16vw;
    }

    .marketing-category {
        font-size: 13vw;
    }

    .technicians-category {
        font-size: 13vw;
    }

    .admin-category{
        font-size: 13vw;
    }

    .developers-category {
        font-size: 13vw;
    }

    .team-img {
        width: 120px;
        height: 120px;
        transform: none;
    }

    .team-name,
    .team-role {
        transform: none;
        font-size: 18px;
    }

    .row.justify-content-center > [class*="col-"] {
        margin-left: 0;
    }
}


/* Join Team Section  */
.bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    top: 0;
    left: 0;
}

.bubble {
    position: absolute;
    bottom: -100px;
    width: 40px;
    height: 40px;
    background: #000000;
    border-radius: 50%;
    opacity: 0.5;
    animation: rise 10s infinite ease-in;
}

    .bubble:nth-child(1) {
        width: 40px;
        height: 40px;
        left: 10%;
        animation-duration: 8s;
    }

    .bubble:nth-child(2) {
        width: 20px;
        height: 20px;
        left: 20%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(3) {
        width: 50px;
        height: 50px;
        left: 35%;
        animation-duration: 7s;
        animation-delay: 2s;
    }

    .bubble:nth-child(4) {
        width: 80px;
        height: 80px;
        left: 50%;
        animation-duration: 11s;
        animation-delay: 0s;
    }

    .bubble:nth-child(5) {
        width: 35px;
        height: 35px;
        left: 55%;
        animation-duration: 6s;
        animation-delay: 1s;
    }

    .bubble:nth-child(6) {
        width: 45px;
        height: 45px;
        left: 65%;
        animation-duration: 8s;
        animation-delay: 3s;
    }

    .bubble:nth-child(7) {
        width: 90px;
        height: 90px;
        left: 70%;
        animation-duration: 12s;
        animation-delay: 2s;
    }

    .bubble:nth-child(8) {
        width: 25px;
        height: 25px;
        left: 80%;
        animation-duration: 6s;
        animation-delay: 2s;
    }

    .bubble:nth-child(9) {
        width: 15px;
        height: 15px;
        left: 70%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(10) {
        width: 90px;
        height: 90px;
        left: 25%;
        animation-duration: 10s;
        animation-delay: 4s;
    }

@keyframes rise {
    0% {
        bottom: -100px;
        transform: translateX(0);
    }

    50% {
        transform: translate(100px);
    }

    100% {
        bottom: 1080px;
        transform: translateX(-200px);
    }
}

@keyframes anime {
    0% {
        top: 0;
    }

    50% {
        top: -1800px;
    }
    /* 200 - 2000 */
    100% {
        top: 0;
    }
}

/* join-team-section with its background and overlay */
.join-team-section {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, #7B9FFF 0%, #E17BCF 100%);
    background-size: 200% 200%;
    animation: joinGradientMove 3s linear infinite;
    padding: 4rem 1rem;
    color: #fff;
    margin-top: -25em;
    text-align: center;
}

    .join-team-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.1);
        pointer-events: none;
        z-index: 0;
        border-radius: inherit;
    }

/* animate join-team-section gradient background */
@keyframes joinGradientMove {
    0% {
        background-position: 0% 50%;
    }

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

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

.join-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 3rem;
    line-height: 1;
    color: #FDFDFD;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.join-btn {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1;
    color: #FDFDFD;
    border: 2px solid #fff;
    border-radius: 32px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: all 0.3s ease;
    padding: 0.75em 2em;
    background: transparent;
    margin-top: 3em;
    position: relative;
}

    .join-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }

.join-arrow-img {
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin-left: 0.3em;
}

@media (max-width: 1280px) {
    .join-team-section {
        margin-top: -13rem;
    }
}
/* END ABOUT CSS THAT WAS REPLACED */

/* =============== CONTACT US ================= */

@keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        @keyframes rainbowBorder {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes rainbowGlow {
            0% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
            14% { border-color: #ff7700; box-shadow: 0 0 20px rgba(255, 119, 0, 0.5); }
            28% { border-color: #ffff00; box-shadow: 0 0 20px rgba(255, 255, 0, 0.5); }
            42% { border-color: #00ff00; box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); }
            56% { border-color: #0000ff; box-shadow: 0 0 20px rgba(0, 0, 255, 0.5); }
            70% { border-color: #4b0082; box-shadow: 0 0 20px rgba(75, 0, 130, 0.5); }
            84% { border-color: #9400d3; box-shadow: 0 0 20px rgba(148, 0, 211, 0.5); }
            100% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
        }

        .banner-top-area {
            position: relative;
            min-height: 300px;
            height: clamp(250px, 55vh, 550px);
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('/images/blogs/blogs-landpage/blog-carousel-2.jpg') center/cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: clamp(15px, 4vw, 150px);
            animation: fadeInDown 1s ease-out;

            /* New properties for the fade-out effect at both top and bottom */
            mask-image: linear-gradient(
                to bottom,
                transparent 0%,  /* Start fully transparent (top fade-out) */
                black 10%,        /* Become fully visible at 5% */
                black 85%,       /* Stay fully visible until 95% */
                transparent 100% /* Become fully transparent (bottom fade-out) */
            );
            overflow: hidden;

        }

        .banner-top-area h1 {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(28px, 7vw, 65px);
            font-weight: 700;
            color: white;
            animation: fadeInDown 1s ease-out;
        }

        .send-us h2 {
            font-family: "Space Grotesk";
            font-size: clamp(24px, 5vw, 36px);
            font-weight: 600;
            margin-bottom: clamp(20px, 4vw, 45px); 
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        .reach-us-main-container {
            max-width: 1200px;
            margin: clamp(-120px, -18vw, -250px) auto 60px;
            padding: 0 clamp(12px, 2.5vw, 20px);
            position: relative;
            z-index: 10;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
        }

        .dual-panel-layout {
            box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
            display: grid;
            grid-template-columns: 1fr;
            overflow: hidden;
            position: relative;
            padding: 2px;
            background: linear-gradient(90deg, 
                #ff0000, #ff7700, #ffff00, #00ff00, 
                #0000ff, #4b0082, #9400d3, #ff0000);
            background-size: 200% 200%;
            animation: rainbowBorder 3s linear infinite;
        }

        @media (min-width: 1024px) {
            .dual-panel-layout {
                grid-template-columns: 1.5fr 1fr;
            }
        }

        .dual-panel-layout::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            border-radius: 18px;
            background: rgb(8, 8, 8);
            z-index: 1;
        }

        .input-panel-wrapper {
            padding: clamp(25px, 5vw, 60px) clamp(18px, 5vw, 80px);
            background: rgb(8, 8, 8);
            position: relative;
            z-index: 2;
        }

        .field-container {
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        .dual-field-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 20px);
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        @media (min-width: 640px) {
            .dual-field-row {
                grid-template-columns: 1fr 1fr;
            }
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: white;
            font-family: "Lexend", sans-serif;
            font-weight: 500;
            font-size: clamp(14px, 2vw, 16px);
        }

        input, textarea {
            color: white;
            font-family: "Lexend", sans-serif;
            width: 100%;
            padding: clamp(12px, 2vw, 15px) clamp(15px, 2.5vw, 20px);
            border: 1px solid gray;
            border-radius: 10px;
            background: rgb(15, 15, 15);
            font-size: clamp(14px, 2vw, 16px);
            transition: all 0.3s ease;
        }

        input:hover, textarea:hover,
        input:focus, textarea:focus {
            outline: none;
            animation: rainbowGlow 2s linear infinite;
        }

        textarea {
            resize: vertical;
            min-height: clamp(120px, 20vw, 150px);
        }

        .action-button-primary {
            display: block;
            margin: 0 auto;
            width: min(100%, 300px);
            max-width: 100%;
            height: 50px;
            padding: 10px 20px;
            font-family: "Lexend", sans-serif;
            background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: clamp(15px, 2vw, 17px);
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        @media (min-width: 640px) {
            .action-button-primary {
                width: 60%;
            }
        }

        @media (min-width: 1024px) {
            .action-button-primary {
                width: 40%;
            }
        }

        .action-button-primary:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 5px 7px rgba(172, 56, 56, 0.7),
                        0 0 8px rgba(172, 56, 56, 0.4);
        }

        .details-panel-wrapper {
            padding: clamp(30px, 5vw, 50px);
            background: rgb(4, 4, 4);
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 2;
        }

        .details-panel-wrapper h2 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(28px, 5vw, 36px);
            font-weight: 600;
            margin-top: clamp(15px, 3vw, 35px);
            margin-left: 0;
            margin-bottom: 20px;
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        @media (min-width: 768px) {
            .details-panel-wrapper h2 {
                margin-left: clamp(0px, 4vw, 55px);
            }
        }

        .details-card-item {
            background: rgb(15, 15, 15);
            padding: clamp(15px, 3vw, 20px);
            width: 100%;
            max-width: 300px;
            border-radius: 15px;
            margin-bottom: clamp(20px, 4vw, 30px);
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .details-card-item {
                max-width: 100%;
            }
        }

        .details-card-item:nth-child(1) {
            animation: floatAlt 4s ease-in-out infinite;
        }

        .details-card-item:nth-child(2) {
            animation: floatAlt 5s ease-in-out infinite;
        }

        .details-card-item:nth-child(3) {
            animation: floatAlt 4.5s ease-in-out infinite;
        }

        .details-card-item h3 {
            font-size: clamp(18px, 3vw, 23px);
            margin-bottom: clamp(12px, 2vw, 20px);
            color: white;
            font-family: "Space Grotesk", sans-serif;
        }

        .details-card-item p {
            color: #8a8a8a;
            font-size: clamp(13px, 2vw, 15px);
            font-family: "Lexend", sans-serif;
            line-height: 1.5;
            margin: 5px 0;
        }

        .scroll-animate {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .scroll-animate.active {
            opacity: 1;
            transform: translateY(0);
        }

        .map-section {
            padding: clamp(30px, 7vw, 70px);
            width: 95%;
            max-width: 1400px;
            margin: 0 auto;
        }

        .where-to h1 {
            color: white;
            font-size: clamp(28px, 6vw, 46px);
            font-weight: 700;
            font-family: "Space Grotesk";
            padding-left: clamp(10px, 3vw, 45px);
            margin-bottom: 20px;
        }

        .where-to iframe {
            padding: clamp(10px, 3vw, 28px);
            height: clamp(300px, 50vw, 600px);
            width: 100%;
            border-radius: clamp(20px, 5vw, 50px);
        }

        @media (max-width: 640px) {
            .banner-top-area {
                min-height: 220px;
                height: 40vh;
            }

            .reach-us-main-container {
                margin-top: -80px;
                margin-bottom: 40px;
            }

            .input-panel-wrapper {
                padding: 25px 18px;
            }

            .details-panel-wrapper {
                padding: 25px 18px;
            }

            .send-us h2 {
                margin-bottom: 20px;
            }

            .details-panel-wrapper h2 {
                margin-top: 10px;
                margin-bottom: 15px;
            }

            .details-card-item {
                margin-bottom: 18px;
            }

            .map-section {
                padding: 30px 15px;
            }

            .where-to iframe {
                padding: 12px;
                border-radius: 20px;
            }
        }

/* ================ END ===================== */

/* Contact Us Style V1 */
/* Container */
.contact-container {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* Shared Panel Styles */
.contact-panel {
    flex: 1;
    font-family: 'Lexend', sans-serif;
    background: #090909;
    color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* LEFT PANEL */
.contact-left-panel {
    margin-left: 2rem;
    border-radius: 1rem 0 0 1rem;
    z-index: 1;
}

    /* Border animation */
    .contact-left-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2px;
        background: linear-gradient(270deg, red, orange, yellow, lime, cyan, blue, violet, red);
        background-size: 400% 400%;
        animation: animated-border 8s linear infinite;
        border-radius: 1rem 0 0 1rem;
        box-sizing: border-box;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
    }

    /* Soft glow */
    .contact-left-panel::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 0 25px rgba(255,255,255,0.07), 0 0 60px rgba(255,255,255,0.05);
        border-radius: 1rem 0 0 1rem;
        z-index: -2;
    }

/* Animate background border */
@keyframes animated-border {
    0% {
        background-position: 0% 50%;
    }

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

/* Content Wrapper (with spacing) */
.contact-left-inner,
.contact-right-inner {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Title & subtitle alignment */
.contact-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.contact-subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* CONTACT ITEMS */
.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.icon {
    margin-left: 3rem;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
}

    .icon img {
        width: 100%;
        height: auto;
    }

    .icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-left: 5rem;
        width: 6rem;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-50%);
    }

.info {
    margin-left: 14rem;
    flex: 1;
}

    .info h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .info p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0.2rem 0;
    }

/* SOCIAL ICONS */
.social-icons {
    margin-top: 2rem;
    display: flex;
    gap: 0.3rem;
}

.social-icon img {
    width: 1.5rem;
    height: 1.5rem;
}

/* RIGHT PANEL */
.contact-right-panel {
    margin-right: 2rem;
    border-radius: 0 1rem 1rem 0;
    z-index: 1;
}

.inquiry-options {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.inquiry-option {
    position: relative;
}

    .inquiry-option input[type="radio"] {
        display: none;
    }

    .inquiry-option span {
        display: inline-block;
        padding: 0.5rem 1.25rem;
        border: 2px solid white;
        color: white;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        cursor: pointer;
        background-color: transparent;
    }

    /* Gradient style when checked OR hovered */
    .inquiry-option input[type="radio"]:checked + .inquiry-str1,
    .inquiry-str1:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
        box-shadow: 0 0 4px rgba(123, 242, 255, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str2,
    .inquiry-str2:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
        box-shadow: 0 0 4px rgba(189, 5, 149, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str3,
    .inquiry-str3:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
        box-shadow: 0 0 4px rgba(81, 249, 59, 0.25);
    }

/* Form fields */
.form-group {
    margin-bottom: 1.5rem;
}

    .form-group input,
    .form-group textarea {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid white;
        color: white;
        font-size: 0.95rem;
        padding: 0.5rem 0;
        outline: none;
    }

textarea {
    resize: vertical;
    min-height: 80px;
}

/* Update preference radios */
.radio-group {
    margin-bottom: 2rem;
}

    .radio-group label {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .radio-group input[type="radio"] {
        margin-right: 0.5rem;
    }

/*Submit Button*/
.submit-button {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.95rem;
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Lexend', sans-serif;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

    /* Gradient fill on hover */
    .submit-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #d8b4fe, #a5f3fc, #bbf7d0);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 2rem;
    }

    .submit-button:hover::before {
        opacity: 1;
    }

    .submit-button:hover {
        color: black;
        font-weight: bold;
    }

/* ===== Responsive Layout ===== */
@media (max-width: 1024px) {
    .contact-left-inner,
    .contact-right-inner {
        padding: 1.5rem;
    }

    .info {
        margin-left: 10rem;
    }

    .icon::after {
        margin-left: 2rem;
        width: 3rem;
    }
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-left-panel,
    .contact-right-panel {
        margin: 1rem 1rem 0 1rem;
        border-radius: 1rem;
    }

        .contact-left-panel::before,
        .contact-left-panel::after,
        .contact-right-panel::before,
        .contact-right-panel::after {
            border-radius: 1rem !important;
        }

    .contact-title {
        font-size: 1.3rem;
    }

    .info {
        margin-left: 6rem;
    }

    .icon {
        margin-left: 1.5rem;
        width: 2rem;
        height: 2rem;
    }

        .icon::after {
            display: none;
        }

    .form-group input,
    .form-group textarea {
        font-size: 0.9rem;
    }

    .submit-button {
        font-size: 0.9rem;
    }

    .inquiry-options {
        flex-direction: column;
    }

    .inquiry-option span {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .info h3 {
        font-size: 1rem;
    }

    .info p {
        font-size: 0.85rem;
    }

    .contact-title {
        font-size: 1.2rem;
    }

    .social-icons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .social-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .radio-group label {
        font-size: 0.85rem;
    }

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

/* Sync Rainbow Texts - Right to Left */
@keyframes gradientCycletext {
    0% {
        background-position: 100% 50%;
    }

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

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

.glow-gradient-text {
    background: linear-gradient( 90deg, #FF6666 0%, #FF8A66 16.66%, #FFF266 33.33%, #85FF66 50%, #66BFFF 66.66%, #9966FF 83.33%, #FF66C7 100% );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    animation: gradientCycletext 6s ease-in-out infinite;
}

/*Blogs Carousel*/
.BlogLandPage .carousel-inner,
.BlogLandPage .carousel-item,
.BlogLandPage .blogsCarousel-img {
    height: 500px;
    width: 100%;
    bottom: 50px;
    
}

.BlogLandPage .blogsCarousel-img {
    object-fit: cover; 
}

/*Latest Product*/
.LatestProduct {
    background-color: #000000;
    padding: 80px 20px;
}

.title-LatestProduct {
    color: #FFF;
    font-size: 34px;
    font-weight: 600;
}
.card-productName {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productPrice {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productStatus {
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
}
.card-product.card {
    border: 1px solid;
    border-color: #D9D9D9;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-product.card:hover {
    border-radius: 15px;
    background: linear-gradient(#000, #000) padding-box, 
    linear-gradient(90deg, #8409B4, #BD0595, #BD052D) border-box; 
    border: 3px solid transparent;
}
.btn-LastestProduct {
    background: transparent;
    color: #FDFDFD;
    border: none;
    border-radius: 10px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
.btn-check:checked + .btn-LastestProduct:hover {
    background: #FDFDFD;
    color: #090909;
    border: none;
}
.btn-check:not(:checked) + .btn-LastestProduct:hover {
    border: 1px solid #FDFDFD;
    color: #FDFDFD;
}

.btn-check:checked + .btn-LastestProduct {
    background: #FDFDFD;
    color: #090909;
    border: none;
}

/* Custom CSS for Trending Gadgets & DPC Updates */

/* Font Definitions */
.space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

.lexend {
    font-family: 'Lexend', sans-serif;
}

/* Main Container */
.tech-showcase-container {
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
    min-height: 100vh;
    padding: 80px 0;
    overflow: hidden;
}

/* Section Headers */
.tech-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.tech-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.tech-view-all {
    color: #64748b;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tech-view-all:hover {
        color: #3b82f6;
        transform: translateX(5px);
    }

/* Trending Gadgets Section */
.trending-gadgets-section {
    margin-bottom: 80px;
}

.trending-card {
    background: #000000;
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

    .trending-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .trending-card:hover::before {
        opacity: 1;
    }

    .trending-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .trending-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.trending-card-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.trending-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

    .trending-card-icon i {
        font-size: 2rem;
        color: white;
    }

.trending-card-info {
    flex: 1;
}

.trending-card-category {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .trending-card-category.mobile-tech {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .trending-card-category.gaming {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }

    .trending-card-category.smart-home {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.trending-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.trending-card-description {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
}

.trending-card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #64748b;
}

.trending-card-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.trending-card-arrow {
    margin-left: auto;
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.trending-card:hover .trending-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* DPC Updates Section */
.dpc-updates-section {
    margin-top: 80px;
}

.dpc-update-card {
    background: #000000;
    border-radius: 20px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 250px;
}

    .dpc-update-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(147, 51, 234, 0.8) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .dpc-update-card:hover::before {
        opacity: 0.3;
    }

    .dpc-update-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .dpc-update-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.dpc-card-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.dpc-update-card:hover .dpc-card-background {
    transform: scale(1.05);
}

.dpc-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
}

.dpc-card-content {
    position: relative;
    z-index: 3;
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dpc-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.dpc-card-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .dpc-card-status.upcoming {
        background: rgba(59, 130, 246, 0.2);
        color: #3b82f6;
    }

    .dpc-card-status.product-launch {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .dpc-card-status.partnership {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.dpc-card-countdown {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: auto;
}

.dpc-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}

.dpc-card-description {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.dpc-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.dpc-card-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.dpc-card-date, .dpc-card-location {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dpc-card-arrow {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.dpc-update-card:hover .dpc-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* Modal Styles */
.dpc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .dpc-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.dpc-modal-content {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.dpc-modal-overlay.active .dpc-modal-content {
    transform: scale(1);
}

.dpc-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .dpc-modal-close:hover {
        background: #ef4444;
        color: white;
    }

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

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

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

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

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

    .trending-card-content {
        flex-direction: column;
        text-align: center;
    }

    .trending-card-icon {
        width: 60px;
        height: 60px;
    }

        .trending-card-icon i {
            font-size: 1.5rem;
        }

    .dpc-card-content {
        padding: 20px;
    }

    .dpc-card-title {
        font-size: 1.3rem;
    }

    .dpc-modal-content {
        padding: 30px;
        margin: 20px;
    }
}


        .blog-section-blog-post {
            padding: 60px 0;
            background-color: #000000;
        }

        .section-header-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .section-title-blog-post {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 0;
        }

        .view-all-link-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .view-all-link-blog-post:hover {
            color: #66b3ff;
        }

        .featured-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            height: 400px;
            margin-bottom: 40px;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .featured-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .featured-image-blog-post {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

        .featured-overlay-blog-post {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            padding: 40px 30px 30px;
        }

        .featured-category-blog-post {
            background-color: #4a9eff;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            display: inline-block;
            margin-bottom: 15px;
        }

        .featured-title-blog-post {
            font-size: 2rem;
            font-weight: bold;
            margin: 0;
            color: white;
        }

        .blog-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }

        .blog-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

        .blog-card-image-blog-post {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .blog-card-content-blog-post {
            padding: 25px;
        }

        .blog-card-meta-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .blog-card-category-blog-post {
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
            color: white;
        }

        .gaming-blog-post { background-color: #00ff88; color: #000; }
        .ai-vr-blog-post { background-color: #4a9eff; }
        .security-blog-post { background-color: #ff6b6b; }

        .blog-card-date-blog-post {
            color: #888;
            font-size: 0.9rem;
        }

        .blog-card-title-blog-post {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 12px;
            color: white;
        }

        .blog-card-excerpt-blog-post {
            color: #ccc;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .read-more-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .read-more-blog-post:hover {
            color: #66b3ff;
        }

        .sidebar-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            padding: 30px;
            border: 1px solid #333;
            margin-bottom: 30px;
        }

        .sidebar-title-blog-post {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 25px;
            color: white;
        }

        .trending-item-blog-post {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #333;
        }

        .trending-item-blog-post:last-child {
            border-bottom: none;
        }

        .trending-number-blog-post {
            background-color: #4a9eff;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .trending-content-blog-post h6 {
            margin: 0;
            font-weight: 600;
            color: white;
        }

        .trending-content-blog-post small {
            color: #888;
        }

        .category-tag-blog-post {
            background-color: #333;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 0.9rem;
            margin: 5px;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .category-tag-blog-post:hover {
            background-color: #4a9eff;
            color: white;
        }

        .arrow-icon-blog-post {
            margin-left: 8px;
        }

        @media (max-width: 768px) {
            .section-header-blog-post {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

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

            .featured-card-blog-post {
                height: 300px;
            }

            .featured-title-blog-post {
                font-size: 1.5rem;
            }
        }

        .chat-widget-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }

        .chat-toggle-btn {
            width: 60px;
            height: 60px;
            background-color: white;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            overflow: hidden;
            padding: 8px;
        }

        .chat-toggle-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .chat-toggle-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .chat-window {
            position: fixed;
            bottom: 100px;
            right: 20px;
            width: 350px;
            height: 500px;
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            transform: translateY(100%) scale(0.8);
            opacity: 0;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            z-index: 1001;
            overflow: hidden;
        }

        .chat-window.active {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .chat-header {
            background-color: #000;
            color: #fff;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 20px 20px 0 0;
        }

        .chat-header-info {
            display: flex;
            align-items: center;
        }

        .assistant-avatar {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            overflow: hidden;
        }

        .assistant-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .chat-header-text h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .status-indicator {
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background-color: #00ff88;
            border-radius: 50%;
            margin-right: 8px;
        }

        .close-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            background-image: url('/images/dpcbits10.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .chat-body {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f8f8f8;
        }

        .message {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
        }

        .message.bot .message-avatar {
            background-color: #000;
            color: #fff;
            overflow: hidden;
        }

        .message.bot .message-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .message.user .message-avatar {
            background-color: #fff;
            color: #000;
            border: 2px solid #000;
            margin-right: 0;
            margin-left: 12px;
        }

        .message-content {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.4;
        }

        .message.bot .message-content {
            background-color: #fff;
            color: #000;
            border: 1px solid #e0e0e0;
        }

        .message.user .message-content {
            background-color: #000;
            color: #fff;
        }

        .quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }

        .quick-reply-btn {
            background-color: #fff;
            border: 2px solid #000;
            color: #000;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Space Grotesk', sans-serif;
        }

        .quick-reply-btn:hover {
            background-color: #000;
            color: #fff;
        }

        .chat-input-container {
            padding: 20px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
        }

        .chat-input-wrapper {
            display: flex;
            align-items: center;
            background-color: #f8f8f8;
            border-radius: 25px;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            transition: border-color 0.3s ease;
        }

        .chat-input-wrapper:focus-within {
            border-color: #000;
        }

        .chat-input {
            flex: 1;
            border: none;
            background: none;
            outline: none;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            color: #000;
        }

        .chat-input::placeholder {
            color: #999;
        }

        .send-btn {
            background-color: #000;
            border: none;
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
            font-size: 16px;
            transition: transform 0.2s ease;
        }

        .send-btn:hover {
            transform: scale(1.1);
        }

        .typing-indicator {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background-color: #fff;
            border-radius: 16px;
            margin-left: 44px;
            width: fit-content;
            border: 1px solid #e0e0e0;
        }

        .typing-dots {
            display: flex;
            gap: 4px;
        }

        .typing-dot {
            width: 6px;
            height: 6px;
            background-color: #999;
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-10px); opacity: 1; }
        }

        /* Mobile responsiveness */
        @media (max-width: 768px) {
            .chat-window {
                width: calc(100vw - 40px);
                height: 500px;
                right: 20px;
                bottom: 100px;
            }

            .message-content {
                max-width: 85%;
            }
        }        

        .company-info-section {
            background: #000000;
            color: #ffffff;
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        
        .company-info-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
            pointer-events: none;
        }
        
        /* 3D Hero Animation */
        .hero-3d-container {
            position: relative;
            height: 800px;
            margin-bottom: 2rem;
        }
        
        .hero-3d-scene {
            width: 100%;
            height: 100%;
            perspective: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .floating-cube {
            width: 100px;
            height: 100px;
            position: absolute;
            transform-style: preserve-3d;
            animation: floatRotate 6s ease-in-out infinite;
        }
        
        .cube-face {
            position: absolute;
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border: 1px solid rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
        }
        
        .cube-face.front { transform: rotateY(0deg) translateZ(50px); }
        .cube-face.back { transform: rotateY(180deg) translateZ(50px); }
        .cube-face.right { transform: rotateY(90deg) translateZ(50px); }
        .cube-face.left { transform: rotateY(-90deg) translateZ(50px); }
        .cube-face.top { transform: rotateX(90deg) translateZ(50px); }
        .cube-face.bottom { transform: rotateX(-90deg) translateZ(50px); }
        
        .floating-cube:nth-child(1) {
            top: 10%;
            left: 20%;
            animation-delay: 0s;
        }
        
        .floating-cube:nth-child(2) {
            top: 60%;
            right: 15%;
            animation-delay: 2s;
            transform: scale(0.7);
        }
        
        .floating-cube:nth-child(3) {
            top: 30%;
            left: 70%;
            animation-delay: 4s;
            transform: scale(0.5);
        }
        
        @keyframes floatRotate {
            0%, 100% {
                transform: translateY(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            25% {
                transform: translateY(-20px) rotateX(90deg) rotateY(45deg) rotateZ(45deg);
            }
            50% {
                transform: translateY(0px) rotateX(180deg) rotateY(90deg) rotateZ(90deg);
            }
            75% {
                transform: translateY(20px) rotateX(270deg) rotateY(135deg) rotateZ(135deg);
            }
        }
        
        .company-hero {
            text-align: center;
            margin-bottom: 60px;
        }
        
/* Option 1: Smooth Fade-in with Slide Up */
        .hero-option-1 .company-hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff, #e0e0e0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            
            /* Animation */
            animation: fadeInSlideUp 1.2s ease-out forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        .hero-option-1 .company-hero p {
            font-size: 1.25rem;
            font-weight: 300;
            opacity: 0;
            max-width: 600px;
            margin: 0 auto;
            color: rgba(255,255,255,0.9);
            
            /* Animation with delay */
            animation: fadeInSlideUp 1.2s ease-out 0.3s forwards;
            transform: translateY(30px);
        }

        @keyframes fadeInSlideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .info-card {
            background: #ffffff;
            color: #000000;
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: none;
            box-shadow: 0 10px 30px rgba(255,255,255,0.1);
            transition: all 0.3s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .info-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, rgba(0,0,0,0.05), transparent);
            border-radius: 50%;
            transition: all 0.3s ease;
            transform: scale(0);
        }
        
        .info-card:hover::before {
            transform: scale(3);
        }
        
        .info-card:hover {
            transform: translateY(-5px) rotateX(2deg);
            box-shadow: 0 20px 40px rgba(255,255,255,0.15);
        }
        
        /* 3D Service Cards */
        .service-item {
            background: rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.4s ease;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .service-item::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 50%;
            transform: translate(-50%, -50%) translateZ(20px);
            transition: all 0.4s ease;
            z-index: 0;
        }
        
        .service-item:hover {
            background: rgba(255,255,255,0.12);
            transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
            box-shadow: 
                0 20px 40px rgba(255,255,255,0.1),
                0 0 0 1px rgba(255,255,255,0.2);
        }
        
        .service-item:hover::before {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
            transform: translate(-50%, -50%) translateZ(30px) rotateZ(180deg);
        }
        
        .service-item h4,
        .service-item p {
            position: relative;
            z-index: 2;
        }
        .info-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #000000;
            position: relative;
            z-index: 2;
        }
        
        .info-card p, .info-card li {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
            color: #333333;
            position: relative;
            z-index: 2;
        }
        
        .info-card ul {
            padding-left: 1.25rem;
            margin-bottom: 0;
            position: relative;
            z-index: 2;
        }
        
        .info-card li {
            margin-bottom: 0.5rem;
        }
        
        .services-grid {
            margin-top: 3rem;
        }
        
        /* 3D Icons for Services */
        .service-icon {
            width: 120px;
            height: 80px;
            margin: 0 auto 1rem auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all 0.4s ease;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 12px;
            overflow: hidden;
        }
        
        .service-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            transition: all 0.4s ease;
            transform: translateZ(10px);
        }
        
        .service-item:hover .service-icon {
            transform: rotateX(5deg) rotateY(5deg) scale(1.05);
        }
        
        .service-item:hover .service-icon img {
            transform: translateZ(15px) scale(1.1);
        }
        
        .icon-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.3), transparent);
            border-radius: 12px;
            transition: all 0.4s ease;
            z-index: 2;
        }
        
        .service-item:hover .icon-overlay {
            background: linear-gradient(135deg, rgba(0,0,0,0.1), transparent);
        }
        
        .stats-container {
            background: rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 2rem;
            margin: 3rem 5rem;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .stat-item {
            text-align: center;
            margin-bottom: 1rem;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #ffffff;
            display: block;
        }
        
        .stat-label {
            font-size: 0.9rem;
            font-weight: 400;
            opacity: 0.7;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        @media (max-width: 768px) {
            .company-hero h1 {
                font-size: 2.5rem;
            }
            
            .info-card {
                padding: 1.5rem;
            }
            
            .stat-number {
                font-size: 2rem;
            }
        } 
        
/* Hero Section - Break out of container constraints */
.hero-section {
    position: relative;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    margin-left: calc(-50vw + 50%); /* Center and break out of parent container */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    font-family: 'League Spartan', sans-serif;
}

/* Remove container constraints completely for hero section */
.hero-section .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Hero Video - Cover entire viewport */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Override any parent container constraints that might affect the hero */
.company-info-section .container {
    max-width: none;
    padding: 0;
    overflow: visible;
}

/* Alternative approach - if above doesn't work, use this instead */
.hero-section-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

.hero-section-fullscreen .hero-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}     

 .container {
            position: relative;
            z-index: 10;
        }

        /* Filter Buttons */
        .btn-LastestProduct {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: #495057;
            transition: var(--transition-smooth);
            border-radius: 50px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-LastestProduct:hover {
            background: rgba(255, 255, 255, 1);
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
        }

        .btn-check:checked + .btn-LastestProduct {
            background: var(--gradient-bg);
            border-color: transparent;
            color: white;
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
        }

        /* Slider Container */
        .cards-slider-container {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            background: #000000;
            backdrop-filter: blur(20px);
            padding: 2rem;
            margin-top: 2rem;
            margin-left: -15px;
            margin-right: -15px;
            width: calc(100% + 30px);
        }

        .cards-slider {
            display: flex;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            gap: 2rem;
        }

        .card-slide {
            min-width: calc(33.333% - 3.33rem);
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            .card-slide {
                min-width: calc(50% - 2.5rem);
            }
        }

        @media (max-width: 576px) {
            .card-slide {
                min-width: calc(100% - 1rem);
                max-width: 320px;
                margin: 0 auto;
            }
        }

        @media (max-width: 480px) {
            .card-slide {
                min-width: calc(100% - 0.5rem);
                max-width: 280px;
            }
        }

        /* Product Cards */
        .product-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            transition: var(--transition-smooth);
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-bg);
            transform: scaleX(0);
            transition: transform 0.4s ease;
            transform-origin: left;
        }

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

        .product-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: var(--card-hover-shadow);
            border-color: rgba(0, 123, 255, 0.3);
        }

        .product-card:hover .product-icon {
            transform: scale(1.2) rotate(10deg);
            color: var(--primary-color);
        }

        .product-card:hover .product-title {
            color: var(--primary-color);
        }

        .product-card:hover .btn-product {
            transform: scale(1.1);
            background: var(--gradient-bg);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
        }

        .product-icon {
            font-size: 3.5rem;
            background: var(--gradient-bg);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1.5rem;
            transition: var(--transition-smooth);
            /* Fallback for browsers that don't support background-clip */
            color: var(--primary-color);
        }

        /* Ensure icons are visible */
        .product-icon i {
            display: inline-block;
            font-style: normal;
        }

        /* Fallback if Font Awesome doesn't load */
        .product-icon i:before {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", FontAwesome, sans-serif;
            font-weight: 900;
        }

        .product-title {
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 1rem;
            transition: var(--transition-smooth);
            font-size: 1.25rem;
        }

        .product-description {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.6;
            opacity: 0.9;
        }

        .btn-product {
            background: linear-gradient(135deg, #840984 0%, #BD0595 50%, #BD052D 100%);
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            transition: var(--transition-smooth);
            font-weight: 600;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .btn-product::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: left 0.5s;
        }

        .btn-product:hover::before {
            left: 100%;
        }

        /* Navigation Buttons */
        .slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-smooth);
            z-index: 100;
            color: var(--primary-color);
            font-size: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .slider-nav:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 8px 30px rgba(0, 123, 255, 0.3);
        }

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

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

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

        .parallax-element {
            position: absolute;
            background: var(--gradient-bg);
            border-radius: 50%;
            opacity: 0.1;
            animation: float 20s ease-in-out infinite;
        }

        .parallax-element:nth-child(1) {
            width: 100px;
            height: 100px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .parallax-element:nth-child(2) {
            width: 150px;
            height: 150px;
            top: 60%;
            right: 10%;
            animation-delay: -5s;
        }

        .parallax-element:nth-child(3) {
            width: 80px;
            height: 80px;
            bottom: 20%;
            left: 20%;
            animation-delay: -10s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-30px) rotate(120deg); }
            66% { transform: translateY(-60px) rotate(240deg); }
        }

        /* Slider Indicators */
        .slider-indicators {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: var(--transition-smooth);
        }

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

        .indicator:hover {
            background: var(--primary-hover);
            transform: scale(1.1);
        }

        /* Loading Animation */
        .card-slide {
            opacity: 0;
            animation: slideIn 0.8s ease-out forwards;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .category-banner {
            background: linear-gradient(135deg, #1F0206 0%, #660B23 100%);
            border-radius: 20px;
            padding: 30px;
            margin: 40px 0 30px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .category-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: shimmer 3s infinite;
        }
        
        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        .category-banner h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .category-banner p {
            font-size: 1.1rem;
            margin: 10px 0 0 0;
            opacity: 0.9;
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .card-product {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-product:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }        

.setup {
            position: block;
            margin: auto;
            width: 50%;
        }




/* PC - DETAILS */

.main-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.hero-content-container {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;

    
    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/1200x/5b/6d/40/5b6d40fc0b5f754168a8c7f95dba3485.jpg'); 
    background-size: cover;
    background-position: center;
}

.text-overlay {
    position: absolute;
    bottom: 50px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.text-overlay h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.see-more-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 30px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-more-button:hover {
    background-color: #7B54B1;
}

.why-choose-us-section {
    font-family: "Lexend";
    display: flex;
    align-items: center; 
    max-width: 1300px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
    .why-choose-us-section.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .why-choose-us-section.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but the 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }


/* Left Column - Visual Container */
.visual-container {
    flex: 1;
    min-height: 500px;
    background-image: url("../images/products/robot-pc-case.png"); 
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .visual-container:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }

/* Right Column - Content Container */
.content-container {
    flex: 1;
    padding-left: 70px;
}

/* Title Styling */
.title-line-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;

}

/* Feature List Styling */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.feature-list li:hover{
    transform: translateY(-5px) scale(1.05);
}




.feature-icon {
    font-size: 20px; 
    margin-right: 15px;
    color: white; 
    transform: rotate(-15deg); 
}


.benefits-layout {
    font-family: "lexend";
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 60px 20px;
    margin: auto;
}


.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}


.card-description {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.testimonials-section {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto; 
    grid-template-areas: 
        "content visual"
        "button button"; 
    
    gap: 10px; 
    max-width: 1000px; 
    margin: 70px auto; 
    padding: 0 10px; 
    align-items: start;
}

    .testimonials-section.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .testimonials-section.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }



.testimonial-content {
    grid-area: content;
    padding-right: 20px; 
}

.testimonial-heading-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.quote {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.star-rating .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    

    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .star-rating :hover {
        transform: translateY(-5px) scale(1.05);
    }

@keyframes rgbGoldPulse {
    0% {
        text-shadow: 
            0 0 3px rgba(255, 215, 0, 0.7), 
            0 0 3px rgba(255, 165, 0, 0.5);
    }
    50% {
        /* This is the peak, adding the subtle RGB glow */
        text-shadow: 
            0 0 3px rgba(255, 223, 0, 0.8), 
            0 0 3px rgba(255, 175, 0, 0.6),  
            0 0 3px rgba(255, 0, 0, 0.1), 
            0 0 3px rgba(0, 255, 0, 0.1), 
            0 0 3px rgba(0, 0, 255, 0.1);    
    }
    100% {
        text-shadow: 
            0 0 3px rgba(255, 220, 0, 0.75),
            0 0 3px rgba(255, 170, 0, 0.55);
    }
}

/* Product Visual (Right Column) */
.product-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(../images/products/gaming-pc.png); /* REPLACE with your actual image path or URL */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }


/* Button Container (Spans both columns) */
.button-container {
    grid-area: button;
    display: flex;
    justify-content: center; 
    margin-top: 40px; 
}

/* See Reviews Button Styling */
.see-reviews-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-reviews-button:hover {
    background-color: #9370DB;
}

.main-promo-bot {
    font-family: "Space Grotesk";
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.hero-content-container-bot {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/736x/f2/04/2c/f2042ce98e8fccbb9383535424e608b4.jpg');      
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.text-overlay-bot {
    position: absolute;
    bottom: 30px;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}

.text-overlay-bot h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

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



@media (min-width: 1400px) {
    .main-promo {
        max-width: 1500px;
    }

    .why-choose-us-section {
        max-width: 1500px;
    }

    .title-line-1 {
        font-size: 2rem; 
    }
    
    .benefits-layout {
        max-width: 1500px;
        gap: 50px;
    }

    .testimonials-section {
        max-width: 1400px;
    }
}

@media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .why-choose-us-section {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-line-1 {
        font-size: 2.8rem; 
    }

    .benefits-layout {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 80px auto;
    }

}

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 30px 40px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 40px;
    }

    .why-choose-us-section {
        padding: 0 30px;
        margin: 60px auto;
    }

    .content-container {
        padding-left: 30px;
    }

    .visual-container {
        min-height: 400px;
    }

    .testimonial-heading-1 {
        font-size: 42px;
    }

    .quote {
        font-size: 30px;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    

    .product-visual {
        min-height: 400px;
    }
}

/* Mobile (up to 768px) */
@media (max-width: 768px) {
    .main-promo {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
        margin-top: -150px;
    }

    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 20px 25px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 28px;
    }


    .why-choose-us-section {
        flex-direction: column;
        padding: 0 20px;
        margin: 40px auto;
        text-align: center;
    }

    .visual-container {
        width: 100%;
        min-height: 350px;
        margin-left: 0;
        margin-bottom: 30px;
        border-width: 8px;
    }

    .content-container {
        padding-left: 0;
        width: 100%;
    }

    .feature-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .feature-list li {
        font-size: 24px;
        line-height: 1.8;
        justify-content: center;
    }

    .feature-icon {
        font-size: 18px;
        margin-right: 10px;
    }

    .benefits-layout {
        font-size: 2rem;
        grid-template-columns: 1fr; /* Stack items vertically */

    }

    .benefit-card {
        min-width: 100%;
    }


    .card-description {
        font-size: 1.5rem;
    }

    .testimonials-section {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "content"
            "visual"
            "button";
        margin: 40px auto;
        padding: 20px;
    }

    .testimonial-content {
        padding-right: 0;
        text-align: center;
    }

    .testimonial-heading-1 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .quote {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .star-rating {
        text-align: center;
        font-size: 20px;
        margin-top: 40px;
    }

    .product-visual {
        min-height: 400px;
        border-width: 8px;
    }

    .button-container {
        margin-top: 20px;
    }

    .main-promo-bot {
        font-size: 2rem;
    }

    .hero-content-container-bot {
        max-width: 768px; /* Ensure it doesn't overflow */
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    .hero-content-container,
    .hero-content-container-bot {
        height: 500px;
        max-width: 100%;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 24px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 15px 20px;
    }


    .title-line-1 {
        font-size: 35px;
    }

    .feature-list li {
        font-size: 20px;
    }

    .testimonials-section {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }
    

    .testimonial-heading-1 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .quote {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .star-rating .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .product-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .testimonial-heading-1 {
        font-size: 24px;
    }

    .quote {
        font-size: 16px;
    }

    .product-visual {
        min-height: 250px;
    }
}



/* custom.html design by PRINCESS*/

.cspcb {
    background-color: #2f8d46;
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-repeat: repeat;
    -webkit-text-fill-color: transparent;
    margin-top: 20px;
    font-size: 80px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 1000;
    -webkit-font-smoothing: antialiased;
    animation: 3s anim-lineUp linear;
}
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-cspcb {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    text-align: center;
    color: white;
    max-width: 1000px;
    margin: 0 auto  3rem;
    line-height: 1.6;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* llllllll */

.projects-images{
    margin: 50px;
    display: inline-block;
}

.projects-img-card1 {
    --g: 4px;     /* the gap */
    --b: 12px;    /* border thickness*/
    --c: indigo; /* the color */
    max-width: 120%;
    height: 20vh;
    margin-block: 4rem;
    display: inline-block;
    align-content: center;
    
    padding: calc(var(--g) + var(--b));
    --_c: #0000 0 25%, var(--c) 0 50%;
    --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
    --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
    background:
    var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
    var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
    background-size: 200% var(--b),var(--b) 200%;
    cursor: pointer;
    filter: grayscale(50%);
    transition: .3s;
}

.projects-img-card1{
    row-gap: 20px; /* Gap between rows (vertical space) */
    column-gap: 10px; /* Optional: Gap between columns (horizontal space) */
}
.projects-img-card1:hover {
  --_p: 75%;
  filter: grayscale(0%);
  --c: #AC3838; /* new color */
}

.projects-img {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    display: block;
    align-content: center;
    width: 100%;

}

.projects-image-title{
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    margin-top: 15px;
}

/*================ CCTV DETAILS ==================*/

.cctv-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; 
    max-width: 2000px; 
    margin: 0px auto 0 auto;
}

.cctv-content-container {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(50, 0, 0, 0.9) 0%, rgba(150, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 100%),
    url('/images/services/cctv.jpg'); 
    background-size: cover;
    background-position: center;
    animation: fadeInUp 1.1s ease-out forwards;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.cctv-text-overlay {
    font-family: "Space Grotesk";
    position: absolute;
    bottom: 30px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
    animation: fadeInUp 0.7s ease-out forwards;
}

.cctv-text-overlay h1 {
    color: white;
    font-size: 64px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    
}

.security-section {
    padding: 20px 20px; 
    text-align: center; 
    width: 100%; 
    
}

.animate-on-scroll .security-section {
    opacity: 0;
    transform: translateY(20px);
}

.animate-on-scroll.is-visible .security-section {
    opacity: 1;
    transform: translateY(0);
}

.section-title {
    font-family: "Lexend"; 
    font-size: 58px; 
    font-weight: 500; 
    margin-bottom: 10px; 
    margin-top: 20px;
}

.section-text {
    font-family:"Space Grotesk"; 
    color: white;
    font-size: 28px;
    line-height: 1.6;
    max-width: 1300px; 
    margin: 10px auto; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 270px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 12px;
    }

    .cctv-text-overlay h1 {
        font-size: 21px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 22px;
    }

    .section-text {
        font-size: 12px;
        max-width: 100%;
        padding: 0 6px;
    }

    .security-section {
        padding: 10px 8px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 285px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 13px 14px;
    }

    .cctv-text-overlay h1 {
        font-size: 23px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 23px;
    }

    .section-text {
        font-size: 12.5px;
        max-width: 100%;
        padding: 0 6px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 300px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 14px 15px;
    }

    .cctv-text-overlay h1 {
        font-size: 25px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 24px;
    }

    .section-text {
        font-size: 13px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 310px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 15px 16px;
    }

    .cctv-text-overlay h1 {
        font-size: 26px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 25px;
    }

    .section-text {
        font-size: 13.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 400px) and (max-width: 412px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 325px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 16px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 28px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 26px;
    }

    .section-text {
        font-size: 14px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 330px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 17px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 29px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 27px;
    }

    .section-text {
        font-size: 14.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 340px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 18px 20px;
    }

    .cctv-text-overlay h1 {
        font-size: 30px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 28px;
    }

    .section-text {
        font-size: 15px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 380px;
        margin-bottom: 25px;
        margin-top: -125px;
    }

    .cctv-text-overlay {
        padding: 20px 25px;
    }

    .cctv-text-overlay h1 {
        font-size: 34px;
    }

    .section-title {
        font-size: 32px;
    }

    .section-text {
        font-size: 17px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 450px;
        margin-bottom: 30px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 25px 30px;
    }

    .cctv-text-overlay h1 {
        font-size: 42px;
    }

    .section-title {
        font-size: 38px;
    }

    .section-text {
        font-size: 20px;
        max-width: 100%;
        padding: 0 15px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 470px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 24px 34px;
    }

    .cctv-text-overlay h1 {
        font-size: 44px;
    }

    .section-title {
        font-size: 39px;
    }

    .section-text {
        font-size: 20.5px;
        max-width: 720px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 490px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 26px 36px;
    }

    .cctv-text-overlay h1 {
        font-size: 46px;
    }

    .section-title {
        font-size: 40px;
    }

    .section-text {
        font-size: 21px;
        max-width: 750px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 510px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 28px 38px;
    }

    .cctv-text-overlay h1 {
        font-size: 48px;
    }

    .section-title {
        font-size: 42px;
    }

    .section-text {
        font-size: 22px;
        max-width: 800px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 530px;
    }

    .cctv-text-overlay {
        padding: 30px 40px;
    }

    .cctv-text-overlay h1 {
        font-size: 50px;
    }

    .section-title {
        font-size: 44px;
    }

    .section-text {
        font-size: 23px;
        max-width: 850px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 550px;
        margin-top: -60px;
    }

    .cctv-text-overlay {
        padding: 30px 45px;
    }

    .cctv-text-overlay h1 {
        font-size: 52px;
    }

    .section-title {
        font-size: 46px;
    }

    .section-text {
        font-size: 24px;
        max-width: 900px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 600px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 35px 50px;
    }

    .cctv-text-overlay h1 {
        font-size: 60px;
    }

    .section-title {
        font-size: 54px;
    }

    .section-text {
        font-size: 26px;
        max-width: 1200px;
    }
}

/* CCTV VIDEO */

.cctv-video {
    position: relative;
    width: 100%; 
    max-width: 2000px; 
    height: 800px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: #000;
    padding-bottom: 30px;
    box-sizing: border-box;
}


#bgVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%); 
    object-fit: cover;
}


.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}


.hero-content-vid {
    position: relative;
    z-index: 3;
    margin-bottom: 0; 
}

.btn-find-out-more {
    font-family: "Lexend"; 
    display: inline-block;
    padding: 5px 40px;
    text-decoration: none;
    font-size: 20px;
    font-weight: light;
    color: #ffffff;
    border-radius: 30px;
    width: 298pxpx;
    height: 45pxpx;
    margin-bottom: 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: linear-gradient(88.78deg, #BA1022 0.07%, #EC0120 50%, #FD6A59 99.93%);
    border: none;
    cursor: pointer;
    animation: buttonEntrancee 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulsee 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes buttonEntrancee {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulsee {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}

.btn-find-out-more:hover {
    background: linear-gradient(to right, #e00000 0%, #222222 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.project-overview {
    margin-top: 60px;
    padding: 20px 20px;
    text-align: center;
}

.overview {
    font-family:"Space Grotesk";
    color: white;
    font-weight: 500;
    font-size: 64px;
    line-height: 1.6;
    margin: 0 auto;
}


@media (max-width: 1200px) {
    .cctv-video {
        /* Reduce height for a more compact presentation */
        height: 600px;
        /* Adjust margin */
        margin: 30px auto;
        /* Reduce bottom padding */
        padding-bottom: 20px;
    }

    .overview {
        /* Decrease the large font size for tablets */
        font-size: 48px;
    }
}


@media (max-width: 768px) {
    .cctv-video {
        /* Further reduce height for mobile viewports */
        height: 450px;
        margin: 20px auto;
        width: auto; /* Ensure no horizontal scroll is caused by margin */
    }

    .overview {
        /* Major decrease in font size for mobile */
        font-size: 36px;
        line-height: 1.4;
    }

    .btn-find-out-more {
        /* Adjust button dimensions and font size */
        font-size: 18px;
        padding: 8px 30px;
        /* Remove fixed width/height properties and rely on padding/content */
        width: auto;
        height: auto;
        margin-bottom: 10px;
    }

    .project-overview {
        /* Reduce padding */
        padding: 10px 10px;
    }
}


@media (max-width: 480px) {
    .cctv-video {
        width: auto;
        height: 350px;
        padding-bottom: 10px;
    }

    .overview {
        /* Smallest font size for main header text */
        font-size: 20px;
    }

    .btn-find-out-more {
        font-size: 16px;
        padding: 6px 20px;
        border-radius: 20px;
    }
}

/* CCTV DETAILS CARDS*/


/* NEW: Keyframe animation for fade-in and subtle rise */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(90px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NEW: Initial hidden state for the scroll animation targets */
.surveillance-carousel-container.hidden,
.navigation-dots-container.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: none; /* Temporarily disable transition for initial state */
}

/* NEW: Class to apply animation after scroll trigger */
.surveillance-carousel-container.scroll-animation,
.navigation-dots-container.scroll-animation {
    animation: fadeInUp 1.5s ease-out forwards; 
    /* Optional: Add a slight delay for the dots container for a staggered effect */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Restore any existing transition */
}

/* Add staggered effect for the dots container */
.navigation-dots-container.scroll-animation {
    animation-delay: 0.3s;
}

.surveillance-carousel-container {
    margin: 0 auto;
    width: 100%;
    padding: 50px 0;
    background-color: #000;
    overflow: hidden;
    position: relative;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s; 
}

.overview {
    /* ... existing styles ... */
    /* ADDED: Initial state for 'overview' text (optional, but good for consistent animation) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 0.8s ease-out;
}

/* NEW: Class to animate 'overview' text */
.overview.scroll-animation {
    opacity: 1;
    transform: translateY(0);
}


.carousel-viewport-wrapper {
    width: 100%;
    height: 600px;
    position: relative;
    perspective: 2000px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    user-select: none;
}

.carousel-viewport-wrapper.dragging {
    cursor: grabbing;
}

.rotating-carousel-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.surveillance-card-element {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    height: 560px;
    margin-left: -175px;
    margin-top: -280px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #222;
    cursor: pointer;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    user-select: none;
}

.card-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.gradient-info-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.location-title-text {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.description-snippet-text {
    font-family: "Lexend";
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.external-action-icon {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    pointer-events: all;
}

.external-action-icon:hover {
    opacity: 1;
}

.navigation-dots-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s;
}

.position-indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.5;
}

.position-indicator-dot.current-active {
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    opacity: 1;
}

/* Responsive breakpoints */
@media (max-width: 1400px) {
    .carousel-viewport-wrapper {
        height: 550px;
        perspective: 1800px;
    }
}

@media (max-width: 1200px) {
    .carousel-viewport-wrapper {
        height: 520px;
        perspective: 1600px;
    }

    .surveillance-card-element {
        width: 320px;
        height: 520px;
        margin-left: -160px;
        margin-top: -260px;
    }
}

@media (max-width: 1024px) {
    .carousel-viewport-wrapper {
        height: 500px;
        perspective: 1500px;
    }

    .surveillance-card-element {
        width: 300px;
        height: 500px;
        margin-left: -150px;
        margin-top: -250px;
    }

    .gradient-info-panel {
        padding: 18px;
        min-height: 150px;
    }

    .location-title-text {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .surveillance-carousel-container {
        padding: 60px 0;
    }

    .carousel-viewport-wrapper {
        height: 450px;
        perspective: 1200px;
    }

    .surveillance-card-element {
        width: 260px;
        height: 420px;
        margin-left: -130px;
        margin-top: -210px;
    }

    .gradient-info-panel {
        padding: 15px;
        min-height: 130px;
    }

    .location-title-text {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .description-snippet-text {
        font-size: 9px;
        margin-bottom: 8px;
    }

    .navigation-dots-container {
        margin-top: 40px;
        gap: 15px;
    }

    .position-indicator-dot {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 640px) {
    .carousel-viewport-wrapper {
        height: 420px;
        perspective: 1100px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }
}

@media (max-width: 480px) {
    .surveillance-carousel-container {
        padding: 40px 0;
    }

    .carousel-viewport-wrapper {
        height: 380px;
        perspective: 1000px;
    }

    .surveillance-card-element {
        width: 220px;
        height: 350px;
        margin-left: -110px;
        margin-top: -175px;
    }

    .gradient-info-panel {
        padding: 12px;
        min-height: 110px;
    }

    .location-title-text {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .description-snippet-text {
        font-size: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 6px;
    }

    .external-action-icon svg {
        width: 20px;
        height: 20px;
    }

    .navigation-dots-container {
        margin-top: 30px;
        gap: 12px;
    }

    .position-indicator-dot {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 375px) {
    .carousel-viewport-wrapper {
        height: 350px;
    }

    .surveillance-card-element {
        width: 200px;
        height: 320px;
        margin-left: -100px;
        margin-top: -160px;
    }

    .location-title-text {
        font-size: 12px;
    }

    .description-snippet-text {
        font-size: 7.5px;
    }

    .external-action-icon {
        display: none;
    }
}

@media (max-width: 320px) {
    .carousel-viewport-wrapper {
        height: 320px;
    }

    .surveillance-card-element {
        width: 180px;
        height: 290px;
        margin-left: -90px;
        margin-top: -145px;
    }

    .gradient-info-panel {
        padding: 10px;
        min-height: 90px;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .surveillance-carousel-container {
        padding: 30px 0;
    }

    .carousel-viewport-wrapper {
        height: 400px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }

    .navigation-dots-container {
        margin-top: 25px;
    }
}


.item-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.slider-item:not(.active) .item-content-overlay {
    opacity: 0.96;
}

.item-heading {
    font-family: "Space Grotesk";
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.item-text {
    font-family: "Space Grotesk";
    font-size: 10px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.item-external-link {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.item-external-link:hover {
    opacity: 1;
}

.slider-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
}

.indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.indicator-dot.active {
    background-color:linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    border-color: #ff0000;
}

@media (max-width: 1024px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-item:not(.active) {
        width: 200px;
        height: 350px;
        margin: 0 10px;
    }
    .slider-item.active {
        justify-content: center;
        width: 300px;
        height: 500px;
        margin: 0 20px;
    }
    .item-heading {
        font-size: 1.1em;
    }
    .item-text {
        font-size: 0.85em;
    }
    .slider-track {
        padding: 0 5%;
    }
}

@media (max-width: 768px) {
    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 150px;
        height: 280px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.8);
    }
    .slider-item.active {
        width: 250px;
        height: 400px;
        margin: 0 10px;
    }
    .item-content-overlay {
        padding: 15px;
        min-height: 120px;
    }
    .item-heading {
        font-size: 1em;
    }
    .item-text {
        font-size: 0.8em;
    }
    .slider-track {
        padding: 0 2%;
    }
}

@media (max-width: 480px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-track {
        justify-content: flex-start;
        padding: 0 20px;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 100px;
        height: 180px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.7);
    }
    .slider-item.active {
        width: 280px;
        height: 450px;
        margin: 0 10px;
    }
    .item-heading {
        font-size: 0.9em;
    }
    .item-text {
        font-size: 0.75em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .item-external-link {
        display: none;
    }
}

/* CCTV FLASHCARDS */

.ui-main-panel {
    margin: 80px auto;
    width: 100%;     
    width: 1700px;
    height: 600px;
    padding: 20px;
    background: linear-gradient(180deg, #D9D9D9 0%, #737373 100%);
    border-radius: 50px;
    border: 5px solid;
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    overflow: hidden; 
}

.panel-text-module {
    padding: 20px 0 20px 100px;
}

.panel-text-module p {
    font-family: "Space Grotesk";
    color: #ffffff;
    font-size: 32px;
    line-height: 1.6;
    width: 950px;

}

.surveillance-slider-zone {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-stack-viewport {
    position: relative;
    width: 50px; 
    height: 380px;
}

.security-image-card {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 280px;
    height: 380px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    cursor: pointer; 
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); 

    /* Initial hidden/back position for all cards */
    transform: translate(-50%, -50%) translate3d(0, 0, -200px) rotateY(0deg) scale(0.8);
    opacity: 0;
    z-index: 0;
}

.security-image-card[data-index="0"] { background-image: url('/images/services/PASIG-THREELIGHTS-2.jpg'); } 
.security-image-card[data-index="1"] { background-image: url('/images/services/BENJAMIN-CAMERINO-2.jpg'); }
.security-image-card[data-index="2"] { background-image: url('/images/services/BJMP-Teresa-\ District-JAIL-2.jpg'); }
.security-image-card[data-index="3"] { background-image: url('/images/services/RON-GONZALES-2.jpg'); }


.security-image-card.card--active {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
    z-index: 10;
    cursor: pointer;
}


.security-image-card.card--stacked-1 {
    transform: translate(-50%, -50%) translate3d(-10px, 10px, -20px) rotate(-3deg);
    opacity: 1;
    z-index: 9;
    filter: brightness(0.8);
    cursor: default;
}

.security-image-card.card--stacked-2 {
    transform: translate(-50%, -50%) translate3d(-20px, 20px, -40px) rotate(-6deg);
    opacity: 1;
    z-index: 8;
    filter: brightness(0.7);
    cursor: default;
}

.security-image-card.card--stacked-3 {
    transform: translate(-50%, -50%) translate3d(-30px, 30px, -60px) rotate(-9deg);
    opacity: 1;
    z-index: 7;
    filter: brightness(0.6);
    cursor: default;
}


.security-image-card.card--slide-out {
    transform: translate(-50%, -50%) translate3d(100px, 0, 0) rotate(5deg) scale(0.9);
    opacity: 0;
    z-index: 11; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .ui-main-panel {
        width: 95%;
        height: 550px;
        margin: 15px auto;
        padding: 8px;
        border-radius: 20px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 8px;
        text-align: center;
        margin-bottom: -40px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 280px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 150px;
        height: 200px;
    }

    .security-image-card {
        width: 160px;
        height: 230px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .ui-main-panel {
        width: 95%;
        min-height: 580px;
        margin: 16px auto;
        padding: 9px;
        border-radius: 22px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 290px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 220px;
        height: 260px;
    }

    .security-image-card {
        width: 170px;
        height: 240px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .ui-main-panel {
        width: 95%;
        min-height: 620px;
        margin: 20px auto;
        padding: 9px;
        border-radius: 24px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -50px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 270px;
        width: 100%;
        margin-left: 20px;
    }

    .card-stack-viewport {
        width: 230px;
        height: 270px;
    }

    .security-image-card {
        width: 180px;
        height: 230px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 18px auto;
        padding: 10px;
        border-radius: 25px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 16.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 310px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 240px;
        height: 280px;
    }

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

@media (min-width: 400px) and (max-width: 412px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 26px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 320px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 250px;
        height: 290px;
    }

    .security-image-card {
        width: 200px;
        height: 270px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 27px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 17.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 325px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 255px;
        height: 295px;
    }

    .security-image-card {
        width: 205px;
        height: 275px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 20px auto;
        padding: 10px;
        border-radius: 28px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 18px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 330px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 260px;
        height: 300px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 22px auto;
        padding: 12px;
        border-radius: 30px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 12px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 19px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 350px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 280px;
        height: 320px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 28px auto;
        padding: 15px;
        border-radius: 38px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 18px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 23px;
        line-height: 1.55;
        width: 100%;
        margin-bottom: -20px;
    }

    .surveillance-slider-zone {
        height: 380px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 290px;
        height: 340px;
    }

    .security-image-card {
        width: 235px;
        height: 320px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 30px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 390px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 295px;
        height: 345px;
    }

    .security-image-card {
        width: 238px;
        height: 325px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .ui-main-panel {
        width: 95%;
        min-height: 790px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 20px 35px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 395px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 298px;
        height: 348px;
    }

    .security-image-card {
        width: 240px;
        height: 328px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .ui-main-panel {
        width: 95%;
        min-height: 850px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 40px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 400px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 300px;
        height: 350px;
    }

    .security-image-card {
        width: 290px;
        height: 380px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 820px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .panel-text-module {
        padding: 20px 45px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 410px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 305px;
        height: 355px;
    }

    .security-image-card {
        width: 245px;
        height: 335px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 850px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 50px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 415px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 308px;
        height: 358px;
    }

    .security-image-card {
        width: 298px;
        height: 388px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .ui-main-panel {
        width: 95%;
        height: 580px;
        margin: 60px auto;
        padding: 18px;
        border-radius: 45px;
        border-width: 5px;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .panel-text-module {
        padding: 20px 0 20px 70px;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: auto;
        width: 100%;
    }

    .card-stack-viewport {
        width: 350px;
        height: 400px;
    }

    .security-image-card {
        margin-top: 10px;
        margin-left: 10px;
        width: 290px;
        height: 390px;
    }

}

/* ====================== End ======================= */

/* PC BUILD DETAILS */

.pc-project-container {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #000; 
    color: #fff;
    overflow-x: hidden;
    box-sizing: border-box;
}

.top-section {
    position: relative;
    width: 100%;
    height: 650px;
    margin: 0;
    padding: 0;
    background-color: #222; 
    background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
    box-sizing: border-box;
    animation: fadeIn 1s ease-out, subtleZoom 20s ease-in-out infinite alternate;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes subtleZoom {
    from {
        background-size: 100%;
    }
    to {
        background-size: 105%;
    }
}

.bottom-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
    background-color: #000; 
    text-align: center;
    box-sizing: border-box;
    animation: fadeInUp 1s ease-out 0.3s both;
}

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

.pc-cases-row {
    position: relative;
    width: 100%;
    max-width: 2500px;
    margin: clamp(-100px, -15vh, -200px) auto 0;
    display: flex;
    justify-content: center; 
    align-items: flex-end; 
    z-index: 10;
    padding: 0 clamp(15px, 3vw, 40px);
    box-sizing: border-box;
    animation: slideUp 1.2s ease-out 0.5s both;
}

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

.pc-case-image {
    width: 100%; 
    height: auto;
    max-width: 100%;
    min-height: clamp(150px, 25vh, 300px);
    max-height: clamp(250px, 40vh, 520px);
    object-fit: contain;
    object-position: center bottom;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.pc-case-image:hover {
    transform: scale(1.05) translateY(-10px);
    filter: brightness(1.1);
}

.caption {
    margin: clamp(20px, 3vh, 50px) 0 0;
    padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
    z-index: 20;
    box-sizing: border-box;
    animation: fadeIn 1s ease-out 0.8s both;
}

.caption p {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(16px, 3.5vw, 32px);
    font-weight: 400;
    margin-top: 20px;
    padding: 0;
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    line-height: 1.4;
}

.sr-title {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto 50px;
    padding: 0 clamp(15px, 3vw, 30px);
    box-sizing: border-box;
}

.member-shop h1 {
    text-align: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 7vw, 64px);
    margin: clamp(20px, 4vh, 40px) 0;
    padding: 0 clamp(15px, 3vw, 30px);
    line-height: 1.2;
    box-sizing: border-box;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Universal box-sizing */
* {
    box-sizing: border-box;
}

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
    .top-section {
        height: clamp(250px, 35vh, 300px);
        background-position: center;
        box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        animation: subtlePulse 8s ease-in-out infinite;
    }
    
    .pc-cases-row {
        margin-top: clamp(-150px, -15vh, -100px);
        padding: 0 10px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 500px;
        animation: floatIn 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(30px);
    }
    
    .pc-case-image:nth-child(1) {
        animation-delay: 0.2s;
    }
    
    .pc-case-image:nth-child(2) {
        animation-delay: 0.4s;
    }
    
    .pc-case-image:nth-child(3) {
        animation-delay: 0.6s;
    }
    
    .bottom-section {
        padding: 15px 10px;
        animation: fadeInUp 1s ease-out 0.8s forwards;
        opacity: 0;
    }
    
    .caption {
        margin-top: clamp(15px, 2vh, 30px);
        padding: 10px 15px;
        animation: slideInLeft 0.6s ease-out 1.2s forwards;
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .member-shop h1 {
        margin: 15px 0;
        padding: 0 10px;
        animation: fadeInScale 0.7s ease-out 0.3s forwards;
        opacity: 0;
        transform: scale(0.9);
    }
    
    /* Keyframe animations */
    @keyframes floatIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInLeft {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes fadeInScale {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes subtlePulse {
        0%, 100% {
            box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        }
        50% {
            box-shadow: inset 50px 50px 120px rgba(100, 0, 150, 0.5);
        }
    }
}
/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
    .top-section {
        height: clamp(300px, 45vh, 500px);
        background-position: top center;
        box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-90px, -14vh, -130px);
        padding: 0 15px;
    }
    
    .pc-case-image {
        min-height: 150px;
        max-height: 250px;
    }
    
    .bottom-section {
        padding: 20px 15px;
    }
    
    .caption {
        margin-top: clamp(18px, 2.5vh, 35px);
        padding: 12px 20px;
    }
    
    .member-shop h1 {
        margin: 20px 0;
        padding: 0 15px;
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    .top-section {
        height: clamp(400px, 55vh, 650px);
        box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-130px, -18vh, -180px);
        padding: 0 20px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 350px;
    }
    
    .bottom-section {
        padding: 25px 20px;
    }
    
    .caption {
        margin-top: clamp(25px, 3vh, 40px);
        padding: 15px 25px;
    }
    
    .member-shop h1 {
        margin: 25px 0;
        padding: 0 20px;
    }
}

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .top-section {
        height: clamp(500px, 65vh, 750px);
        box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-180px, -25vh, -250px);
        padding: 0 30px;
    }
    
    .pc-case-image {
        min-height: 280px;
        max-height: 450px;
    }
    
    .bottom-section {
        padding: 30px 25px;
    }
    
    .caption {
        margin-top: clamp(30px, 3.5vh, 45px);
        padding: 18px 30px;
    }
    
    .member-shop h1 {
        margin: 30px 0;
        padding: 0 25px;
    }
}

/* Extra large devices (large desktops) */
@media (min-width: 1440px) {
    .top-section {
        height: clamp(600px, 70vh, 800px);
        box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-220px, -30vh, -300px);
        padding: 0 40px;
    }
    
    .pc-case-image {
        min-height: 350px;
        max-height: 520px;
    }
    
    .bottom-section {
        padding: 35px 30px;
    }
    
    .caption {
        margin-top: clamp(35px, 4vh, 50px);
        padding: 20px 35px;
    }
    
    .member-shop h1 {
        margin: 35px 0;
        padding: 0 30px;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .pc-case-image {
        max-height: 600px;
    }
    
    .bottom-section {
        padding: 40px 40px;
    }
    
    .caption {
        padding: 25px 40px;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    .top-section {
        height: 60vh;
    }
    
    .pc-cases-row {
        margin-top: -20vh;
        padding: 0 clamp(10px, 2vw, 20px);
    }
    
    .pc-case-image {
        max-height: 35vh;
        min-height: 25vh;
    }
    
    .bottom-section {
        padding: 15px clamp(10px, 2vw, 20px);
    }
    
    .caption {
        margin-top: 15px;
        padding: 10px 15px;
    }
}

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
    .top-section {
        height: 50vh;
    }
    
    .pc-cases-row {
        margin-top: -15vh;
        padding: 0 10px;
    }
    
    .pc-case-image {
        max-height: 30vh;
        min-height: 20vh;
    }
    
    .bottom-section {
        padding: 10px 15px;
    }
    
    .caption {
        margin-top: 10px;
        padding: 8px 15px;
    }
    
    .member-shop h1 {
        margin: 10px 0;
    }
}

/* OVERVIEW */


.main-wrapper {
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            background-color: #000; 
            color: #fff;
            overflow-x: hidden;
            box-sizing: border-box;
        }

.hero-banner {
            position: relative;
            width: 100%;
            height: clamp(300px, 50vh, 800px);
            margin: 0;
            padding: 0;
            background-color: #222; 
            background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
            box-sizing: border-box;
        }

.footer-area {
            position: relative;
            width: 100%;
            margin: 0;
            padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
            background-color: #000; 
            text-align: center;
            box-sizing: border-box;
        }

.showcase-grid {
            position: relative;
            width: 100%;
            max-width: 2500px;
            margin: clamp(-100px, -15vh, -200px) auto 0;
            display: flex;
            justify-content: center; 
            align-items: flex-end; 
            z-index: 10;
            padding: 0 clamp(15px, 3vw, 40px);
            box-sizing: border-box;
        }

.featured-img {
            width: 100%; 
            height: auto;
            max-width: 100%;
            min-height: clamp(150px, 25vh, 300px);
            max-height: clamp(250px, 40vh, 520px);
            object-fit: contain;
            object-position: center bottom;
            display: block;
            margin: 0;
            padding: 0;
        }

.text-overlay {
            margin: clamp(20px, 3vh, 50px) 0 0;
            padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
            z-index: 20;
            box-sizing: border-box;
        }

.text-overlay p {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(16px, 3.5vw, 32px);
            font-weight: 400;
            margin: 0;
            padding: 0;
            letter-spacing: clamp(0.5px, 0.1vw, 1px);
            line-height: 1.4;
        }

.heading-wrapper {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(15px, 3vw, 30px);
            box-sizing: border-box;
        }

.store-header h1 {
            text-align: center;
            color: white;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(28px, 7vw, 64px);
            margin: clamp(20px, 4vh, 40px) 0;
            padding: 0 clamp(15px, 3vw, 30px);
            line-height: 1.2;
            box-sizing: border-box;
        }

/* OVERVIEW */
.page-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
        }

        /* Row 1 - Hero Section */
.intro-section {
            font-family: "Space Grotesk", sans-serif;
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 30px);
            padding: clamp(20px, 4vw, 60px);
            min-height: 0;
        }

.intro-section h1 {
            grid-column: 1 / -1;
            font-size: clamp(28px, 6vw, 60px);
            font-weight: 700;
            margin: 0 auto;
            text-align: center;
            line-height: 1.2;
        }

.intro-section p {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            font-size: clamp(16px, 2.5vw, 32px);
            font-weight: 400;
            line-height: 1.6;
            color: white;
            padding: 0 clamp(10px, 2vw, 20px);
        }

/* Row 2, 3, 4, 5 - Content Sections */
.flex-section {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

.text-block {
            padding: clamp(25px, 5vw, 80px) clamp(20px, 4vw, 60px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            order: 1;
        }

.visual-block {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            min-height: clamp(250px, 40vh, 450px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            order: 2;
            width: 100%;
        }

.visual-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

.text-block h2 {
            font-size: clamp(28px, 5vw, 64px);
            margin-bottom: clamp(15px, 3vw, 25px);
            line-height: 1.2;
            width: 100%;
            padding-bottom: 1rem;
        }

.text-block p {
            font-size: clamp(14px, 2.2vw, 28px);
            font-weight: 400;
            line-height: 1.7;
            color: white;
            margin-bottom: clamp(20px, 4vw, 30px);
            max-width: 800px;
        }

.action-btn {
        text-decoration: none;
        color: white;
        font-size: 18px;
        font-weight: 500;
        padding: 15px 70px;
        border-radius: 70px;
        border: 1px solid #7B54B1;
        margin-top: 30px;
        background: linear-gradient(to right, rgba(168, 85, 247, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
        background-repeat: no-repeat;
        background-size: 80%;
        animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.action-btn:hover {
            transform: translateY(-2px);
            background-color: #a855f7;
        }

.action-btn:active {
            transform: translateY(0);
        }

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
            .hero-banner {
                height: clamp(250px, 35vh, 300px);
                background-position: center;
                box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-150px, -15vh, -100px);
                padding: 0 10px;
            }
            
            .featured-img {
                min-height: 120px;
                max-height: 200px;
            }
            
            .footer-area {
                padding: 15px 10px;
            }
            
            .text-overlay {
                margin-top: clamp(15px, 2vh, 30px);
                padding: 10px 15px;
            }
            
            .store-header h1 {
                margin: 15px 0;
                padding: 0 10px;
            }
        }

/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
            .hero-banner {
                height: clamp(300px, 45vh, 500px);
                background-position: top center;
                box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-90px, -14vh, -130px);
                padding: 0 15px;
            }
            
            .featured-img {
                min-height: 150px;
                max-height: 250px;
            }
            
            .footer-area {
                padding: 20px 15px;
            }
            
            .text-overlay {
                margin-top: clamp(18px, 2.5vh, 35px);
                padding: 12px 20px;
            }
            
            .store-header h1 {
                margin: 20px 0;
                padding: 0 15px;
            }
        }

/* Medium devices (tablets) */
@media (min-width: 768px) {
            .intro-section {
                gap: clamp(20px, 3vw, 30px);
                padding: clamp(30px, 5vw, 80px);
            }

            .intro-section p {
                width: 85%;
                font-size: clamp(18px, 2.8vw, 34px);
            }

            .text-block {
                padding: clamp(35px, 6vw, 70px) clamp(25px, 5vw, 50px);
            }

            .visual-block {
                min-height: clamp(300px, 45vh, 500px);
            }

            .action-btn {
                max-width: 300px;
                min-height: 52px;
            }
        }

@media (min-width: 768px) and (max-width: 1023px) {
            .hero-banner {
                height: clamp(400px, 55vh, 650px);
                box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-130px, -18vh, -180px);
                padding: 0 20px;
            }
            
            .featured-img {
                min-height: 200px;
                max-height: 350px;
            }
            
            .footer-area {
                padding: 25px 20px;
            }
            
            .text-overlay {
                margin-top: clamp(25px, 3vh, 40px);
                padding: 15px 25px;
            }
            
            .store-header h1 {
                margin: 25px 0;
                padding: 0 20px;
            }
        }

/* Desktop Breakpoint (1024px and up) */
@media (min-width: 1024px) {
            .intro-section {
                grid-template-columns: repeat(2, 1fr);
                align-items: center;
                padding: clamp(40px, 6vw, 100px);
            }

            .intro-section h1 {
                text-align: left;
                font-size: clamp(36px, 5vw, 60px);
            }

            .intro-section p {
                width: 100%;
                text-align: left;
                padding-left: 0;
                font-size: clamp(20px, 2.2vw, 32px);
            }

            .flex-section {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                min-height: clamp(450px, 55vh, 650px);
            }

            .text-block {
                text-align: left;
                align-items: flex-start;
                padding: clamp(50px, 7vw, 90px) clamp(40px, 6vw, 80px);
                order: 1;
            }

            .text-block h2 {
                text-align: left;
                font-size: clamp(32px, 4.5vw, 64px);
            }

            .text-block p {
                font-size: clamp(16px, 2vw, 28px);
            }

            .visual-block {
                min-height: 100%;
                order: 2;
            }

            /* Alternate layout for odd rows (content left, image right) */
            .flex-section:nth-child(odd) .text-block {
                order: 1;
            }

            .flex-section:nth-child(odd) .visual-block {
                order: 2;
            }

            /* Even rows (image left, content right) */
            .flex-section:nth-child(even) .text-block {
                order: 2;
            }

            .flex-section:nth-child(even) .visual-block {
                order: 1;
            }

            .action-btn {
                max-width: 320px;
                width: auto;
                min-height: 54px;
            }
        }

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
            .hero-banner {
                height: clamp(500px, 65vh, 750px);
                box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-180px, -25vh, -250px);
                padding: 0 30px;
            }
            
            .featured-img {
                min-height: 280px;
                max-height: 450px;
            }
            
            .footer-area {
                padding: 30px 25px;
            }
            
            .text-overlay {
                margin-top: clamp(30px, 3.5vh, 45px);
                padding: 18px 30px;
            }
            
            .store-header h1 {
                margin: 30px 0;
                padding: 0 25px;
            }
        }

/* Large Desktop Breakpoint (1440px and up) */
@media (min-width: 1440px) {
            .page-wrapper {
                max-width: 1920px;
                margin: 0 auto;
            }

            .text-block p {
                font-size: clamp(18px, 1.5vw, 28px);
            }

            .hero-banner {
                height: clamp(600px, 70vh, 800px);
                box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-220px, -30vh, -300px);
                padding: 0 40px;
            }
            
            .featured-img {
                min-height: 350px;
                max-height: 520px;
            }
            
            .footer-area {
                padding: 35px 30px;
            }
            
            .text-overlay {
                margin-top: clamp(35px, 4vh, 50px);
                padding: 20px 35px;
            }
            
            .store-header h1 {
                margin: 35px 0;
                padding: 0 30px;
            }
        }

/* Ultra-wide screens (1920px and up) */
@media (min-width: 1920px) {
            .intro-section h1 {
                font-size: 64px;
            }

            .intro-section p {
                font-size: 32px;
            }

            .text-block h2 {
                font-size: 64px;
            }

            .text-block p {
                font-size: 28px;
            }

            .featured-img {
                max-height: 600px;
            }
            
            .footer-area {
                padding: 40px 40px;
            }
            
            .text-overlay {
                padding: 25px 40px;
            }
        }

/* Small Mobile Optimization (max 375px) */
@media (max-width: 375px) {
            .intro-section {
                gap: 12px;
            }

            .text-block {
                padding: clamp(20px, 5vw, 30px) clamp(15px, 4vw, 20px);
            }

            .visual-block {
                min-height: clamp(200px, 35vh, 300px);
            }

            .action-btn {
                min-height: 42px;
                font-size: 13px;
            }
        }

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
            .hero-banner {
                height: 60vh;
            }
            
            .showcase-grid {
                margin-top: -20vh;
                padding: 0 clamp(10px, 2vw, 20px);
            }
            
            .featured-img {
                max-height: 35vh;
                min-height: 25vh;
            }
            
            .footer-area {
                padding: 15px clamp(10px, 2vw, 20px);
            }
            
            .text-overlay {
                margin-top: 15px;
                padding: 10px 15px;
            }

            .visual-block {
                min-height: 70vh;
            }
            
            .text-block {
                padding: clamp(20px, 4vh, 40px) clamp(20px, 4vw, 60px);
            }
        }

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
            .hero-banner {
                height: 50vh;
            }
            
            .showcase-grid {
                margin-top: -15vh;
                padding: 0 10px;
            }
            
            .featured-img {
                max-height: 30vh;
                min-height: 20vh;
            }
            
            .footer-area {
                padding: 10px 15px;
            }
            
            .text-overlay {
                margin-top: 10px;
                padding: 8px 15px;
            }
            
            .store-header h1 {
                margin: 10px 0;
            }
        }

/* Print styles */
@media print {
            .action-btn {
                background: #6d28d9;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }

/*FDAS PAGE BY PCESS*/
/*FDAS PAGE BY PCESS*/


.top-feature-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-hero-wrapper {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('/images/services/FDAS2.jpg');
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    z-index: 1;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,    /* Top is transparent */
        transparent 50%,   /* Transparent up to halfway */
        rgba(0, 0, 0, 0.3) 60%,  /* Start fading in at halfway */
        rgba(0, 0, 0, 0.8) 80%,  /* Darker at bottom */
        black 100%        /* Fully visible at bottom */
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 60%,
        rgba(0, 0, 0, 0.8) 80%,
        black 100%
    );
}

.header-text-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 60px;
    width: 100%;
    text-align: center;
    animation: fadeInLeft 1.5s ease-out;
    z-index: 2;
}

.fade-right {
    display: inline-block;
    animation: fadeInRight 1.5s ease-out;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(0);
    }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.header-text-layer h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}

.view-details-btn {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 20px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.view-details-btn:hover {
    background-color: #FF4500;
}

.selection-criteria-block {
    display: flex;
    align-items: center;
    max-width: 1350px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
   
    .selection-criteria-block.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .selection-criteria-block.animate-visible {
        animation: 2s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* Left Column - Visual Container */
.image-display-area {
    flex: 1;
    min-height: 500px;
    background-image: url("https://i.pinimg.com/736x/64/f7/28/64f728aaf40516331f0f6487c786662f.jpg");
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

.image-display-area:hover {
    /* Apply Gradient Border on Hover */
    border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
}

.selection-criteria-block:nth-child(2) .image-display-area {
    background-image: url("https://i.pinimg.com/736x/64/8f/15/8f15c8d3e4c5a4b8c9e1a4e5e.jpg");
}

.selection-criteria-block:nth-child(2) .image-display-area:hover {
    border-image: linear-gradient(90deg, #FF4500 0%, #FF6347 50%, #FF8C00 100%) 1;
}

/* Right Column - Content Container */
.info-details-box {
    flex: 1;
    padding-left: 70px;
}

@keyframes glow-fire {
    from {
        text-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
    }
    to {
        text-shadow: 0 0 30px rgba(255, 69, 0, 0.8), 0 0 40px rgba(255, 140, 0, 0.6);
    }
}


/* Title Styling */
.title-first-line {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: 0%;
}


/* Feature List Styling */
.key-advantages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.key-advantages-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.key-advantages-list li:hover{
    transform: translateY(-5px) scale(1.05);
}


.item-icon-style {
    font-size: 20px;
    margin-right: 15px;
    color: white;
    transform: rotate(-15deg);
}

.item-icon-style:hover {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}


.value-proposition-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 30px 20px;
    margin: auto;
}


.value-card-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-display-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}



.card-text-content {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.customer-feedback-module {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "content visual"
        "button button";
   
    gap: 10px; 
    max-width: 1000px; 
    margin: 20px auto; 
    padding: 0 10px; 
    align-items: start;

}

    .customer-feedback-module.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .customer-feedback-module.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }


.feedback-text-area {
    grid-area: content;
    padding-right: 20px;
    
}

.feedback-header-one {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.client-quote-text {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.rating-stars-container .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    
 
    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .rating-stars-container :hover {
        transform: translateY(-5px) scale(1.05);
    }


/* Product Visual (Right Column) */
.item-showcase-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(https://i.pinimg.com/736x/08/ad/46/08ad464419417d928e8cb3ae47dd8219.jpg);
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .item-showcase-visual:hover {
        /* 1. Revert to Color on Hover */
        
        /* 2. Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
    }

/* Button Container (Spans both columns) */
.call-to-action-wrapper {
    grid-area: button;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* See Reviews Button Styling */
.reviews-link-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.reviews-link-button:hover {
    background-color: #FF4500;
}

.bottom-promo-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.secondary-hero-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('https://i.pinimg.com/736x/fc/c4/28/fcc4281f495dd945fb8261ef33f0afcf.jpg');      
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%); /* Become fully transparent (bottom fade-out) */
    overflow: hidden;   
}

.bottom-text-layer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
}

.bottom-text-layer h1 {
    color: white;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-style: Bold;
    font-size: 36px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}


.link-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    border: 4px solid #fff;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.2s, color 0.3s;
    background-color: transparent;
}

.link-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    color: #fff;
}

.link-action-btn .fas {
    margin-left: 10px;
    font-size: 0.9em;
    transition: margin-left 0.3s;
}

.link-action-btn:hover .fas {
    margin-left: 15px;
}

/* FDAS RESPONSIVE DESIGN */

    @media (min-width: 1400px) {
    .top-feature-area {
        max-width: 1500px;
    }

    .selection-criteria-block {
        max-width: 1500px;
    }
    
    .value-proposition-grid {
        max-width: 1500px;
        gap: 50px;
    }

    .customer-feedback-module {
        max-width: 1400px;
    }
}


    @media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .selection-criteria-block {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-first-line {
        font-size: 2.8rem; 
    }
    
    /* Ensure the grid columns are spacious */
    .value-proposition-grid {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 30px auto;
    }
}


/* 🚀 LARGE SCREEN RESPONSIVENESS (Desktops: min-width: 1025px) */
@media (min-width: 1025px) {

    /* BOTTOM PROMO STRIP */
    .secondary-hero-wrapper {
        /* Increase height of the hero strip */
        height: 550px;
    }
    
    .bottom-text-layer {
        /* Adjust padding for larger viewports */
        padding: 50px 80px;
    }

    .bottom-text-layer h1 {
        /* Increase main heading size */
        font-size: 64px;
    }
}



    @media(max-width: 768px) {

        /* top feature area */
        .top-feature-area {
            width: 100%; /* Change from max-width */
            max-width: 100%; /* Ensure it doesn't overflow */
            margin-top: -150px;
        }

        /* PRIMARY HERO WRAPPER - Fix mobile overflow */
        .primary-hero-wrapper {
            width: 100% !important; /* Override 127% width on mobile */
            height: 450px; /* Adjust height for mobile */
        }

        /* Hero text adjustments for mobile */
        .header-text-layer {
            padding: 20px 30px;
            transform: translate(-50%, -60%); /* Elevate the text position even more */
        }

        .header-text-layer h1 {
            font-size: 28px; /* Smaller font for mobile */
            line-height: 1.1;
        }

        /* SELECTION CRITERIA BOX */
        .selection-criteria-block {
            flex-direction: column;
            padding: 0 20px;
            margin: 40px auto;
        }

        .image-display-area {
            width: 100%;
            min-height: 350px;
            margin-left: 0;
            margin-bottom: 30px;
            border-width: 8px;
        }

        .info-details-box {
            width: 100%;
            padding-left: 0;
            text-align: center;
        }

        .title-first-line {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .key-advantages-list li {
            font-size: 24px;
            line-height: 1.8;
            justify-content: center;
        }

        .item-icon-style {
            font-size: 18px;
            margin-right: 10px;
        }
    

        /*value-proposition grid */
        .value-proposition-grid {
            font-size: 2rem;
            grid-template-columns: 1fr; /* Stack items vertically */
        }

            .card-text-content{
                font-size: 1.5rem;
            }


        /* bottom promo strip */
        .bottom-promo-strip{
            font-size: 2rem;
        }
                    
        .secondary-hero-wrapper {
            max-width: 768px; /* Ensure it doesn't overflow */
        }

    }

    @media (min-width: 577px) and (max-width: 1024px) {
        /* PRIMARY HERO SECTION */
        .primary-hero-wrapper {
            height: 500px;
        }

        .header-text-layer {
            padding: 30px 40px;
        }

        .header-text-layer h1 {
            font-size: 38px;
        }

        /* SELECTION CRITERIA BLOCK */
        .selection-criteria-block {
            /* Keep them side-by-side but allow wrapping if needed */
            flex-direction: row; 
            flex-wrap: wrap; 
            padding: 0 30px; 
        }
        
        .image-display-area {
            min-height: 400px; 
        }

        .info-details-box {
            padding-left: 50px;
        }

        .title-first-line {
            font-size: 35px;
        }

        .key-advantages-list li {
            font-size: 20px;
        }
        
        /* VALUE PROPOSITION GRID */
        .value-proposition-grid {
            /* Cards may wrap to the next line */
            gap: 30px;
            padding: 25px 30px;
            justify-content: center;
        }
        
        .value-card-element {
            min-width: 300px; /* Give them more space than on mobile */
        }


        /* BOTTOM PROMO STRIP */
        .secondary-hero-wrapper {
            height: 450px;
        }
        
        .bottom-text-layer {
            padding: 30px 40px;
        }

        .bottom-text-layer h1 {
            font-size: 40px;
        }
    }



    @media (max-width: 768px) {
    .customer-feedback-module {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "visual"
            "button";
        margin: 40px auto;
        gap: 20px;
    }

    .feedback-text-area {
        padding-right: 0;
        text-align: center;
    }

    .feedback-header-one {
        font-size: 36px;
    }

    .client-quote-text {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .rating-stars-container .fas {
        font-size: 20px;
        margin-top: 15px;
    }

    .item-showcase-visual {
        min-height: 400px;
        border-width: 8px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .customer-feedback-module {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }

    .feedback-header-one {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .client-quote-text {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .rating-stars-container .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .item-showcase-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .feedback-header-one {
        font-size: 24px;
    }

    .client-quote-text {
        font-size: 16px;
    }

    .item-showcase-visual {
        min-height: 250px;
    }
}



/* BLOG */ /* BLOG */

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


.visual-deck-section {
    position: relative;
}

.visual-deck-viewport {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

.visual-deck-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.7s ease-in-out;
}

.visual-deck-card {
    flex-shrink: 0;
    width: 33.333%;
    height: 100%;
    position: relative;
}

.deck-card-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
}

.deck-card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10%;
    box-sizing: border-box;
    z-index: 2;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
}

.text-focus-wrapper {
    font-family: "lexend";
    max-width: 500px;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.focus-main-title,
.focus-sub-title,
.focus-description,
.call-to-action-btn {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInSlide 0.6s ease-out forwards;
}

.focus-main-title {
    color: white;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 0.2em;
    animation-delay: 0.5s;
}

.focus-sub-title {
    font-size: 45px;
    font-weight: 200;
    letter-spacing: 0.1em;
    margin-bottom: 1em;
    color: white;
    animation-delay: 0.6s;
}

.focus-description {
    font-family: "Lexend";
    font-size: 24px;
    line-height: 1.5;
    font-weight: 200;
    margin-bottom: 2em;
    color: white;
    animation-delay: 0.7s;
}

.call-to-action-btn {
    display: inline-block;
    padding: 15px 30px;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    animation-delay: 0.8s;
    margin-top: 15px;
}

.call-to-action-btn:hover {
    background-color: #fff;
    color: #000;
}

.deck-pagination-nav {
    position: absolute;
    top: 80%;
    left: 48%;
    z-index: 3;
    display: flex;
    gap: 10px;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.9s; 
}

.dot-control {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot-control.active {
    background-color: #fff;
}

@media (max-width: 1024px) {
    .deck-card-content {
        padding-left: 5%;
    }

    .text-focus-wrapper {
        max-width: 400px;
    }

    .focus-main-title {
        font-size: 4.5vw;
    }

    .focus-sub-title {
        font-size: 4vw;
    }

    .focus-description {
        font-size: 2vw;
    }
}


@media (max-width: 768px) {
    .visual-deck-viewport {
        height: 70vh;
    }

    .deck-card-content {
        align-items: flex-start;
        padding: 10% 5%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
    }

    .text-focus-wrapper {
        max-width: 100%;
    }

    .focus-main-title {
        font-size: 32px;
    }

    .focus-sub-title {
        font-size: 28px;
    }

    .focus-description {
        font-size: 16px;
    }

    .call-to-action-btn {
        font-size: 1em;
        padding: 12px 24px;
    }

    .deck-pagination-nav {
        left: 45%;
        top: 50%;
        gap: 8px;
        transform: translate(-50%, -50%);
    }

    .dot-control {
        width: 10px;
        height: 10px;
    }
}

/*====================== LATEST PRODUCTS ===================*/

.catalog-display-area {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.catalog-display-area__title {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 40px;
    text-align: left;
}

.catalog-display-area__grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.item-preview {
    background-color: black;
    border-radius: 15px;
    height: 400px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.6s ease-out, transform 0.3s ease, box-shadow 0.3s ease;
}

        
.item-preview {
    opacity: 0;
    transform: translateY(50px);
}

.item-preview.animate {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s !important; 
}

    .item-preview:nth-child(2) { transition-delay: 0.2s; }
    .item-preview:nth-child(3) { transition-delay: 0.4s; }
    .item-preview:nth-child(4) { transition-delay: 0.6s; }
    .item-preview:nth-child(5) { transition-delay: 0.8s; }
    .item-preview:nth-child(6) { transition-delay: 0.10s; }
        
    .item-preview:hover,
    .item-preview.animate:hover {
    transform: translateY(-12px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-preview__image {
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

    .item-preview__image1 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image2 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image3 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image4 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image5 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image6 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }

.item-preview__details {
    color: white;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.item-preview__name {
    font-family: "Space Grotesk";
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.item-preview__description {
    font-family: "Lexend";
    font-size: 13px;
    color: white;
    margin-bottom: 10px;
    line-height: 1.4;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-preview__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.item-preview__price {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}



.catalog-display-area__button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.cta-button {
    font-family: "Lexend";
    width: 320px;
    max-width: 100%;
    height: 65px;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button:hover {
    background-color: #fff;
    color: #000;
}

@media (max-width: 768px) {
    .catalog-display-area__title {
        font-size: 28px;
        margin-top: 40px;
}
    .item-preview {
        height: auto;
}
}

@media (max-width: 480px) {
    .catalog-display-area__grid-layout {
        grid-template-columns: 1fr;
        gap: 20px;
}

@media (max-width: 768px){
    .ds-timeline-item{
        padding-left: 40px;
    }

}
    .cta-button {
        height: 55px;
        font-size: 16px;
        width: 100%;
}
}

/*============= TRENDING GADGETS ====================*/

 .ds-animate-scroll {
            opacity: 0;
            transition: var(--ds-transition); 
        }

       
        @keyframes fadeInMove {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ds-main-container.ds-is-visible {
            animation: fadeInMove 0.8s ease-out forwards;
        }

        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .ds-timeline-item.ds-is-visible {
            animation: slideIn 0.6s ease-out forwards;
        }

        
        .ds-timeline-item:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-timeline-item:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-timeline-item:nth-child(3).ds-is-visible { animation-delay: 0.3s; }

        .ds-gadget-card.ds-is-visible {
            animation: fadeInMove 0.6s ease-out forwards;
        }

        .ds-gadgets-block .ds-gadget-card:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(3).ds-is-visible { animation-delay: 0.3s; }


        .ds-main-container {
            font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
            color: white;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            max-width: 1250px;
            width: 90%; 
            margin: 200px auto;
        }

        .ds-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;

        }

        /* MOBILE VIEW SPACING FOR "DPC BEST SELLER" AND "VIEW ALL"*/
        @media (max-width:768px){
            .ds-section-header{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width:100%;
                padding: 0 10px;
                box-sizing: border-box;
                margin-left: 0;
                left: 0;
                transform: none;
            }
        }

        .ds-section-title {
            font-size: 38px;
            font-weight: 700;
            margin: 0;
            background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ds-view-all-link {
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-weight: 500;
            transition: var(--ds-transition);
            position: relative;
        }

        .ds-view-all-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #0a58ca, #00d4ff);
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover::after {
            width: 100%;
        }

        .ds-view-all-link:hover {
            color: #00d4ff;
            transform: translateX(5px);
        }

        .ds-view-all-link-icon {
            margin-left: 8px;
            font-size: 0.9rem;
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover .ds-view-all-link-icon {
            transform: translateX(3px);
        }


        .ds-gadgets-block {
            margin-right: 30px;
            display: flex;
            flex-direction: column;
            gap: 60px;
        }

        .ds-gadget-card {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            padding: 18px;
            height: 160px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
        }

        .ds-gadget-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover::before {
            left: 100%;
        }

        .ds-gadget-card:hover {
            background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2), var(--ds-shadow-lg);
            transform: translateY(-5px) scale(1.02);
        }

        .ds-gadget-info {
            display: flex;
            align-items: flex-start;
            flex-grow: 1;
        }

        .ds-gadget-thumbnail {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 15px;
            margin-right: 15px;
            margin-top: 25px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }

        .ds-gadget-thumbnail img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            object-fit: cover;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail img {
            transform: scale(1.1);
        }

        .ds-gadget-content-area h3 {
            font-size: 1.1rem;
            margin: 0 0 5px 0;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-content-area h3 {
            color: #00d4ff;
        }

        .ds-gadget-meta {
            font-size: 0.8rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .ds-gadget-category {
            font-weight: 600;
            margin-right: 10px;
        }

        .ds-gadget-category--mobile,
        .ds-gadget-category--gaming {
            color: white;
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            text-align: center;
            padding: 4px 1px;
            border-radius: 15px;
            width: 80px;
            font-size: 12px;
            font-weight: 200;
            border: 1px solid rgba(0, 123, 255, 0.3);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-category--mobile,
        .ds-gadget-card:hover .ds-gadget-category--gaming {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.4) 0%, rgba(0, 123, 255, 0.25) 100%);
            border-color: rgba(0, 123, 255, 0.5);
        }

        .ds-gadget-time {
            color: #aaa;
        }

        .ds-gadget-description {
            font-size: 0.9rem;
            color: #ccc;
        }

        .ds-gadget-link-arrow {
            color: white;
            background: linear-gradient(135deg, #333 0%, #444 100%);
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 29px;
            margin-left: 20px;
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
            border: 1px solid #444;
        }

        .ds-gadget-card:hover .ds-gadget-link-arrow {
            background: linear-gradient(135deg, #0a58ca 0%, #00d4ff 100%);
            border-color: #00d4ff;
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
        }

        @media (min-width: 431) and (max-width:768px){
            .ds-updates-block{
                display: flex;
                flex-direction: column;
                padding: 0 10px;
                align-items: center;
                transform: none;
                left: 0;
                overflow-x: hidden;
                box-sizing: border-box;
                width: 100%;

            .ds-updates-block img{
            width: 80% !important; 
            max-width: 200px;
            height: auto !important;
            margin-bottom: 15px !important; /* Space between image and text */
            }
            .ds-timeline-list{
                padding-left: 30px;
                position: relative;
            }
            .ds-timeline-item{
                padding-left: 20px;
            }
            
            }

        }


        .ds-updates-block {
            margin-left: 30px;
            position: relative;
            max-width:1200;
            margin: 0 auto;
        }

        .ds-timeline-list {
            position: relative;
            padding-left: 40px;
        }

        .ds-timeline-list::before {
            content: '';
            position: absolute;
            top: 0;
            left: 21px;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, #0a58ca 0%, #2f8d46 50%, #C34814 100%);
            z-index: 0;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item {
            position: relative;
            margin-bottom: 25px;
            padding-bottom: 20px;
            padding-left: 10px;
        }

        .ds-timeline-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .ds-timeline-item::after { 
            content: '';
            position: absolute;
            left: 4px;
            top: 11px;
            width: 15px;
            height: 2px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
            z-index: 0;
        }

        .ds-timeline-icon {
            position: absolute;
            left: -32px;
            top: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            transition: var(--ds-transition);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item:hover .ds-timeline-icon {
            transform: scale(1.15);
            box-shadow: 0 0 20px currentColor;
        }

        .ds-timeline-item--upcoming .ds-timeline-icon { 
            color: #0a58ca;
            background: radial-gradient(circle, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.1) 100%);
        }
        .ds-timeline-item--launch .ds-timeline-icon { 
            color: #2f8d46;
            background: radial-gradient(circle, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.1) 100%);
        }
        .ds-timeline-item--partnership .ds-timeline-icon { 
            color: #C34814;
            background: radial-gradient(circle, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.15) 100%);
        }

        .ds-update-content {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            height: 220px;
            padding: 15px 20px;
            border-radius: 20px;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
            align-items: center;
            justify-content: space-between;
        }
        .ds-text-side{
            flex: 2;
            width: 100%;
            display:block;
            font-size: 100px;
            
        }

        @media (max-width: 768px){
            .ds-update-content{
                display: flex;
                flex-direction: column;
                padding: 14px;
            }
            
        }

        .ds-update-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transition: var(--ds-transition);
        }

        .ds-update-content:hover::before {
            left: 100%;
        }

        .ds-update-content:hover {
            transform: translateY(-3px);
            box-shadow: var(--ds-shadow-lg);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover {
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2);
        }

        .ds-timeline-item--launch .ds-update-content:hover {
            border-color: #2f8d46;
            box-shadow: 0 8px 32px rgba(47, 141, 70, 0.2);
        }

        .ds-timeline-item--partnership .ds-update-content:hover {
            border-color: #C34814;
            box-shadow: 0 8px 32px rgba(195, 72, 20, 0.2);
        }

        .ds-update-meta-info {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 0.8rem;
        }

        .ds-update-category-tag {
            font-size: 15px;
            font-weight: 600;
            margin-right: 15px;
            padding: 4px;
            border-radius: 4px;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-category-tag {
            transform: scale(1.05);
        }

        .ds-timeline-item--upcoming .ds-update-category-tag { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-category-tag { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-category-tag { color: #C34814; }

        .ds-update-time-badgee,
        .ds-update-time-badge,
        .ds-update-time-badge-recent {
            color: white;
            text-align: center;
            padding: 4px 10px; 
            border-radius: 15px;
            width: 90px;
            font-weight: 400;
            transition: var(--ds-transition);
            border: 1px solid transparent;
            font-size: 0.8rem; 
        }

        .ds-update-time-badgee {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            border-color: rgba(0, 123, 255, 0.3);        
        }

        .ds-update-time-badge {
            background: linear-gradient(135deg, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.15) 100%);
            border-color: rgba(144, 255, 85, 0.3);  
        }

        .ds-update-time-badge-recent {
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.2) 100%);
            border-color: rgba(255, 107, 53, 0.3);           
        }

        .ds-update-content:hover .ds-update-time-badgee,
        .ds-update-content:hover .ds-update-time-badge,
        .ds-update-content:hover .ds-update-time-badge-recent {
            transform: scale(1.05);
        }

        .ds-update-content h3 {
            font-size: 1.1rem;
            margin: 0 0 10px 0;
            transition: var(--ds-transition);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover h3 { color: #00d4ff; }
        .ds-timeline-item--launch .ds-update-content:hover h3 { color: #90FF55; }
        .ds-timeline-item--partnership .ds-update-content:hover h3 { color: #FF6B35; }

        .ds-update-description {
            font-size: 0.9rem;
            color: #aaa;
            margin-bottom: 15px;
            margin-right: 150px;
        }

        @media (max-width: 768px){
            .ds-update-description{
                display: block;
                width: 100%;
                margin-bottom: 10px;

            }
            .ds-update-meta-info{
                margin:10 px;
            }
        }

        .best-seller-thumbnail {
            width: 130px;
            height: 130px; /* Fixed square size */
            background: transparent;
            border-radius: 15px;
            margin-left: 380px;
            margin-top: -150px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            transition: var(--ds-transition);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px; /* Increased padding for better spacing */
            box-sizing: border-box;
        }

        .best-seller-thumbnail img{
          
            width: 10px;
            height: 10px;
            padding: 10px;

        }

    @media (max-width: 1024px){
        .best-seller-thumbnail{
            width: 100px;
            height: 100px;
            min-width: 100%;
            margin-left: 0;
            margin-top: 0;
            margin-bottom: 15px;
            
            
        }
        .best-seller-thumbnail img {
            width: 100%;
            height: 140px;
            display:block;
            object-fit: contain;
    }
}
        .best-seller-thumbnail:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }


        .best-seller-thumbnail:hover img {
            transform: scale(1.1);
        }

        .ds-update-details-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
        }

        .ds-update-details-arrow {
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-details-arrow {
            transform: translateX(5px);
        }

       
        .ds-timeline-item--upcoming .ds-update-details-arrow { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-details-arrow { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-details-arrow { color: #C34814; }

        
        html {
            scroll-behavior: smooth;
        }

        /* Responsive adjustments */
        @media (max-width: 1240px) {
            .ds-main-container {
                width: 100%;
                display: flex;
                flex-direction: column;
            }
        }

        @media (max-width: 992px) {
            .ds-main-container {
                grid-template-columns: 1fr;
                padding: 0 20px;
                width: auto;
                margin: 100px auto;
                gap: 50px;
            }
            
            .ds-gadgets-block {
                margin-right: 0;
            }
            
            .ds-updates-block {
                margin-left: 0;
            }
        }

        @media (max-width: 1024px) {
            .ds-main-container {
                margin: 60px auto 60px;
                gap: 40px;
                padding: 0 15px;
            }
            
            .ds-section-title {
                font-size: 1.5rem;
            }
            
            .ds-gadgets-block {
                gap: 40px;
            }
            
            .ds-gadget-card {
                height: auto;
                min-height: 140px;
                flex-wrap: wrap;
                padding: 12px;
            }
            
            .ds-gadget-card:hover {
                transform: translateY(-3px) scale(1);
            }
            
            .ds-gadget-info {
                width: 100%;
            }
            
            .ds-gadget-thumbnail {
                width: 70px;
                height: 70px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 1rem;
            }
            
            .ds-gadget-description {
                font-size: 0.85rem;
            }
            
            .ds-gadget-link-arrow {
                margin-left: 0;
                margin-top: 10px;
                align-self: flex-end;
            }
            
            .ds-update-content {
                height: auto;
                min-height: 180px;
                padding: 12px 15px;
            }
            
            .ds-update-content h3 {
                font-size: 1rem;
            }
            
            .ds-update-description {
                font-size: 0.85rem;
            }
            
            .ds-timeline-list {
                padding-left: 10px;
            }
            
            .ds-timeline-list::before {
                left: 16px;
            }
            
            .ds-timeline-item {
                padding-left: 25px;
            }
            .ds-timeline-icon{
                margin-left: 25px;
            }
        }

        @media (max-width: 480px) {
            .ds-main-container {
                margin: 40px auto;
                gap: 30px;
                padding: 0 10px;
            }
            body{
                padding:5px;
            }
            
            .ds-section-header {
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-section-title {
                font-size: 1.3rem;
            }
            
            .ds-gadgets-block {
                gap: 30px;
            }
            
            .ds-gadget-card {
                padding: 10px;
                min-height: 120px;
            }
            
            .ds-gadget-thumbnail {
                width: 60px;
                height: 60px;
                margin-right: 10px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.95rem;
            }
            
            .ds-gadget-meta {
                font-size: 0.75rem;
                flex-wrap: wrap;
                gap: 5px;
            }
            
            .ds-gadget-description {
                font-size: 0.8rem;
            }
            
            .ds-gadget-link-arrow {
                width: 40px;
                height: 26px;
                font-size: 1rem;
            }
            
            .ds-gadget-category--mobile,
            .ds-gadget-category--gaming {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-content {
                padding: 10px 12px;
                min-height: 160px;
            }
            
            .ds-update-content h3 {
                font-size: 0.95rem;
            }
            
            .ds-update-description {
                font-size: 0.8rem;
                margin-bottom: 10px;
            }
            
            .ds-update-meta-info {
                font-size: 0.75rem;
            }
            
            .ds-update-category-tag {
                font-size: 13px;
                margin-right: 10px;
            }
            
            .ds-update-time-badgee,
            .ds-update-time-badge,
            .ds-update-time-badge-recent {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-details-row {
                font-size: 0.8rem;
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-timeline-icon {
                width: 24px;
                height: 24px;
                font-size: 0.85rem;
                margin-right: 25px;
            }
            
            .ds-timeline-item::after {
                top: 10px;
            }
            
            .ds-timeline-item {
                margin-bottom: 20px;
                padding-bottom: 15px;
                padding-left: 20px;
            }
           
        }

        @media (max-width: 360px) {
            .ds-section-title {
                font-size: 1.2rem;
            }
            
            .ds-gadget-thumbnail {
                width: 55px;
                height: 55px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.9rem;
            }
        }

        /* Reduced motion for accessibility */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

/*=============== BLOG POST LATEST ================*/



/* --- New Scroll-Triggered Animation CSS --- */

/* Base style for elements that will animate (Start State: Hidden and slightly offset) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Featured (Showcase) zone has a slightly different animation (Start State: Slightly scaled down) */
.showcase-zone.animate-on-scroll {
    transform: scale(0.9);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Final State (triggered by JavaScript): Visible and in original position */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Featured zone's final visible state */
.showcase-zone.animate-on-scroll.is-visible {
    transform: scale(1);
}

/* Add brief delays for a staggered gallery effect */
.gallery-matrix > .content-block.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; }

/* Delay the side panel widgets */
.side-panel > .widget-container.animate-on-scroll:nth-child(1) { transition-delay: 0.2s; }
.side-panel > .widget-container.animate-on-scroll:nth-child(2) { transition-delay: 0.4s; }

/* TRENDING POSTS SCROLL BAR*/

.trending-posts-scroll {
  max-height: 390px;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 20px;
  padding-right: 10px;
}

.trending-posts-scroll:hover {
  overflow-y: auto;
}

.trending-posts-scroll::-webkit-scrollbar {
  width: 8px;
}

.trending-posts-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* --- Original Design Styles --- */
    
.banner-strip {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap; 
}

.banner-strip h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px; 
}

.dual-column-frame {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: start;
}

.primary-zone {
    width: 100%;
}

.showcase-zone {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-zone:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.media-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.media-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.showcase-zone:hover .media-canvas {
    transform: scale(1.05);
}

.content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    padding: 40px 30px 30px;
    transition: padding 0.3s ease;
}

.showcase-zone:hover .content-overlay {
    padding: 50px 30px 30px;
}

.attributes-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.category-marker {
    background: rgba(59, 130, 246, 0.6);
    color: #fff;
    padding: 8px 18px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.time-stamp {
    color: #aaa;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.time-stamp::before {
    content: '•';
    color: #3b82f6;
}

.feature-title {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s ease;
    cursor: pointer;
}


.description-snippet {
    color: white ;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.progress-bullets {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.bullet-point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.bullet-point::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #3b82f6;
    transition: all 0.3s ease;
}

.bullet-point:hover {
    background: #666;
    transform: scale(1.2);
}

.bullet-point.active-state {
    background: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.side-panel {
    display: flex;
    flex-direction: column;
    gap: 43px;
    width: 100%;
}

.widget-container {
    color: white;
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 25px;
    width: 100%;
    transition: all 0.3s ease;
}

.widget-container:hover {
    border-color: #3b82f6;
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.widget-container h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.widget-container h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
}

.highlight-item {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #222;
    align-items: flex-start;
    transition: all 0.3s ease;
    cursor: pointer;
}

.highlight-item:hover {
    padding-left: 10px;
    background: rgba(59, 130, 246, 0.05);
}

.highlight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.position-badge {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    min-width: 40px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.highlight-item:hover .position-badge {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.item-content {
    flex: 1;
}

.item-content h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.highlight-item:hover .item-content h4 {
    color: #3b82f6;
}

.posted-time {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.highlight-item:hover .posted-time {
    color: #888;
}

.tag-collection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-element {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tag-element::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    transition: left 0.5s ease;
}

.tag-element:hover::before {
    left: 100%;
}

.tag-element:hover {
    background: #2a2a2a;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.2);
}

.gallery-matrix {
    color: white;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default for large screens */
    gap: 25px;
    width: 100%;
}

.content-block {
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
}

.content-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.content-block:hover::before {
    opacity: 1;
}

.content-block:hover {
    transform: translateY(-10px);
    border-color: #3b82f6;
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}

.preview-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image img {
    transform: scale(1.05);
}

.preview-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent);
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image::after {
    transform: translate(-50%, -50%) scale(1);
}

.text-section {
    padding: 25px;
    position: relative;
    z-index: 2;
}

.meta-information {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.subject-tag {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.subject-tag.gaming {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.content-block:hover .subject-tag.gaming {
    background: rgba(16, 185, 129, 0.2);
    transform: scale(1.05);
}

.subject-tag.arvr {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.content-block:hover .subject-tag.arvr {
    background: rgba(139, 92, 246, 0.2);
    transform: scale(1.05);
}

.subject-tag.security {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.content-block:hover .subject-tag.security {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.05);
}

.creation-date {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.content-block:hover .creation-date {
    color: #888;
}

.block-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.content-block:hover .block-title {
    color: #3b82f6;
}

.brief-description {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    transition: color 0.3s ease;
    padding-bottom: 15px;
}

.content-block:hover .brief-description {
    color: #aaa;
}

.text-section {
    padding: 25px;
    position: relative;
    z-index: 2;
}

.directional-icon {
    color: #3b82f6;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.28s ease;
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 3;
}

.content-block:hover .directional-icon {
    transform: translateX(6px);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* --- Media Queries for Responsiveness (Unchanged) --- */

/* Tablet/Medium Screens (Max 1024px) */
@media (max-width: 1024px) {
    
    .dual-column-frame {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    
    .side-panel {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 calc(50% - 10px); 
        max-width: calc(50% - 10px);
    }
    
}

    
@media (max-width: 640px) {
    .banner-strip h1 {
        font-size: 28px;
    }

    .media-wrapper {
        height: 350px; /* Smaller height for featured image */
    }

    .feature-title {
        font-size: 1.5rem;
    }

    /* Adjust gallery to a single column */
    .gallery-matrix {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Stack side panel widgets vertically */
    .side-panel {
        flex-direction: column;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/*================== END =====================*/

/* DOORLOCK SYSTEM BY PCESS */

.doorlock-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 70px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-doorlock-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;

    background-image:
    linear-gradient(200deg, rgba(62, 222, 47, 0) 30%, rgba(37, 228, 145, 0.5) 70%, rgba(27, 99, 255, 1) 100%),
    url('../images/pc-builds.jpg');
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
    to bottom,
    transparent 0%,  /* Start fully transparent (top fade-out) */
    black 10%,        /* Become fully visible at 5% */
    black 85%,       /* Stay fully visible until 95% */
    transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.doorlock-header {
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.doorlock-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}


.why-choose-layer {
    text-align: center;
    padding: 40px 20px;
}

    .why-choose-layer.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

	.why-choose-layer.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

.why-choose-question {
    font-family: 'Lexend', sans-serif;
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.why-choose-answer{
    font-size: 32px;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* client-nav section */


/* Base state for all sections - hidden by default */
.cnsection, .projsection {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Active section - visible with animation */
.cnsection:not(.d-none), .projsection:not(.d-none) {
    opacity: 1;
    transform: translateY(0);
    animation: slideInUp 0.6s ease-out forwards;
}

/* Keyframe animation for sliding in from bottom */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternative: Fade and Scale Animation */
.cnsection.scale-animation:not(.d-none), 
.projsection.scale-animation:not(.d-none) {
    animation: fadeScale 0.5s ease-out forwards;
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Staggered animation for child elements */
.cnsection:not(.d-none) .section-h1,
.projsection:not(.d-none) .proj-h1 {
    animation: slideInUp 0.6s ease-out 0.1s backwards;
}

.cnsection:not(.d-none) .section-p,
.projsection:not(.d-none) .proj-p {
    animation: slideInUp 0.6s ease-out 0.2s backwards;
}

.cnsection:not(.d-none) .dl-gradient-button,
.projsection:not(.d-none) .proj-gradient-button {
    animation: slideInUp 0.6s ease-out 0.3s backwards;
}

.cnsection:not(.d-none) .gradient-border-box,
.projsection:not(.d-none) .gradient-border-proj {
    animation: slideInRight 0.6s ease-out 0.2s backwards;
}

/* Slide in from right for images */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px); /* Start 30px to the left */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* End at the normal position */
    }
}

/* Button click feedback animation */
.clientbtn, .projbtn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clientbtn:active, .projbtn:active {
    transform: translateY(-5px) scale(0.98);
}

/* Smooth active indicator animation */
.clientbtn.active::after, .projbtn.active::after {
    animation: expandLine 0.4s ease-out forwards;
}

@keyframes expandLine {
    from {
        width: 0%;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}



.clientnavpart {
    margin-top: 30px;
    max-height: 670px;
}

.client-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for nav buttons */
.clientbtn {
    transition: color 0.2s ease;
    justify-content: center;
}

.clientbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.clientbtn.active {
    color: #fff !important;
    position: relative;
}

.clientbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

/* Replace Tailwind's 'hidden' with Bootstrap's 'd-none' */
.d-none {
    display: none !important; 
}

.section-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-box {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.section-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.cnsection {
    margin-top: 10px;
}

.section-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.section-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient */
.dl-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.dl-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* RESPONSIVE DESIGN FOR CLIENT NAV SECTION */

@media (max-width: 1280px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 100%;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1270px;
    }

    .cnsection{
        width: 1100px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}


@media (max-width: 1024px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1030px;
    }

    .cnsection{
        width: 1000px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 15px;
        width: 600px;
        align-content: center   ;
    }

    .client-nav {
         width: 500px;
    } 
    
    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content {
        width: 550px;
    }

    .cnsection {
        width: 550px;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .client-nav {
        width: 760px;
    }

    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content{
        width: 750px;
    }

    .cnsection{
        width: 750px;

    }
}


@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .cnsection, .projsection {
        transform: translateY(20px);
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .clientnavpart {
        margin-top: 15px;
        max-height: auto;
    }

    .client-nav {
        font-size: 20px;
    } 

    #nav-container {
        justify-content: center;
        padding-bottom: 1rem;
    }
    
    .clientbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .clientbtn.active::after {
        height: 2px;
    }

    .section-content {
        height: auto;
        min-height: 500px;
    }

    .cnsection {
        padding: 2rem 1rem !important;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}


@media (max-width: 430px) {

    .clientnavpart {
        margin-top: 15px;
        width: 400px;
        align-content: center   ;
    }

    .client-nav {
         width: 400px;
    } 
    
    .clientbtn {
        width: 85px;
        padding: 1px !important;
    }

    .section-content {
        width: 400px;
    }

    .cnsection {
        width: 400px;
    }

    .section-h1 {
        font-size: 26px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 250px;
    }

    .section-img {
        min-height: 250px;
    }

    .dl-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .clientnavpart {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .client-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .clientbtn {
        width: 80px;
        padding: 1px !important;
    }

    .section-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .cnsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }

    .section-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .section-p {
        font-size: 14px;
        margin-top: 20px;
        line-height: 1.4;
    }

    .gradient-border-box {
        min-height: 220px;
        margin-bottom: 1.5rem;
    }

    .section-img {
        min-height: 220px;
    }

    .dl-gradient-button {
        padding: 8px 20px;
        font-size: 0.75rem;
        max-width: 250px;
    }
}
/* MANY MORE SECTION */


.many-more {
    margin-top: 70px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
}

.and-many {
    font-size: 48px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}


@media (max-width: 1024px) {
    .and-many {
        font-size: 2rem;
        margin-left: 15px;
    }
}

@media (max-width: 768px) {
    .and-many {
        font-size: 1.8rem;
        margin-left: 15px;
    }
}

@media (max-width: 480px) {
    .and-many {
        font-size: 1.8rem;
    }
}

.many-more-container {
    margin-top: 60px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 400px;
}

    .many-more-container.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .many-more-container.animate-visible {
        animation: 1.2s anim-fadeIn linear forwards; 
    }

/* Replaced .card */
.clients-card {
    position: absolute;
    width: 90%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform .4s ease;
    cursor: pointer;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    min-height: 440px;
    display: flex;
}

.clients-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

/* Replaced .container */
.clients-container {
    width: 100%;
    max-width: 800px;
    max-height: 600px;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Replaced .cards */
.many-more-cards {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
}

/*
 * CORE ANIMATION LOGIC (Updated to use .clients-container)
 */

/* Side Cards (Left position: translateX(-40%)) */
.clients-container.active-card-1 #card-3, /* Card 3 moves left when 1 is active */
.clients-container.active-card-2 #card-1, /* Card 1 moves left when 2 is active */
.clients-container.active-card-3 #card-2 { /* Card 2 moves left when 3 is active */
    transform: translatex(-40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Side Cards (Right position: translateX(40%)) */
.clients-container.active-card-1 #card-2, /* Card 2 moves right when 1 is active */
.clients-container.active-card-2 #card-3, /* Card 3 moves right when 2 is active */
.clients-container.active-card-3 #card-1 { /* Card 1 moves right when 3 is active */
    transform: translatex(40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Center Card (translateX(0)) */
.clients-container.active-card-1 #card-1, /* Card 1 centers */
.clients-container.active-card-2 #card-2, /* Card 2 centers */
.clients-container.active-card-3 #card-3 { /* Card 3 centers */
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
    box-shadow: 0px 0px 15px 0px rgba(81, 81, 81, 0.47); 
}

/* RESPONSIVE DESIGN FOR MANY MORE SECTION */

@media (max-width: 1280px) {
    .clients-container {
        max-width: 1000px; /* Use a smaller max-width */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 450px; /* Reduced minimum card height */
        width: 700px;
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


@media (max-width: 820px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 760px; /* Use a smaller max-width */
        max-height: 580px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 590px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}



@media (max-width: 768px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        max-width: 90%; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 430px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 400px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 300px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 360px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 360px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 290px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


/* DOORLOCK BRAND SLIDER SECTION */

.doorlock-brand-slider {
    margin-top: 600px;
}

@media (max-width: 1280px) {
    .doorlock-brand-slider{
        width: 100%;
    }
}

@media (max-width: 820px) {
    .doorlock-brand-slider{
        margin-top: 550px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .doorlock-brand-slider{
        margin-top: 150px;
    }
}

@media (max-width: 420px) {
    .doorlock-brand-slider{
        margin-top: 150px;
        width: 100%;
    }
}


/* OTHER PROJECTS SECTION */

.other-proj-nav {
    margin-top: 150px;
    max-height: 670px;
    margin-bottom: 20px;
}

.proj-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for project nav buttons */
.projbtn {
    transition: color 0.2s ease;
}

.projbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.projbtn.active {
    color: #fff !important;
    position: relative;
}

.projbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

.projects-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-proj {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.proj-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.projsection {
    margin-top: 10px;
}

.proj-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.proj-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient for Projects */
.proj-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.proj-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* DOORLOCK RESPONSIVE DESIGN */

@media(max-width: 1280px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 820px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
        width: 100%;
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 768px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 430px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

/* OTHER PROJ AREA */

@media (max-width: 1280px) {
    .other-proj-nav{
        margin-top: 80px;
        max-width: auto;
        margin-bottom: -20px;
    }

    .proj-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .projects-content{
        width: 1270px;
    }

    .projsection{
        width: 1200px;
    }


    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 1024px) {
    .other-proj-nav{
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
    }

    .proj-nav {
        font-size: 24px;
    }

    .projects-content{
        width: 1020px;
    }

    .projsection{
        width: 1000px;
    }

    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .proj-nav {
        width: 760px;
    }

    .projbtn {
        width: 300px;
        padding: 1px !important;
    }

    .projects-content{
        width: 750px;
    }

    .projsection{
        width: 750px;

    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .other-proj-nav {
        margin-top: 15px;
        max-height: auto;
    }
    .proj-nav {
        font-size: 20px;
    }

    #navp-container {
        justify-content: flex-start;
        padding-bottom: 1rem;
    }

    .projbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .projbtn.active::after {
        height: 2px;
    }

    .projects-content {
        height: auto;
        min-height: 500px;
    }

    .proj-section {
        padding: 2rem 1rem !important;
    }

    .projsection {
        margin-top: 0px;
    }

    .proj-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .proj-p {
        font-size: 16px;
        margin-top: 40px;
        line-height: 1.5;
    }

    .gradient-border-proj {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
    }

    .proj-img {
        min-height: 300px;
    }

    .proj-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
        margin-top: 30px;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 410px;
    }

    .proj-nav {
        width: 400px;
    }

    .projbtn {
        width: 88px;
        padding: 1px !important;
    }

    .projects-content{
        width: 400px;
    }

    .projsection{
        width: 400px;
    }

    .proj-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .proj-p {
        font-size: 14px;
        margin-top: 20px;
    }

    .gradient-border-proj {
        min-height: 250px;
    }

    .proj-img {
        min-height: 250px;
    }

    .proj-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .other-proj-nav {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .proj-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .projbtn {
        width: 75px;
        padding: 1px !important;
    }

    .projects-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .projsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }
}

/* Remove default link underline */
a {
    text-decoration: none;
}



/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */
/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */

.public-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
            margin-bottom: 30px;
        }

        .flex-public {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1500px;
            margin: 30px auto;
            padding: clamp(40px, 8vw, 100px) clamp(20px, 4vw, 60px);
            gap: clamp(30px, 5vw, 80px);
            min-height: 500px;
            opacity: 0;
        }

        .flex-public.visible {
            animation: fadeInUp 0.8s ease-out forwards !important;
        }

        .flex-public.visible:nth-child(1) {
            animation: fadeInUp 0.8s ease-out 0s forwards;
        }
        .flex-public.visible:nth-child(2) {
            animation: fadeInUp 0.8s ease-out 0.15s forwards;
        }
        .flex-public.visible:nth-child(3) {
            animation: fadeInUp 0.8s ease-out 0.3s forwards;
        }
        .flex-public.visible:nth-child(4) {
            animation: fadeInUp 0.8s ease-out 0.45s forwards;
        }
        .flex-public.visible:nth-child(5) {
            animation: fadeInUp 0.8s ease-out 0.6s forwards;
        }

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

        .text-public {
            flex: 1;
            min-width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .text-public h2 {
            font-size: clamp(32px, 4vw, 52px);
            margin-bottom: 20px;
            background-clip: text;
            font-weight: 700;
            letter-spacing: -0.5px;
            font-family: 'Space Grotesk', sans-serif;
        }

        .text-public p {
            font-size: 1.5rem;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 30px;
            font-weight: 400;
            font-family: 'Lexend', sans-serif;
        }

        .public-btn {
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 600;
            padding: 12px 50px;
            border-radius: 50px;
            background: #0000;
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-block;
            width: fit-content;
            position: relative;
            overflow: hidden;
            border: 1px solid;
        }

        .public-btn::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: left 0.5s ease;
            z-index: 1;
        }

        .public-btn span {
            position: relative;
            z-index: 2;
        }

        .public-btn:hover {
            transform: translateY(-3px);
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
        }
        .public-btn:hover::before {
            left: 100%;
        }

        .public-btn:active {
            transform: translateY(-1px);
        }

        .demo-section {
            display: flex;
            gap: 30px;
            margin-top: 50px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .button-group h3 {
            color: #888;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        @keyframes gradientShiftp {
            0% {
                background-position: -200% center;
            }
            100% {
                background-position: 200% center;
            }
        }

        .visual-public {
            position: relative;
            max-width: 600px;
            height: 450px;
            border-radius: 20px;
            flex: 1;
        }

        /* Blur shadow background */
        .visual-public::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 101%;
            height: 100%;
            background: linear-gradient(
                90deg,
                #FF6666 0%,
                #FF894C 20%,
                #90FF55 40%,
                #7B94F6 60%,
                #FF77F1 80%,
                #FF6666 100%
            );
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            filter: blur(10px);
            z-index: 0;
            pointer-events: none;
        }

        .visual-public img {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
            z-index: 1;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .visual-public:hover img {
            transform: scale(1.03);
        }

        .flex-public:nth-child(even) {
            flex-direction: row-reverse;
        }

        /* Responsive Design */
        /* 344px - Extra Small Phones */
        @media (max-width: 344px) {
            .public-wrapper{
                margin-bottom: -100px;
                margin-top: 50px;
            }
            .flex-public {
                flex-direction: column !important;
                padding: 20px 12px;
                gap: 15px;
                margin-bottom: -30px !important;
                
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 24px;
                margin-bottom: 12px;
            }

            .text-public p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 250px;
                margin-bottom: -50px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 10px 30px;
                font-size: 14px;
                margin-bottom: -100px !important;
            }
           
        }

        /* 360px - Small Phones */
@media (max-width: 360px) {
    .public-wrapper {
        margin-top: -10px !important;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 20px 14px;
        gap: 16px;
        margin-bottom: -100px !important;
    }

    .text-public {
        min-width: 100%;
        font-size: 14px;
    }

    .text-public h2 {
        font-size: 26px !important;
        margin-bottom: 12px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 260px;
    }

    .visual-public img {
        width: 100% !important;
        height: 260px !important;

    }

    .public-btn {
        padding: 10px 32px;
        font-size: 14px;
    }
}

/* 375px - iPhone SE/6/7/8 */
@media (max-width: 375px) {
    .public-wrapper {
        margin-bottom: -50px;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 22px 16px;
        gap: 18px;
        margin: 16px auto;
        max-height: 580px;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 13px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 280px;
    }

    .visual-public img {
        width: 100% !important;
        height: 280px !important;
        
    }

    .public-btn {
        padding: 11px 35px;
        font-size: 14px;
    }
}

/* 390px - Pixel 4/5 */
@media (max-width: 390px) {
    .public-wrapper {
        margin-top: 50px;
        margin-bottom: 190px !important;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 24px 18px;
        gap: 15px;
        margin: 18px auto;
        transform: scale(0.9) !important;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 14px;
    }

    .text-public p {
        font-size: 15px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 230px;
        margin-top: -120px;
    }

    .visual-public img {
        width: 100% !important;
        height: 230px !important;
    }

    .public-btn {
        padding: 10px 35px !important;
        font-size: 15px !important;
        margin-bottom: -130px !important;
        
    }
}

        /* 412px - Galaxy S9 */
        @media (max-width: 412px) {
            .public-wrapper{
                margin-bottom: -10px;
                overflow: visible;
            }

            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 26px 20px;
                gap: 20px;
                margin-bottom: -100px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-bottom: -60px !important;
                margin-top: -60px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 12px 40px;
                font-size: 15px;
            }
            

        }

        /* 414px - iPhone XR */
        @media (max-width: 414px) {
            .flex-public {
                flex-direction: column !important;
                padding: 26px 20px;
                gap: 20px;
                margin: 18px auto;
                transform: scale(0.9) !important;
                margin-bottom: -30px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-top: -100px;
                margin-bottom: -40px;
            }

            .public-btn {
                padding: 12px 30px;
                font-size: 15px;
                margin-bottom: -100px !important;
            }
        }

        /* 430px - Galaxy S22 */
        @media (min-width: 320px) and (max-width: 430px) {
            .public-wrapper {
                margin-bottom: -40px !important;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 28px 22px;
                gap: 20px;
                margin-top: -100px !important;
            }

            .text-public {
                min-width: 350px !important;
                margin: 10px !important;
                transform: scale(0.9);
            }

            .text-public h2 {
                font-size: 34px !important;
                margin-bottom: 15px;
            }

            .text-public p {
                font-size: 15px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 330px;
                margin-bottom: -50px;
                margin-top: -40px;
            }

            .public-btn {
                padding: 10px 32px !important;
                font-size: 15px !important;
                transform: scale(0.9);
                margin-bottom: -90px !important;
            }
        }

        /* 540px - Small Tablets */
        @media (max-width: 540px) {
            .flex-public {
                flex-direction: column !important;
                padding: 30px 24px;
                gap: 22px;
                margin: 20px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 30px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public{
                max-height: 270px !important;
                width: 390px !important;
            }

            .visual-public img{
                max-width: 390px !important;
                max-height: 250px !important;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 768px - iPad/Tablet */
        @media (max-width: 853px) {
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 35px 30px;
                gap: 25px;
                margin: 25px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 38px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 380px;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
            
        }

        /* 853px - Large Tablet */
        @media (max-width: 853px) {
            .public-wrapper{
                margin-bottom: 40px;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 50px 45px !important;
                gap: 28px;
                margin-top: 70px !important;
            }

            .text-public {
                min-width: 100%;
                margin: auto;
                text-align: center;
                align-items: center;
                margin-bottom: -50px;
            }

            .text-public h2 {
                font-size: 48px !important;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 22px !important;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                order: -1;
                max-width: 590px !important;
            }

            .visual-public img{
                width: 590px;
                height: 380px !important;  
            }

            .public-btn {
                padding: 10px 40px !important;
                font-size: 18px !important;
            }
        }

        /* 912px - Large Tablet Landscape */
        @media (max-width: 912px) {
            .flex-public {
                flex-direction: row;
                min-height: auto;
                padding: 40px 35px;
                gap: 30px;
                margin: 25px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 36px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public {
                max-width: 400px;
                height: 320px;
                flex: 1;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 992px - Small Desktop */
        @media (max-width: 992px) {
            .flex-public {
                flex-direction: row;
                min-height: 450px;
                padding: 45px 40px;
                gap: 40px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 40px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                max-width: 450px;
                height: 350px;
                flex: 1;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
        }

        /* 1024px - Tablet Landscape / Desktop */
        @media (max-width: 1024px) {
            .flex-public {
                flex-direction: row;
                min-height: 480px;
                padding: 50px 45px;
                gap: 45px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 350px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 42px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 17px !important;
                line-height: 1.75;
                margin-bottom: 24px;
            }

            .visual-public {
                max-width: 500px;
                height: 330px !important;
                flex: 1;
            }

            .public-btn {
                padding: 10px 35px !important;
                font-size: 16px;
            }
            .ds-section-title{
                margin-left: 20px;
            }
            .ds-view-all-link{
                margin-right: 30px;
            }
        }

        /* 1280px - Full Desktop */
        @media (max-width: 1280px) {
            .flex-public {
                flex-direction: row;
                min-height: 500px;
                padding: 60px 50px;
                gap: 50px;
                margin: 30px 40px;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 380px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 46px;
                margin-bottom: 20px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.8;
                margin-bottom: 26px;
            }

            .visual-public {
                max-width: 550px;
                height: 400px;
                flex: 1;
            }

            .public-btn {
                padding: 14px 52px;
                font-size: 16px;
            }
        }


        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */
        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease-out;
            margin-top: 40px;
        }

        .modal-overlay.active {
            display: flex;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .modal-content-public {
            background: black;
            border: 2px solid #7B54B1;
            border-radius: 20px;
            padding: 50px;
            max-width: 850px;
            width: 90%;
            position: relative;
            display: flex;
            gap: 50px;
            animation: slideUp 0.4s ease-out;
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4), -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
            margin-top: 0px;
        }

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

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: #a78bfa;
            font-size: 32px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            color: #c084fc;
            transform: scale(1.2);
        }

        .testimonial-image {
            flex: 0 0 450px;
            height: 400px;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 0px 30px rgba(168, 85, 247, 0.2);
        }

        .testimonial-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .testimonial-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .testimonial-text h2 {
            font-size: 28px;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #a78bfa, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-family: 'Space Grotesk', sans-serif;
        }

        .testimonial-text p {
            font-size: 18px;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 20px;
            font-family: 'Lexend', sans-serif;
        }

        .public-stars {
            display: flex;
            gap: 8px;
            font-size: 24px;
            display: inline-block; 
    
            /* Ensure the animation is fully defined */
            animation: rgbGoldPulse 2s ease-in-out infinite alternate;
        }

        @media (max-width: 768px) and (min-width: 541px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 35px;
                flex-direction: column;
                max-width: 750px;
                margin: auto;
            }

            .testimonial-image img {
                width: 790px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 8px;
            }
        }

        @media (max-width: 344px) {
            .modal-content-public {
                padding: 20px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 400px;
                height: 410px !important;
            }

            .testimonial-text h2 {
                font-size: 18px;
                margin-bottom: 12px;
            }

            .testimonial-text p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 12px;
            }

            .public-stars {
                font-size: 16px;
                gap: 5px;
            }

            .close-btn {
                font-size: 24px;
                width: 32px;
                height: 32px;
            }
        }

        /* Mobile: 360px */
        @media (max-width: 360px) and (min-width: 345px) {
            .modal-content-public {
                padding: 25px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 210px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 430px;
            }

            .testimonial-text h2 {
                font-size: 20px;
                margin-bottom: 14px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 14px;
            }

            .public-stars {
                font-size: 18px;
                gap: 6px;
            }

            .close-btn {
                font-size: 26px;
                width: 34px;
                height: 34px;
            }
        }

        /* Mobile: 375px */
        @media (max-width: 375px) and (min-width: 361px) {
            .modal-content-public {
                padding: 28px;
                gap: 22px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 420px;
            }

            .testimonial-text h2 {
                font-size: 21px;
                margin-bottom: 15px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .public-stars {
                font-size: 19px;
                gap: 6px;
            }

            .close-btn {
                font-size: 28px;
            }
        }

        /* Mobile: 390px */
        @media (max-width: 390px) and (min-width: 376px) {
            .modal-content-public {
                padding: 30px;
                gap: 24px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 440px;
            }

            .testimonial-text h2 {
                font-size: 22px;
                margin-bottom: 16px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 20px;
                gap: 6px;
            }
        }

        /* Mobile: 412px */
        @media (min-width: 400px) and (max-width: 412px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 470px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 13px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
            
        }

        /* Mobile: 414px */
        @media (max-width: 414px) and (min-width: 413px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 450px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 17px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
        }

        /* Mobile: 430px */
        @media (max-width: 430px) and (min-width: 415px) {
            .modal-content-public {
                padding: 35px;
                gap: 26px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 460px;
            }

            .testimonial-text h2 {
                font-size: 24px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 7px;
            }
        }

        /* Tablet: 540px */
        @media (max-width: 540px) and (min-width: 431px) {
            .modal-content-public {
                padding: 40px;
                gap: 30px;
                flex-direction: column;
                max-width: 440px;
                max-height: 500px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 200px;
                width: 95%;
                margin: auto;
            }

            .testimonial-image img{
                width: 550px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.7;
                margin-bottom: 5px;
            }

            .public-stars {
                font-size: 20px;
                gap: 8px;
            }

        }


        /* Tablet: 853px */
        @media (min-width: 810px) and (max-width: 820px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: column !important;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image{
                max-width: 750px;
                height: 400px !important;
                margin: auto;
            }

            .testimonial-image img{
                width: 750px !important;
                height: 700px !important;
            }

            .testimonial-text h2 {
                font-size: px !important;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 18px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

         /* Tablet: 853px */
        @media (max-width: 1024px) and (min-width: 769px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: row;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image img{
                width: 650px !important;
                height: 650px;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
            .ds-update-content{
                display: grid;
                grid-template-columns: 1fr auto;
                gap:20px;
                align-items: start;
            }
            .best-seller-thumbnail{
                grid-column: 2;
                grid-row: 1 / -1;
                margin-top: 0;
                align-self: center;
                width: 150px;
               
            }
            .best-seller-thumbnail img{
                height: 120px;
            }
            .ds-update-details-row{
                justify-content: flex-start;
            }
        }

        @media (max-width: 912px) and (min-width: 854px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 40px;
                flex-direction: column;
                max-width: 800px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 360px;
                width: 720px;
                margin: auto;
            }

            .testimonial-image img{
                width: 900px !important;
                height: 750px;
            }

            .testimonial-text h2 {
                font-size: 30px !important;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 20px !important;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Tablet: 992px */
        @media (max-width: 992px) and (min-width: 941px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 800px;
            }

            .testimonial-image {
                flex: 0 0 350px;
                height: 320px;
            }

            .testimonial-text h2 {
                font-size: 26px;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Desktop: 1024px */
        @media (max-width: 1024px) and (min-width: 993px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 870px;
                height: 400px;
            }
            .modal-overlay {
                height: 700px;
                margin: auto;
            }
            .testimonial-image {
                flex: 0 0 400px;
                height: 300px;
            }

            .testimonial-image img{
                width: 600px;
                height: 550px;
            }

            .testimonial-text h2 {
                font-size: 36px;
                margin-bottom: -10px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

        /* Desktop: 1280px and above */
        @media (min-width: 1100px) and (max-width: 1280px){
            .modal-content-public {
                padding: 50px;
                gap: 40px;
                max-width: 1100px;
                flex-direction: row;
                height: 550px;
            }

            .testimonial-image {
                flex: 0 0 550px !important;
                height: 400px !important;
                margin: auto;

            }

            .testimonial-image img{
                flex: 0 0 300px !important;
                height: 400px;
                margin: auto;
            }

            .testimonial-text h2 {
                font-size: 28px;
                margin-bottom: 20px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 20px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

.public-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-public-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;
    margin-top: -40px;
    background-image: linear-gradient(180deg, rgba(255, 23, 68, 0) 30%, rgba(255, 23, 68, 0.5) 60%, rgba(187, 134, 252, 1) 100%),
    url('https://i.pinimg.com/1200x/e6/f8/96/e6f896b726a7fe83a306673b2c5c4a18.jpg');
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 85%,
    transparent 100%);
    overflow: hidden;
}

.public-header {
    position: absolute;
    justify-content: center;
    margin-top: 480px;
    text-align: center;
    padding: 40px 60px;
    width: 100%;
}

.public-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.publicproj {
    text-align: center;
    padding: 40px 20px;
}

.publicproj.is-hidden {
    opacity: 0;
}

.publicproj.animate-visible {
    animation: 1.5s anim-fadeIn linear forwards;
}

.are-public {
    font-size: 32px !important;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* 344px - 349px */
@media (min-width: 344px) and (max-width: 349px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 250px;
        padding: 20px 15px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.1;
    }
    .publicproj {
        padding: 30px 12px;
    }
    .are-public {
        font-size: 14px !important;
        margin-top: -50px;
        margin-bottom: -90px !important;
    }
}

/* 350px - 360px */
@media (min-width: 350px) and (max-width: 360px) {
    .primary-public-wrapper {
        height: 320px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 200px;
        padding: 25px 18px;
    }
    .public-header h1 {
        font-size: 26px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 30px 14px;
    }
    .are-public {
        font-size: 15px !important;
        margin-bottom: -60px !important;
        margin-top: -40px;
    }
}

/* 361px - 375px */
@media (min-width: 361px) and (max-width: 375px) {
    .primary-public-wrapper {
        height: 350px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 160px !important;
        padding: 28px 20px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 32px 15px;
    }
    .are-public {
        font-size: 16px !important;
        margin-bottom: -100px !important;
        margin-top: -60px !important;
    }
}

/* 376px - 390px */
@media (min-width: 376px) and (max-width: 390px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 230px;
        padding: 30px 22px;
    }
    .public-header h1 {
        font-size: 30px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 34px 16px;
    }
    .are-public {
        font-size: 17px !important;
        margin-top: -50px;
        margin-bottom: -30px !important;
    }
}

/* 391px - 412px */
@media (min-width: 391px) and (max-width: 412px) {
    .primary-public-wrapper {
        height: 380px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 230px !important;
        padding: 32px 24px;
    }
    .public-header h1 {
        font-size: 32px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px !important;
    }
}

/* 413px - 414px */
@media (min-width: 413px) and (max-width: 414px) {
    .primary-public-wrapper {
        height: 485px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 235px !important;
        padding: 32px 25px;
    }
    .public-header h1 {
        font-size: 40px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-top: -40px !important;
        margin-bottom: -20px !important;
    }
}

/* 415px - 429px */
@media (min-width: 415px) and (max-width: 430px) {
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 33px 26px;
    }
    .public-header h1 {
        font-size: 36px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 19px;
    }
    .are-public {
        font-size: 19px !important;
        margin-top: -40px;
        margin-bottom: 30px !important;
    }
}

/* 530px - 540px */
@media (min-width: 530px) and (max-width: 540px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 450px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 260px !important;
    }
    .public-header h1 {
        font-size: 42px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 25px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px;
        margin-top: -40px;
        max-width: 100%;
    }
}

/* 760px - 768px */
@media (min-width: 760px) and (max-width: 768px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 300px !important;
        padding: 38px 45px;
    }
    .public-header h1 {
        font-size: 45px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 30px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 810px - 820px */
@media (min-width: 810px) and (max-width: 820px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 850px - 853px */
@media (min-width: 850px) and (max-width: 853px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 900px - 912px */
@media (min-width: 900px) and (max-width: 912px) {
    .public-area {
        margin: 48px auto 48px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 300px;
        padding: 39px 55px;
    }
    .public-header h1 {
        font-size: 50px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 45px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 980px - 992px */
@media (min-width: 980px) and (max-width: 992px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 600px !important;
        margin-top: -40px;
    }
    .public-header {
        margin-top: 450px;
        padding: 40px 58px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 30px !important;
        margin-bottom: 2rem;
    }
}

/* 1000px - 1024px */
@media (min-width: 1000px) and (max-width: 1024px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 400px !important;
        margin-top: -80px !important;
    }
    .public-header {
        margin-top: 150px !important;
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 58px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
        margin-top: -60px;
    }
}

/* 1270px - 1280px */
@media (min-width: 1270px) and (max-width: 1280px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 480px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 270px;  
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
        margin-top: -50px;
    }
}

/*Mission Vision CSS*/
/* Mission and Vision Section */
.mission-vision-wrapper {
    background: #000000;
    padding: 80px 20px;
    position: relative;
    overflow-x: hidden;
}

.mission-vision-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #333 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
    animation: dotPulse 4s linear infinite;
}

@keyframes dotPulse {
    0% { opacity: 0.2; }
    15% { opacity: 0.3; }
    30% { opacity: 0.45; }
    50% { opacity: 0.7; }
    70% { opacity: 0.45; }
    85% { opacity: 0.3; }
    100% { opacity: 0.2; }
}

.mission-vision-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4  0px;
    position: relative;
    z-index: 1;
}

.mission,
.vision {
    background: #0a0a0a;
    padding: 60px 40px;
    border-radius: 20px;
    border: 2px solid;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission {
    animation-delay: 0.2s;
}

.vision {
    animation-delay: 0.4s;
}

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

.mission {
    border-color: #00ff88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    animation: fadeInUp 0.8s ease-out 0.2s forwards, borderPulse 3s ease-in-out infinite;
}

.vision {
    border-color: #0088ff;
    box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    animation: fadeInUp 0.8s ease-out 0.4s forwards, borderPulseBlue 3s ease-in-out infinite;
}

.mission:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 255, 136, 0.5);
    border-color: #00ffaa;
}

.vision:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 136, 255, 0.5);
    border-color: #00aaff;
}

/* Animated glow effect */
.mission::before,
.vision::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 8s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Shimmer effect on hover */
.mission::after,
.vision::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.mission:hover::after,
.vision:hover::after {
    transform: translateX(100%);
}

@keyframes borderPulse {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 255, 136, 0.6);
    }
}

@keyframes borderPulseBlue {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 136, 255, 0.6);
    }
}

.mission h2,
.vision h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: slideInLeft 0.8s ease-out;
}

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

.mission p,
.vision p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #e0e0e0;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 968px) {
    .mission-vision-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .mission,
    .vision {
        padding: 50px 35px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 640px) {
    .mission-vision-wrapper {
        padding: 60px 15px;
    }

    .mission,
    .vision {
        padding: 40px 25px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .mission p,
    .vision p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .mission,
    .vision {
        padding: 30px 20px;
    }

    .mission h2,
    .vision h2 {
        font-size: 1.75rem;
        margin-bottom: 15px;
    }

    .mission p,
    .vision p {
        font-size: 0.9rem;
    }

}

/* FDAS Details Page Styles */
.glow-model-container {
    position: relative;
    overflow: visible;
}

.glow-model-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    opacity: 0.3;
    filter: blur(20px);
    z-index: -1;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.model-container {
    position: relative;
    z-index: 1;
}

.gradient-icon {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modern-feature-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: 0.8rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.modern-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.1), rgba(103, 28, 104, 0.1), rgba(123, 84, 177, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.modern-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
}

.modern-feature-card:hover::before {
    opacity: 1;
}

.feature-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.15), rgba(123, 84, 177, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.modern-feature-card:hover .feature-icon-wrapper {
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.25), rgba(123, 84, 177, 0.25));
    transform: scale(1.05);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.feature-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(5px);
}

.feature-item .icon-large {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 70px;
    text-align: center;
}

.feature-item .feature-content h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
}

.feature-item .feature-content p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    font-family: 'Lexend', sans-serif;
}

.gallery-section {
    padding: 80px 0;
    background: #000000;
}

.gallery {
    --size: 100px;
    display: grid;
    grid-template-columns: repeat(6, var(--size));
    grid-auto-rows: var(--size);
    margin-bottom: var(--size);
    place-items: start center;
    gap: 5px;
}

.gallery:has(:hover) img:not(:hover),
.gallery:has(:focus) img:not(:focus) {
    filter: brightness(0.5) contrast(0.5);
}

.gallery img {
    object-fit: cover;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z");
    transition: clip-path 0.25s, filter 0.75s;
    grid-column: auto / span 2;
    border-radius: 5px;
}

.gallery img:nth-child(5n - 1) { 
    grid-column: 2 / span 2 
}

.gallery img:hover,
.gallery img:focus {
    clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z");
    z-index: 1;
    transition: clip-path 0.25s, filter 0.25s;
}

.gallery img:focus {
    outline: 1px dashed black;
    outline-offset: -5px;
}

.fdas-invest-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.fdas-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(10px);
}

.benefit-icon {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.benefit-text {
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
}

/* Mobile responsive for gallery */
@media (max-width: 767px) {
    .gallery-section {
        padding: 40px 0;
    }
    
    /* Hide gallery on mobile, show product visual instead */
    .gallery {
        display: none;
    }
    
    .mobile-product-visual {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        margin: 0 auto 40px auto;
        
        /* Use FDAS-related image */
        background-image: url(https://cdn.pixabay.com/photo/2023/09/25/17/12/fire-alarm-8275669_1280.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: 8px solid transparent;
        border-radius: 15px;
        transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
    }
    
    .mobile-product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #AC3838 0%, #671C68 50%, #7B54B1 100%) 1;
    }
}

/* Hide mobile product visual on desktop */
.mobile-product-visual {
    display: none;
}

/* FDAS Details Page Additional Styles */
.fire-alarm-model-section {
    padding: 80px 0;
    background: #000000;
}

.simplex-sensor-model-section {
    padding: 80px 0;
    background: #000000;
}

.model-container {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.model-viewer-fdas {
    width: 100%;
    height: 100%;
    background: #000;
}

.fdas-footer {
    background-color: #090909;
    padding: 0px 30px;
}

.fdas-copyright {
    color: #ffffff;
    font-family: 'Lexend', sans-serif;
}

.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-left: 1rem;
}

.navbar-toggler-custom {
    margin-right: 1rem;
}

.CompanyInfo-logo {
    width: 17.1875rem;
    height: 6.25rem;
}

/* FDAS Investment Carousel Styles */
.fdas-investment-carousel {
    padding: 80px 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.fdas-investment-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05), rgba(103, 28, 104, 0.05), rgba(123, 84, 177, 0.05));
    z-index: 1;
}

.carousel-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 2;
    margin-bottom: 3rem;
}

.carousel-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-container {
    position: relative;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    transform: translateX(100%);
}

.carousel-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.carousel-content {
    display: flex;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    border-radius: 20px;
    overflow: hidden;
}

.carousel-image {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    display: none;
}

.carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.carousel-slide:hover .carousel-image img {
    transform: scale(1.05);
}

.carousel-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 6rem 3rem 3rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
    position: relative;
    z-index: 2;
}

.carousel-text h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.carousel-text p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.carousel-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 10;
    pointer-events: none;
}

.carousel-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    margin: 0 0.5rem;
}

.carousel-btn:hover {
    background: linear-gradient(135deg, rgba(172, 56, 56, 1), rgba(123, 84, 177, 1));
    transform: scale(1.1);
}

.carousel-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 10;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    transform: scale(1.2);
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .fdas-investment-carousel {
        padding: 40px 0;
    }
    
    .carousel-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    .carousel-container {
        height: 400px;
    }
    
    .carousel-content {
        flex-direction: column;
        position: relative;
    }
    
    .carousel-image {
        height: 100%;
        position: relative;
    }
    
    .carousel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .carousel-overlay {
        display: block;
        background: rgba(0, 0, 0, 0.8);
    }
    
    .carousel-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 4rem);
        padding: 2rem;
        background: transparent;
        text-align: center;
    }
    
    .carousel-text h3 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.9rem;
        margin-bottom: 0;
        padding: 0 3rem;
        text-align: center;
    }
    
    .carousel-controls {
        padding: 0 1rem;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border: none;
        background: transparent;
        color: white;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        backdrop-filter: none;
        border-radius: 0;
    }
    
    .carousel-btn:hover {
        background: transparent;
        transform: scale(1.1);
        color: rgba(255, 255, 255, 0.9);
    }
    
    .carousel-indicators {
        display: none;
    }
    
    .fdas-indicator {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        height: 350px;
    }
    
    .carousel-text {
        padding: 1.5rem;
    }
    
    .carousel-text h3 {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }
}


/* ========================================================================= */
/* PC SERVICES PAGE STYLES */
/* ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');
/* PC Services Root Variables */

:root {
    --primary-gradient: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    --dark-bg: #090909;
    --card-bg: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


/* PC Services Hero Section */
.pcservices-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    position: relative;
    overflow: hidden;
}
.pcservices-hero img{
    filter: brightness(30%);
}

.pcservices-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(248, 88, 88, 0.1), transparent);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.pcservices-hero::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(91, 30, 177, 0.1), transparent);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(30px); }
}

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


.pcservices-hero-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: var(--primary-gradient);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pcservices-hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #cccccc;
    margin-bottom: 2rem;
    font-weight: 300;
}

.pcservices-hero-description {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.pcservices-cta-btn {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(90deg, #ef5ef1, #5b1eb1);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}
@media (min-width: 375px) and (max-width:430px){
    .pcservices-cta-btn {
        padding: 0.5rem 1.25rem;
        top: 10%;
        margin-bottom: 20px;
    }
    .pcservices-hero-description{
        font-size: .9rem;
    }
}

.pcservices-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(248, 88, 88, 0.3);
    color: white;
    text-decoration: none;
}

/* PC Services Main Section */
.pcservices-main {
    padding: 80px 0;
    background: #000000;
}

.pcservices-header {
    text-align: center;
    margin-bottom: 60px;
    padding-top: 3rem;

}

.pcservices-header h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: var(--primary-gradient);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pcservices-header p {
    font-size: 1.1rem;
    color: #999999;
    max-width: 600px;
    margin: 0 auto;
}

/* Service Cards Grid */
.pcservices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    background: rgba(248, 88, 88, 0.1);
    border-color: rgba(248, 88, 88, 0.3);
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(248, 88, 88, 0.2);
    cursor: pointer;
}

.service-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: white;
}

.service-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ffffff;
}

.service-card p {
    color: #cccccc;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.service-features li {
    color: #999999;
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.9rem;
}

.service-features li::before {
    content: '';
    position: absolute;
    left: 0;
    color: #ef5ef1;
    font-weight: bold;
}


/* PC Services Why Choose Us Section */
.pcservices-why {
    background: linear-gradient(135deg, rgba(9, 9, 9, 0.5), rgba(10, 10, 30, 0.5));
    padding: 80px 0;
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.pcservices-why h2 {
    text-align: center;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 3rem;
    background: var(--primary-gradient);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.why-item {
    text-align: center;
    padding: 2rem;
}

.why-item i {
    font-size: 3rem;
    background: var(--primary-gradient);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.why-item h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ffffff;
}

.why-item p {
    color: #999999;
    line-height: 1.6;
}

/* PC Services CTA Section */
.pcservices-cta-section {
    padding: 80px 0;
    text-align: center;
    background: linear-gradient(135deg, rgba(248, 88, 88, 0.05), rgba(91, 30, 177, 0.05));
    border-top: 1px solid var(--border-color);
}

.pcservices-cta-section h2 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.pcservices-cta-section p {
    font-size: 1.1rem;
    color: #999999;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pcservices-cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary-cta {
    padding: 1rem 2rem;
    background: var(--primary-gradient);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(248, 88, 88, 0.3);
    color: white;
    text-decoration: none;
}

.btn-secondary-cta {
    padding: 1rem 2rem;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid rgba(248, 88, 88, 0.5);
    cursor: pointer;
}

.btn-secondary-cta:hover {
    background: rgba(248, 88, 88, 0.1);
    border-color: rgba(248, 88, 88, 0.8);
    color: white;
    text-decoration: none;
}

/* PC Services Footer */
.pcservices-footer {
    background-color: #090909;
    padding: 50px 30px;
    color: #ffffff;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 0.8rem;
}

.footer-section a {
    color: #999999;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #f85858;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    color: #999999;
}

.social-links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(248, 88, 88, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
    color: #f85858;
}

.social-links a:hover {
    background: var(--primary-gradient);
    color: white;
}

/* PC Services Responsive Design */
@media (max-width: 768px) {
    .pcservices-hero {
        min-height: 60vh;
        padding-top: 80px;
    }

    .pcservices-hero-title {
        font-size: 2rem;
    }

    .pcservices-grid {
        grid-template-columns: 1fr;
    }

    .pcservices-cta-buttons {
        flex-direction: column;
    }

    .btn-primary-cta,
    .btn-secondary-cta {
        width: 100%;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .pcservices-hero {
        padding-top: 60px;
        min-height: 50vh;
    }

    .pcservices-hero-title {
        font-size: 1.5rem;
    }

    .pcservices-hero-subtitle {
        font-size: 1rem;
    }

    .pcservices-main,
    .pcservices-why,
    .pcservices-cta-section {
        padding: 40px 0;
    }

    .service-card {
        padding: 1.5rem;
    }
}
/* --- Pink Hover Shadow for CCTV Lineup Cards --- */
.cctv-lineup-section .card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 32px rgba(248, 88, 180, 0.28), 0 2px 12px rgba(0,0,0,0.12) !important;
    border: 1.5px solid #ef5ef1 ;
}

.footer-logo-img {
    width: 17.1875rem;
    height: 6.25rem;
}
.footer-copyright {
    color: #ffffff !important;
    font-family: 'Lexend', sans-serif !important;
}
@media (max-width: 1024px) {
    .security-section .row.mt-4 > .col-md-4 {
        width: 100%;
        max-width: 600px;
        margin: 0 auto 1.5rem auto;
        display: block;
        float: none;
    }
    .cctv-clickable-card {
        min-height: 0;
        margin-bottom: 0.5rem;
    }
    .cctv-detail-box {
        margin-bottom: 1.5rem;
    }
}
/* --- CCTV Clickable Card & Detail Box Styles --- */
.cctv-clickable-card {
    padding-bottom: 40px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    padding: 1.2rem 1rem;
    margin-bottom: 0.5rem;
    transition: box-shadow 0.2s, background 0.2s;
    
}
.cctv-clickable-card:hover {
    background: #2d2d4d;
    box-shadow: 0 6px 18px rgba(0,0,0,0.13);
}
/* Hide detail box by default, show on hover of card */
.cctv-detail-box {
    background: black;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    color: #e6e6e6;
    font-size: 0.98rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(.4,0,.2,1), max-height 0.45s cubic-bezier(.4,0,.2,1);
}
.cctv-clickable-card:hover + .cctv-detail-box,
.cctv-clickable-card:focus + .cctv-detail-box {
    opacity: 1;
    max-height: 400px;
    pointer-events: auto;
}
.cctv-detail-box ul {
    margin: 0;
    padding-left: 1.2rem;
}
.cctv-detail-box li {
    margin-bottom: 0.4em;
}
.cctv-icon-card{
    margin-top:10px;
}
/* --- Custom CCTV Card Styles --- */
.cctv-lineup-section .card {
    background: #181828;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 0;
}
.cctv-lineup-section .card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}
.cctv-lineup-section .card-body {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 1.8rem;
}
.cctv-lineup-section .card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}
.cctv-lineup-section ul {
    font-family: 'Lexend', sans-serif;
    font-size: 0.98rem;
    color: #e6e6e6;
}
.cctv-lineup-section .badge {
    font-size: 0.95rem;
    margin-top: 0.5rem;
    padding: 0.5em 1em;
    border-radius: 999px;
}
.cctv-mock-img {
    height: 180px;
    background: #343a40;
    border-radius: 18px 18px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
}
.cctv-mock-img-fit {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px 18px 0 0;
    display: block;
}
.col-md-4{
  padding-top: 20px;
  justify-content: space-between;
}
.col-md-4 h5{
    color: #CB20F5;
    padding-top: 50px;
    font-size: 1.9rem;
}
.col-md-4 p{
    color: white;
}


@media (max-width: 768px) {
    .cctv-lineup-section .card {
        margin-bottom: 1.5rem;
    }
    .cctv-mock-img {
        height: 120px;
        font-size: 1rem;
    }
}
/* --- CCTV Lineup Card Styles --- */
.cctv-lineup-section .card {
    background: #181828;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cctv-lineup-section .card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.cctv-mock-img {
    height: 180px;
    background: #343a40;
    border-radius: 18px 18px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
}
.cctv-lineup-section .card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}
.cctv-lineup-section ul {
    font-family: 'Lexend', sans-serif;
    font-size: 0.98rem;
    color: #e6e6e6;
}
.cctv-lineup-section .badge {
    font-size: 0.95rem;
    margin-top: 0.5rem;
    padding: 0.5em 1em;
    border-radius: 999px;
}
@media (max-width: 768px) {
    .cctv-lineup-section .card {
        margin-bottom: 1.5rem;
    }
    .cctv-mock-img {
        height: 120px;
        font-size: 1rem;
    }
}
/* Custom CSS for dreampcbuildanditsolutionsinc */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
 body, html {
        }


/* CCTV Services Page Styles */
.cctv-promo {
    background: linear-gradient(180deg, #040404 0%, #0b0b0b 60%);
    color: #ffffff;
    padding: 6rem 0 3rem;
    text-align: center;
}
.expand-icon {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    }

.cctv-text-overlay h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #ffffff;
}

.cctv-text-overlay .lead {
    font-family: 'Lexend', sans-serif;
    font-size: 1.15rem;
    color: rgba(255,255,255,0.85);
}

.glow-gradient-text {
    background: linear-gradient(90deg,#f85858,#ef5ef1,#5b1eb1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.security-section .section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}
.security-section .col-md-4{
    font-family: 'Space Grotesk', sans-serif;
    padding-top: 100px;
}


.security-section .section-text {
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    color: #dcdcdc;
    max-width: 900px;
    margin: 0 auto;
}

.services-list { }
.services-list h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; }
.services-list ul { color: #e6e6e6; font-family: 'Lexend', sans-serif; font-size: 0.98rem; }

.product-highlights .card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); }

.contact-cta { background: linear-gradient(90deg, rgba(88,88,88,0.06), rgba(80,20,120,0.04)); }

.martin-section .gallery { gap: 1rem; }

/* CCTV Specs Table */
.cctv-specs { margin-top: 1.5rem; }
.specs-table { width: 100%; border-collapse: collapse; font-family: 'Lexend', sans-serif; color: #e6e6e6; }
.specs-table th, .specs-table td { padding: 0.75rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.04); text-align: left; }
.specs-table th { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; color: #fff; }
.specs-table td { font-size: 0.95rem; }
.spec-badge { display:inline-block; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.03); color:#fff; font-family:'Space Grotesk',sans-serif; font-size:0.85rem; }

@media (max-width: 768px) {
    .cctv-text-overlay h1 { font-size: 2rem; }
    .cctv-text-overlay .lead { font-size: 1rem; }
}


.hero-buttons {
    display: flex;
    gap: 1.5rem;
    }


/* --- CCTV Services Page Custom Styles --- */
.cctv-navbar-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-left: 1rem;
}
.cctv-navbar-toggler {
    margin-right: 1rem;
}
.cctv-hero-img {
    height: 600px;
    object-fit: cover;
    width: 100%;
    display: block;
    
}
.cctv-hero-content{
    top: 50%; 
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 90%;
    max-width: 800px;
}
@media (max-width: 768px) {
    .cctv-hero-img {
        height: 220px;
    }
    .cctv-hero-section .container.position-absolute {
        position: static !important;
        transform: none !important;
        padding: 1.5rem 0.5rem;
    }
    .cctv-hero-section h1 {
        font-size: 1.5rem !important;
    }
    .cctv-hero-section p {
        font-size: 1rem !important;
        .cctv-hero-img {
        height: 50vh;
        min-height: 400px;
    }

    
    }
    @media (min-width: 360px) and (max-width: 765px) {
        .cctv-hero-content .lead {
        font-size: 0.5rem;
        margin-bottom: 1.5rem !important;
    }
    .cctv-hero-content h1.section-title {
        font-size: clamp(2.2rem, 7vw, 2.8rem);
        line-height: 1.2;
    }
    .about-v2-btn-primary{
        padding: 0.55rem 1.3rem !important;
        font-size: 0.7rem !important;
        margin-bottom: 1rem;
    }

    }
.cctv-footer {
    background-color: #090909 !important;
    padding: 0px 30px !important;
}
.cctv-footer-logo {
    width: 17.1875rem;
    height: 6.25rem;
}
.cctv-footer-copyright {
    color: #ffffff !important;
    font-family: 'Lexend', sans-serif !important;
}

.cctv-hero-section img{
    filter: brightness(30%);
}
.cctv-hero-section{
    font-family: 'Space Grotesk', sans-serif;
}
.cctv-services-section-title{
    z-index: 2;
    max-width: 900px;
    padding: 0 20px;
    margin-bottom: 100px;
}
}
.cctv-card-img img{
  width: 100%;
  height: auto;
  object-fit: cover;
  display:block;
  border-radius: 18px 18px 0 0;
}
/*NETWORK INFRASTRUCTURE STYLES*/

/* Network Infrastructure Hero Section */
.network-infrastructure-hero {
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0e27 0%, #1a237e 50%, #283593 100%);
    margin-top: 70px;
}

.network-infrastructure-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 25%, rgba(0, 212, 255, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 75% 75%, rgba(138, 43, 226, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    animation: networkPulse 10s ease-in-out infinite;
}

@keyframes networkPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.network-infrastructure-hero-content {
    text-align: center;
    z-index: 2;
    position: relative;
    max-width: 800px;
    padding: 2rem;
    color: #ffffff;
}

.network-infrastructure-hero-title {
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 50%, #0066cc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}

.network-infrastructure-hero-subtitle {
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: #a8c7ff;
    margin-bottom: 2rem;
    font-weight: 300;
    letter-spacing: 2px;
}

.network-infrastructure-hero-description {
    font-size: 1.2rem;
    color: #e0e7ff;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.network-infrastructure-cta-btn {
    display: inline-block;
    padding: 1rem 3rem;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s ease;
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
    border: 2px solid rgba(0, 212, 255, 0.3);
}

.network-infrastructure-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 212, 255, 0.4);
    background: linear-gradient(135deg, #00e5ff 0%, #00aaff 100%);
    border-color: rgba(0, 212, 255, 0.5);
}

/* Network Infrastructure Main Section */
.network-infrastructure-main {
    padding: 6rem 0;
    background: linear-gradient(180deg, #0a0e27 0%, #1a1a2e 100%);
    position: relative;
}

.network-infrastructure-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #00d4ff 50%, transparent 100%);
}

.network-infrastructure-header {
    text-align: center;
    margin-bottom: 4rem;
}

.network-infrastructure-header h2 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 50%, #0066cc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.network-infrastructure-header p {
    font-size: 1.3rem;
    color: #a8c7ff;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Network Infrastructure Grid */
.network-infrastructure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-bottom: 4rem;
}

.network-service-card {
    background: linear-gradient(135deg, rgba(26, 35, 126, 0.9) 0%, rgba(40, 53, 147, 0.8) 100%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 25px;
    transition: all 0.5s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.network-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 212, 255, 0.1) 50%, transparent 100%);
    transition: left 0.6s ease;
}

.network-service-card:hover::before {
    left: 100%;
}

.network-service-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
}

.network-service-card .service-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.network-service-card .service-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    animation: iconGlow 3s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.network-service-card  {
    font-size: 2rem;
    color: #ffffff;
    position: relative;
    z-index: 1;
    justify-content: space-between;
}

.network-service-card h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.network-service-card p {
    font-size: 1.1rem;
    color: #e0e7ff;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.service-features {
    list-style: none;
    padding: 0;
}

.service-features li {
    padding: 0.8rem 0;
    color: #c8d6ff;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.service-features li:hover {
    color: #00d4ff;
    padding-left: 0.5rem;
}

.service-features li i {
    color: #00d4ff;
    margin-right: 1rem;
    font-size: 0.9rem;
}

/* Equipment Showcase */
.equipment-showcase {
    padding: 6rem 0;
    background: linear-gradient(180deg, #1a1a2e 0%, #0a0e27 100%);
}

.equipment-header {
    text-align: center;
    margin-bottom: 4rem;
}

.equipment-header h2 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.equipment-header p {
    font-size: 1.2rem;
    color: #a8c7ff;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.equipment-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.equipment-item {
    background: linear-gradient(135deg, rgba(26, 35, 126, 0.8) 0%, rgba(40, 53, 147, 0.6) 100%);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.equipment-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.equipment-item:hover::before {
    opacity: 1;
}

.equipment-item:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.15);
}

.equipment-icon-large {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    position: relative;
    overflow: hidden;
}

.equipment-icon-large i {
    font-size: 2.5rem;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.equipment-item h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ffffff;
}

.equipment-item p {
    font-size: 1rem;
    color: #e0e7ff;
    line-height: 1.6;
}

/* Network CTA Section */
.network-cta {
    padding: 6rem 0;
    background: linear-gradient(135deg, #0a0e27 0%, #1a237e 50%, #283593 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.network-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.08) 0%, transparent 50%);
    animation: ctaGlow 8s ease-in-out infinite;
}

@keyframes ctaGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.network-cta h2 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.network-cta p {
    font-size: 1.3rem;
    color: #a8c7ff;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.network-cta-btn {
    display: inline-block;
    padding: 1.2rem 3.5rem;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.2rem;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
    border: 2px solid rgba(0, 212, 255, 0.3);
    position: relative;
    z-index: 1;
}

.network-cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.4);
    background: linear-gradient(135deg, #00e5ff 0%, #00aaff 100%);
    border-color: rgba(0, 212, 255, 0.5);
}



.network-services-section {
  max-width: 1200px;
  margin: auto;
  padding: 80px 20px;
}

.network-services-section h1 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.6rem;
  color: var(--pink);
}

.network-services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px;
}

/* CARD */
.network-service-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 79, 163, 0.15);
  transition: all 0.35s ease;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.network-service-card:hover {
  transform: translateY(-10px);
  border-color: var(--pink);
  box-shadow: 0 25px 55px rgba(255, 79, 163, 0.25);
}

/* IMAGE CONTAINER */
.network-service-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.network-service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 👈 auto-fit image */
  object-position: center; /* center cropping */
  display: block;
}

/* CONTENT */
.network-service-content {
  padding: 28px;
}

.network-service-content h2 {
  font-size: 1.35rem;
  margin-bottom: 14px;
  color: var(--pink);
}

.network-service-content p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted-text);
}
.network-services-why{
    background: linear-gradient(135deg, rgba(9, 9, 9, 0.5), rgba(10, 10, 30, 0.5));
    padding: 80px 0;
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.network-services-why h2 {
    text-align: center;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 3rem;
    background: var(--primary-gradient);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.network-service-img{
    height: 50%;
    width: 50%;
}

/*FDAS SERVICES STYLES*/
.fdas-services-hero-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.1);
    color: #FFF8F0;
    -webkit-background-clip: text;
    background-clip: text;
}
.fdas-services-hero-title h1{
    animation: FireGlowing 3s ease-in-out infinite;
}
.fdas-services-hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #FFF8F0;
    margin-bottom: 2rem;
    font-weight: 300;
    text-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
    border-radius: 3px;
    backdrop-filter: blur(2px);
}
.fdas-services-hero-description {
    font-size: 1.2rem;
    color: #E8E8E8;
    margin-bottom: 2.5rem;
    line-height: 1.6;
    text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.3);
}
.fdas-services-cta-btn {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg,#FF5722 0%,#D84315 100%);
    box-shadow:  0 4px 15px rgba(216, 67, 21, 0.4),0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}
.fdas-services-cta-btn:hover{
    background: linear-gradient(135deg,#FF6F00 0%,#FF5722 100%);
    box-shadow: 0 6px 20px rgba(255, 87, 34, 0.5),0 3px 10px rgba(0, 0, 0, 0.3),inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}
@keyframes FireGlowing {
  0%, 100% {
    text-shadow: 
      0 0 20px rgba(255, 87, 34, 0.3),
      0 2px 4px rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow: 
      0 0 30px rgba(255, 87, 34, 0.5),
      0 2px 4px rgba(0, 0, 0, 0.5);
  }
}


/* FDAS RESPONSIVENESS DESIGN*/
@media (max-width:576px){
    .fdas-services-hero-title{
        font-size: 1.5rem;
    }
    .fdas-services-hero-subtitle{
        font-size: 1rem;
    }
    .fdas-services-hero-description{
        font-size: .9rem;
    }
    .fdas-services-cta-btn{
        padding: 0.5rem 1.25rem;
        top: 10%;
        margin-bottom: 20px;
    }
}
@media (max-width: 820px){
    .fdas-image-container{
        display: none;
    }
}

/* FDAS Main Content Styles */
.fdas-main-content {
    padding: 80px 0;
    background-color: black;
}

.fdas-section {
    padding: 60px 0;
    border-bottom: 1px;
}

.fdas-section:last-child {
    border-bottom: none;
}

.fdas-image-container {
    position: relative;
    overflow: hidden;
    
}

.fdas-image-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.fdas-image-container:hover img {
    transform: scale(1.05);
}

.fdas-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.9) 0%, rgba(255, 0, 0, 0.8) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 20px;
}

.fdas-overlay-text {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.fdas-online-button {
    background-color: #ffc107;
    color: #212529;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fdas-online-button:hover {
    background-color: #ffb300;
    transform: translateY(-2px);
}

.fdas-content {
    padding: 20px;
}

.fdas-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 30px;
    line-height: 1.2;

}

.fdas-service-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: white;
    margin-bottom: 20px;
}

/* FDAS Responsive adjustments */
@media (max-width: 768px) {
    .fdas-main-content {
        padding: 40px 0;
    }

    .fdas-section {
        padding: 40px 0;
    }

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

    .fdas-service-description {
        font-size: 1rem;
    }

    .fdas-overlay-text {
        font-size: 1.2rem;
    }
 }

 .fdas-slider-section {
     background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
     padding: 60px 0 80px;
 }

 .fdas-slider-header {
     margin-bottom: 28px;
 }

 .fdas-slider {
     position: relative;
 }

 .fdas-slider-viewport {
     overflow: hidden;
     border-radius: 16px;
     background: rgba(10, 10, 10, 0.6);
     border: 1px solid rgba(255, 87, 34, 0.18);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
 }

 .fdas-slider-track {
     display: flex;
     will-change: transform;
     transition: transform 450ms ease;
 }

 .fdas-slide {
     flex: 0 0 100%;
     position: relative;
     height: clamp(260px, 45vw, 520px);
    overflow: hidden;
 }

 .fdas-slide img {
     width: 100%;
     height: 100%;
     object-fit: fill;
     display: block;
 }

 .fdas-slide-caption {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 14px 16px;
     color: #FFF8F0;
     font-family: 'Lexend', sans-serif;
     font-size: 0.95rem;
     background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 70%, rgba(0,0,0,0.9) 100%);
     text-shadow: 0 1px 2px rgba(0,0,0,0.5);
 }

 .fdas-slider-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 44px;
     height: 44px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: rgba(10, 10, 10, 0.55);
     backdrop-filter: blur(8px);
     color: #FFF8F0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
 }

 .fdas-slider-btn:hover {
     background: rgba(255, 87, 34, 0.18);
     border-color: rgba(255, 87, 34, 0.4);
     box-shadow: 0 8px 20px rgba(255, 87, 34, 0.15);
 }

 .fdas-slider-btn:active {
     transform: translateY(-50%) scale(0.98);
 }

 .fdas-slider-btn-prev {
     left: 14px;
 }

 .fdas-slider-btn-next {
     right: 14px;
 }

 .fdas-slider-dots {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-top: 14px;
 }

 .fdas-slider-dot {
     width: 10px;
     height: 10px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.22);
     background: rgba(255, 255, 255, 0.12);
     padding: 0;
     transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
 }

 .fdas-slider-dot.is-active {
     background: linear-gradient(135deg,#FF5722 0%,#D84315 100%);
     border-color: rgba(255, 87, 34, 0.6);
     transform: scale(1.15);
 }

 @media (max-width: 576px) {
     .fdas-slider-section {
         padding: 40px 0 60px;
     }

     .fdas-slider-btn {
         width: 40px;
         height: 40px;
     }
 }

        .access-security-main {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.92) 70%, #090909 100%);
            padding: 3rem 0;
        }

        .access-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .access-security-panel {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
            padding: 3rem;
        }

        .access-security-pill {
            background: rgba(14, 165, 233, 0.12);
            border: 1px solid rgba(14, 165, 233, 0.35);
            color: #cbeeff;
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            margin-bottom: 1.5rem;
        }

        @media (min-width: 350px) and (max-width: 460px){
            .access-security-pill {
                font-size: 0.8rem;
            }
            .access-security-main h2{
             font-size: 1rem;
            }
            .access-security-main p{
                font-size: 0.8rem;
            }
            .access-card-description{
                font-size: 0.8rem;
            }
            .access-card-title{
                font-size: 1rem;
            }
            .access-security-card {
                padding: 1rem;
                border-radius: 12px;
            }
            .access-security-card h5{
                font-size: 1rem;
            }
            .access-security-card p{
                font-size:0.8rem;
            }
        }

        .access-security-pill i {
            margin-right: 0.5rem;
        }

        .access-control-slider {
            margin-top: 3rem;
            position: relative;
        }

        @media (max-width: 576px) {
            .access-security-panel {
                padding: 1.25rem;
            }

            .access-control-slider {
                margin-top: 1.5rem;
            }

            .access-slider-item {
                padding: 0 0.25rem;
            }

            .access-card-image {
                height: 100%;
            }
        }
        @media (max-width: 380px) {
    .access-security-panel {
        padding: 1.25rem 0.75rem;
    }
    
    .access-security-main h2 {
        font-size: 1.35rem;
    }
}

        .access-slider-container {
            position: relative;
            overflow: hidden;
        }

        .access-slider-track {
            display: flex;
            transition: transform 0.4s ease;
        }

        .access-slider-item {
            flex: 0 0 100%;
            min-width: 100%;
            padding: 0 0.5rem;
            box-sizing: border-box;
        }

        @media (min-width: 768px) {
            .access-slider-item {
                flex-basis: 50%;
                min-width: 50%;
            }
        }

        @media (min-width: 1200px) {
            .access-slider-item {
                flex-basis: 33.333%;
                min-width: 33.333%;
            }
        }

        .access-security-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 1.5rem;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        

        .access-security-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(14, 165, 233, 0.4);
            transform: translateY(-4px);
        }

        .access-card-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 1rem;
        }

        .access-card-title {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
        }

        .access-card-description {
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.6;
        }

        .access-slider-controls {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
        }

        .access-slider-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(14, 165, 233, 0.12);
            border: 1px solid rgba(14, 165, 233, 0.35);
            color: #cbeeff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .access-slider-btn:hover {
            background: rgba(14, 165, 233, 0.25);
            border-color: rgba(14, 165, 233, 0.6);
        }

        .access-slider-dots {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }

        .access-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .access-slider-dots .dot-control {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .access-dot.active {
            background: rgba(14, 165, 233, 0.8);
            width: 30px;
            border-radius: 5px;
        }

        .access-slider-dots .dot-control.active {
            background: rgba(14, 165, 233, 0.8);
            width: 30px;
            border-radius: 5px;
        }
/*LED WALL STYLES*/
@keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        @keyframes flicker {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.8; }
        }

        .led-services-services {
            padding: 6rem 5%;
            background: #0f0f0f;
        }

        .led-services-section-header {
            text-align: center;
            margin-bottom: 4rem;
        }
        .led-services-section-header h2 {
           font-size: 3rem;
        }

       

        .led-services-section-header p {
            font-size: 1.1rem;
            color: #b0b0b0;
        }

        .led-services-services-grid {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .led-services-service-card {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(123, 47, 247, 0.05));
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 20px;
            padding: 2.5rem;
            transition: all 0.3s;
        }

        .led-services-service-card:hover {
            transform: translateY(-10px);
            border-color: #00d4ff;
            box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
        }

        .led-services-service-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #00d4ff, #7b2ff7);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin-bottom: 1.5rem;
        }

        .led-services-service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .led-services-service-card p {
            color: #b0b0b0;
            line-height: 1.6;
        }

        .led-services-features {
            padding: 6rem 5%;
            background: #0a0a0a;
            padding-bottom: 13rem;
        }

        .led-services-features-grid {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 3rem;
        }

        .led-services-feature-item {
            display: flex;
            gap: 1.5rem;
        }

        .led-services-feature-number {
            font-family: 'Space Grotesk', sans-serif;
            width: 50px;
            height: 50px;
            color: white;
            background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .led-services-feature-content h4 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: white;
        }

        .led-services-feature-content p {
            color: #b0b0b0;
            line-height: 1.6;
        }

        .led-services-cta-section {
            padding: 6rem 5%;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(123, 47, 247, 0.1));
            text-align: center;
        }

        .led-services-cta-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .led-services-cta-content h2 {
            font-size: 3rem;
            margin-bottom: 1.5rem;
        }

        .led-services-cta-content p {
            font-size: 1.2rem;
            color: #b0b0b0;
            margin-bottom: 2rem;
        }

       

        @media (max-width: 968px) {
            .led-services-hero-content {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .led-services-hero-text h1 {
                font-size: 2.5rem;
            }

            .led-services-hero-buttons {
                justify-content: center;
            }

            .led-services-features-grid {
                grid-template-columns: 1fr;
            }

            .led-services-nav-links {
                display: none;
            }
        }

/* GADGETS AND OFFICE STYLES*/
        .gadgets-services-section{
            padding: 60px 20px; 
            max-width: 1400px;
            margin: auto;
        }
        .gadgets-services-hero { 
            text-align: center; 
            margin-bottom: 60px; 
        }
        .gadgets-services-hero img { 
            max-width: 100%; 
            border-radius: 20px; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.5); 
        }
        .gadgets-services-grid { display: grid;
             grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
             gap: 30px; 
            }
        .gadgets-services-card { background: #1e1e1e;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 8px 16px rgba(0,0,0,0.4);
            transition: transform 0.3s, box-shadow 0.3s; 
            }
        .gadgets-services-card:hover { 
             transform: translateY(-5px)scale(1.02);
             box-shadow: 0 10px 40px rgba(0,0,0,0.3); 
             border-color:rgba(255, 255, 255, 0.3);
             border-width: 2px;
            }
        .gadgets-services-card img { 
              width: 100%;
              height: 250px;
              object-fit: cover; 
            }
        .gadgets-services-card h3 { 
            color: #00b09b;
            padding: 20px 20px 10px;
            font-size: 1.6rem; 
        }
        .gadgets-services-card p { 
             padding: 20px 20px 20px;
             line-height: 1.6;
             color: white; 
            }
        .gadgets-services-header{
            padding: 100px 20px; 
            text-align: center;
            font-size: 2.5rem;
        }

        /* LED WALL LED WALL LED WALL LED WALL LED WALL */


.led-area-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.led-wrapper-main {
    position: relative;
    width: 100%;
    height: 830px;
    overflow: hidden;
    margin-bottom: 0%;
    margin-top: -40px;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 85%,
        transparent 100%
    );
}

.led-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.led-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        360deg, 
        rgba(255, 23, 68, 0) 30%, 
        rgba(255, 23, 68, 0.5) 60%, 
        rgba(187, 134, 252, 1) 100%
    );
    z-index: 1;
    pointer-events: none; /* Allow clicks to pass through */
}

.led-header {
    position: absolute;
    justify-content: center;
    margin-top: 480px;
    text-align: center;
    padding: 40px 60px;
    width: 100%;
}

.led-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}



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

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 0.6;
            }
            50% {
                opacity: 1;
            }
        }

        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes scanline {
            0% {
                transform: translateY(-100%);
            }
            100% {
                transform: translateY(100%);
            }
        }

        .led-area2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            margin: 80px auto;
            padding: 0 20px;
            position: relative;
        }

        .led-header2 {
            text-align: center;
            margin-bottom: 40px;
            animation: fadeInUp 0.8s ease-out forwards;
            position: relative;
            z-index: 2;
        }

        .led-title2 {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 30px;
            letter-spacing: -1px;
        }

        .led-title2 .gradient-text {
            background: linear-gradient(
                90deg,
                #FF1744,
                #FF6B35,
                #F7931E,
                #FDC830,
                #37D5D6,
                #6C63FF,
                #BB86FC
            );
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 3s ease infinite;
            display: inline-block;
        }

        .word-first{
            font-family: 'Space Grotesk', sans-serif;
            font-size: 68px;
        }

        .led-title2 {
            color: #FF1744;
            animation: fadeInUp 0.6s ease-out 0.2s backwards;
        }

        .led-title2 .word-experience {
            animation: fadeInUp 0.6s ease-out 0.4s backwards;
        }

        .led-title2 .word-our {
            color: #37D5D6;
            animation: fadeInUp 0.6s ease-out 0.6s backwards;
        }

        .led-title2 .word-ledwall {
            animation: fadeInUp 0.6s ease-out 0.8s backwards;
        }

        .led-description {
            font-size: clamp(1rem, 2vw, 1.2rem);
            color: #c0c0c0;
            max-width: 800px;
            line-height: 1.8;
            animation: fadeInUp 1s ease-out 0.4s backwards;
            margin: auto;
        }

        .led-wrapper {
            position: relative;
            width: 100%;
            max-width: 1200px;
            height: 600px;
            overflow: hidden;
            border-radius: 20px;
            animation: fadeInUp 1.2s ease-out 0.6s backwards;
            box-shadow: 
                0 0 60px rgba(255, 23, 68, 0.2),
                0 0 120px rgba(187, 134, 252, 0.1);
            position: relative;
            z-index: 1;
            margin-top: 50px;
        }

        /* Glowing border effect */
        .led-wrapper::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(
                45deg,
                #FF1744,
                #BB86FC,
                #37D5D6,
                #FF1744
            );
            background-size: 400% 400%;
            border-radius: 20px;
            z-index: -1;
            animation: gradientShift 4s ease infinite;
            opacity: 0.6;
        }

        /* Scanline effect */
        .led-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(
                to right,
                transparent,
                rgba(255, 255, 255, 0.8),
                transparent
            );
            animation: scanline 3s linear infinite;
            z-index: 10;
        }

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

        .led-carousel-track {
            display: flex;
            height: 100%;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .led-carousel-slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .led-carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
        }

        /* Gradient overlay on images */
        .led-carousel-slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 30%,
                rgba(255, 23, 68, 0.15) 60%,
                rgba(187, 134, 252, 0.25) 100%
            );
            pointer-events: none;
        }

        .led-carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 20;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 24px;
        }

        .led-carousel-nav:hover {
            background: rgba(255, 23, 68, 0.8);
            border-color: #FF1744;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 0 20px rgba(255, 23, 68, 0.6);
        }

        .led-carousel-nav.prev {
            left: 20px;
        }

        .led-carousel-nav.next {
            right: 20px;
        }

        .led-carousel-indicators {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 12px;
            z-index: 20;
        }

        .led-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(5px);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .led-indicator.active {
            background: #FF1744;
            width: 40px;
            border-radius: 6px;
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 15px rgba(255, 23, 68, 0.8);
        }

        .led-indicator:hover:not(.active) {
            background: rgba(255, 255, 255, 0.6);
            transform: scale(1.2);
        }

        /* Features section */
        .led-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
    width: 100%;
    max-width: 1200px;
    animation: fadeInUp 1.4s ease-out 0.8s backwards;
}

.led-feature-card {
    background: linear-gradient(
        135deg,
        rgba(255, 23, 68, 0.05),
        rgba(187, 134, 252, 0.05)
    );
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.led-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.led-feature-card:hover::before {
    left: 100%;
}

/* Card 1 - Gold/Yellow Theme */
.led-feature-card:nth-child(1) {
    border: 2px solid rgba(255, 193, 7, 0.3);
    background: #000;
}

.led-feature-card:nth-child(1):hover {
    transform: translateY(-10px);
    border-color: #FFC107;
    box-shadow: 0 10px 40px rgba(255, 193, 7, 0.4);
}

/* Card 2 - Red Theme */
.led-feature-card:nth-child(2) {
    border: 2px solid rgba(255, 23, 68, 0.5);
    background: #000;
}

.led-feature-card:nth-child(2):hover {
    transform: translateY(-10px);
    border-color: #FF1744;
    box-shadow: 0 10px 40px rgba(255, 23, 68, 0.5);
}

/* Card 3 - Cyan/Blue Theme */
.led-feature-card:nth-child(3) {
    border: 2px solid rgba(55, 213, 214, 0.3);
    background: #000;
}

.led-feature-card:nth-child(3):hover {
    transform: translateY(-10px);
    border-color: #37D5D6;
    box-shadow: 0 10px 40px rgba(55, 213, 214, 0.4);
}

.led-feature-icon {
    font-size: 40px;
    margin-bottom: 15px;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

.led-feature-title {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
}

.led-feature-description {
    color: #b0b0b0;
    line-height: 1.6;
}


/* ========================================
   BASE STYLES
   ======================================== */

.led-area-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.led-wrapper-main {
    position: relative;
    width: 100%;
    height: 830px;
    overflow: hidden;
    margin-bottom: 0%;
    margin-top: -40px;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 85%,
        transparent 100%
    );
}

.led-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.led-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        360deg, 
        rgba(255, 23, 68, 0) 30%, 
        rgba(255, 23, 68, 0.5) 60%, 
        rgba(187, 134, 252, 1) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.led-header {
    position: absolute;
    justify-content: center;
    margin-top: 480px;
    text-align: center;
    padding: 40px 60px;
    width: 100%;
}

.led-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

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

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* ========================================
   SECTION 2 STYLES
   ======================================== */

.led-area2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 80px auto;
    padding: 0 20px;
    position: relative;
}

.led-header2 {
    text-align: center;
    margin-bottom: 40px;
    animation: fadeInUp 0.8s ease-out forwards;
    position: relative;
    z-index: 2;
}

.led-title2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 30px;
    letter-spacing: -1px;
    color: #FF1744;
    animation: fadeInUp 0.6s ease-out 0.2s backwards;
}

.led-title2 .gradient-text {
    background: linear-gradient(
        90deg,
        #FF1744,
        #FF6B35,
        #F7931E,
        #FDC830,
        #37D5D6,
        #6C63FF,
        #BB86FC
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
    display: inline-block;
}

.word-first {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 68px;
}

.led-title2 .word-experience {
    animation: fadeInUp 0.6s ease-out 0.4s backwards;
}

.led-title2 .word-our {
    color: #37D5D6;
    animation: fadeInUp 0.6s ease-out 0.6s backwards;
}

.led-title2 .word-ledwall {
    animation: fadeInUp 0.6s ease-out 0.8s backwards;
}

.led-description {
    font-size: 24px;
    color: #c0c0c0;
    max-width: 1000px;
    line-height: 1.8;
    animation: fadeInUp 1s ease-out 0.4s backwards;
    margin: auto;
}

.led-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 600px;
    overflow: hidden;
    border-radius: 20px;
    animation: fadeInUp 1.2s ease-out 0.6s backwards;
    box-shadow: 
        0 0 60px rgba(255, 23, 68, 0.2),
        0 0 120px rgba(187, 134, 252, 0.1);
    z-index: 1;
    margin-top: 50px;
}

.led-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        #FF1744,
        #BB86FC,
        #37D5D6,
        #FF1744
    );
    background-size: 400% 400%;
    border-radius: 20px;
    z-index: -1;
    animation: gradientShift 4s ease infinite;
    opacity: 0.6;
}

.led-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    animation: scanline 3s linear infinite;
    z-index: 10;
}

/* ========================================
   CAROUSEL STYLES
   ======================================== */

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

.led-carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.led-carousel-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.led-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.led-carousel-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 30%,
        rgba(255, 23, 68, 0.15) 60%,
        rgba(187, 134, 252, 0.25) 100%
    );
    pointer-events: none;
}

.led-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 24px;
}

.led-carousel-nav:hover {
    background: rgba(255, 23, 68, 0.8);
    border-color: #FF1744;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(255, 23, 68, 0.6);
}

.led-carousel-nav.prev {
    left: 20px;
}

.led-carousel-nav.next {
    right: 20px;
}

.led-carousel-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 20;
}

.led-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.led-indicator.active {
    background: #FF1744;
    width: 40px;
    border-radius: 6px;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(255, 23, 68, 0.8);
}

.led-indicator:hover:not(.active) {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

/* ========================================
   FEATURES SECTION
   ======================================== */

.led-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
    width: 100%;
    max-width: 1200px;
    animation: fadeInUp 1.4s ease-out 0.8s backwards;
}


.led-feature-card {
    background: #000;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.led-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.led-feature-card:hover::before {
    left: 100%;
}

.led-feature-card:nth-child(1) {
    border: 2px solid rgba(255, 193, 7, 0.3);
}

.led-feature-card:nth-child(1):hover {
    transform: translateY(-10px);
    border-color: #FFC107;
    box-shadow: 0 10px 40px rgba(255, 193, 7, 0.4);
}

.led-feature-card:nth-child(2) {
    border: 2px solid rgba(255, 23, 68, 0.5);
}

.led-feature-card:nth-child(2):hover {
    transform: translateY(-10px);
    border-color: #FF1744;
    box-shadow: 0 10px 40px rgba(255, 23, 68, 0.5);
}

.led-feature-card:nth-child(3) {
    border: 2px solid rgba(55, 213, 214, 0.3);
}

.led-feature-card:nth-child(3):hover {
    transform: translateY(-10px);
    border-color: #37D5D6;
    box-shadow: 0 10px 40px rgba(55, 213, 214, 0.4);
}

.led-feature-icon svg {
            width: 50px;
            height: 50px;
            display: block;
            margin-top: 20px;
}

/* Icon specific colors */
        .led-feature-card:nth-child(1) .led-feature-icon svg {
            stroke: #FFC107;
            fill: none;
        }

        .led-feature-card:nth-child(2) .led-feature-icon svg {
            stroke: #FF1744;
            fill: none;
        }

        .led-feature-card:nth-child(3) .led-feature-icon svg {
            stroke: #37D5D6;
            fill: none;
        }

.led-feature-title {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
}

.led-feature-description {
    color: #b0b0b0;
    line-height: 1.6;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* 320px - 344px (Small phones) */
@media (min-width: 320px) and (max-width: 344px) {
    .led-wrapper-main {
        height: 350px;
        margin-top: -120px;
    }

    .led-header {
        margin-top: 200px;
        padding: 20px 15px;
    }

    .led-header h1 {
        font-size: 24px;
    }

    .word-first {
        font-size: 28px;
    }

    .led-title2 {
        font-size: 28px;
    }

    .led-description {
        font-size: 14px;
        padding: 0 10px;
    }

    .led-wrapper {
        height: 300px;
        border-radius: 12px;
        margin-top: 30px;
    }

    .led-carousel-nav {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    .led-carousel-nav.prev {
        left: 10px;
    }

    .led-carousel-nav.next {
        right: 10px;
    }

    .led-carousel-indicators {
        bottom: 15px;
        gap: 8px;
    }

    .led-indicator {
        width: 8px;
        height: 8px;
    }

    .led-indicator.active {
        width: 24px;
    }

    .led-features {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    .led-feature-card {
        padding: 20px;
    }

    .led-feature-icon {
        font-size: 32px;
    }

    .led-feature-title {
        font-size: 1.2rem;
    }

    .led-feature-description {
        font-size: 14px;
    }
}

/* 350px - 360px */
@media (min-width: 350px) and (max-width: 360px) {
    .led-wrapper-main {
        height: 250px;
        margin-top: -120px;
    }

    .led-header {
        margin-top: 220px;
        padding: 25px 20px;
    }

    .led-header h1 {
        font-size: 26px;
    }

    .word-first {
        font-size: 32px;
    }

    .led-title2 {
        font-size: 32px;
    }

    .led-description {
        font-size: 16px;
    }

    .led-wrapper {
        height: 320px;
        border-radius: 14px;
    }

    .led-carousel-nav {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .led-carousel-nav.prev {
        left: 12px;
    }

    .led-carousel-nav.next {
        right: 12px;
    }

    .led-features {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .led-feature-card {
        padding: 22px;
    }
}

/* 370px - 375px */
@media (min-width: 370px) and (max-width: 375px) {
    .led-wrapper-main {
        height: 380px;
        margin-top: -120px;
    }

    .word-first {
        font-size: 34px;
        margin-top: -35px;
    }

    .led-description {
        font-size: 16px;
    }

    .led-wrapper {
        height: 340px;
        border-radius: 15px;
    }

    .led-carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .led-carousel-nav.prev {
        left: 14px;
    }

    .led-carousel-nav.next {
        right: 14px;
    }

    .led-feature-card {
        margin: auto;
        width: 300px;
        height: 250px;
    }
    
    .led-feature-icon svg{
        height: 40px;
        width: 40px;
        margin-top: 0px;
    }

    .led-feature-title{
        font-size: 24px;
        margin-top: -10px;
    }

    .led-feature-description{
        font-size: 16px;
    }
}

/* 380px - 390px */
@media (min-width: 380px) and (max-width: 390px) {
    .led-wrapper-main {
        height: 400px;
        margin-top: -110px;
    }

    .led-header {
        margin-top: 250px;
        padding: 30px 25px;
    }

    .led-header h1 {
        font-size: 30px;
    }

    .word-first {
        font-size: 36px;
    }

    .led-description {
        font-size: 18px;
    }

    .led-wrapper {
        height: 350px;
    }

    .led-features {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* 400px - 412px */
@media (min-width: 400px) and (max-width: 412px) {
    .led-wrapper-main {
        height: 370px;
        margin-top: -110px;
    }

    .led-header {
        margin-top: 260px;
        padding: 35px 30px;
    }

    .led-header h1 {
        font-size: 32px;
    }

    .word-first {
        font-size: 38px;
    }

    .led-description {
        font-size: 18px;
    }

    .led-wrapper {
        height: 360px;
    }

    .led-carousel-nav {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }
}

/* 413px - 414px */
@media (min-width: 413px) and (max-width: 414px) {
    .led-wrapper-main {
        height: 530px;
        margin-top: -120px;
    }

    .led-header {
        margin-top: 270px;
        padding: 35px 30px;
    }

    .word-first {
        font-size: 35px;
    }

    .led-description {
        font-size: 18px;
    }

    .led-wrapper {
        height: 365px;
    }

    .led-features {
        height: 800px;
    }

    .led-feature-card {
        width: 360px;
    }

    .led-feature-icon svg{
        height: 40px;
        margin-top: 5px;
    }
}

/* 420px - 430px */
@media (min-width: 420px) and (max-width: 430px) {
    .led-wrapper-main {
        height: 400px;
        margin-top: -110px;
    }

    .led-header {
        margin-top: 280px;
        padding: 35px 30px;
    }

    .led-header h1 {
        font-size: 34px;
    }

    .word-first {
        font-size: 40px;
    }

    .led-description {
        font-size: 18px;
    }

    .led-wrapper {
        height: 370px;
    }

    .led-carousel-nav {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
}

/* 500px - 540px */
@media (min-width: 500px) and (max-width: 540px) {
    .led-wrapper-main {
        height: 420px;
        margin-top: -110px;
    }

    .led-header {
        margin-top: 300px;
        padding: 40px 40px;
    }

    .led-header h1 {
        font-size: 38px;
    }

    .word-first {
        font-size: 36px;margin-top: -20px;
    }

    .led-description {
        font-size: 18px;
    }

    .led-wrapper {
        height: 400px;
    }

    .led-carousel-nav {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }

    .led-carousel-nav.prev {
        left: 15px;
    }

    .led-carousel-nav.next {
        right: 15px;
    }

    .led-features {
        grid-template-columns: 1fr;
        gap: 25px;
        width: 400px;
    }
}

/* 750px - 768px (Tablets) */
@media (min-width: 750px) and (max-width: 768px) {
    .led-wrapper-main {
        height: 650px;
        margin-top: -100px;
    }

    .led-header {
        margin-top: 350px;
        padding: 40px 50px;
    }

    .led-header h1 {
        font-size: 48px;
    }

    .word-first {
        font-size: 52px;
    }

    .led-title2 {
        font-size: 52px;
    }

    .led-wrapper {
        height: 450px;
    }

    .led-carousel-nav {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .led-carousel-nav.prev {
        left: 18px;
    }

    .led-carousel-nav.next {
        right: 18px;
    }

    .led-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .led-feature-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

/* 800px - 820px */
@media (min-width: 800px) and (max-width: 820px) {
    .led-wrapper-main {
        height: 680px;
        margin-top: -35px;
    }

    .led-header {
        margin-top: 370px;
        padding: 40px 55px;
    }

    .led-header h1 {
        font-size: 52px;
    }

    .word-first {
        font-size: 56px;
    }

    .led-title2 {
        font-size: 56px;
    }

    .led-wrapper {
        height: 480px;
    }

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

    .led-feature-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

/* 840px - 853px */
@media (min-width: 840px) and (max-width: 853px) {
    .led-wrapper-main {
        height: 700px;
        margin-top: -38px;
    }

    .led-header {
        margin-top: 380px;
        padding: 40px 55px;
    }

    .led-header h1 {
        font-size: 54px;
    }

    .word-first {
        font-size: 58px;
    }

    .led-title2 {
        font-size: 58px;
    }

    .led-wrapper {
        height: 500px;
    }

    .led-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}

/* 900px - 912px */
@media (min-width: 900px) and (max-width: 912px) {
    .led-wrapper-main {
        height: 720px;
        margin-top: -38px;
    }

    .led-header {
        margin-top: 400px;
        padding: 40px 60px;
    }

    .led-header h1 {
        font-size: 56px;
    }

    .word-first {
        font-size: 60px;
    }

    .led-title2 {
        font-size: 60px;
    }

    .led-wrapper {
        height: 520px;
    }

    .led-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* 980px - 992px */
@media (min-width: 980px) and (max-width: 992px) {
    .led-wrapper-main {
        height: 750px;
        margin-top: -40px;
    }

    .led-header {
        margin-top: 420px;
        padding: 40px 60px;
    }

    .led-header h1 {
        font-size: 58px;
    }

    .word-first {
        font-size: 62px;
    }

    .led-title2 {
        font-size: 62px;
    }

    .led-wrapper {
        height: 540px;
    }

    .led-carousel-nav {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .led-carousel-nav.prev {
        left: 20px;
    }

    .led-carousel-nav.next {
        right: 20px;
    }

    .led-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* 1000px - 1024px */
@media (min-width: 1000px) and (max-width: 1024px) {
    .led-wrapper-main {
        height: 470px;
        margin-top: -40px;
    }

    .word-first {
        font-size: 44px;
    }

    .led-title2 {
        font-size: 44px;
    }

    .led-wrapper {
        width: 800px;
        height: 450px;
    }

    .led-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        width: 800px;
    }
}

/* 1200px - 1280px */
@media (min-width: 1200px) and (max-width: 1280px) {
    .led-wrapper-main {
        height: 500px;
        margin-top: -40px;
    }

    .led-header {
        margin-top: 460px;
        padding: 40px 60px;
    }

    .led-header h1 {
        font-size: 62px;
    }

    .word-first {
        margin-top: -30px;
        font-size: 56px;
    }

    .led-title2 {
        font-size: 66px;
    }

    .led-wrapper {
        height: 580px;
    }

    .led-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        max-width: 1100px;
    }
}

/* General mobile landscape orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .led-wrapper-main {
        height: 350px;
    }

    .led-header {
        margin-top: 150px;
        padding: 20px 30px;
    }

    .led-header h1 {
        font-size: 24px;
    }

    .led-area2 {
        margin: 40px auto;
    }

    .led-wrapper {
        height: 280px;
    }
}

/* PA SYSTEM */ /* PA SYSTEM */ /* PA SYSTEM */ /* PA SYSTEM */ /* PA SYSTEM */ /* PA SYSTEM */
    

.top-cctv-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 150px auto;
}

.primary-cctv-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    animation: fadeInUp 1.1s ease-out forwards;
   
    background-image:
        linear-gradient(to top, 
    rgba(255, 36, 0, 1) 0%,        /* Red at bottom */
    rgba(138, 43, 226, 0.8) 30%,   /* Violet in middle */
    rgba(0, 100, 255, 0.4) 50%,    /* Blue */
    rgba(0, 100, 255, 0) 100%      /* Transparent blue at top */
),
        url('https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.15752-9/604440343_889863323579066_200045213746391097_n.png?_nc_cat=111&ccb=1-7&_nc_sid=9f807c&_nc_eui2=AeEMLfwODBzcbqQMzmfHS1WAeO32s53vN8t47fazne83y2Th8iDBAQC332CKGsnHSunZyLezvyWNTbiIAUHPTy0_&_nc_ohc=cLdqA-aZ3XkQ7kNvwEILF9M&_nc_oc=Adl9KHg1pIF0NshEaViRzCecxcqtgNgAllQHquOzDP-jKrl8F0PJn_P9RKMbtrMGi0k&_nc_zt=23&_nc_ht=scontent.fmnl9-2.fna&oh=03_Q7cD4AHju1kZI3GPDlUdkuIatwCyHIWzi-KI2O8CplcOb-Ll7A&oe=69716C0B');
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 85%,
        transparent 100%
    );
}

/* Animated Bars Container */
.bars-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    z-index: 1;
    pointer-events: none;
    padding: 0 20px;
}

/* Individual Bar Styling */
.bars-container span {
    width: 40px;
    min-height: 10px;
    background: linear-gradient(to top, 
    rgba(255, 36, 0, 1) 0%,      /* Full red at bottom */
    rgba(255, 36, 0, 0.85) 60%,  /* 85% opacity red */
    rgba(255, 36, 0, 0.7) 80%,   /* 70% opacity red */
    rgba(255, 36, 0, 0.5) 100%,   /* 50% opacity red */
    rgba(255, 36, 0, 0.2) 100%   /* 20% opacity at top */
);
    border-radius: 6px 6px 0 0;
    animation: barPulse 1.2s infinite ease-in-out;
    box-shadow: 
    0 0 10px rgba(255, 36, 0, 0.6),
    0 0 20px rgba(255, 107, 0, 0.4),
    0 0 30px rgba(255, 36, 0, 0.2);
    opacity: 0.9;
}

/* Staggered Animation Delays for Each Bar */
.bars-container span:nth-child(1) { animation-delay: 0s; }
.bars-container span:nth-child(2) { animation-delay: 0.05s; }
.bars-container span:nth-child(3) { animation-delay: 0.1s; }
.bars-container span:nth-child(4) { animation-delay: 0.15s; }
.bars-container span:nth-child(5) { animation-delay: 0.2s; }
.bars-container span:nth-child(6) { animation-delay: 0.25s; }
.bars-container span:nth-child(7) { animation-delay: 0.3s; }
.bars-container span:nth-child(8) { animation-delay: 0.35s; }
.bars-container span:nth-child(9) { animation-delay: 0.4s; }
.bars-container span:nth-child(10) { animation-delay: 0.45s; }
.bars-container span:nth-child(11) { animation-delay: 0.5s; }
.bars-container span:nth-child(12) { animation-delay: 0.55s; }
.bars-container span:nth-child(13) { animation-delay: 0.6s; }
.bars-container span:nth-child(14) { animation-delay: 0.55s; }
.bars-container span:nth-child(15) { animation-delay: 0.5s; }
.bars-container span:nth-child(16) { animation-delay: 0.45s; }
.bars-container span:nth-child(17) { animation-delay: 0.4s; }
.bars-container span:nth-child(18) { animation-delay: 0.35s; }
.bars-container span:nth-child(19) { animation-delay: 0.3s; }
.bars-container span:nth-child(20) { animation-delay: 0.25s; }
.bars-container span:nth-child(21) { animation-delay: 0.2s; }
.bars-container span:nth-child(22) { animation-delay: 0.15s; }
.bars-container span:nth-child(23) { animation-delay: 0.1s; }
.bars-container span:nth-child(24) { animation-delay: 0.05s; }
.bars-container span:nth-child(25) { animation-delay: 0.1s; }
.bars-container span:nth-child(26) { animation-delay: 0.15s; }
.bars-container span:nth-child(27) { animation-delay: 0.2s; }
.bars-container span:nth-child(28) { animation-delay: 0.25s; }
.bars-container span:nth-child(29) { animation-delay: 0.3s; }
.bars-container span:nth-child(30) { animation-delay: 0.35s; }

/* Bar Pulse Animation */
@keyframes barPulse {
    0%, 100% { 
        height: 20px;
        opacity: 0.6;
    }
    20% { 
        height: 80px;
        opacity: 0.8;
    }
    40% { 
        height: 150px;
        opacity: 1;
    }
    60% { 
        height: 100px;
        opacity: 0.9;
    }
    80% { 
        height: 60px;
        opacity: 0.7;
    }
}

/* Header Layer */
.cctv-header-layer {
    position: absolute;
    bottom: 30px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
    z-index: 2;
}

.cctv-header-layer h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 212, 255, 0.3);
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .primary-cctv-wrapper {
        height: 450px;
    }
    
    .bars-container {
        height: 200px;
        padding: 0 10px;
    }
    
    .bars-container span {
        width: 8px;
    }
    
    .cctv-header-layer {
        padding: 20px 30px;
    }
    
    .cctv-header-layer h1 {
        font-size: 32px;
    }
    
    @keyframes barPulse {
        0%, 100% { 
            height: 15px;
            opacity: 0.6;
        }
        20% { 
            height: 50px;
            opacity: 0.8;
        }
        40% { 
            height: 100px;
            opacity: 1;
        }
        60% { 
            height: 65px;
            opacity: 0.9;
        }
        80% { 
            height: 35px;
            opacity: 0.7;
        }
    }
}

@media (max-width: 480px) {
    .bars-container span {
        width: 6px;
    }
    
    .cctv-header-layer h1 {
        font-size: 24px;
    }
}

.ananda-title{
    font-family: Space Grotesk, sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 40px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    text-align: center;
}

    .ananda-title.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .ananda-title.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }   


.second-cctv-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 150px auto;
}

    .second-cctv-area.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .second-cctv-area.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

.secondary-cctv-wrapper {
    position: relative;
    width: 100%;
    height: 650px !important;
    overflow: hidden;
    margin-bottom: 0px;

    background-image:
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 30%, rgba(255, 36, 0, 0) 100%),
    url('/images/services/pasystem2nd.jpg');
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
}

.ananda-caption {
    padding: 20px;
    margin-bottom: 30px;
    margin-top: -130px;
}

    .ananda-caption.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

	.ananda-caption.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

.ananda-captions{
    font-family: Space Grotesk, sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    text-align: left;
    margin-left: 250px;
    margin-right: 500px;
}

.myDIV {
    margin-left: 1340px;
    margin-top: -100px;
}


.speech {
    position: absolute;
    width: 300px;
    height: 100px;
    text-align: center;
    line-height: 2rem;
    background: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%);
    display: none;
    border-radius: 20px;
    left: 1400px;
    margin-top: 550px;
    padding: 15px;

    font-family: Space Grotesk, sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    letter-spacing: 0%;
}

/* Large circle */
.speech:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #A80606 0%, #C3631F 100%);
  border-radius: 50%;
  left: 15px;
  bottom: -25px;
}

/* Small circle */
.speech:before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #A80606 0%, #C3631F 100%);
  border-radius: 50%;
  left: 8px;
  bottom: -35px;
}


.myDIV:hover+.speech {
  display: block;
  color: red;
}

/* Contact Icons Container */
.contact-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: nowrap;
}

/* Individual contact Icon Styling */


.contact-icon {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
    transform: translateY(0);
    margin: 20px;
}

    /* Hover state for the container */
    .contact-icon:hover {
        transform: translateY(-8px) scale(1.1);
    }

    /* Icon image styling */
    .contact-icon img {
        width: 80%;
        height: 80%;
        object-fit: contain;
        transition: all 0.3s ease;
        filter: brightness(0.9);
    }


.myDIV2 {
    margin-left: 1430px;
    margin-top: -100px;
}


.speech2 {
    position: absolute;
    width: 300px;
    height: 100px;
    text-align: center;
    line-height: 2rem;
    background: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%);
    display: none;
    border-radius: 20px;
    left: 1490px;
    margin-top: 550px;
    padding: 15px;

    font-family: Space Grotesk, sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    letter-spacing: 0%;
}

/* Large circle */
.speech2:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #A80606 0%, #C3631F 100%);
  border-radius: 50%;
  left: 15px;
  bottom: -25px;
}

/* Small circle */
.speech2:before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #A80606 0%, #C3631F 100%);
  border-radius: 50%;
  left: 8px;
  bottom: -35px;
}


.myDIV2:hover+.speech2 {
  display: block;
  color: red;
}


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


/* Large Desktops (1400px - 1600px) */
@media (max-width: 1600px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 40px auto 100px auto;
    }

    .ananda-captions {
        margin-top: 30px;
        margin-left: 200px;
        margin-right: 400px;
    }
    
    .myDIV {
        margin-left: 1100px;
    }
    
    .myDIV2 {
        margin-left: 1190px;
    }
    
    .speech {
        left: 1160px;
    }
    
    .speech2 {
        left: 1250px;
    }

    .modal-content {
        width: 100%;
        margin-top: -210px;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 820px;
        margin-top: 50px;
        margin-left: 30px;
    }
    
    .modal-caption {
        margin-top: 210px;
        width: 820px;
        margin-left: 30px;
    }
    
    .modal-caption h2 {
        font-size: 1.9rem;
        margin-bottom: 8px;
        margin-left: 30px;
    }
    
    .modal-caption p {
        font-size: 1.4rem;
        line-height: 1;
        margin-left: 10px;
    }
}

/* Standard Desktops (1200px - 1400px) */
@media (max-width: 1400px) {

    .cctv-header-layer h1 {
        font-size: 42px;
    }
    
    .ananda-title {
        font-size: 36px;
    }
    
    .ananda-captions {
        margin-left: 150px;
        margin-right: 300px;
        font-size: 22px;
    }
    
    .myDIV {
        margin-left: 950px;
    }
    
    .myDIV2 {
        margin-left: 1040px;
    }
    
    .speech {
        left: 1010px;
        width: 170px;
    }
    
    .speech2 {
        left: 1100px;
        width: 170px;
    }
}

/* Medium Desktops (992px - 1200px) */
@media (max-width: 1200px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 40px auto 100px auto;
    }
    
    .primary-cctv-wrapper {
        height: 400px;
    }
    
    .secondary-cctv-wrapper {
        height: 500px;
    }
    
    .cctv-header-layer {
        padding: 30px 40px;
    }
    
    .cctv-header-layer h1 {
        font-size: 36px;
    }
    
    .second-title {
        margin-left: 10%;
    }
    
    .ananda-title {
        font-size: 32px;
    }
    
    .ananda-caption {
        margin-top: -100px;
        max-width: 800px;
    }
    
    .ananda-captions {
        margin-left: 80px;
        margin-right: 200px;
        font-size: 20px;
    }
    
    .myDIV {
        margin-left: 650px;
    }
    
    .myDIV2 {
        margin-left: 740px;
    }
    
    .contact-icon {
        width: 55px;
        height: 55px;
    }
    
    .speech,
    .speech2 {
        width: 200px;
        font-size: 14px;
    }
    
    .speech {
        left: 710px;
    }
    
    .speech2 {
        left: 800px;
    }
}


/* Desktops (1200px - 1280px) */
@media (min-width: 1200px) and (max-width: 1280px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 35px auto 90px auto;
    }
    
    .primary-cctv-wrapper {
        height: 380px;
    }
    
    .secondary-cctv-wrapper {
        height: 430px;
    }
    
    .cctv-header-layer h1 {
        font-size: 35px;
    }
    
    .ananda-title {
        font-size: 30px;
    }
    
    .ananda-captions {
        font-size: 19px;
    }
}

/* Standard Desktops (1000px - 1024px) */
@media (min-width: 1000px) and (max-width: 1024px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 32px auto 85px auto;
    }
    
    .primary-cctv-wrapper {
        height: 365px;
    }
    
    .secondary-cctv-wrapper {
        height: 415px;
    }
    
    .cctv-header-layer h1 {
        font-size: 33px;
    }
    
    .ananda-title {
        font-size: 29px;
    }
    
    .ananda-captions {
        font-size: 18.5px;
    }
}

/* Tablets Landscape (980px - 992px) */
@media (min-width: 980px) and (max-width: 992px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 30px auto 82px auto;
    }
    
    .primary-cctv-wrapper {
        height: 355px;
    }
    
    .secondary-cctv-wrapper {
        height: 405px;
    }
    
    .cctv-header-layer h1 {
        font-size: 32.5px;
    }
    
    .ananda-title {
        font-size: 28.5px;
    }
    
    .ananda-captions {
        font-size: 18px;
    }
}

/* Tablets Landscape (768px - 992px) */
@media (max-width: 992px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 30px auto 80px auto;
    }
    
    .primary-cctv-wrapper {
        height: 350px;
    }
    
    .secondary-cctv-wrapper {
        height: 400px;
    }
    
    .cctv-header-layer {
        padding: 25px 30px;
    }
    
    .cctv-header-layer h1 {
        font-size: 32px;
    }
    
    .second-title {
        margin-left: 5%;
        margin-bottom: 30px;
    }
    
    .ananda-title {
        font-size: 28px;
    }
    
    .ananda-caption {
        margin-top: -80px;
        width: 95%;
    }
    
    .ananda-captions {
        margin-left: 50px;
        margin-right: 150px;
        font-size: 18px;
    }
    
    .myDIV {
        margin-left: 300px;
        margin-top: 30px;
    }
    
    .myDIV2 {
        margin-left: 390px;
        margin-top: -92px;
    }
    
    .contact-icon {
        width: 50px;
        height: 50px;
    }
    
    .speech,
    .speech2 {
        width: 200px;
        font-size: 13px;
        padding: 12px;
    }
    
    .speech {
        left: 355px;
        margin-top: -220px;
    }
    
    .speech2 {
        left: 445px;
        margin-top: -220px;
    }
}

/* Tablets (900px - 912px) */
@media (min-width: 900px) and (max-width: 912px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 28px auto 75px auto;
    }
    
    .primary-cctv-wrapper {
        height: 440px;
    }
    
    .secondary-cctv-wrapper {
        height: 390px;
    }
    
    .cctv-header-layer h1 {
        font-size: 31px;
    }
    
    .ananda-title {
        font-size: 27px;
    }
    
    .ananda-captions {
        font-size: 17.5px;
        margin-left: 45px;
        margin-right: -70px;
    }
    .anandascap { 
        max-width: 1500px;
    }
}

/* Tablets (840px - 853px) */
@media (min-width: 840px) and (max-width: 853px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 26px auto 70px auto;
    }
    
    .primary-cctv-wrapper {
        height: 330px;
    }
    
    .secondary-cctv-wrapper {
        height: 380px;
    }
    
    .cctv-header-layer h1 {
        font-size: 30px;
    }
    
    .ananda-title {
        font-size: 26px;
    }
    
    .ananda-captions {
        font-size: 17px;
        margin-left: 40px;
        margin-right: 130px;
    }
}

/* Tablets (800px - 820px) */
@media (min-width: 800px) and (max-width: 820px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 24px auto 65px auto;
    }
    
    .primary-cctv-wrapper {
        height: 400px;
    }
    
    .secondary-cctv-wrapper {
        height: 370px !important;
    }
    
    .cctv-header-layer h1 {
        font-size: 29px;
    }
    
    .ananda-title {
        font-size: 25px;
    }
    
    .ananda-captions {
        font-size: 17px;
        margin-left: 35px;
        margin-right: 120px;
    }

    .anandascap {
        width:850px;
    }
}

/* Tablets Portrait (576px - 768px) */
@media (max-width: 768px) {
    .top-cctv-area,
    .second-cctv-area {
        width:100%;
    }
    
    .primary-cctv-wrapper {
        height: 350px;
    }
    
    .secondary-cctv-wrapper {
        height: 350px !important;
    }
    
    .cctv-header-layer {
        padding: 20px 25px;
    }
    
    .cctv-header-layer h1 {
        font-size: 28px;
    }
    
    .second-title {
        margin-left: 5%;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .ananda-title {
        font-size: 24px;
    }
    
    .ananda-caption {
        margin-top: -80px;
        width: 100%;
        padding: 15px;
    }
    
    .ananda-captions {
        margin-left: 20px;
        margin-right: 20px;
        font-size: 16px;
        text-align: center;
        line-height: 1.6;
    }
    
    .myDIV,
    .myDIV2 {
        position: relative;
        display: inline-block;
        margin: 20px 15px 0 0;
    }
    
    .myDIV {
        margin-left: 0;
    }
    
    .myDIV2 {
        margin-left: 0;
    }
    
    .contact-icon {
        width: 45px;
        height: 45px;
    }
    
    .speech{
        width: 220px;
        font-size: 12px;
        padding: 10px;
        position: absolute;
        top: 1200px;
        left: 55%;
        transform: translateX(-50%);
        height: 85px;
    }

    .speech2 {
        width: 220px;
        font-size: 12px;
        padding: 10px;
        position: absolute;
        top: 1200px;
        left: 69%;
        transform: translateX(-50%);
        height: 85px;
    }
    
    .speech:after,
    .speech2:after {
        left: 10%;
        transform: translateX(-50%);
    }
    
    .speech:before,
    .speech2:before {
        left: 10%;
        transform: translateX(-10px);
    }
    
    /* Center icons container */
    .ananda-caption {
        text-align: center;
    }
}

/* Mobile Devices (400px - 576px) */
@media (max-width: 576px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 40px auto;
    }
    
    .primary-cctv-wrapper {
        height: 250px;
        border-radius: 8px;
    }
    
    .secondary-cctv-wrapper {
        height: 300px;
        border-radius: 8px;
    }
    
    .cctv-header-layer {
        padding: 15px 20px;
    }
    
    .cctv-header-layer h1 {
        font-size: 24px;
    }
    
    .second-title {
        margin-left: 0;
        text-align: center;
        padding: 10px 15px;
    }
    
    .ananda-title {
        font-size: 20px;
    }
    
    .ananda-caption {
        margin-top: -40px;
        margin-bottom: -40px;
        width: 98%;
        padding: 10px;
    }
    
    .ananda-captions {
        margin-left: 15px;
        margin-right: 15px;
        font-size: 14px;
        line-height: 1.7;
    }
    
    .contact-icon {
        width: 40px;
        height: 40px;
    }
    
    .speech {
        width: 170px;
        font-size: 11px;
        padding: 8px;
        top: 1035px;
        left: 54%;
    }

    .speech2 {
        width: 170px;
        font-size: 11px;
        padding: 8px;
        top: 1035px;
        left: 78%;
    }
    
    .speech:after,
    .speech2:after {
        width: 16px;
        height: 16px;
        bottom: -20px;
    }
    
    .speech:before,
    .speech2:before {
        width: 10px;
        height: 10px;
        bottom: -28px;
    }
}

/* Larger Mobile (500px - 540px) */
@media (min-width: 500px) and (max-width: 540px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 42px auto;
    }
    
    .primary-cctv-wrapper {
        height: 260px;
    }
    
    .secondary-cctv-wrapper {
        height: 310px;
    }
    
    .cctv-header-layer h1 {
        font-size: 25px;
    }
    
    .ananda-title {
        font-size: 21px;
    }
    
    .ananda-captions {
        font-size: 14.5px;
    }
    
    .speech {
        width: 175px;
        top: 1037px;
        left: 54.5%;
    }
    
    .speech2 {
        width: 175px;
        top: 1037px;
        left: 77%;
    }
}

/* Mobile (420px - 430px) */
@media (min-width: 420px) and (max-width: 430px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 40px auto;
    }
    
    .primary-cctv-wrapper {
        height: 252px;
    }
    
    .secondary-cctv-wrapper {
        height: 302px;
    }
    
    .cctv-header-layer h1 {
        font-size: 24.5px;
    }
    
    .ananda-title {
        font-size: 20.5px;
    }
    
    .ananda-captions {
        font-size: 14px;
    }

    .speech {
        margin-top: -60px;
    }
    
    .speech2 {
        margin-top: -60px;
    }

    .contact-icon {
        width: 39px;
        height: 39px;
    }
}

/* Mobile (413px - 414px) */
@media (min-width: 413px) and (max-width: 414px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 40px auto;
    }
    
    .primary-cctv-wrapper {
        height: 251px;
    }
    
    .secondary-cctv-wrapper {
        height: 301px;
    }
    
    .cctv-header-layer h1 {
        font-size: 24px;
    }
    
    .ananda-title {
        font-size: 20px;
    }
    
    .ananda-captions {
        font-size: 14px;
    }

    .speech {
        width: 170px;
        margin-top: -60px;
        left: 54%;
    }
    
    .speech2 {
        width: 170px;
        margin-top: -60px;
        left: 78%;
    }
}

/* Mobile (400px - 412px) */
@media (min-width: 400px) and (max-width: 412px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 40px auto;
    }
    
    .primary-cctv-wrapper {
        height: 250px;
    }
    
    .secondary-cctv-wrapper {
        height: 300px;
    }
    
    .cctv-header-layer h1 {
        font-size: 24px;
    }
    
    .ananda-title {
        font-size: 20px;
    }
    
    .ananda-captions {
        font-size: 14px;
    }
    
    .contact-icon {
        width: 40px;
        height: 40px;
    }
    
    .speech {
        width: 170px;
        margin-top: -60px;
        left: 54%;
    }
    
    .speech2 {
        width: 170px;
        margin-top: -60px;
        left: 78%;
    }
}

/* Small Mobile Devices (340px - 390px) */
@media (max-width: 390px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 40px auto;
    }
    
    .primary-cctv-wrapper {
        height: 250px;
        border-radius: 8px;
    }
    
    .secondary-cctv-wrapper {
        height: 250px !important;
        border-radius: 8px;
    }
    
    .cctv-header-layer {
        padding: 12px 15px;
    }
    
    .cctv-header-layer h1 {
        font-size: 20px;
    }
    
    .ananda-title {
        font-size: 18px;
    }

    .ananda-caption{
        margin-bottom: -30px;
    }
    
    .ananda-captions {
        margin-left: 10px;
        margin-right: 10px;
        font-size: 13px;
    }
    
    .contact-icon {
        width: 35px;
        height: 35px;
    }
    
    .speech {
        width: 140px;
        font-size: 11px;
        padding: 8px;
        top: 1060px;
        left: 52%;
        height: 80px;
    }

    .speech2 {
        width: 140px;
        font-size: 11px;
        padding: 8px;
        top: 1060px;
        left: 78%;
        height: 80px;
    }
}

/* Small Mobile (380px - 390px) */
@media (min-width: 380px) and (max-width: 390px) {
    .cctv-header-layer {
        padding: 12px 16px;
    }
    
    .cctv-header-layer h1 {
        font-size: 20.5px;
    }
    
    .ananda-title {
        font-size: 18.5px;
    }
    
    .ananda-captions {
        font-size: 13.5px;
    }
    
    .contact-icon {
        width: 36px;
        height: 36px;
    }
    
    .speech {
        width: 145px;
        left: 53%;
        margin-top: -160px;
    }
    
    .speech2 {
        width: 145px;
        left: 77%;
        margin-top: -160px;
    }
}

/* Small Mobile (370px - 375px) */
@media (min-width: 370px) and (max-width: 375px) {
    .secondary-cctv-wrapper {
        height: 200px !important;
    }

    .cctv-header-layer h1 {
        font-size: 21px;
    }
    
    .ananda-title {
        font-size: 19px;
    }
    
    .ananda-caption {
        margin-bottom: -32px;
    }
    
    .ananda-captions {
        font-size: 13.5px;
    }
    
    .contact-icon {
        width: 36px;
        height: 36px;
    }
    
    .speech {
        width: 145px;
        left: 52.5%;
    }
    
    .speech2 {
        width: 145px;
        left: 77.5%;
    }
}

@media (min-width: 360px) {
    .secondary-cctv-wrapper {
        height: 200px;
    }
     .ananda-caption{
        margin-bottom: -30px;
    }           
    .speech {
        top: 980px;
    }
    
    .speech2 {
        top: 980px;
    }
}

/* Small Mobile (350px - 360px) */
@media (min-width: 350px) and (max-width: 360px) {
    .cctv-header-layer {
        padding: 11px 14px;
    }
    
    .cctv-header-layer h1 {
        font-size: 19.5px;
    }
    
    .ananda-title {
        font-size: 17.5px;
    }
    
    .ananda-caption {
        margin-bottom: -28px;
    }
    
    .ananda-captions {
        font-size: 12.5px;
    }
    
    .contact-icon {
        width: 34px;
        height: 34px;
    }
    
    .speech {
        width: 135px;
        left: 51%;
        margin-top: -170px;
        height: 78px;
    }
    
    .speech2 {
        width: 135px;
        left: 78%;
        margin-top: -170px;
        height: 78px;
    }
}

/* Extra Small Mobile (320px - 344px) */
@media (min-width: 320px) and (max-width: 344px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 12px auto 35px auto;
    }
    
    .primary-cctv-wrapper {
        height: 240px;
    }
    
    .secondary-cctv-wrapper {
        height: 290px;
    }
    
    .cctv-header-layer {
        padding: 10px 12px;
    }
    
    .cctv-header-layer h1 {
        font-size: 18px;
    }
    
    .ananda-title {
        font-size: 16px;
    }
    
    .ananda-caption {
        margin-bottom: -25px;
    }
    
    .ananda-captions {
        margin-left: 8px;
        margin-right: 8px;
        font-size: 12px;
    }
    
    .contact-icon {
        width: 32px;
        height: 32px;
    }
    
    .speech {
        width: 130px;
        font-size: 10px;
        padding: 7px;
        top: 1065px;
        left: 50%;
        height: 75px;
    }
    
    .speech2 {
        width: 130px;
        font-size: 10px;
        padding: 7px;
        top: 1065px;
        left: 80%;
        height: 75px;
    }
}



/* MODAL PART */

        .header {
            padding: 40px;
            margin-bottom: 30px;
            border-radius: 8px;
        }

        .header h1 {
            font-family: Lexend, sans-serif;
            font-weight: 600;
            font-style: Light;
            font-size: 50px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            text-align: center;
        }

        .header p {
            font-family: Space Grotesk, sans-serif;
            font-weight: 400;
            font-style: Regular;
            font-size: 32px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            text-align: center;
            color: white;

        }

        .gallery-installation {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            width: 1300px;
            margin-left: -70px;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s ease;
            aspect-ratio: 16/9;
        }

        .gallery-item:hover {
            transform: scale(1.02);
            box-shadow: 
        /* Deep Red Shadow */
        5px 5px 5px #A80606, 
        
        /* Orange-Brown Shadow (offset a bit less) */
        5px 5px 5px #C3631F,
        
        /* Bright Red/Pink Shadow (offset a bit more) */
        5px 5px 5px #EA3838;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Modal/Lightbox */
        .modal {
            display: none;
            position: fixed;
            top: 7%;
            left: 9%;
            width: 100%;
            height: 100%;
            z-index: 1000;
            animation: fadeIn 0.3s ease;
            cursor: pointer;
        }

        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            position: relative;
            max-width: 70%;
            max-height: 90%;
            animation: zoomIn 0.3s ease;
            background: transparent;
            margin-top: -150px;
        }

        .modal-content img {
            width: 75%;
            height: auto;
            max-height: 65vh;
            object-fit: cover;
            border-radius: 8px;
        }

        .modal-caption {
            background: linear-gradient(135deg, #c62828 0%, #ff6f00 100%);
            padding: 10px 10px;
            margin-top: 440px;
            border-radius: 8px;
            text-align: center;
            position: absolute;
            width: 75%;

            font-family: Space Grotesk;
            font-weight: 400;
            font-style: Regular;
            font-size: 1.5rem;
        }

        .modal-caption h2 {
            font-size: 2rem;
            margin-bottom: 10px;

            font-family: Lexend, sans-serif;
            font-weight: 600;
            font-style: Regular;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
        }

        .close-btn {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 40px;
            color: #fff;
            cursor: pointer;
            z-index: 1001;
            transition: color 0.3s ease;
        }

        .close-btn:hover {
            color: #ff6f00;
        } 

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes zoomIn {
            from { 
                opacity: 0;
                transform: scale(0.8);
            }
            to { 
                opacity: 1;
                transform: scale(1);
            }
        }

       

/* Responsive Design */

/* Large Desktops (1200px - 1400px) */
@media (max-width: 1300px) {
    .header h1 {
        font-size: 45px;
    }
    
    .header p {
        font-size: 28px;
    }

    .gallery-installation{
        max-width: 1100px;
        margin-left: 40px;
    }
        
}

/* Standard Desktops (992px - 1200px) */
@media (max-width: 1200px) {
    .martin-section {
        padding: 30px 15px;
    }
    
    .header {
        padding: 25px;
        margin-bottom: 25px;
    }
    
    .header h1 {
        font-size: 40px;
        margin-bottom: 40px;
    }
    
    .header p {
        font-size: 24px;
        line-height: 1.5;
    }
    
    .gallery-installation {
        gap: 18px;
        margin: auto;
        width: 900px;
    }
    
    .modal-content {
        width: 100%;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 820px;
        margin-top: -230px;
        margin-left: -150px;
    }
    
    .modal-caption {
        margin-top: 210px;
        width: 820px;
        margin-left: -150px;
    }
    
    .modal-caption h2 {
        font-size: 1.9rem;
        margin-bottom: 8px;
        margin-left: 40px;
    }
    
    .modal-caption p {
        font-size: 1.4rem;
        line-height: 1;
        margin-left: 10px;
    }
}


@media (max-width: 1024px) {
    .martin-section {
        padding: 30px 15px;
    }
    
    .header {
        padding: 25px;
        margin-bottom: 25px;
    }
    
    .header h1 {
        font-size: 40px;
        margin-bottom: 40px;
    }
    
    .header p {
        font-size: 24px;
        line-height: 1.5;
    }
    
    .gallery-installation {
        gap: 18px;
        margin: auto;
        width: 900px;
    }
    
    .modal-content {
        margin-top: 150px;
        width: 100%;
        margin-left: 130px;
    }
    
    .modal-content img {
        max-height: 90vh;
        width: 700px;
        margin-top: -230px;
        margin-left: -150px;
    }
    
    .modal-caption {
        margin-top: 80px;
        width: 700px;
        margin-left: -150px;
    }
    
    .modal-caption h2 {
        font-size: 1.5rem;
        margin-bottom: 8px;
        margin-left: 40px;
    }
    
    .modal-caption p {
        font-size: 1.2rem;
        line-height: 1;
        margin-left: 10px;
    }
}


/* Tablets Landscape (768px - 992px) */
@media (max-width: 992px) {
    .martin-section {
        padding: 25px 15px;
    }
    
    .header {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .header h1 {
        font-size: 36px;
    }
    
    .header p {
        font-size: 20px;
        line-height: 1.5;
    }
    
    .gallery-installation {
        gap: 15px;
        width: 600px;
    }
    
    .modal-content {
        width: 100%;
        margin-left: 160px;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 600px;
        margin-top: -230px;
        margin-left: -160px;
    }
    
    .modal-caption {
        padding: 18px;
        width: 600px;
        margin-top: 70px;
        margin-left: -160px;
    }
    
    .modal-caption h2 {
        font-size: 1.3em;
        margin-left: 10px;
    }
    
    .modal-caption p {
        font-size: 1rem;
        margin-left: 10px;
    }
}

/* Tablets Portrait (576px - 768px) */
@media (max-width: 768px) {
    .martin-section {
        padding: 20px 10px;
        width: 100%;
    }
    
    .header {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .header h1 {
        font-size: 32px;
        margin-bottom: 15px;
    }
    
    .header p {
        font-size: 18px;
        line-height: 1.6;
    }
    
    .gallery-installation {
        grid-template-columns: 1fr;
        gap: 15px;
        width: 600px;
    }
    
    .modal-content {
        width: 100%;
        margin-left: 160px;

    }
    
    .modal-content img {
        max-height: 100vh;
        width: 600px;
        margin-top: -200px;
        margin-left: -180px;
    }
    
    .modal-caption {
        margin-top: 120px;
        width: 600px;
        margin-left: -180px;
    }
    
    .modal-caption h2 {
        font-size: 1.5em;
        margin-bottom: 8px;
        margin-left: 10px;
    }
    
    .modal-caption p {
        font-size: 1rem;
        line-height: 1.5;
        margin-left: 10px;
    }
}

/* Mobile Devices (400px - 576px) */
@media (max-width: 576px) {
    .martin-section {
        padding: 15px 10px;
    }
    
    .header {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .header h1 {
        font-size: 28px;
        margin-bottom: 35px;
    }
    
    .header p {
        font-size: 16px;
        line-height: 1.6;
    }
    
    .gallery-installation {
        gap: 12px;
        width: 350px;
    }
    
    .modal {
        padding: 15px;
        margin-left: -30px;
    }
    
    .modal-content {
        width: 100%;
        margin-left: 210px;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 350px;
        margin-top: -230px;
        margin-left: -150px;
    }
    
    .modal-caption {
        margin-top: -30px;
        width: 350px;
        margin-left: -150px;
    }
    
    .modal-caption h2 {
        font-size: 1rem;
        margin-bottom: 8px;
        margin-left: -5px;
    }
    
    .modal-caption p {
        font-size: 0.8rem;
        line-height: 1;
        margin-left: -10px;
        margin-bottom: 1px;
    }
    
    .gallery-item:hover {
        transform: scale(1.01);
    }
}

@media (max-width: 430px) {
    .martin-section {
        padding: 10px 8px;
        max-width: 100%;
    }
    
    .header {
        padding: 10px;
        margin-bottom: 12px;
    }
    
    .header h1 {
        font-size: 24px;
        margin-bottom: 50px;
    }
    
    .header p {
        font-size: 14px;
        line-height: 1.7;
    }
    
    .gallery-installation {
        gap: 10px;
        width: 300px;
    }
    
    .modal-content {
        width: 100%;
        margin-left: 133px;
        margin-top: 50px;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 300px;
        margin-top: -220px;
        margin-left: -100px;
    }
    
    .modal-caption {
        margin-top: -80px;
        width: 300px;
        margin-left: -100px;
    }
    
    .modal-caption h2 {
        font-size: 1rem;
        margin-bottom: 8px;
        margin-left: -5px;
    }
    
    .modal-caption p {
        font-size: 0.8rem;
        line-height: 1;
        margin-bottom: 1px;
        margin-left: -5px;
    }
}

/* Small Mobile Devices (320px - 400px) */
@media (max-width: 400px) {
    .martin-section {
        padding: 10px 8px;
        max-width: 100%;
    }
    
    .header {
        padding: 10px;
        margin-bottom: 12px;
    }
    
    .header h1 {
        font-size: 24px;
        margin-bottom: 50px;
    }
    
    .header p {
        font-size: 14px;
        line-height: 1.7;
    }
    
    .gallery-installation {
        gap: 10px;
        width: 300px;
    }
    
    .modal-content {
        width: 100%;
        margin-left: 113px;
        margin-top: 50px;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 300px;
        margin-top: -220px;
        margin-left: -100px;
    }
    
    .modal-caption {
        margin-top: -80px;
        width: 300px;
        margin-left: -100px;
    }
    
    .modal-caption h2 {
        font-size: 1rem;
        margin-bottom: 8px;
        margin-left: -5px;
    }
    
    .modal-caption p {
        font-size: 0.8rem;
        line-height: 1;
        margin-bottom: 1px;
        margin-left: -5px;
    }
}

/* Extra Small Devices (below 320px) */
@media (max-width: 320px) {
    .header h1 {
        font-size: 20px;
        margin-bottom: 30px;
    }

    
    .header p {
        font-size: 13px;
    }
    
    .modal-caption h2 {
        font-size: 0.9em;
    }
    
    .modal-caption p {
        font-size: 0.75rem;
    }
}

/* ==============================================
   GALLERY ITEM ANIMATIONS
   ============================================== */

/* Initial hidden state for gallery items */
.gallery-item {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Visible state when in viewport */
.gallery-item.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered animation delay for each gallery item */
.gallery-item:nth-child(1).animate-in {
    animation: slideInGallery 0.6s ease-out 0.1s backwards;
}

.gallery-item:nth-child(2).animate-in {
    animation: slideInGallery 0.6s ease-out 0.2s backwards;
}

.gallery-item:nth-child(3).animate-in {
    animation: slideInGallery 0.6s ease-out 0.3s backwards;
}

.gallery-item:nth-child(4).animate-in {
    animation: slideInGallery 0.6s ease-out 0.4s backwards;
}

/* Keyframe for slide in animation */
@keyframes slideInGallery {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Exit animation when leaving section */
.gallery-item.animate-out {
    animation: slideOutGallery 0.4s ease-in forwards;
}

@keyframes slideOutGallery {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
}

/* Header animations */
.martin-section .header {
    opacity: 100%;
    transform: translateY(30px);
}

.martin-section .header.animate-in {
    animation: fadeInHeader 0.8s ease-out forwards;
}

@keyframes fadeInHeader {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.martin-section .header.animate-out {
    animation: fadeOutHeader 0.4s ease-in forwards;
}

@keyframes fadeOutHeader {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Enhanced hover effect with animation */
.gallery-item.animate-in:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 
        /* Deep Red Shadow */
        0 15px 30px rgba(168, 6, 6, 0.4), 
        /* Orange-Brown Shadow */
        0 10px 20px rgba(195, 99, 31, 0.3),
        /* Bright Red/Pink Shadow */
        0 5px 10px rgba(234, 56, 56, 0.2);
}

/* Smooth transition back to normal state */
.gallery-item.animate-in {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal animation improvements */
.modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal.active {
    opacity: 1;
    pointer-events: auto;
}

.modal.active .modal-content {
    animation: modalZoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalZoomIn {
    from { 
        opacity: 0;
        transform: scale(0.7) translateY(50px);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Modal caption slide up */
.modal.active .modal-caption {
    animation: captionSlideUp 0.5s ease-out 0.2s backwards;
}

@keyframes captionSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

@media (max-width: 768px) {
    .gallery-item {
        transform: translateY(30px) scale(0.95);
    }
    
    @keyframes slideInGallery {
        from {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    /* Faster animations on mobile */
    .gallery-item:nth-child(1).animate-in {
        animation-delay: 0.05s;
    }
    
    .gallery-item:nth-child(2).animate-in {
        animation-delay: 0.1s;
    }
    
    .gallery-item:nth-child(3).animate-in {
        animation-delay: 0.15s;
    }
    
    .gallery-item:nth-child(4).animate-in {
        animation-delay: 0.2s;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .gallery-item,
    .martin-section .header,
    .modal-content,
    .modal-caption {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }
    
    .gallery-item.animate-in,
    .martin-section .header.animate-in {
        opacity: 1;
        transform: none;
    }
}



/* FEEDBACK SECTION */

.finish-feedback {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:"visual content" "button button";
   
    gap: 10px;
    max-width: 1800px;
    margin: 170px auto;
    padding: 0 0;
    align-items: start;
}

    .finish-feedback.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .finish-feedback.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }


.finish-feedback-text {
    grid-area: content;
    padding-right: 70px;
    margin-top: 40px;

}

.finish-header {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 40px;
    margin-top: 20px;
}

.finish-client-quote {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;
}

.client-qoute {
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    margin-left: 470px;
    margin-top: -63px;
    margin-bottom: 50px;
}

.finish-stars-container .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    display: contents;

        
    /* 💥 CRITICAL FIX: Ensures the icon is an individual block element 
       so the text-shadow property can be animated correctly. */
    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .finish-stars-container :hover {
        transform: translateY(-5px) scale(1.05);
}

    .finish-stars-container :hover {
        transform: translateY(-5px) scale(1.05);
    }

.item-finish-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    padding: auto;
    margin-left: 60px;
   
    /* Placeholder for the image */
    background-image: url(https://www.mhzav.com/wp-content/uploads/2024/10/What-Is-a-PA-System.webp); /* REPLACE with your actual image path or URL */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 700px;
}


/* Responsive Design */

/* Large Desktops (1200px - 1400px) */
@media (max-width: 1400px) {
    .finish-feedback {
        max-width: 1000px;
        gap: 30px;
        margin-left: -100px;
    }
    
    .finish-header {
        font-size: 45px;
    }
    
    .finish-client-quote {
        font-size: 28px;
        max-width: 70%;
        justify-content: center;
    }
    
    .finish-feedback-text {
        padding-right: 30px;
    }

    .client-qoute {
        margin-right: -90px;
    }
}

/* Desktops (1200px - 1280px) */
@media (min-width: 1200px) and (max-width: 1280px) {
    .finish-feedback {
        max-width: 950px;
        gap: 28px;
        margin-left: -95px;
    }
    
    .finish-header {
        font-size: 42px;
    }
    
    .finish-client-quote {
        font-size: 27px;
    }
    
    .finish-feedback-text {
        padding-right: 35px;
    }
}

/* Standard Desktops (992px - 1200px) */
@media (max-width: 1200px) {
    .finish-feedback {
        margin: 100px auto;
        gap: 5px;
    }
    
    .item-finish-visual {
        min-height: 450px;
        margin-left: -90px;
    }

    .finish-feedback-text{
        padding-right: 80px;
    }
    
    .finish-header {
        font-size: 40px;
        margin-bottom: 25px;
    }
    
    .finish-client-quote {
        font-size: 26px;
        margin-bottom: 25px;
    }
    
    .client-qoute {
        font-size: 18px;
        margin: 20px;
        margin-left: 90px;
    }
    
    .finish-feedback-text {
        padding-right: 30px;
        margin-left: -60px;
        margin-top: 0px;
    }
    
    .finish-stars-container .fas {
        margin-top: 10px;
    }
}

/* Desktops (1000px - 1024px) */
@media (min-width: 1000px) and (max-width: 1024px) {
    .finish-feedback {
        margin: 95px auto;
        gap: 10px;
    }
    
    .item-finish-visual {
        min-height: 440px;
        margin-left: -85px;
    }
    
    .finish-header {
        font-size: 39px;
    }
    
    .finish-client-quote {
        font-size: 25px;
    }
}

/* Tablets Landscape (980px - 992px) */
@media (min-width: 980px) and (max-width: 992px) {
    .finish-feedback {
        margin: 85px auto;
        gap: 18px;
    }
    
    .item-finish-visual {
        min-height: 410px;
    }
    
    .finish-header {
        font-size: 37px;
    }
    
    .finish-client-quote {
        font-size: 25px;
    }
}

/* Tablets Landscape (768px - 992px) */
@media (max-width: 992px) {
    .finish-feedback {
        margin: 80px auto;
        gap: 20px;
        padding: 0 15px;
    }
    
    .item-finish-visual {
        min-height: 400px;
    }
    
    .finish-header {
        font-size: 36px;
        margin-bottom: 20px;
    }
    
    .finish-client-quote {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }
    
    .client-qoute {
        font-size: 17px;
    }
    
    .finish-feedback-text {
        padding-right: 20px;
    }
    
    .finish-stars-container .fas {
        margin-top: 20px;
        font-size: 19px;
    }
}

/* Tablets (900px - 912px) */
@media (min-width: 900px) and (max-width: 912px) {
    .finish-feedback {
        margin: 75px auto;
        gap: 22px;
    }
    
    .item-finish-visual {
        min-height: 390px;
    }
    
    .finish-header {
        font-size: 35px;
    }
    
    .finish-client-quote {
        font-size: 23px;
    }
}

/* Tablets (840px - 853px) */
@media (min-width: 840px) and (max-width: 853px) {
    .finish-feedback {
        margin: 70px auto;
        gap: 24px;
    }
    
    .item-finish-visual {
        min-height: 380px;
    }
    
    .finish-header {
        font-size: 34px;
    }
    
    .finish-client-quote {
        font-size: 23px;
    }
}

/* Tablets (800px - 820px) */
@media (min-width: 800px) and (max-width: 820px) {
    .finish-feedback {
        margin: 68px auto;
        gap: 90px;
    }
    
    .item-finish-visual {
        width: 400px !important;
        margin-left: 40px;
    }
    
    .finish-header {
        font-size: 33px;
    }
    
    .finish-client-quote {
        font-size: 22px;
    }
}

/* Tablets Portrait (750px - 768px) */
@media (min-width: 750px) and (max-width: 768px) {
    .finish-feedback {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "content"
            "button"
            "visual";
        margin: 65px auto !important;
        gap: 28px;
    }
    
    .item-finish-visual {
        min-height: 360px;
        max-width: 550px;
        margin: -50px;
    }
    
    .finish-header {
        font-size: 33px;
        text-align: center;
        margin-left: 7%;
    }
    
    .finish-client-quote {
        font-size: 23px;
        text-align: center;
        margin-left: 20%;
    }
}

/* Tablets Portrait (576px - 768px) */
@media (max-width: 768px) {
    .finish-feedback {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "content"
            "button"
            "visual";
        margin: 60px auto;
        gap: 30px;
        padding: 0 15px;
    }

    .finish-feedback{
        margin-left: -100px;
    }
    
    .item-finish-visual {
        min-height: 350px;
        width: 90%;
        margin-left: 100px;
    }
    
    .finish-feedback-text {
        padding-right: 0;
        text-align: center;
    }
    
    .finish-header {
        font-size: 32px;
        margin-bottom: 20px;
        text-align: center;
        margin-left: 7%;
    }
    
    .finish-client-quote {
        font-size: 22px;
        line-height: 1.6;
        margin-bottom: 20px;
        text-align: center;
        margin-left: 20%;
    }
    
    .client-qoute {
        font-size: 16px;
        text-align: center;
        margin-bottom: 15px;
        margin-left: 7%;
    }
    
    .finish-stars-container {
        justify-content: center;
        margin-top: 20px;
        margin-left: 6%;
    }
    
    .finish-stars-container .fas {
        margin-top: 20px;
        font-size: 20px;
    }
}

/* Mobile Devices (400px - 576px) */
@media (max-width: 576px) {
    .finish-feedback {
        margin: 40px auto;
        gap: 20px;
        padding: 0 15px;
        margin-left: 20px;
    }
    
    .item-finish-visual {
        min-height: 300px;
        margin-left: 10px;
    }

    .finish-feedback-text {
        margin-right: auto;
    }
    
    .finish-header {
        font-size: 28px;
        margin-bottom: 18px;
        line-height: 1.2;
    }
    
    .finish-client-quote {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 18px;
    }
    
    .client-qoute {
        font-size: 15px;
        margin-bottom: 12px;
    }
    
    .finish-stars-container {
        margin-top: 12px;
        gap: 4px;
    }
    
    .finish-stars-container .fas {
        margin-top: 20px;
        font-size: 18px;
    }
}

/* Larger Mobile (500px - 540px) */
@media (min-width: 500px) and (max-width: 540px) {
    .finish-feedback {
        margin: 45px auto;
        gap: 22px;
        margin-left: 25px;
    }
    
    .item-finish-visual {
        min-height: 310px;
        margin-left: 15px;
    }
    
    .finish-header {
        font-size: 29px;
    }
    
    .finish-client-quote {
        font-size: 19px;
    }
}

/* Mobile (420px - 430px) */
@media (min-width: 420px) and (max-width: 430px) {
    .finish-feedback {
        margin: 38px auto;
        gap: 20px;
        margin-left: 22px;
    }
    
    .item-finish-visual {
        min-height: 290px;
        margin-left: 12px;
        margin-top: -130px;
    }
    
    .finish-header {
        font-size: 27px;
    }
    
    .finish-client-quote {
        font-size: 17.5px;
    }
}

/* Mobile (413px - 414px) */
@media (min-width: 413px) and (max-width: 414px) {
    .finish-feedback {
        margin: 36px auto;
        gap: 20px;
        margin-left: 21px;
    }
    
    .item-finish-visual {
        min-height: 285px;
        margin-left: 11px;
        margin-top: -130px;
    }
    
    .finish-header {
        font-size: 26.5px;
    }
    
    .finish-client-quote {
        font-size: 17px;
    }
}

/* Mobile (400px - 412px) */
@media (min-width: 400px) and (max-width: 412px) {
    .finish-feedback {
        margin: 35px auto;
        gap: 20px;
        margin-left: 21px;
    }
    
    .item-finish-visual {
        min-height: 280px;
        margin-left: 11px;
        margin-top: -130px;
    }
    
    .finish-header {
        font-size: 26px;
    }
    
    .finish-client-quote {
        font-size: 17px;
    }
}

/* Small Mobile Devices (320px - 400px) */
@media (max-width: 400px) {
    .finish-feedback {
        margin-top: 30px;
        gap: 20px;
        padding: 0 10px;
    }
    
    .item-finish-visual {
        min-height: 250px;
        margin-top: -100px;
    }
    
    .finish-header {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .finish-feedback-text{
        text-align: center;
        justify-content: center;
        margin: auto;
    }
    
    .finish-client-quote {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 15px;
    }
    
    .client-qoute {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .finish-stars-container {
        margin-top: 20px;
        gap: 3px;
    }
    
    .finish-stars-container .fas {
        font-size: 16px;
    }
}

/* Small Mobile (380px - 390px) */
@media (min-width: 380px) and (max-width: 390px) {
    .finish-feedback {
        margin-top: 32px;
        gap: 20px;
        margin-left: -40px;
    }
    
    .item-finish-visual {
        min-height: 260px;
        margin-top: -100px;
        margin-left: 40px;
    }
    
    .finish-header {
        font-size: 25px;
    }
    
    .finish-client-quote {
        font-size: 16.5px;
    }
}

/* Small Mobile (370px - 375px) */
@media (min-width: 370px) and (max-width: 375px) {
    .finish-feedback {
        margin-top: 31px;
        gap: 20px;
        margin-left: -40px;
    }
    
    .item-finish-visual {
        min-height: 255px;
        max-width: 300px;
        margin-top: -150px;
        margin-left: 70px;
    }
    
    .finish-header {
        font-size: 24.5px;
    }
    
    .finish-client-quote {
        font-size: 16px;
    }
}

/* Small Mobile (350px - 360px) */
@media (min-width: 350px) and (max-width: 360px) {
    .finish-feedback {
        margin-top: 30px;
        gap: 20px;
        margin-left: -30px;
    }
    
    .item-finish-visual {
        min-height: 245px;
        margin-top: -150px;
        margin-left: 33px;
    }
    
    .finish-header {
        font-size: 23.5px;
    }
    
    .finish-client-quote {
        font-size: 15.5px;
    }
    
    .client-qoute {
        font-size: 13.5px;
    }
}

/* Extra Small Devices (below 320px) */
@media (max-width: 320px) {
    .item-finish-visual {
        min-height: 200px;
    }
    
    .finish-header {
        font-size: 22px;
    }
    
    .finish-client-quote {
        font-size: 15px;
    }
    
    .client-qoute {
        font-size: 13px;
    }
    
    .finish-stars-container .fas {
        margin-top: 20px;
        font-size: 15px;
    }
}

/* Extra Small Mobile (320px - 344px) */
@media (min-width: 321px) and (max-width: 344px) {
    .item-finish-visual {
        min-height: 220px;
        margin-top: -105px;
    }
    
    .finish-header {
        font-size: 23px;
    }
    
    .finish-client-quote {
        font-size: 15px;
    }
    
    .client-qoute {
        font-size: 13px;
    }
    
    .finish-stars-container .fas {
        font-size: 15.5px;
    }
}




/* Mobile Form Homepage*/
/* Mobile Form Styles */
        .mobile-form {
            display: none;
        }

        .mobile-form-container {
            padding: 20px;
            background: rgb(8, 8, 8);
            border-radius: 10px;
            margin: 0 15px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
            padding: 2px;
            background: linear-gradient(90deg, 
                #ff0000, #ff7700, #ffff00, #00ff00, 
                #0000ff, #4b0082, #9400d3, #ff0000);
            background-size: 200% 200%;
            animation: rainbowBorder 3s linear infinite;
        }

        .mobile-form-container::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            border-radius: 8px;
            background: rgb(8, 8, 8);
            z-index: 1;
        }

        .mobile-form-content {
            position: relative;
            z-index: 2;
            padding: 20px;
        }

        .send-us-mobile h2 {
            color: #FFF;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
            text-align: center;
        }

        .mobile-field-container {
            margin-bottom: 20px;
        }

        .mobile-field-container label {
            display: block;
            color: #FFF;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
            font-family: 'Space Grotesk', sans-serif;
        }

        .mobile-field-container input,
        .mobile-field-container textarea {
            width: 100%;
            padding: 12px 15px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: #FFF;
            font-size: 16px;
            font-family: 'Space Grotesk', sans-serif;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .mobile-field-container input::placeholder,
        .mobile-field-container textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .mobile-field-container input:focus,
        .mobile-field-container textarea:focus {
            outline: none;
            border-color: #f85858;
            background: rgba(255, 255, 255, 0.15);
        }

        .mobile-field-container textarea {
            min-height: 120px;
            resize: vertical;
        }

        .mobile-action-button {
            width: 100%;
            padding: 15px;
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
            border: none;
            border-radius: 8px;
            color: #FFF;
            font-size: 16px;
            font-weight: 600;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .mobile-action-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(248, 88, 88, 0.4);
        }

        .mobile-contact-info {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .mobile-info-item {
            margin-bottom: 20px;
        }

        .mobile-info-item h3 {
            color: #FFF;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            font-family: 'Space Grotesk', sans-serif;
        }

        .mobile-info-item p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 5px 0;
            font-family: 'Lexend', sans-serif;
        }

        /* Responsive behavior - hide desktop form on mobile */
        @media (max-width: 768px) {
            .desktop-form {
                display: none !important;
            }
            
            .mobile-form {
                display: block !important;
            }

            .contactForm {
                padding: 40px 0 !important;
            }

            .title-contactForm {
                font-size: 32px !important;
                text-align: center;
                margin-bottom: 20px;
            }

            .title-contactDes {
                font-size: 16px !important;
                text-align: center;
                padding: 0 20px;
                line-height: 1.5;
            }

        }

        .contactForm {
            padding: 40px 0 !important;
        }

        .title-contactForm {
            font-size: 32px !important;
            text-align: center;
            margin-bottom: 20px;
        }

        /* Rainbow border animation */
        @keyframes rainbowBorder {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }


        /* About Us Page Internal CSS - Should be scoped to about page only */
        /* Removed global overrides that were affecting contact form width */
        .mission-vision-wrapper {
            background: #0a0a0a;
            padding: 80px 20px;
            position: relative !important;
            overflow: visible;
        }
        .reach-us-main-container {
            margin: 0 auto 60px !important;
            margin-bottom: 60px !important;
            clear: both !important;
        }
        .mission-vision-container {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 40px !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .details-panel-wrapper h2 {
            color: #ffffff !important;
            margin: 0 0 20px 0 !important;
            padding: 0 !important;
            text-indent: 0 !important;
        }
        .details-panel-wrapper p {
            color: #e0e0e0 !important;
            line-height: 1.6 !important;
        }
        .join-team-section {
            position: relative !important;
            z-index: 1 !important;
            margin-top: 0 !important;
        }
        .main-content {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }
        /* Hide team section */
        .team-intro,
        .team-desc,
        .team-wrapper,
        .leaders-group,
        .admin-group,
        .marketing-group,
        .technicians-group,
        .developers-group {
            display: none !important;
        }
        
        /* Mobile responsive for mission and vision cards */
        @media (max-width: 767px) {
            .mission-vision-container {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
            }
        }
        
        /* Logo glow animation */
        @keyframes logoGlow {
            from {
                filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
            }
            to {
                filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.3));
            }
        }
        
        /* Logo entrance animation */
        @keyframes logoEntrance {
            0% {
                opacity: 0;
                transform: scale(0.3) translateY(30px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        /* Heading entrance animations */
        @keyframes headingEntrance {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes subtitleEntrance {
            0% {
                opacity: 0;
                transform: translateY(15px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .about-v2-hero-logo {
            animation: logoEntrance 1.5s ease-out forwards, logoGlow 3s ease-in-out 1.5s infinite alternate;
        }
        
        .about-v2-hero-heading h1 {
            opacity: 0;
            animation: headingEntrance 1s ease-out 1.2s forwards;
        }
        
        .about-v2-hero-heading p {
            opacity: 0;
            animation: subtitleEntrance 0.8s ease-out forwards;
        }
        
        .about-v2-hero-heading p:nth-of-type(1) {
            animation-delay: 1.4s;
        }
        
        .about-v2-hero-heading p:nth-of-type(2) {
            animation-delay: 1.6s;
        }
        
        /* Modern About Section Styles */
        .btn-primary-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(248, 88, 88, 0.3);
        }
        
        .btn-secondary-modern:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
        }
        
        .feature-item:hover .feature-icon {
            transform: scale(1.1);
            transition: transform 0.3s ease;
        }
        
        /* Responsive for mobile */
        @media (max-width: 768px) {
            
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn-primary-modern,
            .btn-secondary-modern {
                width: 100%;
                text-align: center;
            }
            
        }
        
        
        /* Vision section responsive styles */
        @media (max-width: 768px) {
            
        }
        
        /* Mobile responsive - Hide About Us section image */
        @media (max-width: 768px) {
            .about-v2-modern-section .modern-about-image-wrapper {
                display: none !important;
            }
            
            .about-v2-modern-section .col-lg-6:first-child {
                display: none !important;
            }
            
            .about-v2-modern-section .col-lg-6:last-child {
                flex: 0 0 100% !important;
                max-width: 100% !important;
            }
            
            /* Make buttons horizontal on mobile */
            .about-v2-modern-section .about-v2-action-buttons {
                display: flex !important;
                flex-direction: row !important;
                gap: 1rem !important;
                justify-content: center !important;
                flex-wrap: wrap !important;
            }
            
            .about-v2-modern-section .about-v2-action-buttons a {
                flex: 1 !important;
                min-width: 120px !important;
                max-width: 200px !important;
                text-align: center !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            
            /* Mission section - move icons to left on mobile */
            .about-v2-mission-section .about-v2-value-item {
                flex-direction: row !important;
                text-align: left !important;
                justify-content: flex-start !important;
            }
            
            .about-v2-mission-section .about-v2-value-item .about-v2-value-icon {
                order: -1 !important;
                margin-right: 1rem !important;
                margin-left: 0 !important;
                margin-bottom: 0 !important;
            }
            
            .about-v2-mission-section .about-v2-value-item .about-v2-value-text {
                text-align: left !important;
                flex: 1 !important;
                order: 1 !important;
            }
            
            /* Hide Mission section image on mobile */
            .about-v2-mission-section .mission-image-wrapper {
                display: none !important;
            }
            
            .about-v2-mission-section .col-lg-6.order-lg-2 {
                display: none !important;
            }
            
            .about-v2-mission-section .col-lg-6.order-lg-1 {
                flex: 0 0 100% !important;
                max-width: 100% !important;
            }
            
            /* Hide Vision section image on mobile */
            .about-v2-vision-section .vision-image-wrapper {
                display: none !important;
            }
            
            .about-v2-vision-section .col-lg-6:first-child {
                display: none !important;
            }
            
            .about-v2-vision-section .col-lg-6:last-child {
                flex: 0 0 100% !important;
                max-width: 100% !important;
            }
            
            /* Remove black hole fade-in animation on mobile */
            .blackhole-hero-container {
                opacity: 1 !important;
                animation: none !important;
            }
            
            .blackhole-hero-container.initial-load {
                animation: none !important;
            }
            
            .about-v2-hero-heading {
                opacity: 1 !important;
                animation: none !important;
            }
        }
        
        /* Scroll-triggered fade-in animations for About Us section */
        .fade-in-element {
            opacity: 0;
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        
        .fade-in-from-right {
            transform: translateX(50px);
        }
        
        .fade-in-from-left {
            transform: translateX(-50px);
        }
        
        .fade-in-element.visible {
            opacity: 1;
            transform: translateX(0);
        }
        
        .fade-in-element.fade-out {
            opacity: 0;
            transition: opacity 0.3s ease-in, transform 0.3s ease-in;
        }
        
        .fade-in-element.fade-out.fade-in-from-right {
            transform: translateX(120px);
        }
        
        .fade-in-element.fade-out.fade-in-from-left {
            transform: translateX(-120px);
        }
        
        /* Stagger animation for feature items */
        .about-v2-feature-item {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .about-v2-feature-item.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .about-v2-feature-item.fade-out {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.2s ease-in, transform 0.2s ease-in;
        }
        
        .about-v2-feature-item:nth-child(1) { transition-delay: 0.1s; }
        .about-v2-feature-item:nth-child(2) { transition-delay: 0.2s; }
        .about-v2-feature-item:nth-child(3) { transition-delay: 0.3s; }
        .about-v2-feature-item:nth-child(4) { transition-delay: 0.4s; }
        
        /* Enhanced fade-out for image wrappers */
        .modern-about-image-wrapper.fade-in-element.fade-out {
            transform: translateX(150px) scale(0.95);
            transition: opacity 0.25s ease-in, transform 0.25s ease-in;
        }
        
        .mission-image-wrapper.fade-in-element.fade-out {
            transform: translateX(150px) scale(0.95);
            transition: opacity 0.25s ease-in, transform 0.25s ease-in;
        }
        
        .vision-image-wrapper.fade-in-element.fade-out {
            transform: translateX(150px) scale(0.95);
            transition: opacity 0.25s ease-in, transform 0.25s ease-in;
        }
        
        /* Stagger animation for mission value items */
        .about-v2-value-item {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .about-v2-value-item.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .about-v2-value-item.fade-out {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.2s ease-in, transform 0.2s ease-in;
        }
        
        .about-v2-value-item:nth-child(1) { transition-delay: 0.1s; }
        .about-v2-value-item:nth-child(2) { transition-delay: 0.2s; }
        .about-v2-value-item:nth-child(3) { transition-delay: 0.3s; }
        
        /* Stagger animation for vision pillar items */
        .about-v2-pillar-item {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .about-v2-pillar-item.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .about-v2-pillar-item.fade-out {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.2s ease-in, transform 0.2s ease-in;
        }
        
        .about-v2-pillar-item:nth-child(1) { transition-delay: 0.1s; }
        .about-v2-pillar-item:nth-child(2) { transition-delay: 0.2s; }
        .about-v2-pillar-item:nth-child(3) { transition-delay: 0.3s; }
        .about-v2-pillar-item:nth-child(4) { transition-delay: 0.4s; }
        
        /* Fix rotating button clickability */
        .rotating-button {
            z-index: 10;
            position: relative;
        }
        
        .rotating-button a {
            z-index: 11;
            pointer-events: auto !important;
            cursor: pointer !important;
        }
        
        .rotating-button a:hover {
            pointer-events: auto !important;
        }
        
        /* Black hole fade-in animation on page load */
        .blackhole-hero-container {
            opacity: 0;
        }
        
        .blackhole-hero-container.fade-out {
            opacity: 0;
            transition: opacity 0.6s ease-in;
        }
        
        .blackhole-hero-container.visible {
            opacity: 1;
            transition: opacity 0.8s ease-out;
        }
        
        .blackhole-hero-container.initial-load {
            animation: blackHoleFadeIn 2s ease-out forwards;
        }
        
        /* Stop black hole animation when not visible */
        .blackhole-hero-container.animation-stopped {
            pointer-events: none;
        }
        
        .blackhole-hero-container.animation-stopped * {
            animation-play-state: paused !important;
            transition: none !important;
        }
        
        @keyframes blackHoleFadeIn {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* Hero content fade-in with delay */
        .about-v2-hero-heading {
            opacity: 0;
            animation: heroContentFadeIn 2.5s ease-out 0.5s forwards;
        }
        
        @keyframes heroContentFadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        
        

/* Homepage Internal CSS */

/* Navbar v2 Styles - Same as about-v2.html */
        .navbar-v2 {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 1000;
            padding: 1rem 0;
            background: transparent;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }
        
        .navbar-v2.scrolled {
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        }
        
        .nav-container {
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        .nav-logo {
            order: 1;
        }
        
        .nav-menu {
            order: 2;
        }
        
        .nav-toggle {
            order: 3;
        }
        
        .nav-logo .logo-img {
            width: 40px;
            height: 40px;
            object-fit: contain;
        }
        
        .nav-menu {
            display: flex;
            gap: 2rem;
            align-items: center;
        }
        
        .nav-link {
            color: #fff !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 6px;
            transition: all 0.3s ease;
            font-family: 'Space Grotesk', sans-serif;
            text-decoration: none;
        }
        
        .nav-link:hover {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
            color: transparent !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
        }
        
        .nav-link.active {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
            color: transparent !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            background-color: transparent !important;
        }
        
        .nav-link.active:hover {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
            color: transparent !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            background-color: transparent !important;
        }
        
        .nav-link:focus {
            outline: none !important;
            outline-offset: 0 !important;
            box-shadow: none !important;
        }
        
        .nav-toggle {
            display: none;
            flex-direction: column;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
        }
        
        .bar {
            width: 25px;
            height: 3px;
            background: white;
            margin: 3px 0;
            transition: 0.3s;
        }
        
        .nav-mobile {
            display: none;
            position: absolute;
            top: calc(100% - 1px);
            left: 0;
            right: 0;
            width: 100%;
            background: #000000;
            backdrop-filter: blur(10px);
            flex-direction: column;
            padding: 0 2rem 3rem;
            gap: 1.5rem;
            margin: 0;
            border: none;
            transform: translateY(-10px);
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            align-items: center;
            justify-content: center;
        }
        
        .nav-mobile.active {
            opacity: 1;
            max-height: 500px;
            transform: translateY(0);
        }
        
        .navbar-v2:not(.scrolled) .nav-mobile {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(2px);
        }
        
        .navbar-v2:not(.scrolled).mobile-active {
            background: #000000 !important;
            backdrop-filter: blur(10px) !important;
            transition: none !important;
        }
        
        .navbar-v2.mobile-active .nav-mobile {
            background: #000000 !important;
            backdrop-filter: blur(10px) !important;
        }
        
        .nav-link-mobile {
            color: #fff !important;
            font-weight: 500;
            font-family: 'Space Grotesk', sans-serif;
            padding: 0.5rem 1rem !important;
            border-radius: 6px;
            transition: all 0.3s ease;
            text-decoration: none;
        }
        
        .nav-link-mobile:hover {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
            color: transparent !important;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: background 0.4s;
            background-color: transparent !important;
            transform: none !important;
        }
        
        .nav-link-mobile.active {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
            color: transparent !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            background-color: transparent !important;
        }
        
        .nav-link-mobile.active:hover {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
            color: transparent !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            background-color: transparent !important;
        }
        
        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }
            
            .nav-toggle {
                display: flex;
            }
            
            .nav-container {
                padding: 0 0.5rem;
                width: 100%;
                max-width: 100vw;
                box-sizing: border-box;
            }
            
            .navbar-v2 {
                padding: 1rem 0;
                box-sizing: border-box;
                left: 0;
                right: 0;
            }
            
            .nav-mobile {
                box-sizing: border-box;
                left: 0;
                right: 0;
                width: 100%;
                max-width: 100vw;
                padding: 0 1rem 2rem;
                transform: translateY(-10px);
                opacity: 0;
                max-height: 0;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                position: absolute;
                align-items: center;
            }
            
            .nav-link {
                color: #fff !important;
                font-weight: 500;
                padding: 0.5rem 1rem !important;
                border-radius: 6px;
                transition: all 0.3s ease;
                font-family: 'Space Grotesk', sans-serif;
                text-decoration: none;
            }
            
            .nav-link:hover {
                background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
                color: transparent !important;
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
                background-clip: text !important;
            }
        }
        
        /* Fix for laptop screens - align Upgrade with your reality */
        @media (min-width: 769px) and (max-width: 1440px) {
            .manual-titleposition {
                left: 4rem !important;
            }
        }
    html, body {
        overflow-x:hidden;
    }

        body{
            margin: 0 !important;
            padding: 0 !important;
        }

        /* Hide What We Offer section on mobile devices */
        @media (max-width: 768px) {
            .hide-on-mobile {
                display: none !important;
            }
            
            /* Show mobile-only section with higher specificity */
            section.mobile-services-section.show-on-mobile {
                display: block !important;
            }
            
            .show-on-mobile {
                display: block !important;
            }
            
            /* Mobile services grid - 2 columns x 4 rows */
            .mobile-services-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                padding: 0 15px;
            }
            
            .mobile-service-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-decoration: none;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 12px;
                padding: 0;
                transition: all 0.3s ease;
                text-align: center;
                position: relative;
                overflow: hidden;
                aspect-ratio: 1;
            }
            
            .mobile-service-card:hover {
                background: rgba(255, 255, 255, 0.1);
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            }
            
            .mobile-service-card img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 12px;
            }
            
            .mobile-service-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 12px;
                z-index: 1;
            }
            
            .mobile-service-card span {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 16px;
                font-weight: 700;
                font-family: 'Space Grotesk', sans-serif;
                text-transform: uppercase;
                letter-spacing: 1px;
                text-align: center;
                padding: 0;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 90%;
                max-width: 90%;
                box-sizing: border-box;
                z-index: 2;
            }
        }
        
        /* Hide mobile section on desktop */
        @media (min-width: 769px) {
            .show-on-mobile {
                display: none !important;
            }
        }

        /* WEB COMPLETED PROJECTS STYLES*/
    .web-project-container {
            padding-top: 0rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .web-project-header {
            text-align: center;
            margin-bottom: 50px;
            color: white;
        }

        .web-project-h1 {
            font-size: 3em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .web-project-subtitle {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .web-project-projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .web-project-project-card {
            background: black;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .web-project-project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.4);
        }

        .web-project-project-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            cursor: pointer;
            transition: opacity 0.3s ease;
        }

        .web-project-project-image:hover {
            opacity: 0.9;
        }

        .web-project-project-content {
            padding: 25px;
        }

        .web-project-project-title {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 10px;
        }

        .web-project-project-description {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .web-project-visit-btn {
            display: inline-block;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 600;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .web-project-visit-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .web-project-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
            justify-content: center;
            align-items: center;
        }

        .web-project-modal-content {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
            border-radius: 10px;
        }

        .web-project-close-modal {
            position: absolute;
            top: 30px;
            right: 50px;
            color: white;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .web-project-close-modal:hover {
            color: #667eea;
        }
        /* WEB COMPLETED PROJECTS RESPONSIVENESS */
        @media (max-width: 768px) {
            .web-project-h1 {
                font-size: 2em;
            }

            .web-project-projects-grid {
                grid-template-columns: 1fr;
            }
        }
         @media (max-width: 480px) {
            body {
                padding: 20px 10px;
            }

            .web-project-h1 {
                font-size: 1.5em;
            }

            .web-project-subtitle {
                font-size: 1em;
            }

            .web-project-projects-grid {
                gap: 20px;
            }

            .web-project-project-image {
                height: 150px;
            }

            .web-project-project-content {
                padding: 15px;
            }

            .web-project-project-title {
                font-size: 1.2em;
            }

            .web-project-project-description {
                font-size: 0.9em;
            }

            .web-project-visit-btn {
                padding: 10px 20px;
                font-size: 0.9em;
            }

            .web-project-close-modal {
                top: 15px;
                right: 20px;
                font-size: 30px;
            }

            .web-project-modal-content {
                max-width: 95%;
                max-height: 80%;
            }
        }

/* Custom CSS for dreampcbuildanditsolutionsinc */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

/* Body and layout adjustments */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000000;
    padding-top: 76px; /* Account for fixed navbar */
}


/* Navigation Styles */
.navbar {
    background-color: #000000 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    width: 100%;
    height: 80px; /* Important: Define navbar height */
}

/* Optional: Remove padding/margin that could cause centering issues */
body, html {
    margin: 0;
    padding: 0;
}

/* Flex container for navbar */
.navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    width: 100%;
}

/* Logo + Text wrapper */
.navbar-brand {
    display: flex;
    align-items: center;
    margin-right: auto; /* Pushes everything else away */
    font-weight: 600;
    font-size: 1.2rem;
    color: #fff !important;
    text-decoration: none;
    transition: none;
    transform: none;
}

/* Logo Image */

/* About v2 Page Styles */
.about-v2-hero-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    text-align: center;
    pointer-events: none;
}
.about-v2-hero-heading h1 {
    color: white;
    font-size: 4rem;
    font-weight: 300;
    margin: 0;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    font-family: 'Lexend', sans-serif;
    letter-spacing: 1px;
}

.about-v2-hero-heading p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    margin: 20px 0 0 0;
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
}

.about-v2-hero-heading p:last-child {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 10px 0 0 0;
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
}

.about-v2-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 150;
    pointer-events: none;
}

.about-v2-black-hole-container {
    margin: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at center, #0a0a1a 0%, #000002 70%);
    color: #e0e0ff;
    width: 100%;
    height: 100%;
}

.about-v2-black-hole-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.about-v2-black-hole-info {
    position: absolute;
    top: 20px;
    width: 100%;
    text-align: center;
    color: rgba(220, 220, 255, 0.9);
    font-size: 18px;
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 100;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
    transition: opacity 2s ease-in-out 1s;
}

.about-v2-ui-panel {
    position: absolute;
    background-image: linear-gradient(145deg, rgba(20, 25, 45, 0.85), rgba(10, 15, 30, 0.9));
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid rgba(180, 180, 220, 0.15);
    color: rgba(225, 225, 255, 0.9);
    font-size: 14px;
    user-select: none;
    z-index: 50;
    transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(180,180,220,0.07) inset;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
}

@keyframes about-v2-panelFadeIn { 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

.about-v2-ui-panel:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(180,180,220,0.09) inset;
}

.about-v2-controls { 
    bottom: 20px; 
    right: 20px; 
}

.about-v2-autoRotateToggle {
    cursor: pointer; 
    padding: 8px 5px; 
    display: flex; 
    align-items: center;
    gap: 8px; 
    color: inherit; 
    font-size: inherit; 
    transition: color 0.2s ease;
}

.about-v2-autoRotateToggle:hover { 
    color: #fff; 
}

.about-v2-autoRotateToggle span { 
    vertical-align: middle; 
}

.about-v2-rotate-icon {
    width: 1.1em; 
    height: 1.1em; 
    stroke: currentColor; 
    stroke-width: 1.8;
    fill: none; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    vertical-align: middle;
}

@media (max-width: 640px) {
    .about-v2-ui-panel { 
        padding: 10px 12px; 
        border-radius: 8px; 
    }
    .about-v2-controls { 
        max-width: 150px; 
    }
    .about-v2-black-hole-info { 
        font-size: 16px; 
        top: 15px; 
    }
    .about-v2-black-hole-info span { 
        font-size: 12px; 
    }
}

/* Aurora Galaxy Video Section */
.about-v2-aurora-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-v2-aurora-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.about-v2-aurora-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.about-v2-aurora-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 20px;
}

.about-v2-aurora-content h2 {
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 20px;
    font-family: 'Lexend', sans-serif;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.about-v2-aurora-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 30px;
    font-family: 'Lexend', sans-serif;
    color: rgba(255, 255, 255, 0.9);
}

.about-v2-aurora-logo {
    width: 300px;
    height: auto;
    margin-bottom: 30px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

@media (max-width: 768px) {
    .about-v2-aurora-content h2 {
        font-size: 2rem;
    }
    .about-v2-aurora-content p {
        font-size: 1rem;
    }
}

.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: none;
    display: block;
    transition: none;
    transform: none;
    animation: none;
    margin-right: 8px;
}

.brand-logo:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Brand Text */
.brand-text {
    font-weight: 600;
    letter-spacing: -0.5px;
    transition: none;
    transform: none;
    animation: none;
}

/* Nav links container */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*Mobile Navbar*/
.navbar-toggler {
    background: transparent;
    border: none;
}

/* Services Slider Navigation Buttons */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    font-size: 18px;
}

.slider-nav-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

.slider-nav-btn.prev {
    left: 20px;
}

.slider-nav-btn.next {
    right: 20px;
}

/* Mobile navigation collapse background */
.navbar-collapse {
    background-color: #000000 !important;
    padding-bottom: 1rem; /* Add gap at bottom of mobile navbar dropdown */
}

/* Nav links */
.navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', sans-serif;
}

.navbar-nav .nav-link:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    color: transparent !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
    background-color: transparent !important;
    transform: none !important;
}

.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav .nav-item .nav-link.active:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

.nav-link[href="index.html"].active,
.nav-link-mobile[href="index.html"].active {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

/* Remove blue focus outline from navbar links */
.navbar-nav .nav-link:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* ============ HERO SECTION STYLES ============= */

.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 260px 0 0;
}

/* Add gradient fade to hero section bottom */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 20%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.7) 80%,
        rgba(0, 0, 0, 0.9) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.gradient-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 70%;
        height: 100%;
        background: black;
}

.wave-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* First layer - Large diagonal sweep */
.wave-overlay::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 120%;
    height: 140%;
    background: 
        linear-gradient(135deg, 
        transparent 20%, 
        transparent 35%,
        rgba(160, 74, 179, 0.2) 40%,
        rgba(102, 11, 35, 0.3) 45%,
        rgba(160, 74, 179, 0.1) 55%,
        transparent 70%,
        transparent 100%
    );
        animation: diagonalFlow 11s ease-in-out infinite;
        transform-origin: center;
}

/* Second layer - Curved abstract shape */
.wave-overlay::after {
        content: '';
        position: absolute;
        bottom: 5%;
        left: -20%;
        width: 150%;
        height: 100%;
        background: 
        radial-gradient(ellipse 1200px 800px at 30% 80%, 
        rgba(160, 74, 179, 0.2) 30%, 
        rgba(102, 11, 35, 0.15) 35%,
        transparent 60%
    ),
        radial-gradient(ellipse 900px 600px at 80% 30%, 
        rgba(31, 2, 6, 0.18) 0%, 
        transparent 50%
    );
        animation: abstractMove 12s ease-in-out infinite;
        filter: blur(85px);
}

/* Third layer - Dynamic top gradient */
.gradient-background::before {
        content: '';
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translateX(-50%);
        width: 150%;
        height: 80%;
        z-index: 1;
        background: 
        linear-gradient(180deg,
        rgba(102, 11, 35, 0.15) 30%,
        rgba(160, 74, 179, 0.12) 50%,
        transparent 70%
    );
        animation: topFlow 4s ease-in-out infinite;
        filter: blur(80px);
}

    @keyframes diagonalFlow {
        0%, 100% {
        transform: translate(0%, 0%) rotate(0deg);
        opacity: 1;
}
        25% {
        transform: translate(-15%, 10%) rotate(-5deg);
        opacity: 0.8;
}
        50% {
        transform: translate(-25%, 15%) rotate(-8deg);
        opacity: 1;
}
        75% {
        transform: translate(-15%, 8%) rotate(-3deg);
        opacity: 0.9;
}
}

    @keyframes abstractMove {
        0%, 100% {
        transform: translate(0%, 0%) scale(1);
}
        33% {
        transform: translate(15%, -10%) scale(1.1);
}
        66% {
        transform: translate(-10%, 12%) scale(0.7);
}
}

    @keyframes topFlow {
        0%, 100% {
        transform: translateX(-50%) translateY(15%);
}
        50% {
        transform: translateX(-45%) translateY(25%);
}
}


.hero-content {
    z-index: 2;
    position: relative
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    
}

.manual-titleposition {
    position: absolute;
    bottom: 15rem;
    left: -10rem; /* Custom stylized position */
    z-index: 3;
    margin: 0;
    font-size: 12rem !important;
    line-height: 1;
    transition: left 0.3s ease-in-out;
}

.manual-subtitleposition {
    position: absolute;
    bottom: 6rem;
    left: 4rem;
    margin: 0;
    font-size: 8rem !important;
    line-height: 1;
    white-space: nowrap;
}

.hero-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.5rem;
    font-weight: 100;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
   
}

.hero-description {
    font-family: 'Lexend', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #b3b3b3;
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 600px;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-btn-primary {
    font-family: 'Lexend', sans-serif;
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: PulseButton 3s ease-in-out 1.6s infinite;
}

    .hero-btn-primary:hover {
        background: #ffffff;
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px  rgba(102, 11, 35, 0.4);
    }

.hero-btn-secondary {
    font-family: 'Lexend', sans-serif;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: PulseButton 3s ease-in-out 1.6s infinite;
}

    .hero-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px  rgba(102, 11, 35, 0.4); 
    }

@keyframes PulseButton {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}   

.manual-descriptionposition {
    position: absolute;
    bottom: -0.5rem;
    left: 4.5rem;
    font-size: 1.75rem;
    max-width: 700px;
    color: #b3b3b3;
    z-index: 3;
}

.manual-buttonposition {
    position: absolute;
    top: -0.6rem;
    left: 4.5rem;
    z-index: 3;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Responsive Fix for Small Screens */
@media (max-width: 1024px) {
    .hero-section {
        padding: 2rem 1rem !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-content {
        padding-top: 2.5rem;
        padding-bottom: 8rem;
        width: 100%;
    }

    .manual-titleposition,
    .manual-subtitleposition,
    .manual-descriptionposition,
    .manual-buttonposition {
        position: static !important;
        margin: 0.5rem auto !important;
        text-align: center;
        width: 85% !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .manual-titleposition {
        font-size: clamp(3.5rem, 9vw, 5rem) !important;
        line-height: 1.1;
    }

    .manual-subtitleposition {
        font-size: clamp(2rem, 7vw, 4rem) !important;
        white-space: normal !important;
        margin-top: -13px !important;
    }

    .manual-descriptionposition {
        font-size: clamp(1rem, 3vw, 1.2rem) !important;
        line-height: 1.5;
    }

    .manual-buttonposition {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        font-size: 14px;
        width: 80% !important;
        justify-content: center;
    }
}

/* ALIGN TITLE WITH SUBTITLE ON ULTRA-WIDE SCREENS */
@media (min-width: 1920px) {
    .manual-titleposition {
        left: 4rem !important; /* aligns with subtitle */
    }
}


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

/* PROJECTS SECTION STYLES */
.projects-section {
    padding: 10px 0;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin-top: -115px;
}

/* Hero to Projects Transition Overlay */
.hero-projects-overlay {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 8%,
        rgba(0, 0, 0, 0.4) 15%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0.75) 35%,
        rgba(0, 0, 0, 0.85) 45%,
        rgba(0, 0, 0, 0.9) 50%,
        rgba(0, 0, 0, 0.85) 55%,
        rgba(0, 0, 0, 0.75) 65%,
        rgba(0, 0, 0, 0.6) 75%,
        rgba(0, 0, 0, 0.4) 85%,
        rgba(0, 0, 0, 0.2) 92%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 2;
    margin-top: -200px;
    margin-bottom: -200px;
    pointer-events: none;
}

    .projects-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        pointer-events: none;
    }

    .projects-section > .container {
        position: relative;
        z-index: 1;
    }


/* Project Cards */
.project-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 250px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-card-small {
    height: 250px;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.project-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.project-card:hover .project-card-bg {
    transform: scale(1.05);
}

.project-card-bg-pc {
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pc::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 150, 136, 0.6) 0%, rgba(0, 188, 212, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-fdas {
    background-image: url('/images/dpc-fdas.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-fdas::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 87, 34, 0.6) 0%, rgba(255, 152, 0, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-cctv {
    background-image: url('/images/dpc-cctv.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-cctv::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

    .project-card-bg-doorlock {
    background-image: url('/images/services/accessControlSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-doorlock::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-pa {
    background-image: url('/images/services/paSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pa::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(156, 39, 176, 0.6) 0%, rgba(186, 104, 200, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-led {
    background-image: url('/images/services/LEDWall.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-led::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(233, 30, 99, 0.6) 0%, rgba(240, 98, 146, 0.4) 100%);
        background-blend-mode: overlay;
    }


.project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    z-index: 2;
}

.project-card-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.project-card-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

.project-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    border-width: 2px;
    background: linear-gradient(90deg, #ff0000, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082, #ee82ee, #ff0000, #ff0000);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

 .project-card-icon :hover{
    /* To make the text itself look like a gradient */
    background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    -webkit-background-clip: text; /* Clip the gradient to the shape of the text */
    background-clip: text; /* Standard property for compatibility */
    -webkit-text-fill-color: transparent; /* Make the text invisible to show the clipped background */
    transform: scale(1.3);
    border-color: rgba(255, 255, 255, 0.2);
 }

.project-card-icon i {
    color: #ffffff !important;
    font-size: 1rem;
}

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

    .projects-description {
        font-size: 1rem;
    }

}

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

    .projects-title,
    .projects-subtitle {
        font-size: 2rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .project-card,
    .project-card-small {
        height: 200px;
    }

    .project-card-title {
        font-size: 1.1rem;
    }

    .project-card-overlay {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .project-card-title {
        font-size: 1rem;
    }

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

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

.projects-header {
    position: relative;
    height: 450px;
    padding: 60px 0;
    margin-bottom: 60px;
    margin-left: -15px;
    margin-right: -15px;
    overflow: visible;
    background-image: url('/images/dpc-project-img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Add gradient fade to projects header top */
.projects-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.1) 85%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.projects-header::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 300px;
    background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
    filter: blur(70px) brightness(1.5);
    z-index: 1;
    opacity: 1.2;
}
.projects-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .projects-header-content {
        padding: 0px 20px;
        position: relative;
        z-index: 2;
        text-align: center;
        margin-top: -200px;
    }
    .projects-header {
        height: 250px;
        margin-top: 9px;
        background-attachment: scroll;
    }
    .projects-header::after {
        content: "";
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
        filter: blur(70px);
        z-index: 1;
    }
}
.projects-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 300;
}

.projects-section-title {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Responsive Design for Header */
@media (max-width: 992px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.8rem;
    }

    .projects-description {
        font-size: 1.1rem;
        padding: 0 2rem;
    }
}

@media (max-width: 768px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.2rem;
    }

    .projects-description {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .projects-section-title {
        font-size: 1.3rem;
    }
}

/* Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

.projects-subtitle {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}





/* === FINAL OVERRIDE for .projects-section-title === */
.projects-section-title {
    margin-top: 50px;
    padding-top: 180px;
    padding-bottom: 50px;
    font-size: 10rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
    opacity: 1; 
}

.projects-section-title:hover{
    transform: translateY(-8px) scale(1.1);
}

@media (max-width: 992px) {
    .projects-section-title {
        font-size: 6rem;
    }
}

@media (max-width: 768px) {
    .projects-section-title {
        font-size: 4rem;
    }
}

@media (max-width: 576px) {
    .projects-section-title {
        font-size: 2.8rem;
    }
}

/* Logo Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

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

/* Responsive Design for Hero Section */
@media (max-width: 992px) {
    .hero-title,
    .hero-subtitle {
        font-size: 3.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 60px 0;
        text-align: center;
        background-color: #000000;
        margin-top: 5rem;
    }

    .hero-title,
    .hero-subtitle {
        font-size: 2.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-title,
    .hero-subtitle {
        font-size: 2rem;
        
    }

    .hero-logo {
        width: 150px;
        height: 150px;
    }

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

/* Main content area */
.main-content {
    min-height: calc(100vh - 140px);
    padding: 2rem 0;
    margin-top: 90px; /* Same as navbar height */
}

/* Container adjustments */
.container {
    max-width: 1200px;
}

/* Remove default margins from headings */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}

/* Button styles */
.btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0a58ca;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
    }

/* Card styles */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }

/* Footer styles */
footer {
    background-color: #000000 !important;
    margin-top: auto;
}
footer a {
    transition: color 0.3s ease;
}
footer a:hover {
    color: #0d6efd !important;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .CompanyInfo-footer, .CompanyServices-footer {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        padding-bottom: 15px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .brand-text {
        display: none;
    }

    .brand-logo {
        width: 32px;
        height: 32px;
        
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0;
    }

    body {
        padding-top: 70px;
    }
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Utility classes */
.text-gradient {
    background: linear-gradient(45deg, #0d6efd, #6610f2);
    -webkit-text-fill-color: transparent;
}

.shadow-custom {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Focus states for accessibility */
.nav-link:focus,
.btn:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Contact Hero Section */
.contact-hero {
    min-height: 100vh;
    background: #000000;
    display: flex;
    align-items: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

    .contact-hero .container {
        position: relative;
        z-index: 2;
    }

/* Hero Title */
.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-align: center;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
 }


.sync-text {
    background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Hero Subtitle */
.hero-subtitle {
    font-family: 'Lexend', sans-serif;
    font-size: 1.2rem;
    color: white;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* Contact Form Container */
.contact-form-container {
    background: #000000;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #FDFDFD;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 20px rgba(255, 102, 102, 0.3), 0 0 40px rgba(255, 137, 76, 0.2), 0 0 60px rgba(144, 255, 85, 0.2), 0 0 80px rgba(123, 148, 246, 0.2), 0 0 100px rgba(255, 119, 241, 0.2);
}

    .contact-form-container::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
        background-size: 300% 300%;
        border-radius: 20px;
        z-index: -1;
        animation: gradientShift 3s ease-in-out infinite;
    }

    .contact-form-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000000;
        border-radius: 18px;
        z-index: -1;
    }

/* Form Inputs */
.contact-input,
.contact-textarea {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #ffffff;
    padding: 15px 20px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .contact-input:focus,
    .contact-textarea:focus {
        background: rgba(255, 255, 255, 0.05);
        border-color: #4ecdc4;
        box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
        color: #ffffff;
    }

    .contact-input::placeholder,
    .contact-textarea::placeholder {
        color: rgba(255, 255, 255, 0.6);
        font-family: 'Lexend', sans-serif;
    }

.contact-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Submit Button */
.contact-submit-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #ffffff;
    padding: 15px 40px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
}

    .contact-submit-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #4ecdc4;
        color: #4ecdc4;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
    }

    .contact-submit-btn:active {
        transform: translateY(0);
    }

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

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .contact-form-container {
        padding: 30px 20px;
        margin: 0 15px;
    }

    .contact-input,
    .contact-textarea {
        padding: 12px 15px;
    }

    .contact-submit-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
        
    }

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

    .contact-form-container {
        padding: 25px 15px;
    }
}


/* Social Icons Container */
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: nowrap;
}

/* Individual Social Icon Styling */
.social-icon {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
    transform: translateY(0);
}

    /* Hover state for the container */
    .social-icon:hover {
        transform: translateY(-8px) scale(1.1);
    }

    /* Icon image styling */
    .social-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: all 0.3s ease;
        filter: brightness(0.9);
    }

    /* Image hover effect - Glowing lines/outlines */
    .social-icon:hover img {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
        animation: glowPulse 2s ease-in-out infinite;
    }

/* Pulsing glow animation */
@keyframes glowPulse {
    0%, 100% {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
    }

    50% {
        filter: brightness(1.4) contrast(1.2) drop-shadow(0 0 12px #FF6666) drop-shadow(0 0 16px #FF894C) drop-shadow(0 0 20px #90FF55) drop-shadow(0 0 24px #7B94F6) drop-shadow(0 0 28px #FF77F1);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .social-icons {
        gap: 15px;
        padding: 15px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .social-icons {
        gap: 10px;
        padding: 10px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 45px;
        height: 45px;
    }
}

/* Address styling with Lexend font */
address {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem; /* small font size */
    margin-bottom: 1rem; /* mb-3 equivalent */
    font-style: normal; /* Remove default italic styling from address element */
    line-height: 1.5;
}

/* Gradient hover for address */
address.text-white:hover {
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}

/* Alternative class-based approach if you prefer */
.address-lexend {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    font-style: normal;
    line-height: 1.5;
}

/* Menu and Help Center Section Headers */
.col-md-2 h6 {
    font-family: 'Lexend', sans-serif;
    color: #000000;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Menu and Help Center Lists */
.col-md-2 ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Menu and Help Center List Items */
.col-md-2 ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

/* Menu and Help Center Links */
.col-md-2 ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Hover effects for links */
.col-md-2 ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* Gradient hover for CompanyServices-footer links */
.CompanyServices-footer a:hover {
    color: transparent !important;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
}

/* Alternative more specific selectors if needed */
.menu-section h6,
.help-center-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #555555;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.menu-section ul,
.help-center-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-section ul li,
.help-center-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.menu-section ul li a,
.help-center-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.menu-section ul li a:hover,
.help-center-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* General footer section styling with Lexend */
.footer-section {
    font-family: 'Lexend', sans-serif;
}

.footer-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #ffffff;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.footer-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.footer-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.footer-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/*============= SERVICES =============*/

.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.offers-firsttitle {
    font-family: 'Lexend', sans-serif;
    font-size: 3rem;
    font-weight: 200;
    color: #ffffff;
    margin-bottom: 0;
    animation: fadeInDown 0.8s ease-out;
}

.offers-secondpctitle {
    background: linear-gradient(to right, #a7363c, #671C68, #7B54B1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondcctvtitle {
    background: linear-gradient(to right, #5CE1FF, #5CFFB8, #56D86A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondfdastitle {
    background: linear-gradient(to right, #FF6666, #C34814, #F3A335);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-seconddoorlocktitle {
    background: linear-gradient(to right, #BA1022, #EC0120, #FD6A59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.video-overlay-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.video-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: white;
    
}

/* RESPONSIVE - Video Overlay */

/* Ultra-wide screens (1440px+) */
@media (min-width: 1440px) {
    .video-overlay-title {
        font-size: 5rem;
        margin-bottom: 1.5rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 18px 48px;
        font-size: 1.1rem;
    }
}

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .video-overlay-title {
        font-size: 4.5rem;
        margin-bottom: 1.3rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.3rem;
        margin-bottom: 1.8rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 16px 44px;
        font-size: 1rem;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .video-overlay-title {
        font-size: 4rem;
        margin-bottom: 1.2rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.6rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 15px 40px;
        font-size: 0.95rem;
    }
}

/* Tablet landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .video-overlay-title {
        font-size: 3rem;
        margin-bottom: 1rem;
        text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 1rem;
        margin-bottom: 1.4rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 36px;
        font-size: 0.9rem;
    }
}

/* Tablet portrait (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 12px 32px;
        font-size: 0.85rem;
    }
}

/* Mobile large (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2rem;
        margin-bottom: 0.7rem;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 11px 28px;
        font-size: 0.8rem;
    }
}

/* Mobile small (320px - 479px) */
@media (max-width: 479px) {
    .video-overlay-container {
        height: 100vh; /* Increased from 60vh to 80vh for taller mobile video section */
    }
    
    .video-overlay-content {
        padding: 0 2rem; /* Increased padding for mobile */
        text-align: center; /* Center align content on mobile */
        width: 90%; /* Ensure content doesn't reach edges */
    }
    
    /* Fix about video for mobile */
    .about-video {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 250px !important;
        object-fit: cover;
        margin-top: 0 !important;
    }
    
    .col-lg-5.col-md-12.d-flex.justify-content-center.align-items-start.position-relative {
        width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Stack mission and vision cards vertically on mobile */
    .mission-vision-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Center projects header text on mobile */
    .projects-header {
        height: auto !important;
        min-height: 100vh;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-attachment: scroll !important;
    }
    
    .projects-header-content {
        margin-top: 0 !important;
        padding: 2rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: auto !important;
    }
    
    .video-overlay-title {
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.75rem;
        margin-bottom: 0.9rem;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 10px 24px;
        font-size: 0.75rem;
    }
}

/* ENHANCED TITLE ANIMATION */
.video-overlay-title {
    font-family: "Space Grotesk";
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    animation: titleEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               titleGlow 3s ease-in-out 1.2s infinite;
    opacity: 0;
}

/* Title entrance animation with bounce effect */
@keyframes titleEntrance {
    0% {
        opacity: 0;
        transform: translateY(-80px) scale(0.5) rotateX(90deg);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: translateY(10px) scale(1.05) rotateX(-5deg);
        filter: blur(0px);
    }
    80% {
        transform: translateY(-5px) scale(0.98) rotateX(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0px);
    }
}


@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 30px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 50px rgba(255, 255, 255, 0.6),
                     0 0 70px rgba(172, 56, 56, 0.4);
    }
}

.video-overlay-subtitle {
    font-family: "Lexend";
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    animation: subtitleFade 1s ease-out 0.3s backwards;
}

@keyframes subtitleFade {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


.video-overlay-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 50px;
    font-family: "Lexend";
    font-weight: 400;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    position: relative;
    overflow: hidden;
    animation: buttonEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulse 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


@keyframes buttonEntrance {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}


.video-overlay-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}


.video-overlay-button:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.7),
                0 0 50px rgba(172, 56, 56, 0.4);
    
}

.video-overlay-button:hover::before {
    animation: shimmer 1s infinite;
}

.video-overlay-button:active {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.6);
}

/* Ripple effect on click */
.video-overlay-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s, opacity 0.6s;
    opacity: 0;
}

.video-overlay-button:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}
/* ANIMATIONS */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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


@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* SLIDER CONTAINER STYLES */
.services-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000000;
    margin-top: 0;
    padding-top: 5px;
}

.services-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 400%;
}

/* 2. The Wrapper (The Sliding Track) */
#sliderWrapper {
    display: flex;          /* CRITICAL: Lines the slides (sections) up horizontally */
    width: 400%;            /* Total width: 4 slides * 100% = 400% */
    height: 100%;
    /* CRITICAL: This property makes the transition smooth */
    transition: transform 0.6s ease-in-out; 
}

/* 3. The Individual Slides (The content sections) */
#sliderWrapper > .offers-section {
    width: 25%;             /* Each slide takes up 1/4 of the 400% width */
    flex-shrink: 0;         /* CRITICAL: Prevents the slides from shrinking */
    height: 100%;
    box-sizing: border-box; 
    /* You may want to add overflow-y: auto; here if content might exceed the height */
}

/* SLIDER INDICATORS */
.slider-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 100;
}

.indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    animation: indicatorPulse 2s ease-in-out infinite;
}

.indicator.active {
    background: white;
    transform: scale(1.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: none;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

@keyframes indicatorPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* COMPANY OFFER SECTION STYLES */
.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
    flex: 0 0 25%;
    width: 25%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    margin-top: -70px;
    transform: translateY(0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    position: relative;
}

.offers-section.active {
    opacity: 1;
    transform: translateY(0);
}

.offers-section.d-none {
    display: none !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.offers-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* MAP STYLES WITH ANIMATIONS */
.map-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem 0;
    width: 100%;
    overflow-x: hidden;
}

.map-scaler {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.map-scaler-inner {
    position: relative;
    width: 300px;
    height: 523px;
    transform: scale(calc(min(100vw, 1400px) / 1400));
    transform-origin: top center;
}

.map-container {
    position: absolute;
    width: 300px;
    height: 523px;
    top: 0;
    left: 0;
    animation: mapAppear 1.2s ease-out;
}

@keyframes mapAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

.label {
    position: absolute;
    color: white;
    text-align: center;
    animation: labelSlideIn 0.8s ease-out backwards;
}

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

.label-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.label-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.count-count {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    animation: countUp 1.5s ease-out;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.count-text {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 1;
}

.pc-icon {
    width: 94px;
    height: auto;
    animation: floatAnimation 3s ease-in-out infinite;
}

.left-label {
    top: 50%;
    left: -250px;
    transform: translateY(-50%);
    animation-delay: 0.2s;
}

.right-label.top {
    top: 60px;
    right: -250px;
    animation-delay: 0.4s;
}

.right-label.bottom {
    bottom: 100px;
    right: -350px;
    animation-delay: 0.6s;
}

.line-image {
    position: absolute;
    width: 160px;
    height: auto;
    transform: translateY(-100%);
    transform-origin: bottom left;
    animation: drawLine 1s ease-out backwards;
}

@keyframes drawLine {
    from {
        opacity: 0;
        transform: translateY(-100%) scaleY(0);
    }
    to {
        opacity: 1;
        transform: translateY(-100%) scaleY(1);
    }
}

/* GRADIENT BUTTONS */
.gradientpccolor-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 25%, #7B54B1 75%, #000000 100%);
}

.gradientcctvcolor-button {
    background: linear-gradient(135deg, #5CE1FF 0%, #5CFFB8 25%, #56D86A 75%, #000000 100%);
}

.gradientfdascolor-button {
    background: linear-gradient(135deg, #FF6666 0%, #C34814 25%, #F3A335 75%, #000000 100%);
}

.gradientdoorlockcolor-button {
    background: linear-gradient(135deg, #BA1022 0%, #EC0120 25%, #FD6A59 75%, #000000 100%);
}

.gradient-button {
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(172, 56, 56, 0.3);
    outline: none;
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    animation: buttonAppear 0.8s ease-out 0.8s backwards;
}

@keyframes buttonAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gradient-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(172, 56, 56, 0.4);
}

.gradient-button:active {
    transform: translateY(0);
}

/* GRADIENT LOOP WITH SHADOW */
@keyframes gradientCycle {
    0% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(0deg);
    }
    50% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(180deg);
    }
    100% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(360deg);
    }
}

.glow-gradient {
    border: none;
    border-radius: 0;
    animation: gradientCycle 6s linear infinite;
    transition: all 0.3s ease-in-out;
}

/* Responsive fallback */
@media (max-width: 600px) {
    .left-label,
    .right-label.top,
    .right-label.bottom {
        position: static;
        text-align: center;
        margin-top: 1rem;
        transform: none;
    }

    .label-content {
        justify-content: center;
    }

    .line-image {
        display: none;
    }

    .offers-firsttitle {
        font-size: 2.5rem;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }

    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}

/* RESPONSIVE - Keep PC design at any screen size */

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .map-scaler-inner {
        transform: scale(0.85);}
    .offers-firsttitle {
        font-size: 2.5rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }
    .left-label,
    .right-label.top,
    .right-label.bottom {
        font-size: 1rem;
    }
    .gradient-button{
        margin-top: -70px !important;
        padding: 15px 25px !important;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .offers-section {
        margin-top: -20px;
    }
    .map-scaler-inner {
        transform: scale(0.68);
        margin-top: -50px;
    }
    .offers-firsttitle {
        font-size: 2rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2.5rem;
    }
    .gradient-button{
        margin-top: -170px;
        padding: 11px 25px;
        font-size: 1rem;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.95rem;
    }

            .fp-wrapper {
                padding: 0 1rem;
            }

            .fp-main-section {
                padding: 60px 0;
            }

            .fp-header-title {
                font-size: clamp(24px, 4vw, 32px);
                margin-bottom: 25px;
            }

            .fp-card {
                height: 450px !important;
            }

            .fp-card-category {
                font-size: 12px !important;
            }

            .fp-card-content {
                padding: 20px !important;
            }

            .fp-card-title {
                font-size: 1.4rem !important;
                margin-bottom: 10px !important;
            }

            .fp-card-description {
                font-size: 0.80rem !important;
                margin-bottom: 18px;
            }

            .fp-card-tag {
                font-size: 12px !important;
                margin: auto;
                margin-top: -10px;
            }
            }

            .fp-image-wrapper {
                height: 170px !important;
            }

            .fp-all-button {
                margin-top: -20px;
                padding: 12px 30px !important;
                font-size: 15px !important;
            }


@media (max-width: 540px) {
    .offers-section {
        padding: 30px 15px;
        margin-top: -60px !important;
    }

    .offers-header {
        margin-bottom: 30px;
    }

    .offers-firsttitle {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    /* ===== MAP CONTAINER ===== */
    .map-wrapper {
        margin-bottom: 40px;
        position: relative;
        overflow: visible !important;
        padding: 0 100px;
        margin-left: 50px;
    }

    .map-scaler {
        padding: 0;
        position: relative;
        width: 100%;
        overflow: visible !important;
        margin: auto;
    }

    .map-scaler-inner {
        transform: scale(0.85) !important;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        width: 100%;
        height: auto;
        overflow: visible !important;
        margin: auto;
    }

    .map-container {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible !important;
    }

    .map-image {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* ===== DOTTED LINES ===== */
    .line-image {
        position: absolute !important;
        max-width: 60px;
        height: auto;
    }

    /* ===== LABELS/METRICS ===== */
    .label {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .label-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .label-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .count-count {
        font-size: 1.8rem;
        font-weight: bold;
        white-space: nowrap;
    }

    .count-text {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .pc-icon {
        width: 50px;
        height: 50px;
    }

    /* Position labels specifically for mobile */
    .left-label {
        left: 10px;
        top: 55%;
        transform: translateY(-50%);
    }

    .right-label.top {
        right: 10px;
        top: 30%;
        transform: translateY(-50%);
    }

    .right-label.bottom {
        right: 10px;
        bottom: 28%;
        transform: translateY(50%);
    }

    /* ===== BUTTON ===== */
    .gradient-button {
        padding: 12px 32px;
        font-size: 0.9rem;
        margin-top: -100px !important;
        width: auto;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 2.3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.85rem;
    }
}

/* Tablets landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .offers-section{
        margin-top: -80px !important;
    }
    .map-scaler-inner {
        transform: scale(0.90);
    }
    
    .left-label {
        left: -150px;
    }
    
    .right-label.top {
        right: -100px;
        top: -30px;
    }
    
    .right-label.bottom {
        right: -190px;
        top: 220px;
    }
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
        margin-left: -100px !important;
        margin-top: 150px !important;
    }
     .gradient-button {
        padding: 14px 28px;
        font-size: 20px;
        margin-top: 40px !important;
    }

}

/* Tablets portrait (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .map-scaler-inner {
        transform: scale(0.65);
    }
    
    .left-label {
        left: -180px;
    }
    
    .right-label.top {
        right: -180px;
    }
    
    .right-label.bottom {
        right: -220px;
    }
    
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
    }
}

/* Mobile large (361px - 480px) */
@media (max-width: 480px) {
    .offers-section {
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.70) !important;
        margin-left: -60px;
    }
    
    .map-wrapper {
        padding: 2rem 0;
    }
    
    .left-label {
        left: -50px;
    }
    
    .right-label.top {
        right: -30px;
        margin-top: -20px;
        position: absolute;
    }
    
    .right-label.bottom {
        margin-right: -100px !important;
        bottom: 150px;
        position: absolute;
    }
    
    .count-count {
        font-size: 40px;
    }
    
    .count-text {
        font-size: 18px;
    }
    
    .pc-icon {
        width: 60px;
    }
    
    .line-image {
        width: 120px;
    }
    
    .offers-firsttitle {
        font-size: 2rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2.5rem;
    }
    
    .gradient-button {
        padding: 14px 28px;
        font-size: 16px;
    }
}

/* Mobile small (320px - 360px) */
@media (max-width: 360px) {
    .offers-section {
        padding: 40px 0;
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.65) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    
    .left-label {
        left: -70px;
    }
    
    .right-label.top {
        margin-right: 30px;
        margin-top: 20px !important;
    }
    
    .right-label.bottom {
        margin-right: -90px !important;
        bottom: 120px;
        position: absolute;
    }
    
    .count-count {
        font-size: 32px;
    }
    
    .count-text {
        font-size: 16px;
    }
    
    .pc-icon {
        width: 50px;
    }
    
    .line-image {
        width: 100px;
    }
    
    .offers-firsttitle {
        font-size: 1.5rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2rem;
    }
    
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -210px !important;
    }
}

@media (max-width: 375px) {
    .offers-section {
        padding: 40px 0;
    }
    
    .map-scaler-inner {
        transform: scale(0.60) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -260px !important;
    }
}

@media (min-width: 912px) {
            .fp-wrapper {
                padding: 0 2rem;
                max-width: 600px;
            }

            .fp-main-section {
                padding: 80px 0;
            }

            .fp-header-title {
                font-size: clamp(28px, 5vw, 40px);
                margin-bottom: 30px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                margin-bottom: 40px;
            }

            .fp-card-content {
                padding: 30px;
            }

            .fp-card-title {
                font-size: 1.8rem;
                margin-bottom: 15px;
            }

            .fp-card-description {
                font-size: 1rem;
                line-height: 1.6;
                margin-bottom: 20px;
            }

            .fp-image-wrapper {
                height: 280px;
            }

            .fp-all-button {
                padding: 16px 50px;
                font-size: 18px;
            }
        }

        /* Tablet Medium (853px to 911px) */
        @media (min-width: 853px) and (max-width: 911px) {
            .fp-wrapper {
                padding: 0 1.5rem;
                max-width: 90px;
            }

            .fp-main-section {
                padding: 70px 0;
            }

            .fp-header-title {
                font-size: clamp(26px, 4.5vw, 36px);
                margin-bottom: 28px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 16px;
                margin-bottom: 35px;
            }

            .fp-card-content {
                padding: 26px;
            }

            .fp-card-title {
                font-size: 1.6rem;
                margin-bottom: 13px;
            }

            .fp-card-description {
                font-size: 0.95rem;
                line-height: 1.6;
                margin-bottom: 18px;
            }

            .fp-image-wrapper {
                height: 260px;
            }

            .fp-all-button {
                padding: 15px 48px;
                font-size: 17px;
            }
        }


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

/* GLOBAL RESET/BEST PRACTICE for Responsiveness */
* {
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* ========================================================================= */
/* CORE SHOWCASE BLOCK & FONT SCALING */
/* ========================================================================= */

.core-showcase-block {
    background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
    /* Use relative padding unit for vertical spacing, scales better than a fixed 120px */
    padding: 10vh 0; 
    position: relative;
    overflow: hidden;
}

.core-showcase-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.core-showcase-block::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    animation: core-pulse-bg 8s ease-in-out infinite;
}

@keyframes core-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

.showcase-header {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.showcase-subtext {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 3rem; /* Reduced from 4rem */
    font-weight: 300;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
}

.concept-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease-out, transform 0.8s ease-out;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none; 
}

.concept-tile:nth-child(1) { transition-delay: 0.1s; }
.concept-tile:nth-child(2) { transition-delay: 0.2s; }
.concept-tile:nth-child(3) { transition-delay: 0.3s; }
.concept-tile:nth-child(4) { transition-delay: 0.4s; }
.concept-tile:nth-child(5) { transition-delay: 0.5s; }
.concept-tile:nth-child(6) { transition-delay: 0.6s; }

.showcase-tile-container {
    /* Auto-fit is the key for responsiveness here */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.concept-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.concept-tile::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(172, 56, 56, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.concept-tile:hover {
    transform: translateY(-15px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
}

.concept-tile:hover::before {
    transform: scaleX(1);
}

.concept-tile:hover::after {
    width: 400px;
    height: 400px;
}

.concept-tile:hover .concept-icon-wrap {
    transform: scale(1.1) rotateY(360deg);
}

.concept-tile:hover .concept-icon-wrap svg {
    animation: icon-bounce 0.6s ease;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.concept-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.concept-icon-wrap svg {
    width: 40px;
    height: 40px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.concept-title-text {
    font-family: "Space Grotesk";
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-title-text {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.concept-detail-text {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-detail-text {
    color: #ccc;
}

/* ========================================================================= */
/* METRIC SHOWCASE ZONE */
/* ========================================================================= */

.metric-showcase-zone {
    font-family: "Space Grotesk";
    background: #000000;
    padding: 100px 0;
    position: relative;
}

.data-figure-layout {
    /* Auto-fit is great here, scales well */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.figure-unit-card {
    text-align: center;
    animation: slightFloat 3s ease-in-out infinite alternate; 
}

.figure-unit-card:nth-child(even) {
    animation-delay: 0.3s;
}

.figure-unit-card:nth-child(3n) {
    animation-delay: 0.9s;
}

.figure-count-value {
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.figure-description-text {
    font-size: 1.2rem;
    color: white;
    font-weight: 300;
}

@keyframes slightFloat {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

/* ========================================================================= */
/* PROCESS SECTION */
/* ========================================================================= */

.process-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.container-our {
    text-align: center;
}

.section-title-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    
}

.section-subtitle-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 50px; /* Reduced from 100px */
    font-weight: 300;
    position: relative;
    z-index: 2;
    animation: subtext-slide-in 1s ease-out 0.2s backwards; 
}

.process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(103, 28, 104, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 60% 70%, rgba(123, 84, 177, 0.1) 0%, transparent 40%);
    animation: gradientShift 10s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.process-timeline {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.process-step {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
    position: relative;
    opacity: 0; 
    transform: translateX(0); 
    transition: none; 
}

.process-step.animate-left {
    animation: stepSlideIn 0.8s ease-out forwards; 
}

.process-step:nth-child(even).animate-right {
    animation: stepSlideInRight 0.8s ease-out forwards;
}


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

.process-step:nth-child(even) {
    flex-direction: row-reverse;
}

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

.step-number {
    font-family: "Space Grotesk";
    width: 60px;
    height: 60px;
    color: white;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
    transition: all 0.4s ease;
}

.process-step:hover .step-number {
    transform: scale(1.15) rotateZ(360deg);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.step-content {
    color: white;
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.step-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.process-step:hover .step-content {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(172, 56, 56, 0.3);
    transform: translateX(10px);
}

.process-step:nth-child(even):hover .step-content {
    transform: translateX(-10px);
}

.process-step:hover .step-content::before {
    opacity: 1;
}

.step-title {
    font-family: "Space Grotesk";
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.process-step:hover .step-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step-description {
    font-family: "Lexend";
    color:white;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.process-step:hover .step-description {
    color: #ccc;
}

/* ========================================================================= */
/* FUTURE PROJECTS (FP) SECTION */
/* ========================================================================= */

.fp-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.fp-main-section {
    padding: 80px 0; /* Reduced from 120px 0 */
    position: relative;
    overflow: hidden;
}

.fp-main-section::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(123, 84, 177, 0.05) 0%, transparent 50%);
    animation: fp-pulse-bg 12s ease-in-out infinite;
}

@keyframes fp-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

/* ------------------------------------------------ */
/* SCROLL ANIMATION STARTING STATES (HIDDEN) */
/* ------------------------------------------------ */

/* The hidden class sets the initial position and opacity, which is then animated away */
.hidden-scroll {
    opacity: 0;
    /* Use 'will-change' for performance hint */
    will-change: transform, opacity; 
}

/* Header Hidden State */
.fp-header-title.hidden-scroll {
    transform: translateY(-30px);
}

/* Card Hidden State */
.fp-card.hidden-scroll {
    transform: translateY(50px) scale(0.9);
}

/* Button Link Hidden State */
.fp-all-projects-link.hidden-scroll {
    transform: translateY(30px);
}


/* ------------------------------------------------ */
/* SCROLL ANIMATION TRIGGERED STATES (VISIBLE) */
/* ------------------------------------------------ */

/* The animated class applies the animation keyframe */

/* Header Animation Trigger */
.fp-header-title.animated {
    animation: fp-header-slide-in 1s ease-out forwards;
}

/* Card Animation Trigger */
.fp-card.animated {
    /* The animation-delay is set dynamically by JavaScript based on data-delay */
    animation: fp-card-fade-in 0.9s ease-out forwards;
}

/* Button Link Animation Trigger */
.fp-all-projects-link.animated {
    animation: fp-btn-fade-in 1s ease-out forwards;
}


/* ------------------------------------------------ */
/* ORIGINAL KEYFRAMES (Keep these as they are) */
/* ------------------------------------------------ */

@keyframes fp-header-slide-in {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fp-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fp-btn-fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------------ */
/* REST OF ORIGINAL STYLES (Keep as they are) */
/* ------------------------------------------------ */

.fp-header-title {
    font-family: "Space Grotesk";
    color: white;
    text-align: left;
    /* Fluid font size: min 28px, preferred 5vw, max 40px */
    font-size: clamp(28px, 5vw, 40px); 
    font-weight: 500;
    margin-bottom: 30px; /* Reduced from 50px */
    position: relative;
    z-index: 2;
}

.fp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px; /* Reduced from 40px */
    position: relative;
    z-index: 2;
    margin-bottom: 40px; /* Reduced from 60px */
}

.fp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.fp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
    z-index: 2;
}

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

.fp-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.fp-image-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.fp-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.fp-card:hover .fp-card-image {
    transform: scale(1.1) rotate(2deg);
}

.fp-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-card:hover .fp-image-overlay {
    opacity: 1;
}

.fp-view-button {
    padding: 9px 28px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.fp-card:hover .fp-view-button {
    transform: translateY(0);
    opacity: 1;
}

.fp-view-button:hover {
    transform: translateY(0) scale(1.05);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.5);
}

.fp-card-content {
    padding: 30px;
}

.fp-card-category {
    font-family: "Lexend";
    display: inline-block;
    padding: 6px 16px;
    background: rgba(172, 56, 56, 0.2);
    border: 1px solid rgba(172, 56, 56, 0.4);
    border-radius: 20px;
    font-size: 14px;
    color: #AC3838;
    margin-bottom: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-category {
    background: rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.6);
}

.fp-card-title {
    font-family: "Space Grotesk";
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fp-card-description {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.fp-card:hover .fp-card-description {
    color: #ccc;
}

.fp-card-tags {
    font-family: "Lexend";
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fp-card-tag {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    font-size: 13px;
    color: #999;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-tag {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(172, 56, 56, 0.3);
    color: #bbb;
}

.fp-all-projects-link {
    text-align: center;
    position: relative;
    z-index: 2;
}

.fp-all-button {
    font-family: "Lexend";
    padding: 16px 50px;
    background: transparent;
    border: 2px solid rgba(172, 56, 56, 0.5);
    border-radius: 30px;
    color: white;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.fp-all-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    z-index: -1;
}

.fp-all-button:hover {
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.fp-all-button:hover::before {
    width: 300px;
    height: 300px;
}


    

/* ========================================================================= */
/* FAQ SECTION */
/* ========================================================================= */

.faq-section {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.container-faq {
    text-align: center;
}

.section-title-faq {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-subtitle-faq {
    font-family: "Lexend";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 4rem;
    font-weight: 300;
    position: relative;
    z-index: 2;
}

.faq-container {
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.faq-item {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    margin-bottom: 30px;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* --- NEW SCROLL ANIMATION CSS --- */

/* 1. Initial State (Hidden and slightly offset) */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}

/* 2. Target State (Visible and in final position) - added by JavaScript */
.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Staggered Delay for FAQ items */
.faq-item.scroll-animate:nth-child(1) { transition-delay: 0.1s; }
.faq-item.scroll-animate:nth-child(2) { transition-delay: 0.2s; }
.faq-item.scroll-animate:nth-child(3) { transition-delay: 0.3s; }
.faq-item.scroll-animate:nth-child(4) { transition-delay: 0.4s; }
.faq-item.scroll-animate:nth-child(5) { transition-delay: 0.5s; }

.section-title-faq.scroll-animate { transition-delay: 0s; }
.section-subtitle-faq.scroll-animate { transition-delay: 0.1s; }

/* Existing FAQ styles */

.faq-item:hover {
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.15);
}

.faq-item.active {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(172, 56, 56, 0.4);
}

.faq-question {
    font-family: "Space Grotesk";
    padding: 25px 30px;
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

.faq-question::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #AC3838, #671C68, #7B54B1);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::before {
    transform: scaleY(1);
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 35px;
}

.faq-answer {
    font-family: "Lexend";
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    color: white;
}

.faq-item.active .faq-answer {
    padding: 0 30px 25px;
    max-height: 500px;
}

.faq-toggle {
    font-size: 1.5rem;
    transition: all 0.4s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(172, 56, 56, 0.2);
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #AC3838, #7B54B1);
}

.faq-section {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.faq-section::after {
    content: "";
    position: absolute;
    bottom: 310px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}

/* ========================================================================= */
/* MEDIA QUERIES FOR RESPONSIVENESS */
/* ========================================================================= */

@media (max-width: 1024px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 150px !important; /* Slight reduction for tablets */
    }
}




/* Tablet and Smaller Devices (Max Width 992px) */
@media (max-width: 992px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 350px !important; /* Slight reduction for tablets */
    }
}

@media (min-width: 853px) and (max-width: 991px) {
    .data-figure-layout {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        padding: 0 1rem;
    }
    
    .figure-count-value {
        font-size: 3rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
}

@media (max-width: 550px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 200px !important; /* Slight reduction for tablets */
    }
}

/* Mobile Devices (Max Width 768px) */
@media (max-width: 768px) {
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 60px 0; /* Consistent vertical padding for mobile */
    }
    
    .showcase-tile-container {
        /* Force single column for a better mobile experience */
        grid-template-columns: 1fr; 
        gap: 15px;
    }
    
    .concept-tile {
        padding: 25px 20px; /* Reduced tile padding */
    }

    .showcase-subtext, 
    .section-subtitle-faq {
        margin-bottom: 2rem;
    }

    /* Metrics Section - Smaller font and less float */
    .figure-count-value {
        font-size: 2rem; 
    }
    
    .data-figure-layout {
        gap: -50px;
    }

    /* Process Timeline - Vertical stacking for mobile */
    .process-step {
        flex-direction: column; /* Stacks number and content vertically */
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }

    .process-step:nth-child(even) {
        flex-direction: column; /* Removes the row-reverse from even items */
    }
    
    /* Remove horizontal translations on hover for stacked layout */
    .process-step:hover .step-content,
    .process-step:nth-child(even):hover .step-content {
        transform: none; 
    }
    
    .step-number {
        margin: 0 auto 15px; /* Center the number circle and add space below */
    }
    
    .step-content {
        padding: 20px;
    }

    /* FAQ Section */
    .faq-question {
        font-size: 1rem;
        padding: 20px 25px;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 25px 20px;
    }

    /* Future Projects Card Grid - Single column on mobile */
    .fp-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .fp-card-content {
        padding: 20px;
    }
    
    .fp-image-wrapper {
        height: 220px;
    }

    .fp-all-button {
        padding: 12px 30px; 
        font-size: 16px;
    }
}

/* Small Mobile Devices (Max Width 480px) */
@media (max-width: 480px) {
    /* Reduce all main section padding further */
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 40px 0;
    }

    /* Adjust main wrapper padding for very small screens */
    .showcase-tile-container, 
    .data-figure-layout, 
    .process-timeline, 
    .faq-container, 
    .fp-wrapper {
        padding: 0 1rem; /* Minimum horizontal padding */
    }

    /* Further compress header elements */
    .showcase-subtext,
    .section-subtitle-our,
    .section-subtitle-faq {
        margin-bottom: 25px;
    }
    
    /* Metric Values */
    .figure-count-value {
        font-size: 2.2rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
    
    .concept-title-text {
        font-size: 1.3rem;
    }
    
    .fp-card-title {
        font-size: 1.5rem;
    }
}

/*============= END ==================*/
    
/* And MANY MORE SECTION STYLES */
.andmanymore-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.andmanymore-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 5rem;
    font-weight: 500;
    margin-top: -0.8rem;
    color: #ffffff;
}

.andmanymore-paragraph p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.9rem;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 2rem;
    color: #cccccc;
    line-height: 1.6;
    font-weight: 300;
}
/* Responsive tweak */
@media (max-width: 768px) {
    .andmanymore-paragraph p {
        font-size: 0.95rem;
        padding: 0 1rem;
    }
}

/* Stats container styling */
.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
    margin-top: 3rem;
    text-align: center;
}

/* Each stat item */
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 150px;
}

/* Gradient icon replacing image */
.icon-gradient {
    width: 107px;
    height: 107px;
    background: linear-gradient(90deg, #FF6666, #66BFFF, #FF66C7, #FF6666, #66BFFF, #FF66C7, #FF6666 );
    background-size: 200% 100%; /* Full span of duplicated colors */
    animation: gradientSlideSeamless 2s linear infinite;
    /* PNG mask */
    -webkit-mask-image: var(--img);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--img);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-bottom: 1rem;
}
/* Number styling */
.stat-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

/* Label styling */
.stat-label {
    font-family: 'Lexend', sans-serif;
    font-size: 2rem;
    color: #ffffff;
    font-weight: 400;
}

@keyframes gradientSlideSeamless {
    0% {
        background-position: 0% 50%;
    }

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



/* Responsive adjustments */
@media (max-width: 768px) {
    .andmanymore-title {
        font-size: 2.5rem;
        margin-top: -2rem;
    }

    .stat-item {
        max-width: 120px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.875rem;
    }

    .stat-item img {
        width: 40px;
        height: 40px;
    }

    .title-strength {
        width: 100%;
        font-size: 2.9rem !important;
        margin-top: -3rem !important;
    }

}


/* Company Strength CSS */
.company-strength {
    background-color: #000000
}
.title-strength {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.25rem;
    font-weight: 500;
    margin-top: -0.5rem;
    color: #ffffff;
    text-align:center;
}
.strTitleCard {
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
}
.card-str1.card, .card-str2.card, .card-str3.card {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-str1.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
    box-shadow: 0 0 30px rgba(123, 242, 255, 0.8),
                0 0 60px rgba(76, 168, 255, 0.6),
                0 0 90px rgba(35, 50, 215, 0.4),
                0 0 120px rgba(35, 50, 215, 0.2);
}
.card-str2.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
    box-shadow: 0 0 30px rgba(132, 9, 180, 0.8),
                0 0 60px rgba(189, 5, 149, 0.6),
                0 0 90px rgba(189, 5, 45, 0.4),
                0 0 120px rgba(189, 5, 45, 0.2);
}
.card-str3.card:hover {
     border: 3px solid;
     border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
     box-shadow: 0 0 30px rgba(243, 249, 59, 0.8),
                0 0 60px rgba(163, 249, 59, 0.6),
                0 0 90px rgba(81, 249, 59, 0.4),
                0 0 120px rgba(81, 249, 59, 0.2);
}
/*Brands Animation CSS*/
.brands-animation {
    background-color: #000000;
}
.title-brands {
    color: #FFF;
    font-size: 40px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
}
.brand-slider {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    margin: 50px auto;
}

.brand-slider-track {
    display: flex;
    width: 200%;
    height: 100%;
    animation: slideLeft 20s linear infinite;
}
.brand-slider-track > div {
    width: 50%;
    height: 100%;
    position: relative;
}
.brand-slider-track img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}


/*slider in shop*/



.brandgroup-default {
    opacity: 1;
    z-index: 1;
}

.brandgroup-hover {
    opacity: 0;
    z-index: 2;
}

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

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

/*Customer Reviews*/
.reviews {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 250px;
    padding-bottom: 250px;
    overflow: hidden;
    z-index: 0;
    border: none;
    margin-top: 20px;
}
.reviews::after {
    content: "";
    position: absolute;
    bottom: 90px;
    left: 50%;
    top: 200px;
    transform: translateX(-50%);
    width: 100%;
    height: 75%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%),
                radial-gradient(circle at center, #A04AB3 0%, #660B23 40%, #1F0206 65%, transparent 100%);
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: -1;
    border: 0;
    pointer-events: none;
}

.title-reviews {
    color: #AEAEAE;
    font-weight: 300;
    font-size: 40px;
    font-family: 'Lexend', sans-serif;
    z-index: 1;
}

.client-says {
    color: #FFF;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.client-name {
    color: #AEAEAE;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.card-reviews {
    background: rgba(9, 9, 9, 0.6);
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

.star-rating, .card-details {
    position: relative;
    top: -30px;
}

.review-img {
    width: 120px;
    height: 120px;
    top: -50px;
    position: relative;
    z-index: 2;
}
#reviewsCarousel {
    z-index: 1;
}
.carousel-control-prev, .carousel-control-next {
    width: auto;
    top: 54%;
    transform: translateY(-50%);
    opacity: 1;
}

.carousel-control-prev {
    left: -80px;
}

.carousel-control-next {
    right: -80px;
}

@media (min-width: 300px) and (max-width: 1280px) {
    .carousel-control-prev,
    .carousel-control-next {
        position: sticky;
        width: auto;
        padding: 0;
        top: 54%;
        position: absolute;
        transform: translateY(-50%);
    }

    .carousel-control-prev {
        left: 10px;
    }

    .carousel-control-next {
        right: 10px;
    }
    .reviews {
        padding: 0px 20px;
        position: relative;
    }
    .card-reviews {
        margin-top: 100px;
        height: 500px;
    }
}
/* ================ CONTACT =====================/*



/* CONTACT FORM */
.contactForm {
    position: relative;
    background-color: #090909;
    padding: 100px 0px;
    overflow: hidden;
}

    .contactForm::after {
        content: "";
        position: relative;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient( 90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06% );
        filter: blur(80px);
        border-radius: 50%;
        z-index: 0;
    }

.contactForm {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.contactForm::after {
    content: "";
    position: absolute;
    bottom: 210px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.title-contactForm {
    color: #FFF;
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactDes {
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactSync {
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
    background: linear-gradient(90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
}

.card-contactForm.card {
    border: 2px solid;
    border-color: #FDFDFD;
    border-radius: 10px;
    background: #090909;
    transform: none !important;
    transition: none !important;
    z-index: 1;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .contactForm {
        padding: 20px 20px;
    }
}

/* =================== END ======================== */

/* About Section Styles */

.about-section {
    background: #000000;
    color: #eee;
    min-height: 100vh;
    padding-top: 5rem;
    padding-bottom: 3rem;

    position: relative;
}

.about-video {
    max-width: 100%;
    height: 500px;
    object-fit: cover;
    background: #222;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    min-width: 400px;
}

.about-label {
    font-family: 'Lexend', sans-serif;
    font-weight: 200;
    font-size: 24px;
    color: #AEAEAE;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 55px;
    color: #FFFFFF;
    background: linear-gradient(
        90deg,
        #4d4c4c 0%,
        #ffffff 25%,
        #ffffff 50%,
        #ffffff 75%,
        #4d4c4c 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
}

@keyframes anim-lineUp {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }
    20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translateY(0%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes shine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


.about-lead {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: inherit;
    margin-bottom: 1rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-desc {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #AEAEAE;
    margin-bottom: 1.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}
.hero-btn-about {
    font-family: 'Lexend', sans-serif;
    color: #000000 !important;
    background: #D9D9D9;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-btn-about:hover {
        background: transparent ;
        color: #FFFFFF !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);

        background: linear-gradient(
        90deg,
        #000000 0%,
        #000000 25%,
        #000000 50%,
        #000000 75%,
        #ffffff33 100%
    );
    background-size: 200% 100%;
    -webkit-text-fill-color: white;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
    }



@media (max-width: 1024px) {
    .hero-btn-about {
        width: 90% !important;
        justify-content: center;
    }
}
@media (min-width: 300px) and (max-width: 980px) {
    .about-section {
        padding-bottom: 0.5rem;
    }
    .about-video {
        max-width: 100%;
        height: 350px;
        object-fit: cover;
        background: #222;
        border-radius: 0.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        min-width: 300px;
        margin-top: -2rem;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }

    .about-content {
        padding: 30px 30px 0 30px; /* top, right, bottom, left */
    }
    .about-btn {
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }
    .about-title,
    .about-lead,
    .about-desc,
    .about-label {
        transform: none !important;
        text-align: center;
    }
}

@media (min-width: 1024px) and (max-width: 1120px) {
    .about-content {
        padding: 20px;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }
}

/* Team Section Styles */
.team-section {
    background-color: #111;
    color: #fff;
    padding-top: 3rem;
    padding-bottom: 0;
    margin-bottom: 0;
}

.team-intro {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.team-intro-icon {
    height: 0.8em;
    margin-left: -0.3em;
    position: relative;
    top: -0.4em;
     animation: clickSimulate 1.5s ease-in-out infinite;
}

@keyframes clickSimulate {
    0%, 90%, 100% {
        transform: translateY(0) scale(1);
    }
    5% {
        transform: translateY(5px) scale(.25);
    }
    10% {
        transform: translateY(0) scale(1);
    }

}

.team-desc {
    font-size: 1rem;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
}

.team-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    font-size: 22vw;
    line-height: 1;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    margin-top: 12rem;
    padding: 0;
    display: block;
    width: 100%;
    word-break: break-word;
    transform: translateY(-120px);
}

/* Keyframes for smooth gradient shifting */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Shared styling for all category titles */
.leaders-category,
.marketing-category,
.technicians-category,
.admin-category,
.developers-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    line-height: 1;
    text-align: center;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    background-image: linear-gradient(90deg, #74FEBD, #2FA2B7, #4B18E3, #FDFDFD);
    background-size: 400% 100%;
    background-repeat: no-repeat;
    animation: gradientShift 4s linear infinite;
}

.leaders-category {
    margin-top: 13rem;
    transform: translateY(-125px);
    font-size: 320px;
    animation-delay: 0s;
}

.admin-category {
    margin-top: 1rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.marketing-category {
    margin-top: -3rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.technicians-category {
    margin-top: -1rem;
    transform: translateY(-175px);
    font-size: 195px;
    animation-delay: 1s;
}

.developers-category {
    margin-top: -3rem;
    transform: translateY(-170px);
    font-size: 210px;
    animation-delay: 1.5s;
}

.leaders-group,
.admin-group,
.marketing-group,
.technicians-group,
.developers-group {
    margin-bottom: 3rem;
}

.team-wrapper {
    margin-top: -120px;
    padding-bottom: 200px;
    position: relative;
}

.team-img {
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    margin-bottom: 1rem;
    margin-right: 0;
    transform: translateY(-245px);
}



.team-name {
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-230px);
    text-align: center;
    white-space: nowrap;
    animation: lights 5s 750ms linear infinite;
}


    @keyframes lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
}


.team-role {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-215px);
    text-align: center;
}

.row.justify-content-center > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
}

    .row.justify-content-center > [class*="col-"]:first-child {
        margin-left: 0;
    }

@media (max-width: 1280px) {
    .team-category,
    .leaders-category,
    .admin-category,
    .marketing-category,
    .technicians-category,
    .developers-category {
        margin-top: 3rem;
        transform: translateY(0);
    }

    .leaders-category {
        font-size: 16vw;
    }

    .marketing-category {
        font-size: 13vw;
    }

    .technicians-category {
        font-size: 13vw;
    }

    .admin-category{
        font-size: 13vw;
    }

    .developers-category {
        font-size: 13vw;
    }

    .team-img {
        width: 120px;
        height: 120px;
        transform: none;
    }

    .team-name,
    .team-role {
        transform: none;
        font-size: 18px;
    }

    .row.justify-content-center > [class*="col-"] {
        margin-left: 0;
    }
}


/* Join Team Section  */
.bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    top: 0;
    left: 0;
}

.bubble {
    position: absolute;
    bottom: -100px;
    width: 40px;
    height: 40px;
    background: #000000;
    border-radius: 50%;
    opacity: 0.5;
    animation: rise 10s infinite ease-in;
}

    .bubble:nth-child(1) {
        width: 40px;
        height: 40px;
        left: 10%;
        animation-duration: 8s;
    }

    .bubble:nth-child(2) {
        width: 20px;
        height: 20px;
        left: 20%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(3) {
        width: 50px;
        height: 50px;
        left: 35%;
        animation-duration: 7s;
        animation-delay: 2s;
    }

    .bubble:nth-child(4) {
        width: 80px;
        height: 80px;
        left: 50%;
        animation-duration: 11s;
        animation-delay: 0s;
    }

    .bubble:nth-child(5) {
        width: 35px;
        height: 35px;
        left: 55%;
        animation-duration: 6s;
        animation-delay: 1s;
    }

    .bubble:nth-child(6) {
        width: 45px;
        height: 45px;
        left: 65%;
        animation-duration: 8s;
        animation-delay: 3s;
    }

    .bubble:nth-child(7) {
        width: 90px;
        height: 90px;
        left: 70%;
        animation-duration: 12s;
        animation-delay: 2s;
    }

    .bubble:nth-child(8) {
        width: 25px;
        height: 25px;
        left: 80%;
        animation-duration: 6s;
        animation-delay: 2s;
    }

    .bubble:nth-child(9) {
        width: 15px;
        height: 15px;
        left: 70%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(10) {
        width: 90px;
        height: 90px;
        left: 25%;
        animation-duration: 10s;
        animation-delay: 4s;
    }

@keyframes rise {
    0% {
        bottom: -100px;
        transform: translateX(0);
    }

    50% {
        transform: translate(100px);
    }

    100% {
        bottom: 1080px;
        transform: translateX(-200px);
    }
}

@keyframes anime {
    0% {
        top: 0;
    }

    50% {
        top: -1800px;
    }
    /* 200 - 2000 */
    100% {
        top: 0;
    }
}

/* join-team-section with its background and overlay */
.join-team-section {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, #7B9FFF 0%, #E17BCF 100%);
    background-size: 200% 200%;
    animation: joinGradientMove 3s linear infinite;
    padding: 4rem 1rem;
    color: #fff;
    margin-top: -25em;
    text-align: center;
}

    .join-team-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.1);
        pointer-events: none;
        z-index: 0;
        border-radius: inherit;
    }

/* animate join-team-section gradient background */
@keyframes joinGradientMove {
    0% {
        background-position: 0% 50%;
    }

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

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

.join-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 3rem;
    line-height: 1;
    color: #FDFDFD;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.join-btn {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1;
    color: #FDFDFD;
    border: 2px solid #fff;
    border-radius: 32px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: all 0.3s ease;
    padding: 0.75em 2em;
    background: transparent;
    margin-top: 3em;
    position: relative;
}

    .join-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }

.join-arrow-img {
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin-left: 0.3em;
}

@media (max-width: 1280px) {
    .join-team-section {
        margin-top: -13rem;
    }
}
/* END ABOUT CSS THAT WAS REPLACED */

/* =============== CONTACT US ================= */

@keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        @keyframes rainbowBorder {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes rainbowGlow {
            0% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
            14% { border-color: #ff7700; box-shadow: 0 0 20px rgba(255, 119, 0, 0.5); }
            28% { border-color: #ffff00; box-shadow: 0 0 20px rgba(255, 255, 0, 0.5); }
            42% { border-color: #00ff00; box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); }
            56% { border-color: #0000ff; box-shadow: 0 0 20px rgba(0, 0, 255, 0.5); }
            70% { border-color: #4b0082; box-shadow: 0 0 20px rgba(75, 0, 130, 0.5); }
            84% { border-color: #9400d3; box-shadow: 0 0 20px rgba(148, 0, 211, 0.5); }
            100% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
        }

        .banner-top-area {
            position: relative;
            min-height: 300px;
            height: clamp(250px, 55vh, 550px);
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('/images/blogs/blogs-landpage/blog-carousel-2.jpg') center/cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: clamp(15px, 4vw, 150px);
            animation: fadeInDown 1s ease-out;

            /* New properties for the fade-out effect at both top and bottom */
            mask-image: linear-gradient(
                to bottom,
                transparent 0%,  /* Start fully transparent (top fade-out) */
                black 10%,        /* Become fully visible at 5% */
                black 85%,       /* Stay fully visible until 95% */
                transparent 100% /* Become fully transparent (bottom fade-out) */
            );
            overflow: hidden;

        }

        .banner-top-area h1 {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(28px, 7vw, 65px);
            font-weight: 700;
            color: white;
            animation: fadeInDown 1s ease-out;
        }

        .send-us h2 {
            font-family: "Space Grotesk";
            font-size: clamp(24px, 5vw, 36px);
            font-weight: 600;
            margin-bottom: clamp(20px, 4vw, 45px); 
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        .reach-us-main-container {
            max-width: 1200px;
            margin: clamp(-120px, -18vw, -250px) auto 60px;
            padding: 0 clamp(12px, 2.5vw, 20px);
            position: relative;
            z-index: 100;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
        }

        .dual-panel-layout {
            box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
            display: grid;
            grid-template-columns: 1fr;
            overflow: hidden;
            position: relative;
            padding: 2px;
            background: linear-gradient(90deg, 
                #ff0000, #ff7700, #ffff00, #00ff00, 
                #0000ff, #4b0082, #9400d3, #ff0000);
            background-size: 200% 200%;
            animation: rainbowBorder 3s linear infinite;
        }

        @media (min-width: 1024px) {
            .dual-panel-layout {
                grid-template-columns: 1.5fr 1fr;
            }
        }

        .dual-panel-layout::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            border-radius: 18px;
            background: rgb(8, 8, 8);
            z-index: 1;
        }

        .input-panel-wrapper {
            padding: clamp(25px, 5vw, 60px) clamp(18px, 5vw, 80px);
            background: rgb(8, 8, 8);
            position: relative;
            z-index: 2;
        }

        .field-container {
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        .dual-field-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 20px);
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        @media (min-width: 640px) {
            .dual-field-row {
                grid-template-columns: 1fr 1fr;
            }
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: white;
            font-family: "Lexend", sans-serif;
            font-weight: 500;
            font-size: clamp(14px, 2vw, 16px);
        }

        input, textarea {
            color: white;
            font-family: "Lexend", sans-serif;
            width: 100%;
            padding: clamp(12px, 2vw, 15px) clamp(15px, 2.5vw, 20px);
            border: 1px solid gray;
            border-radius: 10px;
            background: rgb(15, 15, 15);
            font-size: clamp(14px, 2vw, 16px);
            transition: all 0.3s ease;
        }

        input:hover, textarea:hover,
        input:focus, textarea:focus {
            outline: none;
            animation: rainbowGlow 2s linear infinite;
        }

        textarea {
            resize: vertical;
            min-height: clamp(120px, 20vw, 150px);
        }

        .action-button-primary {
            display: block;
            margin: 0 auto;
            width: min(100%, 300px);
            max-width: 100%;
            height: 50px;
            padding: 10px 20px;
            font-family: "Lexend", sans-serif;
            background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: clamp(15px, 2vw, 17px);
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        @media (min-width: 640px) {
            .action-button-primary {
                width: 60%;
            }
        }

        @media (min-width: 1024px) {
            .action-button-primary {
                width: 40%;
            }
        }

        .action-button-primary:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 5px 7px rgba(172, 56, 56, 0.7),
                        0 0 8px rgba(172, 56, 56, 0.4);
        }

        .details-panel-wrapper {
            padding: clamp(30px, 5vw, 50px);
            background: rgb(4, 4, 4);
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 2;
        }

        .details-panel-wrapper h2 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(28px, 5vw, 36px);
            font-weight: 600;
            margin-top: clamp(15px, 3vw, 35px);
            margin-left: 0;
            margin-bottom: 20px;
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        @media (min-width: 768px) {
            .details-panel-wrapper h2 {
                margin-left: clamp(0px, 4vw, 55px);
            }
        }

        .details-card-item {
            background: rgb(15, 15, 15);
            padding: clamp(15px, 3vw, 20px);
            width: 100%;
            max-width: 300px;
            border-radius: 15px;
            margin-bottom: clamp(20px, 4vw, 30px);
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .details-card-item {
                max-width: 100%;
            }
        }

        .details-card-item:nth-child(1) {
            animation: floatAlt 4s ease-in-out infinite;
        }

        .details-card-item:nth-child(2) {
            animation: floatAlt 5s ease-in-out infinite;
        }

        .details-card-item:nth-child(3) {
            animation: floatAlt 4.5s ease-in-out infinite;
        }

        .details-card-item h3 {
            font-size: clamp(18px, 3vw, 23px);
            margin-bottom: clamp(12px, 2vw, 20px);
            color: white;
            font-family: "Space Grotesk", sans-serif;
        }

        .details-card-item p {
            color: #8a8a8a;
            font-size: clamp(13px, 2vw, 15px);
            font-family: "Lexend", sans-serif;
            line-height: 1.5;
            margin: 5px 0;
        }

        .scroll-animate {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .scroll-animate.active {
            opacity: 1;
            transform: translateY(0);
        }

        .map-section {
            padding: clamp(30px, 7vw, 70px);
            width: 95%;
            max-width: 1400px;
            margin: 0 auto;
        }

        .where-to h1 {
            color: white;
            font-size: clamp(28px, 6vw, 46px);
            font-weight: 700;
            font-family: "Space Grotesk";
            padding-left: clamp(10px, 3vw, 45px);
            margin-bottom: 20px;
        }

        .where-to iframe {
            padding: clamp(10px, 3vw, 28px);
            height: clamp(300px, 50vw, 600px);
            width: 100%;
            border-radius: clamp(20px, 5vw, 50px);
        }

        @media (max-width: 640px) {
            .banner-top-area {
                min-height: 220px;
                height: 40vh;
            }

            .reach-us-main-container {
                margin-top: -80px;
                margin-bottom: 40px;
            }

            .input-panel-wrapper {
                padding: 25px 18px;
            }

            .details-panel-wrapper {
                padding: 25px 18px;
            }

            .send-us h2 {
                margin-bottom: 20px;
            }

            .details-panel-wrapper h2 {
                margin-top: 10px;
                margin-bottom: 15px;
            }

            .details-card-item {
                margin-bottom: 18px;
            }

            .map-section {
                padding: 30px 15px;
            }

            .where-to iframe {
                padding: 12px;
                border-radius: 20px;
            }
        }

/* ================ END ===================== */

/* Contact Us Style V1 */
/* Container */
.contact-container {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* Shared Panel Styles */
.contact-panel {
    flex: 1;
    font-family: 'Lexend', sans-serif;
    background: #090909;
    color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* LEFT PANEL */
.contact-left-panel {
    margin-left: 2rem;
    border-radius: 1rem 0 0 1rem;
    z-index: 1;
}

    /* Border animation */
    .contact-left-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2px;
        background: linear-gradient(270deg, red, orange, yellow, lime, cyan, blue, violet, red);
        background-size: 400% 400%;
        animation: animated-border 8s linear infinite;
        border-radius: 1rem 0 0 1rem;
        box-sizing: border-box;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
    }

    /* Soft glow */
    .contact-left-panel::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 0 25px rgba(255,255,255,0.07), 0 0 60px rgba(255,255,255,0.05);
        border-radius: 1rem 0 0 1rem;
        z-index: -2;
    }

/* Animate background border */
@keyframes animated-border {
    0% {
        background-position: 0% 50%;
    }

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

/* Content Wrapper (with spacing) */
.contact-left-inner,
.contact-right-inner {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Title & subtitle alignment */
.contact-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.contact-subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* CONTACT ITEMS */
.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.icon {
    margin-left: 3rem;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
}

    .icon img {
        width: 100%;
        height: auto;
    }

    .icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-left: 5rem;
        width: 6rem;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-50%);
    }

.info {
    margin-left: 14rem;
    flex: 1;
}

    .info h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .info p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0.2rem 0;
    }

/* SOCIAL ICONS */
.social-icons {
    margin-top: 2rem;
    display: flex;
    gap: 0.3rem;
}

.social-icon img {
    width: 1.5rem;
    height: 1.5rem;
}

/* RIGHT PANEL */
.contact-right-panel {
    margin-right: 2rem;
    border-radius: 0 1rem 1rem 0;
    z-index: 1;
}

.inquiry-options {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.inquiry-option {
    position: relative;
}

    .inquiry-option input[type="radio"] {
        display: none;
    }

    .inquiry-option span {
        display: inline-block;
        padding: 0.5rem 1.25rem;
        border: 2px solid white;
        color: white;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        cursor: pointer;
        background-color: transparent;
    }

    /* Gradient style when checked OR hovered */
    .inquiry-option input[type="radio"]:checked + .inquiry-str1,
    .inquiry-str1:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
        box-shadow: 0 0 4px rgba(123, 242, 255, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str2,
    .inquiry-str2:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
        box-shadow: 0 0 4px rgba(189, 5, 149, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str3,
    .inquiry-str3:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
        box-shadow: 0 0 4px rgba(81, 249, 59, 0.25);
    }

/* Form fields */
.form-group {
    margin-bottom: 1.5rem;
}

    .form-group input,
    .form-group textarea {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid white;
        color: white;
        font-size: 0.95rem;
        padding: 0.5rem 0;
        outline: none;
    }

textarea {
    resize: vertical;
    min-height: 80px;
}

/* Update preference radios */
.radio-group {
    margin-bottom: 2rem;
}

    .radio-group label {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .radio-group input[type="radio"] {
        margin-right: 0.5rem;
    }

/*Submit Button*/
.submit-button {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.95rem;
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Lexend', sans-serif;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

    /* Gradient fill on hover */
    .submit-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #d8b4fe, #a5f3fc, #bbf7d0);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 2rem;
    }

    .submit-button:hover::before {
        opacity: 1;
    }

    .submit-button:hover {
        color: black;
        font-weight: bold;
    }

/* ===== Responsive Layout ===== */
@media (max-width: 1024px) {
    .contact-left-inner,
    .contact-right-inner {
        padding: 1.5rem;
    }

    .info {
        margin-left: 10rem;
    }

    .icon::after {
        margin-left: 2rem;
        width: 3rem;
    }
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-left-panel,
    .contact-right-panel {
        margin: 1rem 1rem 0 1rem;
        border-radius: 1rem;
    }

        .contact-left-panel::before,
        .contact-left-panel::after,
        .contact-right-panel::before,
        .contact-right-panel::after {
            border-radius: 1rem !important;
        }

    .contact-title {
        font-size: 1.3rem;
    }

    .info {
        margin-left: 6rem;
    }

    .icon {
        margin-left: 1.5rem;
        width: 2rem;
        height: 2rem;
    }

        .icon::after {
            display: none;
        }

    .form-group input,
    .form-group textarea {
        font-size: 0.9rem;
    }

    .submit-button {
        font-size: 0.9rem;
    }

    .inquiry-options {
        flex-direction: column;
    }

    .inquiry-option span {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .info h3 {
        font-size: 1rem;
    }

    .info p {
        font-size: 0.85rem;
    }

    .contact-title {
        font-size: 1.2rem;
    }

    .social-icons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .social-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .radio-group label {
        font-size: 0.85rem;
    }

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

/* Sync Rainbow Texts - Right to Left */
@keyframes gradientCycletext {
    0% {
        background-position: 100% 50%;
    }

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

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

.glow-gradient-text {
    background: linear-gradient( 90deg, #FF6666 0%, #FF8A66 16.66%, #FFF266 33.33%, #85FF66 50%, #66BFFF 66.66%, #9966FF 83.33%, #FF66C7 100% );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    animation: gradientCycletext 6s ease-in-out infinite;
}

/*Blogs Carousel*/
.BlogLandPage .carousel-inner,
.BlogLandPage .carousel-item,
.BlogLandPage .blogsCarousel-img {
    height: 500px;
    width: 100%;
    bottom: 50px;
    
}

.BlogLandPage .blogsCarousel-img {
    object-fit: cover; 
}

/*Latest Product*/
.LatestProduct {
    background-color: #000000;
    padding: 80px 20px;
}

.title-LatestProduct {
    color: #FFF;
    font-size: 34px;
    font-weight: 600;
}
.card-productName {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productPrice {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productStatus {
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
}
.card-product.card {
    border: 1px solid;
    border-color: #D9D9D9;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-product.card:hover {
    border-radius: 15px;
    background: linear-gradient(#000, #000) padding-box, 
    linear-gradient(90deg, #8409B4, #BD0595, #BD052D) border-box; 
    border: 3px solid transparent;
}
.btn-LastestProduct {
    background: transparent;
    color: #FDFDFD;
    border: none;
    border-radius: 10px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
.btn-check:checked + .btn-LastestProduct:hover {
    background: #FDFDFD;
    color: #090909;
    border: none;
}
.btn-check:not(:checked) + .btn-LastestProduct:hover {
    border: 1px solid #FDFDFD;
    color: #FDFDFD;
}

.btn-check:checked + .btn-LastestProduct {
    background: #FDFDFD;
    color: #090909;
    border: none;
}

/* Custom CSS for Trending Gadgets & DPC Updates */

/* Font Definitions */
.space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

.lexend {
    font-family: 'Lexend', sans-serif;
}

/* Main Container */
.tech-showcase-container {
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
    min-height: 100vh;
    padding: 80px 0;
    overflow: hidden;
}

/* Section Headers */
.tech-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.tech-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.tech-view-all {
    color: #64748b;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tech-view-all:hover {
        color: #3b82f6;
        transform: translateX(5px);
    }

/* Trending Gadgets Section */
.trending-gadgets-section {
    margin-bottom: 80px;
}

.trending-card {
    background: #000000;
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

    .trending-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .trending-card:hover::before {
        opacity: 1;
    }

    .trending-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .trending-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.trending-card-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.trending-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

    .trending-card-icon i {
        font-size: 2rem;
        color: white;
    }

.trending-card-info {
    flex: 1;
}

.trending-card-category {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .trending-card-category.mobile-tech {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .trending-card-category.gaming {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }

    .trending-card-category.smart-home {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.trending-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.trending-card-description {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
}

.trending-card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #64748b;
}

.trending-card-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.trending-card-arrow {
    margin-left: auto;
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.trending-card:hover .trending-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* DPC Updates Section */
.dpc-updates-section {
    margin-top: 80px;
}

.dpc-update-card {
    background: #000000;
    border-radius: 20px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 250px;
}

    .dpc-update-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(147, 51, 234, 0.8) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .dpc-update-card:hover::before {
        opacity: 0.3;
    }

    .dpc-update-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .dpc-update-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.dpc-card-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.dpc-update-card:hover .dpc-card-background {
    transform: scale(1.05);
}

.dpc-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
}

.dpc-card-content {
    position: relative;
    z-index: 3;
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dpc-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.dpc-card-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .dpc-card-status.upcoming {
        background: rgba(59, 130, 246, 0.2);
        color: #3b82f6;
    }

    .dpc-card-status.product-launch {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .dpc-card-status.partnership {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.dpc-card-countdown {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: auto;
}

.dpc-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}

.dpc-card-description {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.dpc-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.dpc-card-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.dpc-card-date, .dpc-card-location {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dpc-card-arrow {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.dpc-update-card:hover .dpc-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* Modal Styles */
.dpc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .dpc-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.dpc-modal-content {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.dpc-modal-overlay.active .dpc-modal-content {
    transform: scale(1);
}

.dpc-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .dpc-modal-close:hover {
        background: #ef4444;
        color: white;
    }

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

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

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

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

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

    .trending-card-content {
        flex-direction: column;
        text-align: center;
    }

    .trending-card-icon {
        width: 60px;
        height: 60px;
    }

        .trending-card-icon i {
            font-size: 1.5rem;
        }

    .dpc-card-content {
        padding: 20px;
    }

    .dpc-card-title {
        font-size: 1.3rem;
    }

    .dpc-modal-content {
        padding: 30px;
        margin: 20px;
    }
}


        .blog-section-blog-post {
            padding: 60px 0;
            background-color: #000000;
        }

        .section-header-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .section-title-blog-post {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 0;
        }

        .view-all-link-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .view-all-link-blog-post:hover {
            color: #66b3ff;
        }

        .featured-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            height: 400px;
            margin-bottom: 40px;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .featured-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .featured-image-blog-post {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

        .featured-overlay-blog-post {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            padding: 40px 30px 30px;
        }

        .featured-category-blog-post {
            background-color: #4a9eff;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            display: inline-block;
            margin-bottom: 15px;
        }

        .featured-title-blog-post {
            font-size: 2rem;
            font-weight: bold;
            margin: 0;
            color: white;
        }

        .blog-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }

        .blog-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

        .blog-card-image-blog-post {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .blog-card-content-blog-post {
            padding: 25px;
        }

        .blog-card-meta-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .blog-card-category-blog-post {
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
            color: white;
        }

        .gaming-blog-post { background-color: #00ff88; color: #000; }
        .ai-vr-blog-post { background-color: #4a9eff; }
        .security-blog-post { background-color: #ff6b6b; }

        .blog-card-date-blog-post {
            color: #888;
            font-size: 0.9rem;
        }

        .blog-card-title-blog-post {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 12px;
            color: white;
        }

        .blog-card-excerpt-blog-post {
            color: #ccc;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .read-more-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .read-more-blog-post:hover {
            color: #66b3ff;
        }

        .sidebar-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            padding: 30px;
            border: 1px solid #333;
            margin-bottom: 30px;
        }

        .sidebar-title-blog-post {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 25px;
            color: white;
        }

        .trending-item-blog-post {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #333;
        }

        .trending-item-blog-post:last-child {
            border-bottom: none;
        }

        .trending-number-blog-post {
            background-color: #4a9eff;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .trending-content-blog-post h6 {
            margin: 0;
            font-weight: 600;
            color: white;
        }

        .trending-content-blog-post small {
            color: #888;
        }

        .category-tag-blog-post {
            background-color: #333;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 0.9rem;
            margin: 5px;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .category-tag-blog-post:hover {
            background-color: #4a9eff;
            color: white;
        }

        .arrow-icon-blog-post {
            margin-left: 8px;
        }

        @media (max-width: 768px) {
            .section-header-blog-post {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

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

            .featured-card-blog-post {
                height: 300px;
            }

            .featured-title-blog-post {
                font-size: 1.5rem;
            }
        }

        .chat-widget-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }

        .chat-toggle-btn {
            width: 60px;
            height: 60px;
            background-color: white;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            overflow: hidden;
            padding: 8px;
        }

        .chat-toggle-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .chat-toggle-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .chat-window {
            position: fixed;
            bottom: 100px;
            right: 20px;
            width: 350px;
            height: 500px;
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            transform: translateY(100%) scale(0.8);
            opacity: 0;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            z-index: 1001;
            overflow: hidden;
        }

        .chat-window.active {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .chat-header {
            background-color: #000;
            color: #fff;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 20px 20px 0 0;
        }

        .chat-header-info {
            display: flex;
            align-items: center;
        }

        .assistant-avatar {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            overflow: hidden;
        }

        .assistant-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .chat-header-text h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .status-indicator {
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background-color: #00ff88;
            border-radius: 50%;
            margin-right: 8px;
        }

        .close-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            background-image: url('/images/dpcbits10.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .chat-body {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f8f8f8;
        }

        .message {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
        }

        .message.bot .message-avatar {
            background-color: #000;
            color: #fff;
            overflow: hidden;
        }

        .message.bot .message-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .message.user .message-avatar {
            background-color: #fff;
            color: #000;
            border: 2px solid #000;
            margin-right: 0;
            margin-left: 12px;
        }

        .message-content {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.4;
        }

        .message.bot .message-content {
            background-color: #fff;
            color: #000;
            border: 1px solid #e0e0e0;
        }

        .message.user .message-content {
            background-color: #000;
            color: #fff;
        }

        .quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }

        .quick-reply-btn {
            background-color: #fff;
            border: 2px solid #000;
            color: #000;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Space Grotesk', sans-serif;
        }

        .quick-reply-btn:hover {
            background-color: #000;
            color: #fff;
        }

        .chat-input-container {
            padding: 20px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
        }

        .chat-input-wrapper {
            display: flex;
            align-items: center;
            background-color: #f8f8f8;
            border-radius: 25px;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            transition: border-color 0.3s ease;
        }

        .chat-input-wrapper:focus-within {
            border-color: #000;
        }

        .chat-input {
            flex: 1;
            border: none;
            background: none;
            outline: none;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            color: #000;
        }

        .chat-input::placeholder {
            color: #999;
        }

        .send-btn {
            background-color: #000;
            border: none;
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
            font-size: 16px;
            transition: transform 0.2s ease;
        }

        .send-btn:hover {
            transform: scale(1.1);
        }

        .typing-indicator {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background-color: #fff;
            border-radius: 16px;
            margin-left: 44px;
            width: fit-content;
            border: 1px solid #e0e0e0;
        }

        .typing-dots {
            display: flex;
            gap: 4px;
        }

        .typing-dot {
            width: 6px;
            height: 6px;
            background-color: #999;
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-10px); opacity: 1; }
        }

        /* Mobile responsiveness */
        @media (max-width: 768px) {
            .chat-window {
                width: calc(100vw - 40px);
                height: 500px;
                right: 20px;
                bottom: 100px;
            }

            .message-content {
                max-width: 85%;
            }
        }        

        .company-info-section {
            background: #000000;
            color: #ffffff;
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        
        .company-info-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
            pointer-events: none;
        }
        
        /* 3D Hero Animation */
        .hero-3d-container {
            position: relative;
            height: 800px;
            margin-bottom: 2rem;
        }
        
        .hero-3d-scene {
            width: 100%;
            height: 100%;
            perspective: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .floating-cube {
            width: 100px;
            height: 100px;
            position: absolute;
            transform-style: preserve-3d;
            animation: floatRotate 6s ease-in-out infinite;
        }
        
        .cube-face {
            position: absolute;
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border: 1px solid rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
        }
        
        .cube-face.front { transform: rotateY(0deg) translateZ(50px); }
        .cube-face.back { transform: rotateY(180deg) translateZ(50px); }
        .cube-face.right { transform: rotateY(90deg) translateZ(50px); }
        .cube-face.left { transform: rotateY(-90deg) translateZ(50px); }
        .cube-face.top { transform: rotateX(90deg) translateZ(50px); }
        .cube-face.bottom { transform: rotateX(-90deg) translateZ(50px); }
        
        .floating-cube:nth-child(1) {
            top: 10%;
            left: 20%;
            animation-delay: 0s;
        }
        
        .floating-cube:nth-child(2) {
            top: 60%;
            right: 15%;
            animation-delay: 2s;
            transform: scale(0.7);
        }
        
        .floating-cube:nth-child(3) {
            top: 30%;
            left: 70%;
            animation-delay: 4s;
            transform: scale(0.5);
        }
        
        @keyframes floatRotate {
            0%, 100% {
                transform: translateY(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            25% {
                transform: translateY(-20px) rotateX(90deg) rotateY(45deg) rotateZ(45deg);
            }
            50% {
                transform: translateY(0px) rotateX(180deg) rotateY(90deg) rotateZ(90deg);
            }
            75% {
                transform: translateY(20px) rotateX(270deg) rotateY(135deg) rotateZ(135deg);
            }
        }
        
        .company-hero {
            text-align: center;
            margin-bottom: 60px;
        }
        
/* Option 1: Smooth Fade-in with Slide Up */
        .hero-option-1 .company-hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff, #e0e0e0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            
            /* Animation */
            animation: fadeInSlideUp 1.2s ease-out forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        .hero-option-1 .company-hero p {
            font-size: 1.25rem;
            font-weight: 300;
            opacity: 0;
            max-width: 600px;
            margin: 0 auto;
            color: rgba(255,255,255,0.9);
            
            /* Animation with delay */
            animation: fadeInSlideUp 1.2s ease-out 0.3s forwards;
            transform: translateY(30px);
        }

        @keyframes fadeInSlideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .info-card {
            background: #ffffff;
            color: #000000;
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: none;
            box-shadow: 0 10px 30px rgba(255,255,255,0.1);
            transition: all 0.3s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .info-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, rgba(0,0,0,0.05), transparent);
            border-radius: 50%;
            transition: all 0.3s ease;
            transform: scale(0);
        }
        
        .info-card:hover::before {
            transform: scale(3);
        }
        
        .info-card:hover {
            transform: translateY(-5px) rotateX(2deg);
            box-shadow: 0 20px 40px rgba(255,255,255,0.15);
        }
        
        /* 3D Service Cards */
        .service-item {
            background: rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.4s ease;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .service-item::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 50%;
            transform: translate(-50%, -50%) translateZ(20px);
            transition: all 0.4s ease;
            z-index: 0;
        }
        
        .service-item:hover {
            background: rgba(255,255,255,0.12);
            transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
            box-shadow: 
                0 20px 40px rgba(255,255,255,0.1),
                0 0 0 1px rgba(255,255,255,0.2);
        }
        
        .service-item:hover::before {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
            transform: translate(-50%, -50%) translateZ(30px) rotateZ(180deg);
        }
        
        .service-item h4,
        .service-item p {
            position: relative;
            z-index: 2;
        }
        .info-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #000000;
            position: relative;
            z-index: 2;
        }
        
        .info-card p, .info-card li {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
            color: #333333;
            position: relative;
            z-index: 2;
        }
        
        .info-card ul {
            padding-left: 1.25rem;
            margin-bottom: 0;
            position: relative;
            z-index: 2;
        }
        
        .info-card li {
            margin-bottom: 0.5rem;
        }
        
        .services-grid {
            margin-top: 3rem;
        }
        
        /* 3D Icons for Services */
        .service-icon {
            width: 120px;
            height: 80px;
            margin: 0 auto 1rem auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all 0.4s ease;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 12px;
            overflow: hidden;
        }
        
        .service-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            transition: all 0.4s ease;
            transform: translateZ(10px);
        }
        
        .service-item:hover .service-icon {
            transform: rotateX(5deg) rotateY(5deg) scale(1.05);
        }
        
        .service-item:hover .service-icon img {
            transform: translateZ(15px) scale(1.1);
        }
        
        .icon-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.3), transparent);
            border-radius: 12px;
            transition: all 0.4s ease;
            z-index: 2;
        }
        
        .service-item:hover .icon-overlay {
            background: linear-gradient(135deg, rgba(0,0,0,0.1), transparent);
        }
        
        .stats-container {
            background: rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 2rem;
            margin: 3rem 5rem;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .stat-item {
            text-align: center;
            margin-bottom: 1rem;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #ffffff;
            display: block;
        }
        
        .stat-label {
            font-size: 0.9rem;
            font-weight: 400;
            opacity: 0.7;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        @media (max-width: 768px) {
            .company-hero h1 {
                font-size: 2.5rem;
            }
            
            .info-card {
                padding: 1.5rem;
            }
            
            .stat-number {
                font-size: 2rem;
            }
        } 
        
/* Hero Section - Break out of container constraints */
.hero-section {
    position: relative;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    margin-left: calc(-50vw + 50%); /* Center and break out of parent container */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    font-family: 'League Spartan', sans-serif;
}

/* Remove container constraints completely for hero section */
.hero-section .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Hero Video - Cover entire viewport */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Override any parent container constraints that might affect the hero */
.company-info-section .container {
    max-width: none;
    padding: 0;
    overflow: visible;
}

/* Alternative approach - if above doesn't work, use this instead */
.hero-section-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
}

.hero-section-fullscreen .hero-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}     

 .container {
            position: relative;
            z-index: 100;
        }

        /* Filter Buttons */
        .btn-LastestProduct {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: #495057;
            transition: var(--transition-smooth);
            border-radius: 50px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-LastestProduct:hover {
            background: rgba(255, 255, 255, 1);
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
        }

        .btn-check:checked + .btn-LastestProduct {
            background: var(--gradient-bg);
            border-color: transparent;
            color: white;
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
        }

        /* Slider Container */
        .cards-slider-container {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            background: #000000;
            backdrop-filter: blur(20px);
            padding: 2rem;
            margin-top: 2rem;
            margin-left: -15px;
            margin-right: -15px;
            width: calc(100% + 30px);
        }

        .cards-slider {
            display: flex;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            gap: 2rem;
        }

        .card-slide {
            min-width: calc(33.333% - 3.33rem);
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            .card-slide {
                min-width: calc(50% - 2.5rem);
            }
        }

        @media (max-width: 576px) {
            .card-slide {
                min-width: calc(100% - 1rem);
                max-width: 320px;
                margin: 0 auto;
            }
        }

        @media (max-width: 480px) {
            .card-slide {
                min-width: calc(100% - 0.5rem);
                max-width: 280px;
            }
        }

        /* Product Cards */
        .product-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            transition: var(--transition-smooth);
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-bg);
            transform: scaleX(0);
            transition: transform 0.4s ease;
            transform-origin: left;
        }

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

        .product-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: var(--card-hover-shadow);
            border-color: rgba(0, 123, 255, 0.3);
        }

        .product-card:hover .product-icon {
            transform: scale(1.2) rotate(10deg);
            color: var(--primary-color);
        }

        .product-card:hover .product-title {
            color: var(--primary-color);
        }

        .product-card:hover .btn-product {
            transform: scale(1.1);
            background: var(--gradient-bg);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
        }

        .product-icon {
            font-size: 3.5rem;
            background: var(--gradient-bg);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1.5rem;
            transition: var(--transition-smooth);
            /* Fallback for browsers that don't support background-clip */
            color: var(--primary-color);
        }

        /* Ensure icons are visible */
        .product-icon i {
            display: inline-block;
            font-style: normal;
        }

        /* Fallback if Font Awesome doesn't load */
        .product-icon i:before {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", FontAwesome, sans-serif;
            font-weight: 900;
        }

        .product-title {
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 1rem;
            transition: var(--transition-smooth);
            font-size: 1.25rem;
        }

        .product-description {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.6;
            opacity: 0.9;
        }

        .btn-product {
            background: linear-gradient(135deg, #840984 0%, #BD0595 50%, #BD052D 100%);
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            transition: var(--transition-smooth);
            font-weight: 600;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .btn-product::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: left 0.5s;
        }

        .btn-product:hover::before {
            left: 100%;
        }

        /* Navigation Buttons */
        .slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-smooth);
            z-index: 100;
            color: var(--primary-color);
            font-size: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .slider-nav:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 8px 30px rgba(0, 123, 255, 0.3);
        }

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

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

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

        .parallax-element {
            position: absolute;
            background: var(--gradient-bg);
            border-radius: 50%;
            opacity: 0.1;
            animation: float 20s ease-in-out infinite;
        }

        .parallax-element:nth-child(1) {
            width: 100px;
            height: 100px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .parallax-element:nth-child(2) {
            width: 150px;
            height: 150px;
            top: 60%;
            right: 10%;
            animation-delay: -5s;
        }

        .parallax-element:nth-child(3) {
            width: 80px;
            height: 80px;
            bottom: 20%;
            left: 20%;
            animation-delay: -10s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-30px) rotate(120deg); }
            66% { transform: translateY(-60px) rotate(240deg); }
        }

        /* Slider Indicators */
        .slider-indicators {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: var(--transition-smooth);
        }

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

        .indicator:hover {
            background: var(--primary-hover);
            transform: scale(1.1);
        }

        /* Loading Animation */
        .card-slide {
            opacity: 0;
            animation: slideIn 0.8s ease-out forwards;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .category-banner {
            background: linear-gradient(135deg, #1F0206 0%, #660B23 100%);
            border-radius: 20px;
            padding: 30px;
            margin: 40px 0 30px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .category-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: shimmer 3s infinite;
        }
        
        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        .category-banner h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .category-banner p {
            font-size: 1.1rem;
            margin: 10px 0 0 0;
            opacity: 0.9;
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .card-product {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-product:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }        

.setup {
            position: block;
            margin: auto;
            width: 50%;
        }




/* PC - DETAILS */

.main-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.hero-content-container {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;

    
    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/1200x/5b/6d/40/5b6d40fc0b5f754168a8c7f95dba3485.jpg'); 
    background-size: cover;
    background-position: center;
}

.text-overlay {
    position: absolute;
    bottom: 50px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.text-overlay h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.see-more-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 30px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-more-button:hover {
    background-color: #7B54B1;
}

.why-choose-us-section {
    font-family: "Lexend";
    display: flex;
    align-items: center; 
    max-width: 1300px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
    .why-choose-us-section.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .why-choose-us-section.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but the 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }


/* Left Column - Visual Container */
.visual-container {
    flex: 1;
    min-height: 500px;
    background-image: url("../images/products/robot-pc-case.png"); 
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .visual-container:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }

/* Right Column - Content Container */
.content-container {
    flex: 1;
    padding-left: 70px;
}

/* Title Styling */
.title-line-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;

}

/* Feature List Styling */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.feature-list li:hover{
    transform: translateY(-5px) scale(1.05);
}




.feature-icon {
    font-size: 20px; 
    margin-right: 15px;
    color: white; 
    transform: rotate(-15deg); 
}


.benefits-layout {
    font-family: "lexend";
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 60px 20px;
    margin: auto;
}


.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}


.card-description {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.testimonials-section {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto; 
    grid-template-areas: 
        "content visual"
        "button button"; 
    
    gap: 10px; 
    max-width: 1000px; 
    margin: 70px auto; 
    padding: 0 10px; 
    align-items: start;
}

    .testimonials-section.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .testimonials-section.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }



.testimonial-content {
    grid-area: content;
    padding-right: 20px; 
}

.testimonial-heading-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.quote {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.star-rating .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    

    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .star-rating :hover {
        transform: translateY(-5px) scale(1.05);
    }

@keyframes rgbGoldPulse {
    0% {
        text-shadow: 
            0 0 3px rgba(255, 215, 0, 0.7), 
            0 0 3px rgba(255, 165, 0, 0.5);
    }
    50% {
        /* This is the peak, adding the subtle RGB glow */
        text-shadow: 
            0 0 3px rgba(255, 223, 0, 0.8), 
            0 0 3px rgba(255, 175, 0, 0.6),  
            0 0 3px rgba(255, 0, 0, 0.1), 
            0 0 3px rgba(0, 255, 0, 0.1), 
            0 0 3px rgba(0, 0, 255, 0.1);    
    }
    100% {
        text-shadow: 
            0 0 3px rgba(255, 220, 0, 0.75),
            0 0 3px rgba(255, 170, 0, 0.55);
    }
}

/* Product Visual (Right Column) */
.product-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(../images/products/gaming-pc.png); /* REPLACE with your actual image path or URL */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }


/* Button Container (Spans both columns) */


/* See Reviews Button Styling */
.see-reviews-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-reviews-button:hover {
    background-color: #9370DB;
}

.main-promo-bot {
    font-family: "Space Grotesk";
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.hero-content-container-bot {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/736x/f2/04/2c/f2042ce98e8fccbb9383535424e608b4.jpg');      
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.text-overlay-bot {
    position: absolute;
    bottom: 30px;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}

.text-overlay-bot h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

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



@media (min-width: 1400px) {
    .main-promo {
        max-width: 1500px;
    }

    .why-choose-us-section {
        max-width: 1500px;
    }

    .title-line-1 {
        font-size: 2rem; 
    }
    
    .benefits-layout {
        max-width: 1500px;
        gap: 50px;
    }

    .testimonials-section {
        max-width: 1400px;
    }
}

@media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .why-choose-us-section {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-line-1 {
        font-size: 2.8rem; 
    }

    .benefits-layout {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 80px auto;
    }

}

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 30px 40px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 40px;
    }

    .why-choose-us-section {
        padding: 0 30px;
        margin: 60px auto;
    }

    .content-container {
        padding-left: 30px;
    }

    .visual-container {
        min-height: 400px;
    }

    .testimonial-heading-1 {
        font-size: 42px;
    }

    .quote {
        font-size: 30px;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    

    .product-visual {
        min-height: 400px;
    }
}

/* Mobile (up to 768px) */
@media (max-width: 768px) {
    .main-promo {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
        margin-top: -150px;
    }

    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 20px 25px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 28px;
    }


    .why-choose-us-section {
        flex-direction: column;
        padding: 0 20px;
        margin: 40px auto;
        text-align: center;
    }

    .visual-container {
        width: 100%;
        min-height: 350px;
        margin-left: 0;
        margin-bottom: 30px;
        border-width: 8px;
    }

    .content-container {
        padding-left: 0;
        width: 100%;
    }

    .feature-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .feature-list li {
        font-size: 24px;
        line-height: 1.8;
        justify-content: center;
    }

    .feature-icon {
        font-size: 18px;
        margin-right: 10px;
    }

    .benefits-layout {
        font-size: 2rem;
        grid-template-columns: 1fr; /* Stack items vertically */

    }

    .benefit-card {
        min-width: 100%;
    }


    .card-description {
        font-size: 1.5rem;
    }

    .testimonials-section {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "content"
            "visual"
            "button";
        margin: 40px auto;
        padding: 20px;
    }

    .testimonial-content {
        padding-right: 0;
        text-align: center;
    }

    .testimonial-heading-1 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .quote {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .star-rating {
        text-align: center;
        font-size: 20px;
        margin-top: 40px;
    }

    .product-visual {
        min-height: 400px;
        border-width: 8px;
    }

    .button-container {
        margin-top: 20px;
    }

    .main-promo-bot {
        font-size: 2rem;
    }

    .hero-content-container-bot {
        max-width: 768px; /* Ensure it doesn't overflow */
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    .hero-content-container,
    .hero-content-container-bot {
        height: 500px;
        max-width: 100%;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 24px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 15px 20px;
    }


    .title-line-1 {
        font-size: 35px;
    }

    .feature-list li {
        font-size: 20px;
    }

    .testimonials-section {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }
    

    .testimonial-heading-1 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .quote {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .star-rating .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .product-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .testimonial-heading-1 {
        font-size: 24px;
    }

    .quote {
        font-size: 16px;
    }

    .product-visual {
        min-height: 250px;
    }
}



/* custom.html design by PRINCESS*/

.cspcb {
    background-color: #2f8d46;
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-repeat: repeat;
    -webkit-text-fill-color: transparent;
    margin-top: 20px;
    font-size: 80px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 1000;
    -webkit-font-smoothing: antialiased;
    animation: 3s anim-lineUp linear;
}
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-cspcb {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    text-align: center;
    color: white;
    max-width: 1000px;
    margin: 0 auto  3rem;
    line-height: 1.6;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* llllllll */

.projects-images{
    margin: 50px;
    display: inline-block;
}

.projects-img-card1 {
    --g: 4px;     /* the gap */
    --b: 12px;    /* border thickness*/
    --c: indigo; /* the color */
    max-width: 120%;
    height: 20vh;
    margin-block: 4rem;
    display: inline-block;
    align-content: center;
    
    padding: calc(var(--g) + var(--b));
    --_c: #0000 0 25%, var(--c) 0 50%;
    --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
    --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
    background:
    var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
    var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
    background-size: 200% var(--b),var(--b) 200%;
    cursor: pointer;
    filter: grayscale(50%);
    transition: .3s;
}

.projects-img-card1{
    row-gap: 20px; /* Gap between rows (vertical space) */
    column-gap: 10px; /* Optional: Gap between columns (horizontal space) */
}
.projects-img-card1:hover {
  --_p: 75%;
  filter: grayscale(0%);
  --c: #AC3838; /* new color */
}

.projects-img {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    display: block;
    align-content: center;
    width: 100%;

}

.projects-image-title{
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    margin-top: 15px;
}

/*================ CCTV DETAILS ==================*/

.cctv-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; 
    max-width: 2000px; 
    margin: 0px auto 0 auto;
}

.cctv-content-container {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(50, 0, 0, 0.9) 0%, rgba(150, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 100%),
    url('/images/services/cctv.jpg'); 
    background-size: cover;
    background-position: center;
    animation: fadeInUp 1.1s ease-out forwards;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.cctv-text-overlay {
    font-family: "Space Grotesk";
    position: absolute;
    bottom: 30px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
    animation: fadeInUp 0.7s ease-out forwards;
}

.cctv-text-overlay h1 {
    color: white;
    font-size: 64px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    
}

.security-section {
    padding: 20px 20px; 
    text-align: center; 
    width: 100%; 
    
}

.animate-on-scroll .security-section {
    opacity: 0;
    transform: translateY(20px);
}

.animate-on-scroll.is-visible .security-section {
    opacity: 1;
    transform: translateY(0);
}

.section-title {
    font-family: "Lexend"; 
    font-size: 58px; 
    font-weight: 500; 
    margin-bottom: 10px; 
    margin-top: 20px;
}

.section-text {
    font-family:"Space Grotesk"; 
    color: white;
    font-size: 28px;
    line-height: 1.6;
    max-width: 1300px; 
    margin: 10px auto; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 270px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 12px;
    }

    .cctv-text-overlay h1 {
        font-size: 21px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 22px;
    }

    .section-text {
        font-size: 12px;
        max-width: 100%;
        padding: 0 6px;
    }

    .security-section {
        padding: 10px 8px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 285px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 13px 14px;
    }

    .cctv-text-overlay h1 {
        font-size: 23px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 23px;
    }

    .section-text {
        font-size: 12.5px;
        max-width: 100%;
        padding: 0 6px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 300px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 14px 15px;
    }

    .cctv-text-overlay h1 {
        font-size: 25px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 24px;
    }

    .section-text {
        font-size: 13px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 310px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 15px 16px;
    }

    .cctv-text-overlay h1 {
        font-size: 26px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 25px;
    }

    .section-text {
        font-size: 13.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 400px) and (max-width: 412px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 325px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 16px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 28px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 26px;
    }

    .section-text {
        font-size: 14px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 330px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 17px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 29px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 27px;
    }

    .section-text {
        font-size: 14.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 340px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 18px 20px;
    }

    .cctv-text-overlay h1 {
        font-size: 30px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 28px;
    }

    .section-text {
        font-size: 15px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 380px;
        margin-bottom: 25px;
        margin-top: -125px;
    }

    .cctv-text-overlay {
        padding: 20px 25px;
    }

    .cctv-text-overlay h1 {
        font-size: 34px;
    }

    .section-title {
        font-size: 32px;
    }

    .section-text {
        font-size: 17px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 450px;
        margin-bottom: 30px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 25px 30px;
    }

    .cctv-text-overlay h1 {
        font-size: 42px;
    }

    .section-title {
        font-size: 38px;
    }

    .section-text {
        font-size: 20px;
        max-width: 100%;
        padding: 0 15px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 470px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 24px 34px;
    }

    .cctv-text-overlay h1 {
        font-size: 44px;
    }

    .section-title {
        font-size: 39px;
    }

    .section-text {
        font-size: 20.5px;
        max-width: 720px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 490px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 26px 36px;
    }

    .cctv-text-overlay h1 {
        font-size: 46px;
    }

    .section-title {
        font-size: 40px;
    }

    .section-text {
        font-size: 21px;
        max-width: 750px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 510px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 28px 38px;
    }

    .cctv-text-overlay h1 {
        font-size: 48px;
    }

    .section-title {
        font-size: 42px;
    }

    .section-text {
        font-size: 22px;
        max-width: 800px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 530px;
    }

    .cctv-text-overlay {
        padding: 30px 40px;
    }

    .cctv-text-overlay h1 {
        font-size: 50px;
    }

    .section-title {
        font-size: 44px;
    }

    .section-text {
        font-size: 23px;
        max-width: 850px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 550px;
        margin-top: -60px;
    }

    .cctv-text-overlay {
        padding: 30px 45px;
    }

    .cctv-text-overlay h1 {
        font-size: 52px;
    }

    .section-title {
        font-size: 46px;
    }

    .section-text {
        font-size: 24px;
        max-width: 900px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 600px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 35px 50px;
    }

    .cctv-text-overlay h1 {
        font-size: 60px;
    }

    .section-title {
        font-size: 54px;
    }

    .section-text {
        font-size: 26px;
        max-width: 1200px;
    }
}

/* CCTV VIDEO */

.cctv-video {
    position: relative;
    width: 100%; 
    max-width: 2000px; 
    height: 800px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: #000;
    padding-bottom: 30px;
    box-sizing: border-box;
}


#bgVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%); 
    object-fit: cover;
}


.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}


.hero-content-vid {
    position: relative;
    z-index: 3;
    margin-bottom: 0; 
}

.btn-find-out-more {
    font-family: "Lexend"; 
    display: inline-block;
    padding: 5px 40px;
    text-decoration: none;
    font-size: 20px;
    font-weight: light;
    color: #ffffff;
    border-radius: 30px;
    width: 298pxpx;
    height: 45pxpx;
    margin-bottom: 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: linear-gradient(88.78deg, #BA1022 0.07%, #EC0120 50%, #FD6A59 99.93%);
    border: none;
    cursor: pointer;
    animation: buttonEntrancee 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulsee 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes buttonEntrancee {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulsee {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}

.btn-find-out-more:hover {
    background: linear-gradient(to right, #e00000 0%, #222222 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.project-overview {
    margin-top: 60px;
    padding: 20px 20px;
    text-align: center;
}

.overview {
    font-family:"Space Grotesk";
    color: white;
    font-weight: 500;
    font-size: 64px;
    line-height: 1.6;
    margin: 0 auto;
}


@media (max-width: 1200px) {
    .cctv-video {
        /* Reduce height for a more compact presentation */
        height: 600px;
        /* Adjust margin */
        margin: 30px auto;
        /* Reduce bottom padding */
        padding-bottom: 20px;
    }

    .overview {
        /* Decrease the large font size for tablets */
        font-size: 48px;
    }
}


@media (max-width: 768px) {
    .cctv-video {
        /* Further reduce height for mobile viewports */
        height: 450px;
        margin: 20px auto;
        width: auto; /* Ensure no horizontal scroll is caused by margin */
    }

    .overview {
        /* Major decrease in font size for mobile */
        font-size: 36px;
        line-height: 1.4;
    }

    .btn-find-out-more {
        /* Adjust button dimensions and font size */
        font-size: 18px;
        padding: 8px 30px;
        /* Remove fixed width/height properties and rely on padding/content */
        width: auto;
        height: auto;
        margin-bottom: 10px;
    }

    .project-overview {
        /* Reduce padding */
        padding: 10px 10px;
    }
}


@media (max-width: 480px) {
    .cctv-video {
        width: auto;
        height: 350px;
        padding-bottom: 10px;
    }

    .overview {
        /* Smallest font size for main header text */
        font-size: 20px;
    }

    .btn-find-out-more {
        font-size: 16px;
        padding: 6px 20px;
        border-radius: 20px;
    }
}

/* CCTV DETAILS CARDS*/


/* NEW: Keyframe animation for fade-in and subtle rise */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(90px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NEW: Initial hidden state for the scroll animation targets */
.surveillance-carousel-container.hidden,
.navigation-dots-container.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: none; /* Temporarily disable transition for initial state */
}

/* NEW: Class to apply animation after scroll trigger */
.surveillance-carousel-container.scroll-animation,
.navigation-dots-container.scroll-animation {
    animation: fadeInUp 1.5s ease-out forwards; 
    /* Optional: Add a slight delay for the dots container for a staggered effect */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Restore any existing transition */
}

/* Add staggered effect for the dots container */
.navigation-dots-container.scroll-animation {
    animation-delay: 0.3s;
}

.surveillance-carousel-container {
    margin: 0 auto;
    width: 100%;
    padding: 50px 0;
    background-color: #000;
    overflow: hidden;
    position: relative;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s; 
}

.overview {
    /* ... existing styles ... */
    /* ADDED: Initial state for 'overview' text (optional, but good for consistent animation) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 0.8s ease-out;
}

/* NEW: Class to animate 'overview' text */
.overview.scroll-animation {
    opacity: 1;
    transform: translateY(0);
}


.carousel-viewport-wrapper {
    width: 100%;
    height: 600px;
    position: relative;
    perspective: 2000px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    user-select: none;
}

.carousel-viewport-wrapper.dragging {
    cursor: grabbing;
}

.rotating-carousel-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.surveillance-card-element {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    height: 560px;
    margin-left: -175px;
    margin-top: -280px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #222;
    cursor: pointer;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    user-select: none;
}

.card-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.gradient-info-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.location-title-text {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.description-snippet-text {
    font-family: "Lexend";
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.external-action-icon {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    pointer-events: all;
}

.external-action-icon:hover {
    opacity: 1;
}

.navigation-dots-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s;
}

.position-indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.5;
}

.position-indicator-dot.current-active {
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    opacity: 1;
}

/* Responsive breakpoints */
@media (max-width: 1400px) {
    .carousel-viewport-wrapper {
        height: 550px;
        perspective: 1800px;
    }
}

@media (max-width: 1200px) {
    .carousel-viewport-wrapper {
        height: 520px;
        perspective: 1600px;
    }

    .surveillance-card-element {
        width: 320px;
        height: 520px;
        margin-left: -160px;
        margin-top: -260px;
    }
}

@media (max-width: 1024px) {
    .carousel-viewport-wrapper {
        height: 500px;
        perspective: 1500px;
    }

    .surveillance-card-element {
        width: 300px;
        height: 500px;
        margin-left: -150px;
        margin-top: -250px;
    }

    .gradient-info-panel {
        padding: 18px;
        min-height: 150px;
    }

    .location-title-text {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .surveillance-carousel-container {
        padding: 60px 0;
    }

    .carousel-viewport-wrapper {
        height: 450px;
        perspective: 1200px;
    }

    .surveillance-card-element {
        width: 260px;
        height: 420px;
        margin-left: -130px;
        margin-top: -210px;
    }

    .gradient-info-panel {
        padding: 15px;
        min-height: 130px;
    }

    .location-title-text {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .description-snippet-text {
        font-size: 9px;
        margin-bottom: 8px;
    }

    .navigation-dots-container {
        margin-top: 40px;
        gap: 15px;
    }

    .position-indicator-dot {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 640px) {
    .carousel-viewport-wrapper {
        height: 420px;
        perspective: 1100px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }
}

@media (max-width: 480px) {
    .surveillance-carousel-container {
        padding: 40px 0;
    }

    .carousel-viewport-wrapper {
        height: 380px;
        perspective: 1000px;
    }

    .surveillance-card-element {
        width: 220px;
        height: 350px;
        margin-left: -110px;
        margin-top: -175px;
    }

    .gradient-info-panel {
        padding: 12px;
        min-height: 110px;
    }

    .location-title-text {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .description-snippet-text {
        font-size: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 6px;
    }

    .external-action-icon svg {
        width: 20px;
        height: 20px;
    }

    .navigation-dots-container {
        margin-top: 30px;
        gap: 12px;
    }

    .position-indicator-dot {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 375px) {
    .carousel-viewport-wrapper {
        height: 350px;
    }

    .surveillance-card-element {
        width: 200px;
        height: 320px;
        margin-left: -100px;
        margin-top: -160px;
    }

    .location-title-text {
        font-size: 12px;
    }

    .description-snippet-text {
        font-size: 7.5px;
    }

    .external-action-icon {
        display: none;
    }
}

@media (max-width: 320px) {
    .carousel-viewport-wrapper {
        height: 320px;
    }

    .surveillance-card-element {
        width: 180px;
        height: 290px;
        margin-left: -90px;
        margin-top: -145px;
    }

    .gradient-info-panel {
        padding: 10px;
        min-height: 90px;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .surveillance-carousel-container {
        padding: 30px 0;
    }

    .carousel-viewport-wrapper {
        height: 400px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }

    .navigation-dots-container {
        margin-top: 25px;
    }
}


.item-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.slider-item:not(.active) .item-content-overlay {
    opacity: 0.96;
}

.item-heading {
    font-family: "Space Grotesk";
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.item-text {
    font-family: "Space Grotesk";
    font-size: 10px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.item-external-link {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.item-external-link:hover {
    opacity: 1;
}

.slider-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
}

.indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.indicator-dot.active {
    background-color:linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    border-color: #ff0000;
}

@media (max-width: 1024px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-item:not(.active) {
        width: 200px;
        height: 350px;
        margin: 0 10px;
    }
    .slider-item.active {
        justify-content: center;
        width: 300px;
        height: 500px;
        margin: 0 20px;
    }
    .item-heading {
        font-size: 1.1em;
    }
    .item-text {
        font-size: 0.85em;
    }
    .slider-track {
        padding: 0 5%;
    }
}

@media (max-width: 768px) {
    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 150px;
        height: 280px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.8);
    }
    .slider-item.active {
        width: 250px;
        height: 400px;
        margin: 0 10px;
    }
    .item-content-overlay {
        padding: 15px;
        min-height: 120px;
    }
    .item-heading {
        font-size: 1em;
    }
    .item-text {
        font-size: 0.8em;
    }
    .slider-track {
        padding: 0 2%;
    }
}

@media (max-width: 480px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-track {
        justify-content: flex-start;
        padding: 0 20px;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 100px;
        height: 180px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.7);
    }
    .slider-item.active {
        width: 280px;
        height: 450px;
        margin: 0 10px;
    }
    .item-heading {
        font-size: 0.9em;
    }
    .item-text {
        font-size: 0.75em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .item-external-link {
        display: none;
    }
}

/* CCTV FLASHCARDS */

.ui-main-panel {
    margin: 80px auto;
    width: 100%;     
    width: 1700px;
    height: 600px;
    padding: 20px;
    background: linear-gradient(180deg, #D9D9D9 0%, #737373 100%);
    border-radius: 50px;
    border: 5px solid;
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    overflow: hidden; 
}

.panel-text-module {
    padding: 20px 0 20px 100px;
}

.panel-text-module p {
    font-family: "Space Grotesk";
    color: #ffffff;
    font-size: 32px;
    line-height: 1.6;
    width: 950px;

}

.surveillance-slider-zone {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-stack-viewport {
    position: relative;
    width: 50px; 
    height: 380px;
}

.security-image-card {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 280px;
    height: 380px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    cursor: pointer; 
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); 

    /* Initial hidden/back position for all cards */
    transform: translate(-50%, -50%) translate3d(0, 0, -200px) rotateY(0deg) scale(0.8);
    opacity: 0;
    z-index: 0;
}

.security-image-card[data-index="0"] { background-image: url('/images/services/PASIG-THREELIGHTS-2.jpg'); } 
.security-image-card[data-index="1"] { background-image: url('/images/services/BENJAMIN-CAMERINO-2.jpg'); }
.security-image-card[data-index="2"] { background-image: url('/images/services/BJMP-Teresa-\ District-JAIL-2.jpg'); }
.security-image-card[data-index="3"] { background-image: url('/images/services/RON-GONZALES-2.jpg'); }


.security-image-card.card--active {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
    z-index: 100;
    cursor: pointer;
}


.security-image-card.card--stacked-1 {
    transform: translate(-50%, -50%) translate3d(-10px, 10px, -20px) rotate(-3deg);
    opacity: 1;
    z-index: 9;
    filter: brightness(0.8);
    cursor: default;
}

.security-image-card.card--stacked-2 {
    transform: translate(-50%, -50%) translate3d(-20px, 20px, -40px) rotate(-6deg);
    opacity: 1;
    z-index: 8;
    filter: brightness(0.7);
    cursor: default;
}

.security-image-card.card--stacked-3 {
    transform: translate(-50%, -50%) translate3d(-30px, 30px, -60px) rotate(-9deg);
    opacity: 1;
    z-index: 7;
    filter: brightness(0.6);
    cursor: default;
}


.security-image-card.card--slide-out {
    transform: translate(-50%, -50%) translate3d(100px, 0, 0) rotate(5deg) scale(0.9);
    opacity: 0;
    z-index: 11; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .ui-main-panel {
        width: 95%;
        height: 550px;
        margin: 15px auto;
        padding: 8px;
        border-radius: 20px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 8px;
        text-align: center;
        margin-bottom: -40px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 280px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 150px;
        height: 200px;
    }

    .security-image-card {
        width: 160px;
        height: 230px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .ui-main-panel {
        width: 95%;
        min-height: 580px;
        margin: 16px auto;
        padding: 9px;
        border-radius: 22px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 290px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 220px;
        height: 260px;
    }

    .security-image-card {
        width: 170px;
        height: 240px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .ui-main-panel {
        width: 95%;
        min-height: 620px;
        margin: 20px auto;
        padding: 9px;
        border-radius: 24px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -50px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 270px;
        width: 100%;
        margin-left: 20px;
    }

    .card-stack-viewport {
        width: 230px;
        height: 270px;
    }

    .security-image-card {
        width: 180px;
        height: 230px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 18px auto;
        padding: 10px;
        border-radius: 25px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 16.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 310px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 240px;
        height: 280px;
    }

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

@media (min-width: 400px) and (max-width: 412px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 26px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 320px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 250px;
        height: 290px;
    }

    .security-image-card {
        width: 200px;
        height: 270px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 27px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 17.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 325px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 255px;
        height: 295px;
    }

    .security-image-card {
        width: 205px;
        height: 275px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 20px auto;
        padding: 10px;
        border-radius: 28px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 18px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 330px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 260px;
        height: 300px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 22px auto;
        padding: 12px;
        border-radius: 30px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 12px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 19px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 350px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 280px;
        height: 320px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 28px auto;
        padding: 15px;
        border-radius: 38px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 18px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 23px;
        line-height: 1.55;
        width: 100%;
        margin-bottom: -20px;
    }

    .surveillance-slider-zone {
        height: 380px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 290px;
        height: 340px;
    }

    .security-image-card {
        width: 235px;
        height: 320px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 30px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 390px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 295px;
        height: 345px;
    }

    .security-image-card {
        width: 238px;
        height: 325px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .ui-main-panel {
        width: 95%;
        min-height: 790px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 20px 35px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 395px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 298px;
        height: 348px;
    }

    .security-image-card {
        width: 240px;
        height: 328px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .ui-main-panel {
        width: 95%;
        min-height: 850px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 40px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 400px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 300px;
        height: 350px;
    }

    .security-image-card {
        width: 290px;
        height: 380px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 820px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .panel-text-module {
        padding: 20px 45px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 410px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 305px;
        height: 355px;
    }

    .security-image-card {
        width: 245px;
        height: 335px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 850px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 50px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 415px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 308px;
        height: 358px;
    }

    .security-image-card {
        width: 298px;
        height: 388px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .ui-main-panel {
        width: 95%;
        height: 580px;
        margin: 60px auto;
        padding: 18px;
        border-radius: 45px;
        border-width: 5px;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .panel-text-module {
        padding: 20px 0 20px 70px;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: auto;
        width: 100%;
    }

    .card-stack-viewport {
        width: 350px;
        height: 400px;
    }

    .security-image-card {
        margin-top: 10px;
        margin-left: 10px;
        width: 290px;
        height: 390px;
    }

}

/* ====================== End ======================= */

/* PC BUILD DETAILS */

.pc-project-container {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #000; 
    color: #fff;
    overflow-x: hidden;
    box-sizing: border-box;
}

.top-section {
    position: relative;
    width: 100%;
    height: 650px;
    margin: 0;
    padding: 0;
    background-color: #222; 
    background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
    box-sizing: border-box;
    animation: fadeIn 1s ease-out, subtleZoom 20s ease-in-out infinite alternate;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes subtleZoom {
    from {
        background-size: 100%;
    }
    to {
        background-size: 105%;
    }
}

.bottom-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
    background-color: #000; 
    text-align: center;
    box-sizing: border-box;
    animation: fadeInUp 1s ease-out 0.3s both;
}

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

.pc-cases-row {
    position: relative;
    width: 100%;
    max-width: 2500px;
    margin: clamp(-100px, -15vh, -200px) auto 0;
    display: flex;
    justify-content: center; 
    align-items: flex-end; 
    z-index: 100;
    padding: 0 clamp(15px, 3vw, 40px);
    box-sizing: border-box;
    animation: slideUp 1.2s ease-out 0.5s both;
}

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

.pc-case-image {
    width: 100%; 
    height: auto;
    max-width: 100%;
    min-height: clamp(150px, 25vh, 300px);
    max-height: clamp(250px, 40vh, 520px);
    object-fit: contain;
    object-position: center bottom;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.pc-case-image:hover {
    transform: scale(1.05) translateY(-10px);
    filter: brightness(1.1);
}

.caption {
    margin: clamp(20px, 3vh, 50px) 0 0;
    padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
    z-index: 20;
    box-sizing: border-box;
    animation: fadeIn 1s ease-out 0.8s both;
}

.caption p {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(16px, 3.5vw, 32px);
    font-weight: 400;
    margin-top: 20px;
    padding: 0;
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    line-height: 1.4;
}

.sr-title {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto 50px;
    padding: 0 clamp(15px, 3vw, 30px);
    box-sizing: border-box;
}

.member-shop h1 {
    text-align: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 7vw, 64px);
    margin: clamp(20px, 4vh, 40px) 0;
    padding: 0 clamp(15px, 3vw, 30px);
    line-height: 1.2;
    box-sizing: border-box;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Universal box-sizing */
* {
    box-sizing: border-box;
}

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
    .top-section {
        height: clamp(250px, 35vh, 300px);
        background-position: center;
        box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        animation: subtlePulse 8s ease-in-out infinite;
    }
    
    .pc-cases-row {
        margin-top: clamp(-150px, -15vh, -100px);
        padding: 0 10px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 500px;
        animation: floatIn 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(30px);
    }
    
    .pc-case-image:nth-child(1) {
        animation-delay: 0.2s;
    }
    
    .pc-case-image:nth-child(2) {
        animation-delay: 0.4s;
    }
    
    .pc-case-image:nth-child(3) {
        animation-delay: 0.6s;
    }
    
    .bottom-section {
        padding: 15px 10px;
        animation: fadeInUp 1s ease-out 0.8s forwards;
        opacity: 0;
    }
    
    .caption {
        margin-top: clamp(15px, 2vh, 30px);
        padding: 10px 15px;
        animation: slideInLeft 0.6s ease-out 1.2s forwards;
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .member-shop h1 {
        margin: 15px 0;
        padding: 0 10px;
        animation: fadeInScale 0.7s ease-out 0.3s forwards;
        opacity: 0;
        transform: scale(0.9);
    }
    
    /* Keyframe animations */
    @keyframes floatIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInLeft {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes fadeInScale {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes subtlePulse {
        0%, 100% {
            box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        }
        50% {
            box-shadow: inset 50px 50px 120px rgba(100, 0, 150, 0.5);
        }
    }
}
/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
    .top-section {
        height: clamp(300px, 45vh, 500px);
        background-position: top center;
        box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-90px, -14vh, -130px);
        padding: 0 15px;
    }
    
    .pc-case-image {
        min-height: 150px;
        max-height: 250px;
    }
    
    .bottom-section {
        padding: 20px 15px;
    }
    
    .caption {
        margin-top: clamp(18px, 2.5vh, 35px);
        padding: 12px 20px;
    }
    
    .member-shop h1 {
        margin: 20px 0;
        padding: 0 15px;
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    .top-section {
        height: clamp(400px, 55vh, 650px);
        box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-130px, -18vh, -180px);
        padding: 0 20px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 350px;
    }
    
    .bottom-section {
        padding: 25px 20px;
    }
    
    .caption {
        margin-top: clamp(25px, 3vh, 40px);
        padding: 15px 25px;
    }
    
    .member-shop h1 {
        margin: 25px 0;
        padding: 0 20px;
    }
}

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .top-section {
        height: clamp(500px, 65vh, 750px);
        box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-180px, -25vh, -250px);
        padding: 0 30px;
    }
    
    .pc-case-image {
        min-height: 280px;
        max-height: 450px;
    }
    
    .bottom-section {
        padding: 30px 25px;
    }
    
    .caption {
        margin-top: clamp(30px, 3.5vh, 45px);
        padding: 18px 30px;
    }
    
    .member-shop h1 {
        margin: 30px 0;
        padding: 0 25px;
    }
}

/* Extra large devices (large desktops) */
@media (min-width: 1440px) {
    .top-section {
        height: clamp(600px, 70vh, 800px);
        box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-220px, -30vh, -300px);
        padding: 0 40px;
    }
    
    .pc-case-image {
        min-height: 350px;
        max-height: 520px;
    }
    
    .bottom-section {
        padding: 35px 30px;
    }
    
    .caption {
        margin-top: clamp(35px, 4vh, 50px);
        padding: 20px 35px;
    }
    
    .member-shop h1 {
        margin: 35px 0;
        padding: 0 30px;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .pc-case-image {
        max-height: 600px;
    }
    
    .bottom-section {
        padding: 40px 40px;
    }
    
    .caption {
        padding: 25px 40px;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    .top-section {
        height: 60vh;
    }
    
    .pc-cases-row {
        margin-top: -20vh;
        padding: 0 clamp(10px, 2vw, 20px);
    }
    
    .pc-case-image {
        max-height: 35vh;
        min-height: 25vh;
    }
    
    .bottom-section {
        padding: 15px clamp(10px, 2vw, 20px);
    }
    
    .caption {
        margin-top: 15px;
        padding: 10px 15px;
    }
}

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
    .top-section {
        height: 50vh;
    }
    
    .pc-cases-row {
        margin-top: -15vh;
        padding: 0 10px;
    }
    
    .pc-case-image {
        max-height: 30vh;
        min-height: 20vh;
    }
    
    .bottom-section {
        padding: 10px 15px;
    }
    
    .caption {
        margin-top: 10px;
        padding: 8px 15px;
    }
    
    .member-shop h1 {
        margin: 10px 0;
    }
}

/* OVERVIEW */


.main-wrapper {
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            background-color: #000; 
            color: #fff;
            overflow-x: hidden;
            box-sizing: border-box;
        }

.hero-banner {
            position: relative;
            width: 100%;
            height: clamp(300px, 50vh, 800px);
            margin: 0;
            padding: 0;
            background-color: #222; 
            background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
            box-sizing: border-box;
        }

.footer-area {
            position: relative;
            width: 100%;
            margin: 0;
            padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
            background-color: #000; 
            text-align: center;
            box-sizing: border-box;
        }

.showcase-grid {
            position: relative;
            width: 100%;
            max-width: 2500px;
            margin: clamp(-100px, -15vh, -200px) auto 0;
            display: flex;
            justify-content: center; 
            align-items: flex-end; 
            z-index: 100;
            padding: 0 clamp(15px, 3vw, 40px);
            box-sizing: border-box;
        }

.featured-img {
            width: 100%; 
            height: auto;
            max-width: 100%;
            min-height: clamp(150px, 25vh, 300px);
            max-height: clamp(250px, 40vh, 520px);
            object-fit: contain;
            object-position: center bottom;
            display: block;
            margin: 0;
            padding: 0;
        }

.text-overlay {
            margin: clamp(20px, 3vh, 50px) 0 0;
            padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
            z-index: 20;
            box-sizing: border-box;
        }

.text-overlay p {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(16px, 3.5vw, 32px);
            font-weight: 400;
            margin: 0;
            padding: 0;
            letter-spacing: clamp(0.5px, 0.1vw, 1px);
            line-height: 1.4;
        }

.heading-wrapper {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(15px, 3vw, 30px);
            box-sizing: border-box;
        }

.store-header h1 {
            text-align: center;
            color: white;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(28px, 7vw, 64px);
            margin: clamp(20px, 4vh, 40px) 0;
            padding: 0 clamp(15px, 3vw, 30px);
            line-height: 1.2;
            box-sizing: border-box;
        }

/* OVERVIEW */
.page-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
        }

        /* Row 1 - Hero Section */
.intro-section {
            font-family: "Space Grotesk", sans-serif;
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 30px);
            padding: clamp(20px, 4vw, 60px);
            min-height: 0;
        }

.intro-section h1 {
            grid-column: 1 / -1;
            font-size: clamp(28px, 6vw, 60px);
            font-weight: 700;
            margin: 0 auto;
            text-align: center;
            line-height: 1.2;
        }

.intro-section p {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            font-size: clamp(16px, 2.5vw, 32px);
            font-weight: 400;
            line-height: 1.6;
            color: white;
            padding: 0 clamp(10px, 2vw, 20px);
        }

/* Row 2, 3, 4, 5 - Content Sections */
.flex-section {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

.text-block {
            padding: clamp(25px, 5vw, 80px) clamp(20px, 4vw, 60px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            order: 1;
        }

.visual-block {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            min-height: clamp(250px, 40vh, 450px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            order: 2;
            width: 100%;
        }

.visual-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

.text-block h2 {
            font-size: clamp(28px, 5vw, 64px);
            margin-bottom: clamp(15px, 3vw, 25px);
            line-height: 1.2;
            width: 100%;
            padding-bottom: 1rem;
        }

.text-block p {
            font-size: clamp(14px, 2.2vw, 28px);
            font-weight: 400;
            line-height: 1.7;
            color: white;
            margin-bottom: clamp(20px, 4vw, 30px);
            max-width: 800px;
        }

.action-btn {
        text-decoration: none;
        color: white;
        font-size: 18px;
        font-weight: 500;
        padding: 15px 70px;
        border-radius: 70px;
        border: 1px solid #7B54B1;
        margin-top: 30px;
        background: linear-gradient(to right, rgba(168, 85, 247, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
        background-repeat: no-repeat;
        background-size: 80%;
        animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.action-btn:hover {
            transform: translateY(-2px);
            background-color: #a855f7;
        }

.action-btn:active {
            transform: translateY(0);
        }

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
            .hero-banner {
                height: clamp(250px, 35vh, 300px);
                background-position: center;
                box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-150px, -15vh, -100px);
                padding: 0 10px;
            }
            
            .featured-img {
                min-height: 120px;
                max-height: 200px;
            }
            
            .footer-area {
                padding: 15px 10px;
            }
            
            .text-overlay {
                margin-top: clamp(15px, 2vh, 30px);
                padding: 10px 15px;
            }
            
            .store-header h1 {
                margin: 15px 0;
                padding: 0 10px;
            }
        }

/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
            .hero-banner {
                height: clamp(300px, 45vh, 500px);
                background-position: top center;
                box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-90px, -14vh, -130px);
                padding: 0 15px;
            }
            
            .featured-img {
                min-height: 150px;
                max-height: 250px;
            }
            
            .footer-area {
                padding: 20px 15px;
            }
            
            .text-overlay {
                margin-top: clamp(18px, 2.5vh, 35px);
                padding: 12px 20px;
            }
            
            .store-header h1 {
                margin: 20px 0;
                padding: 0 15px;
            }
        }

/* Medium devices (tablets) */
@media (min-width: 768px) {
            .intro-section {
                gap: clamp(20px, 3vw, 30px);
                padding: clamp(30px, 5vw, 80px);
            }

            .intro-section p {
                width: 85%;
                font-size: clamp(18px, 2.8vw, 34px);
            }

            .text-block {
                padding: clamp(35px, 6vw, 70px) clamp(25px, 5vw, 50px);
            }

            .visual-block {
                min-height: clamp(300px, 45vh, 500px);
            }

            .action-btn {
                max-width: 300px;
                min-height: 52px;
            }
        }

@media (min-width: 768px) and (max-width: 1023px) {
            .hero-banner {
                height: clamp(400px, 55vh, 650px);
                box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-130px, -18vh, -180px);
                padding: 0 20px;
            }
            
            .featured-img {
                min-height: 200px;
                max-height: 350px;
            }
            
            .footer-area {
                padding: 25px 20px;
            }
            
            .text-overlay {
                margin-top: clamp(25px, 3vh, 40px);
                padding: 15px 25px;
            }
            
            .store-header h1 {
                margin: 25px 0;
                padding: 0 20px;
            }
        }

/* Desktop Breakpoint (1024px and up) */
@media (min-width: 1024px) {
            .intro-section {
                grid-template-columns: repeat(2, 1fr);
                align-items: center;
                padding: clamp(40px, 6vw, 100px);
            }

            .intro-section h1 {
                text-align: left;
                font-size: clamp(36px, 5vw, 60px);
            }

            .intro-section p {
                width: 100%;
                text-align: left;
                padding-left: 0;
                font-size: clamp(20px, 2.2vw, 32px);
            }

            .flex-section {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                min-height: clamp(450px, 55vh, 650px);
            }

            .text-block {
                text-align: left;
                align-items: flex-start;
                padding: clamp(50px, 7vw, 90px) clamp(40px, 6vw, 80px);
                order: 1;
            }

            .text-block h2 {
                text-align: left;
                font-size: clamp(32px, 4.5vw, 64px);
            }

            .text-block p {
                font-size: clamp(16px, 2vw, 28px);
            }

            .visual-block {
                min-height: 100%;
                order: 2;
            }

            /* Alternate layout for odd rows (content left, image right) */
            .flex-section:nth-child(odd) .text-block {
                order: 1;
            }

            .flex-section:nth-child(odd) .visual-block {
                order: 2;
            }

            /* Even rows (image left, content right) */
            .flex-section:nth-child(even) .text-block {
                order: 2;
            }

            .flex-section:nth-child(even) .visual-block {
                order: 1;
            }

            .action-btn {
                max-width: 320px;
                width: auto;
                min-height: 54px;
            }
        }

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
            .hero-banner {
                height: clamp(500px, 65vh, 750px);
                box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-180px, -25vh, -250px);
                padding: 0 30px;
            }
            
            .featured-img {
                min-height: 280px;
                max-height: 450px;
            }
            
            .footer-area {
                padding: 30px 25px;
            }
            
            .text-overlay {
                margin-top: clamp(30px, 3.5vh, 45px);
                padding: 18px 30px;
            }
            
            .store-header h1 {
                margin: 30px 0;
                padding: 0 25px;
            }
        }

/* Large Desktop Breakpoint (1440px and up) */
@media (min-width: 1440px) {
            .page-wrapper {
                max-width: 1920px;
                margin: 0 auto;
            }

            .text-block p {
                font-size: clamp(18px, 1.5vw, 28px);
            }

            .hero-banner {
                height: clamp(600px, 70vh, 800px);
                box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-220px, -30vh, -300px);
                padding: 0 40px;
            }
            
            .featured-img {
                min-height: 350px;
                max-height: 520px;
            }
            
            .footer-area {
                padding: 35px 30px;
            }
            
            .text-overlay {
                margin-top: clamp(35px, 4vh, 50px);
                padding: 20px 35px;
            }
            
            .store-header h1 {
                margin: 35px 0;
                padding: 0 30px;
            }
        }

/* Ultra-wide screens (1920px and up) */
@media (min-width: 1920px) {
            .intro-section h1 {
                font-size: 64px;
            }

            .intro-section p {
                font-size: 32px;
            }

            .text-block h2 {
                font-size: 64px;
            }

            .text-block p {
                font-size: 28px;
            }

            .featured-img {
                max-height: 600px;
            }
            
            .footer-area {
                padding: 40px 40px;
            }
            
            .text-overlay {
                padding: 25px 40px;
            }
        }

/* Small Mobile Optimization (max 375px) */
@media (max-width: 375px) {
            .intro-section {
                gap: 12px;
            }

            .text-block {
                padding: clamp(20px, 5vw, 30px) clamp(15px, 4vw, 20px);
            }

            .visual-block {
                min-height: clamp(200px, 35vh, 300px);
            }

            .action-btn {
                min-height: 42px;
                font-size: 13px;
            }
        }

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
            .hero-banner {
                height: 60vh;
            }
            
            .showcase-grid {
                margin-top: -20vh;
                padding: 0 clamp(10px, 2vw, 20px);
            }
            
            .featured-img {
                max-height: 35vh;
                min-height: 25vh;
            }
            
            .footer-area {
                padding: 15px clamp(10px, 2vw, 20px);
            }
            
            .text-overlay {
                margin-top: 15px;
                padding: 10px 15px;
            }

            .visual-block {
                min-height: 70vh;
            }
            
            .text-block {
                padding: clamp(20px, 4vh, 40px) clamp(20px, 4vw, 60px);
            }
        }

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
            .hero-banner {
                height: 50vh;
            }
            
            .showcase-grid {
                margin-top: -15vh;
                padding: 0 10px;
            }
            
            .featured-img {
                max-height: 30vh;
                min-height: 20vh;
            }
            
            .footer-area {
                padding: 10px 15px;
            }
            
            .text-overlay {
                margin-top: 10px;
                padding: 8px 15px;
            }
            
            .store-header h1 {
                margin: 10px 0;
            }
        }

/* Print styles */
@media print {
            .action-btn {
                background: #6d28d9;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }

/*FDAS PAGE BY PCESS*/
/*FDAS PAGE BY PCESS*/


.top-feature-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-hero-wrapper {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('/images/services/FDAS2.jpg');
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    z-index: 1;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,    /* Top is transparent */
        transparent 50%,   /* Transparent up to halfway */
        rgba(0, 0, 0, 0.3) 60%,  /* Start fading in at halfway */
        rgba(0, 0, 0, 0.8) 80%,  /* Darker at bottom */
        black 100%        /* Fully visible at bottom */
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 60%,
        rgba(0, 0, 0, 0.8) 80%,
        black 100%
    );
}

.header-text-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 60px;
    width: 100%;
    text-align: center;
    animation: fadeInLeft 1.5s ease-out;
    z-index: 2;
}

.fade-right {
    display: inline-block;
    animation: fadeInRight 1.5s ease-out;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(0);
    }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.header-text-layer h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}

.view-details-btn {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 20px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.view-details-btn:hover {
    background-color: #FF4500;
}

.selection-criteria-block {
    display: flex;
    align-items: center;
    max-width: 1350px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
   
    .selection-criteria-block.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .selection-criteria-block.animate-visible {
        animation: 2s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* Left Column - Visual Container */
.image-display-area {
    flex: 1;
    min-height: 500px;
    background-image: url("https://i.pinimg.com/736x/64/f7/28/64f728aaf40516331f0f6487c786662f.jpg");
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

.image-display-area:hover {
    /* Apply Gradient Border on Hover */
    border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
}

.selection-criteria-block:nth-child(2) .image-display-area {
    background-image: url("https://i.pinimg.com/736x/64/8f/15/8f15c8d3e4c5a4b8c9e1a4e5e.jpg");
}

.selection-criteria-block:nth-child(2) .image-display-area:hover {
    border-image: linear-gradient(90deg, #FF4500 0%, #FF6347 50%, #FF8C00 100%) 1;
}

/* Right Column - Content Container */
.info-details-box {
    flex: 1;
    padding-left: 70px;
}

@keyframes glow-fire {
    from {
        text-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
    }
    to {
        text-shadow: 0 0 30px rgba(255, 69, 0, 0.8), 0 0 40px rgba(255, 140, 0, 0.6);
    }
}


/* Title Styling */
.title-first-line {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: 0%;
}


/* Feature List Styling */
.key-advantages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.key-advantages-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.key-advantages-list li:hover{
    transform: translateY(-5px) scale(1.05);
}


.item-icon-style {
    font-size: 20px;
    margin-right: 15px;
    color: white;
    transform: rotate(-15deg);
}

.item-icon-style:hover {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}


.value-proposition-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 30px 20px;
    margin: auto;
}


.value-card-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-display-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}



.card-text-content {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.customer-feedback-module {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "content visual"
        "button button";
   
    gap: 10px; 
    max-width: 1000px; 
    margin: 20px auto; 
    padding: 0 10px; 
    align-items: start;

}

    .customer-feedback-module.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .customer-feedback-module.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }


.feedback-text-area {
    grid-area: content;
    padding-right: 20px;
    
}

.feedback-header-one {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.client-quote-text {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.rating-stars-container .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    
    
    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .rating-stars-container :hover {
        transform: translateY(-5px) scale(1.05);
    }


/* Product Visual (Right Column) */
.item-showcase-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(https://i.pinimg.com/736x/08/ad/46/08ad464419417d928e8cb3ae47dd8219.jpg);
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .item-showcase-visual:hover {
        /* 1. Revert to Color on Hover */
        
        /* 2. Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
    }

/* Button Container (Spans both columns) */
.call-to-action-wrapper {
    grid-area: button;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* See Reviews Button Styling */
.reviews-link-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.reviews-link-button:hover {
    background-color: #FF4500;
}

.bottom-promo-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.secondary-hero-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('https://i.pinimg.com/736x/fc/c4/28/fcc4281f495dd945fb8261ef33f0afcf.jpg');      
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%); /* Become fully transparent (bottom fade-out) */
    overflow: hidden;   
}

.bottom-text-layer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
}

.bottom-text-layer h1 {
    color: white;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-style: Bold;
    font-size: 36px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}


.link-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    border: 4px solid #fff;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.2s, color 0.3s;
    background-color: transparent;
}

.link-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    color: #fff;
}

.link-action-btn .fas {
    margin-left: 10px;
    font-size: 0.9em;
    transition: margin-left 0.3s;
}

.link-action-btn:hover .fas {
    margin-left: 15px;
}

/* FDAS RESPONSIVE DESIGN */

    @media (min-width: 1400px) {
    .top-feature-area {
        max-width: 1500px;
    }

    .selection-criteria-block {
        max-width: 1500px;
    }
    
    .value-proposition-grid {
        max-width: 1500px;
        gap: 50px;
    }

    .customer-feedback-module {
        max-width: 1400px;
    }
}


    @media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .selection-criteria-block {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-first-line {
        font-size: 2.8rem; 
    }
    
    /* Ensure the grid columns are spacious */
    .value-proposition-grid {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 30px auto;
    }
}


/* 🚀 LARGE SCREEN RESPONSIVENESS (Desktops: min-width: 1025px) */
@media (min-width: 1025px) {

    /* BOTTOM PROMO STRIP */
    .secondary-hero-wrapper {
        /* Increase height of the hero strip */
        height: 550px;
    }
    
    .bottom-text-layer {
        /* Adjust padding for larger viewports */
        padding: 50px 80px;
    }

    .bottom-text-layer h1 {
        /* Increase main heading size */
        font-size: 64px;
    }
}



    @media(max-width: 768px) {

        /* top feature area */
        .top-feature-area {
            width: 100%; /* Change from max-width */
            max-width: 100%; /* Ensure it doesn't overflow */
            margin-top: -150px;
        }

        /* PRIMARY HERO WRAPPER - Fix mobile overflow */
        .primary-hero-wrapper {
            width: 100% !important; /* Override 127% width on mobile */
            height: 450px; /* Adjust height for mobile */
        }

        /* Hero text adjustments for mobile */
        .header-text-layer {
            padding: 20px 30px;
            transform: translate(-50%, -60%); /* Elevate the text position even more */
        }

        .header-text-layer h1 {
            font-size: 28px; /* Smaller font for mobile */
            line-height: 1.1;
        }

        /* SELECTION CRITERIA BOX */
        .selection-criteria-block {
            flex-direction: column;
            padding: 0 20px;
            margin: 40px auto;
        }

        .image-display-area {
            width: 100%;
            min-height: 350px;
            margin-left: 0;
            margin-bottom: 30px;
            border-width: 8px;
        }

        .info-details-box {
            width: 100%;
            padding-left: 0;
            text-align: center;
        }

        .title-first-line {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .key-advantages-list li {
            font-size: 24px;
            line-height: 1.8;
            justify-content: center;
        }

        .item-icon-style {
            font-size: 18px;
            margin-right: 10px;
        }
    

        /*value-proposition grid */
        .value-proposition-grid {
            font-size: 2rem;
            grid-template-columns: 1fr; /* Stack items vertically */
        }

            .card-text-content{
                font-size: 1.5rem;
            }


        /* bottom promo strip */
        .bottom-promo-strip{
            font-size: 2rem;
        }
                    
        .secondary-hero-wrapper {
            max-width: 768px; /* Ensure it doesn't overflow */
        }

    }

    @media (min-width: 577px) and (max-width: 1024px) {
        /* PRIMARY HERO SECTION */
        .primary-hero-wrapper {
            height: 500px;
        }

        .header-text-layer {
            padding: 30px 40px;
        }

        .header-text-layer h1 {
            font-size: 38px;
        }

        /* SELECTION CRITERIA BLOCK */
        .selection-criteria-block {
            /* Keep them side-by-side but allow wrapping if needed */
            flex-direction: row; 
            flex-wrap: wrap; 
            padding: 0 30px; 
        }
        
        .image-display-area {
            min-height: 400px; 
        }

        .info-details-box {
            padding-left: 50px;
        }

        .title-first-line {
            font-size: 35px;
        }

        .key-advantages-list li {
            font-size: 20px;
        }
        
        /* VALUE PROPOSITION GRID */
        .value-proposition-grid {
            /* Cards may wrap to the next line */
            gap: 30px;
            padding: 25px 30px;
            justify-content: center;
        }
        
        .value-card-element {
            min-width: 300px; /* Give them more space than on mobile */
        }


        /* BOTTOM PROMO STRIP */
        .secondary-hero-wrapper {
            height: 450px;
        }
        
        .bottom-text-layer {
            padding: 30px 40px;
        }

        .bottom-text-layer h1 {
            font-size: 40px;
        }
    }



    @media (max-width: 768px) {
    .customer-feedback-module {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "visual"
            "button";
        margin: 40px auto;
        gap: 20px;
    }

    .feedback-text-area {
        padding-right: 0;
        text-align: center;
    }

    .feedback-header-one {
        font-size: 36px;
    }

    .client-quote-text {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .rating-stars-container .fas {
        font-size: 20px;
        margin-top: 15px;
    }

    .item-showcase-visual {
        min-height: 400px;
        border-width: 8px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .customer-feedback-module {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }

    .feedback-header-one {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .client-quote-text {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .rating-stars-container .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .item-showcase-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .feedback-header-one {
        font-size: 24px;
    }

    .client-quote-text {
        font-size: 16px;
    }

    .item-showcase-visual {
        min-height: 250px;
    }
}



/* BLOG */ /* BLOG */

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


.visual-deck-viewport {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

.visual-deck-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.7s ease-in-out;
}

.visual-deck-card {
    flex-shrink: 0;
    width: 33.333%;
    height: 100%;
    position: relative;
}

.deck-card-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
}

.deck-card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10%;
    box-sizing: border-box;
    z-index: 2;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
}

.text-focus-wrapper {
    font-family: "lexend";
    max-width: 500px;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.focus-main-title,
.focus-sub-title,
.focus-description,
.call-to-action-btn {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInSlide 0.6s ease-out forwards;
}

.focus-main-title {
    color: white;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 0.2em;
    animation-delay: 0.5s;
}

.focus-sub-title {
    font-size: 45px;
    font-weight: 200;
    letter-spacing: 0.1em;
    margin-bottom: 1em;
    color: white;
    animation-delay: 0.6s;
}

.focus-description {
    font-family: "Lexend";
    font-size: 24px;
    line-height: 1.5;
    font-weight: 200;
    margin-bottom: 2em;
    color: white;
    animation-delay: 0.7s;
}

.call-to-action-btn {
    display: inline-block;
    padding: 15px 30px;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    animation-delay: 0.8s;
}

.call-to-action-btn:hover {
    background-color: #fff;
    color: #000;
}

.deck-pagination-nav {
    position: absolute;
    bottom: 30px;
    left: 48%;
    z-index: 3;
    display: flex;
    gap: 10px;
    opacity: 0;
    transform: translate(-50%, 20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.9s; 
}

.dot-control {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot-control.active {
    background-color: #fff;
}

@media (max-width: 1024px) {
    .deck-card-content {
        padding-left: 5%;
    }

    .text-focus-wrapper {
        max-width: 400px;
    }

    .focus-main-title {
        font-size: 4.5vw;
    }

    .focus-sub-title {
        font-size: 4vw;
    }

    .focus-description {
        font-size: 2vw;
    }
}


@media (max-width: 768px) {
    .visual-deck-viewport {
        height: 70vh;
    }

    .deck-card-content {
        align-items: flex-start;
        padding: 10% 5%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
    }

    .text-focus-wrapper {
        max-width: 100%;
    }

    .focus-main-title {
        font-size: 32px;
    }

    .focus-sub-title {
        font-size: 28px;
    }

    .focus-description {
        font-size: 16px;
    }

    .call-to-action-btn {
        font-size: 1em;
        padding: 12px 24px;
    }

    .deck-pagination-nav {
        left: 45%;
        bottom: 40px;
        gap: 8px;
    }

    .dot-control {
        width: 10px;
        height: 10px;
    }
}

/*====================== LATEST PRODUCTS ===================*/

.catalog-display-area {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.catalog-display-area__title {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 40px;
    text-align: left;
}

.catalog-display-area__grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.item-preview {
    background-color: black;
    border-radius: 15px;
    height: 400px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.6s ease-out, transform 0.3s ease, box-shadow 0.3s ease;
}

        
.item-preview {
    opacity: 0;
    transform: translateY(50px);
}

.item-preview.animate {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s !important; 
}

    .item-preview:nth-child(2) { transition-delay: 0.2s; }
    .item-preview:nth-child(3) { transition-delay: 0.4s; }
    .item-preview:nth-child(4) { transition-delay: 0.6s; }
    .item-preview:nth-child(5) { transition-delay: 0.8s; }
    .item-preview:nth-child(6) { transition-delay: 0.10s; }
        
    .item-preview:hover,
    .item-preview.animate:hover {
    transform: translateY(-12px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-preview__image {
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

    .item-preview__image1 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image2 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image3 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image4 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image5 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image6 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }

.item-preview__details {
    color: white;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.item-preview__name {
    font-family: "Space Grotesk";
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.item-preview__description {
    font-family: "Lexend";
    font-size: 14px;
    color: white;
    margin-bottom: 20px;
    line-height: 1.4;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-preview__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.item-preview__price {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.item-preview__status {
    font-family: "Lexend";
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid;
    min-width: 80px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

.item-preview__status--in-stock {
    border-radius: 15px;
    color: white;
    border-color: white;
}
        
.item-preview__status--in-stock:hover {
    background-color: white;
    color: black;
    cursor: default;
}

.item-preview__status--pre-order {
    border-radius: 15px;
    color: white;
    border-color: white;
}

.item-preview__status--pre-order:hover {
    background-color: white;
    color: black;
}

.catalog-display-area__button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.cta-button {
    font-family: "Lexend";
    width: 320px;
    max-width: 100%;
    height: 65px;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button:hover {
    background-color: #fff;
    color: #000;
}

@media (max-width: 768px) {
    .catalog-display-area__title {
        font-size: 28px;
        margin-top: 40px;
}
    .item-preview {
        height: auto;
}
}

@media (max-width: 480px) {
    .catalog-display-area__grid-layout {
        grid-template-columns: 1fr;
        gap: 20px;
}

    .cta-button {
        height: 55px;
        font-size: 16px;
        width: 100%;
}
}

/*============= TRENDING GADGETS ====================*/

 .ds-animate-scroll {
            opacity: 0;
            transition: var(--ds-transition); 
        }

       
        @keyframes fadeInMove {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ds-main-container.ds-is-visible {
            animation: fadeInMove 0.8s ease-out forwards;
        }

        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .ds-timeline-item.ds-is-visible {
            animation: slideIn 0.6s ease-out forwards;
        }

        
        .ds-timeline-item:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-timeline-item:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-timeline-item:nth-child(3).ds-is-visible { animation-delay: 0.3s; }

        .ds-gadget-card.ds-is-visible {
            animation: fadeInMove 0.6s ease-out forwards;
        }

        .ds-gadgets-block .ds-gadget-card:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(3).ds-is-visible { animation-delay: 0.3s; }


        .ds-main-container {
            font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
            color: white;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            max-width: 1200px;
            width: 90%; 
            margin: 200px auto;
        }

        .ds-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .ds-section-title {
            font-size: 38px;
            font-weight: 700;
            margin: 0;
            background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ds-view-all-link {
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-weight: 500;
            transition: var(--ds-transition);
            position: relative;
        }

        .ds-view-all-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #0a58ca, #00d4ff);
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover::after {
            width: 100%;
        }

        .ds-view-all-link:hover {
            color: #00d4ff;
            transform: translateX(5px);
        }

        .ds-view-all-link-icon {
            margin-left: 8px;
            font-size: 0.9rem;
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover .ds-view-all-link-icon {
            transform: translateX(3px);
        }


        .ds-gadgets-block {
            margin-right: 30px;
            display: flex;
            flex-direction: column;
            gap: 60px;
        }

        .ds-gadget-card {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            padding: 18px;
            height: 160px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
        }

        .ds-gadget-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover::before {
            left: 100%;
        }

        .ds-gadget-card:hover {
            background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2), var(--ds-shadow-lg);
            transform: translateY(-5px) scale(1.02);
        }

        .ds-gadget-info {
            display: flex;
            align-items: flex-start;
            flex-grow: 1;
        }

        .ds-gadget-thumbnail {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 15px;
            margin-right: 15px;
            margin-top: 25px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }

        .ds-gadget-thumbnail img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            object-fit: cover;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail img {
            transform: scale(1.1);
        }

        .ds-gadget-content-area h3 {
            font-size: 1.1rem;
            margin: 0 0 5px 0;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-content-area h3 {
            color: #00d4ff;
        }

        .ds-gadget-meta {
            font-size: 0.8rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .ds-gadget-category {
            font-weight: 600;
            margin-right: 10px;
        }

        .ds-gadget-category--mobile,
        .ds-gadget-category--gaming {
            color: white;
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            text-align: center;
            padding: 4px 1px;
            border-radius: 15px;
            width: 80px;
            font-size: 12px;
            font-weight: 200;
            border: 1px solid rgba(0, 123, 255, 0.3);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-category--mobile,
        .ds-gadget-card:hover .ds-gadget-category--gaming {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.4) 0%, rgba(0, 123, 255, 0.25) 100%);
            border-color: rgba(0, 123, 255, 0.5);
        }

        .ds-gadget-time {
            color: #aaa;
        }

        .ds-gadget-description {
            font-size: 0.9rem;
            color: #ccc;
        }

        .ds-gadget-link-arrow {
            color: white;
            background: linear-gradient(135deg, #333 0%, #444 100%);
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 29px;
            margin-left: 20px;
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
            border: 1px solid #444;
        }

        .ds-gadget-card:hover .ds-gadget-link-arrow {
            background: linear-gradient(135deg, #0a58ca 0%, #00d4ff 100%);
            border-color: #00d4ff;
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
        }

        .ds-updates-block {
            margin-left: 30px;
            position: relative;
        }

        .ds-timeline-list {
            position: relative;
            padding-left: 20px;
        }

        .ds-timeline-list::before {
            content: '';
            position: absolute;
            top: 0;
            left: 21px;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, #0a58ca 0%, #2f8d46 50%, #C34814 100%);
            z-index: 0;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item {
            position: relative;
            margin-bottom: 25px;
            padding-bottom: 20px;
            padding-left: 30px;
        }

        .ds-timeline-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .ds-timeline-item::after { 
            content: '';
            position: absolute;
            left: 4px;
            top: 11px;
            width: 15px;
            height: 2px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
            z-index: 0;
        }

        .ds-timeline-icon {
            position: absolute;
            left: -10px;
            top: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            transition: var(--ds-transition);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item:hover .ds-timeline-icon {
            transform: scale(1.15);
            box-shadow: 0 0 20px currentColor;
        }

        .ds-timeline-item--upcoming .ds-timeline-icon { 
            color: #0a58ca;
            background: radial-gradient(circle, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.1) 100%);
        }
        .ds-timeline-item--launch .ds-timeline-icon { 
            color: #2f8d46;
            background: radial-gradient(circle, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.1) 100%);
        }
        .ds-timeline-item--partnership .ds-timeline-icon { 
            color: #C34814;
            background: radial-gradient(circle, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.15) 100%);
        }

        .ds-update-content {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            height: 220px;
            padding: 15px 20px;
            border-radius: 20px;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
        }

        .ds-update-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transition: var(--ds-transition);
        }

        .ds-update-content:hover::before {
            left: 100%;
        }

        .ds-update-content:hover {
            transform: translateY(-3px);
            box-shadow: var(--ds-shadow-lg);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover {
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2);
        }

        .ds-timeline-item--launch .ds-update-content:hover {
            border-color: #2f8d46;
            box-shadow: 0 8px 32px rgba(47, 141, 70, 0.2);
        }

        .ds-timeline-item--partnership .ds-update-content:hover {
            border-color: #C34814;
            box-shadow: 0 8px 32px rgba(195, 72, 20, 0.2);
        }

        .ds-update-meta-info {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 0.8rem;
        }

        .ds-update-category-tag {
            font-size: 15px;
            font-weight: 600;
            margin-right: 15px;
            padding: 4px;
            border-radius: 4px;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-category-tag {
            transform: scale(1.05);
        }

        .ds-timeline-item--upcoming .ds-update-category-tag { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-category-tag { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-category-tag { color: #C34814; }

        .ds-update-time-badgee,
        .ds-update-time-badge,
        .ds-update-time-badge-recent {
            color: white;
            text-align: center;
            padding: 4px 10px; 
            border-radius: 15px;
            width: 90px;
            font-weight: 400;
            transition: var(--ds-transition);
            border: 1px solid transparent;
            font-size: 0.8rem; 
        }

        .ds-update-time-badgee {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            border-color: rgba(0, 123, 255, 0.3);        
        }

        .ds-update-time-badge {
            background: linear-gradient(135deg, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.15) 100%);
            border-color: rgba(144, 255, 85, 0.3);  
        }

        .ds-update-time-badge-recent {
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.2) 100%);
            border-color: rgba(255, 107, 53, 0.3);           
        }

        .ds-update-content:hover .ds-update-time-badgee,
        .ds-update-content:hover .ds-update-time-badge,
        .ds-update-content:hover .ds-update-time-badge-recent {
            transform: scale(1.05);
        }

        .ds-update-content h3 {
            font-size: 1.1rem;
            margin: 0 0 10px 0;
            transition: var(--ds-transition);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover h3 { color: #00d4ff; }
        .ds-timeline-item--launch .ds-update-content:hover h3 { color: #90FF55; }
        .ds-timeline-item--partnership .ds-update-content:hover h3 { color: #FF6B35; }

        .ds-update-description {
            font-size: 0.9rem;
            color: #aaa;
            margin-bottom: 15px;
            margin-right: 150px;
        }

        .best-seller-thumbnail {
           width: 130px;
    height: 130px; /* Fixed square size */
    background: white; /* Changed to solid white instead of gradient */
    border-radius: 15px;
    margin-left: 320px;
    margin-top: -150px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: var(--ds-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px; /* Increased padding for better spacing */
        }

        .best-seller-thumbnail:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }

        .best-seller-thumbnail img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            display:block;
            border-radius: 15px;
            object-fit: cover;
            transition: var(--ds-transition);
        }

        .best-seller-thumbnail:hover img {
            transform: scale(1.1);
        }

        .ds-update-details-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
        }

        .ds-update-details-arrow {
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-details-arrow {
            transform: translateX(5px);
        }

       
        .ds-timeline-item--upcoming .ds-update-details-arrow { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-details-arrow { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-details-arrow { color: #C34814; }

        
        html {
            scroll-behavior: smooth;
        }

        /* Responsive adjustments */
        @media (max-width: 1240px) {
            .ds-main-container {
                width: 100%;
            }
        }

        @media (max-width: 992px) {
            .ds-main-container {
                grid-template-columns: 1fr;
                padding: 0 20px;
                width: auto;
                margin: 100px auto;
                gap: 50px;
            }
            
            .ds-gadgets-block {
                margin-right: 0;
            }
            
            .ds-updates-block {
                margin-left: 0;
            }
        }

        @media (max-width: 768px) {
            .ds-main-container {
                margin: 60px auto 60px;
                gap: 40px;
                padding: 0 15px;
            }
            
            .ds-section-title {
                font-size: 1.5rem;
            }
            
            .ds-gadgets-block {
                gap: 40px;
            }
            
            .ds-gadget-card {
                height: auto;
                min-height: 140px;
                flex-wrap: wrap;
                padding: 12px;
            }
            
            .ds-gadget-card:hover {
                transform: translateY(-3px) scale(1);
            }
            
            .ds-gadget-info {
                width: 100%;
            }
            
            .ds-gadget-thumbnail {
                width: 70px;
                height: 70px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 1rem;
            }
            
            .ds-gadget-description {
                font-size: 0.85rem;
            }
            
            .ds-gadget-link-arrow {
                margin-left: 0;
                margin-top: 10px;
                align-self: flex-end;
            }
            
            .ds-update-content {
                height: auto;
                min-height: 180px;
                padding: 12px 15px;
            }
            
            .ds-update-content h3 {
                font-size: 1rem;
            }
            
            .ds-update-description {
                font-size: 0.85rem;
            }
            
            .ds-timeline-list {
                padding-left: 15px;
            }
            
            .ds-timeline-list::before {
                left: 16px;
            }
            
            .ds-timeline-item {
                padding-left: 25px;
            }
        }

        @media (max-width: 480px) {
            .ds-main-container {
                margin: 40px auto;
                gap: 30px;
                padding: 0 10px;
            }
            
            .ds-section-header {
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-section-title {
                font-size: 1.3rem;
            }
            
            .ds-gadgets-block {
                gap: 30px;
            }
            
            .ds-gadget-card {
                padding: 10px;
                min-height: 120px;
            }
            
            .ds-gadget-thumbnail {
                width: 60px;
                height: 60px;
                margin-right: 10px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.95rem;
            }
            
            .ds-gadget-meta {
                font-size: 0.75rem;
                flex-wrap: wrap;
                gap: 5px;
            }
            
            .ds-gadget-description {
                font-size: 0.8rem;
            }
            
            .ds-gadget-link-arrow {
                width: 40px;
                height: 26px;
                font-size: 1rem;
            }
            
            .ds-gadget-category--mobile,
            .ds-gadget-category--gaming {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-content {
                padding: 10px 12px;
                min-height: 160px;
            }
            
            .ds-update-content h3 {
                font-size: 0.95rem;
            }
            
            .ds-update-description {
                font-size: 0.8rem;
                margin-bottom: 10px;
            }
            
            .ds-update-meta-info {
                font-size: 0.75rem;
            }
            
            .ds-update-category-tag {
                font-size: 13px;
                margin-right: 10px;
            }
            
            .ds-update-time-badgee,
            .ds-update-time-badge,
            .ds-update-time-badge-recent {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-details-row {
                font-size: 0.8rem;
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-timeline-icon {
                width: 24px;
                height: 24px;
                font-size: 0.85rem;
            }
            
            .ds-timeline-item::after {
                top: 10px;
            }
            
            .ds-timeline-item {
                margin-bottom: 20px;
                padding-bottom: 15px;
                padding-left: 20px;
            }
        }

        @media (max-width: 360px) {
            .ds-section-title {
                font-size: 1.2rem;
            }
            
            .ds-gadget-thumbnail {
                width: 55px;
                height: 55px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.9rem;
            }
        }

        /* Reduced motion for accessibility */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

/*=============== BLOG POST LATEST ================*/

.container-shell {
    font-family: "Space Grotesk", sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 15px; 
    box-sizing: border-box; 
    padding-top: 7rem;
    padding-bottom: 7rem;
}

/* --- New Scroll-Triggered Animation CSS --- */

/* Base style for elements that will animate (Start State: Hidden and slightly offset) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Featured (Showcase) zone has a slightly different animation (Start State: Slightly scaled down) */
.showcase-zone.animate-on-scroll {
    transform: scale(0.9);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Final State (triggered by JavaScript): Visible and in original position */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Featured zone's final visible state */
.showcase-zone.animate-on-scroll.is-visible {
    transform: scale(1);
}

/* Add brief delays for a staggered gallery effect */
.gallery-matrix > .content-block.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; }

/* Delay the side panel widgets */
.side-panel > .widget-container.animate-on-scroll:nth-child(1) { transition-delay: 0.2s; }
.side-panel > .widget-container.animate-on-scroll:nth-child(2) { transition-delay: 0.4s; }

/* TRENDING POSTS SCROLL BAR*/

.trending-posts-scroll {
  max-height: 390px;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 20px;
}

.trending-posts-scroll:hover {
  overflow-y: auto;
}

.trending-posts-scroll::-webkit-scrollbar {
  width: 8px;
}

.trending-posts-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* --- Original Design Styles --- */
    
.banner-strip {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap; 
}

.banner-strip h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px; 
}

.dual-column-frame {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: start;
}

.primary-zone {
    width: 100%;
}

.showcase-zone {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-zone:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.media-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.media-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.showcase-zone:hover .media-canvas {
    transform: scale(1.05);
}

.content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    padding: 40px 30px 30px;
    transition: padding 0.3s ease;
}

.showcase-zone:hover .content-overlay {
    padding: 50px 30px 30px;
}

.attributes-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.category-marker {
    background: rgba(59, 130, 246, 0.6);
    color: #fff;
    padding: 8px 18px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.time-stamp {
    color: #aaa;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.time-stamp::before {
    content: '•';
    color: #3b82f6;
}

.feature-title {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s ease;
    cursor: pointer;
}


.description-snippet {
    color: white ;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.progress-bullets {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.bullet-point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.bullet-point::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #3b82f6;
    transition: all 0.3s ease;
}

.bullet-point:hover {
    background: #666;
    transform: scale(1.2);
}

.bullet-point.active-state {
    background: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.side-panel {
    display: flex;
    flex-direction: column;
    gap: 43px;
    width: 100%;
}

.widget-container {
    color: white;
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 25px;
    width: 100%;
    transition: all 0.3s ease;
}

.widget-container:hover {
    border-color: #3b82f6;
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.widget-container h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.widget-container h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
}

.highlight-item {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #222;
    align-items: flex-start;
    transition: all 0.3s ease;
    cursor: pointer;
}

.highlight-item:hover {
    padding-left: 10px;
    background: rgba(59, 130, 246, 0.05);
}

.highlight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.position-badge {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    min-width: 40px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.highlight-item:hover .position-badge {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.item-content {
    flex: 1;
}

.item-content h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.highlight-item:hover .item-content h4 {
    color: #3b82f6;
}

.posted-time {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.highlight-item:hover .posted-time {
    color: #888;
}

.tag-collection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-element {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tag-element::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    transition: left 0.5s ease;
}

.tag-element:hover::before {
    left: 100%;
}

.tag-element:hover {
    background: #2a2a2a;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.2);
}

.gallery-matrix {
    color: white;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default for large screens */
    gap: 25px;
    width: 100%;
}

.content-block {
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
}

.content-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.content-block:hover::before {
    opacity: 1;
}

.content-block:hover {
    transform: translateY(-10px);
    border-color: #3b82f6;
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}

.preview-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image img {
    transform: scale(1.05);
}

.preview-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent);
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image::after {
    transform: translate(-50%, -50%) scale(1);
}

.text-section {
    padding: 25px;
    position: relative;
    z-index: 2;
}

.meta-information {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.subject-tag {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.subject-tag.gaming {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.content-block:hover .subject-tag.gaming {
    background: rgba(16, 185, 129, 0.2);
    transform: scale(1.05);
}

.subject-tag.arvr {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.content-block:hover .subject-tag.arvr {
    background: rgba(139, 92, 246, 0.2);
    transform: scale(1.05);
}

.subject-tag.security {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.content-block:hover .subject-tag.security {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.05);
}

.creation-date {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.content-block:hover .creation-date {
    color: #888;
}

.block-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.content-block:hover .block-title {
    color: #3b82f6;
}

.brief-description {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.content-block:hover .brief-description {
    color: #aaa;
}

.directional-icon {
    color: #3b82f6;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.content-block:hover .directional-icon {
    transform: translateX(10px);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* --- Media Queries for Responsiveness (Unchanged) --- */

/* Tablet/Medium Screens (Max 1024px) */
@media (max-width: 1024px) {
    
    .dual-column-frame {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    
    .side-panel {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 calc(50% - 10px); 
        max-width: calc(50% - 10px);
    }
}

    
@media (max-width: 640px) {
    .banner-strip h1 {
        font-size: 28px;
    }

    .media-wrapper {
        height: 350px; /* Smaller height for featured image */
    }

    .feature-title {
        font-size: 1.5rem;
    }

    /* Adjust gallery to a single column */
    .gallery-matrix {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Stack side panel widgets vertically */
    .side-panel {
        flex-direction: column;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/*================== END =====================*/

/* DOORLOCK SYSTEM BY PCESS */

.doorlock-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 70px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-doorlock-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;

    background-image:
    linear-gradient(200deg, rgba(62, 222, 47, 0) 30%, rgba(37, 228, 145, 0.5) 70%, rgba(27, 99, 255, 1) 100%),
    url('../images/pc-builds.jpg');
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
    to bottom,
    transparent 0%,  /* Start fully transparent (top fade-out) */
    black 10%,        /* Become fully visible at 5% */
    black 85%,       /* Stay fully visible until 95% */
    transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.doorlock-header {
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.doorlock-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}


.why-choose-layer {
    text-align: center;
    padding: 40px 20px;
}

    .why-choose-layer.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

	.why-choose-layer.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

.why-choose-question {
    font-family: 'Lexend', sans-serif;
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.why-choose-answer{
    font-size: 32px;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* client-nav section */


/* Base state for all sections - hidden by default */
.cnsection, .projsection {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Active section - visible with animation */
.cnsection:not(.d-none), .projsection:not(.d-none) {
    opacity: 1;
    transform: translateY(0);
    animation: slideInUp 0.6s ease-out forwards;
}

/* Keyframe animation for sliding in from bottom */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternative: Fade and Scale Animation */
.cnsection.scale-animation:not(.d-none), 
.projsection.scale-animation:not(.d-none) {
    animation: fadeScale 0.5s ease-out forwards;
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Staggered animation for child elements */
.cnsection:not(.d-none) .section-h1,
.projsection:not(.d-none) .proj-h1 {
    animation: slideInUp 0.6s ease-out 0.1s backwards;
}

.cnsection:not(.d-none) .section-p,
.projsection:not(.d-none) .proj-p {
    animation: slideInUp 0.6s ease-out 0.2s backwards;
}

.cnsection:not(.d-none) .dl-gradient-button,
.projsection:not(.d-none) .proj-gradient-button {
    animation: slideInUp 0.6s ease-out 0.3s backwards;
}

.cnsection:not(.d-none) .gradient-border-box,
.projsection:not(.d-none) .gradient-border-proj {
    animation: slideInRight 0.6s ease-out 0.2s backwards;
}

/* Slide in from right for images */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px); /* Start 30px to the left */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* End at the normal position */
    }
}

/* Button click feedback animation */
.clientbtn, .projbtn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clientbtn:active, .projbtn:active {
    transform: translateY(-5px) scale(0.98);
}

/* Smooth active indicator animation */
.clientbtn.active::after, .projbtn.active::after {
    animation: expandLine 0.4s ease-out forwards;
}

@keyframes expandLine {
    from {
        width: 0%;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}



.clientnavpart {
    margin-top: 30px;
    max-height: 670px;
}

.client-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for nav buttons */
.clientbtn {
    transition: color 0.2s ease;
    justify-content: center;
}

.clientbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.clientbtn.active {
    color: #fff !important;
    position: relative;
}

.clientbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

/* Replace Tailwind's 'hidden' with Bootstrap's 'd-none' */
.d-none {
    display: none !important; 
}

.section-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-box {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.section-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.cnsection {
    margin-top: 10px;
}

.section-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.section-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient */
.dl-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.dl-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* RESPONSIVE DESIGN FOR CLIENT NAV SECTION */

@media (max-width: 1280px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 100%;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1270px;
    }

    .cnsection{
        width: 1100px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}


@media (max-width: 1024px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1030px;
    }

    .cnsection{
        width: 1000px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 15px;
        width: 600px;
        align-content: center   ;
    }

    .client-nav {
         width: 500px;
    } 
    
    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content {
        width: 550px;
    }

    .cnsection {
        width: 550px;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .client-nav {
        width: 760px;
    }

    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content{
        width: 750px;
    }

    .cnsection{
        width: 750px;

    }
}


@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .cnsection, .projsection {
        transform: translateY(20px);
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .clientnavpart {
        margin-top: 15px;
        max-height: auto;
    }

    .client-nav {
        font-size: 20px;
    } 

    #nav-container {
        justify-content: center;
        padding-bottom: 1rem;
    }
    
    .clientbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .clientbtn.active::after {
        height: 2px;
    }

    .section-content {
        height: auto;
        min-height: 500px;
    }

    .cnsection {
        padding: 2rem 1rem !important;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}


@media (max-width: 430px) {

    .clientnavpart {
        margin-top: 15px;
        width: 400px;
        align-content: center   ;
    }

    .client-nav {
         width: 400px;
    } 
    
    .clientbtn {
        width: 85px;
        padding: 1px !important;
    }

    .section-content {
        width: 400px;
    }

    .cnsection {
        width: 400px;
    }

    .section-h1 {
        font-size: 26px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 250px;
    }

    .section-img {
        min-height: 250px;
    }

    .dl-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .clientnavpart {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .client-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .clientbtn {
        width: 80px;
        padding: 1px !important;
    }

    .section-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .cnsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }

    .section-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .section-p {
        font-size: 14px;
        margin-top: 20px;
        line-height: 1.4;
    }

    .gradient-border-box {
        min-height: 220px;
        margin-bottom: 1.5rem;
    }

    .section-img {
        min-height: 220px;
    }

    .dl-gradient-button {
        padding: 8px 20px;
        font-size: 0.75rem;
        max-width: 250px;
    }
}
/* MANY MORE SECTION */


.many-more {
    margin-top: 70px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
}

.and-many {
    font-size: 48px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}


@media (max-width: 1024px) {
    .and-many {
        font-size: 2rem;
        margin-left: 15px;
    }
}

@media (max-width: 768px) {
    .and-many {
        font-size: 1.8rem;
        margin-left: 15px;
    }
}

@media (max-width: 480px) {
    .and-many {
        font-size: 1.8rem;
    }
}

.many-more-container {
    margin-top: 60px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 400px;
}

    .many-more-container.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .many-more-container.animate-visible {
        animation: 1.2s anim-fadeIn linear forwards; 
    }

/* Replaced .card */
.clients-card {
    position: absolute;
    width: 90%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform .4s ease;
    cursor: pointer;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    min-height: 440px;
    display: flex;
}

.clients-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

/* Replaced .container */
.clients-container {
    width: 100%;
    max-width: 800px;
    max-height: 600px;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Replaced .cards */
.many-more-cards {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
}

/*
 * CORE ANIMATION LOGIC (Updated to use .clients-container)
 */

/* Side Cards (Left position: translateX(-40%)) */
.clients-container.active-card-1 #card-3, /* Card 3 moves left when 1 is active */
.clients-container.active-card-2 #card-1, /* Card 1 moves left when 2 is active */
.clients-container.active-card-3 #card-2 { /* Card 2 moves left when 3 is active */
    transform: translatex(-40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Side Cards (Right position: translateX(40%)) */
.clients-container.active-card-1 #card-2, /* Card 2 moves right when 1 is active */
.clients-container.active-card-2 #card-3, /* Card 3 moves right when 2 is active */
.clients-container.active-card-3 #card-1 { /* Card 1 moves right when 3 is active */
    transform: translatex(40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Center Card (translateX(0)) */
.clients-container.active-card-1 #card-1, /* Card 1 centers */
.clients-container.active-card-2 #card-2, /* Card 2 centers */
.clients-container.active-card-3 #card-3 { /* Card 3 centers */
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
    box-shadow: 0px 0px 15px 0px rgba(81, 81, 81, 0.47); 
}

/* RESPONSIVE DESIGN FOR MANY MORE SECTION */

@media (max-width: 1280px) {
    .clients-container {
        max-width: 1000px; /* Use a smaller max-width */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 450px; /* Reduced minimum card height */
        width: 700px;
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


@media (max-width: 820px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 760px; /* Use a smaller max-width */
        max-height: 580px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 590px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}



@media (max-width: 768px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        max-width: 90%; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 430px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 400px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 300px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 360px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 360px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 290px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


/* DOORLOCK BRAND SLIDER SECTION */

.doorlock-brand-slider {
    margin-top: 600px;
}

@media (max-width: 1280px) {
    .doorlock-brand-slider{
        width: 100%;
    }
}

@media (max-width: 820px) {
    .doorlock-brand-slider{
        margin-top: 550px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .doorlock-brand-slider{
        margin-top: 150px;
    }
}

@media (max-width: 420px) {
    .doorlock-brand-slider{
        margin-top: 150px;
        width: 100%;
    }
}


/* OTHER PROJECTS SECTION */

.other-proj-nav {
    margin-top: 150px;
    max-height: 670px;
    margin-bottom: 20px;
}

.proj-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for project nav buttons */
.projbtn {
    transition: color 0.2s ease;
}

.projbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.projbtn.active {
    color: #fff !important;
    position: relative;
}

.projbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

.projects-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-proj {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.proj-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.projsection {
    margin-top: 10px;
}

.proj-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.proj-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient for Projects */
.proj-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.proj-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* DOORLOCK RESPONSIVE DESIGN */

@media(max-width: 1280px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 820px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
        width: 100%;
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 768px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 430px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

/* OTHER PROJ AREA */

@media (max-width: 1280px) {
    .other-proj-nav{
        margin-top: 80px;
        max-width: auto;
        margin-bottom: -20px;
    }

    .proj-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .projects-content{
        width: 1270px;
    }

    .projsection{
        width: 1200px;
    }


    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 1024px) {
    .other-proj-nav{
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
    }

    .proj-nav {
        font-size: 24px;
    }

    .projects-content{
        width: 1020px;
    }

    .projsection{
        width: 1000px;
    }

    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .proj-nav {
        width: 760px;
    }

    .projbtn {
        width: 300px;
        padding: 1px !important;
    }

    .projects-content{
        width: 750px;
    }

    .projsection{
        width: 750px;

    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .other-proj-nav {
        margin-top: 15px;
        max-height: auto;
    }
    .proj-nav {
        font-size: 20px;
    }

    #navp-container {
        justify-content: flex-start;
        padding-bottom: 1rem;
    }

    .projbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .projbtn.active::after {
        height: 2px;
    }

    .projects-content {
        height: auto;
        min-height: 500px;
    }

    .proj-section {
        padding: 2rem 1rem !important;
    }

    .projsection {
        margin-top: 0px;
    }

    .proj-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .proj-p {
        font-size: 16px;
        margin-top: 40px;
        line-height: 1.5;
    }

    .gradient-border-proj {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
    }

    .proj-img {
        min-height: 300px;
    }

    .proj-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
        margin-top: 30px;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 410px;
    }

    .proj-nav {
        width: 400px;
    }

    .projbtn {
        width: 88px;
        padding: 1px !important;
    }

    .projects-content{
        width: 400px;
    }

    .projsection{
        width: 400px;
    }

    .proj-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .proj-p {
        font-size: 14px;
        margin-top: 20px;
    }

    .gradient-border-proj {
        min-height: 250px;
    }

    .proj-img {
        min-height: 250px;
    }

    .proj-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .other-proj-nav {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .proj-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .projbtn {
        width: 75px;
        padding: 1px !important;
    }

    .projects-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .projsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }
}

/* Remove default link underline */
a {
    text-decoration: none;
}



/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */
/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */

.public-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
            margin-bottom: 30px;
        }

        .flex-public {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1500px;
            margin: 30px auto;
            padding: clamp(40px, 8vw, 100px) clamp(20px, 4vw, 60px);
            gap: clamp(30px, 5vw, 80px);
            min-height: 500px;
            opacity: 0;
        }

        .flex-public.visible {
            animation: fadeInUp 0.8s ease-out forwards !important;
        }

        .flex-public.visible:nth-child(1) {
            animation: fadeInUp 0.8s ease-out 0s forwards;
        }
        .flex-public.visible:nth-child(2) {
            animation: fadeInUp 0.8s ease-out 0.15s forwards;
        }
        .flex-public.visible:nth-child(3) {
            animation: fadeInUp 0.8s ease-out 0.3s forwards;
        }
        .flex-public.visible:nth-child(4) {
            animation: fadeInUp 0.8s ease-out 0.45s forwards;
        }
        .flex-public.visible:nth-child(5) {
            animation: fadeInUp 0.8s ease-out 0.6s forwards;
        }

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

        .text-public {
            flex: 1;
            min-width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .text-public h2 {
            font-size: clamp(32px, 4vw, 52px);
            margin-bottom: 20px;
            background-clip: text;
            font-weight: 700;
            letter-spacing: -0.5px;
            font-family: 'Space Grotesk', sans-serif;
        }

        .text-public p {
            font-size: 1.5rem;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 30px;
            font-weight: 400;
            font-family: 'Lexend', sans-serif;
        }

        .public-btn {
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 600;
            padding: 12px 50px;
            border-radius: 50px;
            background: #0000;
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-block;
            width: fit-content;
            position: relative;
            overflow: hidden;
            border: 1px solid;
        }

        .public-btn::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: left 0.5s ease;
            z-index: 1;
        }

        .public-btn span {
            position: relative;
            z-index: 2;
        }

        .public-btn:hover {
            transform: translateY(-3px);
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
        }
        .public-btn:hover::before {
            left: 100%;
        }

        .public-btn:active {
            transform: translateY(-1px);
        }

        .demo-section {
            display: flex;
            gap: 30px;
            margin-top: 50px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .button-group h3 {
            color: #888;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        @keyframes gradientShiftp {
            0% {
                background-position: -200% center;
            }
            100% {
                background-position: 200% center;
            }
        }

        .visual-public {
            position: relative;
            max-width: 600px;
            height: 450px;
            border-radius: 20px;
            flex: 1;
        }

        /* Blur shadow background */
        .visual-public::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 101%;
            height: 100%;
            background: linear-gradient(
                90deg,
                #FF6666 0%,
                #FF894C 20%,
                #90FF55 40%,
                #7B94F6 60%,
                #FF77F1 80%,
                #FF6666 100%
            );
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            filter: blur(10px);
            z-index: 0;
            pointer-events: none;
        }

        .visual-public img {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
            z-index: 1;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .visual-public:hover img {
            transform: scale(1.03);
        }

        .flex-public:nth-child(even) {
            flex-direction: row-reverse;
        }

        /* Responsive Design */
        /* 344px - Extra Small Phones */
        @media (max-width: 344px) {
            .public-wrapper{
                margin-bottom: -100px;
                margin-top: 50px;
            }
            .flex-public {
                flex-direction: column !important;
                padding: 20px 12px;
                gap: 15px;
                margin-bottom: -30px !important;
                
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 24px;
                margin-bottom: 12px;
            }

            .text-public p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 250px;
                margin-bottom: -50px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 10px 30px;
                font-size: 14px;
                margin-bottom: -100px !important;
            }
        }

        /* 360px - Small Phones */
@media (max-width: 360px) {
    .public-wrapper {
        margin-top: -10px !important;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 20px 14px;
        gap: 16px;
        margin-bottom: -100px !important;
    }

    .text-public {
        min-width: 100%;
        font-size: 14px;
    }

    .text-public h2 {
        font-size: 26px !important;
        margin-bottom: 12px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 260px;
    }

    .visual-public img {
        width: 100% !important;
        height: 260px !important;

    }

    .public-btn {
        padding: 10px 32px;
        font-size: 14px;
    }
}

/* 375px - iPhone SE/6/7/8 */
@media (max-width: 375px) {
    .public-wrapper {
        margin-bottom: -50px;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 22px 16px;
        gap: 18px;
        margin: 16px auto;
        max-height: 580px;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 13px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 280px;
    }

    .visual-public img {
        width: 100% !important;
        height: 280px !important;
        
    }

    .public-btn {
        padding: 11px 35px;
        font-size: 14px;
    }
}

/* 390px - Pixel 4/5 */
@media (max-width: 390px) {
    .public-wrapper {
        margin-top: 50px;
        margin-bottom: 190px !important;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 24px 18px;
        gap: 15px;
        margin: 18px auto;
        transform: scale(0.9) !important;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 14px;
    }

    .text-public p {
        font-size: 15px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 230px;
        margin-top: -120px;
    }

    .visual-public img {
        width: 100% !important;
        height: 230px !important;
    }

    .public-btn {
        padding: 10px 35px !important;
        font-size: 15px !important;
        margin-bottom: -130px !important;
        
    }
}

        /* 412px - Galaxy S9 */
        @media (max-width: 412px) {
            .public-wrapper{
                margin-bottom: -10px;
                overflow: visible;
            }

            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 26px 20px;
                gap: 20px;
                margin-bottom: -100px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-bottom: -60px !important;
                margin-top: -60px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 12px 40px;
                font-size: 15px;
            }
        }

        /* 414px - iPhone XR */
        @media (max-width: 414px) {
            .flex-public {
                flex-direction: column !important;
                padding: 26px 20px;
                gap: 20px;
                margin: 18px auto;
                transform: scale(0.9) !important;
                margin-bottom: -30px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-top: -100px;
                margin-bottom: -40px;
            }

            .public-btn {
                padding: 12px 30px;
                font-size: 15px;
                margin-bottom: -100px !important;
            }
        }

        /* 430px - Galaxy S22 */
        @media (min-width: 320px) and (max-width: 430px) {
            .public-wrapper {
                margin-bottom: -40px !important;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 28px 22px;
                gap: 20px;
                margin-top: -100px !important;
            }

            .text-public {
                min-width: 350px !important;
                margin: 10px !important;
                transform: scale(0.9);
            }

            .text-public h2 {
                font-size: 34px !important;
                margin-bottom: 15px;
            }

            .text-public p {
                font-size: 15px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 330px;
                margin-bottom: -50px;
                margin-top: -40px;
            }

            .public-btn {
                padding: 10px 32px !important;
                font-size: 15px !important;
                transform: scale(0.9);
                margin-bottom: -90px !important;
            }
        }

        /* 540px - Small Tablets */
        @media (max-width: 540px) {
            .flex-public {
                flex-direction: column !important;
                padding: 30px 24px;
                gap: 22px;
                margin: 20px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 30px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public{
                max-height: 270px !important;
                width: 390px !important;
            }

            .visual-public img{
                max-width: 390px !important;
                max-height: 250px !important;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 768px - iPad/Tablet */
        @media (max-width: 768px) {
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 35px 30px;
                gap: 25px;
                margin: 25px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 38px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 380px;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
        }

        /* 853px - Large Tablet */
        @media (max-width: 853px) {
            .public-wrapper{
                margin-bottom: 40px;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 50px 45px !important;
                gap: 28px;
                margin-top: 70px !important;
            }

            .text-public {
                min-width: 100%;
                margin: auto;
                text-align: center;
                align-items: center;
                margin-bottom: -50px;
            }

            .text-public h2 {
                font-size: 48px !important;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 22px !important;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                order: -1;
                max-width: 590px !important;
            }

            .visual-public img{
                width: 590px;
                height: 380px !important;  
            }

            .public-btn {
                padding: 10px 40px !important;
                font-size: 18px !important;
            }
        }

        /* 912px - Large Tablet Landscape */
        @media (max-width: 912px) {
            .flex-public {
                flex-direction: row;
                min-height: auto;
                padding: 40px 35px;
                gap: 30px;
                margin: 25px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 36px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public {
                max-width: 400px;
                height: 320px;
                flex: 1;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 992px - Small Desktop */
        @media (max-width: 992px) {
            .flex-public {
                flex-direction: row;
                min-height: 450px;
                padding: 45px 40px;
                gap: 40px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 40px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                max-width: 450px;
                height: 350px;
                flex: 1;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
        }

        /* 1024px - Tablet Landscape / Desktop */
        @media (max-width: 1024px) {
            .flex-public {
                flex-direction: row;
                min-height: 480px;
                padding: 50px 45px;
                gap: 45px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 350px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 42px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 17px !important;
                line-height: 1.75;
                margin-bottom: 24px;
            }

            .visual-public {
                max-width: 500px;
                height: 330px !important;
                flex: 1;
            }

            .public-btn {
                padding: 10px 35px !important;
                font-size: 16px;
            }
        }

        /* 1280px - Full Desktop */
        @media (max-width: 1280px) {
            .flex-public {
                flex-direction: row;
                min-height: 500px;
                padding: 60px 50px;
                gap: 50px;
                margin: 30px 40px;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 380px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 46px;
                margin-bottom: 20px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.8;
                margin-bottom: 26px;
            }

            .visual-public {
                max-width: 550px;
                height: 400px;
                flex: 1;
            }

            .public-btn {
                padding: 14px 52px;
                font-size: 16px;
            }
        }


        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */
        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease-out;
            margin-top: 40px;
        }

        .modal-overlay.active {
            display: flex;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .modal-content-public {
            background: black;
            border: 2px solid #7B54B1;
            border-radius: 20px;
            padding: 50px;
            max-width: 850px;
            width: 90%;
            position: relative;
            display: flex;
            gap: 50px;
            animation: slideUp 0.4s ease-out;
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4), -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
            margin-top: 0px;
        }

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

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: #a78bfa;
            font-size: 32px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            color: #c084fc;
            transform: scale(1.2);
        }

        .testimonial-image {
            flex: 0 0 450px;
            height: 400px;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 0px 30px rgba(168, 85, 247, 0.2);
        }

        .testimonial-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .testimonial-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .testimonial-text h2 {
            font-size: 28px;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #a78bfa, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-family: 'Space Grotesk', sans-serif;
        }

        .testimonial-text p {
            font-size: 18px;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 20px;
            font-family: 'Lexend', sans-serif;
        }

        .public-stars {
            display: flex;
            gap: 8px;
            font-size: 24px;
            display: inline-block; 
    
            /* Ensure the animation is fully defined */
            animation: rgbGoldPulse 2s ease-in-out infinite alternate;
        }

        @media (max-width: 768px) and (min-width: 541px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 35px;
                flex-direction: column;
                max-width: 750px;
                margin: auto;
            }

            .testimonial-image img {
                width: 790px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 8px;
            }
        }

        @media (max-width: 344px) {
            .modal-content-public {
                padding: 20px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 400px;
                height: 410px !important;
            }

            .testimonial-text h2 {
                font-size: 18px;
                margin-bottom: 12px;
            }

            .testimonial-text p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 12px;
            }

            .public-stars {
                font-size: 16px;
                gap: 5px;
            }

            .close-btn {
                font-size: 24px;
                width: 32px;
                height: 32px;
            }
        }

        /* Mobile: 360px */
        @media (max-width: 360px) and (min-width: 345px) {
            .modal-content-public {
                padding: 25px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 210px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 430px;
            }

            .testimonial-text h2 {
                font-size: 20px;
                margin-bottom: 14px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 14px;
            }

            .public-stars {
                font-size: 18px;
                gap: 6px;
            }

            .close-btn {
                font-size: 26px;
                width: 34px;
                height: 34px;
            }
        }

        /* Mobile: 375px */
        @media (max-width: 375px) and (min-width: 361px) {
            .modal-content-public {
                padding: 28px;
                gap: 22px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 420px;
            }

            .testimonial-text h2 {
                font-size: 21px;
                margin-bottom: 15px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .public-stars {
                font-size: 19px;
                gap: 6px;
            }

            .close-btn {
                font-size: 28px;
            }
        }

        /* Mobile: 390px */
        @media (max-width: 390px) and (min-width: 376px) {
            .modal-content-public {
                padding: 30px;
                gap: 24px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 440px;
            }

            .testimonial-text h2 {
                font-size: 22px;
                margin-bottom: 16px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 20px;
                gap: 6px;
            }
        }

        /* Mobile: 412px */
        @media (min-width: 400px) and (max-width: 412px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 470px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 13px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
        }

        /* Mobile: 414px */
        @media (max-width: 414px) and (min-width: 413px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 450px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 17px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
        }

        /* Mobile: 430px */
        @media (max-width: 430px) and (min-width: 415px) {
            .modal-content-public {
                padding: 35px;
                gap: 26px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 460px;
            }

            .testimonial-text h2 {
                font-size: 24px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 7px;
            }
        }

        /* Tablet: 540px */
        @media (max-width: 540px) and (min-width: 431px) {
            .modal-content-public {
                padding: 40px;
                gap: 30px;
                flex-direction: column;
                max-width: 440px;
                max-height: 500px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 200px;
                width: 95%;
                margin: auto;
            }

            .testimonial-image img{
                width: 550px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.7;
                margin-bottom: 5px;
            }

            .public-stars {
                font-size: 20px;
                gap: 8px;
            }
        }


        /* Tablet: 853px */
        @media (min-width: 810px) and (max-width: 820px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: column !important;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image{
                max-width: 750px;
                height: 400px !important;
                margin: auto;
            }

            .testimonial-image img{
                width: 750px !important;
                height: 700px !important;
            }

            .testimonial-text h2 {
                font-size: px !important;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 18px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

         /* Tablet: 853px */
        @media (max-width: 853px) and (min-width: 769px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: row;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image img{
                width: 650px !important;
                height: 650px;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        @media (max-width: 912px) and (min-width: 854px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 40px;
                flex-direction: column;
                max-width: 800px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 360px;
                width: 720px;
                margin: auto;
            }

            .testimonial-image img{
                width: 900px !important;
                height: 750px;
            }

            .testimonial-text h2 {
                font-size: 30px !important;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 20px !important;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Tablet: 992px */
        @media (max-width: 992px) and (min-width: 941px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 800px;
            }

            .testimonial-image {
                flex: 0 0 350px;
                height: 320px;
            }

            .testimonial-text h2 {
                font-size: 26px;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Desktop: 1024px */
        @media (max-width: 1024px) and (min-width: 993px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 870px;
                height: 400px;
            }
            .modal-overlay {
                height: 700px;
                margin: auto;
            }
            .testimonial-image {
                flex: 0 0 400px;
                height: 300px;
            }

            .testimonial-image img{
                width: 600px;
                height: 550px;
            }

            .testimonial-text h2 {
                font-size: 36px;
                margin-bottom: -10px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

        /* Desktop: 1280px and above */
        @media (min-width: 1100px) and (max-width: 1280px){
            .modal-content-public {
                padding: 50px;
                gap: 40px;
                max-width: 1100px;
                flex-direction: row;
                height: 550px;
            }

            .testimonial-image {
                flex: 0 0 550px !important;
                height: 400px !important;
                margin: auto;

            }

            .testimonial-image img{
                flex: 0 0 300px !important;
                height: 400px;
                margin: auto;
            }

            .testimonial-text h2 {
                font-size: 28px;
                margin-bottom: 20px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 20px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

.public-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-public-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;
    margin-top: -40px;
    background-image: linear-gradient(180deg, rgba(255, 23, 68, 0) 30%, rgba(255, 23, 68, 0.5) 60%, rgba(187, 134, 252, 1) 100%),
    url('https://i.pinimg.com/1200x/e6/f8/96/e6f896b726a7fe83a306673b2c5c4a18.jpg');
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 85%,
    transparent 100%);
    overflow: hidden;
}

.public-header {
    position: absolute;
    justify-content: center;
    margin-top: 480px;
    text-align: center;
    padding: 40px 60px;
    width: 100%;
}

.public-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.publicproj {
    text-align: center;
    padding: 40px 20px;
}

.publicproj.is-hidden {
    opacity: 0;
}

.publicproj.animate-visible {
    animation: 1.5s anim-fadeIn linear forwards;
}

.are-public {
    font-size: 32px !important;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* 344px - 349px */
@media (min-width: 344px) and (max-width: 349px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 250px;
        padding: 20px 15px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.1;
    }
    .publicproj {
        padding: 30px 12px;
    }
    .are-public {
        font-size: 14px !important;
        margin-top: -50px;
        margin-bottom: -90px !important;
    }
}

/* 350px - 360px */
@media (min-width: 350px) and (max-width: 360px) {
    .primary-public-wrapper {
        height: 320px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 200px;
        padding: 25px 18px;
    }
    .public-header h1 {
        font-size: 26px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 30px 14px;
    }
    .are-public {
        font-size: 15px !important;
        margin-bottom: -60px !important;
        margin-top: -40px;
    }
}

/* 361px - 375px */
@media (min-width: 361px) and (max-width: 375px) {
    .primary-public-wrapper {
        height: 350px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 160px !important;
        padding: 28px 20px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 32px 15px;
    }
    .are-public {
        font-size: 16px !important;
        margin-bottom: -100px !important;
        margin-top: -60px !important;
    }
}

/* 376px - 390px */
@media (min-width: 376px) and (max-width: 390px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 230px;
        padding: 30px 22px;
    }
    .public-header h1 {
        font-size: 30px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 34px 16px;
    }
    .are-public {
        font-size: 17px !important;
        margin-top: -50px;
        margin-bottom: -30px !important;
    }
}

/* 391px - 412px */
@media (min-width: 391px) and (max-width: 412px) {
    .primary-public-wrapper {
        height: 380px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 230px !important;
        padding: 32px 24px;
    }
    .public-header h1 {
        font-size: 32px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px !important;
    }
}

/* 413px - 414px */
@media (min-width: 413px) and (max-width: 414px) {
    .primary-public-wrapper {
        height: 485px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 235px !important;
        padding: 32px 25px;
    }
    .public-header h1 {
        font-size: 40px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-top: -40px !important;
        margin-bottom: -20px !important;
    }
}

/* 415px - 429px */
@media (min-width: 415px) and (max-width: 430px) {
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 33px 26px;
    }
    .public-header h1 {
        font-size: 36px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 19px;
    }
    .are-public {
        font-size: 19px !important;
        margin-top: -40px;
        margin-bottom: 30px !important;
    }
}

/* 530px - 540px */
@media (min-width: 530px) and (max-width: 540px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 450px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 260px !important;
    }
    .public-header h1 {
        font-size: 42px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 25px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px;
        margin-top: -40px;
        max-width: 100%;
    }
}

/* 760px - 768px */
@media (min-width: 760px) and (max-width: 768px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 300px !important;
        padding: 38px 45px;
    }
    .public-header h1 {
        font-size: 45px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 30px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 810px - 820px */
@media (min-width: 810px) and (max-width: 820px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 850px - 853px */
@media (min-width: 850px) and (max-width: 853px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 900px - 912px */
@media (min-width: 900px) and (max-width: 912px) {
    .public-area {
        margin: 48px auto 48px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 300px;
        padding: 39px 55px;
    }
    .public-header h1 {
        font-size: 50px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 45px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 980px - 992px */
@media (min-width: 980px) and (max-width: 992px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 600px !important;
        margin-top: -40px;
    }
    .public-header {
        margin-top: 450px;
        padding: 40px 58px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 30px !important;
        margin-bottom: 2rem;
    }
}

/* 1000px - 1024px */
@media (min-width: 1000px) and (max-width: 1024px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 400px !important;
        margin-top: -80px !important;
    }
    .public-header {
        margin-top: 150px !important;
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 58px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
        margin-top: -60px;
    }
}

/* 1270px - 1280px */
@media (min-width: 1270px) and (max-width: 1280px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 480px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 270px;  
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
        margin-top: -50px;
    }
}

/*Mission Vision CSS*/
/* Mission and Vision Section */
.mission-vision-wrapper {
    background: #000000;
    padding: 80px 20px;
    position: relative;
    overflow-x: hidden;
}

.mission-vision-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #333 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
    animation: dotPulse 4s linear infinite;
}

@keyframes dotPulse {
    0% { opacity: 0.2; }
    15% { opacity: 0.3; }
    30% { opacity: 0.45; }
    50% { opacity: 0.7; }
    70% { opacity: 0.45; }
    85% { opacity: 0.3; }
    100% { opacity: 0.2; }
}

.mission-vision-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4  0px;
    position: relative;
    z-index: 1;
}

.mission,
.vision {
    background: #0a0a0a;
    padding: 60px 40px;
    border-radius: 20px;
    border: 2px solid;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission {
    animation-delay: 0.2s;
}

.vision {
    animation-delay: 0.4s;
}

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

.mission {
    border-color: #00ff88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    animation: fadeInUp 0.8s ease-out 0.2s forwards, borderPulse 3s ease-in-out infinite;
}

.vision {
    border-color: #0088ff;
    box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    animation: fadeInUp 0.8s ease-out 0.4s forwards, borderPulseBlue 3s ease-in-out infinite;
}

.mission:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 255, 136, 0.5);
    border-color: #00ffaa;
}

.vision:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 136, 255, 0.5);
    border-color: #00aaff;
}

/* Animated glow effect */
.mission::before,
.vision::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 8s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Shimmer effect on hover */
.mission::after,
.vision::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.mission:hover::after,
.vision:hover::after {
    transform: translateX(100%);
}

@keyframes borderPulse {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 255, 136, 0.6);
    }
}

@keyframes borderPulseBlue {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 136, 255, 0.6);
    }
}

.mission h2,
.vision h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: slideInLeft 0.8s ease-out;
}

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

.mission p,
.vision p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #e0e0e0;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 968px) {
    .mission-vision-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .mission,
    .vision {
        padding: 50px 35px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 640px) {
    .mission-vision-wrapper {
        padding: 60px 15px;
    }

    .mission,
    .vision {
        padding: 40px 25px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .mission p,
    .vision p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .mission,
    .vision {
        padding: 30px 20px;
    }

    .mission h2,
    .vision h2 {
        font-size: 1.75rem;
        margin-bottom: 15px;
    }

    .mission p,
    .vision p {
        font-size: 0.9rem;
    }

}

/* FDAS Details Page Styles */
.glow-model-container {
    position: relative;
    overflow: visible;
}

.glow-model-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    opacity: 0.3;
    filter: blur(20px);
    z-index: -1;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.model-container {
    position: relative;
    z-index: 1;
}

.gradient-icon {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modern-feature-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: 0.8rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.modern-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.1), rgba(103, 28, 104, 0.1), rgba(123, 84, 177, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.modern-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
}

.modern-feature-card:hover::before {
    opacity: 1;
}

.feature-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.15), rgba(123, 84, 177, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.modern-feature-card:hover .feature-icon-wrapper {
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.25), rgba(123, 84, 177, 0.25));
    transform: scale(1.05);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.feature-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(5px);
}

.feature-item .icon-large {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 70px;
    text-align: center;
}

.feature-item .feature-content h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
}

.feature-item .feature-content p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    font-family: 'Lexend', sans-serif;
}

.gallery-section {
    padding: 80px 0;
    background: #000000;
}

.gallery {
    --size: 100px;
    display: grid;
    grid-template-columns: repeat(6, var(--size));
    grid-auto-rows: var(--size);
    margin-bottom: var(--size);
    place-items: start center;
    gap: 5px;
}

.gallery:has(:hover) img:not(:hover),
.gallery:has(:focus) img:not(:focus) {
    filter: brightness(0.5) contrast(0.5);
}

.gallery img {
    object-fit: cover;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z");
    transition: clip-path 0.25s, filter 0.75s;
    grid-column: auto / span 2;
    border-radius: 5px;
}

.gallery img:nth-child(5n - 1) { 
    grid-column: 2 / span 2 
}

.gallery img:hover,
.gallery img:focus {
    clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z");
    z-index: 1;
    transition: clip-path 0.25s, filter 0.25s;
}

.gallery img:focus {
    outline: 1px dashed black;
    outline-offset: -5px;
}

.fdas-invest-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.fdas-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(10px);
}

.benefit-icon {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.benefit-text {
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
}

/* Mobile responsive for gallery */
@media (max-width: 767px) {
    .gallery-section {
        padding: 40px 0;
    }
    
    /* Hide gallery on mobile, show product visual instead */
    .gallery {
        display: none;
    }
    
    .mobile-product-visual {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        margin: 0 auto 40px auto;
        
        /* Use FDAS-related image */
        background-image: url(https://cdn.pixabay.com/photo/2023/09/25/17/12/fire-alarm-8275669_1280.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: 8px solid transparent;
        border-radius: 15px;
        transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
    }
    
    .mobile-product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #AC3838 0%, #671C68 50%, #7B54B1 100%) 1;
    }
}

/* Hide mobile product visual on desktop */
.mobile-product-visual {
    display: none;
}

/* FDAS Details Page Additional Styles */
.fire-alarm-model-section {
    padding: 80px 0;
    background: #000000;
}

.simplex-sensor-model-section {
    padding: 80px 0;
    background: #000000;
}

.model-container {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.model-viewer-fdas {
    width: 100%;
    height: 100%;
    background: #000;
}

.fdas-footer {
    background-color: #090909;
    padding: 0px 30px;
}

.fdas-copyright {
    color: #ffffff;
    font-family: 'Lexend', sans-serif;
}

.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-left: 1rem;
}

.navbar-toggler-custom {
    margin-right: 1rem;
}

.CompanyInfo-logo {
    width: 17.1875rem;
    height: 6.25rem;
}

/* FDAS Investment Carousel Styles */
.fdas-investment-carousel {
    padding: 80px 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.fdas-investment-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05), rgba(103, 28, 104, 0.05), rgba(123, 84, 177, 0.05));
    z-index: 1;
}

.carousel-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 2;
    margin-bottom: 3rem;
}

.carousel-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-container {
    position: relative;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    transform: translateX(100%);
}

.carousel-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.carousel-content {
    display: flex;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    border-radius: 20px;
    overflow: hidden;
}

.carousel-image {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    display: none;
}

.carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.carousel-slide:hover .carousel-image img {
    transform: scale(1.05);
}

.carousel-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 6rem 3rem 3rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
    position: relative;
    z-index: 2;
}

.carousel-text h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.carousel-text p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.carousel-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 100;
    pointer-events: none;
}

.carousel-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    margin: 0 0.5rem;
}

.carousel-btn:hover {
    background: linear-gradient(135deg, rgba(172, 56, 56, 1), rgba(123, 84, 177, 1));
    transform: scale(1.1);
}

.carousel-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 100;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    transform: scale(1.2);
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .fdas-investment-carousel {
        padding: 40px 0;
    }
    
    .carousel-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    .carousel-container {
        height: 400px;
    }
    
    .carousel-content {
        flex-direction: column;
        position: relative;
    }
    
    .carousel-image {
        height: 100%;
        position: relative;
    }
    
    .carousel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .carousel-overlay {
        display: block;
        background: rgba(0, 0, 0, 0.8);
    }
    
    .carousel-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 4rem);
        padding: 2rem;
        background: transparent;
        text-align: center;
    }
    
    .carousel-text h3 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.9rem;
        margin-bottom: 0;
        padding: 0 3rem;
        text-align: center;
    }
    
    .carousel-controls {
        padding: 0 1rem;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border: none;
        background: transparent;
        color: white;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        backdrop-filter: none;
        border-radius: 0;
    }
    
    .carousel-btn:hover {
        background: transparent;
        transform: scale(1.1);
        color: rgba(255, 255, 255, 0.9);
    }
    
    .carousel-indicators {
        display: none;
    }
    
    .indicator {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        height: 350px;
    }
    
    .carousel-text {
        padding: 1.5rem;
    }
    
    .carousel-text h3 {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }
}

/* ========================================
   ABOUT V2 PAGE - UNIQUE STYLES
   ======================================== */

/* Hero Logo */
.about-v2-hero-logo {
    width: 350px;
    height: 350px;
    margin-bottom: -20px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.2)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.1));
}

/* Black Hole Container */
.about-v2-blackhole-container {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Modern About Section */
.about-v2-modern-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
}

.about-v2-modern-section .row {
    min-height: 70vh;
    align-items: center;
}

.about-v2-modern-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

.about-v2-modern-content {
    padding: 0 50px;
    color: #ffffff;
}

.about-v2-modern-heading {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-v2-modern-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    font-family: 'Lexend', sans-serif;
    color: #e0e0e0;
}

/* Feature Icons */
.about-v2-feature-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.about-v2-feature-item {
    display: flex;
    align-items: center;
}

.about-v2-feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #f85858, #ef5ef1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.about-v2-feature-icon i {
    color: white;
    font-size: 20px;
}

.about-v2-feature-item h4 {
    color: #ffffff;
    margin-bottom: 3px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
}

.about-v2-feature-item p {
    color: #a0a0a0;
    margin: 0;
    font-size: 0.85rem;
}

/* Hover effects for about-v2 feature items */
.about-v2-feature-item:hover .about-v2-feature-icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

.about-v2-feature-item:hover {
    transform: translateX(5px);
    transition: transform 0.3s ease;
}

/* Action Buttons */
.about-v2-action-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.about-v2-btn-primary {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.about-v2-btn-secondary {
    background: transparent;
    color: white;
    padding: 12px 30px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Mission Section */
.about-v2-mission-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
}

.about-v2-mission-content {
    padding: 0 50px;
    color: #ffffff;
    text-align: right;
}

.about-v2-mission-heading {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(90deg, #5b1eb1, #f85858, #ef5ef1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-v2-mission-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
    font-family: 'Lexend', sans-serif;
    color: #e0e0e0;
}

.about-v2-mission-values {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
}

.about-v2-value-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.about-v2-value-text {
    text-align: right;
}

.about-v2-value-text h5 {
    color: #ffffff;
    margin-bottom: 2px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
}

.about-v2-value-text p {
    color: #a0a0a0;
    margin: 0;
    font-size: 0.85rem;
}

.about-v2-value-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #5b1eb1, #f85858);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    margin-right: 0;
}

.about-v2-value-icon i {
    color: white;
    font-size: 18px;
}

.about-v2-mission-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}

/* Vision Section */
.about-v2-vision-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
}

.about-v2-vision-section .row {
    min-height: 70vh;
    align-items: center;
}

.about-v2-vision-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

.about-v2-vision-content {
    padding: 0 50px;
    color: #ffffff;
}

.about-v2-vision-heading {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(90deg, #ef5ef1, #5b1eb1, #f85858);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-v2-vision-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 40px;
    font-family: 'Lexend', sans-serif;
    color: #e0e0e0;
}

.about-v2-vision-pillars {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-v2-pillar-item {
    display: flex;
    align-items: center;
}

.about-v2-pillar-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #ef5ef1, #5b1eb1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.about-v2-pillar-icon i {
    color: white;
    font-size: 18px;
}

.about-v2-pillar-item h5 {
    color: #ffffff;
    margin-bottom: 2px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
}

.about-v2-pillar-item p {
    color: #a0a0a0;
    margin: 0;
    font-size: 0.85rem;
}

/* Hover Effects */
.about-v2-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(248, 88, 88, 0.3);
}

.about-v2-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .about-v2-modern-content,
    .about-v2-mission-content,
    .about-v2-vision-content {
        padding: 0 20px;
    }
    
    .about-v2-modern-heading,
    .about-v2-mission-heading,
    .about-v2-vision-heading {
        font-size: 2rem;
    }
    
    .about-v2-modern-text,
    .about-v2-mission-text,
    .about-v2-vision-text {
        font-size: 1rem;
    }
    
    .about-v2-feature-icons {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .about-v2-action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .about-v2-mission-content {
        text-align: left;
    }
    
    .about-v2-mission-values {
        align-items: flex-start;
    }
    
    .about-v2-value-item {
        justify-content: flex-start;
    }
    
    .about-v2-value-icon {
        margin-left: 0;
        margin-right: 15px;
    }
    
    .about-v2-value-text {
        text-align: left;
    }
}

/* What We Offer Section */
.what-we-offer-section {
    background: #0a0a0a;
    padding: 80px 0 0;
    position: relative;
}
.what-we-offer-section .container-fluid:first-child {
    text-align: center;
    margin-bottom: 50px;
}
.what-we-offer-section h2 {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}
.what-we-offer-section .container-fluid:last-child {
    display: flex;
    width: 100%;
    padding: 0 2% 4% 2%;
    box-sizing: border-box;
    height: calc(100vh - 130px);
    position: relative;
}
.what-we-offer-section .box {
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0;
    box-shadow: 0 20px 30px rgba(0,0,0,.1);
    line-height: 0;
    display: flex;
    flex-direction: column;
}
.what-we-offer-section .box span {
    font-size: 2.5vh;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 1.2;
    color: #ffffff;
    font-family: 'Space Grotesk', sans-serif;
    padding: 1vh 15px;
    box-sizing: border-box;
    order: 1;
}
.what-we-offer-section .box img {
    width: 200%;
    height: calc(100% - 10vh);
    object-fit: cover;
    transition: .5s;
    order: 2;
}
/* What We Offer Hover Effects */
.what-we-offer-section .box:hover { 
    flex: 1 1 100% !important; 
    z-index: 100;
    position: relative;
}
.what-we-offer-section .box:hover img {
    width: 100% !important;
    height: 100% !important;
}
/* All service boxes now use consistent font size from main rule */

/* Service Logo Overlay */
.service-logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
    background: rgba(0, 0, 0, 0.96);
    border-radius: 0px;
}

.service-logo-overlay img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

/* Ensure text stays above overlay */
.what-we-offer-section .box span {
    position: relative;
    z-index: 100;
}

/* Hide logo overlay when hovering over any box */
.what-we-offer-section .box:hover ~ .service-logo-overlay,
.what-we-offer-section .container-fluid:hover .service-logo-overlay {
    opacity: 0;
}

/* Custom CSS for dreampcbuildanditsolutionsinc */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

/* Body and layout adjustments */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000000;
    padding-top: 76px; /* Account for fixed navbar */
}


/* Navigation Styles */
.navbar {
    background-color: #000000 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    width: 100%;
    height: 80px; /* Important: Define navbar height */
}

/* Optional: Remove padding/margin that could cause centering issues */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Flex container for navbar */
.navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    width: 100%;
}

/* Logo + Text wrapper */
.navbar-brand {
    display: flex;
    align-items: center;
    margin-right: auto; /* Pushes everything else away */
    font-weight: 600;
    font-size: 1.2rem;
    color: #fff !important;
    text-decoration: none;
    transition: none;
    transform: none;
}

/* Logo Image */
.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: none;
    display: block;
    transition: none;
    transform: none;
    animation: none;
    margin-right: 8px;
}

.brand-logo:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Brand Text */
.brand-text {
    font-weight: 600;
    letter-spacing: -0.5px;
    transition: none;
    transform: none;
    animation: none;
}

/* Nav links container */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*Mobile Navbar*/
.navbar-toggler {
    background: transparent;
    border: none;
}

/* Services Slider Navigation Buttons */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    font-size: 18px;
}

.slider-nav-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

.slider-nav-btn.prev {
    left: 20px;
}

.slider-nav-btn.next {
    right: 20px;
}

/* Mobile navigation collapse background */
.navbar-collapse {
    background-color: #000000 !important;
    padding-bottom: 1rem; /* Add gap at bottom of mobile navbar dropdown */
}

/* Nav links */
.navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', sans-serif;
}

.navbar-nav .nav-link:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    color: transparent !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
    background-color: transparent !important;
    transform: none !important;
}

.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav .nav-item .nav-link.active:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

.navbar-nav .nav-link[href="index.html"].active {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

/* Remove blue focus outline from navbar links */
.navbar-nav .nav-link:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

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

/* PROJECTS SECTION STYLES */
.projects-section {
    padding: 10px 0;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin-top: -115px;
}

/* Hero to Projects Transition Overlay */
.hero-projects-overlay {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 8%,
        rgba(0, 0, 0, 0.4) 15%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0.75) 35%,
        rgba(0, 0, 0, 0.85) 45%,
        rgba(0, 0, 0, 0.9) 50%,
        rgba(0, 0, 0, 0.85) 55%,
        rgba(0, 0, 0, 0.75) 65%,
        rgba(0, 0, 0, 0.6) 75%,
        rgba(0, 0, 0, 0.4) 85%,
        rgba(0, 0, 0, 0.2) 92%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 2;
    margin-top: -200px;
    margin-bottom: -200px;
    pointer-events: none;
}

    .projects-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        pointer-events: none;
    }

    .projects-section > .container {
        position: relative;
        z-index: 1;
    }


/* Project Cards */
.project-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 250px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-card-small {
    height: 250px;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.project-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.project-card:hover .project-card-bg {
    transform: scale(1.05);
}

.project-card-bg-pc {
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pc::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 150, 136, 0.6) 0%, rgba(0, 188, 212, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-fdas {
    background-image: url('/images/dpc-fdas.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-fdas::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 87, 34, 0.6) 0%, rgba(255, 152, 0, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-cctv {
    background-image: url('/images/dpc-cctv.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-cctv::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

    .project-card-bg-doorlock {
    background-image: url('/images/services/accessControlSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-doorlock::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-pa {
    background-image: url('/images/services/paSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pa::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(156, 39, 176, 0.6) 0%, rgba(186, 104, 200, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-led {
    background-image: url('/images/services/LEDWall.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-led::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(233, 30, 99, 0.6) 0%, rgba(240, 98, 146, 0.4) 100%);
        background-blend-mode: overlay;
    }


.project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    z-index: 2;
}

.project-card-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.project-card-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

.project-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    border-width: 2px;
    background: linear-gradient(90deg, #ff0000, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082, #ee82ee, #ff0000, #ff0000);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

 .project-card-icon :hover{
    /* To make the text itself look like a gradient */
    background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    -webkit-background-clip: text; /* Clip the gradient to the shape of the text */
    background-clip: text; /* Standard property for compatibility */
    -webkit-text-fill-color: transparent; /* Make the text invisible to show the clipped background */
    transform: scale(1.3);
    border-color: rgba(255, 255, 255, 0.2);
 }

.project-card-icon i {
    color: #ffffff !important;
    font-size: 1rem;
}

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

    .projects-description {
        font-size: 1rem;
    }

}

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

    .projects-title,
    .projects-subtitle {
        font-size: 2rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .project-card,
    .project-card-small {
        height: 200px;
    }

    .project-card-title {
        font-size: 1.1rem;
    }

    .project-card-overlay {
        padding: 1.5rem;
    }
    
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .project-card-title {
        font-size: 1rem;
    }

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

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

.projects-header {
    position: relative;
    height: 450px;
    padding: 60px 0;
    margin-bottom: 60px;
    margin-left: -15px;
    margin-right: -15px;
    overflow: visible;
    background-image: url('/images/dpc-project-img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Add gradient fade to projects header top */
.projects-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.1) 85%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.projects-header::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 300px;
    background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
    filter: blur(70px) brightness(1.5);
    z-index: 1;
    opacity: 1.2;
}
.projects-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .projects-header-content {
        padding: 0px 20px;
        position: relative;
        z-index: 2;
        text-align: center;
        margin-top: -200px;
    }
    .projects-header {
        height: 250px;
        margin-top: 9px;
        background-attachment: scroll;
    }
    .projects-header::after {
        content: "";
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
        filter: blur(70px);
        z-index: 1;
    }
}
.projects-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 300;
}

.projects-section-title {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Responsive Design for Header */
@media (max-width: 992px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.8rem;
    }

    .projects-description {
        font-size: 1.1rem;
        padding: 0 2rem;
    }
}

@media (max-width: 768px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.2rem;
    }

    .projects-description {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .projects-section-title {
        font-size: 1.3rem;
    }
}

/* Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

.projects-subtitle {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}





/* === FINAL OVERRIDE for .projects-section-title === */
.projects-section-title {
    margin-top: 50px;
    padding-top: 180px;
    padding-bottom: 50px;
    font-size: 10rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
    opacity: 1; 
}

.projects-section-title:hover{
    transform: translateY(-8px) scale(1.1);
}

@media (max-width: 992px) {
    .projects-section-title {
        font-size: 6rem;
    }
}

@media (max-width: 768px) {
    .projects-section-title {
        font-size: 4rem;
    }
}

@media (max-width: 576px) {
    .projects-section-title {
        font-size: 2.8rem;
    }
}

/* Logo Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

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

/* Responsive Design for Hero Section */
@media (max-width: 992px) {
    .hero-title,
    .hero-subtitle {
        font-size: 3.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 60px 0;
        text-align: center;
        background-color: #000000;
        margin-top: 5rem;
    }

    .hero-title,
    .hero-subtitle {
        font-size: 2.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-title,
    .hero-subtitle {
        font-size: 2rem;
        
    }

    .hero-logo {
        width: 150px;
        height: 150px;
    }

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

/* Main content area */
.main-content {
    min-height: calc(100vh - 140px);
    padding: 2rem 0;
    margin-top: 90px; /* Same as navbar height */
}

/* Container adjustments */
.container {
    max-width: 1200px;
}

/* Remove default margins from headings */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}

/* Button styles */
.btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0a58ca;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
    }

/* Card styles */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }

/* Footer styles */
footer {
    background-color: #000000 !important;
    margin-top: auto;
}
footer a {
    transition: color 0.3s ease;
}
footer a:hover {
    color: #0d6efd !important;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .CompanyInfo-footer, .CompanyServices-footer {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        padding-bottom: 15px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .brand-text {
        display: none;
    }

    .brand-logo {
        width: 32px;
        height: 32px;
        
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0;
    }

    body {
        padding-top: 70px;
    }
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Utility classes */
.text-gradient {
    background: linear-gradient(45deg, #0d6efd, #6610f2);
    -webkit-text-fill-color: transparent;
}

.shadow-custom {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Focus states for accessibility */
.nav-link:focus,
.btn:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Contact Hero Section */
.contact-hero {
    min-height: 100vh;
    background: #000000;
    display: flex;
    align-items: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

    .contact-hero .container {
        position: relative;
        z-index: 2;
    }

/* Hero Title */
.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-align: center;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
 }


.sync-text {
    background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Hero Subtitle */
.hero-subtitle {
    font-family: 'Lexend', sans-serif;
    font-size: 1.2rem;
    color: white;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* Contact Form Container */
.contact-form-container {
    background: #000000;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #FDFDFD;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 20px rgba(255, 102, 102, 0.3), 0 0 40px rgba(255, 137, 76, 0.2), 0 0 60px rgba(144, 255, 85, 0.2), 0 0 80px rgba(123, 148, 246, 0.2), 0 0 100px rgba(255, 119, 241, 0.2);
}

    .contact-form-container::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
        background-size: 300% 300%;
        border-radius: 20px;
        z-index: -1;
        animation: gradientShift 3s ease-in-out infinite;
    }

    .contact-form-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000000;
        border-radius: 18px;
        z-index: -1;
    }

/* Form Inputs */
.contact-input,
.contact-textarea {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #ffffff;
    padding: 15px 20px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .contact-input:focus,
    .contact-textarea:focus {
        background: rgba(255, 255, 255, 0.05);
        border-color: #4ecdc4;
        box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
        color: #ffffff;
    }

    .contact-input::placeholder,
    .contact-textarea::placeholder {
        color: rgba(255, 255, 255, 0.6);
        font-family: 'Lexend', sans-serif;
    }

.contact-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Submit Button */
.contact-submit-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #ffffff;
    padding: 15px 40px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
}

    .contact-submit-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #4ecdc4;
        color: #4ecdc4;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
    }

    .contact-submit-btn:active {
        transform: translateY(0);
    }

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

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .contact-form-container {
        padding: 30px 20px;
        margin: 0 15px;
    }

    .contact-input,
    .contact-textarea {
        padding: 12px 15px;
    }

    .contact-submit-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
        
    }

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

    .contact-form-container {
        padding: 25px 15px;
    }
}


/* Social Icons Container */
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: nowrap;
}

/* Individual Social Icon Styling */
.social-icon {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
    transform: translateY(0);
}

    /* Hover state for the container */
    .social-icon:hover {
        transform: translateY(-8px) scale(1.1);
    }

    /* Icon image styling */
    .social-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: all 0.3s ease;
        filter: brightness(0.9);
    }

    /* Image hover effect - Glowing lines/outlines */
    .social-icon:hover img {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
        animation: glowPulse 2s ease-in-out infinite;
    }

/* Pulsing glow animation */
@keyframes glowPulse {
    0%, 100% {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
    }

    50% {
        filter: brightness(1.4) contrast(1.2) drop-shadow(0 0 12px #FF6666) drop-shadow(0 0 16px #FF894C) drop-shadow(0 0 20px #90FF55) drop-shadow(0 0 24px #7B94F6) drop-shadow(0 0 28px #FF77F1);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .social-icons {
        gap: 15px;
        padding: 15px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .social-icons {
        gap: 10px;
        padding: 10px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 45px;
        height: 45px;
    }
}

/* Address styling with Lexend font */
address {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem; /* small font size */
    margin-bottom: 1rem; /* mb-3 equivalent */
    font-style: normal; /* Remove default italic styling from address element */
    line-height: 1.5;
}

/* Gradient hover for address */
address.text-white:hover {
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}

/* Alternative class-based approach if you prefer */
.address-lexend {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    font-style: normal;
    line-height: 1.5;
}

/* Menu and Help Center Section Headers */
.col-md-2 h6 {
    font-family: 'Lexend', sans-serif;
    color: #000000;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Menu and Help Center Lists */
.col-md-2 ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Menu and Help Center List Items */
.col-md-2 ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

/* Menu and Help Center Links */
.col-md-2 ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Hover effects for links */
.col-md-2 ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* Gradient hover for CompanyServices-footer links */
.CompanyServices-footer a:hover {
    color: transparent !important;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
}

/* Alternative more specific selectors if needed */
.menu-section h6,
.help-center-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #555555;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.menu-section ul,
.help-center-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-section ul li,
.help-center-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.menu-section ul li a,
.help-center-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.menu-section ul li a:hover,
.help-center-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* General footer section styling with Lexend */
.footer-section {
    font-family: 'Lexend', sans-serif;
}

.footer-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #ffffff;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.footer-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.footer-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.footer-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/*============= SERVICES =============*/

.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.offers-firsttitle {
    font-family: 'Lexend', sans-serif;
    font-size: 3rem;
    font-weight: 200;
    color: #ffffff;
    margin-bottom: 0;
    animation: fadeInDown 0.8s ease-out;
}

.offers-secondpctitle {
    background: linear-gradient(to right, #a7363c, #671C68, #7B54B1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondcctvtitle {
    background: linear-gradient(to right, #5CE1FF, #5CFFB8, #56D86A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondfdastitle {
    background: linear-gradient(to right, #FF6666, #C34814, #F3A335);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-seconddoorlocktitle {
    background: linear-gradient(to right, #BA1022, #EC0120, #FD6A59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.video-overlay-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.video-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: white;
    
}

/* RESPONSIVE - Video Overlay */

/* Ultra-wide screens (1440px+) */
@media (min-width: 1440px) {
    .video-overlay-title {
        font-size: 5rem;
        margin-bottom: 1.5rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 18px 48px;
        font-size: 1.1rem;
    }
}

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .video-overlay-title {
        font-size: 4.5rem;
        margin-bottom: 1.3rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.3rem;
        margin-bottom: 1.8rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 16px 44px;
        font-size: 1rem;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .video-overlay-title {
        font-size: 4rem;
        margin-bottom: 1.2rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.6rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 15px 40px;
        font-size: 0.95rem;
    }
}

/* Tablet landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .video-overlay-title {
        font-size: 3rem;
        margin-bottom: 1rem;
        text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 1rem;
        margin-bottom: 1.4rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 36px;
        font-size: 0.9rem;
    }
}

/* Tablet portrait (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 12px 32px;
        font-size: 0.85rem;
    }
}

/* Mobile large (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2rem;
        margin-bottom: 0.7rem;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 11px 28px;
        font-size: 0.8rem;
    }
}

/* Mobile small (320px - 479px) */
@media (max-width: 479px) {
    .video-overlay-container {
        height: 100vh; /* Increased from 60vh to 80vh for taller mobile video section */
    }
    
    .video-overlay-content {
        padding: 0 2rem; /* Increased padding for mobile */
        text-align: center; /* Center align content on mobile */
        width: 90%; /* Ensure content doesn't reach edges */
    }
    
    /* Fix about video for mobile */
    .about-video {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 250px !important;
        object-fit: cover;
        margin-top: 0 !important;
    }
    
    .col-lg-5.col-md-12.d-flex.justify-content-center.align-items-start.position-relative {
        width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Stack mission and vision cards vertically on mobile */
    .mission-vision-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Center projects header text on mobile */
    .projects-header {
        height: auto !important;
        min-height: 100vh;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-attachment: scroll !important;
    }
    
    .projects-header-content {
        margin-top: 0 !important;
        padding: 2rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: auto !important;
    }
    
    .video-overlay-title {
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.75rem;
        margin-bottom: 0.9rem;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 10px 24px;
        font-size: 0.75rem;
    }
}

/* ENHANCED TITLE ANIMATION */
.video-overlay-title {
    font-family: "Space Grotesk";
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    animation: titleEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               titleGlow 3s ease-in-out 1.2s infinite;
    opacity: 0;
}

/* Title entrance animation with bounce effect */
@keyframes titleEntrance {
    0% {
        opacity: 0;
        transform: translateY(-80px) scale(0.5) rotateX(90deg);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: translateY(10px) scale(1.05) rotateX(-5deg);
        filter: blur(0px);
    }
    80% {
        transform: translateY(-5px) scale(0.98) rotateX(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0px);
    }
}


@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 30px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 50px rgba(255, 255, 255, 0.6),
                     0 0 70px rgba(172, 56, 56, 0.4);
    }
}

.video-overlay-subtitle {
    font-family: "Lexend";
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    animation: subtitleFade 1s ease-out 0.3s backwards;
}

@keyframes subtitleFade {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


.video-overlay-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 50px;
    font-family: "Lexend";
    font-weight: 400;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    position: relative;
    overflow: hidden;
    animation: buttonEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulse 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


@keyframes buttonEntrance {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}


.video-overlay-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}


.video-overlay-button:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.7),
                0 0 50px rgba(172, 56, 56, 0.4);
    
}

.video-overlay-button:hover::before {
    animation: shimmer 1s infinite;
}

.video-overlay-button:active {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.6);
}

/* Ripple effect on click */
.video-overlay-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s, opacity 0.6s;
    opacity: 0;
}

.video-overlay-button:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}
/* ANIMATIONS */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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


@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* SLIDER CONTAINER STYLES */
.services-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000000;
    margin-top: 0;
    padding-top: 5px;
}

.services-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 400%;
}

/* 2. The Wrapper (The Sliding Track) */
#sliderWrapper {
    display: flex;          /* CRITICAL: Lines the slides (sections) up horizontally */
    width: 400%;            /* Total width: 4 slides * 100% = 400% */
    height: 100%;
    /* CRITICAL: This property makes the transition smooth */
    transition: transform 0.6s ease-in-out; 
}

/* 3. The Individual Slides (The content sections) */
#sliderWrapper > .offers-section {
    width: 25%;             /* Each slide takes up 1/4 of the 400% width */
    flex-shrink: 0;         /* CRITICAL: Prevents the slides from shrinking */
    height: 100%;
    box-sizing: border-box; 
    /* You may want to add overflow-y: auto; here if content might exceed the height */
}

/* SLIDER INDICATORS */
.slider-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 100;
}

.indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    animation: indicatorPulse 2s ease-in-out infinite;
}

.indicator.active {
    background: white;
    transform: scale(1.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: none;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

@keyframes indicatorPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* COMPANY OFFER SECTION STYLES */
.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
    flex: 0 0 25%;
    width: 25%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    margin-top: -70px;
    transform: translateY(0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    position: relative;
}

.offers-section.active {
    opacity: 1;
    transform: translateY(0);
}

.offers-section.d-none {
    display: none !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.offers-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* MAP STYLES WITH ANIMATIONS */
.map-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem 0;
    width: 100%;
    overflow-x: hidden;
}

.map-scaler {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.map-scaler-inner {
    position: relative;
    width: 300px;
    height: 523px;
    transform: scale(calc(min(100vw, 1400px) / 1400));
    transform-origin: top center;
}

.map-container {
    position: absolute;
    width: 300px;
    height: 523px;
    top: 0;
    left: 0;
    animation: mapAppear 1.2s ease-out;
}

@keyframes mapAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

.label {
    position: absolute;
    color: white;
    text-align: center;
    animation: labelSlideIn 0.8s ease-out backwards;
}

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

.label-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.label-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.count-count {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    animation: countUp 1.5s ease-out;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.count-text {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 1;
}

.pc-icon {
    width: 94px;
    height: auto;
    animation: floatAnimation 3s ease-in-out infinite;
}

.left-label {
    top: 50%;
    left: -250px;
    transform: translateY(-50%);
    animation-delay: 0.2s;
}

.right-label.top {
    top: 60px;
    right: -250px;
    animation-delay: 0.4s;
}

.right-label.bottom {
    bottom: 100px;
    right: -350px;
    animation-delay: 0.6s;
}

.line-image {
    position: absolute;
    width: 160px;
    height: auto;
    transform: translateY(-100%);
    transform-origin: bottom left;
    animation: drawLine 1s ease-out backwards;
}

@keyframes drawLine {
    from {
        opacity: 0;
        transform: translateY(-100%) scaleY(0);
    }
    to {
        opacity: 1;
        transform: translateY(-100%) scaleY(1);
    }
}

/* GRADIENT BUTTONS */
.gradientpccolor-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 25%, #7B54B1 75%, #000000 100%);
}

.gradientcctvcolor-button {
    background: linear-gradient(135deg, #5CE1FF 0%, #5CFFB8 25%, #56D86A 75%, #000000 100%);
}

.gradientfdascolor-button {
    background: linear-gradient(135deg, #FF6666 0%, #C34814 25%, #F3A335 75%, #000000 100%);
}

.gradientdoorlockcolor-button {
    background: linear-gradient(135deg, #BA1022 0%, #EC0120 25%, #FD6A59 75%, #000000 100%);
}

.gradient-button {
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(172, 56, 56, 0.3);
    outline: none;
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    animation: buttonAppear 0.8s ease-out 0.8s backwards;
}

@keyframes buttonAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gradient-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(172, 56, 56, 0.4);
}

.gradient-button:active {
    transform: translateY(0);
}

/* GRADIENT LOOP WITH SHADOW */
@keyframes gradientCycle {
    0% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(0deg);
    }
    50% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(180deg);
    }
    100% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(360deg);
    }
}

.glow-gradient {
    border: none;
    border-radius: 0;
    animation: gradientCycle 6s linear infinite;
    transition: all 0.3s ease-in-out;
}

/* Responsive fallback */
@media (max-width: 600px) {
    .left-label,
    .right-label.top,
    .right-label.bottom {
        position: static;
        text-align: center;
        margin-top: 1rem;
        transform: none;
    }

    .label-content {
        justify-content: center;
    }

    .line-image {
        display: none;
    }

    .offers-firsttitle {
        font-size: 2.5rem;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }

    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}

/* RESPONSIVE - Keep PC design at any screen size */

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .map-scaler-inner {
        transform: scale(0.85);}
    .offers-firsttitle {
        font-size: 2.5rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }
    .left-label,
    .right-label.top,
    .right-label.bottom {
        font-size: 1rem;
    }
    .gradient-button{
        margin-top: -70px !important;
        padding: 15px 25px !important;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .offers-section {
        margin-top: -20px;
    }
    .map-scaler-inner {
        transform: scale(0.68);
        margin-top: -50px;
    }
    .offers-firsttitle {
        font-size: 2rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2.5rem;
    }
    .gradient-button{
        margin-top: -170px;
        padding: 11px 25px;
        font-size: 1rem;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.95rem;
    }

            .fp-wrapper {
                padding: 0 1rem;
            }

            .fp-main-section {
                padding: 60px 0;
            }

            .fp-header-title {
                font-size: clamp(24px, 4vw, 32px);
                margin-bottom: 25px;
            }

            .fp-card {
                height: 450px !important;
            }

            .fp-card-category {
                font-size: 12px !important;
            }

            .fp-card-content {
                padding: 20px !important;
            }

            .fp-card-title {
                font-size: 1.4rem !important;
                margin-bottom: 10px !important;
            }

            .fp-card-description {
                font-size: 0.80rem !important;
                margin-bottom: 18px;
            }

            .fp-card-tag {
                font-size: 12px !important;
                margin: auto;
                margin-top: -10px;
            }
            }

            .fp-image-wrapper {
                height: 170px !important;
            }

            .fp-all-button {
                margin-top: -20px;
                padding: 12px 30px !important;
                font-size: 15px !important;
            }


@media (max-width: 540px) {
    .offers-section {
        padding: 30px 15px;
        margin-top: -60px !important;
    }

    .offers-header {
        margin-bottom: 30px;
    }

    .offers-firsttitle {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    /* ===== MAP CONTAINER ===== */
    .map-wrapper {
        margin-bottom: 40px;
        position: relative;
        overflow: visible !important;
        padding: 0 100px;
        margin-left: 50px;
    }

    .map-scaler {
        padding: 0;
        position: relative;
        width: 100%;
        overflow: visible !important;
        margin: auto;
    }

    .map-scaler-inner {
        transform: scale(0.85) !important;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        width: 100%;
        height: auto;
        overflow: visible !important;
        margin: auto;
    }

    .map-container {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible !important;
    }

    .map-image {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* ===== DOTTED LINES ===== */
    .line-image {
        position: absolute !important;
        max-width: 60px;
        height: auto;
    }

    /* ===== LABELS/METRICS ===== */
    .label {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .label-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .label-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .count-count {
        font-size: 1.8rem;
        font-weight: bold;
        white-space: nowrap;
    }

    .count-text {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .pc-icon {
        width: 50px;
        height: 50px;
    }

    /* Position labels specifically for mobile */
    .left-label {
        left: 10px;
        top: 55%;
        transform: translateY(-50%);
    }

    .right-label.top {
        right: 10px;
        top: 30%;
        transform: translateY(-50%);
    }

    .right-label.bottom {
        right: 10px;
        bottom: 28%;
        transform: translateY(50%);
    }

    /* ===== BUTTON ===== */
    .gradient-button {
        padding: 12px 32px;
        font-size: 0.9rem;
        margin-top: -100px !important;
        width: auto;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 2.3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.85rem;
    }
}

/* Tablets landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .offers-section{
        margin-top: -80px !important;
    }
    .map-scaler-inner {
        transform: scale(0.90);
    }
    
    .left-label {
        left: -150px;
    }
    
    .right-label.top {
        right: -100px;
        top: -30px;
    }
    
    .right-label.bottom {
        right: -190px;
        top: 220px;
    }
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
        margin-left: -100px !important;
        margin-top: 150px !important;
    }
     .gradient-button {
        padding: 14px 28px;
        font-size: 20px;
        margin-top: 40px !important;
    }

}

/* Tablets portrait (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .map-scaler-inner {
        transform: scale(0.65);
    }
    
    .left-label {
        left: -180px;
    }
    
    .right-label.top {
        right: -180px;
    }
    
    .right-label.bottom {
        right: -220px;
    }
    
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
    }
}

/* Mobile large (361px - 480px) */
@media (max-width: 480px) {
    .offers-section {
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.70) !important;
        margin-left: -60px;
    }
    
    .map-wrapper {
        padding: 2rem 0;
    }
    
    .left-label {
        left: -50px;
    }
    
    .right-label.top {
        right: -30px;
        margin-top: -20px;
        position: absolute;
    }
    
    .right-label.bottom {
        margin-right: -100px !important;
        bottom: 150px;
        position: absolute;
    }
    
    .count-count {
        font-size: 40px;
    }
    
    .count-text {
        font-size: 18px;
    }
    
    .pc-icon {
        width: 60px;
    }
    
    .line-image {
        width: 120px;
    }
    
    .offers-firsttitle {
        font-size: 2rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2.5rem;
    }
    
    .gradient-button {
        padding: 14px 28px;
        font-size: 16px;
    }
}

/* Mobile small (320px - 360px) */
@media (max-width: 360px) {
    .offers-section {
        padding: 40px 0;
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.65) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    
    .left-label {
        left: -70px;
    }
    
    .right-label.top {
        margin-right: 30px;
        margin-top: 20px !important;
    }
    
    .right-label.bottom {
        margin-right: -90px !important;
        bottom: 120px;
        position: absolute;
    }
    
    .count-count {
        font-size: 32px;
    }
    
    .count-text {
        font-size: 16px;
    }
    
    .pc-icon {
        width: 50px;
    }
    
    .line-image {
        width: 100px;
    }
    
    .offers-firsttitle {
        font-size: 1.5rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2rem;
    }
    
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -210px !important;
    }
}

@media (max-width: 375px) {
    .offers-section {
        padding: 40px 0;
    }
    
    .map-scaler-inner {
        transform: scale(0.60) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -260px !important;
    }
}

@media (min-width: 912px) {
            .fp-wrapper {
                padding: 0 2rem;
                max-width: 600px;
            }

            .fp-main-section {
                padding: 80px 0;
            }

            .fp-header-title {
                font-size: clamp(28px, 5vw, 40px);
                margin-bottom: 30px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                margin-bottom: 40px;
            }

            .fp-card-content {
                padding: 30px;
            }

            .fp-card-title {
                font-size: 1.8rem;
                margin-bottom: 15px;
            }

            .fp-card-description {
                font-size: 1rem;
                line-height: 1.6;
                margin-bottom: 20px;
            }

            .fp-image-wrapper {
                height: 280px;
            }

            .fp-all-button {
                padding: 16px 50px;
                font-size: 18px;
            }
        }

        /* Tablet Medium (853px to 911px) */
        @media (min-width: 853px) and (max-width: 911px) {
            .fp-wrapper {
                padding: 0 1.5rem;
                max-width: 90px;
            }

            .fp-main-section {
                padding: 70px 0;
            }

            .fp-header-title {
                font-size: clamp(26px, 4.5vw, 36px);
                margin-bottom: 28px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 16px;
                margin-bottom: 35px;
            }

            .fp-card-content {
                padding: 26px;
            }

            .fp-card-title {
                font-size: 1.6rem;
                margin-bottom: 13px;
            }

            .fp-card-description {
                font-size: 0.95rem;
                line-height: 1.6;
                margin-bottom: 18px;
            }

            .fp-image-wrapper {
                height: 260px;
            }

            .fp-all-button {
                padding: 15px 48px;
                font-size: 17px;
            }
        }


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

/* GLOBAL RESET/BEST PRACTICE for Responsiveness */
* {
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* ========================================================================= */
/* CORE SHOWCASE BLOCK & FONT SCALING */
/* ========================================================================= */

.core-showcase-block {
    background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
    /* Use relative padding unit for vertical spacing, scales better than a fixed 120px */
    padding: 10vh 0; 
    position: relative;
    overflow: hidden;
}

.core-showcase-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.core-showcase-block::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    animation: core-pulse-bg 8s ease-in-out infinite;
}

@keyframes core-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

.showcase-header {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.showcase-subtext {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 3rem; /* Reduced from 4rem */
    font-weight: 300;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
}

.concept-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease-out, transform 0.8s ease-out;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none; 
}

.concept-tile:nth-child(1) { transition-delay: 0.1s; }
.concept-tile:nth-child(2) { transition-delay: 0.2s; }
.concept-tile:nth-child(3) { transition-delay: 0.3s; }
.concept-tile:nth-child(4) { transition-delay: 0.4s; }
.concept-tile:nth-child(5) { transition-delay: 0.5s; }
.concept-tile:nth-child(6) { transition-delay: 0.6s; }

.showcase-tile-container {
    /* Auto-fit is the key for responsiveness here */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.concept-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.concept-tile::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(172, 56, 56, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.concept-tile:hover {
    transform: translateY(-15px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
}

.concept-tile:hover::before {
    transform: scaleX(1);
}

.concept-tile:hover::after {
    width: 400px;
    height: 400px;
}

.concept-tile:hover .concept-icon-wrap {
    transform: scale(1.1) rotateY(360deg);
}

.concept-tile:hover .concept-icon-wrap svg {
    animation: icon-bounce 0.6s ease;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.concept-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.concept-icon-wrap svg {
    width: 40px;
    height: 40px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.concept-title-text {
    font-family: "Space Grotesk";
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-title-text {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.concept-detail-text {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-detail-text {
    color: #ccc;
}

/* ========================================================================= */
/* METRIC SHOWCASE ZONE */
/* ========================================================================= */

.metric-showcase-zone {
    font-family: "Space Grotesk";
    background: #000000;
    padding: 100px 0;
    position: relative;
}

.data-figure-layout {
    /* Auto-fit is great here, scales well */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.figure-unit-card {
    text-align: center;
    animation: slightFloat 3s ease-in-out infinite alternate; 
}

.figure-unit-card:nth-child(even) {
    animation-delay: 0.3s;
}

.figure-unit-card:nth-child(3n) {
    animation-delay: 0.9s;
}

.figure-count-value {
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.figure-description-text {
    font-size: 1.2rem;
    color: white;
    font-weight: 300;
}

@keyframes slightFloat {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

/* ========================================================================= */
/* PROCESS SECTION */
/* ========================================================================= */

.process-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.container-our {
    text-align: center;
}

.section-title-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    
}

.section-subtitle-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 50px; /* Reduced from 100px */
    font-weight: 300;
    position: relative;
    z-index: 2;
    animation: subtext-slide-in 1s ease-out 0.2s backwards; 
}

.process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(103, 28, 104, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 60% 70%, rgba(123, 84, 177, 0.1) 0%, transparent 40%);
    animation: gradientShift 10s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.process-timeline {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.process-step {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
    position: relative;
    opacity: 0; 
    transform: translateX(0); 
    transition: none; 
}

.process-step.animate-left {
    animation: stepSlideIn 0.8s ease-out forwards; 
}

.process-step:nth-child(even).animate-right {
    animation: stepSlideInRight 0.8s ease-out forwards;
}


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

.process-step:nth-child(even) {
    flex-direction: row-reverse;
}

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

.step-number {
    font-family: "Space Grotesk";
    width: 60px;
    height: 60px;
    color: white;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
    transition: all 0.4s ease;
}

.process-step:hover .step-number {
    transform: scale(1.15) rotateZ(360deg);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.step-content {
    color: white;
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.step-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.process-step:hover .step-content {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(172, 56, 56, 0.3);
    transform: translateX(10px);
}

.process-step:nth-child(even):hover .step-content {
    transform: translateX(-10px);
}

.process-step:hover .step-content::before {
    opacity: 1;
}

.step-title {
    font-family: "Space Grotesk";
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.process-step:hover .step-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step-description {
    font-family: "Lexend";
    color:white;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.process-step:hover .step-description {
    color: #ccc;
}

/* ========================================================================= */
/* FUTURE PROJECTS (FP) SECTION */
/* ========================================================================= */

.fp-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.fp-main-section {
    padding: 80px 0; /* Reduced from 120px 0 */
    position: relative;
    overflow: hidden;
}

.fp-main-section::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(123, 84, 177, 0.05) 0%, transparent 50%);
    animation: fp-pulse-bg 12s ease-in-out infinite;
}

@keyframes fp-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

/* ------------------------------------------------ */
/* SCROLL ANIMATION STARTING STATES (HIDDEN) */
/* ------------------------------------------------ */

/* The hidden class sets the initial position and opacity, which is then animated away */
.hidden-scroll {
    opacity: 0;
    /* Use 'will-change' for performance hint */
    will-change: transform, opacity; 
}

/* Header Hidden State */
.fp-header-title.hidden-scroll {
    transform: translateY(-30px);
}

/* Card Hidden State */
.fp-card.hidden-scroll {
    transform: translateY(50px) scale(0.9);
}

/* Button Link Hidden State */
.fp-all-projects-link.hidden-scroll {
    transform: translateY(30px);
}


/* ------------------------------------------------ */
/* SCROLL ANIMATION TRIGGERED STATES (VISIBLE) */
/* ------------------------------------------------ */

/* The animated class applies the animation keyframe */

/* Header Animation Trigger */
.fp-header-title.animated {
    animation: fp-header-slide-in 1s ease-out forwards;
}

/* Card Animation Trigger */
.fp-card.animated {
    /* The animation-delay is set dynamically by JavaScript based on data-delay */
    animation: fp-card-fade-in 0.9s ease-out forwards;
}

/* Button Link Animation Trigger */
.fp-all-projects-link.animated {
    animation: fp-btn-fade-in 1s ease-out forwards;
}


/* ------------------------------------------------ */
/* ORIGINAL KEYFRAMES (Keep these as they are) */
/* ------------------------------------------------ */

@keyframes fp-header-slide-in {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fp-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fp-btn-fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------------ */
/* REST OF ORIGINAL STYLES (Keep as they are) */
/* ------------------------------------------------ */

.fp-header-title {
    font-family: "Space Grotesk";
    color: white;
    text-align: left;
    /* Fluid font size: min 28px, preferred 5vw, max 40px */
    font-size: clamp(28px, 5vw, 40px); 
    font-weight: 500;
    margin-bottom: 30px; /* Reduced from 50px */
    position: relative;
    z-index: 2;
}

.fp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px; /* Reduced from 40px */
    position: relative;
    z-index: 2;
    margin-bottom: 40px; /* Reduced from 60px */
}

.fp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.fp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
    z-index: 2;
}

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

.fp-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.fp-image-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.fp-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.fp-card:hover .fp-card-image {
    transform: scale(1.1) rotate(2deg);
}

.fp-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-card:hover .fp-image-overlay {
    opacity: 1;
}

.fp-view-button {
    padding: 9px 28px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.fp-card:hover .fp-view-button {
    transform: translateY(0);
    opacity: 1;
}

.fp-view-button:hover {
    transform: translateY(0) scale(1.05);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.5);
}

.fp-card-content {
    padding: 30px;
}

.fp-card-category {
    font-family: "Lexend";
    display: inline-block;
    padding: 6px 16px;
    background: rgba(172, 56, 56, 0.2);
    border: 1px solid rgba(172, 56, 56, 0.4);
    border-radius: 20px;
    font-size: 14px;
    color: #AC3838;
    margin-bottom: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-category {
    background: rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.6);
}

.fp-card-title {
    font-family: "Space Grotesk";
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fp-card-description {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.fp-card:hover .fp-card-description {
    color: #ccc;
}

.fp-card-tags {
    font-family: "Lexend";
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fp-card-tag {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    font-size: 13px;
    color: #999;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-tag {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(172, 56, 56, 0.3);
    color: #bbb;
}

.fp-all-projects-link {
    text-align: center;
    position: relative;
    z-index: 2;
}

.fp-all-button {
    font-family: "Lexend";
    padding: 16px 50px;
    background: transparent;
    border: 2px solid rgba(172, 56, 56, 0.5);
    border-radius: 30px;
    color: white;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.fp-all-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    z-index: -1;
}

.fp-all-button:hover {
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.fp-all-button:hover::before {
    width: 300px;
    height: 300px;
}


    

/* ========================================================================= */
/* FAQ SECTION */
/* ========================================================================= */

.faq-section {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.container-faq {
    text-align: center;
}

.section-title-faq {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-subtitle-faq {
    font-family: "Lexend";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 4rem;
    font-weight: 300;
    position: relative;
    z-index: 2;
}

.faq-container {
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.faq-item {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    margin-bottom: 30px;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* --- NEW SCROLL ANIMATION CSS --- */

/* 1. Initial State (Hidden and slightly offset) */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}

/* 2. Target State (Visible and in final position) - added by JavaScript */
.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Staggered Delay for FAQ items */
.faq-item.scroll-animate:nth-child(1) { transition-delay: 0.1s; }
.faq-item.scroll-animate:nth-child(2) { transition-delay: 0.2s; }
.faq-item.scroll-animate:nth-child(3) { transition-delay: 0.3s; }
.faq-item.scroll-animate:nth-child(4) { transition-delay: 0.4s; }
.faq-item.scroll-animate:nth-child(5) { transition-delay: 0.5s; }

.section-title-faq.scroll-animate { transition-delay: 0s; }
.section-subtitle-faq.scroll-animate { transition-delay: 0.1s; }

/* Existing FAQ styles */

.faq-item:hover {
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.15);
}

.faq-item.active {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(172, 56, 56, 0.4);
}

.faq-question {
    font-family: "Space Grotesk";
    padding: 25px 30px;
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

.faq-question::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #AC3838, #671C68, #7B54B1);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::before {
    transform: scaleY(1);
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 35px;
}

.faq-answer {
    font-family: "Lexend";
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    color: white;
}

.faq-item.active .faq-answer {
    padding: 0 30px 25px;
    max-height: 500px;
}

.faq-toggle {
    font-size: 1.5rem;
    transition: all 0.4s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(172, 56, 56, 0.2);
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #AC3838, #7B54B1);
}

.faq-section {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.faq-section::after {
    content: "";
    position: absolute;
    bottom: 310px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}

/* ========================================================================= */
/* MEDIA QUERIES FOR RESPONSIVENESS */
/* ========================================================================= */

@media (max-width: 1024px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 150px !important; /* Slight reduction for tablets */
    }
}




/* Tablet and Smaller Devices (Max Width 992px) */
@media (max-width: 992px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 350px !important; /* Slight reduction for tablets */
    }
}

@media (min-width: 853px) and (max-width: 991px) {
    .data-figure-layout {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        padding: 0 1rem;
    }
    
    .figure-count-value {
        font-size: 3rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
}

@media (max-width: 550px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 200px !important; /* Slight reduction for tablets */
    }
}

/* Mobile Devices (Max Width 768px) */
@media (max-width: 768px) {
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 60px 0; /* Consistent vertical padding for mobile */
    }
    
    .showcase-tile-container {
        /* Force single column for a better mobile experience */
        grid-template-columns: 1fr; 
        gap: 15px;
    }
    
    .concept-tile {
        padding: 25px 20px; /* Reduced tile padding */
    }

    .showcase-subtext, 
    .section-subtitle-faq {
        margin-bottom: 2rem;
    }

    /* Metrics Section - Smaller font and less float */
    .figure-count-value {
        font-size: 2rem; 
    }
    
    .data-figure-layout {
        gap: -50px;
    }

    /* Process Timeline - Vertical stacking for mobile */
    .process-step {
        flex-direction: column; /* Stacks number and content vertically */
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }

    .process-step:nth-child(even) {
        flex-direction: column; /* Removes the row-reverse from even items */
    }
    
    /* Remove horizontal translations on hover for stacked layout */
    .process-step:hover .step-content,
    .process-step:nth-child(even):hover .step-content {
        transform: none; 
    }
    
    .step-number {
        margin: 0 auto 15px; /* Center the number circle and add space below */
    }
    
    .step-content {
        padding: 20px;
    }

    /* FAQ Section */
    .faq-question {
        font-size: 1rem;
        padding: 20px 25px;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 25px 20px;
    }

    /* Future Projects Card Grid - Single column on mobile */
    .fp-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .fp-card-content {
        padding: 20px;
    }
    
    .fp-image-wrapper {
        height: 220px;
    }

    .fp-all-button {
        padding: 12px 30px; 
        font-size: 16px;
    }
}

/* Small Mobile Devices (Max Width 480px) */
@media (max-width: 480px) {
    /* Reduce all main section padding further */
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 40px 0;
    }

    /* Adjust main wrapper padding for very small screens */
    .showcase-tile-container, 
    .data-figure-layout, 
    .process-timeline, 
    .faq-container, 
    .fp-wrapper {
        padding: 0 1rem; /* Minimum horizontal padding */
    }

    /* Further compress header elements */
    .showcase-subtext,
    .section-subtitle-our,
    .section-subtitle-faq {
        margin-bottom: 25px;
    }
    
    /* Metric Values */
    .figure-count-value {
        font-size: 2.2rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
    
    .concept-title-text {
        font-size: 1.3rem;
    }
    
    .fp-card-title {
        font-size: 1.5rem;
    }
}

/*============= END ==================*/
    
/* And MANY MORE SECTION STYLES */
.andmanymore-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.andmanymore-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 5rem;
    font-weight: 500;
    margin-top: -0.8rem;
    color: #ffffff;
}

.andmanymore-paragraph p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.9rem;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 2rem;
    color: #cccccc;
    line-height: 1.6;
    font-weight: 300;
}
/* Responsive tweak */
@media (max-width: 768px) {
    .andmanymore-paragraph p {
        font-size: 0.95rem;
        padding: 0 1rem;
    }
}

/* Stats container styling */
.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
    margin-top: 3rem;
    text-align: center;
}

/* Each stat item */
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 150px;
}

/* Gradient icon replacing image */
.icon-gradient {
    width: 107px;
    height: 107px;
    background: linear-gradient(90deg, #FF6666, #66BFFF, #FF66C7, #FF6666, #66BFFF, #FF66C7, #FF6666 );
    background-size: 200% 100%; /* Full span of duplicated colors */
    animation: gradientSlideSeamless 2s linear infinite;
    /* PNG mask */
    -webkit-mask-image: var(--img);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--img);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-bottom: 1rem;
}
/* Number styling */
.stat-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

/* Label styling */
.stat-label {
    font-family: 'Lexend', sans-serif;
    font-size: 2rem;
    color: #ffffff;
    font-weight: 400;
}

@keyframes gradientSlideSeamless {
    0% {
        background-position: 0% 50%;
    }

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



/* Responsive adjustments */
@media (max-width: 768px) {
    .andmanymore-title {
        font-size: 2.5rem;
        margin-top: -2rem;
    }

    .stat-item {
        max-width: 120px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.875rem;
    }

    .stat-item img {
        width: 40px;
        height: 40px;
    }

    .title-strength {
        width: 100%;
        font-size: 2.9rem !important;
        margin-top: -3rem !important;
    }

}


/* Company Strength CSS */
.company-strength {
    background-color: #000000
}
.title-strength {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.25rem;
    font-weight: 500;
    margin-top: -0.5rem;
    color: #ffffff;
    text-align:center;
}
.strTitleCard {
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
}
.card-str1.card, .card-str2.card, .card-str3.card {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-str1.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
    box-shadow: 0 0 30px rgba(123, 242, 255, 0.8),
                0 0 60px rgba(76, 168, 255, 0.6),
                0 0 90px rgba(35, 50, 215, 0.4),
                0 0 120px rgba(35, 50, 215, 0.2);
}
.card-str2.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
    box-shadow: 0 0 30px rgba(132, 9, 180, 0.8),
                0 0 60px rgba(189, 5, 149, 0.6),
                0 0 90px rgba(189, 5, 45, 0.4),
                0 0 120px rgba(189, 5, 45, 0.2);
}
.card-str3.card:hover {
     border: 3px solid;
     border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
     box-shadow: 0 0 30px rgba(243, 249, 59, 0.8),
                0 0 60px rgba(163, 249, 59, 0.6),
                0 0 90px rgba(81, 249, 59, 0.4),
                0 0 120px rgba(81, 249, 59, 0.2);
}
/*Brands Animation CSS*/
.brands-animation {
    background-color: #000000;
}
.title-brands {
    color: #FFF;
    font-size: 40px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
}
.brand-slider {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    margin: 50px auto;
}

.brand-slider-track {
    display: flex;
    width: 200%;
    height: 100%;
    animation: slideLeft 20s linear infinite;
}
.brand-slider-track > div {
    width: 50%;
    height: 100%;
    position: relative;
}
.brand-slider-track img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}


/*slider in shop*/



.brandgroup-default {
    opacity: 1;
    z-index: 1;
}

.brandgroup-hover {
    opacity: 0;
    z-index: 2;
}

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

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

/*Customer Reviews*/
.reviews {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 250px;
    padding-bottom: 250px;
    overflow: hidden;
    z-index: 0;
    border: none;
    margin-top: 20px;
}
.reviews::after {
    content: "";
    position: absolute;
    bottom: 90px;
    left: 50%;
    top: 200px;
    transform: translateX(-50%);
    width: 100%;
    height: 75%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%),
                radial-gradient(circle at center, #A04AB3 0%, #660B23 40%, #1F0206 65%, transparent 100%);
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: -1;
    border: 0;
    pointer-events: none;
}

.title-reviews {
    color: #AEAEAE;
    font-weight: 300;
    font-size: 40px;
    font-family: 'Lexend', sans-serif;
    z-index: 1;
}

.client-says {
    color: #FFF;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.client-name {
    color: #AEAEAE;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.card-reviews {
    background: rgba(9, 9, 9, 0.6);
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

.star-rating, .card-details {
    position: relative;
    top: -30px;
}

.review-img {
    width: 120px;
    height: 120px;
    top: -50px;
    position: relative;
    z-index: 2;
}
#reviewsCarousel {
    z-index: 1;
}
.carousel-control-prev, .carousel-control-next {
    width: auto;
    top: 54%;
    transform: translateY(-50%);
    opacity: 1;
}

.carousel-control-prev {
    left: -80px;
}

.carousel-control-next {
    right: -80px;
}

@media (min-width: 300px) and (max-width: 1280px) {
    .carousel-control-prev,
    .carousel-control-next {
        position: sticky;
        width: auto;
        padding: 0;
        top: 54%;
        position: absolute;
        transform: translateY(-50%);
    }

    .carousel-control-prev {
        left: 10px;
    }

    .carousel-control-next {
        right: 10px;
    }
    .reviews {
        padding: 0px 20px;
        position: relative;
    }
    .card-reviews {
        margin-top: 100px;
        height: 500px;
    }
}
/* ================ CONTACT =====================/*



/* CONTACT FORM */
.contactForm {
    position: relative;
    background-color: #090909;
    padding: 100px 0px;
    overflow: hidden;
}

    .contactForm::after {
        content: "";
        position: relative;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient( 90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06% );
        filter: blur(80px);
        border-radius: 50%;
        z-index: 0;
    }

.contactForm {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.contactForm::after {
    content: "";
    position: absolute;
    bottom: 210px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.title-contactForm {
    color: #FFF;
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactDes {
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactSync {
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
    background: linear-gradient(90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
}

.card-contactForm.card {
    border: 2px solid;
    border-color: #FDFDFD;
    border-radius: 10px;
    background: #090909;
    transform: none !important;
    transition: none !important;
    z-index: 1;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .contactForm {
        padding: 20px 20px;
    }
}

/* =================== END ======================== */

/* About Section Styles */

.about-section {
    background: #000000;
    color: #eee;
    min-height: 100vh;
    padding-top: 5rem;
    padding-bottom: 3rem;

    position: relative;
}

.about-video {
    max-width: 100%;
    height: 500px;
    object-fit: cover;
    background: #222;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    min-width: 400px;
}

.about-label {
    font-family: 'Lexend', sans-serif;
    font-weight: 200;
    font-size: 24px;
    color: #AEAEAE;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 55px;
    color: #FFFFFF;
    background: linear-gradient(
        90deg,
        #4d4c4c 0%,
        #ffffff 25%,
        #ffffff 50%,
        #ffffff 75%,
        #4d4c4c 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
}

@keyframes anim-lineUp {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }
    20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translateY(0%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes shine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


.about-lead {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: inherit;
    margin-bottom: 1rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-desc {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #AEAEAE;
    margin-bottom: 1.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}
.hero-btn-about {
    font-family: 'Lexend', sans-serif;
    color: #000000 !important;
    background: #D9D9D9;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-btn-about:hover {
        background: transparent ;
        color: #FFFFFF !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);

        background: linear-gradient(
        90deg,
        #000000 0%,
        #000000 25%,
        #000000 50%,
        #000000 75%,
        #ffffff33 100%
    );
    background-size: 200% 100%;
    -webkit-text-fill-color: white;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
    }



@media (max-width: 1024px) {
    .hero-btn-about {
        width: 90% !important;
        justify-content: center;
    }
}
@media (min-width: 300px) and (max-width: 980px) {
    .about-section {
        padding-bottom: 0.5rem;
    }
    .about-video {
        max-width: 100%;
        height: 350px;
        object-fit: cover;
        background: #222;
        border-radius: 0.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        min-width: 300px;
        margin-top: -2rem;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }

    .about-content {
        padding: 30px 30px 0 30px; /* top, right, bottom, left */
    }
    .about-btn {
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }
    .about-title,
    .about-lead,
    .about-desc,
    .about-label {
        transform: none !important;
        text-align: center;
    }
}

@media (min-width: 1024px) and (max-width: 1120px) {
    .about-content {
        padding: 20px;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }
}

/* Team Section Styles */
.team-section {
    background-color: #111;
    color: #fff;
    padding-top: 3rem;
    padding-bottom: 0;
    margin-bottom: 0;
}

.team-intro {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.team-intro-icon {
    height: 0.8em;
    margin-left: -0.3em;
    position: relative;
    top: -0.4em;
     animation: clickSimulate 1.5s ease-in-out infinite;
}

@keyframes clickSimulate {
    0%, 90%, 100% {
        transform: translateY(0) scale(1);
    }
    5% {
        transform: translateY(5px) scale(.25);
    }
    10% {
        transform: translateY(0) scale(1);
    }

}

.team-desc {
    font-size: 1rem;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
}

.team-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    font-size: 22vw;
    line-height: 1;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    margin-top: 12rem;
    padding: 0;
    display: block;
    width: 100%;
    word-break: break-word;
    transform: translateY(-120px);
}

/* Keyframes for smooth gradient shifting */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Shared styling for all category titles */
.leaders-category,
.marketing-category,
.technicians-category,
.admin-category,
.developers-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    line-height: 1;
    text-align: center;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    background-image: linear-gradient(90deg, #74FEBD, #2FA2B7, #4B18E3, #FDFDFD);
    background-size: 400% 100%;
    background-repeat: no-repeat;
    animation: gradientShift 4s linear infinite;
}

.leaders-category {
    margin-top: 13rem;
    transform: translateY(-125px);
    font-size: 320px;
    animation-delay: 0s;
}

.admin-category {
    margin-top: 1rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.marketing-category {
    margin-top: -3rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.technicians-category {
    margin-top: -1rem;
    transform: translateY(-175px);
    font-size: 195px;
    animation-delay: 1s;
}

.developers-category {
    margin-top: -3rem;
    transform: translateY(-170px);
    font-size: 210px;
    animation-delay: 1.5s;
}

.leaders-group,
.admin-group,
.marketing-group,
.technicians-group,
.developers-group {
    margin-bottom: 3rem;
}

.team-wrapper {
    margin-top: -120px;
    padding-bottom: 200px;
    position: relative;
}

.team-img {
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    margin-bottom: 1rem;
    margin-right: 0;
    transform: translateY(-245px);
}



.team-name {
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-230px);
    text-align: center;
    white-space: nowrap;
    animation: lights 5s 750ms linear infinite;
}


    @keyframes lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
}


.team-role {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-215px);
    text-align: center;
}

.row.justify-content-center > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
}

    .row.justify-content-center > [class*="col-"]:first-child {
        margin-left: 0;
    }

@media (max-width: 1280px) {
    .team-category,
    .leaders-category,
    .admin-category,
    .marketing-category,
    .technicians-category,
    .developers-category {
        margin-top: 3rem;
        transform: translateY(0);
    }

    .leaders-category {
        font-size: 16vw;
    }

    .marketing-category {
        font-size: 13vw;
    }

    .technicians-category {
        font-size: 13vw;
    }

    .admin-category{
        font-size: 13vw;
    }

    .developers-category {
        font-size: 13vw;
    }

    .team-img {
        width: 120px;
        height: 120px;
        transform: none;
    }

    .team-name,
    .team-role {
        transform: none;
        font-size: 18px;
    }

    .row.justify-content-center > [class*="col-"] {
        margin-left: 0;
    }
}


/* Join Team Section  */
.bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    top: 0;
    left: 0;
}

.bubble {
    position: absolute;
    bottom: -100px;
    width: 40px;
    height: 40px;
    background: #000000;
    border-radius: 50%;
    opacity: 0.5;
    animation: rise 10s infinite ease-in;
}

    .bubble:nth-child(1) {
        width: 40px;
        height: 40px;
        left: 10%;
        animation-duration: 8s;
    }

    .bubble:nth-child(2) {
        width: 20px;
        height: 20px;
        left: 20%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(3) {
        width: 50px;
        height: 50px;
        left: 35%;
        animation-duration: 7s;
        animation-delay: 2s;
    }

    .bubble:nth-child(4) {
        width: 80px;
        height: 80px;
        left: 50%;
        animation-duration: 11s;
        animation-delay: 0s;
    }

    .bubble:nth-child(5) {
        width: 35px;
        height: 35px;
        left: 55%;
        animation-duration: 6s;
        animation-delay: 1s;
    }

    .bubble:nth-child(6) {
        width: 45px;
        height: 45px;
        left: 65%;
        animation-duration: 8s;
        animation-delay: 3s;
    }

    .bubble:nth-child(7) {
        width: 90px;
        height: 90px;
        left: 70%;
        animation-duration: 12s;
        animation-delay: 2s;
    }

    .bubble:nth-child(8) {
        width: 25px;
        height: 25px;
        left: 80%;
        animation-duration: 6s;
        animation-delay: 2s;
    }

    .bubble:nth-child(9) {
        width: 15px;
        height: 15px;
        left: 70%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(10) {
        width: 90px;
        height: 90px;
        left: 25%;
        animation-duration: 10s;
        animation-delay: 4s;
    }

@keyframes rise {
    0% {
        bottom: -100px;
        transform: translateX(0);
    }

    50% {
        transform: translate(100px);
    }

    100% {
        bottom: 1080px;
        transform: translateX(-200px);
    }
}

@keyframes anime {
    0% {
        top: 0;
    }

    50% {
        top: -1800px;
    }
    /* 200 - 2000 */
    100% {
        top: 0;
    }
}

/* join-team-section with its background and overlay */
.join-team-section {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, #7B9FFF 0%, #E17BCF 100%);
    background-size: 200% 200%;
    animation: joinGradientMove 3s linear infinite;
    padding: 4rem 1rem;
    color: #fff;
    margin-top: -25em;
    text-align: center;
}

    .join-team-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.1);
        pointer-events: none;
        z-index: 0;
        border-radius: inherit;
    }

/* animate join-team-section gradient background */
@keyframes joinGradientMove {
    0% {
        background-position: 0% 50%;
    }

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

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

.join-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 3rem;
    line-height: 1;
    color: #FDFDFD;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.join-btn {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1;
    color: #FDFDFD;
    border: 2px solid #fff;
    border-radius: 32px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: all 0.3s ease;
    padding: 0.75em 2em;
    background: transparent;
    margin-top: 3em;
    position: relative;
}

    .join-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }

.join-arrow-img {
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin-left: 0.3em;
}

@media (max-width: 1280px) {
    .join-team-section {
        margin-top: -13rem;
    }
}
/* END ABOUT CSS THAT WAS REPLACED */

/* =============== CONTACT US ================= */

@keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        @keyframes rainbowBorder {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes rainbowGlow {
            0% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
            14% { border-color: #ff7700; box-shadow: 0 0 20px rgba(255, 119, 0, 0.5); }
            28% { border-color: #ffff00; box-shadow: 0 0 20px rgba(255, 255, 0, 0.5); }
            42% { border-color: #00ff00; box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); }
            56% { border-color: #0000ff; box-shadow: 0 0 20px rgba(0, 0, 255, 0.5); }
            70% { border-color: #4b0082; box-shadow: 0 0 20px rgba(75, 0, 130, 0.5); }
            84% { border-color: #9400d3; box-shadow: 0 0 20px rgba(148, 0, 211, 0.5); }
            100% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
        }

        .banner-top-area {
            position: relative;
            min-height: 300px;
            height: clamp(250px, 55vh, 550px);
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('/images/blogs/blogs-landpage/blog-carousel-2.jpg') center/cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: clamp(15px, 4vw, 150px);
            animation: fadeInDown 1s ease-out;

            /* New properties for the fade-out effect at both top and bottom */
            mask-image: linear-gradient(
                to bottom,
                transparent 0%,  /* Start fully transparent (top fade-out) */
                black 10%,        /* Become fully visible at 5% */
                black 85%,       /* Stay fully visible until 95% */
                transparent 100% /* Become fully transparent (bottom fade-out) */
            );
            overflow: hidden;

        }

        .banner-top-area h1 {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(28px, 7vw, 65px);
            font-weight: 700;
            color: white;
            animation: fadeInDown 1s ease-out;
        }

        .send-us h2 {
            font-family: "Space Grotesk";
            font-size: clamp(24px, 5vw, 36px);
            font-weight: 600;
            margin-bottom: clamp(20px, 4vw, 45px); 
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        .reach-us-main-container {
            max-width: 1200px;
            margin: clamp(-120px, -18vw, -250px) auto 60px;
            padding: 0 clamp(12px, 2.5vw, 20px);
            position: relative;
            z-index: 100;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
        }

        .dual-panel-layout {
            box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
            display: grid;
            grid-template-columns: 1fr;
            overflow: hidden;
            position: relative;
            padding: 2px;
            background: linear-gradient(90deg, 
                #ff0000, #ff7700, #ffff00, #00ff00, 
                #0000ff, #4b0082, #9400d3, #ff0000);
            background-size: 200% 200%;
            animation: rainbowBorder 3s linear infinite;
        }

        @media (min-width: 1024px) {
            .dual-panel-layout {
                grid-template-columns: 1.5fr 1fr;
            }
        }

        .dual-panel-layout::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            border-radius: 18px;
            background: rgb(8, 8, 8);
            z-index: 1;
        }

        .input-panel-wrapper {
            padding: clamp(25px, 5vw, 60px) clamp(18px, 5vw, 80px);
            background: rgb(8, 8, 8);
            position: relative;
            z-index: 2;
        }

        .field-container {
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        .dual-field-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 20px);
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        @media (min-width: 640px) {
            .dual-field-row {
                grid-template-columns: 1fr 1fr;
            }
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: white;
            font-family: "Lexend", sans-serif;
            font-weight: 500;
            font-size: clamp(14px, 2vw, 16px);
        }

        input, textarea {
            color: white;
            font-family: "Lexend", sans-serif;
            width: 100%;
            padding: clamp(12px, 2vw, 15px) clamp(15px, 2.5vw, 20px);
            border: 1px solid gray;
            border-radius: 10px;
            background: rgb(15, 15, 15);
            font-size: clamp(14px, 2vw, 16px);
            transition: all 0.3s ease;
        }

        input:hover, textarea:hover,
        input:focus, textarea:focus {
            outline: none;
            animation: rainbowGlow 2s linear infinite;
        }

        textarea {
            resize: vertical;
            min-height: clamp(120px, 20vw, 150px);
        }

        .action-button-primary {
            display: block;
            margin: 0 auto;
            width: min(100%, 300px);
            max-width: 100%;
            height: 50px;
            padding: 10px 20px;
            font-family: "Lexend", sans-serif;
            background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: clamp(15px, 2vw, 17px);
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        @media (min-width: 640px) {
            .action-button-primary {
                width: 60%;
            }
        }

        @media (min-width: 1024px) {
            .action-button-primary {
                width: 40%;
            }
        }

        .action-button-primary:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 5px 7px rgba(172, 56, 56, 0.7),
                        0 0 8px rgba(172, 56, 56, 0.4);
        }

        .details-panel-wrapper {
            padding: clamp(30px, 5vw, 50px);
            background: rgb(4, 4, 4);
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 2;
        }

        .details-panel-wrapper h2 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(28px, 5vw, 36px);
            font-weight: 600;
            margin-top: clamp(15px, 3vw, 35px);
            margin-left: 0;
            margin-bottom: 20px;
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        @media (min-width: 768px) {
            .details-panel-wrapper h2 {
                margin-left: clamp(0px, 4vw, 55px);
            }
        }

        .details-card-item {
            background: rgb(15, 15, 15);
            padding: clamp(15px, 3vw, 20px);
            width: 100%;
            max-width: 300px;
            border-radius: 15px;
            margin-bottom: clamp(20px, 4vw, 30px);
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .details-card-item {
                max-width: 100%;
            }
        }

        .details-card-item:nth-child(1) {
            animation: floatAlt 4s ease-in-out infinite;
        }

        .details-card-item:nth-child(2) {
            animation: floatAlt 5s ease-in-out infinite;
        }

        .details-card-item:nth-child(3) {
            animation: floatAlt 4.5s ease-in-out infinite;
        }

        .details-card-item h3 {
            font-size: clamp(18px, 3vw, 23px);
            margin-bottom: clamp(12px, 2vw, 20px);
            color: white;
            font-family: "Space Grotesk", sans-serif;
        }

        .details-card-item p {
            color: #8a8a8a;
            font-size: clamp(13px, 2vw, 15px);
            font-family: "Lexend", sans-serif;
            line-height: 1.5;
            margin: 5px 0;
        }

        .scroll-animate {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .scroll-animate.active {
            opacity: 1;
            transform: translateY(0);
        }

        .map-section {
            padding: clamp(30px, 7vw, 70px);
            width: 95%;
            max-width: 1400px;
            margin: 0 auto;
        }

        .where-to h1 {
            color: white;
            font-size: clamp(28px, 6vw, 46px);
            font-weight: 700;
            font-family: "Space Grotesk";
            padding-left: clamp(10px, 3vw, 45px);
            margin-bottom: 20px;
        }

        .where-to iframe {
            padding: clamp(10px, 3vw, 28px);
            height: clamp(300px, 50vw, 600px);
            width: 100%;
            border-radius: clamp(20px, 5vw, 50px);
        }

        @media (max-width: 640px) {
            .banner-top-area {
                min-height: 220px;
                height: 40vh;
            }

            .reach-us-main-container {
                margin-top: -80px;
                margin-bottom: 40px;
            }

            .input-panel-wrapper {
                padding: 25px 18px;
            }

            .details-panel-wrapper {
                padding: 25px 18px;
            }

            .send-us h2 {
                margin-bottom: 20px;
            }

            .details-panel-wrapper h2 {
                margin-top: 10px;
                margin-bottom: 15px;
            }

            .details-card-item {
                margin-bottom: 18px;
            }

            .map-section {
                padding: 30px 15px;
            }

            .where-to iframe {
                padding: 12px;
                border-radius: 20px;
            }
        }

/* ================ END ===================== */

/* Contact Us Style V1 */
/* Container */
.contact-container {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* Shared Panel Styles */
.contact-panel {
    flex: 1;
    font-family: 'Lexend', sans-serif;
    background: #090909;
    color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* LEFT PANEL */
.contact-left-panel {
    margin-left: 2rem;
    border-radius: 1rem 0 0 1rem;
    z-index: 1;
}

    /* Border animation */
    .contact-left-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2px;
        background: linear-gradient(270deg, red, orange, yellow, lime, cyan, blue, violet, red);
        background-size: 400% 400%;
        animation: animated-border 8s linear infinite;
        border-radius: 1rem 0 0 1rem;
        box-sizing: border-box;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
    }

    /* Soft glow */
    .contact-left-panel::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 0 25px rgba(255,255,255,0.07), 0 0 60px rgba(255,255,255,0.05);
        border-radius: 1rem 0 0 1rem;
        z-index: -2;
    }

/* Animate background border */
@keyframes animated-border {
    0% {
        background-position: 0% 50%;
    }

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

/* Content Wrapper (with spacing) */
.contact-left-inner,
.contact-right-inner {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Title & subtitle alignment */
.contact-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.contact-subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* CONTACT ITEMS */
.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.icon {
    margin-left: 3rem;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
}

    .icon img {
        width: 100%;
        height: auto;
    }

    .icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-left: 5rem;
        width: 6rem;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-50%);
    }

.info {
    margin-left: 14rem;
    flex: 1;
}

    .info h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .info p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0.2rem 0;
    }

/* SOCIAL ICONS */
.social-icons {
    margin-top: 2rem;
    display: flex;
    gap: 0.3rem;
}

.social-icon img {
    width: 1.5rem;
    height: 1.5rem;
}

/* RIGHT PANEL */
.contact-right-panel {
    margin-right: 2rem;
    border-radius: 0 1rem 1rem 0;
    z-index: 1;
}

.inquiry-options {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.inquiry-option {
    position: relative;
}

    .inquiry-option input[type="radio"] {
        display: none;
    }

    .inquiry-option span {
        display: inline-block;
        padding: 0.5rem 1.25rem;
        border: 2px solid white;
        color: white;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        cursor: pointer;
        background-color: transparent;
    }

    /* Gradient style when checked OR hovered */
    .inquiry-option input[type="radio"]:checked + .inquiry-str1,
    .inquiry-str1:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
        box-shadow: 0 0 4px rgba(123, 242, 255, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str2,
    .inquiry-str2:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
        box-shadow: 0 0 4px rgba(189, 5, 149, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str3,
    .inquiry-str3:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
        box-shadow: 0 0 4px rgba(81, 249, 59, 0.25);
    }

/* Form fields */
.form-group {
    margin-bottom: 1.5rem;
}

    .form-group input,
    .form-group textarea {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid white;
        color: white;
        font-size: 0.95rem;
        padding: 0.5rem 0;
        outline: none;
    }

textarea {
    resize: vertical;
    min-height: 80px;
}

/* Update preference radios */
.radio-group {
    margin-bottom: 2rem;
}

    .radio-group label {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .radio-group input[type="radio"] {
        margin-right: 0.5rem;
    }

/*Submit Button*/
.submit-button {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.95rem;
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Lexend', sans-serif;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

    /* Gradient fill on hover */
    .submit-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #d8b4fe, #a5f3fc, #bbf7d0);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 2rem;
    }

    .submit-button:hover::before {
        opacity: 1;
    }

    .submit-button:hover {
        color: black;
        font-weight: bold;
    }

/* ===== Responsive Layout ===== */
@media (max-width: 1024px) {
    .contact-left-inner,
    .contact-right-inner {
        padding: 1.5rem;
    }

    .info {
        margin-left: 10rem;
    }

    .icon::after {
        margin-left: 2rem;
        width: 3rem;
    }
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-left-panel,
    .contact-right-panel {
        margin: 1rem 1rem 0 1rem;
        border-radius: 1rem;
    }

        .contact-left-panel::before,
        .contact-left-panel::after,
        .contact-right-panel::before,
        .contact-right-panel::after {
            border-radius: 1rem !important;
        }

    .contact-title {
        font-size: 1.3rem;
    }

    .info {
        margin-left: 6rem;
    }

    .icon {
        margin-left: 1.5rem;
        width: 2rem;
        height: 2rem;
    }

        .icon::after {
            display: none;
        }

    .form-group input,
    .form-group textarea {
        font-size: 0.9rem;
    }

    .submit-button {
        font-size: 0.9rem;
    }

    .inquiry-options {
        flex-direction: column;
    }

    .inquiry-option span {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .info h3 {
        font-size: 1rem;
    }

    .info p {
        font-size: 0.85rem;
    }

    .contact-title {
        font-size: 1.2rem;
    }

    .social-icons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .social-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .radio-group label {
        font-size: 0.85rem;
    }

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

/* Sync Rainbow Texts - Right to Left */
@keyframes gradientCycletext {
    0% {
        background-position: 100% 50%;
    }

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

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

.glow-gradient-text {
    background: linear-gradient( 90deg, #FF6666 0%, #FF8A66 16.66%, #FFF266 33.33%, #85FF66 50%, #66BFFF 66.66%, #9966FF 83.33%, #FF66C7 100% );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    animation: gradientCycletext 6s ease-in-out infinite;
}

/*Blogs Carousel*/
.BlogLandPage .carousel-inner,
.BlogLandPage .carousel-item,
.BlogLandPage .blogsCarousel-img {
    height: 500px;
    width: 100%;
    bottom: 50px;
    
}

.BlogLandPage .blogsCarousel-img {
    object-fit: cover; 
}

/*Latest Product*/
.LatestProduct {
    background-color: #000000;
    padding: 80px 20px;
}

.title-LatestProduct {
    color: #FFF;
    font-size: 34px;
    font-weight: 600;
}
.card-productName {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productPrice {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productStatus {
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
}
.card-product.card {
    border: 1px solid;
    border-color: #D9D9D9;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-product.card:hover {
    border-radius: 15px;
    background: linear-gradient(#000, #000) padding-box, 
    linear-gradient(90deg, #8409B4, #BD0595, #BD052D) border-box; 
    border: 3px solid transparent;
}
.btn-LastestProduct {
    background: transparent;
    color: #FDFDFD;
    border: none;
    border-radius: 10px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
.btn-check:checked + .btn-LastestProduct:hover {
    background: #FDFDFD;
    color: #090909;
    border: none;
}
.btn-check:not(:checked) + .btn-LastestProduct:hover {
    border: 1px solid #FDFDFD;
    color: #FDFDFD;
}

.btn-check:checked + .btn-LastestProduct {
    background: #FDFDFD;
    color: #090909;
    border: none;
}

/* Custom CSS for Trending Gadgets & DPC Updates */

/* Font Definitions */
.space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

.lexend {
    font-family: 'Lexend', sans-serif;
}

/* Main Container */
.tech-showcase-container {
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
    min-height: 100vh;
    padding: 80px 0;
    overflow: hidden;
}

/* Section Headers */
.tech-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.tech-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.tech-view-all {
    color: #64748b;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tech-view-all:hover {
        color: #3b82f6;
        transform: translateX(5px);
    }

/* Trending Gadgets Section */
.trending-gadgets-section {
    margin-bottom: 80px;
}

.trending-card {
    background: #000000;
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

    .trending-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .trending-card:hover::before {
        opacity: 1;
    }

    .trending-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .trending-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.trending-card-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.trending-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

    .trending-card-icon i {
        font-size: 2rem;
        color: white;
    }

.trending-card-info {
    flex: 1;
}

.trending-card-category {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .trending-card-category.mobile-tech {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .trending-card-category.gaming {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }

    .trending-card-category.smart-home {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.trending-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.trending-card-description {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
}

.trending-card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #64748b;
}

.trending-card-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.trending-card-arrow {
    margin-left: auto;
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.trending-card:hover .trending-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* DPC Updates Section */
.dpc-updates-section {
    margin-top: 80px;
}

.dpc-update-card {
    background: #000000;
    border-radius: 20px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 250px;
}

    .dpc-update-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(147, 51, 234, 0.8) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .dpc-update-card:hover::before {
        opacity: 0.3;
    }

    .dpc-update-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .dpc-update-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.dpc-card-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.dpc-update-card:hover .dpc-card-background {
    transform: scale(1.05);
}

.dpc-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
}

.dpc-card-content {
    position: relative;
    z-index: 3;
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dpc-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.dpc-card-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .dpc-card-status.upcoming {
        background: rgba(59, 130, 246, 0.2);
        color: #3b82f6;
    }

    .dpc-card-status.product-launch {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .dpc-card-status.partnership {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.dpc-card-countdown {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: auto;
}

.dpc-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}

.dpc-card-description {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.dpc-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.dpc-card-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.dpc-card-date, .dpc-card-location {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dpc-card-arrow {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.dpc-update-card:hover .dpc-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* Modal Styles */
.dpc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .dpc-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.dpc-modal-content {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.dpc-modal-overlay.active .dpc-modal-content {
    transform: scale(1);
}

.dpc-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .dpc-modal-close:hover {
        background: #ef4444;
        color: white;
    }

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

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

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

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

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

    .trending-card-content {
        flex-direction: column;
        text-align: center;
    }

    .trending-card-icon {
        width: 60px;
        height: 60px;
    }

        .trending-card-icon i {
            font-size: 1.5rem;
        }

    .dpc-card-content {
        padding: 20px;
    }

    .dpc-card-title {
        font-size: 1.3rem;
    }

    .dpc-modal-content {
        padding: 30px;
        margin: 20px;
    }
}


        .blog-section-blog-post {
            padding: 60px 0;
            background-color: #000000;
        }

        .section-header-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .section-title-blog-post {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 0;
        }

        .view-all-link-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .view-all-link-blog-post:hover {
            color: #66b3ff;
        }

        .featured-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            height: 400px;
            margin-bottom: 40px;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .featured-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .featured-image-blog-post {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

        .featured-overlay-blog-post {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            padding: 40px 30px 30px;
        }

        .featured-category-blog-post {
            background-color: #4a9eff;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            display: inline-block;
            margin-bottom: 15px;
        }

        .featured-title-blog-post {
            font-size: 2rem;
            font-weight: bold;
            margin: 0;
            color: white;
        }

        .blog-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }

        .blog-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

        .blog-card-image-blog-post {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .blog-card-content-blog-post {
            padding: 25px;
        }

        .blog-card-meta-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .blog-card-category-blog-post {
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
            color: white;
        }

        .gaming-blog-post { background-color: #00ff88; color: #000; }
        .ai-vr-blog-post { background-color: #4a9eff; }
        .security-blog-post { background-color: #ff6b6b; }

        .blog-card-date-blog-post {
            color: #888;
            font-size: 0.9rem;
        }

        .blog-card-title-blog-post {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 12px;
            color: white;
        }

        .blog-card-excerpt-blog-post {
            color: #ccc;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .read-more-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .read-more-blog-post:hover {
            color: #66b3ff;
        }

        .sidebar-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            padding: 30px;
            border: 1px solid #333;
            margin-bottom: 30px;
        }

        .sidebar-title-blog-post {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 25px;
            color: white;
        }

        .trending-item-blog-post {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #333;
        }

        .trending-item-blog-post:last-child {
            border-bottom: none;
        }

        .trending-number-blog-post {
            background-color: #4a9eff;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .trending-content-blog-post h6 {
            margin: 0;
            font-weight: 600;
            color: white;
        }

        .trending-content-blog-post small {
            color: #888;
        }

        .category-tag-blog-post {
            background-color: #333;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 0.9rem;
            margin: 5px;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .category-tag-blog-post:hover {
            background-color: #4a9eff;
            color: white;
        }

        .arrow-icon-blog-post {
            margin-left: 8px;
        }

        @media (max-width: 768px) {
            .section-header-blog-post {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

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

            .featured-card-blog-post {
                height: 300px;
            }

            .featured-title-blog-post {
                font-size: 1.5rem;
            }
        }

        .chat-widget-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }

        .chat-toggle-btn {
            width: 60px;
            height: 60px;
            background-color: white;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            overflow: hidden;
            padding: 8px;
        }

        .chat-toggle-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .chat-toggle-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .chat-window {
            position: fixed;
            bottom: 100px;
            right: 20px;
            width: 350px;
            height: 500px;
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            transform: translateY(100%) scale(0.8);
            opacity: 0;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            z-index: 1001;
            overflow: hidden;
        }

        .chat-window.active {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .chat-header {
            background-color: #000;
            color: #fff;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 20px 20px 0 0;
        }

        .chat-header-info {
            display: flex;
            align-items: center;
        }

        .assistant-avatar {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            overflow: hidden;
        }

        .assistant-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .chat-header-text h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .status-indicator {
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background-color: #00ff88;
            border-radius: 50%;
            margin-right: 8px;
        }

        .close-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            background-image: url('/images/dpcbits10.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .chat-body {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f8f8f8;
        }

        .message {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
        }

        .message.bot .message-avatar {
            background-color: #000;
            color: #fff;
            overflow: hidden;
        }

        .message.bot .message-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .message.user .message-avatar {
            background-color: #fff;
            color: #000;
            border: 2px solid #000;
            margin-right: 0;
            margin-left: 12px;
        }

        .message-content {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.4;
        }

        .message.bot .message-content {
            background-color: #fff;
            color: #000;
            border: 1px solid #e0e0e0;
        }

        .message.user .message-content {
            background-color: #000;
            color: #fff;
        }

        .quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }

        .quick-reply-btn {
            background-color: #fff;
            border: 2px solid #000;
            color: #000;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Space Grotesk', sans-serif;
        }

        .quick-reply-btn:hover {
            background-color: #000;
            color: #fff;
        }

        .chat-input-container {
            padding: 20px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
        }

        .chat-input-wrapper {
            display: flex;
            align-items: center;
            background-color: #f8f8f8;
            border-radius: 25px;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            transition: border-color 0.3s ease;
        }

        .chat-input-wrapper:focus-within {
            border-color: #000;
        }

        .chat-input {
            flex: 1;
            border: none;
            background: none;
            outline: none;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            color: #000;
        }

        .chat-input::placeholder {
            color: #999;
        }

        .send-btn {
            background-color: #000;
            border: none;
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
            font-size: 16px;
            transition: transform 0.2s ease;
        }

        .send-btn:hover {
            transform: scale(1.1);
        }

        .typing-indicator {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background-color: #fff;
            border-radius: 16px;
            margin-left: 44px;
            width: fit-content;
            border: 1px solid #e0e0e0;
        }

        .typing-dots {
            display: flex;
            gap: 4px;
        }

        .typing-dot {
            width: 6px;
            height: 6px;
            background-color: #999;
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-10px); opacity: 1; }
        }

        /* Mobile responsiveness */
        @media (max-width: 768px) {
            .chat-window {
                width: calc(100vw - 40px);
                height: 500px;
                right: 20px;
                bottom: 100px;
            }

            .message-content {
                max-width: 85%;
            }
        }        

        .company-info-section {
            background: #000000;
            color: #ffffff;
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        
        .company-info-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
            pointer-events: none;
        }
        
        /* 3D Hero Animation */
        .hero-3d-container {
            position: relative;
            height: 800px;
            margin-bottom: 2rem;
        }
        
        .hero-3d-scene {
            width: 100%;
            height: 100%;
            perspective: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .floating-cube {
            width: 100px;
            height: 100px;
            position: absolute;
            transform-style: preserve-3d;
            animation: floatRotate 6s ease-in-out infinite;
        }
        
        .cube-face {
            position: absolute;
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border: 1px solid rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
        }
        
        .cube-face.front { transform: rotateY(0deg) translateZ(50px); }
        .cube-face.back { transform: rotateY(180deg) translateZ(50px); }
        .cube-face.right { transform: rotateY(90deg) translateZ(50px); }
        .cube-face.left { transform: rotateY(-90deg) translateZ(50px); }
        .cube-face.top { transform: rotateX(90deg) translateZ(50px); }
        .cube-face.bottom { transform: rotateX(-90deg) translateZ(50px); }
        
        .floating-cube:nth-child(1) {
            top: 10%;
            left: 20%;
            animation-delay: 0s;
        }
        
        .floating-cube:nth-child(2) {
            top: 60%;
            right: 15%;
            animation-delay: 2s;
            transform: scale(0.7);
        }
        
        .floating-cube:nth-child(3) {
            top: 30%;
            left: 70%;
            animation-delay: 4s;
            transform: scale(0.5);
        }
        
        @keyframes floatRotate {
            0%, 100% {
                transform: translateY(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            25% {
                transform: translateY(-20px) rotateX(90deg) rotateY(45deg) rotateZ(45deg);
            }
            50% {
                transform: translateY(0px) rotateX(180deg) rotateY(90deg) rotateZ(90deg);
            }
            75% {
                transform: translateY(20px) rotateX(270deg) rotateY(135deg) rotateZ(135deg);
            }
        }
        
        .company-hero {
            text-align: center;
            margin-bottom: 60px;
        }
        
/* Option 1: Smooth Fade-in with Slide Up */
        .hero-option-1 .company-hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff, #e0e0e0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            
            /* Animation */
            animation: fadeInSlideUp 1.2s ease-out forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        .hero-option-1 .company-hero p {
            font-size: 1.25rem;
            font-weight: 300;
            opacity: 0;
            max-width: 600px;
            margin: 0 auto;
            color: rgba(255,255,255,0.9);
            
            /* Animation with delay */
            animation: fadeInSlideUp 1.2s ease-out 0.3s forwards;
            transform: translateY(30px);
        }

        @keyframes fadeInSlideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .info-card {
            background: #ffffff;
            color: #000000;
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: none;
            box-shadow: 0 10px 30px rgba(255,255,255,0.1);
            transition: all 0.3s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .info-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, rgba(0,0,0,0.05), transparent);
            border-radius: 50%;
            transition: all 0.3s ease;
            transform: scale(0);
        }
        
        .info-card:hover::before {
            transform: scale(3);
        }
        
        .info-card:hover {
            transform: translateY(-5px) rotateX(2deg);
            box-shadow: 0 20px 40px rgba(255,255,255,0.15);
        }
        
        /* 3D Service Cards */
        .service-item {
            background: rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.4s ease;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .service-item::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 50%;
            transform: translate(-50%, -50%) translateZ(20px);
            transition: all 0.4s ease;
            z-index: 0;
        }
        
        .service-item:hover {
            background: rgba(255,255,255,0.12);
            transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
            box-shadow: 
                0 20px 40px rgba(255,255,255,0.1),
                0 0 0 1px rgba(255,255,255,0.2);
        }
        
        .service-item:hover::before {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
            transform: translate(-50%, -50%) translateZ(30px) rotateZ(180deg);
        }
        
        .service-item h4,
        .service-item p {
            position: relative;
            z-index: 2;
        }
        .info-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #000000;
            position: relative;
            z-index: 2;
        }
        
        .info-card p, .info-card li {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
            color: #333333;
            position: relative;
            z-index: 2;
        }
        
        .info-card ul {
            padding-left: 1.25rem;
            margin-bottom: 0;
            position: relative;
            z-index: 2;
        }
        
        .info-card li {
            margin-bottom: 0.5rem;
        }
        
        .services-grid {
            margin-top: 3rem;
        }
        
        /* 3D Icons for Services */
        .service-icon {
            width: 120px;
            height: 80px;
            margin: 0 auto 1rem auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all 0.4s ease;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 12px;
            overflow: hidden;
        }
        
        .service-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            transition: all 0.4s ease;
            transform: translateZ(10px);
        }
        
        .service-item:hover .service-icon {
            transform: rotateX(5deg) rotateY(5deg) scale(1.05);
        }
        
        .service-item:hover .service-icon img {
            transform: translateZ(15px) scale(1.1);
        }
        
        .icon-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.3), transparent);
            border-radius: 12px;
            transition: all 0.4s ease;
            z-index: 2;
        }
        
        .service-item:hover .icon-overlay {
            background: linear-gradient(135deg, rgba(0,0,0,0.1), transparent);
        }
        
        .stats-container {
            background: rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 2rem;
            margin: 3rem 5rem;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .stat-item {
            text-align: center;
            margin-bottom: 1rem;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #ffffff;
            display: block;
        }
        
        .stat-label {
            font-size: 0.9rem;
            font-weight: 400;
            opacity: 0.7;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        @media (max-width: 768px) {
            .company-hero h1 {
                font-size: 2.5rem;
            }
            
            .info-card {
                padding: 1.5rem;
            }
            
            .stat-number {
                font-size: 2rem;
            }
        } 
        
/* Hero Section - Break out of container constraints */
.hero-section {
    position: relative;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    margin-left: calc(-50vw + 50%); /* Center and break out of parent container */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    font-family: 'League Spartan', sans-serif;
}

/* Remove container constraints completely for hero section */
.hero-section .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Hero Video - Cover entire viewport */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Override any parent container constraints that might affect the hero */
.company-info-section .container {
    max-width: none;
    padding: 0;
    overflow: visible;
}

/* Alternative approach - if above doesn't work, use this instead */
.hero-section-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
}

.hero-section-fullscreen .hero-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}     

 .container {
            position: relative;
            z-index: 100;
        }

        /* Filter Buttons */
        .btn-LastestProduct {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: #495057;
            transition: var(--transition-smooth);
            border-radius: 50px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-LastestProduct:hover {
            background: rgba(255, 255, 255, 1);
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
        }

        .btn-check:checked + .btn-LastestProduct {
            background: var(--gradient-bg);
            border-color: transparent;
            color: white;
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
        }

        /* Slider Container */
        .cards-slider-container {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            background: #000000;
            backdrop-filter: blur(20px);
            padding: 2rem;
            margin-top: 2rem;
            margin-left: -15px;
            margin-right: -15px;
            width: calc(100% + 30px);
        }

        .cards-slider {
            display: flex;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            gap: 2rem;
        }

        .card-slide {
            min-width: calc(33.333% - 3.33rem);
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            .card-slide {
                min-width: calc(50% - 2.5rem);
            }
        }

        @media (max-width: 576px) {
            .card-slide {
                min-width: calc(100% - 1rem);
                max-width: 320px;
                margin: 0 auto;
            }
        }

        @media (max-width: 480px) {
            .card-slide {
                min-width: calc(100% - 0.5rem);
                max-width: 280px;
            }
        }

        /* Product Cards */
        .product-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            transition: var(--transition-smooth);
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-bg);
            transform: scaleX(0);
            transition: transform 0.4s ease;
            transform-origin: left;
        }

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

        .product-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: var(--card-hover-shadow);
            border-color: rgba(0, 123, 255, 0.3);
        }

        .product-card:hover .product-icon {
            transform: scale(1.2) rotate(10deg);
            color: var(--primary-color);
        }

        .product-card:hover .product-title {
            color: var(--primary-color);
        }

        .product-card:hover .btn-product {
            transform: scale(1.1);
            background: var(--gradient-bg);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
        }

        .product-icon {
            font-size: 3.5rem;
            background: var(--gradient-bg);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1.5rem;
            transition: var(--transition-smooth);
            /* Fallback for browsers that don't support background-clip */
            color: var(--primary-color);
        }

        /* Ensure icons are visible */
        .product-icon i {
            display: inline-block;
            font-style: normal;
        }

        /* Fallback if Font Awesome doesn't load */
        .product-icon i:before {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", FontAwesome, sans-serif;
            font-weight: 900;
        }

        .product-title {
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 1rem;
            transition: var(--transition-smooth);
            font-size: 1.25rem;
        }

        .product-description {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.6;
            opacity: 0.9;
        }

        .btn-product {
            background: linear-gradient(135deg, #840984 0%, #BD0595 50%, #BD052D 100%);
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            transition: var(--transition-smooth);
            font-weight: 600;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .btn-product::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: left 0.5s;
        }

        .btn-product:hover::before {
            left: 100%;
        }

        /* Navigation Buttons */
        .slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-smooth);
            z-index: 100;
            color: var(--primary-color);
            font-size: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .slider-nav:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 8px 30px rgba(0, 123, 255, 0.3);
        }

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

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

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

        .parallax-element {
            position: absolute;
            background: var(--gradient-bg);
            border-radius: 50%;
            opacity: 0.1;
            animation: float 20s ease-in-out infinite;
        }

        .parallax-element:nth-child(1) {
            width: 100px;
            height: 100px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .parallax-element:nth-child(2) {
            width: 150px;
            height: 150px;
            top: 60%;
            right: 10%;
            animation-delay: -5s;
        }

        .parallax-element:nth-child(3) {
            width: 80px;
            height: 80px;
            bottom: 20%;
            left: 20%;
            animation-delay: -10s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-30px) rotate(120deg); }
            66% { transform: translateY(-60px) rotate(240deg); }
        }

        /* Slider Indicators */
        .slider-indicators {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: var(--transition-smooth);
        }

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

        .indicator:hover {
            background: var(--primary-hover);
            transform: scale(1.1);
        }

        /* Loading Animation */
        .card-slide {
            opacity: 0;
            animation: slideIn 0.8s ease-out forwards;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .category-banner {
            background: linear-gradient(135deg, #1F0206 0%, #660B23 100%);
            border-radius: 20px;
            padding: 30px;
            margin: 40px 0 30px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .category-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: shimmer 3s infinite;
        }
        
        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        .category-banner h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .category-banner p {
            font-size: 1.1rem;
            margin: 10px 0 0 0;
            opacity: 0.9;
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .card-product {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-product:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }        

.setup {
            position: block;
            margin: auto;
            width: 50%;
        }




/* PC - DETAILS */

.main-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.hero-content-container {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;

    
    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/1200x/5b/6d/40/5b6d40fc0b5f754168a8c7f95dba3485.jpg'); 
    background-size: cover;
    background-position: center;
}

.text-overlay {
    position: absolute;
    bottom: 50px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.text-overlay h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.see-more-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 30px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-more-button:hover {
    background-color: #7B54B1;
}

.why-choose-us-section {
    font-family: "Lexend";
    display: flex;
    align-items: center; 
    max-width: 1300px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
    .why-choose-us-section.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .why-choose-us-section.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but the 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }


/* Left Column - Visual Container */
.visual-container {
    flex: 1;
    min-height: 500px;
    background-image: url("../images/products/robot-pc-case.png"); 
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .visual-container:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }

/* Right Column - Content Container */
.content-container {
    flex: 1;
    padding-left: 70px;
}

/* Title Styling */
.title-line-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;

}

/* Feature List Styling */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.feature-list li:hover{
    transform: translateY(-5px) scale(1.05);
}




.feature-icon {
    font-size: 20px; 
    margin-right: 15px;
    color: white; 
    transform: rotate(-15deg); 
}


.benefits-layout {
    font-family: "lexend";
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 60px 20px;
    margin: auto;
}


.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}


.card-description {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.testimonials-section {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto; 
    grid-template-areas: 
        "content visual"
        "button button"; 
    
    gap: 10px; 
    max-width: 1000px; 
    margin: 70px auto; 
    padding: 0 10px; 
    align-items: start;
}

    .testimonials-section.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .testimonials-section.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }



.testimonial-content {
    grid-area: content;
    padding-right: 20px; 
}

.testimonial-heading-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.quote {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.star-rating .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    
  
    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .star-rating :hover {
        transform: translateY(-5px) scale(1.05);
    }

@keyframes rgbGoldPulse {
    0% {
        text-shadow: 
            0 0 3px rgba(255, 215, 0, 0.7), 
            0 0 3px rgba(255, 165, 0, 0.5);
    }
    50% {
        /* This is the peak, adding the subtle RGB glow */
        text-shadow: 
            0 0 3px rgba(255, 223, 0, 0.8), 
            0 0 3px rgba(255, 175, 0, 0.6),  
            0 0 3px rgba(255, 0, 0, 0.1), 
            0 0 3px rgba(0, 255, 0, 0.1), 
            0 0 3px rgba(0, 0, 255, 0.1);    
    }
    100% {
        text-shadow: 
            0 0 3px rgba(255, 220, 0, 0.75),
            0 0 3px rgba(255, 170, 0, 0.55);
    }
}

/* Product Visual (Right Column) */
.product-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(../images/products/gaming-pc.png); /* REPLACE with your actual image path or URL */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }


/* Button Container (Spans both columns) */
.button-container {
    grid-area: button;
    display: flex;
    justify-content: center; 
    margin-top: 40px; 
}

/* See Reviews Button Styling */
.see-reviews-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-reviews-button:hover {
    background-color: #9370DB;
}

.main-promo-bot {
    font-family: "Space Grotesk";
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.hero-content-container-bot {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/736x/f2/04/2c/f2042ce98e8fccbb9383535424e608b4.jpg');      
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.text-overlay-bot {
    position: absolute;
    bottom: 30px;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}

.text-overlay-bot h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

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



@media (min-width: 1400px) {
    .main-promo {
        max-width: 1500px;
    }

    .why-choose-us-section {
        max-width: 1500px;
    }

    .title-line-1 {
        font-size: 2rem; 
    }
    
    .benefits-layout {
        max-width: 1500px;
        gap: 50px;
    }

    .testimonials-section {
        max-width: 1400px;
    }
}

@media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .why-choose-us-section {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-line-1 {
        font-size: 2.8rem; 
    }

    .benefits-layout {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 80px auto;
    }

}

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 30px 40px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 40px;
    }

    .why-choose-us-section {
        padding: 0 30px;
        margin: 60px auto;
    }

    .content-container {
        padding-left: 30px;
    }

    .visual-container {
        min-height: 400px;
    }

    .testimonial-heading-1 {
        font-size: 42px;
    }

    .quote {
        font-size: 30px;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    

    .product-visual {
        min-height: 400px;
    }
}

/* Mobile (up to 768px) */
@media (max-width: 768px) {
    .main-promo {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
        margin-top: -150px;
    }

    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 20px 25px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 28px;
    }


    .why-choose-us-section {
        flex-direction: column;
        padding: 0 20px;
        margin: 40px auto;
        text-align: center;
    }

    .visual-container {
        width: 100%;
        min-height: 350px;
        margin-left: 0;
        margin-bottom: 30px;
        border-width: 8px;
    }

    .content-container {
        padding-left: 0;
        width: 100%;
    }

    .feature-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .feature-list li {
        font-size: 24px;
        line-height: 1.8;
        justify-content: center;
    }

    .feature-icon {
        font-size: 18px;
        margin-right: 10px;
    }

    .benefits-layout {
        font-size: 2rem;
        grid-template-columns: 1fr; /* Stack items vertically */

    }

    .benefit-card {
        min-width: 100%;
    }


    .card-description {
        font-size: 1.5rem;
    }

    .testimonials-section {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "content"
            "visual"
            "button";
        margin: 40px auto;
        padding: 20px;
    }

    .testimonial-content {
        padding-right: 0;
        text-align: center;
    }

    .testimonial-heading-1 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .quote {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .star-rating {
        text-align: center;
        font-size: 20px;
        margin-top: 40px;
    }

    .product-visual {
        min-height: 400px;
        border-width: 8px;
    }

    .button-container {
        margin-top: 20px;
    }

    .main-promo-bot {
        font-size: 2rem;
    }

    .hero-content-container-bot {
        max-width: 768px; /* Ensure it doesn't overflow */
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    .hero-content-container,
    .hero-content-container-bot {
        height: 500px;
        max-width: 100%;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 24px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 15px 20px;
    }


    .title-line-1 {
        font-size: 35px;
    }

    .feature-list li {
        font-size: 20px;
    }

    .testimonials-section {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }
    

    .testimonial-heading-1 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .quote {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .star-rating .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .product-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .testimonial-heading-1 {
        font-size: 24px;
    }

    .quote {
        font-size: 16px;
    }

    .product-visual {
        min-height: 250px;
    }
}



/* custom.html design by PRINCESS*/

.cspcb {
    background-color: #2f8d46;
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-repeat: repeat;
    -webkit-text-fill-color: transparent;
    margin-top: 20px;
    font-size: 80px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 1000;
    -webkit-font-smoothing: antialiased;
    animation: 3s anim-lineUp linear;
}
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-cspcb {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    text-align: center;
    color: white;
    max-width: 1000px;
    margin: 0 auto  3rem;
    line-height: 1.6;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* llllllll */

.projects-images{
    margin: 50px;
    display: inline-block;
}

.projects-img-card1 {
    --g: 4px;     /* the gap */
    --b: 12px;    /* border thickness*/
    --c: indigo; /* the color */
    max-width: 120%;
    height: 20vh;
    margin-block: 4rem;
    display: inline-block;
    align-content: center;
    
    padding: calc(var(--g) + var(--b));
    --_c: #0000 0 25%, var(--c) 0 50%;
    --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
    --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
    background:
    var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
    var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
    background-size: 200% var(--b),var(--b) 200%;
    cursor: pointer;
    filter: grayscale(50%);
    transition: .3s;
}

.projects-img-card1{
    row-gap: 20px; /* Gap between rows (vertical space) */
    column-gap: 10px; /* Optional: Gap between columns (horizontal space) */
}
.projects-img-card1:hover {
  --_p: 75%;
  filter: grayscale(0%);
  --c: #AC3838; /* new color */
}

.projects-img {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    display: block;
    align-content: center;
    width: 100%;

}

.projects-image-title{
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    margin-top: 15px;
}

/*================ CCTV DETAILS ==================*/

.cctv-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; 
    max-width: 2000px; 
    margin: 0px auto 0 auto;
}

.cctv-content-container {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(50, 0, 0, 0.9) 0%, rgba(150, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 100%),
    url('/images/services/cctv.jpg'); 
    background-size: cover;
    background-position: center;
    animation: fadeInUp 1.1s ease-out forwards;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.cctv-text-overlay {
    font-family: "Space Grotesk";
    position: absolute;
    bottom: 30px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
    animation: fadeInUp 0.7s ease-out forwards;
}

.cctv-text-overlay h1 {
    color: white;
    font-size: 64px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    
}

.security-section {
    padding: 20px 20px; 
    text-align: center; 
    width: 100%; 
    
}

.animate-on-scroll .security-section {
    opacity: 0;
    transform: translateY(20px);
}

.animate-on-scroll.is-visible .security-section {
    opacity: 1;
    transform: translateY(0);
}

.section-title {
    font-family: "Lexend"; 
    font-size: 58px; 
    font-weight: 500; 
    margin-bottom: 10px; 
    margin-top: 20px;
}

.section-text {
    font-family:"Space Grotesk"; 
    color: white;
    font-size: 28px;
    line-height: 1.6;
    max-width: 1300px; 
    margin: 10px auto; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 270px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 12px;
    }

    .cctv-text-overlay h1 {
        font-size: 21px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 22px;
    }

    .section-text {
        font-size: 12px;
        max-width: 100%;
        padding: 0 6px;
    }

    .security-section {
        padding: 10px 8px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 285px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 13px 14px;
    }

    .cctv-text-overlay h1 {
        font-size: 23px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 23px;
    }

    .section-text {
        font-size: 12.5px;
        max-width: 100%;
        padding: 0 6px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 300px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 14px 15px;
    }

    .cctv-text-overlay h1 {
        font-size: 25px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 24px;
    }

    .section-text {
        font-size: 13px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 310px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 15px 16px;
    }

    .cctv-text-overlay h1 {
        font-size: 26px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 25px;
    }

    .section-text {
        font-size: 13.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 400px) and (max-width: 412px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 325px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 16px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 28px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 26px;
    }

    .section-text {
        font-size: 14px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 330px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 17px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 29px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 27px;
    }

    .section-text {
        font-size: 14.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 340px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 18px 20px;
    }

    .cctv-text-overlay h1 {
        font-size: 30px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 28px;
    }

    .section-text {
        font-size: 15px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 380px;
        margin-bottom: 25px;
        margin-top: -125px;
    }

    .cctv-text-overlay {
        padding: 20px 25px;
    }

    .cctv-text-overlay h1 {
        font-size: 34px;
    }

    .section-title {
        font-size: 32px;
    }

    .section-text {
        font-size: 17px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 450px;
        margin-bottom: 30px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 25px 30px;
    }

    .cctv-text-overlay h1 {
        font-size: 42px;
    }

    .section-title {
        font-size: 38px;
    }

    .section-text {
        font-size: 20px;
        max-width: 100%;
        padding: 0 15px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 470px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 24px 34px;
    }

    .cctv-text-overlay h1 {
        font-size: 44px;
    }

    .section-title {
        font-size: 39px;
    }

    .section-text {
        font-size: 20.5px;
        max-width: 720px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 490px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 26px 36px;
    }

    .cctv-text-overlay h1 {
        font-size: 46px;
    }

    .section-title {
        font-size: 40px;
    }

    .section-text {
        font-size: 21px;
        max-width: 750px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 510px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 28px 38px;
    }

    .cctv-text-overlay h1 {
        font-size: 48px;
    }

    .section-title {
        font-size: 42px;
    }

    .section-text {
        font-size: 22px;
        max-width: 800px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 530px;
    }

    .cctv-text-overlay {
        padding: 30px 40px;
    }

    .cctv-text-overlay h1 {
        font-size: 50px;
    }

    .section-title {
        font-size: 44px;
    }

    .section-text {
        font-size: 23px;
        max-width: 850px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 550px;
        margin-top: -60px;
    }

    .cctv-text-overlay {
        padding: 30px 45px;
    }

    .cctv-text-overlay h1 {
        font-size: 52px;
    }

    .section-title {
        font-size: 46px;
    }

    .section-text {
        font-size: 24px;
        max-width: 900px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 600px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 35px 50px;
    }

    .cctv-text-overlay h1 {
        font-size: 60px;
    }

    .section-title {
        font-size: 54px;
    }

    .section-text {
        font-size: 26px;
        max-width: 1200px;
    }
}

/* CCTV VIDEO */

.cctv-video {
    position: relative;
    width: 100%; 
    max-width: 2000px; 
    height: 800px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: #000;
    padding-bottom: 30px;
    box-sizing: border-box;
}


#bgVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%); 
    object-fit: cover;
}


.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}


.hero-content-vid {
    position: relative;
    z-index: 3;
    margin-bottom: 0; 
}

.btn-find-out-more {
    font-family: "Lexend"; 
    display: inline-block;
    padding: 5px 40px;
    text-decoration: none;
    font-size: 20px;
    font-weight: light;
    color: #ffffff;
    border-radius: 30px;
    width: 298pxpx;
    height: 45pxpx;
    margin-bottom: 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: linear-gradient(88.78deg, #BA1022 0.07%, #EC0120 50%, #FD6A59 99.93%);
    border: none;
    cursor: pointer;
    animation: buttonEntrancee 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulsee 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes buttonEntrancee {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulsee {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}

.btn-find-out-more:hover {
    background: linear-gradient(to right, #e00000 0%, #222222 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.project-overview {
    margin-top: 60px;
    padding: 20px 20px;
    text-align: center;
}

.overview {
    font-family:"Space Grotesk";
    color: white;
    font-weight: 500;
    font-size: 64px;
    line-height: 1.6;
    margin: 0 auto;
}


@media (max-width: 1200px) {
    .cctv-video {
        /* Reduce height for a more compact presentation */
        height: 600px;
        /* Adjust margin */
        margin: 30px auto;
        /* Reduce bottom padding */
        padding-bottom: 20px;
    }

    .overview {
        /* Decrease the large font size for tablets */
        font-size: 48px;
    }
}


@media (max-width: 768px) {
    .cctv-video {
        /* Further reduce height for mobile viewports */
        height: 450px;
        margin: 20px auto;
        width: auto; /* Ensure no horizontal scroll is caused by margin */
    }

    .overview {
        /* Major decrease in font size for mobile */
        font-size: 36px;
        line-height: 1.4;
    }

    .btn-find-out-more {
        /* Adjust button dimensions and font size */
        font-size: 18px;
        padding: 8px 30px;
        /* Remove fixed width/height properties and rely on padding/content */
        width: auto;
        height: auto;
        margin-bottom: 10px;
    }

    .project-overview {
        /* Reduce padding */
        padding: 10px 10px;
    }
}


@media (max-width: 480px) {
    .cctv-video {
        width: auto;
        height: 350px;
        padding-bottom: 10px;
    }

    .overview {
        /* Smallest font size for main header text */
        font-size: 20px;
    }

    .btn-find-out-more {
        font-size: 16px;
        padding: 6px 20px;
        border-radius: 20px;
    }
}

/* CCTV DETAILS CARDS*/


/* NEW: Keyframe animation for fade-in and subtle rise */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(90px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NEW: Initial hidden state for the scroll animation targets */
.surveillance-carousel-container.hidden,
.navigation-dots-container.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: none; /* Temporarily disable transition for initial state */
}

/* NEW: Class to apply animation after scroll trigger */
.surveillance-carousel-container.scroll-animation,
.navigation-dots-container.scroll-animation {
    animation: fadeInUp 1.5s ease-out forwards; 
    /* Optional: Add a slight delay for the dots container for a staggered effect */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Restore any existing transition */
}

/* Add staggered effect for the dots container */
.navigation-dots-container.scroll-animation {
    animation-delay: 0.3s;
}

.surveillance-carousel-container {
    margin: 0 auto;
    width: 100%;
    padding: 50px 0;
    background-color: #000;
    overflow: hidden;
    position: relative;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s; 
}

.overview {
    /* ... existing styles ... */
    /* ADDED: Initial state for 'overview' text (optional, but good for consistent animation) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 0.8s ease-out;
}

/* NEW: Class to animate 'overview' text */
.overview.scroll-animation {
    opacity: 1;
    transform: translateY(0);
}


.carousel-viewport-wrapper {
    width: 100%;
    height: 600px;
    position: relative;
    perspective: 2000px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    user-select: none;
}

.carousel-viewport-wrapper.dragging {
    cursor: grabbing;
}

.rotating-carousel-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.surveillance-card-element {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    height: 560px;
    margin-left: -175px;
    margin-top: -280px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #222;
    cursor: pointer;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    user-select: none;
}

.card-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.gradient-info-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.location-title-text {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.description-snippet-text {
    font-family: "Lexend";
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.external-action-icon {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    pointer-events: all;
}

.external-action-icon:hover {
    opacity: 1;
}

.navigation-dots-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s;
}

.position-indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.5;
}

.position-indicator-dot.current-active {
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    opacity: 1;
}

/* Responsive breakpoints */
@media (max-width: 1400px) {
    .carousel-viewport-wrapper {
        height: 550px;
        perspective: 1800px;
    }
}

@media (max-width: 1200px) {
    .carousel-viewport-wrapper {
        height: 520px;
        perspective: 1600px;
    }

    .surveillance-card-element {
        width: 320px;
        height: 520px;
        margin-left: -160px;
        margin-top: -260px;
    }
}

@media (max-width: 1024px) {
    .carousel-viewport-wrapper {
        height: 500px;
        perspective: 1500px;
    }

    .surveillance-card-element {
        width: 300px;
        height: 500px;
        margin-left: -150px;
        margin-top: -250px;
    }

    .gradient-info-panel {
        padding: 18px;
        min-height: 150px;
    }

    .location-title-text {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .surveillance-carousel-container {
        padding: 60px 0;
    }

    .carousel-viewport-wrapper {
        height: 450px;
        perspective: 1200px;
    }

    .surveillance-card-element {
        width: 260px;
        height: 420px;
        margin-left: -130px;
        margin-top: -210px;
    }

    .gradient-info-panel {
        padding: 15px;
        min-height: 130px;
    }

    .location-title-text {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .description-snippet-text {
        font-size: 9px;
        margin-bottom: 8px;
    }

    .navigation-dots-container {
        margin-top: 40px;
        gap: 15px;
    }

    .position-indicator-dot {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 640px) {
    .carousel-viewport-wrapper {
        height: 420px;
        perspective: 1100px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }
}

@media (max-width: 480px) {
    .surveillance-carousel-container {
        padding: 40px 0;
    }

    .carousel-viewport-wrapper {
        height: 380px;
        perspective: 1000px;
    }

    .surveillance-card-element {
        width: 220px;
        height: 350px;
        margin-left: -110px;
        margin-top: -175px;
    }

    .gradient-info-panel {
        padding: 12px;
        min-height: 110px;
    }

    .location-title-text {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .description-snippet-text {
        font-size: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 6px;
    }

    .external-action-icon svg {
        width: 20px;
        height: 20px;
    }

    .navigation-dots-container {
        margin-top: 30px;
        gap: 12px;
    }

    .position-indicator-dot {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 375px) {
    .carousel-viewport-wrapper {
        height: 350px;
    }

    .surveillance-card-element {
        width: 200px;
        height: 320px;
        margin-left: -100px;
        margin-top: -160px;
    }

    .location-title-text {
        font-size: 12px;
    }

    .description-snippet-text {
        font-size: 7.5px;
    }

    .external-action-icon {
        display: none;
    }
}

@media (max-width: 320px) {
    .carousel-viewport-wrapper {
        height: 320px;
    }

    .surveillance-card-element {
        width: 180px;
        height: 290px;
        margin-left: -90px;
        margin-top: -145px;
    }

    .gradient-info-panel {
        padding: 10px;
        min-height: 90px;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .surveillance-carousel-container {
        padding: 30px 0;
    }

    .carousel-viewport-wrapper {
        height: 400px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }

    .navigation-dots-container {
        margin-top: 25px;
    }
}


.item-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.slider-item:not(.active) .item-content-overlay {
    opacity: 0.96;
}

.item-heading {
    font-family: "Space Grotesk";
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.item-text {
    font-family: "Space Grotesk";
    font-size: 10px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.item-external-link {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.item-external-link:hover {
    opacity: 1;
}

.slider-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
}

.indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.indicator-dot.active {
    background-color:linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    border-color: #ff0000;
}

@media (max-width: 1024px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-item:not(.active) {
        width: 200px;
        height: 350px;
        margin: 0 10px;
    }
    .slider-item.active {
        justify-content: center;
        width: 300px;
        height: 500px;
        margin: 0 20px;
    }
    .item-heading {
        font-size: 1.1em;
    }
    .item-text {
        font-size: 0.85em;
    }
    .slider-track {
        padding: 0 5%;
    }
}

@media (max-width: 768px) {
    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 150px;
        height: 280px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.8);
    }
    .slider-item.active {
        width: 250px;
        height: 400px;
        margin: 0 10px;
    }
    .item-content-overlay {
        padding: 15px;
        min-height: 120px;
    }
    .item-heading {
        font-size: 1em;
    }
    .item-text {
        font-size: 0.8em;
    }
    .slider-track {
        padding: 0 2%;
    }
}

@media (max-width: 480px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-track {
        justify-content: flex-start;
        padding: 0 20px;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 100px;
        height: 180px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.7);
    }
    .slider-item.active {
        width: 280px;
        height: 450px;
        margin: 0 10px;
    }
    .item-heading {
        font-size: 0.9em;
    }
    .item-text {
        font-size: 0.75em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .item-external-link {
        display: none;
    }
}

/* CCTV FLASHCARDS */

.ui-main-panel {
    margin: 80px auto;
    width: 100%;     
    width: 1700px;
    height: 600px;
    padding: 20px;
    background: linear-gradient(180deg, #D9D9D9 0%, #737373 100%);
    border-radius: 50px;
    border: 5px solid;
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    overflow: hidden; 
}

.panel-text-module {
    padding: 20px 0 20px 100px;
}

.panel-text-module p {
    font-family: "Space Grotesk";
    color: #ffffff;
    font-size: 32px;
    line-height: 1.6;
    width: 950px;

}

.surveillance-slider-zone {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-stack-viewport {
    position: relative;
    width: 50px; 
    height: 380px;
}

.security-image-card {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 280px;
    height: 380px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    cursor: pointer; 
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); 

    /* Initial hidden/back position for all cards */
    transform: translate(-50%, -50%) translate3d(0, 0, -200px) rotateY(0deg) scale(0.8);
    opacity: 0;
    z-index: 0;
}

.security-image-card[data-index="0"] { background-image: url('/images/services/PASIG-THREELIGHTS-2.jpg'); } 
.security-image-card[data-index="1"] { background-image: url('/images/services/BENJAMIN-CAMERINO-2.jpg'); }
.security-image-card[data-index="2"] { background-image: url('/images/services/BJMP-Teresa-\ District-JAIL-2.jpg'); }
.security-image-card[data-index="3"] { background-image: url('/images/services/RON-GONZALES-2.jpg'); }


.security-image-card.card--active {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
    z-index: 100;
    cursor: pointer;
}


.security-image-card.card--stacked-1 {
    transform: translate(-50%, -50%) translate3d(-10px, 10px, -20px) rotate(-3deg);
    opacity: 1;
    z-index: 9;
    filter: brightness(0.8);
    cursor: default;
}

.security-image-card.card--stacked-2 {
    transform: translate(-50%, -50%) translate3d(-20px, 20px, -40px) rotate(-6deg);
    opacity: 1;
    z-index: 8;
    filter: brightness(0.7);
    cursor: default;
}

.security-image-card.card--stacked-3 {
    transform: translate(-50%, -50%) translate3d(-30px, 30px, -60px) rotate(-9deg);
    opacity: 1;
    z-index: 7;
    filter: brightness(0.6);
    cursor: default;
}


.security-image-card.card--slide-out {
    transform: translate(-50%, -50%) translate3d(100px, 0, 0) rotate(5deg) scale(0.9);
    opacity: 0;
    z-index: 11; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .ui-main-panel {
        width: 95%;
        height: 550px;
        margin: 15px auto;
        padding: 8px;
        border-radius: 20px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 8px;
        text-align: center;
        margin-bottom: -40px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 280px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 150px;
        height: 200px;
    }

    .security-image-card {
        width: 160px;
        height: 230px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .ui-main-panel {
        width: 95%;
        min-height: 580px;
        margin: 16px auto;
        padding: 9px;
        border-radius: 22px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 290px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 220px;
        height: 260px;
    }

    .security-image-card {
        width: 170px;
        height: 240px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .ui-main-panel {
        width: 95%;
        min-height: 620px;
        margin: 20px auto;
        padding: 9px;
        border-radius: 24px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -50px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 270px;
        width: 100%;
        margin-left: 20px;
    }

    .card-stack-viewport {
        width: 230px;
        height: 270px;
    }

    .security-image-card {
        width: 180px;
        height: 230px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 18px auto;
        padding: 10px;
        border-radius: 25px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 16.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 310px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 240px;
        height: 280px;
    }

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

@media (min-width: 400px) and (max-width: 412px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 26px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 320px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 250px;
        height: 290px;
    }

    .security-image-card {
        width: 200px;
        height: 270px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 27px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 17.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 325px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 255px;
        height: 295px;
    }

    .security-image-card {
        width: 205px;
        height: 275px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 20px auto;
        padding: 10px;
        border-radius: 28px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 18px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 330px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 260px;
        height: 300px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 22px auto;
        padding: 12px;
        border-radius: 30px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 12px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 19px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 350px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 280px;
        height: 320px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 28px auto;
        padding: 15px;
        border-radius: 38px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 18px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 23px;
        line-height: 1.55;
        width: 100%;
        margin-bottom: -20px;
    }

    .surveillance-slider-zone {
        height: 380px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 290px;
        height: 340px;
    }

    .security-image-card {
        width: 235px;
        height: 320px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 30px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 390px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 295px;
        height: 345px;
    }

    .security-image-card {
        width: 238px;
        height: 325px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .ui-main-panel {
        width: 95%;
        min-height: 790px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 20px 35px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 395px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 298px;
        height: 348px;
    }

    .security-image-card {
        width: 240px;
        height: 328px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .ui-main-panel {
        width: 95%;
        min-height: 850px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 40px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 400px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 300px;
        height: 350px;
    }

    .security-image-card {
        width: 290px;
        height: 380px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 820px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .panel-text-module {
        padding: 20px 45px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 410px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 305px;
        height: 355px;
    }

    .security-image-card {
        width: 245px;
        height: 335px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 850px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 50px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 415px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 308px;
        height: 358px;
    }

    .security-image-card {
        width: 298px;
        height: 388px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .ui-main-panel {
        width: 95%;
        height: 580px;
        margin: 60px auto;
        padding: 18px;
        border-radius: 45px;
        border-width: 5px;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .panel-text-module {
        padding: 20px 0 20px 70px;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: auto;
        width: 100%;
    }

    .card-stack-viewport {
        width: 350px;
        height: 400px;
    }

    .security-image-card {
        margin-top: 10px;
        margin-left: 10px;
        width: 290px;
        height: 390px;
    }

}

/* ====================== End ======================= */

/* PC BUILD DETAILS */

.pc-project-container {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #000; 
    color: #fff;
    overflow-x: hidden;
    box-sizing: border-box;
}

.top-section {
    position: relative;
    width: 100%;
    height: 650px;
    margin: 0;
    padding: 0;
    background-color: #222; 
    background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
    box-sizing: border-box;
    animation: fadeIn 1s ease-out, subtleZoom 20s ease-in-out infinite alternate;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes subtleZoom {
    from {
        background-size: 100%;
    }
    to {
        background-size: 105%;
    }
}

.bottom-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
    background-color: #000; 
    text-align: center;
    box-sizing: border-box;
    animation: fadeInUp 1s ease-out 0.3s both;
}

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

.pc-cases-row {
    position: relative;
    width: 100%;
    max-width: 2500px;
    margin: clamp(-100px, -15vh, -200px) auto 0;
    display: flex;
    justify-content: center; 
    align-items: flex-end; 
    z-index: 100;
    padding: 0 clamp(15px, 3vw, 40px);
    box-sizing: border-box;
    animation: slideUp 1.2s ease-out 0.5s both;
}

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

.pc-case-image {
    width: 100%; 
    height: auto;
    max-width: 100%;
    min-height: clamp(150px, 25vh, 300px);
    max-height: clamp(250px, 40vh, 520px);
    object-fit: contain;
    object-position: center bottom;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.pc-case-image:hover {
    transform: scale(1.05) translateY(-10px);
    filter: brightness(1.1);
}

.caption {
    margin: clamp(20px, 3vh, 50px) 0 0;
    padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
    z-index: 20;
    box-sizing: border-box;
    animation: fadeIn 1s ease-out 0.8s both;
}

.caption p {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(16px, 3.5vw, 32px);
    font-weight: 400;
    margin-top: 20px;
    padding: 0;
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    line-height: 1.4;
}

.sr-title {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto 50px;
    padding: 0 clamp(15px, 3vw, 30px);
    box-sizing: border-box;
}

.member-shop h1 {
    text-align: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 7vw, 64px);
    margin: clamp(20px, 4vh, 40px) 0;
    padding: 0 clamp(15px, 3vw, 30px);
    line-height: 1.2;
    box-sizing: border-box;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Universal box-sizing */
* {
    box-sizing: border-box;
}

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
    .top-section {
        height: clamp(250px, 35vh, 300px);
        background-position: center;
        box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        animation: subtlePulse 8s ease-in-out infinite;
    }
    
    .pc-cases-row {
        margin-top: clamp(-150px, -15vh, -100px);
        padding: 0 10px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 500px;
        animation: floatIn 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(30px);
    }
    
    .pc-case-image:nth-child(1) {
        animation-delay: 0.2s;
    }
    
    .pc-case-image:nth-child(2) {
        animation-delay: 0.4s;
    }
    
    .pc-case-image:nth-child(3) {
        animation-delay: 0.6s;
    }
    
    .bottom-section {
        padding: 15px 10px;
        animation: fadeInUp 1s ease-out 0.8s forwards;
        opacity: 0;
    }
    
    .caption {
        margin-top: clamp(15px, 2vh, 30px);
        padding: 10px 15px;
        animation: slideInLeft 0.6s ease-out 1.2s forwards;
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .member-shop h1 {
        margin: 15px 0;
        padding: 0 10px;
        animation: fadeInScale 0.7s ease-out 0.3s forwards;
        opacity: 0;
        transform: scale(0.9);
    }
    
    /* Keyframe animations */
    @keyframes floatIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInLeft {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes fadeInScale {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes subtlePulse {
        0%, 100% {
            box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        }
        50% {
            box-shadow: inset 50px 50px 120px rgba(100, 0, 150, 0.5);
        }
    }
}
/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
    .top-section {
        height: clamp(300px, 45vh, 500px);
        background-position: top center;
        box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-90px, -14vh, -130px);
        padding: 0 15px;
    }
    
    .pc-case-image {
        min-height: 150px;
        max-height: 250px;
    }
    
    .bottom-section {
        padding: 20px 15px;
    }
    
    .caption {
        margin-top: clamp(18px, 2.5vh, 35px);
        padding: 12px 20px;
    }
    
    .member-shop h1 {
        margin: 20px 0;
        padding: 0 15px;
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    .top-section {
        height: clamp(400px, 55vh, 650px);
        box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-130px, -18vh, -180px);
        padding: 0 20px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 350px;
    }
    
    .bottom-section {
        padding: 25px 20px;
    }
    
    .caption {
        margin-top: clamp(25px, 3vh, 40px);
        padding: 15px 25px;
    }
    
    .member-shop h1 {
        margin: 25px 0;
        padding: 0 20px;
    }
}

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .top-section {
        height: clamp(500px, 65vh, 750px);
        box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-180px, -25vh, -250px);
        padding: 0 30px;
    }
    
    .pc-case-image {
        min-height: 280px;
        max-height: 450px;
    }
    
    .bottom-section {
        padding: 30px 25px;
    }
    
    .caption {
        margin-top: clamp(30px, 3.5vh, 45px);
        padding: 18px 30px;
    }
    
    .member-shop h1 {
        margin: 30px 0;
        padding: 0 25px;
    }
}

/* Extra large devices (large desktops) */
@media (min-width: 1440px) {
    .top-section {
        height: clamp(600px, 70vh, 800px);
        box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-220px, -30vh, -300px);
        padding: 0 40px;
    }
    
    .pc-case-image {
        min-height: 350px;
        max-height: 520px;
    }
    
    .bottom-section {
        padding: 35px 30px;
    }
    
    .caption {
        margin-top: clamp(35px, 4vh, 50px);
        padding: 20px 35px;
    }
    
    .member-shop h1 {
        margin: 35px 0;
        padding: 0 30px;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .pc-case-image {
        max-height: 600px;
    }
    
    .bottom-section {
        padding: 40px 40px;
    }
    
    .caption {
        padding: 25px 40px;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    .top-section {
        height: 60vh;
    }
    
    .pc-cases-row {
        margin-top: -20vh;
        padding: 0 clamp(10px, 2vw, 20px);
    }
    
    .pc-case-image {
        max-height: 35vh;
        min-height: 25vh;
    }
    
    .bottom-section {
        padding: 15px clamp(10px, 2vw, 20px);
    }
    
    .caption {
        margin-top: 15px;
        padding: 10px 15px;
    }
}

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
    .top-section {
        height: 50vh;
    }
    
    .pc-cases-row {
        margin-top: -15vh;
        padding: 0 10px;
    }
    
    .pc-case-image {
        max-height: 30vh;
        min-height: 20vh;
    }
    
    .bottom-section {
        padding: 10px 15px;
    }
    
    .caption {
        margin-top: 10px;
        padding: 8px 15px;
    }
    
    .member-shop h1 {
        margin: 10px 0;
    }
}

/* OVERVIEW */


.main-wrapper {
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            background-color: #000; 
            color: #fff;
            overflow-x: hidden;
            box-sizing: border-box;
        }

.hero-banner {
            position: relative;
            width: 100%;
            height: clamp(300px, 50vh, 800px);
            margin: 0;
            padding: 0;
            background-color: #222; 
            background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
            box-sizing: border-box;
        }

.footer-area {
            position: relative;
            width: 100%;
            margin: 0;
            padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
            background-color: #000; 
            text-align: center;
            box-sizing: border-box;
        }

.showcase-grid {
            position: relative;
            width: 100%;
            max-width: 2500px;
            margin: clamp(-100px, -15vh, -200px) auto 0;
            display: flex;
            justify-content: center; 
            align-items: flex-end; 
            z-index: 100;
            padding: 0 clamp(15px, 3vw, 40px);
            box-sizing: border-box;
        }

.featured-img {
            width: 100%; 
            height: auto;
            max-width: 100%;
            min-height: clamp(150px, 25vh, 300px);
            max-height: clamp(250px, 40vh, 520px);
            object-fit: contain;
            object-position: center bottom;
            display: block;
            margin: 0;
            padding: 0;
        }

.text-overlay {
            margin: clamp(20px, 3vh, 50px) 0 0;
            padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
            z-index: 20;
            box-sizing: border-box;
        }

.text-overlay p {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(16px, 3.5vw, 32px);
            font-weight: 400;
            margin: 0;
            padding: 0;
            letter-spacing: clamp(0.5px, 0.1vw, 1px);
            line-height: 1.4;
        }

.heading-wrapper {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(15px, 3vw, 30px);
            box-sizing: border-box;
        }

.store-header h1 {
            text-align: center;
            color: white;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(28px, 7vw, 64px);
            margin: clamp(20px, 4vh, 40px) 0;
            padding: 0 clamp(15px, 3vw, 30px);
            line-height: 1.2;
            box-sizing: border-box;
        }

/* OVERVIEW */
.page-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
        }

        /* Row 1 - Hero Section */
.intro-section {
            font-family: "Space Grotesk", sans-serif;
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 30px);
            padding: clamp(20px, 4vw, 60px);
            min-height: 0;
        }

.intro-section h1 {
            grid-column: 1 / -1;
            font-size: clamp(28px, 6vw, 60px);
            font-weight: 700;
            margin: 0 auto;
            text-align: center;
            line-height: 1.2;
        }

.intro-section p {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            font-size: clamp(16px, 2.5vw, 32px);
            font-weight: 400;
            line-height: 1.6;
            color: white;
            padding: 0 clamp(10px, 2vw, 20px);
        }

/* Row 2, 3, 4, 5 - Content Sections */
.flex-section {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

.text-block {
            padding: clamp(25px, 5vw, 80px) clamp(20px, 4vw, 60px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            order: 1;
        }

.visual-block {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            min-height: clamp(250px, 40vh, 450px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            order: 2;
            width: 100%;
        }

.visual-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

.text-block h2 {
            font-size: clamp(28px, 5vw, 64px);
            margin-bottom: clamp(15px, 3vw, 25px);
            line-height: 1.2;
            width: 100%;
            padding-bottom: 1rem;
        }

.text-block p {
            font-size: clamp(14px, 2.2vw, 28px);
            font-weight: 400;
            line-height: 1.7;
            color: white;
            margin-bottom: clamp(20px, 4vw, 30px);
            max-width: 800px;
        }

.action-btn {
        text-decoration: none;
        color: white;
        font-size: 18px;
        font-weight: 500;
        padding: 15px 70px;
        border-radius: 70px;
        border: 1px solid #7B54B1;
        margin-top: 30px;
        background: linear-gradient(to right, rgba(168, 85, 247, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
        background-repeat: no-repeat;
        background-size: 80%;
        animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.action-btn:hover {
            transform: translateY(-2px);
            background-color: #a855f7;
        }

.action-btn:active {
            transform: translateY(0);
        }

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
            .hero-banner {
                height: clamp(250px, 35vh, 300px);
                background-position: center;
                box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-150px, -15vh, -100px);
                padding: 0 10px;
            }
            
            .featured-img {
                min-height: 120px;
                max-height: 200px;
            }
            
            .footer-area {
                padding: 15px 10px;
            }
            
            .text-overlay {
                margin-top: clamp(15px, 2vh, 30px);
                padding: 10px 15px;
            }
            
            .store-header h1 {
                margin: 15px 0;
                padding: 0 10px;
            }
        }

/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
            .hero-banner {
                height: clamp(300px, 45vh, 500px);
                background-position: top center;
                box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-90px, -14vh, -130px);
                padding: 0 15px;
            }
            
            .featured-img {
                min-height: 150px;
                max-height: 250px;
            }
            
            .footer-area {
                padding: 20px 15px;
            }
            
            .text-overlay {
                margin-top: clamp(18px, 2.5vh, 35px);
                padding: 12px 20px;
            }
            
            .store-header h1 {
                margin: 20px 0;
                padding: 0 15px;
            }
        }

/* Medium devices (tablets) */
@media (min-width: 768px) {
            .intro-section {
                gap: clamp(20px, 3vw, 30px);
                padding: clamp(30px, 5vw, 80px);
            }

            .intro-section p {
                width: 85%;
                font-size: clamp(18px, 2.8vw, 34px);
            }

            .text-block {
                padding: clamp(35px, 6vw, 70px) clamp(25px, 5vw, 50px);
            }

            .visual-block {
                min-height: clamp(300px, 45vh, 500px);
            }

            .action-btn {
                max-width: 300px;
                min-height: 52px;
            }
        }

@media (min-width: 768px) and (max-width: 1023px) {
            .hero-banner {
                height: clamp(400px, 55vh, 650px);
                box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-130px, -18vh, -180px);
                padding: 0 20px;
            }
            
            .featured-img {
                min-height: 200px;
                max-height: 350px;
            }
            
            .footer-area {
                padding: 25px 20px;
            }
            
            .text-overlay {
                margin-top: clamp(25px, 3vh, 40px);
                padding: 15px 25px;
            }
            
            .store-header h1 {
                margin: 25px 0;
                padding: 0 20px;
            }
        }

/* Desktop Breakpoint (1024px and up) */
@media (min-width: 1024px) {
            .intro-section {
                grid-template-columns: repeat(2, 1fr);
                align-items: center;
                padding: clamp(40px, 6vw, 100px);
            }

            .intro-section h1 {
                text-align: left;
                font-size: clamp(36px, 5vw, 60px);
            }

            .intro-section p {
                width: 100%;
                text-align: left;
                padding-left: 0;
                font-size: clamp(20px, 2.2vw, 32px);
            }

            .flex-section {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                min-height: clamp(450px, 55vh, 650px);
            }

            .text-block {
                text-align: left;
                align-items: flex-start;
                padding: clamp(50px, 7vw, 90px) clamp(40px, 6vw, 80px);
                order: 1;
            }

            .text-block h2 {
                text-align: left;
                font-size: clamp(32px, 4.5vw, 64px);
            }

            .text-block p {
                font-size: clamp(16px, 2vw, 28px);
            }

            .visual-block {
                min-height: 100%;
                order: 2;
            }

            /* Alternate layout for odd rows (content left, image right) */
            .flex-section:nth-child(odd) .text-block {
                order: 1;
            }

            .flex-section:nth-child(odd) .visual-block {
                order: 2;
            }

            /* Even rows (image left, content right) */
            .flex-section:nth-child(even) .text-block {
                order: 2;
            }

            .flex-section:nth-child(even) .visual-block {
                order: 1;
            }

            .action-btn {
                max-width: 320px;
                width: auto;
                min-height: 54px;
            }
        }

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
            .hero-banner {
                height: clamp(500px, 65vh, 750px);
                box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-180px, -25vh, -250px);
                padding: 0 30px;
            }
            
            .featured-img {
                min-height: 280px;
                max-height: 450px;
            }
            
            .footer-area {
                padding: 30px 25px;
            }
            
            .text-overlay {
                margin-top: clamp(30px, 3.5vh, 45px);
                padding: 18px 30px;
            }
            
            .store-header h1 {
                margin: 30px 0;
                padding: 0 25px;
            }
        }

/* Large Desktop Breakpoint (1440px and up) */
@media (min-width: 1440px) {
            .page-wrapper {
                max-width: 1920px;
                margin: 0 auto;
            }

            .text-block p {
                font-size: clamp(18px, 1.5vw, 28px);
            }

            .hero-banner {
                height: clamp(600px, 70vh, 800px);
                box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-220px, -30vh, -300px);
                padding: 0 40px;
            }
            
            .featured-img {
                min-height: 350px;
                max-height: 520px;
            }
            
            .footer-area {
                padding: 35px 30px;
            }
            
            .text-overlay {
                margin-top: clamp(35px, 4vh, 50px);
                padding: 20px 35px;
            }
            
            .store-header h1 {
                margin: 35px 0;
                padding: 0 30px;
            }
        }

/* Ultra-wide screens (1920px and up) */
@media (min-width: 1920px) {
            .intro-section h1 {
                font-size: 64px;
            }

            .intro-section p {
                font-size: 32px;
            }

            .text-block h2 {
                font-size: 64px;
            }

            .text-block p {
                font-size: 28px;
            }

            .featured-img {
                max-height: 600px;
            }
            
            .footer-area {
                padding: 40px 40px;
            }
            
            .text-overlay {
                padding: 25px 40px;
            }
        }

/* Small Mobile Optimization (max 375px) */
@media (max-width: 375px) {
            .intro-section {
                gap: 12px;
            }

            .text-block {
                padding: clamp(20px, 5vw, 30px) clamp(15px, 4vw, 20px);
            }

            .visual-block {
                min-height: clamp(200px, 35vh, 300px);
            }

            .action-btn {
                min-height: 42px;
                font-size: 13px;
            }
        }

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
            .hero-banner {
                height: 60vh;
            }
            
            .showcase-grid {
                margin-top: -20vh;
                padding: 0 clamp(10px, 2vw, 20px);
            }
            
            .featured-img {
                max-height: 35vh;
                min-height: 25vh;
            }
            
            .footer-area {
                padding: 15px clamp(10px, 2vw, 20px);
            }
            
            .text-overlay {
                margin-top: 15px;
                padding: 10px 15px;
            }

            .visual-block {
                min-height: 70vh;
            }
            
            .text-block {
                padding: clamp(20px, 4vh, 40px) clamp(20px, 4vw, 60px);
            }
        }

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
            .hero-banner {
                height: 50vh;
            }
            
            .showcase-grid {
                margin-top: -15vh;
                padding: 0 10px;
            }
            
            .featured-img {
                max-height: 30vh;
                min-height: 20vh;
            }
            
            .footer-area {
                padding: 10px 15px;
            }
            
            .text-overlay {
                margin-top: 10px;
                padding: 8px 15px;
            }
            
            .store-header h1 {
                margin: 10px 0;
            }
        }

/* Print styles */
@media print {
            .action-btn {
                background: #6d28d9;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }

/*FDAS PAGE BY PCESS*/
/*FDAS PAGE BY PCESS*/


.top-feature-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-hero-wrapper {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('/images/services/FDAS2.jpg');
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    z-index: 1;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,    /* Top is transparent */
        transparent 50%,   /* Transparent up to halfway */
        rgba(0, 0, 0, 0.3) 60%,  /* Start fading in at halfway */
        rgba(0, 0, 0, 0.8) 80%,  /* Darker at bottom */
        black 100%        /* Fully visible at bottom */
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 60%,
        rgba(0, 0, 0, 0.8) 80%,
        black 100%
    );
}

.header-text-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 60px;
    width: 100%;
    text-align: center;
    animation: fadeInLeft 1.5s ease-out;
    z-index: 2;
}

.fade-right {
    display: inline-block;
    animation: fadeInRight 1.5s ease-out;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(0);
    }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.header-text-layer h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}

.view-details-btn {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 20px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.view-details-btn:hover {
    background-color: #FF4500;
}

.selection-criteria-block {
    display: flex;
    align-items: center;
    max-width: 1350px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
   
    .selection-criteria-block.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .selection-criteria-block.animate-visible {
        animation: 2s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* Left Column - Visual Container */
.image-display-area {
    flex: 1;
    min-height: 500px;
    background-image: url("https://i.pinimg.com/736x/64/f7/28/64f728aaf40516331f0f6487c786662f.jpg");
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

.image-display-area:hover {
    /* Apply Gradient Border on Hover */
    border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
}

.selection-criteria-block:nth-child(2) .image-display-area {
    background-image: url("https://i.pinimg.com/736x/64/8f/15/8f15c8d3e4c5a4b8c9e1a4e5e.jpg");
}

.selection-criteria-block:nth-child(2) .image-display-area:hover {
    border-image: linear-gradient(90deg, #FF4500 0%, #FF6347 50%, #FF8C00 100%) 1;
}

/* Right Column - Content Container */
.info-details-box {
    flex: 1;
    padding-left: 70px;
}

@keyframes glow-fire {
    from {
        text-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
    }
    to {
        text-shadow: 0 0 30px rgba(255, 69, 0, 0.8), 0 0 40px rgba(255, 140, 0, 0.6);
    }
}


/* Title Styling */
.title-first-line {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: 0%;
}


/* Feature List Styling */
.key-advantages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.key-advantages-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.key-advantages-list li:hover{
    transform: translateY(-5px) scale(1.05);
}


.item-icon-style {
    font-size: 20px;
    margin-right: 15px;
    color: white;
    transform: rotate(-15deg);
}

.item-icon-style:hover {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}


.value-proposition-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 30px 20px;
    margin: auto;
}


.value-card-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-display-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}



.card-text-content {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.customer-feedback-module {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "content visual"
        "button button";
   
    gap: 10px; 
    max-width: 1000px; 
    margin: 20px auto; 
    padding: 0 10px; 
    align-items: start;

}

    .customer-feedback-module.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .customer-feedback-module.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }


.feedback-text-area {
    grid-area: content;
    padding-right: 20px;
    
}

.feedback-header-one {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.client-quote-text {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.rating-stars-container .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    
    
    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .rating-stars-container :hover {
        transform: translateY(-5px) scale(1.05);
    }


/* Product Visual (Right Column) */
.item-showcase-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(https://i.pinimg.com/736x/08/ad/46/08ad464419417d928e8cb3ae47dd8219.jpg);
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .item-showcase-visual:hover {
        /* 1. Revert to Color on Hover */
        
        /* 2. Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
    }

/* Button Container (Spans both columns) */
.call-to-action-wrapper {
    grid-area: button;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* See Reviews Button Styling */
.reviews-link-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.reviews-link-button:hover {
    background-color: #FF4500;
}

.bottom-promo-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.secondary-hero-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('https://i.pinimg.com/736x/fc/c4/28/fcc4281f495dd945fb8261ef33f0afcf.jpg');      
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%); /* Become fully transparent (bottom fade-out) */
    overflow: hidden;   
}

.bottom-text-layer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
}

.bottom-text-layer h1 {
    color: white;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-style: Bold;
    font-size: 36px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}


.link-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    border: 4px solid #fff;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.2s, color 0.3s;
    background-color: transparent;
}

.link-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    color: #fff;
}

.link-action-btn .fas {
    margin-left: 10px;
    font-size: 0.9em;
    transition: margin-left 0.3s;
}

.link-action-btn:hover .fas {
    margin-left: 15px;
}

/* FDAS RESPONSIVE DESIGN */

    @media (min-width: 1400px) {
    .top-feature-area {
        max-width: 1500px;
    }

    .selection-criteria-block {
        max-width: 1500px;
    }
    
    .value-proposition-grid {
        max-width: 1500px;
        gap: 50px;
    }

    .customer-feedback-module {
        max-width: 1400px;
    }
}


    @media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .selection-criteria-block {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-first-line {
        font-size: 2.8rem; 
    }
    
    /* Ensure the grid columns are spacious */
    .value-proposition-grid {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 30px auto;
    }
}


/* 🚀 LARGE SCREEN RESPONSIVENESS (Desktops: min-width: 1025px) */
@media (min-width: 1025px) {

    /* BOTTOM PROMO STRIP */
    .secondary-hero-wrapper {
        /* Increase height of the hero strip */
        height: 550px;
    }
    
    .bottom-text-layer {
        /* Adjust padding for larger viewports */
        padding: 50px 80px;
    }

    .bottom-text-layer h1 {
        /* Increase main heading size */
        font-size: 64px;
    }
}



    @media(max-width: 768px) {

        /* top feature area */
        .top-feature-area {
            width: 100%; /* Change from max-width */
            max-width: 100%; /* Ensure it doesn't overflow */
            margin-top: -150px;
        }

        /* PRIMARY HERO WRAPPER - Fix mobile overflow */
        .primary-hero-wrapper {
            width: 100% !important; /* Override 127% width on mobile */
            height: 450px; /* Adjust height for mobile */
        }

        /* Hero text adjustments for mobile */
        .header-text-layer {
            padding: 20px 30px;
            transform: translate(-50%, -60%); /* Elevate the text position even more */
        }

        .header-text-layer h1 {
            font-size: 28px; /* Smaller font for mobile */
            line-height: 1.1;
        }

        /* SELECTION CRITERIA BOX */
        .selection-criteria-block {
            flex-direction: column;
            padding: 0 20px;
            margin: 40px auto;
        }

        .image-display-area {
            width: 100%;
            min-height: 350px;
            margin-left: 0;
            margin-bottom: 30px;
            border-width: 8px;
        }

        .info-details-box {
            width: 100%;
            padding-left: 0;
            text-align: center;
        }

        .title-first-line {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .key-advantages-list li {
            font-size: 24px;
            line-height: 1.8;
            justify-content: center;
        }

        .item-icon-style {
            font-size: 18px;
            margin-right: 10px;
        }
    

        /*value-proposition grid */
        .value-proposition-grid {
            font-size: 2rem;
            grid-template-columns: 1fr; /* Stack items vertically */
        }

            .card-text-content{
                font-size: 1.5rem;
            }


        /* bottom promo strip */
        .bottom-promo-strip{
            font-size: 2rem;
        }
                    
        .secondary-hero-wrapper {
            max-width: 768px; /* Ensure it doesn't overflow */
        }

    }

    @media (min-width: 577px) and (max-width: 1024px) {
        /* PRIMARY HERO SECTION */
        .primary-hero-wrapper {
            height: 500px;
        }

        .header-text-layer {
            padding: 30px 40px;
        }

        .header-text-layer h1 {
            font-size: 38px;
        }

        /* SELECTION CRITERIA BLOCK */
        .selection-criteria-block {
            /* Keep them side-by-side but allow wrapping if needed */
            flex-direction: row; 
            flex-wrap: wrap; 
            padding: 0 30px; 
        }
        
        .image-display-area {
            min-height: 400px; 
        }

        .info-details-box {
            padding-left: 50px;
        }

        .title-first-line {
            font-size: 35px;
        }

        .key-advantages-list li {
            font-size: 20px;
        }
        
        /* VALUE PROPOSITION GRID */
        .value-proposition-grid {
            /* Cards may wrap to the next line */
            gap: 30px;
            padding: 25px 30px;
            justify-content: center;
        }
        
        .value-card-element {
            min-width: 300px; /* Give them more space than on mobile */
        }


        /* BOTTOM PROMO STRIP */
        .secondary-hero-wrapper {
            height: 450px;
        }
        
        .bottom-text-layer {
            padding: 30px 40px;
        }

        .bottom-text-layer h1 {
            font-size: 40px;
        }
    }



    @media (max-width: 768px) {
    .customer-feedback-module {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "visual"
            "button";
        margin: 40px auto;
        gap: 20px;
    }

    .feedback-text-area {
        padding-right: 0;
        text-align: center;
    }

    .feedback-header-one {
        font-size: 36px;
    }

    .client-quote-text {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .rating-stars-container .fas {
        font-size: 20px;
        margin-top: 15px;
    }

    .item-showcase-visual {
        min-height: 400px;
        border-width: 8px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .customer-feedback-module {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }

    .feedback-header-one {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .client-quote-text {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .rating-stars-container .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .item-showcase-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .feedback-header-one {
        font-size: 24px;
    }

    .client-quote-text {
        font-size: 16px;
    }

    .item-showcase-visual {
        min-height: 250px;
    }
}



/* BLOG */ /* BLOG */

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


.visual-deck-viewport {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

.visual-deck-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.7s ease-in-out;
}

.visual-deck-card {
    flex-shrink: 0;
    width: 33.333%;
    height: 100%;
    position: relative;
}

.deck-card-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
}

.deck-card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10%;
    box-sizing: border-box;
    z-index: 2;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
}

.text-focus-wrapper {
    font-family: "lexend";
    max-width: 500px;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.focus-main-title,
.focus-sub-title,
.focus-description,
.call-to-action-btn {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInSlide 0.6s ease-out forwards;
}

.focus-main-title {
    color: white;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 0.2em;
    animation-delay: 0.5s;
}

.focus-sub-title {
    font-size: 45px;
    font-weight: 200;
    letter-spacing: 0.1em;
    margin-bottom: 1em;
    color: white;
    animation-delay: 0.6s;
}

.focus-description {
    font-family: "Lexend";
    font-size: 24px;
    line-height: 1.5;
    font-weight: 200;
    margin-bottom: 2em;
    color: white;
    animation-delay: 0.7s;
}

.call-to-action-btn {
    display: inline-block;
    padding: 15px 30px;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    animation-delay: 0.8s;
    margin-top: 15px;
}

.call-to-action-btn:hover {
    background-color: #fff;
    color: #000;
}

.deck-pagination-nav {
    position: absolute;
    bottom: 30px;
    left: 48%;
    z-index: 3;
    display: flex;
    gap: 10px;
    opacity: 0;
    transform: translate(-50%, 20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.9s; 
}

.dot-control {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot-control.active {
    background-color: #fff;
}

@media (max-width: 1024px) {
    .deck-card-content {
        padding-left: 5%;
    }

    .text-focus-wrapper {
        max-width: 400px;
    }

    .focus-main-title {
        font-size: 4.5vw;
    }

    .focus-sub-title {
        font-size: 4vw;
    }

    .focus-description {
        font-size: 2vw;
    }
}


@media (max-width: 768px) {
    .visual-deck-viewport {
        height: 70vh;
    }

    .deck-card-content {
        align-items: flex-start;
        padding: 10% 5%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
    }

    .text-focus-wrapper {
        max-width: 100%;
    }

    .focus-main-title {
        font-size: 32px;
    }

    .focus-sub-title {
        font-size: 28px;
    }

    .focus-description {
        font-size: 16px;
    }

    .call-to-action-btn {
        font-size: 1em;
        padding: 12px 24px;
    }

    .deck-pagination-nav {
        left: 45%;
        bottom: 40px;
        gap: 8px;
    }

    .dot-control {
        width: 10px;
        height: 10px;
    }
}

/*====================== LATEST PRODUCTS ===================*/

.catalog-display-area {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.catalog-display-area__title {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 40px;
    text-align: left;
}

.catalog-display-area__grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.item-preview {
    background-color: black;
    border-radius: 15px;
    height: 400px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.6s ease-out, transform 0.3s ease, box-shadow 0.3s ease;
}

        
.item-preview {
    opacity: 0;
    transform: translateY(50px);
}

.item-preview.animate {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s !important; 
}

    .item-preview:nth-child(2) { transition-delay: 0.2s; }
    .item-preview:nth-child(3) { transition-delay: 0.4s; }
    .item-preview:nth-child(4) { transition-delay: 0.6s; }
    .item-preview:nth-child(5) { transition-delay: 0.8s; }
    .item-preview:nth-child(6) { transition-delay: 0.10s; }
        
    .item-preview:hover,
    .item-preview.animate:hover {
    transform: translateY(-12px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-preview__image {
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

    .item-preview__image1 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image2 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image3 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image4 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image5 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image6 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }

.item-preview__details {
    color: white;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.item-preview__name {
    font-family: "Space Grotesk";
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.item-preview__description {
    font-family: "Lexend";
    font-size: 13px;
    color: white;
    margin-bottom: 10px;
    line-height: 1.4;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-preview__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.item-preview__price {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.item-preview__status {
    font-family: "Lexend";
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid;
    min-width: 80px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

.item-preview__status--in-stock {
    border-radius: 15px;
    color: white;
    border-color: white;
}
        
.item-preview__status--in-stock:hover {
    background-color: white;
    color: black;
    cursor: default;
}

.item-preview__status--pre-order {
    border-radius: 15px;
    color: white;
    border-color: white;
}

.item-preview__status--pre-order:hover {
    background-color: white;
    color: black;
}

.catalog-display-area__button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.cta-button {
    font-family: "Lexend";
    width: 320px;
    max-width: 100%;
    height: 65px;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button:hover {
    background-color: #fff;
    color: #000;
}

@media (max-width: 768px) {
    .catalog-display-area__title {
        font-size: 28px;
        margin-top: 40px;
}
    .item-preview {
        height: auto;
}
}

@media (max-width: 480px) {
    .catalog-display-area__grid-layout {
        grid-template-columns: 1fr;
        gap: 20px;
}

@media (max-width: 768px){
    .ds-timeline-item{
        padding-left: 40px;
    }

}
    .cta-button {
        height: 55px;
        font-size: 16px;
        width: 100%;
}
}

/*============= TRENDING GADGETS ====================*/

 .ds-animate-scroll {
            opacity: 0;
            transition: var(--ds-transition); 
        }

       
        @keyframes fadeInMove {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ds-main-container.ds-is-visible {
            animation: fadeInMove 0.8s ease-out forwards;
        }

        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .ds-timeline-item.ds-is-visible {
            animation: slideIn 0.6s ease-out forwards;
        }

        
        .ds-timeline-item:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-timeline-item:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-timeline-item:nth-child(3).ds-is-visible { animation-delay: 0.3s; }

        .ds-gadget-card.ds-is-visible {
            animation: fadeInMove 0.6s ease-out forwards;
        }

        .ds-gadgets-block .ds-gadget-card:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(3).ds-is-visible { animation-delay: 0.3s; }


        .ds-main-container {
            font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
            color: white;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            max-width: 1250px;
            width: 90%; 
            margin: 200px auto;
        }

        .ds-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;

        }

        /* MOBILE VIEW SPACING FOR "DPC BEST SELLER" AND "VIEW ALL"*/
        @media (max-width:768px){
            .ds-section-header{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width:100%;
                padding: 0 10px;
                box-sizing: border-box;
                margin-left: 0;
                left: 0;
                transform: none;
            }
        }

        .ds-section-title {
            font-size: 38px;
            font-weight: 700;
            margin: 0;
            background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ds-view-all-link {
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-weight: 500;
            transition: var(--ds-transition);
            position: relative;
        }

        .ds-view-all-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #0a58ca, #00d4ff);
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover::after {
            width: 100%;
        }

        .ds-view-all-link:hover {
            color: #00d4ff;
            transform: translateX(5px);
        }

        .ds-view-all-link-icon {
            margin-left: 8px;
            font-size: 0.9rem;
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover .ds-view-all-link-icon {
            transform: translateX(3px);
        }


        .ds-gadgets-block {
            margin-right: 30px;
            display: flex;
            flex-direction: column;
            gap: 60px;
        }

        .ds-gadget-card {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            padding: 18px;
            height: 160px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
        }

        .ds-gadget-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover::before {
            left: 100%;
        }

        .ds-gadget-card:hover {
            background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2), var(--ds-shadow-lg);
            transform: translateY(-5px) scale(1.02);
        }

        .ds-gadget-info {
            display: flex;
            align-items: flex-start;
            flex-grow: 1;
        }

        .ds-gadget-thumbnail {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 15px;
            margin-right: 15px;
            margin-top: 25px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }

        .ds-gadget-thumbnail img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            object-fit: cover;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail img {
            transform: scale(1.1);
        }

        .ds-gadget-content-area h3 {
            font-size: 1.1rem;
            margin: 0 0 5px 0;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-content-area h3 {
            color: #00d4ff;
        }

        .ds-gadget-meta {
            font-size: 0.8rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .ds-gadget-category {
            font-weight: 600;
            margin-right: 10px;
        }

        .ds-gadget-category--mobile,
        .ds-gadget-category--gaming {
            color: white;
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            text-align: center;
            padding: 4px 1px;
            border-radius: 15px;
            width: 80px;
            font-size: 12px;
            font-weight: 200;
            border: 1px solid rgba(0, 123, 255, 0.3);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-category--mobile,
        .ds-gadget-card:hover .ds-gadget-category--gaming {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.4) 0%, rgba(0, 123, 255, 0.25) 100%);
            border-color: rgba(0, 123, 255, 0.5);
        }

        .ds-gadget-time {
            color: #aaa;
        }

        .ds-gadget-description {
            font-size: 0.9rem;
            color: #ccc;
        }

        .ds-gadget-link-arrow {
            color: white;
            background: linear-gradient(135deg, #333 0%, #444 100%);
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 29px;
            margin-left: 20px;
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
            border: 1px solid #444;
        }

        .ds-gadget-card:hover .ds-gadget-link-arrow {
            background: linear-gradient(135deg, #0a58ca 0%, #00d4ff 100%);
            border-color: #00d4ff;
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
        }

        @media (min-width: 431) and (max-width:768px){
            .ds-updates-block{
                display: flex;
                flex-direction: column;
                padding: 0 10px;
                align-items: center;
                transform: none;
                left: 0;
                overflow-x: hidden;
                box-sizing: border-box;
                width: 100%;

            .ds-updates-block img{
            width: 80% !important; 
            max-width: 200px;
            height: auto !important;
            margin-bottom: 15px !important; /* Space between image and text */
            }
            .ds-timeline-list{
                padding-left: 30px;
                position: relative;
            }
            .ds-timeline-item{
                padding-left: 20px;
            }
            
            }

        }


        .ds-updates-block {
            margin-left: 30px;
            position: relative;
            max-width:1200;
            margin: 0 auto;
        }

        .ds-timeline-list {
            position: relative;
            padding-left: 40px;
        }

        .ds-timeline-list::before {
            content: '';
            position: absolute;
            top: 0;
            left: 21px;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, #0a58ca 0%, #2f8d46 50%, #C34814 100%);
            z-index: 0;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item {
            position: relative;
            margin-bottom: 25px;
            padding-bottom: 20px;
            padding-left: 10px;
        }

        .ds-timeline-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .ds-timeline-item::after { 
            content: '';
            position: absolute;
            left: 4px;
            top: 11px;
            width: 15px;
            height: 2px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
            z-index: 0;
        }

        .ds-timeline-icon {
            position: absolute;
            left: -32px;
            top: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            transition: var(--ds-transition);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item:hover .ds-timeline-icon {
            transform: scale(1.15);
            box-shadow: 0 0 20px currentColor;
        }

        .ds-timeline-item--upcoming .ds-timeline-icon { 
            color: #0a58ca;
            background: radial-gradient(circle, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.1) 100%);
        }
        .ds-timeline-item--launch .ds-timeline-icon { 
            color: #2f8d46;
            background: radial-gradient(circle, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.1) 100%);
        }
        .ds-timeline-item--partnership .ds-timeline-icon { 
            color: #C34814;
            background: radial-gradient(circle, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.15) 100%);
        }

        .ds-update-content {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            height: 220px;
            padding: 15px 20px;
            border-radius: 20px;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
            align-items: center;
            justify-content: space-between;
        }
        .ds-text-side{
            flex: 2;
            width: 100%;
            display:block;
            font-size: 100px;
            
        }

        @media (max-width: 768px){
            .ds-update-content{
                display: flex;
                flex-direction: column;
                padding: 14px;
            }
            
        }

        .ds-update-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transition: var(--ds-transition);
        }

        .ds-update-content:hover::before {
            left: 100%;
        }

        .ds-update-content:hover {
            transform: translateY(-3px);
            box-shadow: var(--ds-shadow-lg);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover {
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2);
        }

        .ds-timeline-item--launch .ds-update-content:hover {
            border-color: #2f8d46;
            box-shadow: 0 8px 32px rgba(47, 141, 70, 0.2);
        }

        .ds-timeline-item--partnership .ds-update-content:hover {
            border-color: #C34814;
            box-shadow: 0 8px 32px rgba(195, 72, 20, 0.2);
        }

        .ds-update-meta-info {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 0.8rem;
        }

        .ds-update-category-tag {
            font-size: 15px;
            font-weight: 600;
            margin-right: 15px;
            padding: 4px;
            border-radius: 4px;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-category-tag {
            transform: scale(1.05);
        }

        .ds-timeline-item--upcoming .ds-update-category-tag { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-category-tag { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-category-tag { color: #C34814; }

        .ds-update-time-badgee,
        .ds-update-time-badge,
        .ds-update-time-badge-recent {
            color: white;
            text-align: center;
            padding: 4px 10px; 
            border-radius: 15px;
            width: 90px;
            font-weight: 400;
            transition: var(--ds-transition);
            border: 1px solid transparent;
            font-size: 0.8rem; 
        }

        .ds-update-time-badgee {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            border-color: rgba(0, 123, 255, 0.3);        
        }

        .ds-update-time-badge {
            background: linear-gradient(135deg, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.15) 100%);
            border-color: rgba(144, 255, 85, 0.3);  
        }

        .ds-update-time-badge-recent {
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.2) 100%);
            border-color: rgba(255, 107, 53, 0.3);           
        }

        .ds-update-content:hover .ds-update-time-badgee,
        .ds-update-content:hover .ds-update-time-badge,
        .ds-update-content:hover .ds-update-time-badge-recent {
            transform: scale(1.05);
        }

        .ds-update-content h3 {
            font-size: 1.1rem;
            margin: 0 0 10px 0;
            transition: var(--ds-transition);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover h3 { color: #00d4ff; }
        .ds-timeline-item--launch .ds-update-content:hover h3 { color: #90FF55; }
        .ds-timeline-item--partnership .ds-update-content:hover h3 { color: #FF6B35; }

        .ds-update-description {
            font-size: 0.9rem;
            color: #aaa;
            margin-bottom: 15px;
            margin-right: 150px;
        }

        @media (max-width: 768px){
            .ds-update-description{
                display: block;
                width: 100%;
                margin-bottom: 10px;

            }
            .ds-update-meta-info{
                margin:10 px;
            }
        }

        .best-seller-thumbnail {
            width: 130px;
            height: 130px; /* Fixed square size */
            background: transparent;
            border-radius: 15px;
            margin-left: 380px;
            margin-top: -150px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            transition: var(--ds-transition);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px; /* Increased padding for better spacing */
            box-sizing: border-box;
        }

        .best-seller-thumbnail img{
          
            width: 10px;
            height: 10px;
            padding: 10px;

        }

    @media (max-width: 1024px){
        .best-seller-thumbnail{
            width: 100px;
            height: 100px;
            min-width: 100%;
            margin-left: 0;
            margin-top: 0;
            margin-bottom: 15px;
            
            
        }
        .best-seller-thumbnail img {
            width: 100%;
            height: 140px;
            display:block;
            object-fit: contain;
    }
}
        .best-seller-thumbnail:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }


        .best-seller-thumbnail:hover img {
            transform: scale(1.1);
        }

        .ds-update-details-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
        }

        .ds-update-details-arrow {
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-details-arrow {
            transform: translateX(5px);
        }

       
        .ds-timeline-item--upcoming .ds-update-details-arrow { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-details-arrow { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-details-arrow { color: #C34814; }

        
        html {
            scroll-behavior: smooth;
        }

        /* Responsive adjustments */
        @media (max-width: 1240px) {
            .ds-main-container {
                width: 100%;
                display: flex;
                flex-direction: column;
            }
        }

        @media (max-width: 992px) {
            .ds-main-container {
                grid-template-columns: 1fr;
                padding: 0 20px;
                width: auto;
                margin: 100px auto;
                gap: 50px;
            }
            
            .ds-gadgets-block {
                margin-right: 0;
            }
            
            .ds-updates-block {
                margin-left: 0;
            }
        }

        @media (max-width: 1024px) {
            .ds-main-container {
                margin: 60px auto 60px;
                gap: 40px;
                padding: 0 15px;
            }
            
            .ds-section-title {
                font-size: 1.5rem;
            }
            
            .ds-gadgets-block {
                gap: 40px;
            }
            
            .ds-gadget-card {
                height: auto;
                min-height: 140px;
                flex-wrap: wrap;
                padding: 12px;
            }
            
            .ds-gadget-card:hover {
                transform: translateY(-3px) scale(1);
            }
            
            .ds-gadget-info {
                width: 100%;
            }
            
            .ds-gadget-thumbnail {
                width: 70px;
                height: 70px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 1rem;
            }
            
            .ds-gadget-description {
                font-size: 0.85rem;
            }
            
            .ds-gadget-link-arrow {
                margin-left: 0;
                margin-top: 10px;
                align-self: flex-end;
            }
            
            .ds-update-content {
                height: auto;
                min-height: 180px;
                padding: 12px 15px;
            }
            
            .ds-update-content h3 {
                font-size: 1rem;
            }
            
            .ds-update-description {
                font-size: 0.85rem;
            }
            
            .ds-timeline-list {
                padding-left: 10px;
            }
            
            .ds-timeline-list::before {
                left: 16px;
            }
            
            .ds-timeline-item {
                padding-left: 25px;
            }
            .ds-timeline-icon{
                margin-left: 25px;
            }
        }

        @media (max-width: 480px) {
            .ds-main-container {
                margin: 40px auto;
                gap: 30px;
                padding: 0 10px;
            }
            body{
                padding:5px;
            }
            
            .ds-section-header {
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-section-title {
                font-size: 1.3rem;
            }
            
            .ds-gadgets-block {
                gap: 30px;
            }
            
            .ds-gadget-card {
                padding: 10px;
                min-height: 120px;
            }
            
            .ds-gadget-thumbnail {
                width: 60px;
                height: 60px;
                margin-right: 10px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.95rem;
            }
            
            .ds-gadget-meta {
                font-size: 0.75rem;
                flex-wrap: wrap;
                gap: 5px;
            }
            
            .ds-gadget-description {
                font-size: 0.8rem;
            }
            
            .ds-gadget-link-arrow {
                width: 40px;
                height: 26px;
                font-size: 1rem;
            }
            
            .ds-gadget-category--mobile,
            .ds-gadget-category--gaming {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-content {
                padding: 10px 12px;
                min-height: 160px;
            }
            
            .ds-update-content h3 {
                font-size: 0.95rem;
            }
            
            .ds-update-description {
                font-size: 0.8rem;
                margin-bottom: 10px;
            }
            
            .ds-update-meta-info {
                font-size: 0.75rem;
            }
            
            .ds-update-category-tag {
                font-size: 13px;
                margin-right: 10px;
            }
            
            .ds-update-time-badgee,
            .ds-update-time-badge,
            .ds-update-time-badge-recent {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-details-row {
                font-size: 0.8rem;
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-timeline-icon {
                width: 24px;
                height: 24px;
                font-size: 0.85rem;
                margin-right: 25px;
            }
            
            .ds-timeline-item::after {
                top: 10px;
            }
            
            .ds-timeline-item {
                margin-bottom: 20px;
                padding-bottom: 15px;
                padding-left: 20px;
            }
           
        }

        @media (max-width: 360px) {
            .ds-section-title {
                font-size: 1.2rem;
            }
            
            .ds-gadget-thumbnail {
                width: 55px;
                height: 55px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.9rem;
            }
        }

        /* Reduced motion for accessibility */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

/*=============== BLOG POST LATEST ================*/



/* --- New Scroll-Triggered Animation CSS --- */

/* Base style for elements that will animate (Start State: Hidden and slightly offset) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Featured (Showcase) zone has a slightly different animation (Start State: Slightly scaled down) */
.showcase-zone.animate-on-scroll {
    transform: scale(0.9);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Final State (triggered by JavaScript): Visible and in original position */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Featured zone's final visible state */
.showcase-zone.animate-on-scroll.is-visible {
    transform: scale(1);
}

/* Add brief delays for a staggered gallery effect */
.gallery-matrix > .content-block.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; }

/* Delay the side panel widgets */
.side-panel > .widget-container.animate-on-scroll:nth-child(1) { transition-delay: 0.2s; }
.side-panel > .widget-container.animate-on-scroll:nth-child(2) { transition-delay: 0.4s; }

/* TRENDING POSTS SCROLL BAR*/

.trending-posts-scroll {
  max-height: 390px;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 20px;
}

.trending-posts-scroll:hover {
  overflow-y: auto;
}

.trending-posts-scroll::-webkit-scrollbar {
  width: 8px;
}

.trending-posts-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* --- Original Design Styles --- */
    
.banner-strip {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap; 
}

.banner-strip h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px; 
}

.dual-column-frame {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: start;
}

.primary-zone {
    width: 100%;
}

.showcase-zone {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-zone:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.media-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.media-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.showcase-zone:hover .media-canvas {
    transform: scale(1.05);
}

.content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    padding: 40px 30px 30px;
    transition: padding 0.3s ease;
}

.showcase-zone:hover .content-overlay {
    padding: 50px 30px 30px;
}

.attributes-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.category-marker {
    background: rgba(59, 130, 246, 0.6);
    color: #fff;
    padding: 8px 18px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.time-stamp {
    color: #aaa;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.time-stamp::before {
    content: '•';
    color: #3b82f6;
}

.feature-title {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s ease;
    cursor: pointer;
}


.description-snippet {
    color: white ;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.progress-bullets {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.bullet-point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.bullet-point::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #3b82f6;
    transition: all 0.3s ease;
}

.bullet-point:hover {
    background: #666;
    transform: scale(1.2);
}

.bullet-point.active-state {
    background: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.side-panel {
    display: flex;
    flex-direction: column;
    gap: 43px;
    width: 100%;
}

.widget-container {
    color: white;
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 25px;
    width: 100%;
    transition: all 0.3s ease;
}

.widget-container:hover {
    border-color: #3b82f6;
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.widget-container h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.widget-container h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
}

.highlight-item {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #222;
    align-items: flex-start;
    transition: all 0.3s ease;
    cursor: pointer;
}

.highlight-item:hover {
    padding-left: 10px;
    background: rgba(59, 130, 246, 0.05);
}

.highlight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.position-badge {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    min-width: 40px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.highlight-item:hover .position-badge {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.item-content {
    flex: 1;
}

.item-content h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.highlight-item:hover .item-content h4 {
    color: #3b82f6;
}

.posted-time {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.highlight-item:hover .posted-time {
    color: #888;
}

.tag-collection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-element {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tag-element::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    transition: left 0.5s ease;
}

.tag-element:hover::before {
    left: 100%;
}

.tag-element:hover {
    background: #2a2a2a;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.2);
}

.gallery-matrix {
    color: white;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default for large screens */
    gap: 25px;
    width: 100%;
}

.content-block {
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
}

.content-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.content-block:hover::before {
    opacity: 1;
}

.content-block:hover {
    transform: translateY(-10px);
    border-color: #3b82f6;
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}

.preview-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image img {
    transform: scale(1.05);
}

.preview-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent);
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image::after {
    transform: translate(-50%, -50%) scale(1);
}

.text-section {
    padding: 25px;
    position: relative;
    z-index: 2;
}

.meta-information {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.subject-tag {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.subject-tag.gaming {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.content-block:hover .subject-tag.gaming {
    background: rgba(16, 185, 129, 0.2);
    transform: scale(1.05);
}

.subject-tag.arvr {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.content-block:hover .subject-tag.arvr {
    background: rgba(139, 92, 246, 0.2);
    transform: scale(1.05);
}

.subject-tag.security {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.content-block:hover .subject-tag.security {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.05);
}

.creation-date {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.content-block:hover .creation-date {
    color: #888;
}

.block-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.content-block:hover .block-title {
    color: #3b82f6;
}

.brief-description {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.content-block:hover .brief-description {
    color: #aaa;
}

.directional-icon {
    color: #3b82f6;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.content-block:hover .directional-icon {
    transform: translateX(10px);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* --- Media Queries for Responsiveness (Unchanged) --- */

/* Tablet/Medium Screens (Max 1024px) */
@media (max-width: 1024px) {
    
    .dual-column-frame {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    
    .side-panel {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 calc(50% - 10px); 
        max-width: calc(50% - 10px);
    }
    
}

    
@media (max-width: 640px) {
    .banner-strip h1 {
        font-size: 28px;
    }

    .media-wrapper {
        height: 350px; /* Smaller height for featured image */
    }

    .feature-title {
        font-size: 1.5rem;
    }

    /* Adjust gallery to a single column */
    .gallery-matrix {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Stack side panel widgets vertically */
    .side-panel {
        flex-direction: column;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/*================== END =====================*/

/* DOORLOCK SYSTEM BY PCESS */

.doorlock-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 70px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-doorlock-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;

    background-image:
    linear-gradient(200deg, rgba(62, 222, 47, 0) 30%, rgba(37, 228, 145, 0.5) 70%, rgba(27, 99, 255, 1) 100%),
    url('../images/pc-builds.jpg');
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
    to bottom,
    transparent 0%,  /* Start fully transparent (top fade-out) */
    black 10%,        /* Become fully visible at 5% */
    black 85%,       /* Stay fully visible until 95% */
    transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.doorlock-header {
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.doorlock-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}


.why-choose-layer {
    text-align: center;
    padding: 40px 20px;
}

    .why-choose-layer.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

	.why-choose-layer.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

.why-choose-question {
    font-family: 'Lexend', sans-serif;
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.why-choose-answer{
    font-size: 32px;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* client-nav section */


/* Base state for all sections - hidden by default */
.cnsection, .projsection {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Active section - visible with animation */
.cnsection:not(.d-none), .projsection:not(.d-none) {
    opacity: 1;
    transform: translateY(0);
    animation: slideInUp 0.6s ease-out forwards;
}

/* Keyframe animation for sliding in from bottom */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternative: Fade and Scale Animation */
.cnsection.scale-animation:not(.d-none), 
.projsection.scale-animation:not(.d-none) {
    animation: fadeScale 0.5s ease-out forwards;
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Staggered animation for child elements */
.cnsection:not(.d-none) .section-h1,
.projsection:not(.d-none) .proj-h1 {
    animation: slideInUp 0.6s ease-out 0.1s backwards;
}

.cnsection:not(.d-none) .section-p,
.projsection:not(.d-none) .proj-p {
    animation: slideInUp 0.6s ease-out 0.2s backwards;
}

.cnsection:not(.d-none) .dl-gradient-button,
.projsection:not(.d-none) .proj-gradient-button {
    animation: slideInUp 0.6s ease-out 0.3s backwards;
}

.cnsection:not(.d-none) .gradient-border-box,
.projsection:not(.d-none) .gradient-border-proj {
    animation: slideInRight 0.6s ease-out 0.2s backwards;
}

/* Slide in from right for images */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px); /* Start 30px to the left */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* End at the normal position */
    }
}

/* Button click feedback animation */
.clientbtn, .projbtn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clientbtn:active, .projbtn:active {
    transform: translateY(-5px) scale(0.98);
}

/* Smooth active indicator animation */
.clientbtn.active::after, .projbtn.active::after {
    animation: expandLine 0.4s ease-out forwards;
}

@keyframes expandLine {
    from {
        width: 0%;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}



.clientnavpart {
    margin-top: 30px;
    max-height: 670px;
}

.client-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for nav buttons */
.clientbtn {
    transition: color 0.2s ease;
    justify-content: center;
}

.clientbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.clientbtn.active {
    color: #fff !important;
    position: relative;
}

.clientbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

/* Replace Tailwind's 'hidden' with Bootstrap's 'd-none' */
.d-none {
    display: none !important; 
}

.section-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-box {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.section-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.cnsection {
    margin-top: 10px;
}

.section-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.section-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient */
.dl-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.dl-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* RESPONSIVE DESIGN FOR CLIENT NAV SECTION */

@media (max-width: 1280px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 100%;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1270px;
    }

    .cnsection{
        width: 1100px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}


@media (max-width: 1024px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1030px;
    }

    .cnsection{
        width: 1000px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 15px;
        width: 600px;
        align-content: center   ;
    }

    .client-nav {
         width: 500px;
    } 
    
    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content {
        width: 550px;
    }

    .cnsection {
        width: 550px;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .client-nav {
        width: 760px;
    }

    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content{
        width: 750px;
    }

    .cnsection{
        width: 750px;

    }
}


@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .cnsection, .projsection {
        transform: translateY(20px);
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .clientnavpart {
        margin-top: 15px;
        max-height: auto;
    }

    .client-nav {
        font-size: 20px;
    } 

    #nav-container {
        justify-content: center;
        padding-bottom: 1rem;
    }
    
    .clientbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .clientbtn.active::after {
        height: 2px;
    }

    .section-content {
        height: auto;
        min-height: 500px;
    }

    .cnsection {
        padding: 2rem 1rem !important;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}


@media (max-width: 430px) {

    .clientnavpart {
        margin-top: 15px;
        width: 400px;
        align-content: center   ;
    }

    .client-nav {
         width: 400px;
    } 
    
    .clientbtn {
        width: 85px;
        padding: 1px !important;
    }

    .section-content {
        width: 400px;
    }

    .cnsection {
        width: 400px;
    }

    .section-h1 {
        font-size: 26px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 250px;
    }

    .section-img {
        min-height: 250px;
    }

    .dl-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .clientnavpart {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .client-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .clientbtn {
        width: 80px;
        padding: 1px !important;
    }

    .section-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .cnsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }

    .section-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .section-p {
        font-size: 14px;
        margin-top: 20px;
        line-height: 1.4;
    }

    .gradient-border-box {
        min-height: 220px;
        margin-bottom: 1.5rem;
    }

    .section-img {
        min-height: 220px;
    }

    .dl-gradient-button {
        padding: 8px 20px;
        font-size: 0.75rem;
        max-width: 250px;
    }
}
/* MANY MORE SECTION */


.many-more {
    margin-top: 70px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
}

.and-many {
    font-size: 48px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}


@media (max-width: 1024px) {
    .and-many {
        font-size: 2rem;
        margin-left: 15px;
    }
}

@media (max-width: 768px) {
    .and-many {
        font-size: 1.8rem;
        margin-left: 15px;
    }
}

@media (max-width: 480px) {
    .and-many {
        font-size: 1.8rem;
    }
}

.many-more-container {
    margin-top: 60px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 400px;
}

    .many-more-container.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .many-more-container.animate-visible {
        animation: 1.2s anim-fadeIn linear forwards; 
    }

/* Replaced .card */
.clients-card {
    position: absolute;
    width: 90%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform .4s ease;
    cursor: pointer;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    min-height: 440px;
    display: flex;
}

.clients-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

/* Replaced .container */
.clients-container {
    width: 100%;
    max-width: 800px;
    max-height: 600px;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Replaced .cards */
.many-more-cards {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
}

/*
 * CORE ANIMATION LOGIC (Updated to use .clients-container)
 */

/* Side Cards (Left position: translateX(-40%)) */
.clients-container.active-card-1 #card-3, /* Card 3 moves left when 1 is active */
.clients-container.active-card-2 #card-1, /* Card 1 moves left when 2 is active */
.clients-container.active-card-3 #card-2 { /* Card 2 moves left when 3 is active */
    transform: translatex(-40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Side Cards (Right position: translateX(40%)) */
.clients-container.active-card-1 #card-2, /* Card 2 moves right when 1 is active */
.clients-container.active-card-2 #card-3, /* Card 3 moves right when 2 is active */
.clients-container.active-card-3 #card-1 { /* Card 1 moves right when 3 is active */
    transform: translatex(40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Center Card (translateX(0)) */
.clients-container.active-card-1 #card-1, /* Card 1 centers */
.clients-container.active-card-2 #card-2, /* Card 2 centers */
.clients-container.active-card-3 #card-3 { /* Card 3 centers */
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
    box-shadow: 0px 0px 15px 0px rgba(81, 81, 81, 0.47); 
}

/* RESPONSIVE DESIGN FOR MANY MORE SECTION */

@media (max-width: 1280px) {
    .clients-container {
        max-width: 1000px; /* Use a smaller max-width */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 450px; /* Reduced minimum card height */
        width: 700px;
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


@media (max-width: 820px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 760px; /* Use a smaller max-width */
        max-height: 580px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 590px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}



@media (max-width: 768px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        max-width: 90%; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 430px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 400px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 300px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 360px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 360px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 290px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


/* DOORLOCK BRAND SLIDER SECTION */

.doorlock-brand-slider {
    margin-top: 600px;
}

@media (max-width: 1280px) {
    .doorlock-brand-slider{
        width: 100%;
    }
}

@media (max-width: 820px) {
    .doorlock-brand-slider{
        margin-top: 550px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .doorlock-brand-slider{
        margin-top: 150px;
    }
}

@media (max-width: 420px) {
    .doorlock-brand-slider{
        margin-top: 150px;
        width: 100%;
    }
}


/* OTHER PROJECTS SECTION */

.other-proj-nav {
    margin-top: 150px;
    max-height: 670px;
    margin-bottom: 20px;
}

.proj-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for project nav buttons */
.projbtn {
    transition: color 0.2s ease;
}

.projbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.projbtn.active {
    color: #fff !important;
    position: relative;
}

.projbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

.projects-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-proj {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.proj-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.projsection {
    margin-top: 10px;
}

.proj-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.proj-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient for Projects */
.proj-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.proj-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* DOORLOCK RESPONSIVE DESIGN */

@media(max-width: 1280px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 820px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
        width: 100%;
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 768px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 430px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

/* OTHER PROJ AREA */

@media (max-width: 1280px) {
    .other-proj-nav{
        margin-top: 80px;
        max-width: auto;
        margin-bottom: -20px;
    }

    .proj-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .projects-content{
        width: 1270px;
    }

    .projsection{
        width: 1200px;
    }


    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 1024px) {
    .other-proj-nav{
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
    }

    .proj-nav {
        font-size: 24px;
    }

    .projects-content{
        width: 1020px;
    }

    .projsection{
        width: 1000px;
    }

    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .proj-nav {
        width: 760px;
    }

    .projbtn {
        width: 300px;
        padding: 1px !important;
    }

    .projects-content{
        width: 750px;
    }

    .projsection{
        width: 750px;

    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .other-proj-nav {
        margin-top: 15px;
        max-height: auto;
    }
    .proj-nav {
        font-size: 20px;
    }

    #navp-container {
        justify-content: flex-start;
        padding-bottom: 1rem;
    }

    .projbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .projbtn.active::after {
        height: 2px;
    }

    .projects-content {
        height: auto;
        min-height: 500px;
    }

    .proj-section {
        padding: 2rem 1rem !important;
    }

    .projsection {
        margin-top: 0px;
    }

    .proj-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .proj-p {
        font-size: 16px;
        margin-top: 40px;
        line-height: 1.5;
    }

    .gradient-border-proj {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
    }

    .proj-img {
        min-height: 300px;
    }

    .proj-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
        margin-top: 30px;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 410px;
    }

    .proj-nav {
        width: 400px;
    }

    .projbtn {
        width: 88px;
        padding: 1px !important;
    }

    .projects-content{
        width: 400px;
    }

    .projsection{
        width: 400px;
    }

    .proj-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .proj-p {
        font-size: 14px;
        margin-top: 20px;
    }

    .gradient-border-proj {
        min-height: 250px;
    }

    .proj-img {
        min-height: 250px;
    }

    .proj-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .other-proj-nav {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .proj-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .projbtn {
        width: 75px;
        padding: 1px !important;
    }

    .projects-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .projsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }
}

/* Remove default link underline */
a {
    text-decoration: none;
}




/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */
/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */

.public-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
            margin-bottom: 30px;
        }

        .flex-public {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1500px;
            margin: 30px auto;
            padding: clamp(40px, 8vw, 100px) clamp(20px, 4vw, 60px);
            gap: clamp(30px, 5vw, 80px);
            min-height: 500px;
            opacity: 0;
        }

        .flex-public.visible {
            animation: fadeInUp 0.8s ease-out forwards !important;
        }

        .flex-public.visible:nth-child(1) {
            animation: fadeInUp 0.8s ease-out 0s forwards;
        }
        .flex-public.visible:nth-child(2) {
            animation: fadeInUp 0.8s ease-out 0.15s forwards;
        }
        .flex-public.visible:nth-child(3) {
            animation: fadeInUp 0.8s ease-out 0.3s forwards;
        }
        .flex-public.visible:nth-child(4) {
            animation: fadeInUp 0.8s ease-out 0.45s forwards;
        }
        .flex-public.visible:nth-child(5) {
            animation: fadeInUp 0.8s ease-out 0.6s forwards;
        }

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

        .text-public {
            flex: 1;
            min-width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .text-public h2 {
            font-size: clamp(32px, 4vw, 52px);
            margin-bottom: 20px;
            background-clip: text;
            font-weight: 700;
            letter-spacing: -0.5px;
            font-family: 'Space Grotesk', sans-serif;
        }

        .text-public p {
            font-size: 1.5rem;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 30px;
            font-weight: 400;
            font-family: 'Lexend', sans-serif;
        }

        .public-btn {
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 600;
            padding: 12px 50px;
            border-radius: 50px;
            background: #0000;
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-block;
            width: fit-content;
            position: relative;
            overflow: hidden;
            border: 1px solid;
        }

        .public-btn::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: left 0.5s ease;
            z-index: 1;
        }

        .public-btn span {
            position: relative;
            z-index: 2;
        }

        .public-btn:hover {
            transform: translateY(-3px);
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
        }
        .public-btn:hover::before {
            left: 100%;
        }

        .public-btn:active {
            transform: translateY(-1px);
        }

        .demo-section {
            display: flex;
            gap: 30px;
            margin-top: 50px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .button-group h3 {
            color: #888;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        @keyframes gradientShiftp {
            0% {
                background-position: -200% center;
            }
            100% {
                background-position: 200% center;
            }
        }

        .visual-public {
            position: relative;
            max-width: 600px;
            height: 450px;
            border-radius: 20px;
            flex: 1;
        }

        /* Blur shadow background */
        .visual-public::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 101%;
            height: 100%;
            background: linear-gradient(
                90deg,
                #FF6666 0%,
                #FF894C 20%,
                #90FF55 40%,
                #7B94F6 60%,
                #FF77F1 80%,
                #FF6666 100%
            );
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            filter: blur(10px);
            z-index: 0;
            pointer-events: none;
        }

        .visual-public img {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
            z-index: 1;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .visual-public:hover img {
            transform: scale(1.03);
        }

        .flex-public:nth-child(even) {
            flex-direction: row-reverse;
        }

        /* Responsive Design */
        /* 344px - Extra Small Phones */
        @media (max-width: 344px) {
            .public-wrapper{
                margin-bottom: -100px;
                margin-top: 50px;
            }
            .flex-public {
                flex-direction: column !important;
                padding: 20px 12px;
                gap: 15px;
                margin-bottom: -30px !important;
                
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 24px;
                margin-bottom: 12px;
            }

            .text-public p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 250px;
                margin-bottom: -50px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 10px 30px;
                font-size: 14px;
                margin-bottom: -100px !important;
            }
           
        }

        /* 360px - Small Phones */
@media (max-width: 360px) {
    .public-wrapper {
        margin-top: -10px !important;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 20px 14px;
        gap: 16px;
        margin-bottom: -100px !important;
    }

    .text-public {
        min-width: 100%;
        font-size: 14px;
    }

    .text-public h2 {
        font-size: 26px !important;
        margin-bottom: 12px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 260px;
    }

    .visual-public img {
        width: 100% !important;
        height: 260px !important;

    }

    .public-btn {
        padding: 10px 32px;
        font-size: 14px;
    }
}

/* 375px - iPhone SE/6/7/8 */
@media (max-width: 375px) {
    .public-wrapper {
        margin-bottom: -50px;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 22px 16px;
        gap: 18px;
        margin: 16px auto;
        max-height: 580px;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 13px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 280px;
    }

    .visual-public img {
        width: 100% !important;
        height: 280px !important;
        
    }

    .public-btn {
        padding: 11px 35px;
        font-size: 14px;
    }
}

/* 390px - Pixel 4/5 */
@media (max-width: 390px) {
    .public-wrapper {
        margin-top: 50px;
        margin-bottom: 190px !important;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 24px 18px;
        gap: 15px;
        margin: 18px auto;
        transform: scale(0.9) !important;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 14px;
    }

    .text-public p {
        font-size: 15px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 230px;
        margin-top: -120px;
    }

    .visual-public img {
        width: 100% !important;
        height: 230px !important;
    }

    .public-btn {
        padding: 10px 35px !important;
        font-size: 15px !important;
        margin-bottom: -130px !important;
        
    }
}

        /* 412px - Galaxy S9 */
        @media (max-width: 412px) {
            .public-wrapper{
                margin-bottom: -10px;
                overflow: visible;
            }

            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 26px 20px;
                gap: 20px;
                margin-bottom: -100px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-bottom: -60px !important;
                margin-top: -60px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 12px 40px;
                font-size: 15px;
            }
            

        }

        /* 414px - iPhone XR */
        @media (max-width: 414px) {
            .flex-public {
                flex-direction: column !important;
                padding: 26px 20px;
                gap: 20px;
                margin: 18px auto;
                transform: scale(0.9) !important;
                margin-bottom: -30px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-top: -100px;
                margin-bottom: -40px;
            }

            .public-btn {
                padding: 12px 30px;
                font-size: 15px;
                margin-bottom: -100px !important;
            }
        }

        /* 430px - Galaxy S22 */
        @media (min-width: 320px) and (max-width: 430px) {
            .public-wrapper {
                margin-bottom: -40px !important;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 28px 22px;
                gap: 20px;
                margin-top: -100px !important;
            }

            .text-public {
                min-width: 350px !important;
                margin: 10px !important;
                transform: scale(0.9);
            }

            .text-public h2 {
                font-size: 34px !important;
                margin-bottom: 15px;
            }

            .text-public p {
                font-size: 15px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 330px;
                margin-bottom: -50px;
                margin-top: -40px;
            }

            .public-btn {
                padding: 10px 32px !important;
                font-size: 15px !important;
                transform: scale(0.9);
                margin-bottom: -90px !important;
            }
        }

        /* 540px - Small Tablets */
        @media (max-width: 540px) {
            .flex-public {
                flex-direction: column !important;
                padding: 30px 24px;
                gap: 22px;
                margin: 20px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 30px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public{
                max-height: 270px !important;
                width: 390px !important;
            }

            .visual-public img{
                max-width: 390px !important;
                max-height: 250px !important;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 768px - iPad/Tablet */
        @media (max-width: 853px) {
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 35px 30px;
                gap: 25px;
                margin: 25px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 38px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 380px;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
            
        }

        /* 853px - Large Tablet */
        @media (max-width: 853px) {
            .public-wrapper{
                margin-bottom: 40px;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 50px 45px !important;
                gap: 28px;
                margin-top: 70px !important;
            }

            .text-public {
                min-width: 100%;
                margin: auto;
                text-align: center;
                align-items: center;
                margin-bottom: -50px;
            }

            .text-public h2 {
                font-size: 48px !important;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 22px !important;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                order: -1;
                max-width: 590px !important;
            }

            .visual-public img{
                width: 590px;
                height: 380px !important;  
            }

            .public-btn {
                padding: 10px 40px !important;
                font-size: 18px !important;
            }
        }

        /* 912px - Large Tablet Landscape */
        @media (max-width: 912px) {
            .flex-public {
                flex-direction: row;
                min-height: auto;
                padding: 40px 35px;
                gap: 30px;
                margin: 25px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 36px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public {
                max-width: 400px;
                height: 320px;
                flex: 1;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 992px - Small Desktop */
        @media (max-width: 992px) {
            .flex-public {
                flex-direction: row;
                min-height: 450px;
                padding: 45px 40px;
                gap: 40px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 40px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                max-width: 450px;
                height: 350px;
                flex: 1;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
        }

        /* 1024px - Tablet Landscape / Desktop */
        @media (max-width: 1024px) {
            .flex-public {
                flex-direction: row;
                min-height: 480px;
                padding: 50px 45px;
                gap: 45px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 350px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 42px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 17px !important;
                line-height: 1.75;
                margin-bottom: 24px;
            }

            .visual-public {
                max-width: 500px;
                height: 330px !important;
                flex: 1;
            }

            .public-btn {
                padding: 10px 35px !important;
                font-size: 16px;
            }
            .ds-section-title{
                margin-left: 20px;
            }
            .ds-view-all-link{
                margin-right: 30px;
            }
        }

        /* 1280px - Full Desktop */
        @media (max-width: 1280px) {
            .flex-public {
                flex-direction: row;
                min-height: 500px;
                padding: 60px 50px;
                gap: 50px;
                margin: 30px 40px;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 380px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 46px;
                margin-bottom: 20px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.8;
                margin-bottom: 26px;
            }

            .visual-public {
                max-width: 550px;
                height: 400px;
                flex: 1;
            }

            .public-btn {
                padding: 14px 52px;
                font-size: 16px;
            }
        }


        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */
        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease-out;
            margin-top: 40px;
        }

        .modal-overlay.active {
            display: flex;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .modal-content-public {
            background: black;
            border: 2px solid #7B54B1;
            border-radius: 20px;
            padding: 50px;
            max-width: 850px;
            width: 90%;
            position: relative;
            display: flex;
            gap: 50px;
            animation: slideUp 0.4s ease-out;
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4), -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
            margin-top: 0px;
        }

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

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: #a78bfa;
            font-size: 32px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            color: #c084fc;
            transform: scale(1.2);
        }

        .testimonial-image {
            flex: 0 0 450px;
            height: 400px;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 0px 30px rgba(168, 85, 247, 0.2);
        }

        .testimonial-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .testimonial-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .testimonial-text h2 {
            font-size: 28px;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #a78bfa, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-family: 'Space Grotesk', sans-serif;
        }

        .testimonial-text p {
            font-size: 18px;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 20px;
            font-family: 'Lexend', sans-serif;
        }

        .public-stars {
            display: flex;
            gap: 8px;
            font-size: 24px;
            display: inline-block; 
    
            /* Ensure the animation is fully defined */
            animation: rgbGoldPulse 2s ease-in-out infinite alternate;
        }

        @media (max-width: 768px) and (min-width: 541px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 35px;
                flex-direction: column;
                max-width: 750px;
                margin: auto;
            }

            .testimonial-image img {
                width: 790px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 8px;
            }
        }

        @media (max-width: 344px) {
            .modal-content-public {
                padding: 20px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 400px;
                height: 410px !important;
            }

            .testimonial-text h2 {
                font-size: 18px;
                margin-bottom: 12px;
            }

            .testimonial-text p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 12px;
            }

            .public-stars {
                font-size: 16px;
                gap: 5px;
            }

            .close-btn {
                font-size: 24px;
                width: 32px;
                height: 32px;
            }
        }

        /* Mobile: 360px */
        @media (max-width: 360px) and (min-width: 345px) {
            .modal-content-public {
                padding: 25px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 210px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 430px;
            }

            .testimonial-text h2 {
                font-size: 20px;
                margin-bottom: 14px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 14px;
            }

            .public-stars {
                font-size: 18px;
                gap: 6px;
            }

            .close-btn {
                font-size: 26px;
                width: 34px;
                height: 34px;
            }
        }

        /* Mobile: 375px */
        @media (max-width: 375px) and (min-width: 361px) {
            .modal-content-public {
                padding: 28px;
                gap: 22px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 420px;
            }

            .testimonial-text h2 {
                font-size: 21px;
                margin-bottom: 15px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .public-stars {
                font-size: 19px;
                gap: 6px;
            }

            .close-btn {
                font-size: 28px;
            }
        }

        /* Mobile: 390px */
        @media (max-width: 390px) and (min-width: 376px) {
            .modal-content-public {
                padding: 30px;
                gap: 24px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 440px;
            }

            .testimonial-text h2 {
                font-size: 22px;
                margin-bottom: 16px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 20px;
                gap: 6px;
            }
        }

        /* Mobile: 412px */
        @media (min-width: 400px) and (max-width: 412px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 470px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 13px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
            
        }

        /* Mobile: 414px */
        @media (max-width: 414px) and (min-width: 413px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 450px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 17px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
        }

        /* Mobile: 430px */
        @media (max-width: 430px) and (min-width: 415px) {
            .modal-content-public {
                padding: 35px;
                gap: 26px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 460px;
            }

            .testimonial-text h2 {
                font-size: 24px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 7px;
            }
        }

        /* Tablet: 540px */
        @media (max-width: 540px) and (min-width: 431px) {
            .modal-content-public {
                padding: 40px;
                gap: 30px;
                flex-direction: column;
                max-width: 440px;
                max-height: 500px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 200px;
                width: 95%;
                margin: auto;
            }

            .testimonial-image img{
                width: 550px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.7;
                margin-bottom: 5px;
            }

            .public-stars {
                font-size: 20px;
                gap: 8px;
            }

        }


        /* Tablet: 853px */
        @media (min-width: 810px) and (max-width: 820px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: column !important;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image{
                max-width: 750px;
                height: 400px !important;
                margin: auto;
            }

            .testimonial-image img{
                width: 750px !important;
                height: 700px !important;
            }

            .testimonial-text h2 {
                font-size: px !important;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 18px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

         /* Tablet: 853px */
        @media (max-width: 1024px) and (min-width: 769px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: row;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image img{
                width: 650px !important;
                height: 650px;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
            .ds-update-content{
                display: grid;
                grid-template-columns: 1fr auto;
                gap:20px;
                align-items: start;
            }
            .best-seller-thumbnail{
                grid-column: 2;
                grid-row: 1 / -1;
                margin-top: 0;
                align-self: center;
                width: 150px;
               
            }
            .best-seller-thumbnail img{
                height: 120px;
            }
            .ds-update-details-row{
                justify-content: flex-start;
            }
        }

        @media (max-width: 912px) and (min-width: 854px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 40px;
                flex-direction: column;
                max-width: 800px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 360px;
                width: 720px;
                margin: auto;
            }

            .testimonial-image img{
                width: 900px !important;
                height: 750px;
            }

            .testimonial-text h2 {
                font-size: 30px !important;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 20px !important;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Tablet: 992px */
        @media (max-width: 992px) and (min-width: 941px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 800px;
            }

            .testimonial-image {
                flex: 0 0 350px;
                height: 320px;
            }

            .testimonial-text h2 {
                font-size: 26px;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Desktop: 1024px */
        @media (max-width: 1024px) and (min-width: 993px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 870px;
                height: 400px;
            }
            .modal-overlay {
                height: 700px;
                margin: auto;
            }
            .testimonial-image {
                flex: 0 0 400px;
                height: 300px;
            }

            .testimonial-image img{
                width: 600px;
                height: 550px;
            }

            .testimonial-text h2 {
                font-size: 36px;
                margin-bottom: -10px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

        /* Desktop: 1280px and above */
        @media (min-width: 1100px) and (max-width: 1280px){
            .modal-content-public {
                padding: 50px;
                gap: 40px;
                max-width: 1100px;
                flex-direction: row;
                height: 550px;
            }

            .testimonial-image {
                flex: 0 0 550px !important;
                height: 400px !important;
                margin: auto;

            }

            .testimonial-image img{
                flex: 0 0 300px !important;
                height: 400px;
                margin: auto;
            }

            .testimonial-text h2 {
                font-size: 28px;
                margin-bottom: 20px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 20px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

.public-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-public-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;
    margin-top: -40px;
    background-image: linear-gradient(180deg, rgba(255, 23, 68, 0) 30%, rgba(255, 23, 68, 0.5) 60%, rgba(187, 134, 252, 1) 100%),
    url('https://i.pinimg.com/1200x/e6/f8/96/e6f896b726a7fe83a306673b2c5c4a18.jpg');
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 85%,
    transparent 100%);
    overflow: hidden;
}

.public-header {
    position: absolute;
    justify-content: center;
    margin-top: 480px;
    text-align: center;
    padding: 40px 60px;
    width: 100%;
}

.public-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.publicproj {
    text-align: center;
    padding: 40px 20px;
}

.publicproj.is-hidden {
    opacity: 0;
}

.publicproj.animate-visible {
    animation: 1.5s anim-fadeIn linear forwards;
}

.are-public {
    font-size: 32px !important;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* 344px - 349px */
@media (min-width: 344px) and (max-width: 349px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 250px;
        padding: 20px 15px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.1;
    }
    .publicproj {
        padding: 30px 12px;
    }
    .are-public {
        font-size: 14px !important;
        margin-top: -50px;
        margin-bottom: -90px !important;
    }
}

/* 350px - 360px */
@media (min-width: 350px) and (max-width: 360px) {
    .primary-public-wrapper {
        height: 320px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 200px;
        padding: 25px 18px;
    }
    .public-header h1 {
        font-size: 26px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 30px 14px;
    }
    .are-public {
        font-size: 15px !important;
        margin-bottom: -60px !important;
        margin-top: -40px;
    }
}

/* 361px - 375px */
@media (min-width: 361px) and (max-width: 375px) {
    .primary-public-wrapper {
        height: 350px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 160px !important;
        padding: 28px 20px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 32px 15px;
    }
    .are-public {
        font-size: 16px !important;
        margin-bottom: -100px !important;
        margin-top: -60px !important;
    }
}

/* 376px - 390px */
@media (min-width: 376px) and (max-width: 390px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 230px;
        padding: 30px 22px;
    }
    .public-header h1 {
        font-size: 30px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 34px 16px;
    }
    .are-public {
        font-size: 17px !important;
        margin-top: -50px;
        margin-bottom: -30px !important;
    }
}

/* 391px - 412px */
@media (min-width: 391px) and (max-width: 412px) {
    .primary-public-wrapper {
        height: 380px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 230px !important;
        padding: 32px 24px;
    }
    .public-header h1 {
        font-size: 32px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px !important;
    }
}

/* 413px - 414px */
@media (min-width: 413px) and (max-width: 414px) {
    .primary-public-wrapper {
        height: 485px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 235px !important;
        padding: 32px 25px;
    }
    .public-header h1 {
        font-size: 40px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-top: -40px !important;
        margin-bottom: -20px !important;
    }
}

/* 415px - 429px */
@media (min-width: 415px) and (max-width: 430px) {
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 33px 26px;
    }
    .public-header h1 {
        font-size: 36px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 19px;
    }
    .are-public {
        font-size: 19px !important;
        margin-top: -40px;
        margin-bottom: 30px !important;
    }
}

/* 530px - 540px */
@media (min-width: 530px) and (max-width: 540px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 450px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 260px !important;
    }
    .public-header h1 {
        font-size: 42px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 25px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px;
        margin-top: -40px;
        max-width: 100%;
    }
}

/* 760px - 768px */
@media (min-width: 760px) and (max-width: 768px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 300px !important;
        padding: 38px 45px;
    }
    .public-header h1 {
        font-size: 45px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 30px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 810px - 820px */
@media (min-width: 810px) and (max-width: 820px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 850px - 853px */
@media (min-width: 850px) and (max-width: 853px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 900px - 912px */
@media (min-width: 900px) and (max-width: 912px) {
    .public-area {
        margin: 48px auto 48px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 300px;
        padding: 39px 55px;
    }
    .public-header h1 {
        font-size: 50px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 45px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 980px - 992px */
@media (min-width: 980px) and (max-width: 992px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 600px !important;
        margin-top: -40px;
    }
    .public-header {
        margin-top: 450px;
        padding: 40px 58px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 30px !important;
        margin-bottom: 2rem;
    }
}

/* 1000px - 1024px */
@media (min-width: 1000px) and (max-width: 1024px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 400px !important;
        margin-top: -80px !important;
    }
    .public-header {
        margin-top: 150px !important;
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 58px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
        margin-top: -60px;
    }
}

/* 1270px - 1280px */
@media (min-width: 1270px) and (max-width: 1280px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 480px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 270px;  
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
        margin-top: -50px;
    }
}

/*Mission Vision CSS*/
/* Mission and Vision Section */
.mission-vision-wrapper {
    background: #000000;
    padding: 80px 20px;
    position: relative;
    overflow-x: hidden;
}

.mission-vision-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #333 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
    animation: dotPulse 4s linear infinite;
}

@keyframes dotPulse {
    0% { opacity: 0.2; }
    15% { opacity: 0.3; }
    30% { opacity: 0.45; }
    50% { opacity: 0.7; }
    70% { opacity: 0.45; }
    85% { opacity: 0.3; }
    100% { opacity: 0.2; }
}

.mission-vision-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4  0px;
    position: relative;
    z-index: 1;
}

.mission,
.vision {
    background: #0a0a0a;
    padding: 60px 40px;
    border-radius: 20px;
    border: 2px solid;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission {
    animation-delay: 0.2s;
}

.vision {
    animation-delay: 0.4s;
}

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

.mission {
    border-color: #00ff88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    animation: fadeInUp 0.8s ease-out 0.2s forwards, borderPulse 3s ease-in-out infinite;
}

.vision {
    border-color: #0088ff;
    box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    animation: fadeInUp 0.8s ease-out 0.4s forwards, borderPulseBlue 3s ease-in-out infinite;
}

.mission:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 255, 136, 0.5);
    border-color: #00ffaa;
}

.vision:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 136, 255, 0.5);
    border-color: #00aaff;
}

/* Animated glow effect */
.mission::before,
.vision::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 8s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Shimmer effect on hover */
.mission::after,
.vision::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.mission:hover::after,
.vision:hover::after {
    transform: translateX(100%);
}

@keyframes borderPulse {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 255, 136, 0.6);
    }
}

@keyframes borderPulseBlue {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 136, 255, 0.6);
    }
}

.mission h2,
.vision h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: slideInLeft 0.8s ease-out;
}

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

.mission p,
.vision p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #e0e0e0;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 968px) {
    .mission-vision-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .mission,
    .vision {
        padding: 50px 35px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 640px) {
    .mission-vision-wrapper {
        padding: 60px 15px;
    }

    .mission,
    .vision {
        padding: 40px 25px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .mission p,
    .vision p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .mission,
    .vision {
        padding: 30px 20px;
    }

    .mission h2,
    .vision h2 {
        font-size: 1.75rem;
        margin-bottom: 15px;
    }

    .mission p,
    .vision p {
        font-size: 0.9rem;
    }

}

/* FDAS Details Page Styles */
.glow-model-container {
    position: relative;
    overflow: visible;
}

.glow-model-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    opacity: 0.3;
    filter: blur(20px);
    z-index: -1;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.model-container {
    position: relative;
    z-index: 1;
}

.gradient-icon {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modern-feature-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: 0.8rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.modern-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.1), rgba(103, 28, 104, 0.1), rgba(123, 84, 177, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.modern-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
}

.modern-feature-card:hover::before {
    opacity: 1;
}

.feature-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.15), rgba(123, 84, 177, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.modern-feature-card:hover .feature-icon-wrapper {
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.25), rgba(123, 84, 177, 0.25));
    transform: scale(1.05);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.feature-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(5px);
}

.feature-item .icon-large {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 70px;
    text-align: center;
}

.feature-item .feature-content h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
}

.feature-item .feature-content p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    font-family: 'Lexend', sans-serif;
}

.gallery-section {
    padding: 80px 0;
    background: #000000;
}

.gallery {
    --size: 100px;
    display: grid;
    grid-template-columns: repeat(6, var(--size));
    grid-auto-rows: var(--size);
    margin-bottom: var(--size);
    place-items: start center;
    gap: 5px;
}

.gallery:has(:hover) img:not(:hover),
.gallery:has(:focus) img:not(:focus) {
    filter: brightness(0.5) contrast(0.5);
}

.gallery img {
    object-fit: cover;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z");
    transition: clip-path 0.25s, filter 0.75s;
    grid-column: auto / span 2;
    border-radius: 5px;
}

.gallery img:nth-child(5n - 1) { 
    grid-column: 2 / span 2 
}

.gallery img:hover,
.gallery img:focus {
    clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z");
    z-index: 1;
    transition: clip-path 0.25s, filter 0.25s;
}

.gallery img:focus {
    outline: 1px dashed black;
    outline-offset: -5px;
}

.fdas-invest-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.fdas-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(10px);
}

.benefit-icon {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.benefit-text {
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
}

/* Mobile responsive for gallery */
@media (max-width: 767px) {
    .gallery-section {
        padding: 40px 0;
    }
    
    /* Hide gallery on mobile, show product visual instead */
    .gallery {
        display: none;
    }
    
    .mobile-product-visual {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        margin: 0 auto 40px auto;
        
        /* Use FDAS-related image */
        background-image: url(https://cdn.pixabay.com/photo/2023/09/25/17/12/fire-alarm-8275669_1280.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: 8px solid transparent;
        border-radius: 15px;
        transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
    }
    
    .mobile-product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #AC3838 0%, #671C68 50%, #7B54B1 100%) 1;
    }
}

/* Hide mobile product visual on desktop */
.mobile-product-visual {
    display: none;
}

/* FDAS Details Page Additional Styles */
.fire-alarm-model-section {
    padding: 80px 0;
    background: #000000;
}

.simplex-sensor-model-section {
    padding: 80px 0;
    background: #000000;
}

.model-container {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.model-viewer-fdas {
    width: 100%;
    height: 100%;
    background: #000;
}

.fdas-footer {
    background-color: #090909;
    padding: 0px 30px;
}

.fdas-copyright {
    color: #ffffff;
    font-family: 'Lexend', sans-serif;
}

.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-left: 1rem;
}

.navbar-toggler-custom {
    margin-right: 1rem;
}

.CompanyInfo-logo {
    width: 17.1875rem;
    height: 6.25rem;
}

/* FDAS Investment Carousel Styles */
.fdas-investment-carousel {
    padding: 80px 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.fdas-investment-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05), rgba(103, 28, 104, 0.05), rgba(123, 84, 177, 0.05));
    z-index: 1;
}

.carousel-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 2;
    margin-bottom: 3rem;
}

.carousel-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-container {
    position: relative;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    transform: translateX(100%);
}

.carousel-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.carousel-content {
    display: flex;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    border-radius: 20px;
    overflow: hidden;
}

.carousel-image {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    display: none;
}

.carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.carousel-slide:hover .carousel-image img {
    transform: scale(1.05);
}

.carousel-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 6rem 3rem 3rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
    position: relative;
    z-index: 2;
}

.carousel-text h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.carousel-text p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.carousel-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 100;
    pointer-events: none;
}

.carousel-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    margin: 0 0.5rem;
}

.carousel-btn:hover {
    background: linear-gradient(135deg, rgba(172, 56, 56, 1), rgba(123, 84, 177, 1));
    transform: scale(1.1);
}

.carousel-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 100;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    transform: scale(1.2);
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .fdas-investment-carousel {
        padding: 40px 0;
    }
    
    .carousel-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    .carousel-container {
        height: 400px;
    }
    
    .carousel-content {
        flex-direction: column;
        position: relative;
    }
    
    .carousel-image {
        height: 100%;
        position: relative;
    }
    
    .carousel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .carousel-overlay {
        display: block;
        background: rgba(0, 0, 0, 0.8);
    }
    
    .carousel-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 4rem);
        padding: 2rem;
        background: transparent;
        text-align: center;
    }
    
    .carousel-text h3 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.9rem;
        margin-bottom: 0;
        padding: 0 3rem;
        text-align: center;
    }
    
    .carousel-controls {
        padding: 0 1rem;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border: none;
        background: transparent;
        color: white;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        backdrop-filter: none;
        border-radius: 0;
    }
    
    .carousel-btn:hover {
        background: transparent;
        transform: scale(1.1);
        color: rgba(255, 255, 255, 0.9);
    }
    
    .carousel-indicators {
        display: none;
    }
    
    .indicator {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        height: 350px;
    }
    
    .carousel-text {
        padding: 1.5rem;
    }
    
    .carousel-text h3 {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }
}


/* Custom CSS for dreampcbuildanditsolutionsinc */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

/* Body and layout adjustments */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #000000;
    padding-top: 76px; /* Account for fixed navbar */
}


/* Navigation Styles */
.navbar {
    background-color: #000000 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    width: 100%;
    height: 80px; /* Important: Define navbar height */
}

/* Optional: Remove padding/margin that could cause centering issues */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Flex container for navbar */
.navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    width: 100%;
}

/* Logo + Text wrapper */
.navbar-brand {
    display: flex;
    align-items: center;
    margin-right: auto; /* Pushes everything else away */
    font-weight: 600;
    font-size: 1.2rem;
    color: #fff !important;
    text-decoration: none;
    transition: none;
    transform: none;
}

/* Logo Image */
.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: none;
    display: block;
    transition: none;
    transform: none;
    animation: none;
    margin-right: 8px;
}

.brand-logo:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Brand Text */
.brand-text {
    font-weight: 600;
    letter-spacing: -0.5px;
    transition: none;
    transform: none;
    animation: none;
}

/* Nav links container */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*Mobile Navbar*/
.navbar-toggler {
    background: transparent;
    border: none;
}

/* Services Slider Navigation Buttons */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    font-size: 18px;
}

.slider-nav-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

.slider-nav-btn.prev {
    left: 20px;
}

.slider-nav-btn.next {
    right: 20px;
}

/* Mobile navigation collapse background */
.navbar-collapse {
    background-color: #000000 !important;
    padding-bottom: 1rem; /* Add gap at bottom of mobile navbar dropdown */
}

/* Nav links */
.navbar-nav .nav-link {
    color: #fff !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-family: 'Space Grotesk', sans-serif;
}

.navbar-nav .nav-link:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    color: transparent !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
    background-color: transparent !important;
    transform: none !important;
}

.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active,
.navbar.navbar-dark .navbar-nav .nav-item .nav-link.active:hover,
.navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav .nav-item .nav-link.active:hover {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

.navbar-nav .nav-link[href="index.html"].active {
    background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
    color: transparent !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-color: transparent !important;
}

/* Remove blue focus outline from navbar links */
.navbar-nav .nav-link:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* ============ HERO SECTION STYLES ============= */

.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 260px 0 0;
}

/* Add gradient fade to hero section bottom */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 20%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.7) 80%,
        rgba(0, 0, 0, 0.9) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.gradient-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 70%;
        height: 100%;
        background: black;
}

.wave-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* First layer - Large diagonal sweep */
.wave-overlay::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 120%;
    height: 140%;
    background: 
        linear-gradient(135deg, 
        transparent 20%, 
        transparent 35%,
        rgba(160, 74, 179, 0.2) 40%,
        rgba(102, 11, 35, 0.3) 45%,
        rgba(160, 74, 179, 0.1) 55%,
        transparent 70%,
        transparent 100%
    );
        animation: diagonalFlow 11s ease-in-out infinite;
        transform-origin: center;
}

/* Second layer - Curved abstract shape */
.wave-overlay::after {
        content: '';
        position: absolute;
        bottom: 5%;
        left: -20%;
        width: 150%;
        height: 100%;
        background: 
        radial-gradient(ellipse 1200px 800px at 30% 80%, 
        rgba(160, 74, 179, 0.2) 30%, 
        rgba(102, 11, 35, 0.15) 35%,
        transparent 60%
    ),
        radial-gradient(ellipse 900px 600px at 80% 30%, 
        rgba(31, 2, 6, 0.18) 0%, 
        transparent 50%
    );
        animation: abstractMove 12s ease-in-out infinite;
        filter: blur(85px);
}

/* Third layer - Dynamic top gradient */
.gradient-background::before {
        content: '';
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translateX(-50%);
        width: 150%;
        height: 80%;
        z-index: 1;
        background: 
        linear-gradient(180deg,
        rgba(102, 11, 35, 0.15) 30%,
        rgba(160, 74, 179, 0.12) 50%,
        transparent 70%
    );
        animation: topFlow 4s ease-in-out infinite;
        filter: blur(80px);
}

    @keyframes diagonalFlow {
        0%, 100% {
        transform: translate(0%, 0%) rotate(0deg);
        opacity: 1;
}
        25% {
        transform: translate(-15%, 10%) rotate(-5deg);
        opacity: 0.8;
}
        50% {
        transform: translate(-25%, 15%) rotate(-8deg);
        opacity: 1;
}
        75% {
        transform: translate(-15%, 8%) rotate(-3deg);
        opacity: 0.9;
}
}

    @keyframes abstractMove {
        0%, 100% {
        transform: translate(0%, 0%) scale(1);
}
        33% {
        transform: translate(15%, -10%) scale(1.1);
}
        66% {
        transform: translate(-10%, 12%) scale(0.7);
}
}

    @keyframes topFlow {
        0%, 100% {
        transform: translateX(-50%) translateY(15%);
}
        50% {
        transform: translateX(-45%) translateY(25%);
}
}


.hero-content {
    z-index: 2;
    position: relative
}

#model-logo {
  width: 100%;
  max-width: 550px;
  height: 1000px;
  margin-top: -250px;
  z-index: 100;
  position: relative;
}


#model-logo::part(default-camera) {
  transform: rotateX(-90deg);
}

/* Adjust positioning for the container */
.col-lg-5.position-relative {
  padding-left: 100px;
}

/* Responsive adjustments */

@media (min-width: 768px) and (max-width: 820px) {
  #model-logo {
    height: 480px;
    max-width: 420px;
    margin-top: 30px;
    margin-bottom: -35px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 45px;
    justify-content: center !important;
  }
  .call-to-action-btn{
    margin-top: 20px;
  }
}

@media (min-width: 390px) and (max-width: 430px) {
  #model-logo {
    height: 280px;
    max-width: 250px;
    margin-top: -50px;
    margin-bottom: -50px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 75px;
    justify-content: center !important;
  } 
}

@media (min-width: 375px) and (max-width: 414px) {
  #model-logo {
    height: 260px;
    max-width: 220px;
    margin-top: 20px;
    margin-bottom: -45px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 78px;
    justify-content: center !important;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  #model-logo {
    height: 550px;
    max-width: 500px;
    margin-top: 0;
    margin-bottom: 40px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 15px;
  }
}

@media (max-width: 375px) {
  #model-logo {
    height: 240px;
    max-width: 200px;
    margin-top: 0;
    margin-bottom: -70px;
  }
  
  .col-lg-5.position-relative {
    padding-right: 65px;
    justify-content: center !important;
  }
}

.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    
}

.manual-titleposition {
    position: absolute;
    bottom: 15rem;
    left: -10rem; /* Custom stylized position */
    z-index: 3;
    margin: 0;
    font-size: 12rem !important;
    line-height: 1;
    transition: left 0.3s ease-in-out;
}

.manual-subtitleposition {
    position: absolute;
    bottom: 6rem;
    left: 4rem;
    margin: 0;
    font-size: 8rem !important;
    line-height: 1;
    white-space: nowrap;
}

.hero-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.5rem;
    font-weight: 100;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
   
}

.hero-description {
    font-family: 'Lexend', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #b3b3b3;
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 600px;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-btn-primary {
    font-family: 'Lexend', sans-serif;
    background: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: PulseButton 3s ease-in-out 1.6s infinite;
}

    .hero-btn-primary:hover {
        background: #ffffff;
        color: #000000;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px  rgba(102, 11, 35, 0.4);
    }

.hero-btn-secondary {
    font-family: 'Lexend', sans-serif;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: PulseButton 3s ease-in-out 1.6s infinite;
}

    .hero-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px  rgba(102, 11, 35, 0.4); 
    }

@keyframes PulseButton {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}   

.manual-descriptionposition {
    position: absolute;
    bottom: -0.5rem;
    left: 4.5rem;
    font-size: 1.75rem;
    max-width: 700px;
    color: #b3b3b3;
    z-index: 3;
}

.manual-buttonposition {
    position: absolute;
    top: -0.6rem;
    left: 4.5rem;
    z-index: 3;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Responsive Fix for Small Screens */
@media (max-width: 1024px) {
    .hero-section {
        padding: 2rem 1rem !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-content {
        padding-top: 2.5rem;
        padding-bottom: 8rem;
        width: 100%;
    }

    .manual-titleposition,
    .manual-subtitleposition,
    .manual-descriptionposition,
    .manual-buttonposition {
        position: static !important;
        margin: 0.5rem auto !important;
        text-align: center;
        width: 85% !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .manual-titleposition {
        font-size: clamp(3.5rem, 9vw, 5rem) !important;
        line-height: 1.1;
    }

    .manual-subtitleposition {
        font-size: clamp(2rem, 7vw, 4rem) !important;
        white-space: normal !important;
        margin-top: -13px !important;
    }

    .manual-descriptionposition {
        font-size: clamp(1rem, 3vw, 1.2rem) !important;
        line-height: 1.5;
    }

    .manual-buttonposition {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        font-size: 14px;
        width: 80% !important;
        justify-content: center;
    }
}

/* ALIGN TITLE WITH SUBTITLE ON ULTRA-WIDE SCREENS */
@media (min-width: 1920px) {
    .manual-titleposition {
        left: 4rem !important; /* aligns with subtitle */
    }
}


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

/* PROJECTS SECTION STYLES */
.projects-section {
    padding: 10px 0;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin-top: -115px;
}

/* Hero to Projects Transition Overlay */
.hero-projects-overlay {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.2) 8%,
        rgba(0, 0, 0, 0.4) 15%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0.75) 35%,
        rgba(0, 0, 0, 0.85) 45%,
        rgba(0, 0, 0, 0.9) 50%,
        rgba(0, 0, 0, 0.85) 55%,
        rgba(0, 0, 0, 0.75) 65%,
        rgba(0, 0, 0, 0.6) 75%,
        rgba(0, 0, 0, 0.4) 85%,
        rgba(0, 0, 0, 0.2) 92%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 2;
    margin-top: -200px;
    margin-bottom: -200px;
    pointer-events: none;
}

    .projects-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        pointer-events: none;
    }

    .projects-section > .container {
        position: relative;
        z-index: 1;
    }


/* Project Cards */
.project-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 250px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-card-small {
    height: 250px;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.project-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.project-card:hover .project-card-bg {
    transform: scale(1.05);
}

.project-card-bg-pc {
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pc::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 150, 136, 0.6) 0%, rgba(0, 188, 212, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-fdas {
    background-image: url('/images/dpc-fdas.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-fdas::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 87, 34, 0.6) 0%, rgba(255, 152, 0, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-cctv {
    background-image: url('/images/dpc-cctv.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-cctv::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

    .project-card-bg-doorlock {
    background-image: url('/images/services/accessControlSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-doorlock::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.6) 0%, rgba(121, 134, 203, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-pa {
    background-image: url('/images/services/paSystem.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-pa::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(156, 39, 176, 0.6) 0%, rgba(186, 104, 200, 0.4) 100%);
        background-blend-mode: overlay;
    }

.project-card-bg-led {
    background-image: url('/images/services/LEDWall.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .project-card-bg-led::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(233, 30, 99, 0.6) 0%, rgba(240, 98, 146, 0.4) 100%);
        background-blend-mode: overlay;
    }


.project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.2) 100%);
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    z-index: 2;
}

.project-card-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.project-card-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

.project-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    border-width: 2px;
    background: linear-gradient(90deg, #ff0000, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082, #ee82ee, #ff0000, #ff0000);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

 .project-card-icon :hover{
    /* To make the text itself look like a gradient */
    background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    background-size: 200% 100%;
    transform: scale(1.05);
    animation: rainbowBorder 3s linear infinite;
    -webkit-background-clip: text; /* Clip the gradient to the shape of the text */
    background-clip: text; /* Standard property for compatibility */
    -webkit-text-fill-color: transparent; /* Make the text invisible to show the clipped background */
    transform: scale(1.3);
    border-color: rgba(255, 255, 255, 0.2);
 }

.project-card-icon i {
    color: #ffffff !important;
    font-size: 1rem;
}

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

    .projects-description {
        font-size: 1rem;
    }

}

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

    .projects-title,
    .projects-subtitle {
        font-size: 2rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .project-card,
    .project-card-small {
        height: 200px;
    }

    .project-card-title {
        font-size: 1.1rem;
    }

    .project-card-overlay {
        padding: 1.5rem;
    }
    
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .project-card-title {
        font-size: 1rem;
    }

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

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

.projects-header {
    position: relative;
    height: 450px;
    padding: 60px 0;
    margin-bottom: 60px;
    margin-left: -15px;
    margin-right: -15px;
    overflow: visible;
    background-image: url('/images/dpc-project-img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Add gradient fade to projects header top */
.projects-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.7) 30%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.1) 85%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.projects-header::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 300px;
    background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
    filter: blur(70px) brightness(1.5);
    z-index: 1;
    opacity: 1.2;
}
.projects-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .projects-header-content {
        padding: 0px 20px;
        position: relative;
        z-index: 2;
        text-align: center;
        margin-top: -200px;
    }
    .projects-header {
        height: 250px;
        margin-top: 9px;
        background-attachment: scroll;
    }
    .projects-header::after {
        content: "";
        position: absolute;
        bottom: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient(90deg, #1F0206 0%, #660B23 50%, #A04AB3 100%);
        filter: blur(70px);
        z-index: 1;
    }
}
.projects-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.projects-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 300;
}

.projects-section-title {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Responsive Design for Header */
@media (max-width: 992px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.8rem;
    }

    .projects-description {
        font-size: 1.1rem;
        padding: 0 2rem;
    }
}

@media (max-width: 768px) {
    .projects-title,
    .projects-subtitle {
        font-size: 2.2rem;
    }

    .projects-description {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
}

@media (max-width: 576px) {
    .projects-title,
    .projects-subtitle {
        font-size: 1.8rem;
    }

    .projects-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .projects-section-title {
        font-size: 1.3rem;
    }
}

/* Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

.projects-subtitle {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}





/* === FINAL OVERRIDE for .projects-section-title === */
.projects-section-title {
    margin-top: 50px;
    padding-top: 180px;
    padding-bottom: 50px;
    font-size: 10rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
    opacity: 1; 
}

.projects-section-title:hover{
    transform: translateY(-8px) scale(1.1);
}

@media (max-width: 992px) {
    .projects-section-title {
        font-size: 6rem;
    }
}

@media (max-width: 768px) {
    .projects-section-title {
        font-size: 4rem;
    }
}

@media (max-width: 576px) {
    .projects-section-title {
        font-size: 2.8rem;
    }
}

/* Logo Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }

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

/* Responsive Design for Hero Section */
@media (max-width: 992px) {
    .hero-title,
    .hero-subtitle {
        font-size: 3.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 60px 0;
        text-align: center;
        background-color: #000000;
        margin-top: 5rem;
    }

    .hero-title,
    .hero-subtitle {
        font-size: 2.5rem;
    }

    .hero-logo {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
        margin-left: 2rem;
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .hero-title,
    .hero-subtitle {
        font-size: 2rem;
        
    }

    .hero-logo {
        width: 150px;
        height: 150px;
    }

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

/* Main content area */
.main-content {
    min-height: calc(100vh - 140px);
    padding: 2rem 0;
    margin-top: 90px; /* Same as navbar height */
}

/* Container adjustments */
.container {
    max-width: 1200px;
}

/* Remove default margins from headings */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}

/* Button styles */
.btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

    .btn-primary:hover {
        background-color: #0b5ed7;
        border-color: #0a58ca;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
    }

/* Card styles */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }

/* Footer styles */
footer {
    background-color: #000000 !important;
    margin-top: auto;
}
footer a {
    transition: color 0.3s ease;
}
footer a:hover {
    color: #0d6efd !important;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .CompanyInfo-footer, .CompanyServices-footer {
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        padding-bottom: 15px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }

    .brand-text {
        display: none;
    }

    .brand-logo {
        width: 32px;
        height: 32px;
        
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0;
    }

    body {
        padding-top: 70px;
    }
}

/* Loading animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Utility classes */
.text-gradient {
    background: linear-gradient(45deg, #0d6efd, #6610f2);
    -webkit-text-fill-color: transparent;
}

.shadow-custom {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Focus states for accessibility */
.nav-link:focus,
.btn:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Contact Hero Section */
.contact-hero {
    min-height: 100vh;
    background: #000000;
    display: flex;
    align-items: center;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

    .contact-hero .container {
        position: relative;
        z-index: 2;
    }

/* Hero Title */
.hero-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-align: center;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
 }


.sync-text {
    background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Hero Subtitle */
.hero-subtitle {
    font-family: 'Lexend', sans-serif;
    font-size: 1.2rem;
    color: white;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    animation: 2s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* Contact Form Container */
.contact-form-container {
    background: #000000;
    border-radius: 20px;
    padding: 40px;
    border: 1px solid #FDFDFD;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 20px rgba(255, 102, 102, 0.3), 0 0 40px rgba(255, 137, 76, 0.2), 0 0 60px rgba(144, 255, 85, 0.2), 0 0 80px rgba(123, 148, 246, 0.2), 0 0 100px rgba(255, 119, 241, 0.2);
}

    .contact-form-container::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #FF6666, #FF894C, #90FF55, #7B94F6, #FF77F1);
        background-size: 300% 300%;
        border-radius: 20px;
        z-index: -1;
        animation: gradientShift 3s ease-in-out infinite;
    }

    .contact-form-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000000;
        border-radius: 18px;
        z-index: -1;
    }

/* Form Inputs */
.contact-input,
.contact-textarea {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: #ffffff;
    padding: 15px 20px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .contact-input:focus,
    .contact-textarea:focus {
        background: rgba(255, 255, 255, 0.05);
        border-color: #4ecdc4;
        box-shadow: 0 0 0 0.2rem rgba(78, 205, 196, 0.25);
        color: #ffffff;
    }

    .contact-input::placeholder,
    .contact-textarea::placeholder {
        color: rgba(255, 255, 255, 0.6);
        font-family: 'Lexend', sans-serif;
    }

.contact-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Submit Button */
.contact-submit-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #ffffff;
    padding: 15px 40px;
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: uppercase;
}

    .contact-submit-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #4ecdc4;
        color: #4ecdc4;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
    }

    .contact-submit-btn:active {
        transform: translateY(0);
    }

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

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .contact-form-container {
        padding: 30px 20px;
        margin: 0 15px;
    }

    .contact-input,
    .contact-textarea {
        padding: 12px 15px;
    }

    .contact-submit-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
        
    }

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

    .contact-form-container {
        padding: 25px 15px;
    }
}


/* Social Icons Container */
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: nowrap;
}

/* Individual Social Icon Styling */
.social-icon {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
    transform: translateY(0);
}

    /* Hover state for the container */
    .social-icon:hover {
        transform: translateY(-8px) scale(1.1);
    }

    /* Icon image styling */
    .social-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: all 0.3s ease;
        filter: brightness(0.9);
    }

    /* Image hover effect - Glowing lines/outlines */
    .social-icon:hover img {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
        animation: glowPulse 2s ease-in-out infinite;
    }

/* Pulsing glow animation */
@keyframes glowPulse {
    0%, 100% {
        filter: brightness(1.2) contrast(1.1) drop-shadow(0 0 8px #FF6666) drop-shadow(0 0 12px #FF894C) drop-shadow(0 0 16px #90FF55) drop-shadow(0 0 20px #7B94F6) drop-shadow(0 0 24px #FF77F1);
    }

    50% {
        filter: brightness(1.4) contrast(1.2) drop-shadow(0 0 12px #FF6666) drop-shadow(0 0 16px #FF894C) drop-shadow(0 0 20px #90FF55) drop-shadow(0 0 24px #7B94F6) drop-shadow(0 0 28px #FF77F1);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .social-icons {
        gap: 15px;
        padding: 15px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .social-icons {
        gap: 10px;
        padding: 10px;
        flex-wrap: wrap;
    }

    .social-icon {
        width: 45px;
        height: 45px;
    }
}

/* Address styling with Lexend font */
address {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem; /* small font size */
    margin-bottom: 1rem; /* mb-3 equivalent */
    font-style: normal; /* Remove default italic styling from address element */
    line-height: 1.5;
}

/* Gradient hover for address */
address.text-white:hover {
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}

/* Alternative class-based approach if you prefer */
.address-lexend {
    font-family: 'Lexend', sans-serif;
    color: white;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    font-style: normal;
    line-height: 1.5;
}

/* Menu and Help Center Section Headers */
.col-md-2 h6 {
    font-family: 'Lexend', sans-serif;
    color: #000000;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Menu and Help Center Lists */
.col-md-2 ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Menu and Help Center List Items */
.col-md-2 ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

/* Menu and Help Center Links */
.col-md-2 ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Hover effects for links */
.col-md-2 ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* Gradient hover for CompanyServices-footer links */
.CompanyServices-footer a:hover {
    color: transparent !important;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s;
}

/* Alternative more specific selectors if needed */
.menu-section h6,
.help-center-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #555555;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.menu-section ul,
.help-center-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-section ul li,
.help-center-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.menu-section ul li a,
.help-center-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.menu-section ul li a:hover,
.help-center-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/* General footer section styling with Lexend */
.footer-section {
    font-family: 'Lexend', sans-serif;
}

.footer-section h6 {
    font-family: 'Lexend', sans-serif;
    color: #ffffff;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.footer-section ul {
    font-family: 'Lexend', sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    font-family: 'Lexend', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.footer-section ul li a {
    font-family: 'Lexend', sans-serif;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.5;
}

.footer-section ul li a:hover {
    color: #f8f9fa;
    opacity: 0.8;
    transform: translateX(5px);
}

/*============= SERVICES =============*/

.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.offers-firsttitle {
    font-family: 'Lexend', sans-serif;
    font-size: 3rem;
    font-weight: 200;
    color: #ffffff;
    margin-bottom: 0;
    animation: fadeInDown 0.8s ease-out;
}

.offers-secondpctitle {
    background: linear-gradient(to right, #a7363c, #671C68, #7B54B1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondcctvtitle {
    background: linear-gradient(to right, #5CE1FF, #5CFFB8, #56D86A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-secondfdastitle {
    background: linear-gradient(to right, #FF6666, #C34814, #F3A335);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.offers-seconddoorlocktitle {
    background: linear-gradient(to right, #BA1022, #EC0120, #FD6A59);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin-top: -0.5rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.video-overlay-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.video-overlay-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: white;
    
}

/* RESPONSIVE - Video Overlay */

/* Ultra-wide screens (1440px+) */
@media (min-width: 1440px) {
    .video-overlay-title {
        font-size: 5rem;
        margin-bottom: 1.5rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 18px 48px;
        font-size: 1.1rem;
    }
}

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .video-overlay-title {
        font-size: 4.5rem;
        margin-bottom: 1.3rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.3rem;
        margin-bottom: 1.8rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 16px 44px;
        font-size: 1rem;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .video-overlay-title {
        font-size: 4rem;
        margin-bottom: 1.2rem;
    }
    
    .video-overlay-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.6rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 15px 40px;
        font-size: 0.95rem;
    }
}

/* Tablet landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .video-overlay-title {
        font-size: 3rem;
        margin-bottom: 1rem;
        text-shadow: 0 3px 15px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 1rem;
        margin-bottom: 1.4rem;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 36px;
        font-size: 0.9rem;
    }
}

/* Tablet portrait (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 12px 32px;
        font-size: 0.85rem;
    }
}

/* Mobile large (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    .video-overlay-container {
        height: 100vh;
    }
    
    .video-overlay-title {
        font-size: 2rem;
        margin-bottom: 0.7rem;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 11px 28px;
        font-size: 0.8rem;
    }
}

/* Mobile small (320px - 479px) */
@media (max-width: 479px) {
    .video-overlay-container {
        height: 100vh; /* Increased from 60vh to 80vh for taller mobile video section */
    }
    
    .video-overlay-content {
        padding: 0 2rem; /* Increased padding for mobile */
        text-align: center; /* Center align content on mobile */
        width: 90%; /* Ensure content doesn't reach edges */
    }
    
    /* Fix about video for mobile */
    .about-video {
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 250px !important;
        object-fit: cover;
        margin-top: 0 !important;
    }
    
    .col-lg-5.col-md-12.d-flex.justify-content-center.align-items-start.position-relative {
        width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Stack mission and vision cards vertically on mobile */
    .mission-vision-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Center projects header text on mobile */
    .projects-header {
        height: auto !important;
        min-height: 100vh;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-attachment: scroll !important;
    }
    
    .projects-header-content {
        margin-top: 0 !important;
        padding: 2rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: auto !important;
    }
    
    .video-overlay-title {
        font-size: 1.5rem;
        margin-bottom: 0.6rem;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    }
    
    .video-overlay-subtitle {
        font-size: 0.75rem;
        margin-bottom: 0.9rem;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 10px 24px;
        font-size: 0.75rem;
    }
}

/* ENHANCED TITLE ANIMATION */
.video-overlay-title {
    font-family: "Space Grotesk";
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    animation: titleEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               titleGlow 3s ease-in-out 1.2s infinite;
    opacity: 0;
}

/* Title entrance animation with bounce effect */
@keyframes titleEntrance {
    0% {
        opacity: 0;
        transform: translateY(-80px) scale(0.5) rotateX(90deg);
        filter: blur(10px);
    }
    60% {
        opacity: 1;
        transform: translateY(10px) scale(1.05) rotateX(-5deg);
        filter: blur(0px);
    }
    80% {
        transform: translateY(-5px) scale(0.98) rotateX(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0px);
    }
}


@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 30px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8),
                     0 0 50px rgba(255, 255, 255, 0.6),
                     0 0 70px rgba(172, 56, 56, 0.4);
    }
}

.video-overlay-subtitle {
    font-family: "Lexend";
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    animation: subtitleFade 1s ease-out 0.3s backwards;
}

@keyframes subtitleFade {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


.video-overlay-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
    color: white;
    border: none;
    padding: 18px 40px;
    border-radius: 50px;
    font-family: "Lexend";
    font-weight: 400;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    position: relative;
    overflow: hidden;
    animation: buttonEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulse 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


@keyframes buttonEntrance {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}


.video-overlay-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}


.video-overlay-button:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.7),
                0 0 50px rgba(172, 56, 56, 0.4);
    
}

.video-overlay-button:hover::before {
    animation: shimmer 1s infinite;
}

.video-overlay-button:active {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.6);
}

/* Ripple effect on click */
.video-overlay-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s, opacity 0.6s;
    opacity: 0;
}

.video-overlay-button:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}
/* ANIMATIONS */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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


@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* SLIDER CONTAINER STYLES */
.services-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000000;
    margin-top: 0;
    padding-top: 5px;
}

.services-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 400%;
}

/* 2. The Wrapper (The Sliding Track) */
#sliderWrapper {
    display: flex;          /* CRITICAL: Lines the slides (sections) up horizontally */
    width: 400%;            /* Total width: 4 slides * 100% = 400% */
    height: 100%;
    /* CRITICAL: This property makes the transition smooth */
    transition: transform 0.6s ease-in-out; 
}

/* 3. The Individual Slides (The content sections) */
#sliderWrapper > .offers-section {
    width: 25%;             /* Each slide takes up 1/4 of the 400% width */
    flex-shrink: 0;         /* CRITICAL: Prevents the slides from shrinking */
    height: 100%;
    box-sizing: border-box; 
    /* You may want to add overflow-y: auto; here if content might exceed the height */
}

/* SLIDER INDICATORS */
.slider-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 100;
}

.indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    animation: indicatorPulse 2s ease-in-out infinite;
}

.indicator.active {
    background: white;
    transform: scale(1.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: none;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

@keyframes indicatorPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* COMPANY OFFER SECTION STYLES */
.offers-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
    flex: 0 0 25%;
    width: 25%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    margin-top: -70px;
    transform: translateY(0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    position: relative;
}

.offers-section.active {
    opacity: 1;
    transform: translateY(0);
}

.offers-section.d-none {
    display: none !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.offers-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* MAP STYLES WITH ANIMATIONS */
.map-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem 0;
    width: 100%;
    overflow-x: hidden;
}

.map-scaler {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.map-scaler-inner {
    position: relative;
    width: 300px;
    height: 523px;
    transform: scale(calc(min(100vw, 1400px) / 1400));
    transform-origin: top center;
}

.map-container {
    position: absolute;
    width: 300px;
    height: 523px;
    top: 0;
    left: 0;
    animation: mapAppear 1.2s ease-out;
}

@keyframes mapAppear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

.label {
    position: absolute;
    color: white;
    text-align: center;
    animation: labelSlideIn 0.8s ease-out backwards;
}

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

.label-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.label-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.count-count {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    animation: countUp 1.5s ease-out;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.count-text {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 1;
}

.pc-icon {
    width: 94px;
    height: auto;
    animation: floatAnimation 3s ease-in-out infinite;
}

.left-label {
    top: 50%;
    left: -250px;
    transform: translateY(-50%);
    animation-delay: 0.2s;
}

.right-label.top {
    top: 60px;
    right: -250px;
    animation-delay: 0.4s;
}

.right-label.bottom {
    bottom: 100px;
    right: -350px;
    animation-delay: 0.6s;
}

.line-image {
    position: absolute;
    width: 160px;
    height: auto;
    transform: translateY(-100%);
    transform-origin: bottom left;
    animation: drawLine 1s ease-out backwards;
}

@keyframes drawLine {
    from {
        opacity: 0;
        transform: translateY(-100%) scaleY(0);
    }
    to {
        opacity: 1;
        transform: translateY(-100%) scaleY(1);
    }
}

/* GRADIENT BUTTONS */
.gradientpccolor-button {
    background: linear-gradient(135deg, #AC3838 0%, #671C68 25%, #7B54B1 75%, #000000 100%);
}

.gradientcctvcolor-button {
    background: linear-gradient(135deg, #5CE1FF 0%, #5CFFB8 25%, #56D86A 75%, #000000 100%);
}

.gradientfdascolor-button {
    background: linear-gradient(135deg, #FF6666 0%, #C34814 25%, #F3A335 75%, #000000 100%);
}

.gradientdoorlockcolor-button {
    background: linear-gradient(135deg, #BA1022 0%, #EC0120 25%, #FD6A59 75%, #000000 100%);
}

.gradient-button {
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(172, 56, 56, 0.3);
    outline: none;
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    animation: buttonAppear 0.8s ease-out 0.8s backwards;
}

@keyframes buttonAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gradient-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(172, 56, 56, 0.4);
}

.gradient-button:active {
    transform: translateY(0);
}

/* GRADIENT LOOP WITH SHADOW */
@keyframes gradientCycle {
    0% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(0deg);
    }
    50% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(180deg);
    }
    100% {
        filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3)) hue-rotate(360deg);
    }
}

.glow-gradient {
    border: none;
    border-radius: 0;
    animation: gradientCycle 6s linear infinite;
    transition: all 0.3s ease-in-out;
}

/* Responsive fallback */
@media (max-width: 600px) {
    .left-label,
    .right-label.top,
    .right-label.bottom {
        position: static;
        text-align: center;
        margin-top: 1rem;
        transform: none;
    }

    .label-content {
        justify-content: center;
    }

    .line-image {
        display: none;
    }

    .offers-firsttitle {
        font-size: 2.5rem;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }

    .video-overlay-title {
        font-size: 2.5rem;
    }

    .video-overlay-subtitle {
        font-size: 1.2rem;
    }

    /* Lower projects description text on mobile */
    .projects-description {
        margin-top: 3rem !important;
    }

    .video-overlay-button {
        padding: 14px 30px;
        font-size: 1rem;
    }
}

/* RESPONSIVE - Keep PC design at any screen size */

/* Large screens (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .map-scaler-inner {
        transform: scale(0.85);}
    .offers-firsttitle {
        font-size: 2.5rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 3rem;
    }
    .left-label,
    .right-label.top,
    .right-label.bottom {
        font-size: 1rem;
    }
    .gradient-button{
        margin-top: -70px !important;
        padding: 15px 25px !important;
    }
}

/* Medium screens (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .offers-section {
        margin-top: -20px;
    }
    .map-scaler-inner {
        transform: scale(0.68);
        margin-top: -50px;
    }
    .offers-firsttitle {
        font-size: 2rem;
    }
    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2.5rem;
    }
    .gradient-button{
        margin-top: -170px;
        padding: 11px 25px;
        font-size: 1rem;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.95rem;
    }

            .fp-wrapper {
                padding: 0 1rem;
            }

            .fp-main-section {
                padding: 60px 0;
            }

            .fp-header-title {
                font-size: clamp(24px, 4vw, 32px);
                margin-bottom: 25px;
            }

            .fp-card {
                height: 450px !important;
            }

            .fp-card-category {
                font-size: 12px !important;
            }

            .fp-card-content {
                padding: 20px !important;
            }

            .fp-card-title {
                font-size: 1.4rem !important;
                margin-bottom: 10px !important;
            }

            .fp-card-description {
                font-size: 0.80rem !important;
                margin-bottom: 18px;
            }

            .fp-card-tag {
                font-size: 12px !important;
                margin: auto;
                margin-top: -10px;
            }
            }

            .fp-image-wrapper {
                height: 170px !important;
            }

            .fp-all-button {
                margin-top: -20px;
                padding: 12px 30px !important;
                font-size: 15px !important;
            }


@media (max-width: 540px) {
    .offers-section {
        padding: 30px 15px;
        margin-top: -60px !important;
    }

    .offers-header {
        margin-bottom: 30px;
    }

    .offers-firsttitle {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .offers-secondpctitle,
    .offers-secondcctvtitle,
    .offers-secondfdastitle,
    .offers-seconddoorlocktitle {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    /* ===== MAP CONTAINER ===== */
    .map-wrapper {
        margin-bottom: 40px;
        position: relative;
        overflow: visible !important;
        padding: 0 100px;
        margin-left: 50px;
    }

    .map-scaler {
        padding: 0;
        position: relative;
        width: 100%;
        overflow: visible !important;
        margin: auto;
    }

    .map-scaler-inner {
        transform: scale(0.85) !important;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        width: 100%;
        height: auto;
        overflow: visible !important;
        margin: auto;
    }

    .map-container {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible !important;
    }

    .map-image {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* ===== DOTTED LINES ===== */
    .line-image {
        position: absolute !important;
        max-width: 60px;
        height: auto;
    }

    /* ===== LABELS/METRICS ===== */
    .label {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .label-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .label-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .count-count {
        font-size: 1.8rem;
        font-weight: bold;
        white-space: nowrap;
    }

    .count-text {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .pc-icon {
        width: 50px;
        height: 50px;
    }

    /* Position labels specifically for mobile */
    .left-label {
        left: 10px;
        top: 55%;
        transform: translateY(-50%);
    }

    .right-label.top {
        right: 10px;
        top: 30%;
        transform: translateY(-50%);
    }

    .right-label.bottom {
        right: 10px;
        bottom: 28%;
        transform: translateY(50%);
    }

    /* ===== BUTTON ===== */
    .gradient-button {
        padding: 12px 32px;
        font-size: 0.9rem;
        margin-top: -100px !important;
        width: auto;
    }

    .metric-showcase-zone {
        padding: 50px 0;
    }

    .data-figure-layout {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 0 2rem !important;
        max-width: none !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .figure-unit-card {
        animation: slightFloat 2.5s ease-in-out infinite alternate;
    }

    .figure-count-value {
        font-size: 2.3rem !important;
        margin-bottom: 8px;
    }

    .figure-description-text {
        font-size: 0.85rem;
    }
}

/* Tablets landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .offers-section{
        margin-top: -80px !important;
    }
    .map-scaler-inner {
        transform: scale(0.90);
    }
    
    .left-label {
        left: -150px;
    }
    
    .right-label.top {
        right: -100px;
        top: -30px;
    }
    
    .right-label.bottom {
        right: -190px;
        top: 220px;
    }
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
        margin-left: -100px !important;
        margin-top: 150px !important;
    }
     .gradient-button {
        padding: 14px 28px;
        font-size: 20px;
        margin-top: 40px !important;
    }

}

/* Tablets portrait (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .map-scaler-inner {
        transform: scale(0.65);
    }
    
    .left-label {
        left: -180px;
    }
    
    .right-label.top {
        right: -180px;
    }
    
    .right-label.bottom {
        right: -220px;
    }
    
    .count-count {
        font-size: 48px;
    }
    
    .count-text {
        font-size: 22px;
    }
    
    .pc-icon {
        width: 75px;
    }
}

/* Mobile large (361px - 480px) */
@media (max-width: 480px) {
    .offers-section {
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.70) !important;
        margin-left: -60px;
    }
    
    .map-wrapper {
        padding: 2rem 0;
    }
    
    .left-label {
        left: -50px;
    }
    
    .right-label.top {
        right: -30px;
        margin-top: -20px;
        position: absolute;
    }
    
    .right-label.bottom {
        margin-right: -100px !important;
        bottom: 150px;
        position: absolute;
    }
    
    .count-count {
        font-size: 40px;
    }
    
    .count-text {
        font-size: 18px;
    }
    
    .pc-icon {
        width: 60px;
    }
    
    .line-image {
        width: 120px;
    }
    
    .offers-firsttitle {
        font-size: 2rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2.5rem;
    }
    
    .gradient-button {
        padding: 14px 28px;
        font-size: 16px;
    }
}

/* Mobile small (320px - 360px) */
@media (max-width: 360px) {
    .offers-section {
        padding: 40px 0;
        margin-top: -80px !important;
    }
    
    .map-scaler-inner {
        transform: scale(0.65) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    
    .left-label {
        left: -70px;
    }
    
    .right-label.top {
        margin-right: 30px;
        margin-top: 20px !important;
    }
    
    .right-label.bottom {
        margin-right: -90px !important;
        bottom: 120px;
        position: absolute;
    }
    
    .count-count {
        font-size: 32px;
    }
    
    .count-text {
        font-size: 16px;
    }
    
    .pc-icon {
        width: 50px;
    }
    
    .line-image {
        width: 100px;
    }
    
    .offers-firsttitle {
        font-size: 1.5rem;
    }
    
    .offers-secondfdastitle {
        font-size: 2rem;
    }
    
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -210px !important;
    }
}

@media (max-width: 375px) {
    .offers-section {
        padding: 40px 0;
    }
    
    .map-scaler-inner {
        transform: scale(0.60) !important;
        margin-left: -60px !important;
    }
    
    .map-wrapper {
        padding: 2.5rem 0;
    }
    .gradient-button {
        padding: 12px 24px;
        font-size: 14px;
        margin-top: -260px !important;
    }
}

@media (min-width: 912px) {
            .fp-wrapper {
                padding: 0 2rem;
                max-width: 600px;
            }

            .fp-main-section {
                padding: 80px 0;
            }

            .fp-header-title {
                font-size: clamp(28px, 5vw, 40px);
                margin-bottom: 30px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                margin-bottom: 40px;
            }

            .fp-card-content {
                padding: 30px;
            }

            .fp-card-title {
                font-size: 1.8rem;
                margin-bottom: 15px;
            }

            .fp-card-description {
                font-size: 1rem;
                line-height: 1.6;
                margin-bottom: 20px;
            }

            .fp-image-wrapper {
                height: 280px;
            }

            .fp-all-button {
                padding: 16px 50px;
                font-size: 18px;
            }
        }

        /* Tablet Medium (853px to 911px) */
        @media (min-width: 853px) and (max-width: 911px) {
            .fp-wrapper {
                padding: 0 1.5rem;
                max-width: 90px;
            }

            .fp-main-section {
                padding: 70px 0;
            }

            .fp-header-title {
                font-size: clamp(26px, 4.5vw, 36px);
                margin-bottom: 28px;
            }

            .fp-cards-grid {
                grid-template-columns: 1fr;
                gap: 16px;
                margin-bottom: 35px;
            }

            .fp-card-content {
                padding: 26px;
            }

            .fp-card-title {
                font-size: 1.6rem;
                margin-bottom: 13px;
            }

            .fp-card-description {
                font-size: 0.95rem;
                line-height: 1.6;
                margin-bottom: 18px;
            }

            .fp-image-wrapper {
                height: 260px;
            }

            .fp-all-button {
                padding: 15px 48px;
                font-size: 17px;
            }
        }


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

/* GLOBAL RESET/BEST PRACTICE for Responsiveness */
* {
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* ========================================================================= */
/* CORE SHOWCASE BLOCK & FONT SCALING */
/* ========================================================================= */

.core-showcase-block {
    background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
    /* Use relative padding unit for vertical spacing, scales better than a fixed 120px */
    padding: 10vh 0; 
    position: relative;
    overflow: hidden;
}

.core-showcase-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.core-showcase-block::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    animation: core-pulse-bg 8s ease-in-out infinite;
}

@keyframes core-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

.showcase-header {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.showcase-subtext {
    font-family: "Space Grotesk";
    text-align: center;
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 3rem; /* Reduced from 4rem */
    font-weight: 300;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
}

.concept-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease-out, transform 0.8s ease-out;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none; 
}

.concept-tile:nth-child(1) { transition-delay: 0.1s; }
.concept-tile:nth-child(2) { transition-delay: 0.2s; }
.concept-tile:nth-child(3) { transition-delay: 0.3s; }
.concept-tile:nth-child(4) { transition-delay: 0.4s; }
.concept-tile:nth-child(5) { transition-delay: 0.5s; }
.concept-tile:nth-child(6) { transition-delay: 0.6s; }

.showcase-tile-container {
    /* Auto-fit is the key for responsiveness here */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.concept-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

.concept-tile::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(172, 56, 56, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.concept-tile:hover {
    transform: translateY(-15px) scale(1.02) !important;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
}

.concept-tile:hover::before {
    transform: scaleX(1);
}

.concept-tile:hover::after {
    width: 400px;
    height: 400px;
}

.concept-tile:hover .concept-icon-wrap {
    transform: scale(1.1) rotateY(360deg);
}

.concept-tile:hover .concept-icon-wrap svg {
    animation: icon-bounce 0.6s ease;
}

@keyframes icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.concept-icon-wrap {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.concept-icon-wrap svg {
    width: 40px;
    height: 40px;
    stroke: white;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.concept-title-text {
    font-family: "Space Grotesk";
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-title-text {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.concept-detail-text {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.concept-tile:hover .concept-detail-text {
    color: #ccc;
}

/* ========================================================================= */
/* METRIC SHOWCASE ZONE */
/* ========================================================================= */

.metric-showcase-zone {
    font-family: "Space Grotesk";
    background: #000000;
    padding: 100px 0;
    position: relative;
}

.data-figure-layout {
    /* Auto-fit is great here, scales well */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.figure-unit-card {
    text-align: center;
    animation: slightFloat 3s ease-in-out infinite alternate; 
}

.figure-unit-card:nth-child(even) {
    animation-delay: 0.3s;
}

.figure-unit-card:nth-child(3n) {
    animation-delay: 0.9s;
}

.figure-count-value {
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.figure-description-text {
    font-size: 1.2rem;
    color: white;
    font-weight: 300;
}

@keyframes slightFloat {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

/* ========================================================================= */
/* PROCESS SECTION */
/* ========================================================================= */

.process-section {
    background: #000000;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.container-our {
    text-align: center;
}

.section-title-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    
}

.section-subtitle-our {
    font-family: "Space Grotesk";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 50px; /* Reduced from 100px */
    font-weight: 300;
    position: relative;
    z-index: 2;
    animation: subtext-slide-in 1s ease-out 0.2s backwards; 
}

.process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(103, 28, 104, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 60% 70%, rgba(123, 84, 177, 0.1) 0%, transparent 40%);
    animation: gradientShift 10s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.process-timeline {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.process-step {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
    position: relative;
    opacity: 0; 
    transform: translateX(0); 
    transition: none; 
}

.process-step.animate-left {
    animation: stepSlideIn 0.8s ease-out forwards; 
}

.process-step:nth-child(even).animate-right {
    animation: stepSlideInRight 0.8s ease-out forwards;
}


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

.process-step:nth-child(even) {
    flex-direction: row-reverse;
}

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

.step-number {
    font-family: "Space Grotesk";
    width: 60px;
    height: 60px;
    color: white;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
    transition: all 0.4s ease;
}

.process-step:hover .step-number {
    transform: scale(1.15) rotateZ(360deg);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.step-content {
    color: white;
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.step-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.process-step:hover .step-content {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(172, 56, 56, 0.3);
    transform: translateX(10px);
}

.process-step:nth-child(even):hover .step-content {
    transform: translateX(-10px);
}

.process-step:hover .step-content::before {
    opacity: 1;
}

.step-title {
    font-family: "Space Grotesk";
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.process-step:hover .step-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step-description {
    font-family: "Lexend";
    color:white;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.process-step:hover .step-description {
    color: #ccc;
}

/* ========================================================================= */
/* FUTURE PROJECTS (FP) SECTION */
/* ========================================================================= */

.fp-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.fp-main-section {
    padding: 80px 0; /* Reduced from 120px 0 */
    position: relative;
    overflow: hidden;
}

.fp-main-section::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(123, 84, 177, 0.05) 0%, transparent 50%);
    animation: fp-pulse-bg 12s ease-in-out infinite;
}

@keyframes fp-pulse-bg {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.5;
    }
}

/* ------------------------------------------------ */
/* SCROLL ANIMATION STARTING STATES (HIDDEN) */
/* ------------------------------------------------ */

/* The hidden class sets the initial position and opacity, which is then animated away */
.hidden-scroll {
    opacity: 0;
    /* Use 'will-change' for performance hint */
    will-change: transform, opacity; 
}

/* Header Hidden State */
.fp-header-title.hidden-scroll {
    transform: translateY(-30px);
}

/* Card Hidden State */
.fp-card.hidden-scroll {
    transform: translateY(50px) scale(0.9);
}

/* Button Link Hidden State */
.fp-all-projects-link.hidden-scroll {
    transform: translateY(30px);
}


/* ------------------------------------------------ */
/* SCROLL ANIMATION TRIGGERED STATES (VISIBLE) */
/* ------------------------------------------------ */

/* The animated class applies the animation keyframe */

/* Header Animation Trigger */
.fp-header-title.animated {
    animation: fp-header-slide-in 1s ease-out forwards;
}

/* Card Animation Trigger */
.fp-card.animated {
    /* The animation-delay is set dynamically by JavaScript based on data-delay */
    animation: fp-card-fade-in 0.9s ease-out forwards;
}

/* Button Link Animation Trigger */
.fp-all-projects-link.animated {
    animation: fp-btn-fade-in 1s ease-out forwards;
}


/* ------------------------------------------------ */
/* ORIGINAL KEYFRAMES (Keep these as they are) */
/* ------------------------------------------------ */

@keyframes fp-header-slide-in {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fp-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fp-btn-fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------------ */
/* REST OF ORIGINAL STYLES (Keep as they are) */
/* ------------------------------------------------ */

.fp-header-title {
    font-family: "Space Grotesk";
    color: white;
    text-align: left;
    /* Fluid font size: min 28px, preferred 5vw, max 40px */
    font-size: clamp(28px, 5vw, 40px); 
    font-weight: 500;
    margin-bottom: 30px; /* Reduced from 50px */
    position: relative;
    z-index: 2;
}

.fp-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px; /* Reduced from 40px */
    position: relative;
    z-index: 2;
    margin-bottom: 40px; /* Reduced from 60px */
}

.fp-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.fp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #AC3838, #671C68, #7B54B1);
    transform: scaleX(0);
    transition: transform 0.5s ease;
    z-index: 2;
}

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

.fp-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.fp-image-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.fp-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.fp-card:hover .fp-card-image {
    transform: scale(1.1) rotate(2deg);
}

.fp-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-card:hover .fp-image-overlay {
    opacity: 1;
}

.fp-view-button {
    padding: 9px 28px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.fp-card:hover .fp-view-button {
    transform: translateY(0);
    opacity: 1;
}

.fp-view-button:hover {
    transform: translateY(0) scale(1.05);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.5);
}

.fp-card-content {
    padding: 30px;
}

.fp-card-category {
    font-family: "Lexend";
    display: inline-block;
    padding: 6px 16px;
    background: rgba(172, 56, 56, 0.2);
    border: 1px solid rgba(172, 56, 56, 0.4);
    border-radius: 20px;
    font-size: 14px;
    color: #AC3838;
    margin-bottom: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-category {
    background: rgba(172, 56, 56, 0.3);
    border-color: rgba(172, 56, 56, 0.6);
}

.fp-card-title {
    font-family: "Space Grotesk";
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-title {
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fp-card-description {
    font-family: "Lexend";
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.fp-card:hover .fp-card-description {
    color: #ccc;
}

.fp-card-tags {
    font-family: "Lexend";
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fp-card-tag {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    font-size: 13px;
    color: #999;
    transition: all 0.3s ease;
}

.fp-card:hover .fp-card-tag {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(172, 56, 56, 0.3);
    color: #bbb;
}

.fp-all-projects-link {
    text-align: center;
    position: relative;
    z-index: 2;
}

.fp-all-button {
    font-family: "Lexend";
    padding: 16px 50px;
    background: transparent;
    border: 2px solid rgba(172, 56, 56, 0.5);
    border-radius: 30px;
    color: white;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.fp-all-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, #AC3838, #7B54B1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    z-index: -1;
}

.fp-all-button:hover {
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(172, 56, 56, 0.4);
}

.fp-all-button:hover::before {
    width: 300px;
    height: 300px;
}


    

/* ========================================================================= */
/* FAQ SECTION */
/* ========================================================================= */

.faq-section {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.container-faq {
    text-align: center;
}

.section-title-faq {
    font-family: "Space Grotesk";
    /* Fluid font size: min 36px, preferred 7vw, max 63px */
    font-size: clamp(36px, 7vw, 63px); 
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-subtitle-faq {
    font-family: "Lexend";
    /* Fluid font size: min 18px, preferred 3vw, max 22px */
    font-size: clamp(18px, 3vw, 22px); 
    color: white;
    margin-bottom: 4rem;
    font-weight: 300;
    position: relative;
    z-index: 2;
}

.faq-container {
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.faq-item {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    margin-bottom: 30px;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* --- NEW SCROLL ANIMATION CSS --- */

/* 1. Initial State (Hidden and slightly offset) */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}

/* 2. Target State (Visible and in final position) - added by JavaScript */
.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Staggered Delay for FAQ items */
.faq-item.scroll-animate:nth-child(1) { transition-delay: 0.1s; }
.faq-item.scroll-animate:nth-child(2) { transition-delay: 0.2s; }
.faq-item.scroll-animate:nth-child(3) { transition-delay: 0.3s; }
.faq-item.scroll-animate:nth-child(4) { transition-delay: 0.4s; }
.faq-item.scroll-animate:nth-child(5) { transition-delay: 0.5s; }

.section-title-faq.scroll-animate { transition-delay: 0s; }
.section-subtitle-faq.scroll-animate { transition-delay: 0.1s; }

/* Existing FAQ styles */

.faq-item:hover {
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.15);
}

.faq-item.active {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(172, 56, 56, 0.4);
}

.faq-question {
    font-family: "Space Grotesk";
    padding: 25px 30px;
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

.faq-question::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #AC3838, #671C68, #7B54B1);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::before {
    transform: scaleY(1);
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
    padding-left: 35px;
}

.faq-answer {
    font-family: "Lexend";
    padding: 0 30px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    color: white;
}

.faq-item.active .faq-answer {
    padding: 0 30px 25px;
    max-height: 500px;
}

.faq-toggle {
    font-size: 1.5rem;
    transition: all 0.4s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(172, 56, 56, 0.2);
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #AC3838, #7B54B1);
}

.faq-section {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.faq-section::after {
    content: "";
    position: absolute;
    bottom: 310px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}

/* ========================================================================= */
/* MEDIA QUERIES FOR RESPONSIVENESS */
/* ========================================================================= */

@media (max-width: 1024px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 150px !important; /* Slight reduction for tablets */
    }
}




/* Tablet and Smaller Devices (Max Width 992px) */
@media (max-width: 992px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 350px !important; /* Slight reduction for tablets */
    }
}

@media (min-width: 853px) and (max-width: 991px) {
    .data-figure-layout {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        padding: 0 1rem;
    }
    
    .figure-count-value {
        font-size: 3rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
}

@media (max-width: 550px) {
    /* Showcase Tiles - Grid adjustment for slightly smaller min width */
    .showcase-tile-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 20px;
        padding: 0 1.5rem; /* Reduced horizontal padding */
    }

    /* Process Timeline */
    .process-timeline {
        padding: 0 1.5rem;
    }
    
    .process-step {
        gap: 20px; 
        margin-bottom: 40px; 
    }

    /* Future Projects Grid */
    .fp-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
    }

    .fp-image-wrapper {
        height: 200px !important; /* Slight reduction for tablets */
    }
}

/* Mobile Devices (Max Width 768px) */
@media (max-width: 768px) {
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 60px 0; /* Consistent vertical padding for mobile */
    }
    
    .showcase-tile-container {
        /* Force single column for a better mobile experience */
        grid-template-columns: 1fr; 
        gap: 15px;
    }
    
    .concept-tile {
        padding: 25px 20px; /* Reduced tile padding */
    }

    .showcase-subtext, 
    .section-subtitle-faq {
        margin-bottom: 2rem;
    }

    /* Metrics Section - Smaller font and less float */
    .figure-count-value {
        font-size: 2rem; 
    }
    
    .data-figure-layout {
        gap: -50px;
    }

    /* Process Timeline - Vertical stacking for mobile */
    .process-step {
        flex-direction: column; /* Stacks number and content vertically */
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }

    .process-step:nth-child(even) {
        flex-direction: column; /* Removes the row-reverse from even items */
    }
    
    /* Remove horizontal translations on hover for stacked layout */
    .process-step:hover .step-content,
    .process-step:nth-child(even):hover .step-content {
        transform: none; 
    }
    
    .step-number {
        margin: 0 auto 15px; /* Center the number circle and add space below */
    }
    
    .step-content {
        padding: 20px;
    }

    /* FAQ Section */
    .faq-question {
        font-size: 1rem;
        padding: 20px 25px;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 25px 20px;
    }

    /* Future Projects Card Grid - Single column on mobile */
    .fp-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .fp-card-content {
        padding: 20px;
    }
    
    .fp-image-wrapper {
        height: 220px;
    }

    .fp-all-button {
        padding: 12px 30px; 
        font-size: 16px;
    }
}

/* Small Mobile Devices (Max Width 480px) */
@media (max-width: 480px) {
    /* Reduce all main section padding further */
    .core-showcase-block, 
    .metric-showcase-zone,
    .process-section,
    .fp-main-section,
    .faq-section {
        padding: 40px 0;
    }

    /* Adjust main wrapper padding for very small screens */
    .showcase-tile-container, 
    .data-figure-layout, 
    .process-timeline, 
    .faq-container, 
    .fp-wrapper {
        padding: 0 1rem; /* Minimum horizontal padding */
    }

    /* Further compress header elements */
    .showcase-subtext,
    .section-subtitle-our,
    .section-subtitle-faq {
        margin-bottom: 25px;
    }
    
    /* Metric Values */
    .figure-count-value {
        font-size: 2.2rem;
    }
    
    .figure-description-text {
        font-size: 1rem;
    }
    
    .concept-title-text {
        font-size: 1.3rem;
    }
    
    .fp-card-title {
        font-size: 1.5rem;
    }
}

/*============= END ==================*/
    
/* And MANY MORE SECTION STYLES */
.andmanymore-section {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
}

.andmanymore-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 5rem;
    font-weight: 500;
    margin-top: -0.8rem;
    color: #ffffff;
}

.andmanymore-paragraph p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.9rem;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 2rem;
    color: #cccccc;
    line-height: 1.6;
    font-weight: 300;
}
/* Responsive tweak */
@media (max-width: 768px) {
    .andmanymore-paragraph p {
        font-size: 0.95rem;
        padding: 0 1rem;
    }
}

/* Stats container styling */
.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
    margin-top: 3rem;
    text-align: center;
}

/* Each stat item */
.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 150px;
}

/* Gradient icon replacing image */
.icon-gradient {
    width: 107px;
    height: 107px;
    background: linear-gradient(90deg, #FF6666, #66BFFF, #FF66C7, #FF6666, #66BFFF, #FF66C7, #FF6666 );
    background-size: 200% 100%; /* Full span of duplicated colors */
    animation: gradientSlideSeamless 2s linear infinite;
    /* PNG mask */
    -webkit-mask-image: var(--img);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: var(--img);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    margin-bottom: 1rem;
}
/* Number styling */
.stat-number {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

/* Label styling */
.stat-label {
    font-family: 'Lexend', sans-serif;
    font-size: 2rem;
    color: #ffffff;
    font-weight: 400;
}

@keyframes gradientSlideSeamless {
    0% {
        background-position: 0% 50%;
    }

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



/* Responsive adjustments */
@media (max-width: 768px) {
    .andmanymore-title {
        font-size: 2.5rem;
        margin-top: -2rem;
    }

    .stat-item {
        max-width: 120px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.875rem;
    }

    .stat-item img {
        width: 40px;
        height: 40px;
    }

    .title-strength {
        width: 100%;
        font-size: 2.9rem !important;
        margin-top: -3rem !important;
    }

}


/* Company Strength CSS */
.company-strength {
    background-color: #000000
}
.title-strength {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4.25rem;
    font-weight: 500;
    margin-top: -0.5rem;
    color: #ffffff;
    text-align:center;
}
.strTitleCard {
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
}
.card-str1.card, .card-str2.card, .card-str3.card {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-str1.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
    box-shadow: 0 0 30px rgba(123, 242, 255, 0.8),
                0 0 60px rgba(76, 168, 255, 0.6),
                0 0 90px rgba(35, 50, 215, 0.4),
                0 0 120px rgba(35, 50, 215, 0.2);
}
.card-str2.card:hover {
    border: 3px solid;
    border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
    box-shadow: 0 0 30px rgba(132, 9, 180, 0.8),
                0 0 60px rgba(189, 5, 149, 0.6),
                0 0 90px rgba(189, 5, 45, 0.4),
                0 0 120px rgba(189, 5, 45, 0.2);
}
.card-str3.card:hover {
     border: 3px solid;
     border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
     box-shadow: 0 0 30px rgba(243, 249, 59, 0.8),
                0 0 60px rgba(163, 249, 59, 0.6),
                0 0 90px rgba(81, 249, 59, 0.4),
                0 0 120px rgba(81, 249, 59, 0.2);
}
/*Brands Animation CSS*/
.brands-animation {
    background-color: #000000;
}
.title-brands {
    color: #FFF;
    font-size: 40px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
}
.brand-slider {
    width: 100%;
    height: 150px;
    overflow: hidden;
    position: relative;
    margin: 50px auto;
}

.brand-slider-track {
    display: flex;
    width: 200%;
    height: 100%;
    animation: slideLeft 20s linear infinite;
}
.brand-slider-track > div {
    width: 50%;
    height: 100%;
    position: relative;
}
.brand-slider-track img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}


/*slider in shop*/



.brandgroup-default {
    opacity: 1;
    z-index: 1;
}

.brandgroup-hover {
    opacity: 0;
    z-index: 2;
}

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

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

/*Customer Reviews*/
.reviews {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 250px;
    padding-bottom: 250px;
    overflow: hidden;
    z-index: 0;
    border: none;
    margin-top: 20px;
}
.reviews::after {
    content: "";
    position: absolute;
    bottom: 90px;
    left: 50%;
    top: 200px;
    transform: translateX(-50%);
    width: 100%;
    height: 75%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7) 100%),
                radial-gradient(circle at center, #A04AB3 0%, #660B23 40%, #1F0206 65%, transparent 100%);
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: -1;
    border: 0;
    pointer-events: none;
}

.title-reviews {
    color: #AEAEAE;
    font-weight: 300;
    font-size: 40px;
    font-family: 'Lexend', sans-serif;
    z-index: 1;
}

.client-says {
    color: #FFF;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.client-name {
    color: #AEAEAE;
    font-weight: 100;
    font-family: 'Lexend', sans-serif;
}

.card-reviews {
    background: rgba(9, 9, 9, 0.6);
    border-radius: 20px;
    position: relative;
    z-index: 1;
}

.star-rating, .card-details {
    position: relative;
    top: -30px;
}

.review-img {
    width: 120px;
    height: 120px;
    top: -50px;
    position: relative;
    z-index: 2;
}
#reviewsCarousel {
    z-index: 1;
}
.carousel-control-prev, .carousel-control-next {
    width: auto;
    top: 54%;
    transform: translateY(-50%);
    opacity: 1;
}

.carousel-control-prev {
    left: -80px;
}

.carousel-control-next {
    right: -80px;
}

@media (min-width: 300px) and (max-width: 1280px) {
    .carousel-control-prev,
    .carousel-control-next {
        position: sticky;
        width: auto;
        padding: 0;
        top: 54%;
        position: absolute;
        transform: translateY(-50%);
    }

    .carousel-control-prev {
        left: 10px;
    }

    .carousel-control-next {
        right: 10px;
    }
    .reviews {
        padding: 0px 20px;
        position: relative;
    }
    .card-reviews {
        margin-top: 100px;
        height: 500px;
    }
}
/* ================ CONTACT =====================/*



/* CONTACT FORM */
.contactForm {
    position: relative;
    background-color: #090909;
    padding: 100px 0px;
    overflow: hidden;
}

    .contactForm::after {
        content: "";
        position: relative;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 120%;
        height: 200px;
        background: linear-gradient( 90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06% );
        filter: blur(80px);
        border-radius: 50%;
        z-index: 0;
    }

.contactForm {
    position: relative;
    background-color: transparent;
    border: none;
    padding-top: 150px;
    padding-bottom: 200px;
    overflow: visible; 
}

.contactForm::after {
    content: "";
    position: absolute;
    bottom: 210px; 
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 30%; 
    background: linear-gradient(
        90deg,
        #FF6666 0%,
        #FF894C 48.53%,
        #90FF55 74.04%,
        #7B94F6 93.15%,
        #FF77F1 104.06%
    );
    background-blend-mode: overlay;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}

.title-contactForm {
    color: #FFF;
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactDes {
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
}

.title-contactSync {
    font-size: 52px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    text-align: center;
    background: linear-gradient(90deg, #FF6666 0%, #FF894C 48.53%, #90FF55 74.04%, #7B94F6 93.15%, #FF77F1 104.06%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
}

.card-contactForm.card {
    border: 2px solid;
    border-color: #FDFDFD;
    border-radius: 10px;
    background: #090909;
    transform: none !important;
    transition: none !important;
    z-index: 1;
}
@media (min-width: 300px) and (max-width: 1280px) {
    .contactForm {
        padding: 20px 20px;
    }
}

/* =================== END ======================== */

/* About Section Styles */

.about-section {
    background: #000000;
    color: #eee;
    min-height: 100vh;
    padding-top: 5rem;
    padding-bottom: 3rem;

    position: relative;
}

.about-video {
    max-width: 100%;
    height: 500px;
    object-fit: cover;
    background: #222;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    min-width: 400px;
}

.about-label {
    font-family: 'Lexend', sans-serif;
    font-weight: 200;
    font-size: 24px;
    color: #AEAEAE;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 55px;
    color: #FFFFFF;
    background: linear-gradient(
        90deg,
        #4d4c4c 0%,
        #ffffff 25%,
        #ffffff 50%,
        #ffffff 75%,
        #4d4c4c 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
}

@keyframes anim-lineUp {
    0% {
        opacity: 0;
        transform: translateY(80%);
    }
    20% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translateY(0%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes shine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}


.about-lead {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: inherit;
    margin-bottom: 1rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-desc {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #AEAEAE;
    margin-bottom: 1.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}
.hero-btn-about {
    font-family: 'Lexend', sans-serif;
    color: #000000 !important;
    background: #D9D9D9;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: 1s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.hero-btn-about:hover {
        background: transparent ;
        color: #FFFFFF !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);

        background: linear-gradient(
        90deg,
        #000000 0%,
        #000000 25%,
        #000000 50%,
        #000000 75%,
        #ffffff33 100%
    );
    background-size: 200% 100%;
    -webkit-text-fill-color: white;
    animation: 1s anim-lineUp linear, 5s shine linear infinite;
    }



@media (max-width: 1024px) {
    .hero-btn-about {
        width: 90% !important;
        justify-content: center;
    }
}
@media (min-width: 300px) and (max-width: 980px) {
    .about-section {
        padding-bottom: 0.5rem;
    }
    .about-video {
        max-width: 100%;
        height: 350px;
        object-fit: cover;
        background: #222;
        border-radius: 0.5rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        min-width: 300px;
        margin-top: -2rem;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }

    .about-content {
        padding: 30px 30px 0 30px; /* top, right, bottom, left */
    }
    .about-btn {
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }
    .about-title,
    .about-lead,
    .about-desc,
    .about-label {
        transform: none !important;
        text-align: center;
    }
}

@media (min-width: 1024px) and (max-width: 1120px) {
    .about-content {
        padding: 20px;
    }

    .about-title {
        font-size: 34px;
    }

    .about-lead,
    .about-desc {
        font-size: 18px;
    }
}

/* Team Section Styles */
.team-section {
    background-color: #111;
    color: #fff;
    padding-top: 3rem;
    padding-bottom: 0;
    margin-bottom: 0;
}

.team-intro {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.team-intro-icon {
    height: 0.8em;
    margin-left: -0.3em;
    position: relative;
    top: -0.4em;
     animation: clickSimulate 1.5s ease-in-out infinite;
}

@keyframes clickSimulate {
    0%, 90%, 100% {
        transform: translateY(0) scale(1);
    }
    5% {
        transform: translateY(5px) scale(.25);
    }
    10% {
        transform: translateY(0) scale(1);
    }

}

.team-desc {
    font-size: 1rem;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
}

.team-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    font-size: 22vw;
    line-height: 1;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
    margin-top: 12rem;
    padding: 0;
    display: block;
    width: 100%;
    word-break: break-word;
    transform: translateY(-120px);
}

/* Keyframes for smooth gradient shifting */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Shared styling for all category titles */
.leaders-category,
.marketing-category,
.technicians-category,
.admin-category,
.developers-category {
    font-family: 'Lexend', sans-serif;
    font-weight: 100;
    line-height: 1;
    text-align: center;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    background-image: linear-gradient(90deg, #74FEBD, #2FA2B7, #4B18E3, #FDFDFD);
    background-size: 400% 100%;
    background-repeat: no-repeat;
    animation: gradientShift 4s linear infinite;
}

.leaders-category {
    margin-top: 13rem;
    transform: translateY(-125px);
    font-size: 320px;
    animation-delay: 0s;
}

.admin-category {
    margin-top: 1rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.marketing-category {
    margin-top: -3rem;
    transform: translateY(-157px);
    font-size: 235px;
    animation-delay: 0.5s;
}

.technicians-category {
    margin-top: -1rem;
    transform: translateY(-175px);
    font-size: 195px;
    animation-delay: 1s;
}

.developers-category {
    margin-top: -3rem;
    transform: translateY(-170px);
    font-size: 210px;
    animation-delay: 1.5s;
}

.leaders-group,
.admin-group,
.marketing-group,
.technicians-group,
.developers-group {
    margin-bottom: 3rem;
}

.team-wrapper {
    margin-top: -120px;
    padding-bottom: 200px;
    position: relative;
}

.team-img {
    width: 240px;
    height: 240px;
    object-fit: cover;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    margin-bottom: 1rem;
    margin-right: 0;
    transform: translateY(-245px);
}



.team-name {
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-230px);
    text-align: center;
    white-space: nowrap;
    animation: lights 5s 750ms linear infinite;
}


    @keyframes lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
}


.team-role {
    font-family: 'Lexend', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    transform: translateY(-215px);
    text-align: center;
}

.row.justify-content-center > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
}

    .row.justify-content-center > [class*="col-"]:first-child {
        margin-left: 0;
    }

@media (max-width: 1280px) {
    .team-category,
    .leaders-category,
    .admin-category,
    .marketing-category,
    .technicians-category,
    .developers-category {
        margin-top: 3rem;
        transform: translateY(0);
    }

    .leaders-category {
        font-size: 16vw;
    }

    .marketing-category {
        font-size: 13vw;
    }

    .technicians-category {
        font-size: 13vw;
    }

    .admin-category{
        font-size: 13vw;
    }

    .developers-category {
        font-size: 13vw;
    }

    .team-img {
        width: 120px;
        height: 120px;
        transform: none;
    }

    .team-name,
    .team-role {
        transform: none;
        font-size: 18px;
    }

    .row.justify-content-center > [class*="col-"] {
        margin-left: 0;
    }
}


/* Join Team Section  */
.bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    top: 0;
    left: 0;
}

.bubble {
    position: absolute;
    bottom: -100px;
    width: 40px;
    height: 40px;
    background: #000000;
    border-radius: 50%;
    opacity: 0.5;
    animation: rise 10s infinite ease-in;
}

    .bubble:nth-child(1) {
        width: 40px;
        height: 40px;
        left: 10%;
        animation-duration: 8s;
    }

    .bubble:nth-child(2) {
        width: 20px;
        height: 20px;
        left: 20%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(3) {
        width: 50px;
        height: 50px;
        left: 35%;
        animation-duration: 7s;
        animation-delay: 2s;
    }

    .bubble:nth-child(4) {
        width: 80px;
        height: 80px;
        left: 50%;
        animation-duration: 11s;
        animation-delay: 0s;
    }

    .bubble:nth-child(5) {
        width: 35px;
        height: 35px;
        left: 55%;
        animation-duration: 6s;
        animation-delay: 1s;
    }

    .bubble:nth-child(6) {
        width: 45px;
        height: 45px;
        left: 65%;
        animation-duration: 8s;
        animation-delay: 3s;
    }

    .bubble:nth-child(7) {
        width: 90px;
        height: 90px;
        left: 70%;
        animation-duration: 12s;
        animation-delay: 2s;
    }

    .bubble:nth-child(8) {
        width: 25px;
        height: 25px;
        left: 80%;
        animation-duration: 6s;
        animation-delay: 2s;
    }

    .bubble:nth-child(9) {
        width: 15px;
        height: 15px;
        left: 70%;
        animation-duration: 5s;
        animation-delay: 1s;
    }

    .bubble:nth-child(10) {
        width: 90px;
        height: 90px;
        left: 25%;
        animation-duration: 10s;
        animation-delay: 4s;
    }

@keyframes rise {
    0% {
        bottom: -100px;
        transform: translateX(0);
    }

    50% {
        transform: translate(100px);
    }

    100% {
        bottom: 1080px;
        transform: translateX(-200px);
    }
}

@keyframes anime {
    0% {
        top: 0;
    }

    50% {
        top: -1800px;
    }
    /* 200 - 2000 */
    100% {
        top: 0;
    }
}

/* join-team-section with its background and overlay */
.join-team-section {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, #7B9FFF 0%, #E17BCF 100%);
    background-size: 200% 200%;
    animation: joinGradientMove 3s linear infinite;
    padding: 4rem 1rem;
    color: #fff;
    margin-top: -25em;
    text-align: center;
}

    .join-team-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.1);
        pointer-events: none;
        z-index: 0;
        border-radius: inherit;
    }

/* animate join-team-section gradient background */
@keyframes joinGradientMove {
    0% {
        background-position: 0% 50%;
    }

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

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

.join-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 3rem;
    line-height: 1;
    color: #FDFDFD;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.join-btn {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1;
    color: #FDFDFD;
    border: 2px solid #fff;
    border-radius: 32px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: all 0.3s ease;
    padding: 0.75em 2em;
    background: transparent;
    margin-top: 3em;
    position: relative;
}

    .join-btn:hover {
        background-color: rgba(255, 255, 255, 0.1);
        cursor: pointer;
    }

.join-arrow-img {
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin-left: 0.3em;
}

@media (max-width: 1280px) {
    .join-team-section {
        margin-top: -13rem;
    }
}
/* END ABOUT CSS THAT WAS REPLACED */

/* =============== CONTACT US ================= */

@keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        @keyframes rainbowBorder {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes rainbowGlow {
            0% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
            14% { border-color: #ff7700; box-shadow: 0 0 20px rgba(255, 119, 0, 0.5); }
            28% { border-color: #ffff00; box-shadow: 0 0 20px rgba(255, 255, 0, 0.5); }
            42% { border-color: #00ff00; box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); }
            56% { border-color: #0000ff; box-shadow: 0 0 20px rgba(0, 0, 255, 0.5); }
            70% { border-color: #4b0082; box-shadow: 0 0 20px rgba(75, 0, 130, 0.5); }
            84% { border-color: #9400d3; box-shadow: 0 0 20px rgba(148, 0, 211, 0.5); }
            100% { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        @keyframes floatAlt {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
        }

        .banner-top-area {
            position: relative;
            min-height: 300px;
            height: clamp(250px, 55vh, 550px);
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('/images/blogs/blogs-landpage/blog-carousel-2.jpg') center/cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: clamp(15px, 4vw, 150px);
            animation: fadeInDown 1s ease-out;

            /* New properties for the fade-out effect at both top and bottom */
            mask-image: linear-gradient(
                to bottom,
                transparent 0%,  /* Start fully transparent (top fade-out) */
                black 10%,        /* Become fully visible at 5% */
                black 85%,       /* Stay fully visible until 95% */
                transparent 100% /* Become fully transparent (bottom fade-out) */
            );
            overflow: hidden;

        }

        .banner-top-area h1 {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(28px, 7vw, 65px);
            font-weight: 700;
            color: white;
            animation: fadeInDown 1s ease-out;
        }

        .send-us h2 {
            font-family: "Space Grotesk";
            font-size: clamp(24px, 5vw, 36px);
            font-weight: 600;
            margin-bottom: clamp(20px, 4vw, 45px); 
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        .reach-us-main-container {
            max-width: 1200px;
            margin: clamp(-120px, -18vw, -250px) auto 60px;
            padding: 0 clamp(12px, 2.5vw, 20px);
            position: relative;
            z-index: 100;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
        }

        .dual-panel-layout {
            box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
            display: grid;
            grid-template-columns: 1fr;
            overflow: hidden;
            position: relative;
            padding: 2px;
            background: linear-gradient(90deg, 
                #ff0000, #ff7700, #ffff00, #00ff00, 
                #0000ff, #4b0082, #9400d3, #ff0000);
            background-size: 200% 200%;
            animation: rainbowBorder 3s linear infinite;
        }

        @media (min-width: 1024px) {
            .dual-panel-layout {
                grid-template-columns: 1.5fr 1fr;
            }
        }

        .dual-panel-layout::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            border-radius: 18px;
            background: rgb(8, 8, 8);
            z-index: 1;
        }

        .input-panel-wrapper {
            padding: clamp(25px, 5vw, 60px) clamp(18px, 5vw, 80px);
            background: rgb(8, 8, 8);
            position: relative;
            z-index: 2;
        }

        .field-container {
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        .dual-field-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 20px);
            margin-bottom: clamp(15px, 3vw, 25px);
        }

        @media (min-width: 640px) {
            .dual-field-row {
                grid-template-columns: 1fr 1fr;
            }
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: white;
            font-family: "Lexend", sans-serif;
            font-weight: 500;
            font-size: clamp(14px, 2vw, 16px);
        }

        input, textarea {
            color: white;
            font-family: "Lexend", sans-serif;
            width: 100%;
            padding: clamp(12px, 2vw, 15px) clamp(15px, 2.5vw, 20px);
            border: 1px solid gray;
            border-radius: 10px;
            background: rgb(15, 15, 15);
            font-size: clamp(14px, 2vw, 16px);
            transition: all 0.3s ease;
        }

        input:hover, textarea:hover,
        input:focus, textarea:focus {
            outline: none;
            animation: rainbowGlow 2s linear infinite;
        }

        textarea {
            resize: vertical;
            min-height: clamp(120px, 20vw, 150px);
        }

        .action-button-primary {
            display: block;
            margin: 0 auto;
            width: min(100%, 300px);
            max-width: 100%;
            height: 50px;
            padding: 10px 20px;
            font-family: "Lexend", sans-serif;
            background: linear-gradient(135deg, #AC3838 0%, #671C68 50%, #7B54B1 100%);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: clamp(15px, 2vw, 17px);
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        @media (min-width: 640px) {
            .action-button-primary {
                width: 60%;
            }
        }

        @media (min-width: 1024px) {
            .action-button-primary {
                width: 40%;
            }
        }

        .action-button-primary:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 5px 7px rgba(172, 56, 56, 0.7),
                        0 0 8px rgba(172, 56, 56, 0.4);
        }

        .details-panel-wrapper {
            padding: clamp(30px, 5vw, 50px);
            background: rgb(4, 4, 4);
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 2;
        }

        .details-panel-wrapper h2 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(28px, 5vw, 36px);
            font-weight: 600;
            margin-top: clamp(15px, 3vw, 35px);
            margin-left: 0;
            margin-bottom: 20px;
            color: white;
            animation: fadeInUp 1s ease-out 0.3s backwards;
        }

        @media (min-width: 768px) {
            .details-panel-wrapper h2 {
                margin-left: clamp(0px, 4vw, 55px);
            }
        }

        .details-card-item {
            background: rgb(15, 15, 15);
            padding: clamp(15px, 3vw, 20px);
            width: 100%;
            max-width: 300px;
            border-radius: 15px;
            margin-bottom: clamp(20px, 4vw, 30px);
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .details-card-item {
                max-width: 100%;
            }
        }

        .details-card-item:nth-child(1) {
            animation: floatAlt 4s ease-in-out infinite;
        }

        .details-card-item:nth-child(2) {
            animation: floatAlt 5s ease-in-out infinite;
        }

        .details-card-item:nth-child(3) {
            animation: floatAlt 4.5s ease-in-out infinite;
        }

        .details-card-item h3 {
            font-size: clamp(18px, 3vw, 23px);
            margin-bottom: clamp(12px, 2vw, 20px);
            color: white;
            font-family: "Space Grotesk", sans-serif;
        }

        .details-card-item p {
            color: #8a8a8a;
            font-size: clamp(13px, 2vw, 15px);
            font-family: "Lexend", sans-serif;
            line-height: 1.5;
            margin: 5px 0;
        }

        .scroll-animate {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .scroll-animate.active {
            opacity: 1;
            transform: translateY(0);
        }

        .map-section {
            padding: clamp(30px, 7vw, 70px);
            width: 95%;
            max-width: 1400px;
            margin: 0 auto;
        }

        .where-to h1 {
            color: white;
            font-size: clamp(28px, 6vw, 46px);
            font-weight: 700;
            font-family: "Space Grotesk";
            padding-left: clamp(10px, 3vw, 45px);
            margin-bottom: 20px;
        }

        .where-to iframe {
            padding: clamp(10px, 3vw, 28px);
            height: clamp(300px, 50vw, 600px);
            width: 100%;
            border-radius: clamp(20px, 5vw, 50px);
        }

        @media (max-width: 640px) {
            .banner-top-area {
                min-height: 220px;
                height: 40vh;
            }

            .reach-us-main-container {
                margin-top: -80px;
                margin-bottom: 40px;
            }

            .input-panel-wrapper {
                padding: 25px 18px;
            }

            .details-panel-wrapper {
                padding: 25px 18px;
            }

            .send-us h2 {
                margin-bottom: 20px;
            }

            .details-panel-wrapper h2 {
                margin-top: 10px;
                margin-bottom: 15px;
            }

            .details-card-item {
                margin-bottom: 18px;
            }

            .map-section {
                padding: 30px 15px;
            }

            .where-to iframe {
                padding: 12px;
                border-radius: 20px;
            }
        }

/* ================ END ===================== */

/* Contact Us Style V1 */
/* Container */
.contact-container {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* Shared Panel Styles */
.contact-panel {
    flex: 1;
    font-family: 'Lexend', sans-serif;
    background: #090909;
    color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* LEFT PANEL */
.contact-left-panel {
    margin-left: 2rem;
    border-radius: 1rem 0 0 1rem;
    z-index: 1;
}

    /* Border animation */
    .contact-left-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2px;
        background: linear-gradient(270deg, red, orange, yellow, lime, cyan, blue, violet, red);
        background-size: 400% 400%;
        animation: animated-border 8s linear infinite;
        border-radius: 1rem 0 0 1rem;
        box-sizing: border-box;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: -1;
    }

    /* Soft glow */
    .contact-left-panel::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        box-shadow: 0 0 25px rgba(255,255,255,0.07), 0 0 60px rgba(255,255,255,0.05);
        border-radius: 1rem 0 0 1rem;
        z-index: -2;
    }

/* Animate background border */
@keyframes animated-border {
    0% {
        background-position: 0% 50%;
    }

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

/* Content Wrapper (with spacing) */
.contact-left-inner,
.contact-right-inner {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Title & subtitle alignment */
.contact-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.contact-subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* CONTACT ITEMS */
.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.icon {
    margin-left: 3rem;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
}

    .icon img {
        width: 100%;
        height: auto;
    }

    .icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-left: 5rem;
        width: 6rem;
        height: 1px;
        background-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-50%);
    }

.info {
    margin-left: 14rem;
    flex: 1;
}

    .info h3 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .info p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin: 0.2rem 0;
    }

/* SOCIAL ICONS */
.social-icons {
    margin-top: 2rem;
    display: flex;
    gap: 0.3rem;
}

.social-icon img {
    width: 1.5rem;
    height: 1.5rem;
}

/* RIGHT PANEL */
.contact-right-panel {
    margin-right: 2rem;
    border-radius: 0 1rem 1rem 0;
    z-index: 1;
}

.inquiry-options {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.inquiry-option {
    position: relative;
}

    .inquiry-option input[type="radio"] {
        display: none;
    }

    .inquiry-option span {
        display: inline-block;
        padding: 0.5rem 1.25rem;
        border: 2px solid white;
        color: white;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        cursor: pointer;
        background-color: transparent;
    }

    /* Gradient style when checked OR hovered */
    .inquiry-option input[type="radio"]:checked + .inquiry-str1,
    .inquiry-str1:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #7BF2FF, #4CA8FF, #2332D7) 1;
        box-shadow: 0 0 4px rgba(123, 242, 255, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str2,
    .inquiry-str2:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #8409B4, #BD0595, #BD052D) 1;
        box-shadow: 0 0 4px rgba(189, 5, 149, 0.25);
    }

    .inquiry-option input[type="radio"]:checked + .inquiry-str3,
    .inquiry-str3:hover {
        border: 2px solid transparent;
        background: #fff;
        color: #090909;
        font-weight: 600;
        border-image: linear-gradient(to right, #F3F93B, #A3F93B, #51F93B) 1;
        box-shadow: 0 0 4px rgba(81, 249, 59, 0.25);
    }

/* Form fields */
.form-group {
    margin-bottom: 1.5rem;
}

    .form-group input,
    .form-group textarea {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid white;
        color: white;
        font-size: 0.95rem;
        padding: 0.5rem 0;
        outline: none;
    }

textarea {
    resize: vertical;
    min-height: 80px;
}

/* Update preference radios */
.radio-group {
    margin-bottom: 2rem;
}

    .radio-group label {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .radio-group input[type="radio"] {
        margin-right: 0.5rem;
    }

/*Submit Button*/
.submit-button {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.95rem;
    background: transparent;
    color: white;
    border: 2px solid white;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Lexend', sans-serif;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

    /* Gradient fill on hover */
    .submit-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #d8b4fe, #a5f3fc, #bbf7d0);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 2rem;
    }

    .submit-button:hover::before {
        opacity: 1;
    }

    .submit-button:hover {
        color: black;
        font-weight: bold;
    }

/* ===== Responsive Layout ===== */
@media (max-width: 1024px) {
    .contact-left-inner,
    .contact-right-inner {
        padding: 1.5rem;
    }

    .info {
        margin-left: 10rem;
    }

    .icon::after {
        margin-left: 2rem;
        width: 3rem;
    }
}

@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    .contact-left-panel,
    .contact-right-panel {
        margin: 1rem 1rem 0 1rem;
        border-radius: 1rem;
    }

        .contact-left-panel::before,
        .contact-left-panel::after,
        .contact-right-panel::before,
        .contact-right-panel::after {
            border-radius: 1rem !important;
        }

    .contact-title {
        font-size: 1.3rem;
    }

    .info {
        margin-left: 6rem;
    }

    .icon {
        margin-left: 1.5rem;
        width: 2rem;
        height: 2rem;
    }

        .icon::after {
            display: none;
        }

    .form-group input,
    .form-group textarea {
        font-size: 0.9rem;
    }

    .submit-button {
        font-size: 0.9rem;
    }

    .inquiry-options {
        flex-direction: column;
    }

    .inquiry-option span {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .info h3 {
        font-size: 1rem;
    }

    .info p {
        font-size: 0.85rem;
    }

    .contact-title {
        font-size: 1.2rem;
    }

    .social-icons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .social-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }

    .radio-group label {
        font-size: 0.85rem;
    }

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

/* Sync Rainbow Texts - Right to Left */
@keyframes gradientCycletext {
    0% {
        background-position: 100% 50%;
    }

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

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

.glow-gradient-text {
    background: linear-gradient( 90deg, #FF6666 0%, #FF8A66 16.66%, #FFF266 33.33%, #85FF66 50%, #66BFFF 66.66%, #9966FF 83.33%, #FF66C7 100% );
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    animation: gradientCycletext 6s ease-in-out infinite;
}

/*Blogs Carousel*/
.BlogLandPage .carousel-inner,
.BlogLandPage .carousel-item,
.BlogLandPage .blogsCarousel-img {
    height: 500px;
    width: 100%;
    bottom: 50px;
    
}

.BlogLandPage .blogsCarousel-img {
    object-fit: cover; 
}

/*Latest Product*/
.LatestProduct {
    background-color: #000000;
    padding: 80px 20px;
}

.title-LatestProduct {
    color: #FFF;
    font-size: 34px;
    font-weight: 600;
}
.card-productName {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productPrice {
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    text-align: left;
}
.card-productStatus {
    font-weight: 300;
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
}
.card-product.card {
    border: 1px solid;
    border-color: #D9D9D9;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.card-product.card:hover {
    border-radius: 15px;
    background: linear-gradient(#000, #000) padding-box, 
    linear-gradient(90deg, #8409B4, #BD0595, #BD052D) border-box; 
    border: 3px solid transparent;
}
.btn-LastestProduct {
    background: transparent;
    color: #FDFDFD;
    border: none;
    border-radius: 10px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
.btn-check:checked + .btn-LastestProduct:hover {
    background: #FDFDFD;
    color: #090909;
    border: none;
}
.btn-check:not(:checked) + .btn-LastestProduct:hover {
    border: 1px solid #FDFDFD;
    color: #FDFDFD;
}

.btn-check:checked + .btn-LastestProduct {
    background: #FDFDFD;
    color: #090909;
    border: none;
}

/* Custom CSS for Trending Gadgets & DPC Updates */

/* Font Definitions */
.space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

.lexend {
    font-family: 'Lexend', sans-serif;
}

/* Main Container */
.tech-showcase-container {
    background: linear-gradient(135deg, #000000 0%, #000000 100%);
    min-height: 100vh;
    padding: 80px 0;
    overflow: hidden;
}

/* Section Headers */
.tech-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.tech-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.tech-view-all {
    color: #64748b;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .tech-view-all:hover {
        color: #3b82f6;
        transform: translateX(5px);
    }

/* Trending Gadgets Section */
.trending-gadgets-section {
    margin-bottom: 80px;
}

.trending-card {
    background: #000000;
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

    .trending-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .trending-card:hover::before {
        opacity: 1;
    }

    .trending-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .trending-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.trending-card-content {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.trending-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

    .trending-card-icon i {
        font-size: 2rem;
        color: white;
    }

.trending-card-info {
    flex: 1;
}

.trending-card-category {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .trending-card-category.mobile-tech {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .trending-card-category.gaming {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
    }

    .trending-card-category.smart-home {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.trending-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.trending-card-description {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
}

.trending-card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #64748b;
}

.trending-card-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.trending-card-arrow {
    margin-left: auto;
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.trending-card:hover .trending-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* DPC Updates Section */
.dpc-updates-section {
    margin-top: 80px;
}

.dpc-update-card {
    background: #000000;
    border-radius: 20px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    min-height: 250px;
}

    .dpc-update-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(147, 51, 234, 0.8) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .dpc-update-card:hover::before {
        opacity: 0.3;
    }

    .dpc-update-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        border-color: rgba(59, 130, 246, 0.3);
    }

    .dpc-update-card.animate-in {
        animation: slideInUp 0.8s ease-out forwards;
    }

.dpc-card-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.dpc-update-card:hover .dpc-card-background {
    transform: scale(1.05);
}

.dpc-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
}

.dpc-card-content {
    position: relative;
    z-index: 3;
    padding: 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dpc-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.dpc-card-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .dpc-card-status.upcoming {
        background: rgba(59, 130, 246, 0.2);
        color: #3b82f6;
    }

    .dpc-card-status.product-launch {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
    }

    .dpc-card-status.partnership {
        background: rgba(245, 158, 11, 0.2);
        color: #f59e0b;
    }

.dpc-card-countdown {
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #94a3b8;
    margin-left: auto;
}

.dpc-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 10px;
}

.dpc-card-description {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.dpc-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.dpc-card-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.dpc-card-date, .dpc-card-location {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dpc-card-arrow {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.dpc-update-card:hover .dpc-card-arrow {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

/* Modal Styles */
.dpc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .dpc-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.dpc-modal-content {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.dpc-modal-overlay.active .dpc-modal-content {
    transform: scale(1);
}

.dpc-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.1);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .dpc-modal-close:hover {
        background: #ef4444;
        color: white;
    }

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

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

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

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

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

    .trending-card-content {
        flex-direction: column;
        text-align: center;
    }

    .trending-card-icon {
        width: 60px;
        height: 60px;
    }

        .trending-card-icon i {
            font-size: 1.5rem;
        }

    .dpc-card-content {
        padding: 20px;
    }

    .dpc-card-title {
        font-size: 1.3rem;
    }

    .dpc-modal-content {
        padding: 30px;
        margin: 20px;
    }
}


        .blog-section-blog-post {
            padding: 60px 0;
            background-color: #000000;
        }

        .section-header-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .section-title-blog-post {
            font-size: 2.5rem;
            font-weight: bold;
            margin: 0;
        }

        .view-all-link-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .view-all-link-blog-post:hover {
            color: #66b3ff;
        }

        .featured-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            height: 400px;
            margin-bottom: 40px;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .featured-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .featured-image-blog-post {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

        .featured-overlay-blog-post {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            padding: 40px 30px 30px;
        }

        .featured-category-blog-post {
            background-color: #4a9eff;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            display: inline-block;
            margin-bottom: 15px;
        }

        .featured-title-blog-post {
            font-size: 2rem;
            font-weight: bold;
            margin: 0;
            color: white;
        }

        .blog-card-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid #333;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }

        .blog-card-blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }

        .blog-card-image-blog-post {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .blog-card-content-blog-post {
            padding: 25px;
        }

        .blog-card-meta-blog-post {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .blog-card-category-blog-post {
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
            color: white;
        }

        .gaming-blog-post { background-color: #00ff88; color: #000; }
        .ai-vr-blog-post { background-color: #4a9eff; }
        .security-blog-post { background-color: #ff6b6b; }

        .blog-card-date-blog-post {
            color: #888;
            font-size: 0.9rem;
        }

        .blog-card-title-blog-post {
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 12px;
            color: white;
        }

        .blog-card-excerpt-blog-post {
            color: #ccc;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .read-more-blog-post {
            color: #4a9eff;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .read-more-blog-post:hover {
            color: #66b3ff;
        }

        .sidebar-blog-post {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 20px;
            padding: 30px;
            border: 1px solid #333;
            margin-bottom: 30px;
        }

        .sidebar-title-blog-post {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 25px;
            color: white;
        }

        .trending-item-blog-post {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #333;
        }

        .trending-item-blog-post:last-child {
            border-bottom: none;
        }

        .trending-number-blog-post {
            background-color: #4a9eff;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .trending-content-blog-post h6 {
            margin: 0;
            font-weight: 600;
            color: white;
        }

        .trending-content-blog-post small {
            color: #888;
        }

        .category-tag-blog-post {
            background-color: #333;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 0.9rem;
            margin: 5px;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .category-tag-blog-post:hover {
            background-color: #4a9eff;
            color: white;
        }

        .arrow-icon-blog-post {
            margin-left: 8px;
        }

        @media (max-width: 768px) {
            .section-header-blog-post {
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }

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

            .featured-card-blog-post {
                height: 300px;
            }

            .featured-title-blog-post {
                font-size: 1.5rem;
            }
        }

        .chat-widget-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }

        .chat-toggle-btn {
            width: 60px;
            height: 60px;
            background-color: white;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 24px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            overflow: hidden;
            padding: 8px;
        }

        .chat-toggle-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .chat-toggle-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .chat-window {
            position: fixed;
            bottom: 100px;
            right: 20px;
            width: 350px;
            height: 500px;
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            transform: translateY(100%) scale(0.8);
            opacity: 0;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            z-index: 1001;
            overflow: hidden;
        }

        .chat-window.active {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .chat-header {
            background-color: #000;
            color: #fff;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 20px 20px 0 0;
        }

        .chat-header-info {
            display: flex;
            align-items: center;
        }

        .assistant-avatar {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            overflow: hidden;
        }

        .assistant-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .chat-header-text h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .status-indicator {
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background-color: #00ff88;
            border-radius: 50%;
            margin-right: 8px;
        }

        .close-btn {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            background-image: url('/images/dpcbits10.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .chat-body {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f8f8f8;
        }

        .message {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-start;
        }

        .message.user {
            justify-content: flex-end;
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
        }

        .message.bot .message-avatar {
            background-color: #000;
            color: #fff;
            overflow: hidden;
        }

        .message.bot .message-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .message.user .message-avatar {
            background-color: #fff;
            color: #000;
            border: 2px solid #000;
            margin-right: 0;
            margin-left: 12px;
        }

        .message-content {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.4;
        }

        .message.bot .message-content {
            background-color: #fff;
            color: #000;
            border: 1px solid #e0e0e0;
        }

        .message.user .message-content {
            background-color: #000;
            color: #fff;
        }

        .quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }

        .quick-reply-btn {
            background-color: #fff;
            border: 2px solid #000;
            color: #000;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Space Grotesk', sans-serif;
        }

        .quick-reply-btn:hover {
            background-color: #000;
            color: #fff;
        }

        .chat-input-container {
            padding: 20px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
        }

        .chat-input-wrapper {
            display: flex;
            align-items: center;
            background-color: #f8f8f8;
            border-radius: 25px;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            transition: border-color 0.3s ease;
        }

        .chat-input-wrapper:focus-within {
            border-color: #000;
        }

        .chat-input {
            flex: 1;
            border: none;
            background: none;
            outline: none;
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            color: #000;
        }

        .chat-input::placeholder {
            color: #999;
        }

        .send-btn {
            background-color: #000;
            border: none;
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8px;
            font-size: 16px;
            transition: transform 0.2s ease;
        }

        .send-btn:hover {
            transform: scale(1.1);
        }

        .typing-indicator {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background-color: #fff;
            border-radius: 16px;
            margin-left: 44px;
            width: fit-content;
            border: 1px solid #e0e0e0;
        }

        .typing-dots {
            display: flex;
            gap: 4px;
        }

        .typing-dot {
            width: 6px;
            height: 6px;
            background-color: #999;
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-10px); opacity: 1; }
        }

        /* Mobile responsiveness */
        @media (max-width: 768px) {
            .chat-window {
                width: calc(100vw - 40px);
                height: 500px;
                right: 20px;
                bottom: 100px;
            }

            .message-content {
                max-width: 85%;
            }
        }        

        .company-info-section {
            background: #000000;
            color: #ffffff;
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        
        .company-info-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 100%);
            pointer-events: none;
        }
        
        /* 3D Hero Animation */
        .hero-3d-container {
            position: relative;
            height: 800px;
            margin-bottom: 2rem;
        }
        
        .hero-3d-scene {
            width: 100%;
            height: 100%;
            perspective: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .floating-cube {
            width: 100px;
            height: 100px;
            position: absolute;
            transform-style: preserve-3d;
            animation: floatRotate 6s ease-in-out infinite;
        }
        
        .cube-face {
            position: absolute;
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border: 1px solid rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
        }
        
        .cube-face.front { transform: rotateY(0deg) translateZ(50px); }
        .cube-face.back { transform: rotateY(180deg) translateZ(50px); }
        .cube-face.right { transform: rotateY(90deg) translateZ(50px); }
        .cube-face.left { transform: rotateY(-90deg) translateZ(50px); }
        .cube-face.top { transform: rotateX(90deg) translateZ(50px); }
        .cube-face.bottom { transform: rotateX(-90deg) translateZ(50px); }
        
        .floating-cube:nth-child(1) {
            top: 10%;
            left: 20%;
            animation-delay: 0s;
        }
        
        .floating-cube:nth-child(2) {
            top: 60%;
            right: 15%;
            animation-delay: 2s;
            transform: scale(0.7);
        }
        
        .floating-cube:nth-child(3) {
            top: 30%;
            left: 70%;
            animation-delay: 4s;
            transform: scale(0.5);
        }
        
        @keyframes floatRotate {
            0%, 100% {
                transform: translateY(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            25% {
                transform: translateY(-20px) rotateX(90deg) rotateY(45deg) rotateZ(45deg);
            }
            50% {
                transform: translateY(0px) rotateX(180deg) rotateY(90deg) rotateZ(90deg);
            }
            75% {
                transform: translateY(20px) rotateX(270deg) rotateY(135deg) rotateZ(135deg);
            }
        }
        
        .company-hero {
            text-align: center;
            margin-bottom: 60px;
        }
        
/* Option 1: Smooth Fade-in with Slide Up */
        .hero-option-1 .company-hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #ffffff, #e0e0e0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            
            /* Animation */
            animation: fadeInSlideUp 1.2s ease-out forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        .hero-option-1 .company-hero p {
            font-size: 1.25rem;
            font-weight: 300;
            opacity: 0;
            max-width: 600px;
            margin: 0 auto;
            color: rgba(255,255,255,0.9);
            
            /* Animation with delay */
            animation: fadeInSlideUp 1.2s ease-out 0.3s forwards;
            transform: translateY(30px);
        }

        @keyframes fadeInSlideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .info-card {
            background: #ffffff;
            color: #000000;
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: none;
            box-shadow: 0 10px 30px rgba(255,255,255,0.1);
            transition: all 0.3s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .info-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, rgba(0,0,0,0.05), transparent);
            border-radius: 50%;
            transition: all 0.3s ease;
            transform: scale(0);
        }
        
        .info-card:hover::before {
            transform: scale(3);
        }
        
        .info-card:hover {
            transform: translateY(-5px) rotateX(2deg);
            box-shadow: 0 20px 40px rgba(255,255,255,0.15);
        }
        
        /* 3D Service Cards */
        .service-item {
            background: rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.4s ease;
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .service-item::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 50%;
            transform: translate(-50%, -50%) translateZ(20px);
            transition: all 0.4s ease;
            z-index: 0;
        }
        
        .service-item:hover {
            background: rgba(255,255,255,0.12);
            transform: translateY(-8px) rotateX(5deg) rotateY(5deg);
            box-shadow: 
                0 20px 40px rgba(255,255,255,0.1),
                0 0 0 1px rgba(255,255,255,0.2);
        }
        
        .service-item:hover::before {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08));
            transform: translate(-50%, -50%) translateZ(30px) rotateZ(180deg);
        }
        
        .service-item h4,
        .service-item p {
            position: relative;
            z-index: 2;
        }
        .info-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #000000;
            position: relative;
            z-index: 2;
        }
        
        .info-card p, .info-card li {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
            color: #333333;
            position: relative;
            z-index: 2;
        }
        
        .info-card ul {
            padding-left: 1.25rem;
            margin-bottom: 0;
            position: relative;
            z-index: 2;
        }
        
        .info-card li {
            margin-bottom: 0.5rem;
        }
        
        .services-grid {
            margin-top: 3rem;
        }
        
        /* 3D Icons for Services */
        .service-icon {
            width: 120px;
            height: 80px;
            margin: 0 auto 1rem auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all 0.4s ease;
            background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
            border-radius: 12px;
            overflow: hidden;
        }
        
        .service-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            transition: all 0.4s ease;
            transform: translateZ(10px);
        }
        
        .service-item:hover .service-icon {
            transform: rotateX(5deg) rotateY(5deg) scale(1.05);
        }
        
        .service-item:hover .service-icon img {
            transform: translateZ(15px) scale(1.1);
        }
        
        .icon-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0,0,0,0.3), transparent);
            border-radius: 12px;
            transition: all 0.4s ease;
            z-index: 2;
        }
        
        .service-item:hover .icon-overlay {
            background: linear-gradient(135deg, rgba(0,0,0,0.1), transparent);
        }
        
        .stats-container {
            background: rgba(255,255,255,0.05);
            border-radius: 16px;
            padding: 2rem;
            margin: 3rem 5rem;
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        .stat-item {
            text-align: center;
            margin-bottom: 1rem;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #ffffff;
            display: block;
        }
        
        .stat-label {
            font-size: 0.9rem;
            font-weight: 400;
            opacity: 0.7;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        @media (max-width: 768px) {
            .company-hero h1 {
                font-size: 2.5rem;
            }
            
            .info-card {
                padding: 1.5rem;
            }
            
            .stat-number {
                font-size: 2rem;
            }
        } 
        
/* Hero Section - Break out of container constraints */
.hero-section {
    position: relative;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    margin-left: calc(-50vw + 50%); /* Center and break out of parent container */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: default;
    font-family: 'League Spartan', sans-serif;
}

/* Remove container constraints completely for hero section */
.hero-section .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Hero Video - Cover entire viewport */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Override any parent container constraints that might affect the hero */
.company-info-section .container {
    max-width: none;
    padding: 0;
    overflow: visible;
}

/* Alternative approach - if above doesn't work, use this instead */
.hero-section-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
}

.hero-section-fullscreen .hero-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}     

 .container {
            position: relative;
            z-index: 100;
        }

        /* Filter Buttons */
        .btn-LastestProduct {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: #495057;
            transition: var(--transition-smooth);
            border-radius: 50px;
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-LastestProduct:hover {
            background: rgba(255, 255, 255, 1);
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
        }

        .btn-check:checked + .btn-LastestProduct {
            background: var(--gradient-bg);
            border-color: transparent;
            color: white;
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
        }

        /* Slider Container */
        .cards-slider-container {
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            background: #000000;
            backdrop-filter: blur(20px);
            padding: 2rem;
            margin-top: 2rem;
            margin-left: -15px;
            margin-right: -15px;
            width: calc(100% + 30px);
        }

        .cards-slider {
            display: flex;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            gap: 2rem;
        }

        .card-slide {
            min-width: calc(33.333% - 3.33rem);
            flex-shrink: 0;
        }

        @media (max-width: 768px) {
            .card-slide {
                min-width: calc(50% - 2.5rem);
            }
        }

        @media (max-width: 576px) {
            .card-slide {
                min-width: calc(100% - 1rem);
                max-width: 320px;
                margin: 0 auto;
            }
        }

        @media (max-width: 480px) {
            .card-slide {
                min-width: calc(100% - 0.5rem);
                max-width: 280px;
            }
        }

        /* Product Cards */
        .product-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            transition: var(--transition-smooth);
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-bg);
            transform: scaleX(0);
            transition: transform 0.4s ease;
            transform-origin: left;
        }

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

        .product-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: var(--card-hover-shadow);
            border-color: rgba(0, 123, 255, 0.3);
        }

        .product-card:hover .product-icon {
            transform: scale(1.2) rotate(10deg);
            color: var(--primary-color);
        }

        .product-card:hover .product-title {
            color: var(--primary-color);
        }

        .product-card:hover .btn-product {
            transform: scale(1.1);
            background: var(--gradient-bg);
            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
        }

        .product-icon {
            font-size: 3.5rem;
            background: var(--gradient-bg);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1.5rem;
            transition: var(--transition-smooth);
            /* Fallback for browsers that don't support background-clip */
            color: var(--primary-color);
        }

        /* Ensure icons are visible */
        .product-icon i {
            display: inline-block;
            font-style: normal;
        }

        /* Fallback if Font Awesome doesn't load */
        .product-icon i:before {
            font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", FontAwesome, sans-serif;
            font-weight: 900;
        }

        .product-title {
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 1rem;
            transition: var(--transition-smooth);
            font-size: 1.25rem;
        }

        .product-description {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.6;
            opacity: 0.9;
        }

        .btn-product {
            background: linear-gradient(135deg, #840984 0%, #BD0595 50%, #BD052D 100%);
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            transition: var(--transition-smooth);
            font-weight: 600;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .btn-product::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: left 0.5s;
        }

        .btn-product:hover::before {
            left: 100%;
        }

        /* Navigation Buttons */
        .slider-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-smooth);
            z-index: 100;
            color: var(--primary-color);
            font-size: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .slider-nav:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 8px 30px rgba(0, 123, 255, 0.3);
        }

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

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

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

        .parallax-element {
            position: absolute;
            background: var(--gradient-bg);
            border-radius: 50%;
            opacity: 0.1;
            animation: float 20s ease-in-out infinite;
        }

        .parallax-element:nth-child(1) {
            width: 100px;
            height: 100px;
            top: 10%;
            left: 10%;
            animation-delay: 0s;
        }

        .parallax-element:nth-child(2) {
            width: 150px;
            height: 150px;
            top: 60%;
            right: 10%;
            animation-delay: -5s;
        }

        .parallax-element:nth-child(3) {
            width: 80px;
            height: 80px;
            bottom: 20%;
            left: 20%;
            animation-delay: -10s;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            33% { transform: translateY(-30px) rotate(120deg); }
            66% { transform: translateY(-60px) rotate(240deg); }
        }

        /* Slider Indicators */
        .slider-indicators {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: var(--transition-smooth);
        }

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

        .indicator:hover {
            background: var(--primary-hover);
            transform: scale(1.1);
        }

        /* Loading Animation */
        .card-slide {
            opacity: 0;
            animation: slideIn 0.8s ease-out forwards;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .category-banner {
            background: linear-gradient(135deg, #1F0206 0%, #660B23 100%);
            border-radius: 20px;
            padding: 30px;
            margin: 40px 0 30px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .category-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: shimmer 3s infinite;
        }
        
        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        .category-banner h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .category-banner p {
            font-size: 1.1rem;
            margin: 10px 0 0 0;
            opacity: 0.9;
            position: relative;
            z-index: 2;
            color: white;
            font-family: 'Space Grotesk', sans-serif;
        }
        
        .card-product {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-product:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }        

.setup {
            position: block;
            margin: auto;
            width: 50%;
        }




/* PC - DETAILS */

.main-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.hero-content-container {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;

    
    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/1200x/5b/6d/40/5b6d40fc0b5f754168a8c7f95dba3485.jpg'); 
    background-size: cover;
    background-position: center;
}

.text-overlay {
    position: absolute;
    bottom: 50px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.text-overlay h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.see-more-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 30px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-more-button:hover {
    background-color: #7B54B1;
}

.why-choose-us-section {
    font-family: "Lexend";
    display: flex;
    align-items: center; 
    max-width: 1300px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
    .why-choose-us-section.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .why-choose-us-section.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but the 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }


/* Left Column - Visual Container */
.visual-container {
    flex: 1;
    min-height: 500px;
    background-image: url("../images/products/robot-pc-case.png"); 
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .visual-container:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }

/* Right Column - Content Container */
.content-container {
    flex: 1;
    padding-left: 70px;
}

/* Title Styling */
.title-line-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;

}

/* Feature List Styling */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.feature-list li:hover{
    transform: translateY(-5px) scale(1.05);
}




.feature-icon {
    font-size: 20px; 
    margin-right: 15px;
    color: white; 
    transform: rotate(-15deg); 
}


.benefits-layout {
    font-family: "lexend";
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 60px 20px;
    margin: auto;
}


.benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}


.card-description {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.testimonials-section {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto; 
    grid-template-areas: 
        "content visual"
        "button button"; 
    
    gap: 10px; 
    max-width: 1000px; 
    margin: 70px auto; 
    padding: 0 10px; 
    align-items: start;
}

    .testimonials-section.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .testimonials-section.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }



.testimonial-content {
    grid-area: content;
    padding-right: 20px; 
}

.testimonial-heading-1 {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.quote {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.star-rating .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    

    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .star-rating :hover {
        transform: translateY(-5px) scale(1.05);
    }

@keyframes rgbGoldPulse {
    0% {
        text-shadow: 
            0 0 3px rgba(255, 215, 0, 0.7), 
            0 0 3px rgba(255, 165, 0, 0.5);
    }
    50% {
        /* This is the peak, adding the subtle RGB glow */
        text-shadow: 
            0 0 3px rgba(255, 223, 0, 0.8), 
            0 0 3px rgba(255, 175, 0, 0.6),  
            0 0 3px rgba(255, 0, 0, 0.1), 
            0 0 3px rgba(0, 255, 0, 0.1), 
            0 0 3px rgba(0, 0, 255, 0.1);    
    }
    100% {
        text-shadow: 
            0 0 3px rgba(255, 220, 0, 0.75),
            0 0 3px rgba(255, 170, 0, 0.55);
    }
}

/* Product Visual (Right Column) */
.product-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(../images/products/gaming-pc.png); /* REPLACE with your actual image path or URL */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #3E155D 0%, #5587F0 50%, #7B54B1 100%) 1;
    }


/* Button Container (Spans both columns) */
.button-container {
    grid-area: button;
    display: flex;
    justify-content: center; 
    margin-top: 40px; 
}

/* See Reviews Button Styling */
.see-reviews-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #7B54B1;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(123, 84, 177, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.see-reviews-button:hover {
    background-color: #9370DB;
}

.main-promo-bot {
    font-family: "Space Grotesk";
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.hero-content-container-bot {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    background-image:
    linear-gradient(to top, rgba(62, 21, 93, 1) 0%, rgba(85, 135, 240, 0.4) 50%, rgba(123, 84, 177, 0) 100%),
    url('https://i.pinimg.com/736x/f2/04/2c/f2042ce98e8fccbb9383535424e608b4.jpg');      
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.text-overlay-bot {
    position: absolute;
    bottom: 30px;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}

.text-overlay-bot h1 {
    color: white;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

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



@media (min-width: 1400px) {
    .main-promo {
        max-width: 1500px;
    }

    .why-choose-us-section {
        max-width: 1500px;
    }

    .title-line-1 {
        font-size: 2rem; 
    }
    
    .benefits-layout {
        max-width: 1500px;
        gap: 50px;
    }

    .testimonials-section {
        max-width: 1400px;
    }
}

@media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .why-choose-us-section {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-line-1 {
        font-size: 2.8rem; 
    }

    .benefits-layout {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 80px auto;
    }

}

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 30px 40px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 40px;
    }

    .why-choose-us-section {
        padding: 0 30px;
        margin: 60px auto;
    }

    .content-container {
        padding-left: 30px;
    }

    .visual-container {
        min-height: 400px;
    }

    .testimonial-heading-1 {
        font-size: 42px;
    }

    .quote {
        font-size: 30px;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    

    .product-visual {
        min-height: 400px;
    }
}

/* Mobile (up to 768px) */
@media (max-width: 768px) {
    .main-promo {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
        margin-top: -150px;
    }

    .hero-content-container,
    .hero-content-container-bot {
        width: 100%;
        height: 500px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 20px 25px;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 28px;
    }


    .why-choose-us-section {
        flex-direction: column;
        padding: 0 20px;
        margin: 40px auto;
        text-align: center;
    }

    .visual-container {
        width: 100%;
        min-height: 350px;
        margin-left: 0;
        margin-bottom: 30px;
        border-width: 8px;
    }

    .content-container {
        padding-left: 0;
        width: 100%;
    }

    .feature-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .feature-list li {
        font-size: 24px;
        line-height: 1.8;
        justify-content: center;
    }

    .feature-icon {
        font-size: 18px;
        margin-right: 10px;
    }

    .benefits-layout {
        font-size: 2rem;
        grid-template-columns: 1fr; /* Stack items vertically */

    }

    .benefit-card {
        min-width: 100%;
    }


    .card-description {
        font-size: 1.5rem;
    }

    .testimonials-section {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "content"
            "visual"
            "button";
        margin: 40px auto;
        padding: 20px;
    }

    .testimonial-content {
        padding-right: 0;
        text-align: center;
    }

    .testimonial-heading-1 {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .quote {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .star-rating {
        text-align: center;
        font-size: 20px;
        margin-top: 40px;
    }

    .product-visual {
        min-height: 400px;
        border-width: 8px;
    }

    .button-container {
        margin-top: 20px;
    }

    .main-promo-bot {
        font-size: 2rem;
    }

    .hero-content-container-bot {
        max-width: 768px; /* Ensure it doesn't overflow */
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    .hero-content-container,
    .hero-content-container-bot {
        height: 500px;
        max-width: 100%;
    }

    .text-overlay h1,
    .text-overlay-bot h1 {
        font-size: 24px;
    }

    .text-overlay,
    .text-overlay-bot {
        padding: 15px 20px;
    }


    .title-line-1 {
        font-size: 35px;
    }

    .feature-list li {
        font-size: 20px;
    }

    .testimonials-section {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }
    

    .testimonial-heading-1 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .quote {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .star-rating .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .product-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .testimonial-heading-1 {
        font-size: 24px;
    }

    .quote {
        font-size: 16px;
    }

    .product-visual {
        min-height: 250px;
    }
}



/* custom.html design by PRINCESS*/

.cspcb {
    background-color: #2f8d46;
    background-image: url('/images/dpc-pcbuilds.jpg');
    background-repeat: repeat;
    -webkit-text-fill-color: transparent;
    margin-top: 20px;
    font-size: 80px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 1000;
    -webkit-font-smoothing: antialiased;
    animation: 3s anim-lineUp linear;
}
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

.about-cspcb {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    text-align: center;
    color: white;
    max-width: 1000px;
    margin: 0 auto  3rem;
    line-height: 1.6;
    animation: 3s anim-lineUp linear;
        }
        @keyframes anim-lineUp {
        0% {
            opacity: 0;
            transform: translateY(80%);
        }
        20% {
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: translateY(0%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
}

/* llllllll */

.projects-images{
    margin: 50px;
    display: inline-block;
}

.projects-img-card1 {
    --g: 4px;     /* the gap */
    --b: 12px;    /* border thickness*/
    --c: indigo; /* the color */
    max-width: 120%;
    height: 20vh;
    margin-block: 4rem;
    display: inline-block;
    align-content: center;
    
    padding: calc(var(--g) + var(--b));
    --_c: #0000 0 25%, var(--c) 0 50%;
    --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
    --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
    background:
    var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
    var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
    background-size: 200% var(--b),var(--b) 200%;
    cursor: pointer;
    filter: grayscale(50%);
    transition: .3s;
}

.projects-img-card1{
    row-gap: 20px; /* Gap between rows (vertical space) */
    column-gap: 10px; /* Optional: Gap between columns (horizontal space) */
}
.projects-img-card1:hover {
  --_p: 75%;
  filter: grayscale(0%);
  --c: #AC3838; /* new color */
}

.projects-img {
    border: 1px solid;
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    display: block;
    align-content: center;
    width: 100%;

}

.projects-image-title{
    color: #FFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    margin-top: 15px;
}

/*================ CCTV DETAILS ==================*/

.cctv-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; 
    max-width: 2000px; 
    margin: 0px auto 0 auto;
}

.cctv-content-container {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(50, 0, 0, 0.9) 0%, rgba(150, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 100%),
    url('/images/services/cctv.jpg'); 
    background-size: cover;
    background-position: center;
    animation: fadeInUp 1.1s ease-out forwards;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.cctv-text-overlay {
    font-family: "Space Grotesk";
    position: absolute;
    bottom: 30px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
    animation: fadeInUp 0.7s ease-out forwards;
}

.cctv-text-overlay h1 {
    color: white;
    font-size: 64px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    
}

.security-section {
    padding: 20px 20px; 
    text-align: center; 
    width: 100%; 
    
}

.animate-on-scroll .security-section {
    opacity: 0;
    transform: translateY(20px);
}

.animate-on-scroll.is-visible .security-section {
    opacity: 1;
    transform: translateY(0);
}

.section-title {
    font-family: "Lexend"; 
    font-size: 58px; 
    font-weight: 500; 
    margin-bottom: 10px; 
    margin-top: 20px;
}

.section-text {
    font-family:"Space Grotesk"; 
    color: white;
    font-size: 28px;
    line-height: 1.6;
    max-width: 1300px; 
    margin: 10px auto; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 270px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 12px;
    }

    .cctv-text-overlay h1 {
        font-size: 21px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 22px;
    }

    .section-text {
        font-size: 12px;
        max-width: 100%;
        padding: 0 6px;
    }

    .security-section {
        padding: 10px 8px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 285px;
        margin-bottom: 15px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 13px 14px;
    }

    .cctv-text-overlay h1 {
        font-size: 23px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 23px;
    }

    .section-text {
        font-size: 12.5px;
        max-width: 100%;
        padding: 0 6px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 300px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 14px 15px;
    }

    .cctv-text-overlay h1 {
        font-size: 25px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 24px;
    }

    .section-text {
        font-size: 13px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 310px;
        margin-bottom: 18px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 15px 16px;
    }

    .cctv-text-overlay h1 {
        font-size: 26px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 25px;
    }

    .section-text {
        font-size: 13.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 400px) and (max-width: 412px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 325px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 16px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 28px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 26px;
    }

    .section-text {
        font-size: 14px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 330px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 17px 18px;
    }

    .cctv-text-overlay h1 {
        font-size: 29px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 27px;
    }

    .section-text {
        font-size: 14.5px;
        max-width: 100%;
        padding: 0 8px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 340px;
        margin-bottom: 20px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 18px 20px;
    }

    .cctv-text-overlay h1 {
        font-size: 30px;
        line-height: 1.1;
    }

    .section-title {
        font-size: 28px;
    }

    .section-text {
        font-size: 15px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        width: 100%;
        height: 380px;
        margin-bottom: 25px;
        margin-top: -125px;
    }

    .cctv-text-overlay {
        padding: 20px 25px;
    }

    .cctv-text-overlay h1 {
        font-size: 34px;
    }

    .section-title {
        font-size: 32px;
    }

    .section-text {
        font-size: 17px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 450px;
        margin-bottom: 30px;
        margin-top: -130px;
    }

    .cctv-text-overlay {
        padding: 25px 30px;
    }

    .cctv-text-overlay h1 {
        font-size: 42px;
    }

    .section-title {
        font-size: 38px;
    }

    .section-text {
        font-size: 20px;
        max-width: 100%;
        padding: 0 15px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 470px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 24px 34px;
    }

    .cctv-text-overlay h1 {
        font-size: 44px;
    }

    .section-title {
        font-size: 39px;
    }

    .section-text {
        font-size: 20.5px;
        max-width: 720px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 490px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 26px 36px;
    }

    .cctv-text-overlay h1 {
        font-size: 46px;
    }

    .section-title {
        font-size: 40px;
    }

    .section-text {
        font-size: 21px;
        max-width: 750px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 510px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 28px 38px;
    }

    .cctv-text-overlay h1 {
        font-size: 48px;
    }

    .section-title {
        font-size: 42px;
    }

    .section-text {
        font-size: 22px;
        max-width: 800px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 530px;
    }

    .cctv-text-overlay {
        padding: 30px 40px;
    }

    .cctv-text-overlay h1 {
        font-size: 50px;
    }

    .section-title {
        font-size: 44px;
    }

    .section-text {
        font-size: 23px;
        max-width: 850px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 550px;
        margin-top: -60px;
    }

    .cctv-text-overlay {
        padding: 30px 45px;
    }

    .cctv-text-overlay h1 {
        font-size: 52px;
    }

    .section-title {
        font-size: 46px;
    }

    .section-text {
        font-size: 24px;
        max-width: 900px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .cctv-promo {
        width: 100%;
        margin: 0 auto;
    }

    .cctv-content-container {
        height: 600px;
        margin-top: -50px;
    }

    .cctv-text-overlay {
        padding: 35px 50px;
    }

    .cctv-text-overlay h1 {
        font-size: 60px;
    }

    .section-title {
        font-size: 54px;
    }

    .section-text {
        font-size: 26px;
        max-width: 1200px;
    }
}

/* CCTV VIDEO */

.cctv-video {
    position: relative;
    width: 100%; 
    max-width: 2000px; 
    height: 800px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: #000;
    padding-bottom: 30px;
    box-sizing: border-box;
}


#bgVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%); 
    object-fit: cover;
}


.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}


.hero-content-vid {
    position: relative;
    z-index: 3;
    margin-bottom: 0; 
}

.btn-find-out-more {
    font-family: "Lexend"; 
    display: inline-block;
    padding: 5px 40px;
    text-decoration: none;
    font-size: 20px;
    font-weight: light;
    color: #ffffff;
    border-radius: 30px;
    width: 298pxpx;
    height: 45pxpx;
    margin-bottom: 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: linear-gradient(88.78deg, #BA1022 0.07%, #EC0120 50%, #FD6A59 99.93%);
    border: none;
    cursor: pointer;
    animation: buttonEntrancee 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards,
               buttonPulsee 2s ease-in-out 1.6s infinite;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes buttonEntrancee {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
        filter: blur(10px);
    }
    70% {
        transform: scale(1.15) rotate(10deg);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0px);
    }
}


@keyframes buttonPulsee {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(172, 56, 56, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(172, 56, 56, 0.6),
                    0 0 40px rgba(172, 56, 56, 0.3);
    }
}

.btn-find-out-more:hover {
    background: linear-gradient(to right, #e00000 0%, #222222 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.project-overview {
    margin-top: 60px;
    padding: 20px 20px;
    text-align: center;
}

.overview {
    font-family:"Space Grotesk";
    color: white;
    font-weight: 500;
    font-size: 64px;
    line-height: 1.6;
    margin: 0 auto;
}


@media (max-width: 1200px) {
    .cctv-video {
        /* Reduce height for a more compact presentation */
        height: 600px;
        /* Adjust margin */
        margin: 30px auto;
        /* Reduce bottom padding */
        padding-bottom: 20px;
    }

    .overview {
        /* Decrease the large font size for tablets */
        font-size: 48px;
    }
}


@media (max-width: 768px) {
    .cctv-video {
        /* Further reduce height for mobile viewports */
        height: 450px;
        margin: 20px auto;
        width: auto; /* Ensure no horizontal scroll is caused by margin */
    }

    .overview {
        /* Major decrease in font size for mobile */
        font-size: 36px;
        line-height: 1.4;
    }

    .btn-find-out-more {
        /* Adjust button dimensions and font size */
        font-size: 18px;
        padding: 8px 30px;
        /* Remove fixed width/height properties and rely on padding/content */
        width: auto;
        height: auto;
        margin-bottom: 10px;
    }

    .project-overview {
        /* Reduce padding */
        padding: 10px 10px;
    }
}


@media (max-width: 480px) {
    .cctv-video {
        width: auto;
        height: 350px;
        padding-bottom: 10px;
    }

    .overview {
        /* Smallest font size for main header text */
        font-size: 20px;
    }

    .btn-find-out-more {
        font-size: 16px;
        padding: 6px 20px;
        border-radius: 20px;
    }
}

/* CCTV DETAILS CARDS*/


/* NEW: Keyframe animation for fade-in and subtle rise */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(90px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NEW: Initial hidden state for the scroll animation targets */
.surveillance-carousel-container.hidden,
.navigation-dots-container.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: none; /* Temporarily disable transition for initial state */
}

/* NEW: Class to apply animation after scroll trigger */
.surveillance-carousel-container.scroll-animation,
.navigation-dots-container.scroll-animation {
    animation: fadeInUp 1.5s ease-out forwards; 
    /* Optional: Add a slight delay for the dots container for a staggered effect */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Restore any existing transition */
}

/* Add staggered effect for the dots container */
.navigation-dots-container.scroll-animation {
    animation-delay: 0.3s;
}

.surveillance-carousel-container {
    margin: 0 auto;
    width: 100%;
    padding: 50px 0;
    background-color: #000;
    overflow: hidden;
    position: relative;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s; 
}

.overview {
    /* ... existing styles ... */
    /* ADDED: Initial state for 'overview' text (optional, but good for consistent animation) */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 0.8s ease-out;
}

/* NEW: Class to animate 'overview' text */
.overview.scroll-animation {
    opacity: 1;
    transform: translateY(0);
}


.carousel-viewport-wrapper {
    width: 100%;
    height: 600px;
    position: relative;
    perspective: 2000px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    user-select: none;
}

.carousel-viewport-wrapper.dragging {
    cursor: grabbing;
}

.rotating-carousel-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.surveillance-card-element {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    height: 560px;
    margin-left: -175px;
    margin-top: -280px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #222;
    cursor: pointer;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    user-select: none;
}

.card-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.gradient-info-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.location-title-text {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.description-snippet-text {
    font-family: "Lexend";
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.external-action-icon {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    pointer-events: all;
}

.external-action-icon:hover {
    opacity: 1;
}

.navigation-dots-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
    /* ADDED: Smooth transition for properties not handled by the keyframes */
    transition: opacity 1s, transform 1s;
}

.position-indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.5;
}

.position-indicator-dot.current-active {
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    opacity: 1;
}

/* Responsive breakpoints */
@media (max-width: 1400px) {
    .carousel-viewport-wrapper {
        height: 550px;
        perspective: 1800px;
    }
}

@media (max-width: 1200px) {
    .carousel-viewport-wrapper {
        height: 520px;
        perspective: 1600px;
    }

    .surveillance-card-element {
        width: 320px;
        height: 520px;
        margin-left: -160px;
        margin-top: -260px;
    }
}

@media (max-width: 1024px) {
    .carousel-viewport-wrapper {
        height: 500px;
        perspective: 1500px;
    }

    .surveillance-card-element {
        width: 300px;
        height: 500px;
        margin-left: -150px;
        margin-top: -250px;
    }

    .gradient-info-panel {
        padding: 18px;
        min-height: 150px;
    }

    .location-title-text {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .surveillance-carousel-container {
        padding: 60px 0;
    }

    .carousel-viewport-wrapper {
        height: 450px;
        perspective: 1200px;
    }

    .surveillance-card-element {
        width: 260px;
        height: 420px;
        margin-left: -130px;
        margin-top: -210px;
    }

    .gradient-info-panel {
        padding: 15px;
        min-height: 130px;
    }

    .location-title-text {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .description-snippet-text {
        font-size: 9px;
        margin-bottom: 8px;
    }

    .navigation-dots-container {
        margin-top: 40px;
        gap: 15px;
    }

    .position-indicator-dot {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 640px) {
    .carousel-viewport-wrapper {
        height: 420px;
        perspective: 1100px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }
}

@media (max-width: 480px) {
    .surveillance-carousel-container {
        padding: 40px 0;
    }

    .carousel-viewport-wrapper {
        height: 380px;
        perspective: 1000px;
    }

    .surveillance-card-element {
        width: 220px;
        height: 350px;
        margin-left: -110px;
        margin-top: -175px;
    }

    .gradient-info-panel {
        padding: 12px;
        min-height: 110px;
    }

    .location-title-text {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .description-snippet-text {
        font-size: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 6px;
    }

    .external-action-icon svg {
        width: 20px;
        height: 20px;
    }

    .navigation-dots-container {
        margin-top: 30px;
        gap: 12px;
    }

    .position-indicator-dot {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 375px) {
    .carousel-viewport-wrapper {
        height: 350px;
    }

    .surveillance-card-element {
        width: 200px;
        height: 320px;
        margin-left: -100px;
        margin-top: -160px;
    }

    .location-title-text {
        font-size: 12px;
    }

    .description-snippet-text {
        font-size: 7.5px;
    }

    .external-action-icon {
        display: none;
    }
}

@media (max-width: 320px) {
    .carousel-viewport-wrapper {
        height: 320px;
    }

    .surveillance-card-element {
        width: 180px;
        height: 290px;
        margin-left: -90px;
        margin-top: -145px;
    }

    .gradient-info-panel {
        padding: 10px;
        min-height: 90px;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .surveillance-carousel-container {
        padding: 30px 0;
    }

    .carousel-viewport-wrapper {
        height: 400px;
    }

    .surveillance-card-element {
        width: 240px;
        height: 380px;
        margin-left: -120px;
        margin-top: -190px;
    }

    .navigation-dots-container {
        margin-top: 25px;
    }
}


.item-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color: #fff;
    opacity: 0.96;
    background-image: linear-gradient(to top, #BA1022 10%, #EC0120 40%, #FD6A59 100%);
    backdrop-filter: blur(120px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.slider-item:not(.active) .item-content-overlay {
    opacity: 0.96;
}

.item-heading {
    font-family: "Space Grotesk";
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
}

.item-text {
    font-family: "Space Grotesk";
    font-size: 10px;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: 10px;
}

.item-external-link {
    align-self: flex-end;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.item-external-link:hover {
    opacity: 1;
}

.slider-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    gap: 18px;
}

.indicator-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.indicator-dot.active {
    background-color:linear-gradient(to top, #BA1022 0%, #EC0120 40%, #FD6A59 100%);
    transform: scale(1.9);
    border-color: #ff0000;
}

@media (max-width: 1024px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-item:not(.active) {
        width: 200px;
        height: 350px;
        margin: 0 10px;
    }
    .slider-item.active {
        justify-content: center;
        width: 300px;
        height: 500px;
        margin: 0 20px;
    }
    .item-heading {
        font-size: 1.1em;
    }
    .item-text {
        font-size: 0.85em;
    }
    .slider-track {
        padding: 0 5%;
    }
}

@media (max-width: 768px) {
    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 150px;
        height: 280px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.8);
    }
    .slider-item.active {
        width: 250px;
        height: 400px;
        margin: 0 10px;
    }
    .item-content-overlay {
        padding: 15px;
        min-height: 120px;
    }
    .item-heading {
        font-size: 1em;
    }
    .item-text {
        font-size: 0.8em;
    }
    .slider-track {
        padding: 0 2%;
    }
}

@media (max-width: 480px) {

    .cctv-slider-section {
    margin: auto;
    width: 85%;
    padding: 100px 0 ;
    }

    .slider-track {
        justify-content: flex-start;
        padding: 0 20px;
    }
    .slider-item:not(.active) {
        justify-content: center;
        width: 100px;
        height: 180px;
        margin: 0 5px;
        opacity: 0;
        transform: scale(0.7);
    }
    .slider-item.active {
        width: 280px;
        height: 450px;
        margin: 0 10px;
    }
    .item-heading {
        font-size: 0.9em;
    }
    .item-text {
        font-size: 0.75em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .item-external-link {
        display: none;
    }
}

/* CCTV FLASHCARDS */

.ui-main-panel {
    margin: 80px auto;
    width: 100%;     
    width: 1700px;
    height: 600px;
    padding: 20px;
    background: linear-gradient(180deg, #D9D9D9 0%, #737373 100%);
    border-radius: 50px;
    border: 5px solid;
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    overflow: hidden; 
}

.panel-text-module {
    padding: 20px 0 20px 100px;
}

.panel-text-module p {
    font-family: "Space Grotesk";
    color: #ffffff;
    font-size: 32px;
    line-height: 1.6;
    width: 950px;

}

.surveillance-slider-zone {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-stack-viewport {
    position: relative;
    width: 50px; 
    height: 380px;
}

.security-image-card {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 280px;
    height: 380px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    cursor: pointer; 
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); 

    /* Initial hidden/back position for all cards */
    transform: translate(-50%, -50%) translate3d(0, 0, -200px) rotateY(0deg) scale(0.8);
    opacity: 0;
    z-index: 0;
}

.security-image-card[data-index="0"] { background-image: url('/images/services/PASIG-THREELIGHTS-2.jpg'); } 
.security-image-card[data-index="1"] { background-image: url('/images/services/BENJAMIN-CAMERINO-2.jpg'); }
.security-image-card[data-index="2"] { background-image: url('/images/services/BJMP-Teresa-\ District-JAIL-2.jpg'); }
.security-image-card[data-index="3"] { background-image: url('/images/services/RON-GONZALES-2.jpg'); }


.security-image-card.card--active {
    transform: translate(-50%, -50%) translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
    z-index: 100;
    cursor: pointer;
}


.security-image-card.card--stacked-1 {
    transform: translate(-50%, -50%) translate3d(-10px, 10px, -20px) rotate(-3deg);
    opacity: 1;
    z-index: 9;
    filter: brightness(0.8);
    cursor: default;
}

.security-image-card.card--stacked-2 {
    transform: translate(-50%, -50%) translate3d(-20px, 20px, -40px) rotate(-6deg);
    opacity: 1;
    z-index: 8;
    filter: brightness(0.7);
    cursor: default;
}

.security-image-card.card--stacked-3 {
    transform: translate(-50%, -50%) translate3d(-30px, 30px, -60px) rotate(-9deg);
    opacity: 1;
    z-index: 7;
    filter: brightness(0.6);
    cursor: default;
}


.security-image-card.card--slide-out {
    transform: translate(-50%, -50%) translate3d(100px, 0, 0) rotate(5deg) scale(0.9);
    opacity: 0;
    z-index: 11; 
}

@media (min-width: 320px) and (max-width: 344px) {
    .ui-main-panel {
        width: 95%;
        height: 550px;
        margin: 15px auto;
        padding: 8px;
        border-radius: 20px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 8px;
        text-align: center;
        margin-bottom: -40px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 280px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 150px;
        height: 200px;
    }

    .security-image-card {
        width: 160px;
        height: 230px;
    }
}

@media (min-width: 350px) and (max-width: 360px) {
    .ui-main-panel {
        width: 95%;
        min-height: 580px;
        margin: 16px auto;
        padding: 9px;
        border-radius: 22px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 14px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 290px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 220px;
        height: 260px;
    }

    .security-image-card {
        width: 170px;
        height: 240px;
    }
}

@media (min-width: 370px) and (max-width: 375px) {
    .ui-main-panel {
        width: 95%;
        min-height: 620px;
        margin: 20px auto;
        padding: 9px;
        border-radius: 24px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .panel-text-module {
        padding: 9px;
        text-align: center;
        margin-bottom: -50px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.4;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 270px;
        width: 100%;
        margin-left: 20px;
    }

    .card-stack-viewport {
        width: 230px;
        height: 270px;
    }

    .security-image-card {
        width: 180px;
        height: 230px;
    }
}

@media (min-width: 380px) and (max-width: 390px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 18px auto;
        padding: 10px;
        border-radius: 25px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 16.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 310px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 240px;
        height: 280px;
    }

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

@media (min-width: 400px) and (max-width: 412px) {
    .ui-main-panel {
        width: 95%;
        min-height: 650px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 26px;
        border-width: 2px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-bottom: -30px;
    }

    .panel-text-module p {
        font-size: 16px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 320px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 250px;
        height: 290px;
    }

    .security-image-card {
        width: 200px;
        height: 270px;
    }
}

@media (min-width: 413px) and (max-width: 414px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 19px auto;
        padding: 10px;
        border-radius: 27px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .panel-text-module p {
        font-size: 17.5px;
        line-height: 1.45;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 325px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 255px;
        height: 295px;
    }

    .security-image-card {
        width: 205px;
        height: 275px;
    }
}

@media (min-width: 420px) and (max-width: 430px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 20px auto;
        padding: 10px;
        border-radius: 28px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 10px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 18px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 330px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 260px;
        height: 300px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 500px) and (max-width: 540px) {
    .ui-main-panel {
        width: 95%;
        min-height: 680px;
        margin: 22px auto;
        padding: 12px;
        border-radius: 30px;
        border-width: 3px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 12px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 19px;
        line-height: 1.5;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 350px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 280px;
        height: 320px;
    }

    .security-image-card {
        width: 210px;
        height: 280px;
    }
}

@media (min-width: 750px) and (max-width: 768px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 28px auto;
        padding: 15px;
        border-radius: 38px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 18px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 23px;
        line-height: 1.55;
        width: 100%;
        margin-bottom: -20px;
    }

    .surveillance-slider-zone {
        height: 380px;
        width: 100%;
        margin-left: 10px;
    }

    .card-stack-viewport {
        width: 290px;
        height: 340px;
    }

    .security-image-card {
        width: 235px;
        height: 320px;
    }
}

@media (min-width: 800px) and (max-width: 820px) {
    .ui-main-panel {
        width: 95%;
        min-height: 780px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 30px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 390px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 295px;
        height: 345px;
    }

    .security-image-card {
        width: 238px;
        height: 325px;
    }
}

@media (min-width: 840px) and (max-width: 853px) {
    .ui-main-panel {
        width: 95%;
        min-height: 790px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .panel-text-module {
        padding: 20px 35px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.58;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 395px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 298px;
        height: 348px;
    }

    .security-image-card {
        width: 240px;
        height: 328px;
    }
}

@media (min-width: 900px) and (max-width: 912px) {
    .ui-main-panel {
        width: 95%;
        min-height: 850px;
        margin: 30px auto;
        padding: 16px;
        border-radius: 40px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 40px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 24px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 400px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 300px;
        height: 350px;
    }

    .security-image-card {
        width: 290px;
        height: 380px;
    }
}

@media (min-width: 980px) and (max-width: 992px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 820px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .panel-text-module {
        padding: 20px 45px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 410px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 305px;
        height: 355px;
    }

    .security-image-card {
        width: 245px;
        height: 335px;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .ui-main-panel {
        width: 95%;
        height: auto;
        min-height: 850px;
        margin: 30px auto;
        padding: 17px;
        border-radius: 42px;
        border-width: 4px;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .panel-text-module {
        padding: 20px 50px;
        text-align: center;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: 415px;
        width: 100%;
    }

    .card-stack-viewport {
        width: 308px;
        height: 358px;
    }

    .security-image-card {
        width: 298px;
        height: 388px;
    }
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .ui-main-panel {
        width: 95%;
        height: 580px;
        margin: 60px auto;
        padding: 18px;
        border-radius: 45px;
        border-width: 5px;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .panel-text-module {
        padding: 20px 0 20px 70px;
    }

    .panel-text-module p {
        font-size: 25px;
        line-height: 1.6;
        width: 100%;
    }

    .surveillance-slider-zone {
        height: auto;
        width: 100%;
    }

    .card-stack-viewport {
        width: 350px;
        height: 400px;
    }

    .security-image-card {
        margin-top: 10px;
        margin-left: 10px;
        width: 290px;
        height: 390px;
    }

}

/* ====================== End ======================= */

/* PC BUILD DETAILS */

.pc-project-container {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #000; 
    color: #fff;
    overflow-x: hidden;
    box-sizing: border-box;
}

.top-section {
    position: relative;
    width: 100%;
    height: 650px;
    margin: 0;
    padding: 0;
    background-color: #222; 
    background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
    box-sizing: border-box;
    animation: fadeIn 1s ease-out, subtleZoom 20s ease-in-out infinite alternate;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes subtleZoom {
    from {
        background-size: 100%;
    }
    to {
        background-size: 105%;
    }
}

.bottom-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
    background-color: #000; 
    text-align: center;
    box-sizing: border-box;
    animation: fadeInUp 1s ease-out 0.3s both;
}

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

.pc-cases-row {
    position: relative;
    width: 100%;
    max-width: 2500px;
    margin: clamp(-100px, -15vh, -200px) auto 0;
    display: flex;
    justify-content: center; 
    align-items: flex-end; 
    z-index: 100;
    padding: 0 clamp(15px, 3vw, 40px);
    box-sizing: border-box;
    animation: slideUp 1.2s ease-out 0.5s both;
}

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

.pc-case-image {
    width: 100%; 
    height: auto;
    max-width: 100%;
    min-height: clamp(150px, 25vh, 300px);
    max-height: clamp(250px, 40vh, 520px);
    object-fit: contain;
    object-position: center bottom;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.pc-case-image:hover {
    transform: scale(1.05) translateY(-10px);
    filter: brightness(1.1);
}

.caption {
    margin: clamp(20px, 3vh, 50px) 0 0;
    padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
    z-index: 20;
    box-sizing: border-box;
    animation: fadeIn 1s ease-out 0.8s both;
}

.caption p {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(16px, 3.5vw, 32px);
    font-weight: 400;
    margin-top: 20px;
    padding: 0;
    letter-spacing: clamp(0.5px, 0.1vw, 1px);
    line-height: 1.4;
}

.sr-title {
    width: 100%;
    max-width: 1200px;
    margin: 50px auto 50px;
    padding: 0 clamp(15px, 3vw, 30px);
    box-sizing: border-box;
}

.member-shop h1 {
    text-align: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 7vw, 64px);
    margin: clamp(20px, 4vh, 40px) 0;
    padding: 0 clamp(15px, 3vw, 30px);
    line-height: 1.2;
    box-sizing: border-box;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Universal box-sizing */
* {
    box-sizing: border-box;
}

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
    .top-section {
        height: clamp(250px, 35vh, 300px);
        background-position: center;
        box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        animation: subtlePulse 8s ease-in-out infinite;
    }
    
    .pc-cases-row {
        margin-top: clamp(-150px, -15vh, -100px);
        padding: 0 10px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 500px;
        animation: floatIn 0.8s ease-out forwards;
        opacity: 0;
        transform: translateY(30px);
    }
    
    .pc-case-image:nth-child(1) {
        animation-delay: 0.2s;
    }
    
    .pc-case-image:nth-child(2) {
        animation-delay: 0.4s;
    }
    
    .pc-case-image:nth-child(3) {
        animation-delay: 0.6s;
    }
    
    .bottom-section {
        padding: 15px 10px;
        animation: fadeInUp 1s ease-out 0.8s forwards;
        opacity: 0;
    }
    
    .caption {
        margin-top: clamp(15px, 2vh, 30px);
        padding: 10px 15px;
        animation: slideInLeft 0.6s ease-out 1.2s forwards;
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .member-shop h1 {
        margin: 15px 0;
        padding: 0 10px;
        animation: fadeInScale 0.7s ease-out 0.3s forwards;
        opacity: 0;
        transform: scale(0.9);
    }
    
    /* Keyframe animations */
    @keyframes floatIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInLeft {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes fadeInScale {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes subtlePulse {
        0%, 100% {
            box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
        }
        50% {
            box-shadow: inset 50px 50px 120px rgba(100, 0, 150, 0.5);
        }
    }
}
/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
    .top-section {
        height: clamp(300px, 45vh, 500px);
        background-position: top center;
        box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-90px, -14vh, -130px);
        padding: 0 15px;
    }
    
    .pc-case-image {
        min-height: 150px;
        max-height: 250px;
    }
    
    .bottom-section {
        padding: 20px 15px;
    }
    
    .caption {
        margin-top: clamp(18px, 2.5vh, 35px);
        padding: 12px 20px;
    }
    
    .member-shop h1 {
        margin: 20px 0;
        padding: 0 15px;
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
    .top-section {
        height: clamp(400px, 55vh, 650px);
        box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-130px, -18vh, -180px);
        padding: 0 20px;
    }
    
    .pc-case-image {
        min-height: 200px;
        max-height: 350px;
    }
    
    .bottom-section {
        padding: 25px 20px;
    }
    
    .caption {
        margin-top: clamp(25px, 3vh, 40px);
        padding: 15px 25px;
    }
    
    .member-shop h1 {
        margin: 25px 0;
        padding: 0 20px;
    }
}

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .top-section {
        height: clamp(500px, 65vh, 750px);
        box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-180px, -25vh, -250px);
        padding: 0 30px;
    }
    
    .pc-case-image {
        min-height: 280px;
        max-height: 450px;
    }
    
    .bottom-section {
        padding: 30px 25px;
    }
    
    .caption {
        margin-top: clamp(30px, 3.5vh, 45px);
        padding: 18px 30px;
    }
    
    .member-shop h1 {
        margin: 30px 0;
        padding: 0 25px;
    }
}

/* Extra large devices (large desktops) */
@media (min-width: 1440px) {
    .top-section {
        height: clamp(600px, 70vh, 800px);
        box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
    }
    
    .pc-cases-row {
        margin-top: clamp(-220px, -30vh, -300px);
        padding: 0 40px;
    }
    
    .pc-case-image {
        min-height: 350px;
        max-height: 520px;
    }
    
    .bottom-section {
        padding: 35px 30px;
    }
    
    .caption {
        margin-top: clamp(35px, 4vh, 50px);
        padding: 20px 35px;
    }
    
    .member-shop h1 {
        margin: 35px 0;
        padding: 0 30px;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .pc-case-image {
        max-height: 600px;
    }
    
    .bottom-section {
        padding: 40px 40px;
    }
    
    .caption {
        padding: 25px 40px;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    .top-section {
        height: 60vh;
    }
    
    .pc-cases-row {
        margin-top: -20vh;
        padding: 0 clamp(10px, 2vw, 20px);
    }
    
    .pc-case-image {
        max-height: 35vh;
        min-height: 25vh;
    }
    
    .bottom-section {
        padding: 15px clamp(10px, 2vw, 20px);
    }
    
    .caption {
        margin-top: 15px;
        padding: 10px 15px;
    }
}

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
    .top-section {
        height: 50vh;
    }
    
    .pc-cases-row {
        margin-top: -15vh;
        padding: 0 10px;
    }
    
    .pc-case-image {
        max-height: 30vh;
        min-height: 20vh;
    }
    
    .bottom-section {
        padding: 10px 15px;
    }
    
    .caption {
        margin-top: 10px;
        padding: 8px 15px;
    }
    
    .member-shop h1 {
        margin: 10px 0;
    }
}

/* OVERVIEW */


.main-wrapper {
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            background-color: #000; 
            color: #fff;
            overflow-x: hidden;
            box-sizing: border-box;
        }

.hero-banner {
            position: relative;
            width: 100%;
            height: clamp(300px, 50vh, 800px);
            margin: 0;
            padding: 0;
            background-color: #222; 
            background-image: url('https://i.pinimg.com/736x/36/17/fd/3617fddb43cb9cb647061615e198cbc8.jpg'); 
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: inset 100px 100px 150px rgba(100, 0, 150, 0.4);
            box-sizing: border-box;
        }

.footer-area {
            position: relative;
            width: 100%;
            margin: 0;
            padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 30px);
            background-color: #000; 
            text-align: center;
            box-sizing: border-box;
        }

.showcase-grid {
            position: relative;
            width: 100%;
            max-width: 2500px;
            margin: clamp(-100px, -15vh, -200px) auto 0;
            display: flex;
            justify-content: center; 
            align-items: flex-end; 
            z-index: 100;
            padding: 0 clamp(15px, 3vw, 40px);
            box-sizing: border-box;
        }

.featured-img {
            width: 100%; 
            height: auto;
            max-width: 100%;
            min-height: clamp(150px, 25vh, 300px);
            max-height: clamp(250px, 40vh, 520px);
            object-fit: contain;
            object-position: center bottom;
            display: block;
            margin: 0;
            padding: 0;
        }

.text-overlay {
            margin: clamp(20px, 3vh, 50px) 0 0;
            padding: clamp(15px, 2vw, 25px) clamp(15px, 3vw, 30px);
            z-index: 20;
            box-sizing: border-box;
        }

.text-overlay p {
            font-family: "Space Grotesk", sans-serif;
            font-size: clamp(16px, 3.5vw, 32px);
            font-weight: 400;
            margin: 0;
            padding: 0;
            letter-spacing: clamp(0.5px, 0.1vw, 1px);
            line-height: 1.4;
        }

.heading-wrapper {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(15px, 3vw, 30px);
            box-sizing: border-box;
        }

.store-header h1 {
            text-align: center;
            color: white;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            font-size: clamp(28px, 7vw, 64px);
            margin: clamp(20px, 4vh, 40px) 0;
            padding: 0 clamp(15px, 3vw, 30px);
            line-height: 1.2;
            box-sizing: border-box;
        }

/* OVERVIEW */
.page-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
        }

        /* Row 1 - Hero Section */
.intro-section {
            font-family: "Space Grotesk", sans-serif;
            display: grid;
            grid-template-columns: 1fr;
            gap: clamp(15px, 3vw, 30px);
            padding: clamp(20px, 4vw, 60px);
            min-height: 0;
        }

.intro-section h1 {
            grid-column: 1 / -1;
            font-size: clamp(28px, 6vw, 60px);
            font-weight: 700;
            margin: 0 auto;
            text-align: center;
            line-height: 1.2;
        }

.intro-section p {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            font-size: clamp(16px, 2.5vw, 32px);
            font-weight: 400;
            line-height: 1.6;
            color: white;
            padding: 0 clamp(10px, 2vw, 20px);
        }

/* Row 2, 3, 4, 5 - Content Sections */
.flex-section {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

.text-block {
            padding: clamp(25px, 5vw, 80px) clamp(20px, 4vw, 60px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            order: 1;
        }

.visual-block {
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            min-height: clamp(250px, 40vh, 450px);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            order: 2;
            width: 100%;
        }

.visual-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
        }

.text-block h2 {
            font-size: clamp(28px, 5vw, 64px);
            margin-bottom: clamp(15px, 3vw, 25px);
            line-height: 1.2;
            width: 100%;
            padding-bottom: 1rem;
        }

.text-block p {
            font-size: clamp(14px, 2.2vw, 28px);
            font-weight: 400;
            line-height: 1.7;
            color: white;
            margin-bottom: clamp(20px, 4vw, 30px);
            max-width: 800px;
        }

.action-btn {
        text-decoration: none;
        color: white;
        font-size: 18px;
        font-weight: 500;
        padding: 15px 70px;
        border-radius: 70px;
        border: 1px solid #7B54B1;
        margin-top: 30px;
        background: linear-gradient(to right, rgba(168, 85, 247, 0.7) 0%, rgba(62, 21, 93, 0) 100%);
        background-repeat: no-repeat;
        background-size: 80%;
        animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }


}

.action-btn:hover {
            transform: translateY(-2px);
            background-color: #a855f7;
        }

.action-btn:active {
            transform: translateY(0);
        }

/* Extra small devices (portrait phones) */
@media (max-width: 480px) {
            .hero-banner {
                height: clamp(250px, 35vh, 300px);
                background-position: center;
                box-shadow: inset 50px 50px 100px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-150px, -15vh, -100px);
                padding: 0 10px;
            }
            
            .featured-img {
                min-height: 120px;
                max-height: 200px;
            }
            
            .footer-area {
                padding: 15px 10px;
            }
            
            .text-overlay {
                margin-top: clamp(15px, 2vh, 30px);
                padding: 10px 15px;
            }
            
            .store-header h1 {
                margin: 15px 0;
                padding: 0 10px;
            }
        }

/* Small devices (landscape phones) */
@media (min-width: 481px) and (max-width: 767px) {
            .hero-banner {
                height: clamp(300px, 45vh, 500px);
                background-position: top center;
                box-shadow: inset 80px 80px 120px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-90px, -14vh, -130px);
                padding: 0 15px;
            }
            
            .featured-img {
                min-height: 150px;
                max-height: 250px;
            }
            
            .footer-area {
                padding: 20px 15px;
            }
            
            .text-overlay {
                margin-top: clamp(18px, 2.5vh, 35px);
                padding: 12px 20px;
            }
            
            .store-header h1 {
                margin: 20px 0;
                padding: 0 15px;
            }
        }

/* Medium devices (tablets) */
@media (min-width: 768px) {
            .intro-section {
                gap: clamp(20px, 3vw, 30px);
                padding: clamp(30px, 5vw, 80px);
            }

            .intro-section p {
                width: 85%;
                font-size: clamp(18px, 2.8vw, 34px);
            }

            .text-block {
                padding: clamp(35px, 6vw, 70px) clamp(25px, 5vw, 50px);
            }

            .visual-block {
                min-height: clamp(300px, 45vh, 500px);
            }

            .action-btn {
                max-width: 300px;
                min-height: 52px;
            }
        }

@media (min-width: 768px) and (max-width: 1023px) {
            .hero-banner {
                height: clamp(400px, 55vh, 650px);
                box-shadow: inset 120px 120px 150px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-130px, -18vh, -180px);
                padding: 0 20px;
            }
            
            .featured-img {
                min-height: 200px;
                max-height: 350px;
            }
            
            .footer-area {
                padding: 25px 20px;
            }
            
            .text-overlay {
                margin-top: clamp(25px, 3vh, 40px);
                padding: 15px 25px;
            }
            
            .store-header h1 {
                margin: 25px 0;
                padding: 0 20px;
            }
        }

/* Desktop Breakpoint (1024px and up) */
@media (min-width: 1024px) {
            .intro-section {
                grid-template-columns: repeat(2, 1fr);
                align-items: center;
                padding: clamp(40px, 6vw, 100px);
            }

            .intro-section h1 {
                text-align: left;
                font-size: clamp(36px, 5vw, 60px);
            }

            .intro-section p {
                width: 100%;
                text-align: left;
                padding-left: 0;
                font-size: clamp(20px, 2.2vw, 32px);
            }

            .flex-section {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                min-height: clamp(450px, 55vh, 650px);
            }

            .text-block {
                text-align: left;
                align-items: flex-start;
                padding: clamp(50px, 7vw, 90px) clamp(40px, 6vw, 80px);
                order: 1;
            }

            .text-block h2 {
                text-align: left;
                font-size: clamp(32px, 4.5vw, 64px);
            }

            .text-block p {
                font-size: clamp(16px, 2vw, 28px);
            }

            .visual-block {
                min-height: 100%;
                order: 2;
            }

            /* Alternate layout for odd rows (content left, image right) */
            .flex-section:nth-child(odd) .text-block {
                order: 1;
            }

            .flex-section:nth-child(odd) .visual-block {
                order: 2;
            }

            /* Even rows (image left, content right) */
            .flex-section:nth-child(even) .text-block {
                order: 2;
            }

            .flex-section:nth-child(even) .visual-block {
                order: 1;
            }

            .action-btn {
                max-width: 320px;
                width: auto;
                min-height: 54px;
            }
        }

/* Large devices (desktops) */
@media (min-width: 1024px) and (max-width: 1439px) {
            .hero-banner {
                height: clamp(500px, 65vh, 750px);
                box-shadow: inset 150px 150px 180px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-180px, -25vh, -250px);
                padding: 0 30px;
            }
            
            .featured-img {
                min-height: 280px;
                max-height: 450px;
            }
            
            .footer-area {
                padding: 30px 25px;
            }
            
            .text-overlay {
                margin-top: clamp(30px, 3.5vh, 45px);
                padding: 18px 30px;
            }
            
            .store-header h1 {
                margin: 30px 0;
                padding: 0 25px;
            }
        }

/* Large Desktop Breakpoint (1440px and up) */
@media (min-width: 1440px) {
            .page-wrapper {
                max-width: 1920px;
                margin: 0 auto;
            }

            .text-block p {
                font-size: clamp(18px, 1.5vw, 28px);
            }

            .hero-banner {
                height: clamp(600px, 70vh, 800px);
                box-shadow: inset 200px 200px 200px rgba(100, 0, 150, 0.4);
            }
            
            .showcase-grid {
                margin-top: clamp(-220px, -30vh, -300px);
                padding: 0 40px;
            }
            
            .featured-img {
                min-height: 350px;
                max-height: 520px;
            }
            
            .footer-area {
                padding: 35px 30px;
            }
            
            .text-overlay {
                margin-top: clamp(35px, 4vh, 50px);
                padding: 20px 35px;
            }
            
            .store-header h1 {
                margin: 35px 0;
                padding: 0 30px;
            }
        }

/* Ultra-wide screens (1920px and up) */
@media (min-width: 1920px) {
            .intro-section h1 {
                font-size: 64px;
            }

            .intro-section p {
                font-size: 32px;
            }

            .text-block h2 {
                font-size: 64px;
            }

            .text-block p {
                font-size: 28px;
            }

            .featured-img {
                max-height: 600px;
            }
            
            .footer-area {
                padding: 40px 40px;
            }
            
            .text-overlay {
                padding: 25px 40px;
            }
        }

/* Small Mobile Optimization (max 375px) */
@media (max-width: 375px) {
            .intro-section {
                gap: 12px;
            }

            .text-block {
                padding: clamp(20px, 5vw, 30px) clamp(15px, 4vw, 20px);
            }

            .visual-block {
                min-height: clamp(200px, 35vh, 300px);
            }

            .action-btn {
                min-height: 42px;
                font-size: 13px;
            }
        }

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 600px) {
            .hero-banner {
                height: 60vh;
            }
            
            .showcase-grid {
                margin-top: -20vh;
                padding: 0 clamp(10px, 2vw, 20px);
            }
            
            .featured-img {
                max-height: 35vh;
                min-height: 25vh;
            }
            
            .footer-area {
                padding: 15px clamp(10px, 2vw, 20px);
            }
            
            .text-overlay {
                margin-top: 15px;
                padding: 10px 15px;
            }

            .visual-block {
                min-height: 70vh;
            }
            
            .text-block {
                padding: clamp(20px, 4vh, 40px) clamp(20px, 4vw, 60px);
            }
        }

/* Very small landscape screens */
@media (orientation: landscape) and (max-height: 400px) {
            .hero-banner {
                height: 50vh;
            }
            
            .showcase-grid {
                margin-top: -15vh;
                padding: 0 10px;
            }
            
            .featured-img {
                max-height: 30vh;
                min-height: 20vh;
            }
            
            .footer-area {
                padding: 10px 15px;
            }
            
            .text-overlay {
                margin-top: 10px;
                padding: 8px 15px;
            }
            
            .store-header h1 {
                margin: 10px 0;
            }
        }

/* Print styles */
@media print {
            .action-btn {
                background: #6d28d9;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }

/*FDAS PAGE BY PCESS*/
/*FDAS PAGE BY PCESS*/


.top-feature-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin: -10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-hero-wrapper {
    position: relative;
    width: 127%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('/images/services/FDAS2.jpg');
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
    overflow: hidden;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    z-index: 1;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,    /* Top is transparent */
        transparent 50%,   /* Transparent up to halfway */
        rgba(0, 0, 0, 0.3) 60%,  /* Start fading in at halfway */
        rgba(0, 0, 0, 0.8) 80%,  /* Darker at bottom */
        black 100%        /* Fully visible at bottom */
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 60%,
        rgba(0, 0, 0, 0.8) 80%,
        black 100%
    );
}

.header-text-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 60px;
    width: 100%;
    text-align: center;
    animation: fadeInLeft 1.5s ease-out;
    z-index: 2;
}

.fade-right {
    display: inline-block;
    animation: fadeInRight 1.5s ease-out;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(0);
    }
}

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.header-text-layer h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}

.view-details-btn {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 20px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.view-details-btn:hover {
    background-color: #FF4500;
}

.selection-criteria-block {
    display: flex;
    align-items: center;
    max-width: 1350px;
    margin: 80px auto;
    padding: 0 50px;
    min-height: 550px;
}
   
    .selection-criteria-block.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    /* 2. Animation (Applied by JS on scroll) */
    .selection-criteria-block.animate-visible {
        animation: 2s anim-fadeIn linear forwards; 
    }

    /* Keyframes remain the same, but 'forwards' fills the final state */
    @keyframes anim-fadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* Left Column - Visual Container */
.image-display-area {
    flex: 1;
    min-height: 500px;
    background-image: url("https://i.pinimg.com/736x/64/f7/28/64f728aaf40516331f0f6487c786662f.jpg");
    margin-left: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 10px solid transparent; 
    border-image: none;
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

.image-display-area:hover {
    /* Apply Gradient Border on Hover */
    border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
}

.selection-criteria-block:nth-child(2) .image-display-area {
    background-image: url("https://i.pinimg.com/736x/64/8f/15/8f15c8d3e4c5a4b8c9e1a4e5e.jpg");
}

.selection-criteria-block:nth-child(2) .image-display-area:hover {
    border-image: linear-gradient(90deg, #FF4500 0%, #FF6347 50%, #FF8C00 100%) 1;
}

/* Right Column - Content Container */
.info-details-box {
    flex: 1;
    padding-left: 70px;
}

@keyframes glow-fire {
    from {
        text-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
    }
    to {
        text-shadow: 0 0 30px rgba(255, 69, 0, 0.8), 0 0 40px rgba(255, 140, 0, 0.6);
    }
}


/* Title Styling */
.title-first-line {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 50px;
    line-height: 100%;
    letter-spacing: 0%;
}


/* Feature List Styling */
.key-advantages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.key-advantages-list li {
    color: white;
    font-size: 32px;
    line-height: 2.2;
    display: flex;
    align-items: center;
    font-family: 'Space Grotesk', sans-serif;
    
}

.key-advantages-list li:hover{
    transform: translateY(-5px) scale(1.05);
}


.item-icon-style {
    font-size: 20px;
    margin-right: 15px;
    color: white;
    transform: rotate(-15deg);
}

.item-icon-style:hover {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: background 0.4s;
}


.value-proposition-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1300px;
    padding: 30px 20px;
    margin: auto;
}


.value-card-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}


.card-display-icon {
    font-size: 100px;
    margin-bottom: 25px;
    color: white;
    -webkit-transform-style: preserve-3d;
	animation: spin 5s linear infinite;
}
	
	@keyframes spin{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	
	&:before{
		position: absolute;
		border-radius: 50%;
		content: '';
		height: 10em;
		width: 10em;
		-webkit-transform: translateZ(-0.75em);
	}
	
	&:after{
		content: '';
		left: 4.25em;
		position: absolute;
		height: 10em;
		width: 0.75em;
		z-index: -10;
		-webkit-transform: rotateY(-90deg);
		-webkit-transform-origin: 100% 50%;
	}



.card-text-content {
    font-size: 32px;
    font-weight: 200;
    line-height: 1.4;
    margin: 0;
    font-family: 'Lexend', sans-serif;
}


.customer-feedback-module {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "content visual"
        "button button";
   
    gap: 10px; 
    max-width: 1000px; 
    margin: 20px auto; 
    padding: 0 10px; 
    align-items: start;

}

    .customer-feedback-module.is-hidden {
            opacity: 0; /* Ensures it starts invisible */
        }

        /* 2. Animation (Applied by JS on scroll) */
        .customer-feedback-module.animate-visible {
            animation: 2s anim-fadeIn linear forwards; 
        }

        /* Keyframes remain the same, but the 'forwards' fills the final state */
        @keyframes anim-fadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }


.feedback-text-area {
    grid-area: content;
    padding-right: 20px;
    
}

.feedback-header-one {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    margin-bottom: 0px;
}


.client-quote-text {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;

}

.rating-stars-container .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    
 
    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .rating-stars-container :hover {
        transform: translateY(-5px) scale(1.05);
    }


/* Product Visual (Right Column) */
.item-showcase-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; 
    
    /* Placeholder for the image */
    background-image: url(https://i.pinimg.com/736x/08/ad/46/08ad464419417d928e8cb3ae47dd8219.jpg);
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center;
    min-height: 500px; 

    border: 10px solid transparent; 
    border-image: none; 
    transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
}

    .item-showcase-visual:hover {
        /* 1. Revert to Color on Hover */
        
        /* 2. Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%) 1;
    }

/* Button Container (Spans both columns) */
.call-to-action-wrapper {
    grid-area: button;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* See Reviews Button Styling */
.reviews-link-button {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 70px;
    border-radius: 70px;
    border: 1px solid #FF4500;
    margin-top: 40px;
    background: linear-gradient(to right, rgba(255, 69, 0, 0.7) 0%, rgba(255, 69, 0, 0) 100%);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }

}

.reviews-link-button:hover {
    background-color: #FF4500;
}

.bottom-promo-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
}

.secondary-hero-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 40px;

    background-image:
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 50%, rgba(255, 36, 0, 0) 100%),
    url('https://i.pinimg.com/736x/fc/c4/28/fcc4281f495dd945fb8261ef33f0afcf.jpg');      
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100%); /* Become fully transparent (bottom fade-out) */
    overflow: hidden;   
}

.bottom-text-layer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;  
    padding: 40px 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
}

.bottom-text-layer h1 {
    color: white;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;

    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-style: Bold;
    font-size: 36px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}


.link-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    border: 4px solid #fff;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.2s, color 0.3s;
    background-color: transparent;
}

.link-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    color: #fff;
}

.link-action-btn .fas {
    margin-left: 10px;
    font-size: 0.9em;
    transition: margin-left 0.3s;
}

.link-action-btn:hover .fas {
    margin-left: 15px;
}

/* FDAS RESPONSIVE DESIGN */

    @media (min-width: 1400px) {
    .top-feature-area {
        max-width: 1500px;
    }

    .selection-criteria-block {
        max-width: 1500px;
    }
    
    .value-proposition-grid {
        max-width: 1500px;
        gap: 50px;
    }

    .customer-feedback-module {
        max-width: 1400px;
    }
}


    @media (min-width: 1200px) {

    /* Increase the maximum width of your main content area */
    .selection-criteria-block {
        max-width: 1400px; 
        margin: 100px auto; /* More vertical space on large screens */
    }

    /* Increase font sizes for better readability on large screens */
    .title-first-line {
        font-size: 2.8rem; 
    }
    
    /* Ensure the grid columns are spacious */
    .value-proposition-grid {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout is common here */
        max-width: 1400px;
        margin: 30px auto;
    }
}


/* 🚀 LARGE SCREEN RESPONSIVENESS (Desktops: min-width: 1025px) */
@media (min-width: 1025px) {

    /* BOTTOM PROMO STRIP */
    .secondary-hero-wrapper {
        /* Increase height of the hero strip */
        height: 550px;
    }
    
    .bottom-text-layer {
        /* Adjust padding for larger viewports */
        padding: 50px 80px;
    }

    .bottom-text-layer h1 {
        /* Increase main heading size */
        font-size: 64px;
    }
}



    @media(max-width: 768px) {

        /* top feature area */
        .top-feature-area {
            width: 100%; /* Change from max-width */
            max-width: 100%; /* Ensure it doesn't overflow */
            margin-top: -150px;
        }

        /* PRIMARY HERO WRAPPER - Fix mobile overflow */
        .primary-hero-wrapper {
            width: 100% !important; /* Override 127% width on mobile */
            height: 450px; /* Adjust height for mobile */
        }

        /* Hero text adjustments for mobile */
        .header-text-layer {
            padding: 20px 30px;
            transform: translate(-50%, -60%); /* Elevate the text position even more */
        }

        .header-text-layer h1 {
            font-size: 28px; /* Smaller font for mobile */
            line-height: 1.1;
        }

        /* SELECTION CRITERIA BOX */
        .selection-criteria-block {
            flex-direction: column;
            padding: 0 20px;
            margin: 40px auto;
        }

        .image-display-area {
            width: 100%;
            min-height: 350px;
            margin-left: 0;
            margin-bottom: 30px;
            border-width: 8px;
        }

        .info-details-box {
            width: 100%;
            padding-left: 0;
            text-align: center;
        }

        .title-first-line {
            font-size: 36px;
            margin-bottom: 20px;
        }

        .key-advantages-list li {
            font-size: 24px;
            line-height: 1.8;
            justify-content: center;
        }

        .item-icon-style {
            font-size: 18px;
            margin-right: 10px;
        }
    

        /*value-proposition grid */
        .value-proposition-grid {
            font-size: 2rem;
            grid-template-columns: 1fr; /* Stack items vertically */
        }

            .card-text-content{
                font-size: 1.5rem;
            }


        /* bottom promo strip */
        .bottom-promo-strip{
            font-size: 2rem;
        }
                    
        .secondary-hero-wrapper {
            max-width: 768px; /* Ensure it doesn't overflow */
        }

    }

    @media (min-width: 577px) and (max-width: 1024px) {
        /* PRIMARY HERO SECTION */
        .primary-hero-wrapper {
            height: 500px;
        }

        .header-text-layer {
            padding: 30px 40px;
        }

        .header-text-layer h1 {
            font-size: 38px;
        }

        /* SELECTION CRITERIA BLOCK */
        .selection-criteria-block {
            /* Keep them side-by-side but allow wrapping if needed */
            flex-direction: row; 
            flex-wrap: wrap; 
            padding: 0 30px; 
        }
        
        .image-display-area {
            min-height: 400px; 
        }

        .info-details-box {
            padding-left: 50px;
        }

        .title-first-line {
            font-size: 35px;
        }

        .key-advantages-list li {
            font-size: 20px;
        }
        
        /* VALUE PROPOSITION GRID */
        .value-proposition-grid {
            /* Cards may wrap to the next line */
            gap: 30px;
            padding: 25px 30px;
            justify-content: center;
        }
        
        .value-card-element {
            min-width: 300px; /* Give them more space than on mobile */
        }


        /* BOTTOM PROMO STRIP */
        .secondary-hero-wrapper {
            height: 450px;
        }
        
        .bottom-text-layer {
            padding: 30px 40px;
        }

        .bottom-text-layer h1 {
            font-size: 40px;
        }
    }



    @media (max-width: 768px) {
    .customer-feedback-module {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "visual"
            "button";
        margin: 40px auto;
        gap: 20px;
    }

    .feedback-text-area {
        padding-right: 0;
        text-align: center;
    }

    .feedback-header-one {
        font-size: 36px;
    }

    .client-quote-text {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .rating-stars-container .fas {
        font-size: 20px;
        margin-top: 15px;
    }

    .item-showcase-visual {
        min-height: 400px;
        border-width: 8px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .customer-feedback-module {
        margin: 30px auto;
        padding: 0 15px;
        gap: 15px;
    }

    .feedback-header-one {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .client-quote-text {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .rating-stars-container .fas {
        font-size: 18px;
        margin-top: 10px;
        margin-right: 3px;
    }

    .item-showcase-visual {
        min-height: 300px;
        border-width: 6px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .feedback-header-one {
        font-size: 24px;
    }

    .client-quote-text {
        font-size: 16px;
    }

    .item-showcase-visual {
        min-height: 250px;
    }
}



/* BLOG */ /* BLOG */

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


.visual-deck-section {
    position: relative;
}

.visual-deck-viewport {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

.visual-deck-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.7s ease-in-out;
}

.visual-deck-card {
    flex-shrink: 0;
    width: 33.333%;
    height: 100%;
    position: relative;
}

.deck-card-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
}

.deck-card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10%;
    box-sizing: border-box;
    z-index: 2;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
}

.text-focus-wrapper {
    font-family: "lexend";
    max-width: 500px;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.focus-main-title,
.focus-sub-title,
.focus-description,
.call-to-action-btn {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInSlide 0.6s ease-out forwards;
}

.focus-main-title {
    color: white;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 0.2em;
    animation-delay: 0.5s;
}

.focus-sub-title {
    font-size: 45px;
    font-weight: 200;
    letter-spacing: 0.1em;
    margin-bottom: 1em;
    color: white;
    animation-delay: 0.6s;
}

.focus-description {
    font-family: "Lexend";
    font-size: 24px;
    line-height: 1.5;
    font-weight: 200;
    margin-bottom: 2em;
    color: white;
    animation-delay: 0.7s;
}

.call-to-action-btn {
    display: inline-block;
    padding: 15px 30px;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    animation-delay: 0.8s;
    margin-top: 15px;
}

.call-to-action-btn:hover {
    background-color: #fff;
    color: #000;
}

.deck-pagination-nav {
    position: absolute;
    top: 80%;
    left: 48%;
    z-index: 3;
    display: flex;
    gap: 10px;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.9s; 
}

.dot-control {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot-control.active {
    background-color: #fff;
}

@media (max-width: 1024px) {
    .deck-card-content {
        padding-left: 5%;
    }

    .text-focus-wrapper {
        max-width: 400px;
    }

    .focus-main-title {
        font-size: 4.5vw;
    }

    .focus-sub-title {
        font-size: 4vw;
    }

    .focus-description {
        font-size: 2vw;
    }
}


@media (max-width: 768px) {
    .visual-deck-viewport {
        height: 70vh;
    }

    .deck-card-content {
        align-items: flex-start;
        padding: 10% 5%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 70%);
    }

    .text-focus-wrapper {
        max-width: 100%;
    }

    .focus-main-title {
        font-size: 32px;
    }

    .focus-sub-title {
        font-size: 28px;
    }

    .focus-description {
        font-size: 16px;
    }

    .call-to-action-btn {
        font-size: 1em;
        padding: 12px 24px;
    }

    .deck-pagination-nav {
        left: 45%;
        top: 50%;
        gap: 8px;
        transform: translate(-50%, -50%);
    }

    .dot-control {
        width: 10px;
        height: 10px;
    }
}

/*====================== LATEST PRODUCTS ===================*/

.catalog-display-area {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.catalog-display-area__title {
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 40px;
    text-align: left;
}

.catalog-display-area__grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.item-preview {
    background-color: black;
    border-radius: 15px;
    height: 400px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.6s ease-out, transform 0.3s ease, box-shadow 0.3s ease;
}

        
.item-preview {
    opacity: 0;
    transform: translateY(50px);
}

.item-preview.animate {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s !important; 
}

    .item-preview:nth-child(2) { transition-delay: 0.2s; }
    .item-preview:nth-child(3) { transition-delay: 0.4s; }
    .item-preview:nth-child(4) { transition-delay: 0.6s; }
    .item-preview:nth-child(5) { transition-delay: 0.8s; }
    .item-preview:nth-child(6) { transition-delay: 0.10s; }
        
    .item-preview:hover,
    .item-preview.animate:hover {
    transform: translateY(-12px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.item-preview__image {
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

    .item-preview__image1 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image2 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image3 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image4 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image5 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }
    .item-preview__image6 { background-image: url('https://i.pinimg.com/736x/2f/89/53/2f89530cbdb9f40744f9889c245cee87.jpg'); }

.item-preview__details {
    color: white;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.item-preview__name {
    font-family: "Space Grotesk";
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.item-preview__description {
    font-family: "Lexend";
    font-size: 13px;
    color: white;
    margin-bottom: 10px;
    line-height: 1.4;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-preview__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.item-preview__price {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}



.catalog-display-area__button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.cta-button {
    font-family: "Lexend";
    width: 320px;
    max-width: 100%;
    height: 65px;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button:hover {
    background-color: #fff;
    color: #000;
}

@media (max-width: 768px) {
    .catalog-display-area__title {
        font-size: 28px;
        margin-top: 40px;
}
    .item-preview {
        height: auto;
}
}

@media (max-width: 480px) {
    .catalog-display-area__grid-layout {
        grid-template-columns: 1fr;
        gap: 20px;
}

@media (max-width: 768px){
    .ds-timeline-item{
        padding-left: 40px;
    }

}
    .cta-button {
        height: 55px;
        font-size: 16px;
        width: 100%;
}
}

/*============= TRENDING GADGETS ====================*/

 .ds-animate-scroll {
            opacity: 0;
            transition: var(--ds-transition); 
        }

       
        @keyframes fadeInMove {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ds-main-container.ds-is-visible {
            animation: fadeInMove 0.8s ease-out forwards;
        }

        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .ds-timeline-item.ds-is-visible {
            animation: slideIn 0.6s ease-out forwards;
        }

        
        .ds-timeline-item:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-timeline-item:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-timeline-item:nth-child(3).ds-is-visible { animation-delay: 0.3s; }

        .ds-gadget-card.ds-is-visible {
            animation: fadeInMove 0.6s ease-out forwards;
        }

        .ds-gadgets-block .ds-gadget-card:nth-child(1).ds-is-visible { animation-delay: 0.1s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(2).ds-is-visible { animation-delay: 0.2s; }
        .ds-gadgets-block .ds-gadget-card:nth-child(3).ds-is-visible { animation-delay: 0.3s; }


        .ds-main-container {
            font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
            color: white;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            max-width: 1250px;
            width: 90%; 
            margin: 200px auto;
        }

        .ds-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;

        }

        /* MOBILE VIEW SPACING FOR "DPC BEST SELLER" AND "VIEW ALL"*/
        @media (max-width:768px){
            .ds-section-header{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width:100%;
                padding: 0 10px;
                box-sizing: border-box;
                margin-left: 0;
                left: 0;
                transform: none;
            }
        }

        .ds-section-title {
            font-size: 38px;
            font-weight: 700;
            margin: 0;
            background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ds-view-all-link {
            color: white;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-weight: 500;
            transition: var(--ds-transition);
            position: relative;
        }

        .ds-view-all-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #0a58ca, #00d4ff);
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover::after {
            width: 100%;
        }

        .ds-view-all-link:hover {
            color: #00d4ff;
            transform: translateX(5px);
        }

        .ds-view-all-link-icon {
            margin-left: 8px;
            font-size: 0.9rem;
            transition: var(--ds-transition);
        }

        .ds-view-all-link:hover .ds-view-all-link-icon {
            transform: translateX(3px);
        }


        .ds-gadgets-block {
            margin-right: 30px;
            display: flex;
            flex-direction: column;
            gap: 60px;
        }

        .ds-gadget-card {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            padding: 18px;
            height: 160px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
        }

        .ds-gadget-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover::before {
            left: 100%;
        }

        .ds-gadget-card:hover {
            background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2), var(--ds-shadow-lg);
            transform: translateY(-5px) scale(1.02);
        }

        .ds-gadget-info {
            display: flex;
            align-items: flex-start;
            flex-grow: 1;
        }

        .ds-gadget-thumbnail {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            border-radius: 15px;
            margin-right: 15px;
            margin-top: 25px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }

        .ds-gadget-thumbnail img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            object-fit: cover;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-thumbnail img {
            transform: scale(1.1);
        }

        .ds-gadget-content-area h3 {
            font-size: 1.1rem;
            margin: 0 0 5px 0;
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-content-area h3 {
            color: #00d4ff;
        }

        .ds-gadget-meta {
            font-size: 0.8rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .ds-gadget-category {
            font-weight: 600;
            margin-right: 10px;
        }

        .ds-gadget-category--mobile,
        .ds-gadget-category--gaming {
            color: white;
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            text-align: center;
            padding: 4px 1px;
            border-radius: 15px;
            width: 80px;
            font-size: 12px;
            font-weight: 200;
            border: 1px solid rgba(0, 123, 255, 0.3);
            transition: var(--ds-transition);
        }

        .ds-gadget-card:hover .ds-gadget-category--mobile,
        .ds-gadget-card:hover .ds-gadget-category--gaming {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.4) 0%, rgba(0, 123, 255, 0.25) 100%);
            border-color: rgba(0, 123, 255, 0.5);
        }

        .ds-gadget-time {
            color: #aaa;
        }

        .ds-gadget-description {
            font-size: 0.9rem;
            color: #ccc;
        }

        .ds-gadget-link-arrow {
            color: white;
            background: linear-gradient(135deg, #333 0%, #444 100%);
            border-radius: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 29px;
            margin-left: 20px;
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
            border: 1px solid #444;
        }

        .ds-gadget-card:hover .ds-gadget-link-arrow {
            background: linear-gradient(135deg, #0a58ca 0%, #00d4ff 100%);
            border-color: #00d4ff;
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
        }

        @media (min-width: 431) and (max-width:768px){
            .ds-updates-block{
                display: flex;
                flex-direction: column;
                padding: 0 10px;
                align-items: center;
                transform: none;
                left: 0;
                overflow-x: hidden;
                box-sizing: border-box;
                width: 100%;

            .ds-updates-block img{
            width: 80% !important; 
            max-width: 200px;
            height: auto !important;
            margin-bottom: 15px !important; /* Space between image and text */
            }
            .ds-timeline-list{
                padding-left: 30px;
                position: relative;
            }
            .ds-timeline-item{
                padding-left: 20px;
            }
            
            }

        }


        .ds-updates-block {
            margin-left: 30px;
            position: relative;
            max-width:1200;
            margin: 0 auto;
        }

        .ds-timeline-list {
            position: relative;
            padding-left: 40px;
        }

        .ds-timeline-list::before {
            content: '';
            position: absolute;
            top: 0;
            left: 21px;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, #0a58ca 0%, #2f8d46 50%, #C34814 100%);
            z-index: 0;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item {
            position: relative;
            margin-bottom: 25px;
            padding-bottom: 20px;
            padding-left: 10px;
        }

        .ds-timeline-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .ds-timeline-item::after { 
            content: '';
            position: absolute;
            left: 4px;
            top: 11px;
            width: 15px;
            height: 2px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
            z-index: 0;
        }

        .ds-timeline-icon {
            position: absolute;
            left: -32px;
            top: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            transition: var(--ds-transition);
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

        .ds-timeline-item:hover .ds-timeline-icon {
            transform: scale(1.15);
            box-shadow: 0 0 20px currentColor;
        }

        .ds-timeline-item--upcoming .ds-timeline-icon { 
            color: #0a58ca;
            background: radial-gradient(circle, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.1) 100%);
        }
        .ds-timeline-item--launch .ds-timeline-icon { 
            color: #2f8d46;
            background: radial-gradient(circle, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.1) 100%);
        }
        .ds-timeline-item--partnership .ds-timeline-icon { 
            color: #C34814;
            background: radial-gradient(circle, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.15) 100%);
        }

        .ds-update-content {
            border: 1px solid #333;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.9) 100%);
            height: 220px;
            padding: 15px 20px;
            border-radius: 20px;
            transition: var(--ds-transition);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            cursor: pointer;
            align-items: center;
            justify-content: space-between;
        }
        .ds-text-side{
            flex: 2;
            width: 100%;
            display:block;
            font-size: 100px;
            
        }

        @media (max-width: 768px){
            .ds-update-content{
                display: flex;
                flex-direction: column;
                padding: 14px;
            }
            
        }

        .ds-update-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transition: var(--ds-transition);
        }

        .ds-update-content:hover::before {
            left: 100%;
        }

        .ds-update-content:hover {
            transform: translateY(-3px);
            box-shadow: var(--ds-shadow-lg);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover {
            border-color: #0a58ca;
            box-shadow: 0 8px 32px rgba(10, 88, 202, 0.2);
        }

        .ds-timeline-item--launch .ds-update-content:hover {
            border-color: #2f8d46;
            box-shadow: 0 8px 32px rgba(47, 141, 70, 0.2);
        }

        .ds-timeline-item--partnership .ds-update-content:hover {
            border-color: #C34814;
            box-shadow: 0 8px 32px rgba(195, 72, 20, 0.2);
        }

        .ds-update-meta-info {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 0.8rem;
        }

        .ds-update-category-tag {
            font-size: 15px;
            font-weight: 600;
            margin-right: 15px;
            padding: 4px;
            border-radius: 4px;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-category-tag {
            transform: scale(1.05);
        }

        .ds-timeline-item--upcoming .ds-update-category-tag { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-category-tag { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-category-tag { color: #C34814; }

        .ds-update-time-badgee,
        .ds-update-time-badge,
        .ds-update-time-badge-recent {
            color: white;
            text-align: center;
            padding: 4px 10px; 
            border-radius: 15px;
            width: 90px;
            font-weight: 400;
            transition: var(--ds-transition);
            border: 1px solid transparent;
            font-size: 0.8rem; 
        }

        .ds-update-time-badgee {
            background: linear-gradient(135deg, rgba(0, 123, 255, 0.3) 0%, rgba(0, 123, 255, 0.15) 100%);
            border-color: rgba(0, 123, 255, 0.3);        
        }

        .ds-update-time-badge {
            background: linear-gradient(135deg, rgba(144, 255, 85, 0.3) 0%, rgba(144, 255, 85, 0.15) 100%);
            border-color: rgba(144, 255, 85, 0.3);  
        }

        .ds-update-time-badge-recent {
            background: linear-gradient(135deg, rgba(255, 107, 53, 0.4) 0%, rgba(255, 107, 53, 0.2) 100%);
            border-color: rgba(255, 107, 53, 0.3);           
        }

        .ds-update-content:hover .ds-update-time-badgee,
        .ds-update-content:hover .ds-update-time-badge,
        .ds-update-content:hover .ds-update-time-badge-recent {
            transform: scale(1.05);
        }

        .ds-update-content h3 {
            font-size: 1.1rem;
            margin: 0 0 10px 0;
            transition: var(--ds-transition);
        }

        .ds-timeline-item--upcoming .ds-update-content:hover h3 { color: #00d4ff; }
        .ds-timeline-item--launch .ds-update-content:hover h3 { color: #90FF55; }
        .ds-timeline-item--partnership .ds-update-content:hover h3 { color: #FF6B35; }

        .ds-update-description {
            font-size: 0.9rem;
            color: #aaa;
            margin-bottom: 15px;
            margin-right: 150px;
        }

        @media (max-width: 768px){
            .ds-update-description{
                display: block;
                width: 100%;
                margin-bottom: 10px;

            }
            .ds-update-meta-info{
                margin:10 px;
            }
        }

        .best-seller-thumbnail {
            width: 130px;
            height: 130px; /* Fixed square size */
            background: transparent;
            border-radius: 15px;
            margin-left: 380px;
            margin-top: -150px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
            transition: var(--ds-transition);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px; /* Increased padding for better spacing */
            box-sizing: border-box;
        }

        .best-seller-thumbnail img{
          
            width: 10px;
            height: 10px;
            padding: 10px;

        }

    @media (max-width: 1024px){
        .best-seller-thumbnail{
            width: 100px;
            height: 100px;
            min-width: 100%;
            margin-left: 0;
            margin-top: 0;
            margin-bottom: 15px;
            
            
        }
        .best-seller-thumbnail img {
            width: 100%;
            height: 140px;
            display:block;
            object-fit: contain;
    }
}
        .best-seller-thumbnail:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 4px 20px rgba(10, 88, 202, 0.3);
        }


        .best-seller-thumbnail:hover img {
            transform: scale(1.1);
        }

        .ds-update-details-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
        }

        .ds-update-details-arrow {
            font-size: 1.2rem;
            text-decoration: none;
            transition: var(--ds-transition);
        }

        .ds-update-content:hover .ds-update-details-arrow {
            transform: translateX(5px);
        }

       
        .ds-timeline-item--upcoming .ds-update-details-arrow { color: #0a58ca; }
        .ds-timeline-item--launch .ds-update-details-arrow { color: #2f8d46; }
        .ds-timeline-item--partnership .ds-update-details-arrow { color: #C34814; }

        
        html {
            scroll-behavior: smooth;
        }

        /* Responsive adjustments */
        @media (max-width: 1240px) {
            .ds-main-container {
                width: 100%;
                display: flex;
                flex-direction: column;
            }
        }

        @media (max-width: 992px) {
            .ds-main-container {
                grid-template-columns: 1fr;
                padding: 0 20px;
                width: auto;
                margin: 100px auto;
                gap: 50px;
            }
            
            .ds-gadgets-block {
                margin-right: 0;
            }
            
            .ds-updates-block {
                margin-left: 0;
            }
        }

        @media (max-width: 1024px) {
            .ds-main-container {
                margin: 60px auto 60px;
                gap: 40px;
                padding: 0 15px;
            }
            
            .ds-section-title {
                font-size: 1.5rem;
            }
            
            .ds-gadgets-block {
                gap: 40px;
            }
            
            .ds-gadget-card {
                height: auto;
                min-height: 140px;
                flex-wrap: wrap;
                padding: 12px;
            }
            
            .ds-gadget-card:hover {
                transform: translateY(-3px) scale(1);
            }
            
            .ds-gadget-info {
                width: 100%;
            }
            
            .ds-gadget-thumbnail {
                width: 70px;
                height: 70px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 1rem;
            }
            
            .ds-gadget-description {
                font-size: 0.85rem;
            }
            
            .ds-gadget-link-arrow {
                margin-left: 0;
                margin-top: 10px;
                align-self: flex-end;
            }
            
            .ds-update-content {
                height: auto;
                min-height: 180px;
                padding: 12px 15px;
            }
            
            .ds-update-content h3 {
                font-size: 1rem;
            }
            
            .ds-update-description {
                font-size: 0.85rem;
            }
            
            .ds-timeline-list {
                padding-left: 10px;
            }
            
            .ds-timeline-list::before {
                left: 16px;
            }
            
            .ds-timeline-item {
                padding-left: 25px;
            }
            .ds-timeline-icon{
                margin-left: 25px;
            }
        }

        @media (max-width: 480px) {
            .ds-main-container {
                margin: 40px auto;
                gap: 30px;
                padding: 0 10px;
            }
            body{
                padding:5px;
            }
            
            .ds-section-header {
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-section-title {
                font-size: 1.3rem;
            }
            
            .ds-gadgets-block {
                gap: 30px;
            }
            
            .ds-gadget-card {
                padding: 10px;
                min-height: 120px;
            }
            
            .ds-gadget-thumbnail {
                width: 60px;
                height: 60px;
                margin-right: 10px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.95rem;
            }
            
            .ds-gadget-meta {
                font-size: 0.75rem;
                flex-wrap: wrap;
                gap: 5px;
            }
            
            .ds-gadget-description {
                font-size: 0.8rem;
            }
            
            .ds-gadget-link-arrow {
                width: 40px;
                height: 26px;
                font-size: 1rem;
            }
            
            .ds-gadget-category--mobile,
            .ds-gadget-category--gaming {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-content {
                padding: 10px 12px;
                min-height: 160px;
            }
            
            .ds-update-content h3 {
                font-size: 0.95rem;
            }
            
            .ds-update-description {
                font-size: 0.8rem;
                margin-bottom: 10px;
            }
            
            .ds-update-meta-info {
                font-size: 0.75rem;
            }
            
            .ds-update-category-tag {
                font-size: 13px;
                margin-right: 10px;
            }
            
            .ds-update-time-badgee,
            .ds-update-time-badge,
            .ds-update-time-badge-recent {
                width: 70px;
                font-size: 0.7rem;
            }
            
            .ds-update-details-row {
                font-size: 0.8rem;
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .ds-timeline-icon {
                width: 24px;
                height: 24px;
                font-size: 0.85rem;
                margin-right: 25px;
            }
            
            .ds-timeline-item::after {
                top: 10px;
            }
            
            .ds-timeline-item {
                margin-bottom: 20px;
                padding-bottom: 15px;
                padding-left: 20px;
            }
           
        }

        @media (max-width: 360px) {
            .ds-section-title {
                font-size: 1.2rem;
            }
            
            .ds-gadget-thumbnail {
                width: 55px;
                height: 55px;
            }
            
            .ds-gadget-content-area h3 {
                font-size: 0.9rem;
            }
        }

        /* Reduced motion for accessibility */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

/*=============== BLOG POST LATEST ================*/



/* --- New Scroll-Triggered Animation CSS --- */

/* Base style for elements that will animate (Start State: Hidden and slightly offset) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Featured (Showcase) zone has a slightly different animation (Start State: Slightly scaled down) */
.showcase-zone.animate-on-scroll {
    transform: scale(0.9);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Final State (triggered by JavaScript): Visible and in original position */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Featured zone's final visible state */
.showcase-zone.animate-on-scroll.is-visible {
    transform: scale(1);
}

/* Add brief delays for a staggered gallery effect */
.gallery-matrix > .content-block.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.gallery-matrix > .content-block.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; }

/* Delay the side panel widgets */
.side-panel > .widget-container.animate-on-scroll:nth-child(1) { transition-delay: 0.2s; }
.side-panel > .widget-container.animate-on-scroll:nth-child(2) { transition-delay: 0.4s; }

/* TRENDING POSTS SCROLL BAR*/

.trending-posts-scroll {
  max-height: 390px;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 20px;
  padding-right: 10px;
}

.trending-posts-scroll:hover {
  overflow-y: auto;
}

.trending-posts-scroll::-webkit-scrollbar {
  width: 8px;
}

.trending-posts-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.trending-posts-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* --- Original Design Styles --- */
    
.banner-strip {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap; 
}

.banner-strip h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px; 
}

.dual-column-frame {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: start;
}

.primary-zone {
    width: 100%;
}

.showcase-zone {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-zone:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.media-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.media-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.showcase-zone:hover .media-canvas {
    transform: scale(1.05);
}

.content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    padding: 40px 30px 30px;
    transition: padding 0.3s ease;
}

.showcase-zone:hover .content-overlay {
    padding: 50px 30px 30px;
}

.attributes-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.category-marker {
    background: rgba(59, 130, 246, 0.6);
    color: #fff;
    padding: 8px 18px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.time-stamp {
    color: #aaa;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.time-stamp::before {
    content: '•';
    color: #3b82f6;
}

.feature-title {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s ease;
    cursor: pointer;
}


.description-snippet {
    color: white ;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.progress-bullets {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.bullet-point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.bullet-point::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #3b82f6;
    transition: all 0.3s ease;
}

.bullet-point:hover {
    background: #666;
    transform: scale(1.2);
}

.bullet-point.active-state {
    background: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.side-panel {
    display: flex;
    flex-direction: column;
    gap: 43px;
    width: 100%;
}

.widget-container {
    color: white;
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 25px;
    width: 100%;
    transition: all 0.3s ease;
}

.widget-container:hover {
    border-color: #3b82f6;
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

.widget-container h3 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.widget-container h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #3b82f6;
    border-radius: 2px;
}

.highlight-item {
    display: flex;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #222;
    align-items: flex-start;
    transition: all 0.3s ease;
    cursor: pointer;
}

.highlight-item:hover {
    padding-left: 10px;
    background: rgba(59, 130, 246, 0.05);
}

.highlight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.position-badge {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    min-width: 40px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.highlight-item:hover .position-badge {
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.item-content {
    flex: 1;
}

.item-content h4 {
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 600;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.highlight-item:hover .item-content h4 {
    color: #3b82f6;
}

.posted-time {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.highlight-item:hover .posted-time {
    color: #888;
}

.tag-collection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-element {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tag-element::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
    transition: left 0.5s ease;
}

.tag-element:hover::before {
    left: 100%;
}

.tag-element:hover {
    background: #2a2a2a;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.2);
}

.gallery-matrix {
    color: white;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default for large screens */
    gap: 25px;
    width: 100%;
}

.content-block {
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
}

.content-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.content-block:hover::before {
    opacity: 1;
}

.content-block:hover {
    transform: translateY(-10px);
    border-color: #3b82f6;
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}

.preview-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image img {
    transform: scale(1.05);
}

.preview-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent);
    transition: transform 0.5s ease;
}

.content-block:hover .preview-image::after {
    transform: translate(-50%, -50%) scale(1);
}

.text-section {
    padding: 25px;
    position: relative;
    z-index: 2;
}

.meta-information {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.subject-tag {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.subject-tag.gaming {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.content-block:hover .subject-tag.gaming {
    background: rgba(16, 185, 129, 0.2);
    transform: scale(1.05);
}

.subject-tag.arvr {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.content-block:hover .subject-tag.arvr {
    background: rgba(139, 92, 246, 0.2);
    transform: scale(1.05);
}

.subject-tag.security {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.content-block:hover .subject-tag.security {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.05);
}

.creation-date {
    color: #666;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.content-block:hover .creation-date {
    color: #888;
}

.block-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.content-block:hover .block-title {
    color: #3b82f6;
}

.brief-description {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    transition: color 0.3s ease;
    padding-bottom: 15px;
}

.content-block:hover .brief-description {
    color: #aaa;
}

.text-section {
    padding: 25px;
    position: relative;
    z-index: 2;
}

.directional-icon {
    color: #3b82f6;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.28s ease;
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 3;
}

.content-block:hover .directional-icon {
    transform: translateX(6px);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* --- Media Queries for Responsiveness (Unchanged) --- */

/* Tablet/Medium Screens (Max 1024px) */
@media (max-width: 1024px) {
    
    .dual-column-frame {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    
    .side-panel {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 calc(50% - 10px); 
        max-width: calc(50% - 10px);
    }
    
}

    
@media (max-width: 640px) {
    .banner-strip h1 {
        font-size: 28px;
    }

    .media-wrapper {
        height: 350px; /* Smaller height for featured image */
    }

    .feature-title {
        font-size: 1.5rem;
    }

    /* Adjust gallery to a single column */
    .gallery-matrix {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Stack side panel widgets vertically */
    .side-panel {
        flex-direction: column;
        gap: 20px;
    }

    .widget-container {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/*================== END =====================*/

/* DOORLOCK SYSTEM BY PCESS */

.doorlock-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 70px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-doorlock-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;

    background-image:
    linear-gradient(200deg, rgba(62, 222, 47, 0) 30%, rgba(37, 228, 145, 0.5) 70%, rgba(27, 99, 255, 1) 100%),
    url('../images/pc-builds.jpg');
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
    to bottom,
    transparent 0%,  /* Start fully transparent (top fade-out) */
    black 10%,        /* Become fully visible at 5% */
    black 85%,       /* Stay fully visible until 95% */
    transparent 100%);/* Become fully transparent (bottom fade-out) */
    overflow: hidden;
}

.doorlock-header {
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
}

.doorlock-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    font-family: "Space Grotesk";
}


.why-choose-layer {
    text-align: center;
    padding: 40px 20px;
}

    .why-choose-layer.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

	.why-choose-layer.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

.why-choose-question {
    font-family: 'Lexend', sans-serif;
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.why-choose-answer{
    font-size: 32px;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* client-nav section */


/* Base state for all sections - hidden by default */
.cnsection, .projsection {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Active section - visible with animation */
.cnsection:not(.d-none), .projsection:not(.d-none) {
    opacity: 1;
    transform: translateY(0);
    animation: slideInUp 0.6s ease-out forwards;
}

/* Keyframe animation for sliding in from bottom */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternative: Fade and Scale Animation */
.cnsection.scale-animation:not(.d-none), 
.projsection.scale-animation:not(.d-none) {
    animation: fadeScale 0.5s ease-out forwards;
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Staggered animation for child elements */
.cnsection:not(.d-none) .section-h1,
.projsection:not(.d-none) .proj-h1 {
    animation: slideInUp 0.6s ease-out 0.1s backwards;
}

.cnsection:not(.d-none) .section-p,
.projsection:not(.d-none) .proj-p {
    animation: slideInUp 0.6s ease-out 0.2s backwards;
}

.cnsection:not(.d-none) .dl-gradient-button,
.projsection:not(.d-none) .proj-gradient-button {
    animation: slideInUp 0.6s ease-out 0.3s backwards;
}

.cnsection:not(.d-none) .gradient-border-box,
.projsection:not(.d-none) .gradient-border-proj {
    animation: slideInRight 0.6s ease-out 0.2s backwards;
}

/* Slide in from right for images */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px); /* Start 30px to the left */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* End at the normal position */
    }
}

/* Button click feedback animation */
.clientbtn, .projbtn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.clientbtn:active, .projbtn:active {
    transform: translateY(-5px) scale(0.98);
}

/* Smooth active indicator animation */
.clientbtn.active::after, .projbtn.active::after {
    animation: expandLine 0.4s ease-out forwards;
}

@keyframes expandLine {
    from {
        width: 0%;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}



.clientnavpart {
    margin-top: 30px;
    max-height: 670px;
}

.client-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for nav buttons */
.clientbtn {
    transition: color 0.2s ease;
    justify-content: center;
}

.clientbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.clientbtn.active {
    color: #fff !important;
    position: relative;
}

.clientbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

/* Replace Tailwind's 'hidden' with Bootstrap's 'd-none' */
.d-none {
    display: none !important; 
}

.section-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-box {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.section-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.cnsection {
    margin-top: 10px;
}

.section-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.section-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient */
.dl-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.dl-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* RESPONSIVE DESIGN FOR CLIENT NAV SECTION */

@media (max-width: 1280px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 100%;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1270px;
    }

    .cnsection{
        width: 1100px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}


@media (max-width: 1024px) {
    .clientnavpart {
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
        align-items: center; 
    }

    .client-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .section-content{
        width: 1030px;
    }

    .cnsection{
        width: 1000px;
    }

    .section-h1 {
        font-size: 48px;
    }

    .section-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-box {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 15px;
        width: 600px;
        align-content: center   ;
    }

    .client-nav {
         width: 500px;
    } 
    
    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content {
        width: 550px;
    }

    .cnsection {
        width: 550px;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 820px) {

    .clientnavpart {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .client-nav {
        width: 760px;
    }

    .clientbtn {
        width: 300px;
        padding: 1px !important;
    }

    .section-content{
        width: 750px;
    }

    .cnsection{
        width: 750px;

    }
}


@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .cnsection, .projsection {
        transform: translateY(20px);
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .clientnavpart {
        margin-top: 15px;
        max-height: auto;
    }

    .client-nav {
        font-size: 20px;
    } 

    #nav-container {
        justify-content: center;
        padding-bottom: 1rem;
    }
    
    .clientbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .clientbtn.active::after {
        height: 2px;
    }

    .section-content {
        height: auto;
        min-height: 500px;
    }

    .cnsection {
        padding: 2rem 1rem !important;
    }

    .section-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
        max-width: 98%;
    }

    .section-img {
        min-height: 300px;
        max-width: 100%;
    }

    .dl-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}


@media (max-width: 430px) {

    .clientnavpart {
        margin-top: 15px;
        width: 400px;
        align-content: center   ;
    }

    .client-nav {
         width: 400px;
    } 
    
    .clientbtn {
        width: 85px;
        padding: 1px !important;
    }

    .section-content {
        width: 400px;
    }

    .cnsection {
        width: 400px;
    }

    .section-h1 {
        font-size: 26px;
        padding: 15px 5px;
    }

    .section-p {
        font-size: 16px;
        margin-top: 30px;
        line-height: 1.5;
    }

    .gradient-border-box {
        min-height: 250px;
    }

    .section-img {
        min-height: 250px;
    }

    .dl-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .clientnavpart {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .client-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .clientbtn {
        width: 80px;
        padding: 1px !important;
    }

    .section-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .cnsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }

    .section-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .section-p {
        font-size: 14px;
        margin-top: 20px;
        line-height: 1.4;
    }

    .gradient-border-box {
        min-height: 220px;
        margin-bottom: 1.5rem;
    }

    .section-img {
        min-height: 220px;
    }

    .dl-gradient-button {
        padding: 8px 20px;
        font-size: 0.75rem;
        max-width: 250px;
    }
}
/* MANY MORE SECTION */


.many-more {
    margin-top: 70px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
}

.and-many {
    font-size: 48px;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
    padding: 0px 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}


@media (max-width: 1024px) {
    .and-many {
        font-size: 2rem;
        margin-left: 15px;
    }
}

@media (max-width: 768px) {
    .and-many {
        font-size: 1.8rem;
        margin-left: 15px;
    }
}

@media (max-width: 480px) {
    .and-many {
        font-size: 1.8rem;
    }
}

.many-more-container {
    margin-top: 60px; /* Included from your input */
    max-height: 670px; /* Included from your input */
    width: 100%; /* Ensure section is full width */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    margin-bottom: 400px;
}

    .many-more-container.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .many-more-container.animate-visible {
        animation: 1.2s anim-fadeIn linear forwards; 
    }

/* Replaced .card */
.clients-card {
    position: absolute;
    width: 90%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform .4s ease;
    cursor: pointer;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    min-height: 440px;
    display: flex;
}

.clients-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

/* Replaced .container */
.clients-container {
    width: 100%;
    max-width: 800px;
    max-height: 600px;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Replaced .cards */
.many-more-cards {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
}

/*
 * CORE ANIMATION LOGIC (Updated to use .clients-container)
 */

/* Side Cards (Left position: translateX(-40%)) */
.clients-container.active-card-1 #card-3, /* Card 3 moves left when 1 is active */
.clients-container.active-card-2 #card-1, /* Card 1 moves left when 2 is active */
.clients-container.active-card-3 #card-2 { /* Card 2 moves left when 3 is active */
    transform: translatex(-40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Side Cards (Right position: translateX(40%)) */
.clients-container.active-card-1 #card-2, /* Card 2 moves right when 1 is active */
.clients-container.active-card-2 #card-3, /* Card 3 moves right when 2 is active */
.clients-container.active-card-3 #card-1 { /* Card 1 moves right when 3 is active */
    transform: translatex(40%) scale(.8);
    opacity: .4;
    z-index: 0;
}

/* Center Card (translateX(0)) */
.clients-container.active-card-1 #card-1, /* Card 1 centers */
.clients-container.active-card-2 #card-2, /* Card 2 centers */
.clients-container.active-card-3 #card-3 { /* Card 3 centers */
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
    box-shadow: 0px 0px 15px 0px rgba(81, 81, 81, 0.47); 
}

/* RESPONSIVE DESIGN FOR MANY MORE SECTION */

@media (max-width: 1280px) {
    .clients-container {
        max-width: 1000px; /* Use a smaller max-width */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 450px; /* Reduced minimum card height */
        width: 700px;
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


@media (max-width: 820px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 760px; /* Use a smaller max-width */
        max-height: 580px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 590px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}



@media (max-width: 768px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        max-width: 90%; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 430px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 400px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 300px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}

@media (max-width: 360px) {
    /* Adjust container size for better fit on smaller screens */
    .clients-container {
        width: 360px; /* Use a smaller max-width */
        max-height: 480px; /* Reduced max height */
    }

    /* Reduce the margins on the main container */
    .many-more-container {
        margin-top: 50px;
        margin-bottom: 350px; /* Reduced bottom margin */
    }

    .clients-card {
        width: 290px;
        min-height: 270px; /* Reduced minimum card height */
    }

    .clients-img {
        min-height: 260px; /* Reduced minimum image height */
    }

    /* Side Cards (Left position: translateX(-25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-3,
    .clients-container.active-card-2 #card-1,
    .clients-container.active-card-3 #card-2 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(-25%) scale(.7); 
        opacity: .4;
        z-index: 0;
    }

    /* Side Cards (Right position: translateX(25%)) - Tighter positioning */
    .clients-container.active-card-1 #card-2,
    .clients-container.active-card-2 #card-3,
    .clients-container.active-card-3 #card-1 {
        /* Reduced translation (40% -> 25%) and increased scale reduction (0.8 -> 0.7) */
        transform: translatex(25%) scale(.7);
        opacity: .4;
        z-index: 0;
    }
}


/* DOORLOCK BRAND SLIDER SECTION */

.doorlock-brand-slider {
    margin-top: 600px;
}

@media (max-width: 1280px) {
    .doorlock-brand-slider{
        width: 100%;
    }
}

@media (max-width: 820px) {
    .doorlock-brand-slider{
        margin-top: 550px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .doorlock-brand-slider{
        margin-top: 150px;
    }
}

@media (max-width: 420px) {
    .doorlock-brand-slider{
        margin-top: 150px;
        width: 100%;
    }
}


/* OTHER PROJECTS SECTION */

.other-proj-nav {
    margin-top: 150px;
    max-height: 670px;
    margin-bottom: 20px;
}

.proj-nav {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
}

/* Bootstrap hover effects for project nav buttons */
.projbtn {
    transition: color 0.2s ease;
}

.projbtn:hover {
    color: white !important;
    transform: translateY(-7px) scale(1.05);
}

/* Custom styling for the active button to give it the gradient look */
.projbtn.active {
    color: #fff !important;
    position: relative;
}

.projbtn.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust this to control distance from text */
    left: 0;
    width: 100%;
    height: 3px;
    /* Use a simple, vibrant gradient for the indicator */
    background: linear-gradient(to right, #3b82f6, #10b981); /* Blue to Green */
    border-radius: 1px;
}

.projects-content{
    background-image: radial-gradient(white 1px, transparent 0);
    background-size: 40px 40px;
    height: 670px;
    padding: 10px 5px;
}

.gradient-border-proj {
    /* Create the gradient on the outer element */
    background: linear-gradient(180deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* Blue to Green */
    padding: 4px; /* The width of the border */
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3), 0 4px 6px -2px rgba(37, 99, 235, 0.1); /* Subtle blue glow */
    margin-right: -50px;
    min-height: 430px;
    display: flex;
}

.proj-img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills container while maintaining aspect ratio */
    display: block; /* Removes bottom spacing */
    min-height: 430px;
}

.projsection {
    margin-top: 10px;
}

.proj-h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 20px;
    background-color: black;
    padding: 20px 5px;
    text-align: center;
}

.proj-p {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    margin-top: 70px;
    background-color: black;
    padding: 10px 5px;
    text-align: center;
}

/* Custom Button Gradient for Projects */
.proj-gradient-button {
    background: linear-gradient(to right, rgba(27, 99, 255, 0.7) 0%, rgba(37, 228, 145, 0.5) 33%, rgba(62, 222, 47, 0) 100%);
    transition: all 0.3s ease;
    background-size: 200% auto;
    color: white;
    margin-top: 20px;
    background-color: black;
    text-decoration: none;
    border: none;
}

.proj-gradient-button:hover {
    background: linear-gradient(90deg, #1B63FF 0%, #25E491 50%, #3EDE2F 100%); /* change the direction of the change on hover */
    color: white;
}

/* DOORLOCK RESPONSIVE DESIGN */

@media(max-width: 1280px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 820px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
        width: 100%;
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 768px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

@media(max-width: 430px) {

    /* doorlock top feature area */
    .doorlock-area {
        width: 100%; /* Change from max-width */
        max-width: 100%; /* Ensure it doesn't overflow */
    }

    .doorlock-header {
        padding: 20px;
    }
    .doorlock-header h1{
        font-size: 3rem;
    }

    /* why choose layer */
    .why-choose-layer {
        padding: 50px;  
    }
    .why-choose-question{
        font-size: 2rem;
    }
    .why-choose-answer{
        font-size: 1.2rem;
    }
}

/* OTHER PROJ AREA */

@media (max-width: 1280px) {
    .other-proj-nav{
        margin-top: 80px;
        max-width: auto;
        margin-bottom: -20px;
    }

    .proj-nav {
        font-size: 24px;
        max-width: 100%;
    }

    .projects-content{
        width: 1270px;
    }

    .projsection{
        width: 1200px;
    }


    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 1024px) {
    .other-proj-nav{
        margin-top: 20px;
        max-width: 1200px;
        margin-bottom: -30px;
    }

    .proj-nav {
        font-size: 24px;
    }

    .projects-content{
        width: 1020px;
    }

    .projsection{
        width: 1000px;
    }

    .proj-h1 {
        font-size: 48px;
    }

    .proj-p {
        font-size: 20px;
        margin-top: 40px;
    }

    .gradient-border-proj {
        margin-right: 0;
    }
}

@media (max-width: 820px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 750px;
        align-content: center   ;
    }

    .proj-nav {
        width: 760px;
    }

    .projbtn {
        width: 300px;
        padding: 1px !important;
    }

    .projects-content{
        width: 750px;
    }

    .projsection{
        width: 750px;

    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .other-proj-nav {
        margin-top: 15px;
        max-height: auto;
    }
    .proj-nav {
        font-size: 20px;
    }

    #navp-container {
        justify-content: flex-start;
        padding-bottom: 1rem;
    }

    .projbtn {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        display: inline-block;
        align-content: center;
        text-align: center;
    }

    .projbtn.active::after {
        height: 2px;
    }

    .projects-content {
        height: auto;
        min-height: 500px;
    }

    .proj-section {
        padding: 2rem 1rem !important;
    }

    .projsection {
        margin-top: 0px;
    }

    .proj-h1 {
        font-size: 32px;
        padding: 15px 5px;
    }

    .proj-p {
        font-size: 16px;
        margin-top: 40px;
        line-height: 1.5;
    }

    .gradient-border-proj {
        min-height: 300px;
        margin-right: 0;
        margin-bottom: 2rem;
    }

    .proj-img {
        min-height: 300px;
    }

    .proj-gradient-button {
        width: 100%;
        max-width: 300px;
        padding: 12px 30px;
        font-size: 0.875rem;
        margin-top: 30px;
    }

    /* Bootstrap gap utility replacement */
    .gap-3 {
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {

    .other-proj-nav {
        margin-top: 40px;
        width: 410px;
    }

    .proj-nav {
        width: 400px;
    }

    .projbtn {
        width: 88px;
        padding: 1px !important;
    }

    .projects-content{
        width: 400px;
    }

    .projsection{
        width: 400px;
    }

    .proj-h1 {
        font-size: 24px;
        padding: 10px 5px;
    }

    .proj-p {
        font-size: 14px;
        margin-top: 20px;
    }

    .gradient-border-proj {
        min-height: 250px;
    }

    .proj-img {
        min-height: 250px;
    }

    .proj-gradient-button {
        padding: 10px 25px;
        font-size: 0.8rem;
    }
}

@media (max-width: 360px) {

    .other-proj-nav {
        margin-top: 15px;
        max-width: 92%;
        align-content: center;
    }

    .proj-nav {
        max-width: 100%;
        font-size: 14px;
    } 
    
    .projbtn {
        width: 75px;
        padding: 1px !important;
    }

    .projects-content {
        max-width: 100%;
        padding: 5px 2px;
    }

    .projsection {
        max-width: 100%;
        padding: 1rem 0.5rem !important;
    }
}

/* Remove default link underline */
a {
    text-decoration: none;
}



/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */
/* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */   /* PUBLIC PROJECTS */

.public-wrapper {
            max-width: 100%;
            width: 100%;
            overflow-x: hidden;
            margin-bottom: 30px;
        }

        .flex-public {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1500px;
            margin: 30px auto;
            padding: clamp(40px, 8vw, 100px) clamp(20px, 4vw, 60px);
            gap: clamp(30px, 5vw, 80px);
            min-height: 500px;
            opacity: 0;
        }

        .flex-public.visible {
            animation: fadeInUp 0.8s ease-out forwards !important;
        }

        .flex-public.visible:nth-child(1) {
            animation: fadeInUp 0.8s ease-out 0s forwards;
        }
        .flex-public.visible:nth-child(2) {
            animation: fadeInUp 0.8s ease-out 0.15s forwards;
        }
        .flex-public.visible:nth-child(3) {
            animation: fadeInUp 0.8s ease-out 0.3s forwards;
        }
        .flex-public.visible:nth-child(4) {
            animation: fadeInUp 0.8s ease-out 0.45s forwards;
        }
        .flex-public.visible:nth-child(5) {
            animation: fadeInUp 0.8s ease-out 0.6s forwards;
        }

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

        .text-public {
            flex: 1;
            min-width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .text-public h2 {
            font-size: clamp(32px, 4vw, 52px);
            margin-bottom: 20px;
            background-clip: text;
            font-weight: 700;
            letter-spacing: -0.5px;
            font-family: 'Space Grotesk', sans-serif;
        }

        .text-public p {
            font-size: 1.5rem;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 30px;
            font-weight: 400;
            font-family: 'Lexend', sans-serif;
        }

        .public-btn {
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 600;
            padding: 12px 50px;
            border-radius: 50px;
            background: #0000;
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-block;
            width: fit-content;
            position: relative;
            overflow: hidden;
            border: 1px solid;
        }

        .public-btn::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: left 0.5s ease;
            z-index: 1;
        }

        .public-btn span {
            position: relative;
            z-index: 2;
        }

        .public-btn:hover {
            transform: translateY(-3px);
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
        }
        .public-btn:hover::before {
            left: 100%;
        }

        .public-btn:active {
            transform: translateY(-1px);
        }

        .demo-section {
            display: flex;
            gap: 30px;
            margin-top: 50px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .button-group h3 {
            color: #888;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        @keyframes gradientShiftp {
            0% {
                background-position: -200% center;
            }
            100% {
                background-position: 200% center;
            }
        }

        .visual-public {
            position: relative;
            max-width: 600px;
            height: 450px;
            border-radius: 20px;
            flex: 1;
        }

        /* Blur shadow background */
        .visual-public::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 101%;
            height: 100%;
            background: linear-gradient(
                90deg,
                #FF6666 0%,
                #FF894C 20%,
                #90FF55 40%,
                #7B94F6 60%,
                #FF77F1 80%,
                #FF6666 100%
            );
            background-size: 200% 100%;
            animation: gradientShiftp 8s linear infinite;
            filter: blur(10px);
            z-index: 0;
            pointer-events: none;
        }

        .visual-public img {
            position: relative;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
            z-index: 1;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .visual-public:hover img {
            transform: scale(1.03);
        }

        .flex-public:nth-child(even) {
            flex-direction: row-reverse;
        }

        /* Responsive Design */
        /* 344px - Extra Small Phones */
        @media (max-width: 344px) {
            .public-wrapper{
                margin-bottom: -100px;
                margin-top: 50px;
            }
            .flex-public {
                flex-direction: column !important;
                padding: 20px 12px;
                gap: 15px;
                margin-bottom: -30px !important;
                
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 24px;
                margin-bottom: 12px;
            }

            .text-public p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 250px;
                margin-bottom: -50px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 10px 30px;
                font-size: 14px;
                margin-bottom: -100px !important;
            }
           
        }

        /* 360px - Small Phones */
@media (max-width: 360px) {
    .public-wrapper {
        margin-top: -10px !important;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 20px 14px;
        gap: 16px;
        margin-bottom: -100px !important;
    }

    .text-public {
        min-width: 100%;
        font-size: 14px;
    }

    .text-public h2 {
        font-size: 26px !important;
        margin-bottom: 12px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 260px;
    }

    .visual-public img {
        width: 100% !important;
        height: 260px !important;

    }

    .public-btn {
        padding: 10px 32px;
        font-size: 14px;
    }
}

/* 375px - iPhone SE/6/7/8 */
@media (max-width: 375px) {
    .public-wrapper {
        margin-bottom: -50px;
        overflow: hidden;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 22px 16px;
        gap: 18px;
        margin: 16px auto;
        max-height: 580px;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 13px;
    }

    .text-public p {
        font-size: 14px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 280px;
    }

    .visual-public img {
        width: 100% !important;
        height: 280px !important;
        
    }

    .public-btn {
        padding: 11px 35px;
        font-size: 14px;
    }
}

/* 390px - Pixel 4/5 */
@media (max-width: 390px) {
    .public-wrapper {
        margin-top: 50px;
        margin-bottom: 190px !important;
    }
    .flex-public {
        flex-direction: column !important;
        padding: 24px 18px;
        gap: 15px;
        margin: 18px auto;
        transform: scale(0.9) !important;
    }

    .text-public {
        min-width: 100%;
    }

    .text-public h2 {
        font-size: 28px !important;
        margin-bottom: 14px;
    }

    .text-public p {
        font-size: 15px !important;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .visual-public {
        width: 100%;
        max-width: 100%;
        height: 230px;
        margin-top: -120px;
    }

    .visual-public img {
        width: 100% !important;
        height: 230px !important;
    }

    .public-btn {
        padding: 10px 35px !important;
        font-size: 15px !important;
        margin-bottom: -130px !important;
        
    }
}

        /* 412px - Galaxy S9 */
        @media (max-width: 412px) {
            .public-wrapper{
                margin-bottom: -10px;
                overflow: visible;
            }

            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 26px 20px;
                gap: 20px;
                margin-bottom: -100px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-bottom: -60px !important;
                margin-top: -60px !important;
                transform: scale(0.9) !important;
            }

            .public-btn {
                padding: 12px 40px;
                font-size: 15px;
            }
            

        }

        /* 414px - iPhone XR */
        @media (max-width: 414px) {
            .flex-public {
                flex-direction: column !important;
                padding: 26px 20px;
                gap: 20px;
                margin: 18px auto;
                transform: scale(0.9) !important;
                margin-bottom: -30px !important;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 32px;
                margin-bottom: 14px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 320px;
                margin-top: -100px;
                margin-bottom: -40px;
            }

            .public-btn {
                padding: 12px 30px;
                font-size: 15px;
                margin-bottom: -100px !important;
            }
        }

        /* 430px - Galaxy S22 */
        @media (min-width: 320px) and (max-width: 430px) {
            .public-wrapper {
                margin-bottom: -40px !important;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 28px 22px;
                gap: 20px;
                margin-top: -100px !important;
            }

            .text-public {
                min-width: 350px !important;
                margin: 10px !important;
                transform: scale(0.9);
            }

            .text-public h2 {
                font-size: 34px !important;
                margin-bottom: 15px;
            }

            .text-public p {
                font-size: 15px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 330px;
                margin-bottom: -50px;
                margin-top: -40px;
            }

            .public-btn {
                padding: 10px 32px !important;
                font-size: 15px !important;
                transform: scale(0.9);
                margin-bottom: -90px !important;
            }
        }

        /* 540px - Small Tablets */
        @media (max-width: 540px) {
            .flex-public {
                flex-direction: column !important;
                padding: 30px 24px;
                gap: 22px;
                margin: 20px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 30px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public{
                max-height: 270px !important;
                width: 390px !important;
            }

            .visual-public img{
                max-width: 390px !important;
                max-height: 250px !important;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 768px - iPad/Tablet */
        @media (max-width: 853px) {
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 35px 30px;
                gap: 25px;
                margin: 25px auto;
            }

            .text-public {
                min-width: 100%;
            }

            .text-public h2 {
                font-size: 38px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                width: 100%;
                max-width: 100%;
                height: 380px;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
            
        }

        /* 853px - Large Tablet */
        @media (max-width: 853px) {
            .public-wrapper{
                margin-bottom: 40px;
            }
            .flex-public {
                flex-direction: column !important;
                min-height: auto;
                padding: 50px 45px !important;
                gap: 28px;
                margin-top: 70px !important;
            }

            .text-public {
                min-width: 100%;
                margin: auto;
                text-align: center;
                align-items: center;
                margin-bottom: -50px;
            }

            .text-public h2 {
                font-size: 48px !important;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 22px !important;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                order: -1;
                max-width: 590px !important;
            }

            .visual-public img{
                width: 590px;
                height: 380px !important;  
            }

            .public-btn {
                padding: 10px 40px !important;
                font-size: 18px !important;
            }
        }

        /* 912px - Large Tablet Landscape */
        @media (max-width: 912px) {
            .flex-public {
                flex-direction: row;
                min-height: auto;
                padding: 40px 35px;
                gap: 30px;
                margin: 25px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 36px;
                margin-bottom: 16px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 20px;
            }

            .visual-public {
                max-width: 400px;
                height: 320px;
                flex: 1;
            }

            .public-btn {
                padding: 12px 45px;
                font-size: 15px;
            }
        }

        /* 992px - Small Desktop */
        @media (max-width: 992px) {
            .flex-public {
                flex-direction: row;
                min-height: 450px;
                padding: 45px 40px;
                gap: 40px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: auto;
                flex: 1;
            }

            .text-public h2 {
                font-size: 40px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 15px;
                line-height: 1.75;
                margin-bottom: 22px;
            }

            .visual-public {
                max-width: 450px;
                height: 350px;
                flex: 1;
            }

            .public-btn {
                padding: 13px 48px;
                font-size: 16px;
            }
        }

        /* 1024px - Tablet Landscape / Desktop */
        @media (max-width: 1024px) {
            .flex-public {
                flex-direction: row;
                min-height: 480px;
                padding: 50px 45px;
                gap: 45px;
                margin: 30px auto;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 350px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 42px;
                margin-bottom: 18px;
            }

            .text-public p {
                font-size: 17px !important;
                line-height: 1.75;
                margin-bottom: 24px;
            }

            .visual-public {
                max-width: 500px;
                height: 330px !important;
                flex: 1;
            }

            .public-btn {
                padding: 10px 35px !important;
                font-size: 16px;
            }
            .ds-section-title{
                margin-left: 20px;
            }
            .ds-view-all-link{
                margin-right: 30px;
            }
        }

        /* 1280px - Full Desktop */
        @media (max-width: 1280px) {
            .flex-public {
                flex-direction: row;
                min-height: 500px;
                padding: 60px 50px;
                gap: 50px;
                margin: 30px 40px;
            }

            .flex-public:nth-child(even) {
                flex-direction: row-reverse;
            }

            .text-public {
                min-width: 380px;
                flex: 1;
            }

            .text-public h2 {
                font-size: 46px;
                margin-bottom: 20px;
            }

            .text-public p {
                font-size: 16px;
                line-height: 1.8;
                margin-bottom: 26px;
            }

            .visual-public {
                max-width: 550px;
                height: 400px;
                flex: 1;
            }

            .public-btn {
                padding: 14px 52px;
                font-size: 16px;
            }
        }


        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */
        /* Modal Styles */ /* Modal Styles */ /* Modal Styles */

        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.3s ease-out;
            margin-top: 40px;
        }

        .modal-overlay.active {
            display: flex;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .modal-content-public {
            background: black;
            border: 2px solid #7B54B1;
            border-radius: 20px;
            padding: 50px;
            max-width: 850px;
            width: 90%;
            position: relative;
            display: flex;
            gap: 50px;
            animation: slideUp 0.4s ease-out;
            box-shadow: -3px 0 10px rgba(255, 0, 0, 0.4), -3px 0 10px rgba(255, 0, 0, 0.4),
                        -5px 0 10px rgba(255, 255, 0, 0.3),
                        5px 0 10px rgba(0, 0, 255, 0.4),
                        5px 0 10px rgba(148, 0, 211, 0.4);
            margin-top: 0px;
        }

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

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: #a78bfa;
            font-size: 32px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close-btn:hover {
            color: #c084fc;
            transform: scale(1.2);
        }

        .testimonial-image {
            flex: 0 0 450px;
            height: 400px;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 0px 30px rgba(168, 85, 247, 0.2);
        }

        .testimonial-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .testimonial-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .testimonial-text h2 {
            font-size: 28px;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #a78bfa, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-family: 'Space Grotesk', sans-serif;
        }

        .testimonial-text p {
            font-size: 18px;
            line-height: 1.8;
            color: #d1d5db;
            margin-bottom: 20px;
            font-family: 'Lexend', sans-serif;
        }

        .public-stars {
            display: flex;
            gap: 8px;
            font-size: 24px;
            display: inline-block; 
    
            /* Ensure the animation is fully defined */
            animation: rgbGoldPulse 2s ease-in-out infinite alternate;
        }

        @media (max-width: 768px) and (min-width: 541px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 35px;
                flex-direction: column;
                max-width: 750px;
                margin: auto;
            }

            .testimonial-image img {
                width: 790px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 8px;
            }
        }

        @media (max-width: 344px) {
            .modal-content-public {
                padding: 20px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 400px;
                height: 410px !important;
            }

            .testimonial-text h2 {
                font-size: 18px;
                margin-bottom: 12px;
            }

            .testimonial-text p {
                font-size: 13px;
                line-height: 1.6;
                margin-bottom: 12px;
            }

            .public-stars {
                font-size: 16px;
                gap: 5px;
            }

            .close-btn {
                font-size: 24px;
                width: 32px;
                height: 32px;
            }
        }

        /* Mobile: 360px */
        @media (max-width: 360px) and (min-width: 345px) {
            .modal-content-public {
                padding: 25px;
                gap: 20px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 210px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 430px;
            }

            .testimonial-text h2 {
                font-size: 20px;
                margin-bottom: 14px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 14px;
            }

            .public-stars {
                font-size: 18px;
                gap: 6px;
            }

            .close-btn {
                font-size: 26px;
                width: 34px;
                height: 34px;
            }
        }

        /* Mobile: 375px */
        @media (max-width: 375px) and (min-width: 361px) {
            .modal-content-public {
                padding: 28px;
                gap: 22px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 190px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 420px;
            }

            .testimonial-text h2 {
                font-size: 21px;
                margin-bottom: 15px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 15px;
            }

            .public-stars {
                font-size: 19px;
                gap: 6px;
            }

            .close-btn {
                font-size: 28px;
            }
        }

        /* Mobile: 390px */
        @media (max-width: 390px) and (min-width: 376px) {
            .modal-content-public {
                padding: 30px;
                gap: 24px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 440px;
            }

            .testimonial-text h2 {
                font-size: 22px;
                margin-bottom: 16px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 20px;
                gap: 6px;
            }
        }

        /* Mobile: 412px */
        @media (min-width: 400px) and (max-width: 412px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 470px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 13px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
            
        }

        /* Mobile: 414px */
        @media (max-width: 414px) and (min-width: 413px) {
            .modal-content-public {
                padding: 32px;
                gap: 25px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 220px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 450px;
            }

            .testimonial-text h2 {
                font-size: 23px;
                margin-bottom: 17px;
            }

            .testimonial-text p {
                font-size: 15px;
                line-height: 1.7;
                margin-bottom: 17px;
            }

            .public-stars {
                font-size: 21px;
                gap: 7px;
            }
        }

        /* Mobile: 430px */
        @media (max-width: 430px) and (min-width: 415px) {
            .modal-content-public {
                padding: 35px;
                gap: 26px;
                flex-direction: column;
                max-width: 100%;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 230px;
                width: 100%;
            }

            .testimonial-image img{
                width: 500px;
                height: 460px;
            }

            .testimonial-text h2 {
                font-size: 24px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 22px;
                gap: 7px;
            }
        }

        /* Tablet: 540px */
        @media (max-width: 540px) and (min-width: 431px) {
            .modal-content-public {
                padding: 40px;
                gap: 30px;
                flex-direction: column;
                max-width: 440px;
                max-height: 500px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 auto;
                height: 200px;
                width: 95%;
                margin: auto;
            }

            .testimonial-image img{
                width: 550px !important;
                height: 650px !important;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 18px;
            }

            .testimonial-text p {
                font-size: 14px;
                line-height: 1.7;
                margin-bottom: 5px;
            }

            .public-stars {
                font-size: 20px;
                gap: 8px;
            }

        }


        /* Tablet: 853px */
        @media (min-width: 810px) and (max-width: 820px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: column !important;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image{
                max-width: 750px;
                height: 400px !important;
                margin: auto;
            }

            .testimonial-image img{
                width: 750px !important;
                height: 700px !important;
            }

            .testimonial-text h2 {
                font-size: px !important;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 18px !important;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

         /* Tablet: 853px */
        @media (max-width: 1024px) and (min-width: 769px) {
            .modal-overlay {
                height: 1280px;
                margin: auto;
            }
            .modal-content-public {
                padding: 44px;
                gap: 38px;
                flex-direction: row;
                max-width: 780px;
                margin: auto;
            }

            .testimonial-image img{
                width: 650px !important;
                height: 650px;
            }

            .testimonial-text h2 {
                font-size: 25px;
                margin-bottom: 10px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 18px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
            .ds-update-content{
                display: grid;
                grid-template-columns: 1fr auto;
                gap:20px;
                align-items: start;
            }
            .best-seller-thumbnail{
                grid-column: 2;
                grid-row: 1 / -1;
                margin-top: 0;
                align-self: center;
                width: 150px;
               
            }
            .best-seller-thumbnail img{
                height: 120px;
            }
            .ds-update-details-row{
                justify-content: flex-start;
            }
        }

        @media (max-width: 912px) and (min-width: 854px) {
            .modal-content-public {
                padding: 40px !important;
                gap: 40px;
                flex-direction: column;
                max-width: 800px;
                margin: auto;
            }

            .testimonial-image {
                flex: 0 0 360px;
                width: 720px;
                margin: auto;
            }

            .testimonial-image img{
                width: 900px !important;
                height: 750px;
            }

            .testimonial-text h2 {
                font-size: 30px !important;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 20px !important;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Tablet: 992px */
        @media (max-width: 992px) and (min-width: 941px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 800px;
            }

            .testimonial-image {
                flex: 0 0 350px;
                height: 320px;
            }

            .testimonial-text h2 {
                font-size: 26px;
                margin-bottom: 19px;
            }

            .testimonial-text p {
                font-size: 16px;
                line-height: 1.7;
                margin-bottom: 19px;
            }

            .public-stars {
                font-size: 23px;
                gap: 8px;
            }
        }

        /* Desktop: 1024px */
        @media (max-width: 1024px) and (min-width: 993px) {
            .modal-content-public {
                padding: 45px;
                gap: 40px;
                flex-direction: row;
                max-width: 870px;
                height: 400px;
            }
            .modal-overlay {
                height: 700px;
                margin: auto;
            }
            .testimonial-image {
                flex: 0 0 400px;
                height: 300px;
            }

            .testimonial-image img{
                width: 600px;
                height: 550px;
            }

            .testimonial-text h2 {
                font-size: 36px;
                margin-bottom: -10px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 10px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

        /* Desktop: 1280px and above */
        @media (min-width: 1100px) and (max-width: 1280px){
            .modal-content-public {
                padding: 50px;
                gap: 40px;
                max-width: 1100px;
                flex-direction: row;
                height: 550px;
            }

            .testimonial-image {
                flex: 0 0 550px !important;
                height: 400px !important;
                margin: auto;

            }

            .testimonial-image img{
                flex: 0 0 300px !important;
                height: 400px;
                margin: auto;
            }

            .testimonial-text h2 {
                font-size: 28px;
                margin-bottom: 20px;
            }

            .testimonial-text p {
                font-size: 18px;
                line-height: 1.8;
                margin-bottom: 20px;
            }

            .public-stars {
                font-size: 24px;
                gap: 8px;
            }
        }

.public-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.primary-public-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    margin-bottom: 0%;
    margin-top: -40px;
    background-image: linear-gradient(180deg, rgba(255, 23, 68, 0) 30%, rgba(255, 23, 68, 0.5) 60%, rgba(187, 134, 252, 1) 100%),
    url('https://i.pinimg.com/1200x/e6/f8/96/e6f896b726a7fe83a306673b2c5c4a18.jpg');
    background-size: cover;
    background-position: center;
    mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 85%,
    transparent 100%);
    overflow: hidden;
}

.public-header {
    position: absolute;
    justify-content: center;
    margin-top: 480px;
    text-align: center;
    padding: 40px 60px;
    width: 100%;
}

.public-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

.publicproj {
    text-align: center;
    padding: 40px 20px;
}

.publicproj.is-hidden {
    opacity: 0;
}

.publicproj.animate-visible {
    animation: 1.5s anim-fadeIn linear forwards;
}

.are-public {
    font-size: 32px !important;
    color: #e0e0e0;
    margin-bottom: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    max-width: 1000px;
    margin: 0 auto;
}

/* 344px - 349px */
@media (min-width: 344px) and (max-width: 349px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 250px;
        padding: 20px 15px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.1;
    }
    .publicproj {
        padding: 30px 12px;
    }
    .are-public {
        font-size: 14px !important;
        margin-top: -50px;
        margin-bottom: -90px !important;
    }
}

/* 350px - 360px */
@media (min-width: 350px) and (max-width: 360px) {
    .primary-public-wrapper {
        height: 320px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 200px;
        padding: 25px 18px;
    }
    .public-header h1 {
        font-size: 26px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 30px 14px;
    }
    .are-public {
        font-size: 15px !important;
        margin-bottom: -60px !important;
        margin-top: -40px;
    }
}

/* 361px - 375px */
@media (min-width: 361px) and (max-width: 375px) {
    .primary-public-wrapper {
        height: 350px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 160px !important;
        padding: 28px 20px;
    }
    .public-header h1 {
        font-size: 28px !important;
        line-height: 1.15;
    }
    .publicproj {
        padding: 32px 15px;
    }
    .are-public {
        font-size: 16px !important;
        margin-bottom: -100px !important;
        margin-top: -60px !important;
    }
}

/* 376px - 390px */
@media (min-width: 376px) and (max-width: 390px) {
    .primary-public-wrapper {
        height: 370px !important;
        margin-top: -150px;
    }
    .public-header {
        margin-top: 230px;
        padding: 30px 22px;
    }
    .public-header h1 {
        font-size: 30px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 34px 16px;
    }
    .are-public {
        font-size: 17px !important;
        margin-top: -50px;
        margin-bottom: -30px !important;
    }
}

/* 391px - 412px */
@media (min-width: 391px) and (max-width: 412px) {
    .primary-public-wrapper {
        height: 380px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 230px !important;
        padding: 32px 24px;
    }
    .public-header h1 {
        font-size: 32px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px !important;
    }
}

/* 413px - 414px */
@media (min-width: 413px) and (max-width: 414px) {
    .primary-public-wrapper {
        height: 485px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 235px !important;
        padding: 32px 25px;
    }
    .public-header h1 {
        font-size: 40px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 36px 18px;
    }
    .are-public {
        font-size: 18px !important;
        margin-top: -40px !important;
        margin-bottom: -20px !important;
    }
}

/* 415px - 429px */
@media (min-width: 415px) and (max-width: 430px) {
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 33px 26px;
    }
    .public-header h1 {
        font-size: 36px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 19px;
    }
    .are-public {
        font-size: 19px !important;
        margin-top: -40px;
        margin-bottom: 30px !important;
    }
}

/* 530px - 540px */
@media (min-width: 530px) and (max-width: 540px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 450px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 260px !important;
    }
    .public-header h1 {
        font-size: 42px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 38px 25px;
    }
    .are-public {
        font-size: 18px !important;
        margin-bottom: -40px;
        margin-top: -40px;
        max-width: 100%;
    }
}

/* 760px - 768px */
@media (min-width: 760px) and (max-width: 768px) {
    .public-area {
        margin: 40px auto 40px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -150px !important;
    }
    .public-header {
        margin-top: 300px !important;
        padding: 38px 45px;
    }
    .public-header h1 {
        font-size: 45px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 30px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 810px - 820px */
@media (min-width: 810px) and (max-width: 820px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 850px - 853px */
@media (min-width: 850px) and (max-width: 853px) {
    .public-area {
        margin: 45px auto 45px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 350px !important;
        padding: 39px 50px;
    }
    .public-header h1 {
        font-size: 52px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 40px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
    }
}

/* 900px - 912px */
@media (min-width: 900px) and (max-width: 912px) {
    .public-area {
        margin: 48px auto 48px auto;
    }
    .primary-public-wrapper {
        height: 550px !important;
        margin-top: -39px;
    }
    .public-header {
        margin-top: 300px;
        padding: 39px 55px;
    }
    .public-header h1 {
        font-size: 50px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 45px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
    }
}

/* 980px - 992px */
@media (min-width: 980px) and (max-width: 992px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 600px !important;
        margin-top: -40px;
    }
    .public-header {
        margin-top: 450px;
        padding: 40px 58px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 30px !important;
        margin-bottom: 2rem;
    }
}

/* 1000px - 1024px */
@media (min-width: 1000px) and (max-width: 1024px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 400px !important;
        margin-top: -80px !important;
    }
    .public-header {
        margin-top: 150px !important;
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 58px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 26px !important;
        margin-bottom: 2rem;
        margin-top: -60px;
    }
}

/* 1270px - 1280px */
@media (min-width: 1270px) and (max-width: 1280px) {
    .public-area {
        margin: 50px auto 50px auto;
    }
    .primary-public-wrapper {
        height: 480px !important;
        margin-top: -70px !important;
    }
    .public-header {
        margin-top: 270px;  
        padding: 40px 60px;
    }
    .public-header h1 {
        font-size: 60px !important;
        line-height: 1.2;
    }
    .publicproj {
        padding: 40px 50px;
    }
    .are-public {
        font-size: 28px !important;
        margin-bottom: 2rem;
        margin-top: -50px;
    }
}

/*Mission Vision CSS*/
/* Mission and Vision Section */
.mission-vision-wrapper {
    background: #000000;
    padding: 80px 20px;
    position: relative;
    overflow-x: hidden;
}

.mission-vision-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #333 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
    animation: dotPulse 4s linear infinite;
}

@keyframes dotPulse {
    0% { opacity: 0.2; }
    15% { opacity: 0.3; }
    30% { opacity: 0.45; }
    50% { opacity: 0.7; }
    70% { opacity: 0.45; }
    85% { opacity: 0.3; }
    100% { opacity: 0.2; }
}

.mission-vision-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4  0px;
    position: relative;
    z-index: 1;
}

.mission,
.vision {
    background: #0a0a0a;
    padding: 60px 40px;
    border-radius: 20px;
    border: 2px solid;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mission {
    animation-delay: 0.2s;
}

.vision {
    animation-delay: 0.4s;
}

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

.mission {
    border-color: #00ff88;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    animation: fadeInUp 0.8s ease-out 0.2s forwards, borderPulse 3s ease-in-out infinite;
}

.vision {
    border-color: #0088ff;
    box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    animation: fadeInUp 0.8s ease-out 0.4s forwards, borderPulseBlue 3s ease-in-out infinite;
}

.mission:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 255, 136, 0.5);
    border-color: #00ffaa;
}

.vision:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 60px rgba(0, 136, 255, 0.5);
    border-color: #00aaff;
}

/* Animated glow effect */
.mission::before,
.vision::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 8s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Shimmer effect on hover */
.mission::after,
.vision::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.mission:hover::after,
.vision:hover::after {
    transform: translateX(100%);
}

@keyframes borderPulse {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 255, 136, 0.6);
    }
}

@keyframes borderPulseBlue {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(0, 136, 255, 0.3);
    }
    50% { 
        box-shadow: 0 0 50px rgba(0, 136, 255, 0.6);
    }
}

.mission h2,
.vision h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: slideInLeft 0.8s ease-out;
}

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

.mission p,
.vision p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #e0e0e0;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
    animation: fadeIn 1s ease-out 0.3s backwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 968px) {
    .mission-vision-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .mission,
    .vision {
        padding: 50px 35px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 640px) {
    .mission-vision-wrapper {
        padding: 60px 15px;
    }

    .mission,
    .vision {
        padding: 40px 25px;
    }

    .mission h2,
    .vision h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .mission p,
    .vision p {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
    .mission,
    .vision {
        padding: 30px 20px;
    }

    .mission h2,
    .vision h2 {
        font-size: 1.75rem;
        margin-bottom: 15px;
    }

    .mission p,
    .vision p {
        font-size: 0.9rem;
    }

}

/* FDAS Details Page Styles */
.glow-model-container {
    position: relative;
    overflow: visible;
}

.glow-model-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    border-radius: 20px;
    opacity: 0.3;
    filter: blur(20px);
    z-index: -1;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.model-container {
    position: relative;
    z-index: 1;
}

.gradient-icon {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modern-feature-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: 0.8rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.modern-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.1), rgba(103, 28, 104, 0.1), rgba(123, 84, 177, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.modern-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(172, 56, 56, 0.3);
    box-shadow: 0 10px 30px rgba(172, 56, 56, 0.2);
}

.modern-feature-card:hover::before {
    opacity: 1;
}

.feature-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.15), rgba(123, 84, 177, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.modern-feature-card:hover .feature-icon-wrapper {
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.25), rgba(123, 84, 177, 0.25));
    transform: scale(1.05);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.2rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.feature-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(5px);
}

.feature-item .icon-large {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 70px;
    text-align: center;
}

.feature-item .feature-content h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Lexend', sans-serif;
}

.feature-item .feature-content p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    font-family: 'Lexend', sans-serif;
}

.gallery-section {
    padding: 80px 0;
    background: #000000;
}

.gallery {
    --size: 100px;
    display: grid;
    grid-template-columns: repeat(6, var(--size));
    grid-auto-rows: var(--size);
    margin-bottom: var(--size);
    place-items: start center;
    gap: 5px;
}

.gallery:has(:hover) img:not(:hover),
.gallery:has(:focus) img:not(:focus) {
    filter: brightness(0.5) contrast(0.5);
}

.gallery img {
    object-fit: cover;
    width: calc(var(--size) * 2);
    height: calc(var(--size) * 2);
    clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z");
    transition: clip-path 0.25s, filter 0.75s;
    grid-column: auto / span 2;
    border-radius: 5px;
}

.gallery img:nth-child(5n - 1) { 
    grid-column: 2 / span 2 
}

.gallery img:hover,
.gallery img:focus {
    clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z");
    z-index: 1;
    transition: clip-path 0.25s, filter 0.25s;
}

.gallery img:focus {
    outline: 1px dashed black;
    outline-offset: -5px;
}

.fdas-invest-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.fdas-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-color: rgba(172, 56, 56, 0.2);
    transform: translateX(10px);
}

.benefit-icon {
    font-size: 2rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.benefit-text {
    color: white;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
}

/* Mobile responsive for gallery */
@media (max-width: 767px) {
    .gallery-section {
        padding: 40px 0;
    }
    
    /* Hide gallery on mobile, show product visual instead */
    .gallery {
        display: none;
    }
    
    .mobile-product-visual {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        margin: 0 auto 40px auto;
        
        /* Use FDAS-related image */
        background-image: url(https://cdn.pixabay.com/photo/2023/09/25/17/12/fire-alarm-8275669_1280.jpg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: 8px solid transparent;
        border-radius: 15px;
        transition: filter 0.5s ease-in-out, border-image 0.5s ease-in-out;
    }
    
    .mobile-product-visual:hover {
        /* Apply the Gradient Border on Hover */
        border-image: linear-gradient(90deg, #AC3838 0%, #671C68 50%, #7B54B1 100%) 1;
    }
}

/* Hide mobile product visual on desktop */
.mobile-product-visual {
    display: none;
}

/* FDAS Details Page Additional Styles */
.fire-alarm-model-section {
    padding: 80px 0;
    background: #000000;
}

.simplex-sensor-model-section {
    padding: 80px 0;
    background: #000000;
}

.model-container {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.model-viewer-fdas {
    width: 100%;
    height: 100%;
    background: #000;
}

.fdas-footer {
    background-color: #090909;
    padding: 0px 30px;
}

.fdas-copyright {
    color: #ffffff;
    font-family: 'Lexend', sans-serif;
}

.brand-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-left: 1rem;
}

.navbar-toggler-custom {
    margin-right: 1rem;
}

.CompanyInfo-logo {
    width: 17.1875rem;
    height: 6.25rem;
}

/* FDAS Investment Carousel Styles */
.fdas-investment-carousel {
    padding: 80px 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.fdas-investment-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.05), rgba(103, 28, 104, 0.05), rgba(123, 84, 177, 0.05));
    z-index: 1;
}

.carousel-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 2;
    margin-bottom: 3rem;
}

.carousel-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-container {
    position: relative;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    transform: translateX(100%);
}

.carousel-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.carousel-content {
    display: flex;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
    border-radius: 20px;
    overflow: hidden;
}

.carousel-image {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    display: none;
}

.carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.carousel-slide:hover .carousel-image img {
    transform: scale(1.05);
}

.carousel-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 6rem 3rem 3rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
    position: relative;
    z-index: 2;
}

.carousel-text h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.carousel-text p {
    font-family: 'Lexend', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.carousel-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 100;
    pointer-events: none;
}

.carousel-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(172, 56, 56, 0.8), rgba(123, 84, 177, 0.8));
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    margin: 0 0.5rem;
}

.carousel-btn:hover {
    background: linear-gradient(135deg, rgba(172, 56, 56, 1), rgba(123, 84, 177, 1));
    transform: scale(1.1);
}

.carousel-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 100;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
    transform: scale(1.2);
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .fdas-investment-carousel {
        padding: 40px 0;
    }
    
    .carousel-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    
    .carousel-container {
        height: 400px;
    }
    
    .carousel-content {
        flex-direction: column;
        position: relative;
    }
    
    .carousel-image {
        height: 100%;
        position: relative;
    }
    
    .carousel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .carousel-overlay {
        display: block;
        background: rgba(0, 0, 0, 0.8);
    }
    
    .carousel-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 4rem);
        padding: 2rem;
        background: transparent;
        text-align: center;
    }
    
    .carousel-text h3 {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.9rem;
        margin-bottom: 0;
        padding: 0 3rem;
        text-align: center;
    }
    
    .carousel-controls {
        padding: 0 1rem;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        border: none;
        background: transparent;
        color: white;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        backdrop-filter: none;
        border-radius: 0;
    }
    
    .carousel-btn:hover {
        background: transparent;
        transform: scale(1.1);
        color: rgba(255, 255, 255, 0.9);
    }
    
    .carousel-indicators {
        display: none;
    }
    
    .fdas-indicator {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        height: 350px;
    }
    
    .carousel-text {
        padding: 1.5rem;
    }
    
    .carousel-text h3 {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-text p {
        font-size: 0.8rem;
        margin-bottom: 0;
    }
}


/* ========================================================================= */
/* PC SERVICES PAGE STYLES */
/* ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');
/* PC Services Root Variables */

:root {
    --primary-gradient: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
    --dark-bg: #090909;
    --card-bg: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


/* PC Services Hero Section */
.pcservices-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    position: relative;
    overflow: hidden;
}
.pcservices-hero img{
    filter: brightness(30%);
}

.pcservices-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(248, 88, 88, 0.1), transparent);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.pcservices-hero::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(91, 30, 177, 0.1), transparent);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(30px); }
}

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


.pcservices-hero-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: var(--primary-gradient);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pcservices-hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #cccccc;
    margin-bottom: 2rem;
    font-weight: 300;
}

.pcservices-hero-description {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.pcservices-cta-btn {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(90deg, #ef5ef1, #5b1eb1);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}
@media (min-width: 375px) and (max-width:430px){
    .pcservices-cta-btn {
        padding: 0.5rem 1.25rem;
        top: 10%;
        margin-bottom: 20px;
    }
    .pcservices-hero-description{
        font-size: .9rem;
    }
}

.pcservices-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(248, 88, 88, 0.3);
    color: white;
    text-decoration: none;
}

/* PC Services Main Section */
.pcservices-main {
    padding: 80px 0;
    background: #000000;
}

.pcservices-header {
    text-align: center;
    margin-bottom: 60px;
    padding-top: 3rem;

}

.pcservices-header h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: var(--primary-gradient);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pcservices-header p {
    font-size: 1.1rem;
    color: #999999;
    max-width: 600px;
    margin: 0 auto;
}

/* Service Cards Grid */
.pcservices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    background: rgba(248, 88, 88, 0.1);
    border-color: rgba(248, 88, 88, 0.3);
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(248, 88, 88, 0.2);
    cursor: pointer;
}

.service-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: white;
}

.service-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ffffff;
}

.service-card p {
    color: #cccccc;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.service-features li {
    color: #999999;
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.9rem;
}

.service-features li::before {
    content: '';
    position: absolute;
    left: 0;
    color: #ef5ef1;
    font-weight: bold;
}


/* PC Services Why Choose Us Section */
.pcservices-why {
    background: linear-gradient(135deg, rgba(9, 9, 9, 0.5), rgba(10, 10, 30, 0.5));
    padding: 80px 0;
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.pcservices-why h2 {
    text-align: center;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 3rem;
    background: var(--primary-gradient);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.why-item {
    text-align: center;
    padding: 2rem;
}

.why-item i {
    font-size: 3rem;
    background: var(--primary-gradient);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
}

.why-item h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ffffff;
}

.why-item p {
    color: #999999;
    line-height: 1.6;
}

/* PC Services CTA Section */
.pcservices-cta-section {
    padding: 80px 0;
    text-align: center;
    background: linear-gradient(135deg, rgba(248, 88, 88, 0.05), rgba(91, 30, 177, 0.05));
    border-top: 1px solid var(--border-color);
}

.pcservices-cta-section h2 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.pcservices-cta-section p {
    font-size: 1.1rem;
    color: #999999;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pcservices-cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary-cta {
    padding: 1rem 2rem;
    background: var(--primary-gradient);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(248, 88, 88, 0.3);
    color: white;
    text-decoration: none;
}

.btn-secondary-cta {
    padding: 1rem 2rem;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid rgba(248, 88, 88, 0.5);
    cursor: pointer;
}

.btn-secondary-cta:hover {
    background: rgba(248, 88, 88, 0.1);
    border-color: rgba(248, 88, 88, 0.8);
    color: white;
    text-decoration: none;
}

/* PC Services Footer */
.pcservices-footer {
    background-color: #090909;
    padding: 50px 30px;
    color: #ffffff;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 0.8rem;
}

.footer-section a {
    color: #999999;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #f85858;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    color: #999999;
}

.social-links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(248, 88, 88, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
    color: #f85858;
}

.social-links a:hover {
    background: var(--primary-gradient);
    color: white;
}

/* PC Services Responsive Design */
@media (max-width: 768px) {
    .pcservices-hero {
        min-height: 60vh;
        padding-top: 80px;
    }

    .pcservices-hero-title {
        font-size: 2rem;
    }

    .pcservices-grid {
        grid-template-columns: 1fr;
    }

    .pcservices-cta-buttons {
        flex-direction: column;
    }

    .btn-primary-cta,
    .btn-secondary-cta {
        width: 100%;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .pcservices-hero {
        padding-top: 60px;
        min-height: 50vh;
    }

    .pcservices-hero-title {
        font-size: 1.5rem;
    }

    .pcservices-hero-subtitle {
        font-size: 1rem;
    }

    .pcservices-main,
    .pcservices-why,
    .pcservices-cta-section {
        padding: 40px 0;
    }

    .service-card {
        padding: 1.5rem;
    }
}
/* --- Pink Hover Shadow for CCTV Lineup Cards --- */
.cctv-lineup-section .card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 32px rgba(248, 88, 180, 0.28), 0 2px 12px rgba(0,0,0,0.12) !important;
    border: 1.5px solid #ef5ef1 ;
}

.footer-logo-img {
    width: 17.1875rem;
    height: 6.25rem;
}
.footer-copyright {
    color: #ffffff !important;
    font-family: 'Lexend', sans-serif !important;
}
@media (max-width: 1024px) {
    .security-section .row.mt-4 > .col-md-4 {
        width: 100%;
        max-width: 600px;
        margin: 0 auto 1.5rem auto;
        display: block;
        float: none;
    }
    .cctv-clickable-card {
        min-height: 0;
        margin-bottom: 0.5rem;
    }
    .cctv-detail-box {
        margin-bottom: 1.5rem;
    }
}
/* --- CCTV Clickable Card & Detail Box Styles --- */
.cctv-clickable-card {
    padding-bottom: 40px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    padding: 1.2rem 1rem;
    margin-bottom: 0.5rem;
    transition: box-shadow 0.2s, background 0.2s;
    
}
.cctv-clickable-card:hover {
    background: #2d2d4d;
    box-shadow: 0 6px 18px rgba(0,0,0,0.13);
}
/* Hide detail box by default, show on hover of card */
.cctv-detail-box {
    background: black;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    color: #e6e6e6;
    font-size: 0.98rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(.4,0,.2,1), max-height 0.45s cubic-bezier(.4,0,.2,1);
}
.cctv-clickable-card:hover + .cctv-detail-box,
.cctv-clickable-card:focus + .cctv-detail-box {
    opacity: 1;
    max-height: 400px;
    pointer-events: auto;
}
.cctv-detail-box ul {
    margin: 0;
    padding-left: 1.2rem;
}
.cctv-detail-box li {
    margin-bottom: 0.4em;
}
.cctv-icon-card{
    margin-top:10px;
}
/* --- Custom CCTV Card Styles --- */
.cctv-lineup-section .card {
    background: #181828;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 0;
}
.cctv-lineup-section .card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}
.cctv-lineup-section .card-body {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 1.8rem;
}
.cctv-lineup-section .card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}
.cctv-lineup-section ul {
    font-family: 'Lexend', sans-serif;
    font-size: 0.98rem;
    color: #e6e6e6;
}
.cctv-lineup-section .badge {
    font-size: 0.95rem;
    margin-top: 0.5rem;
    padding: 0.5em 1em;
    border-radius: 999px;
}
.cctv-mock-img {
    height: 180px;
    background: #343a40;
    border-radius: 18px 18px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
}
.cctv-mock-img-fit {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px 18px 0 0;
    display: block;
}
.col-md-4{
  padding-top: 20px;
  justify-content: space-between;
}
.col-md-4 h5{
    color: #CB20F5;
    padding-top: 50px;
    font-size: 1.9rem;
}
.col-md-4 p{
    color: white;
}


@media (max-width: 768px) {
    .cctv-lineup-section .card {
        margin-bottom: 1.5rem;
    }
    .cctv-mock-img {
        height: 120px;
        font-size: 1rem;
    }
}
/* --- CCTV Lineup Card Styles --- */
.cctv-lineup-section .card {
    background: #181828;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.cctv-lineup-section .card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.cctv-mock-img {
    height: 180px;
    background: #343a40;
    border-radius: 18px 18px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
}
.cctv-lineup-section .card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}
.cctv-lineup-section ul {
    font-family: 'Lexend', sans-serif;
    font-size: 0.98rem;
    color: #e6e6e6;
}
.cctv-lineup-section .badge {
    font-size: 0.95rem;
    margin-top: 0.5rem;
    padding: 0.5em 1em;
    border-radius: 999px;
}
@media (max-width: 768px) {
    .cctv-lineup-section .card {
        margin-bottom: 1.5rem;
    }
    .cctv-mock-img {
        height: 120px;
        font-size: 1rem;
    }
}
/* Custom CSS for dreampcbuildanditsolutionsinc */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
 body, html {
        }


/* CCTV Services Page Styles */
.cctv-promo {
    background: linear-gradient(180deg, #040404 0%, #0b0b0b 60%);
    color: #ffffff;
    padding: 6rem 0 3rem;
    text-align: center;
}
.expand-icon {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    }

.cctv-text-overlay h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #ffffff;
}

.cctv-text-overlay .lead {
    font-family: 'Lexend', sans-serif;
    font-size: 1.15rem;
    color: rgba(255,255,255,0.85);
}

.glow-gradient-text {
    background: linear-gradient(90deg,#f85858,#ef5ef1,#5b1eb1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.security-section .section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}
.security-section .col-md-4{
    font-family: 'Space Grotesk', sans-serif;
    padding-top: 100px;
}


.security-section .section-text {
    font-family: 'Lexend', sans-serif;
    font-size: 1rem;
    color: #dcdcdc;
    max-width: 900px;
    margin: 0 auto;
}

.services-list { }
.services-list h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; }
.services-list ul { color: #e6e6e6; font-family: 'Lexend', sans-serif; font-size: 0.98rem; }

.product-highlights .card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); }

.contact-cta { background: linear-gradient(90deg, rgba(88,88,88,0.06), rgba(80,20,120,0.04)); }

.martin-section .gallery { gap: 1rem; }

/* CCTV Specs Table */
.cctv-specs { margin-top: 1.5rem; }
.specs-table { width: 100%; border-collapse: collapse; font-family: 'Lexend', sans-serif; color: #e6e6e6; }
.specs-table th, .specs-table td { padding: 0.75rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.04); text-align: left; }
.specs-table th { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; color: #fff; }
.specs-table td { font-size: 0.95rem; }
.spec-badge { display:inline-block; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,0.03); color:#fff; font-family:'Space Grotesk',sans-serif; font-size:0.85rem; }

@media (max-width: 768px) {
    .cctv-text-overlay h1 { font-size: 2rem; }
    .cctv-text-overlay .lead { font-size: 1rem; }
}


.hero-buttons {
    display: flex;
    gap: 1.5rem;
    }


/* --- CCTV Services Page Custom Styles --- */
.cctv-navbar-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-left: 1rem;
}
.cctv-navbar-toggler {
    margin-right: 1rem;
}
.cctv-hero-img {
    height: 600px;
    object-fit: cover;
    width: 100%;
    display: block;
    
}
.cctv-hero-content{
    top: 50%; 
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 90%;
    max-width: 800px;
}
@media (max-width: 768px) {
    .cctv-hero-img {
        height: 220px;
    }
    .cctv-hero-section .container.position-absolute {
        position: static !important;
        transform: none !important;
        padding: 1.5rem 0.5rem;
    }
    .cctv-hero-section h1 {
        font-size: 1.5rem !important;
    }
    .cctv-hero-section p {
        font-size: 1rem !important;
        .cctv-hero-img {
        height: 50vh;
        min-height: 400px;
    }

    
    }
    @media (min-width: 360px) and (max-width: 765px) {
        .cctv-hero-content .lead {
        font-size: 0.5rem;
        margin-bottom: 1.5rem !important;
    }
    .cctv-hero-content h1.section-title {
        font-size: clamp(2.2rem, 7vw, 2.8rem);
        line-height: 1.2;
    }
    .about-v2-btn-primary{
        padding: 0.55rem 1.3rem !important;
        font-size: 0.7rem !important;
        margin-bottom: 1rem;
    }

    }
.cctv-footer {
    background-color: #090909 !important;
    padding: 0px 30px !important;
}
.cctv-footer-logo {
    width: 17.1875rem;
    height: 6.25rem;
}
.cctv-footer-copyright {
    color: #ffffff !important;
    font-family: 'Lexend', sans-serif !important;
}

.cctv-hero-section img{
    filter: brightness(30%);
}
.cctv-hero-section{
    font-family: 'Space Grotesk', sans-serif;
}
.cctv-services-section-title{
    z-index: 2;
    max-width: 900px;
    padding: 0 20px;
    margin-bottom: 100px;
}
}
.cctv-card-img img{
  width: 100%;
  height: auto;
  object-fit: cover;
  display:block;
  border-radius: 18px 18px 0 0;
}
/*NETWORK INFRASTRUCTURE STYLES*/

/* Network Infrastructure Hero Section */
.network-infrastructure-hero {
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0e27 0%, #1a237e 50%, #283593 100%);
    margin-top: 70px;
}

.network-infrastructure-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 25%, rgba(0, 212, 255, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 75% 75%, rgba(138, 43, 226, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    animation: networkPulse 10s ease-in-out infinite;
}

@keyframes networkPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.network-infrastructure-hero-content {
    text-align: center;
    z-index: 2;
    position: relative;
    max-width: 800px;
    padding: 2rem;
    color: #ffffff;
}

.network-infrastructure-hero-title {
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 50%, #0066cc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
}

.network-infrastructure-hero-subtitle {
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: #a8c7ff;
    margin-bottom: 2rem;
    font-weight: 300;
    letter-spacing: 2px;
}

.network-infrastructure-hero-description {
    font-size: 1.2rem;
    color: #e0e7ff;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.network-infrastructure-cta-btn {
    display: inline-block;
    padding: 1rem 3rem;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s ease;
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
    border: 2px solid rgba(0, 212, 255, 0.3);
}

.network-infrastructure-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 212, 255, 0.4);
    background: linear-gradient(135deg, #00e5ff 0%, #00aaff 100%);
    border-color: rgba(0, 212, 255, 0.5);
}

/* Network Infrastructure Main Section */
.network-infrastructure-main {
    padding: 6rem 0;
    background: linear-gradient(180deg, #0a0e27 0%, #1a1a2e 100%);
    position: relative;
}

.network-infrastructure-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #00d4ff 50%, transparent 100%);
}

.network-infrastructure-header {
    text-align: center;
    margin-bottom: 4rem;
}

.network-infrastructure-header h2 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 50%, #0066cc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.network-infrastructure-header p {
    font-size: 1.3rem;
    color: #a8c7ff;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Network Infrastructure Grid */
.network-infrastructure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-bottom: 4rem;
}

.network-service-card {
    background: linear-gradient(135deg, rgba(26, 35, 126, 0.9) 0%, rgba(40, 53, 147, 0.8) 100%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 25px;
    transition: all 0.5s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

.network-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 212, 255, 0.1) 50%, transparent 100%);
    transition: left 0.6s ease;
}

.network-service-card:hover::before {
    left: 100%;
}

.network-service-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(0, 212, 255, 0.5);
    box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
}

.network-service-card .service-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.network-service-card .service-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    animation: iconGlow 3s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

.network-service-card  {
    font-size: 2rem;
    color: #ffffff;
    position: relative;
    z-index: 1;
    justify-content: space-between;
}

.network-service-card h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.network-service-card p {
    font-size: 1.1rem;
    color: #e0e7ff;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.service-features {
    list-style: none;
    padding: 0;
}

.service-features li {
    padding: 0.8rem 0;
    color: #c8d6ff;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.service-features li:hover {
    color: #00d4ff;
    padding-left: 0.5rem;
}

.service-features li i {
    color: #00d4ff;
    margin-right: 1rem;
    font-size: 0.9rem;
}

/* Equipment Showcase */
.equipment-showcase {
    padding: 6rem 0;
    background: linear-gradient(180deg, #1a1a2e 0%, #0a0e27 100%);
}

.equipment-header {
    text-align: center;
    margin-bottom: 4rem;
}

.equipment-header h2 {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.equipment-header p {
    font-size: 1.2rem;
    color: #a8c7ff;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.equipment-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.equipment-item {
    background: linear-gradient(135deg, rgba(26, 35, 126, 0.8) 0%, rgba(40, 53, 147, 0.6) 100%);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.equipment-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.equipment-item:hover::before {
    opacity: 1;
}

.equipment-item:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 15px 30px rgba(0, 212, 255, 0.15);
}

.equipment-icon-large {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    position: relative;
    overflow: hidden;
}

.equipment-icon-large i {
    font-size: 2.5rem;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.equipment-item h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ffffff;
}

.equipment-item p {
    font-size: 1rem;
    color: #e0e7ff;
    line-height: 1.6;
}

/* Network CTA Section */
.network-cta {
    padding: 6rem 0;
    background: linear-gradient(135deg, #0a0e27 0%, #1a237e 50%, #283593 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.network-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.08) 0%, transparent 50%);
    animation: ctaGlow 8s ease-in-out infinite;
}

@keyframes ctaGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.network-cta h2 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.network-cta p {
    font-size: 1.3rem;
    color: #a8c7ff;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.network-cta-btn {
    display: inline-block;
    padding: 1.2rem 3.5rem;
    background: linear-gradient(135deg, #00d4ff 0%, #0099ff 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.2rem;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
    border: 2px solid rgba(0, 212, 255, 0.3);
    position: relative;
    z-index: 1;
}

.network-cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.4);
    background: linear-gradient(135deg, #00e5ff 0%, #00aaff 100%);
    border-color: rgba(0, 212, 255, 0.5);
}



.network-services-section {
  max-width: 1200px;
  margin: auto;
  padding: 80px 20px;
}

.network-services-section h1 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 2.6rem;
  color: var(--pink);
}

.network-services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 35px;
}

/* CARD */
.network-service-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 79, 163, 0.15);
  transition: all 0.35s ease;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.network-service-card:hover {
  transform: translateY(-10px);
  border-color: var(--pink);
  box-shadow: 0 25px 55px rgba(255, 79, 163, 0.25);
}

/* IMAGE CONTAINER */
.network-service-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.network-service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 👈 auto-fit image */
  object-position: center; /* center cropping */
  display: block;
}

/* CONTENT */
.network-service-content {
  padding: 28px;
}

.network-service-content h2 {
  font-size: 1.35rem;
  margin-bottom: 14px;
  color: var(--pink);
}

.network-service-content p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted-text);
}
.network-services-why{
    background: linear-gradient(135deg, rgba(9, 9, 9, 0.5), rgba(10, 10, 30, 0.5));
    padding: 80px 0;
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.network-services-why h2 {
    text-align: center;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 3rem;
    background: var(--primary-gradient);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.network-service-img{
    height: 50%;
    width: 50%;
}

/*FDAS SERVICES STYLES*/
.fdas-services-hero-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3),0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.1);
    color: #FFF8F0;
    -webkit-background-clip: text;
    background-clip: text;
}
.fdas-services-hero-title h1{
    animation: FireGlowing 3s ease-in-out infinite;
}
.fdas-services-hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: #FFF8F0;
    margin-bottom: 2rem;
    font-weight: 300;
    text-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
    border-radius: 3px;
    backdrop-filter: blur(2px);
}
.fdas-services-hero-description {
    font-size: 1.2rem;
    color: #E8E8E8;
    margin-bottom: 2.5rem;
    line-height: 1.6;
    text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.3);
}
.fdas-services-cta-btn {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(135deg,#FF5722 0%,#D84315 100%);
    box-shadow:  0 4px 15px rgba(216, 67, 21, 0.4),0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}
.fdas-services-cta-btn:hover{
    background: linear-gradient(135deg,#FF6F00 0%,#FF5722 100%);
    box-shadow: 0 6px 20px rgba(255, 87, 34, 0.5),0 3px 10px rgba(0, 0, 0, 0.3),inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}
@keyframes FireGlowing {
  0%, 100% {
    text-shadow: 
      0 0 20px rgba(255, 87, 34, 0.3),
      0 2px 4px rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow: 
      0 0 30px rgba(255, 87, 34, 0.5),
      0 2px 4px rgba(0, 0, 0, 0.5);
  }
}


/* FDAS RESPONSIVENESS DESIGN*/
@media (max-width:576px){
    .fdas-services-hero-title{
        font-size: 1.5rem;
    }
    .fdas-services-hero-subtitle{
        font-size: 1rem;
    }
    .fdas-services-hero-description{
        font-size: .9rem;
    }
    .fdas-services-cta-btn{
        padding: 0.5rem 1.25rem;
        top: 10%;
        margin-bottom: 20px;
    }
}
@media (max-width: 820px){
    .fdas-image-container{
        display: none;
    }
}

/* FDAS Main Content Styles */
.fdas-main-content {
    padding: 80px 0;
    background-color: black;
}

.fdas-section {
    padding: 60px 0;
    border-bottom: 1px;
}

.fdas-section:last-child {
    border-bottom: none;
}

.fdas-image-container {
    position: relative;
    overflow: hidden;
    
}

.fdas-image-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.fdas-image-container:hover img {
    transform: scale(1.05);
}

.fdas-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.9) 0%, rgba(255, 0, 0, 0.8) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 20px;
}

.fdas-overlay-text {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.fdas-online-button {
    background-color: #ffc107;
    color: #212529;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 15px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fdas-online-button:hover {
    background-color: #ffb300;
    transform: translateY(-2px);
}

.fdas-content {
    padding: 20px;
}

.fdas-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 30px;
    line-height: 1.2;

}

.fdas-service-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: white;
    margin-bottom: 20px;
}

/* FDAS Responsive adjustments */
@media (max-width: 768px) {
    .fdas-main-content {
        padding: 40px 0;
    }

    .fdas-section {
        padding: 40px 0;
    }

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

    .fdas-service-description {
        font-size: 1rem;
    }

    .fdas-overlay-text {
        font-size: 1.2rem;
    }
 }

 .fdas-slider-section {
     background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%);
     padding: 60px 0 80px;
 }

 .fdas-slider-header {
     margin-bottom: 28px;
 }

 .fdas-slider {
     position: relative;
 }

 .fdas-slider-viewport {
     overflow: hidden;
     border-radius: 16px;
     background: rgba(10, 10, 10, 0.6);
     border: 1px solid rgba(255, 87, 34, 0.18);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
 }

 .fdas-slider-track {
     display: flex;
     will-change: transform;
     transition: transform 450ms ease;
 }

 .fdas-slide {
     flex: 0 0 100%;
     position: relative;
     height: clamp(260px, 45vw, 520px);
    overflow: hidden;
 }

 .fdas-slide img {
     width: 100%;
     height: 100%;
     object-fit: fill;
     display: block;
 }

 .fdas-slide-caption {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     padding: 14px 16px;
     color: #FFF8F0;
     font-family: 'Lexend', sans-serif;
     font-size: 0.95rem;
     background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 70%, rgba(0,0,0,0.9) 100%);
     text-shadow: 0 1px 2px rgba(0,0,0,0.5);
 }

 .fdas-slider-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 44px;
     height: 44px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: rgba(10, 10, 10, 0.55);
     backdrop-filter: blur(8px);
     color: #FFF8F0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
 }

 .fdas-slider-btn:hover {
     background: rgba(255, 87, 34, 0.18);
     border-color: rgba(255, 87, 34, 0.4);
     box-shadow: 0 8px 20px rgba(255, 87, 34, 0.15);
 }

 .fdas-slider-btn:active {
     transform: translateY(-50%) scale(0.98);
 }

 .fdas-slider-btn-prev {
     left: 14px;
 }

 .fdas-slider-btn-next {
     right: 14px;
 }

 .fdas-slider-dots {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-top: 14px;
 }

 .fdas-slider-dot {
     width: 10px;
     height: 10px;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.22);
     background: rgba(255, 255, 255, 0.12);
     padding: 0;
     transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
 }

 .fdas-slider-dot.is-active {
     background: linear-gradient(135deg,#FF5722 0%,#D84315 100%);
     border-color: rgba(255, 87, 34, 0.6);
     transform: scale(1.15);
 }

 @media (max-width: 576px) {
     .fdas-slider-section {
         padding: 40px 0 60px;
     }

     .fdas-slider-btn {
         width: 40px;
         height: 40px;
     }
 }

        .access-security-main {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.92) 70%, #090909 100%);
            padding: 3rem 0;
        }

        .access-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .access-security-panel {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
            padding: 3rem;
        }

        .access-security-pill {
            background: rgba(14, 165, 233, 0.12);
            border: 1px solid rgba(14, 165, 233, 0.35);
            color: #cbeeff;
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            margin-bottom: 1.5rem;
        }

        @media (min-width: 350px) and (max-width: 460px){
            .access-security-pill {
                font-size: 0.8rem;
            }
            .access-security-main h2{
             font-size: 1rem;
            }
            .access-security-main p{
                font-size: 0.8rem;
            }
            .access-card-description{
                font-size: 0.8rem;
            }
            .access-card-title{
                font-size: 1rem;
            }
            .access-security-card {
                padding: 1rem;
                border-radius: 12px;
            }
            .access-security-card h5{
                font-size: 1rem;
            }
            .access-security-card p{
                font-size:0.8rem;
            }
        }

        .access-security-pill i {
            margin-right: 0.5rem;
        }

        .access-control-slider {
            margin-top: 3rem;
            position: relative;
        }

        @media (max-width: 576px) {
            .access-security-panel {
                padding: 1.25rem;
            }

            .access-control-slider {
                margin-top: 1.5rem;
            }

            .access-slider-item {
                padding: 0 0.25rem;
            }

            .access-card-image {
                height: 100%;
            }
        }
        @media (max-width: 380px) {
    .access-security-panel {
        padding: 1.25rem 0.75rem;
    }
    
    .access-security-main h2 {
        font-size: 1.35rem;
    }
}

        .access-slider-container {
            position: relative;
            overflow: hidden;
        }

        .access-slider-track {
            display: flex;
            transition: transform 0.4s ease;
        }

        .access-slider-item {
            flex: 0 0 100%;
            min-width: 100%;
            padding: 0 0.5rem;
            box-sizing: border-box;
        }

        @media (min-width: 768px) {
            .access-slider-item {
                flex-basis: 50%;
                min-width: 50%;
            }
        }

        @media (min-width: 1200px) {
            .access-slider-item {
                flex-basis: 33.333%;
                min-width: 33.333%;
            }
        }

        .access-security-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 1.5rem;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        

        .access-security-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(14, 165, 233, 0.4);
            transform: translateY(-4px);
        }

        .access-card-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 1rem;
        }

        .access-card-title {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
        }

        .access-card-description {
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.6;
        }

        .access-slider-controls {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
        }

        .access-slider-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(14, 165, 233, 0.12);
            border: 1px solid rgba(14, 165, 233, 0.35);
            color: #cbeeff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .access-slider-btn:hover {
            background: rgba(14, 165, 233, 0.25);
            border-color: rgba(14, 165, 233, 0.6);
        }

        .access-slider-dots {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }

        .access-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .access-slider-dots .dot-control {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .access-dot.active {
            background: rgba(14, 165, 233, 0.8);
            width: 30px;
            border-radius: 5px;
        }

        .access-slider-dots .dot-control.active {
            background: rgba(14, 165, 233, 0.8);
            width: 30px;
            border-radius: 5px;
        }
/*LED WALL STYLES*/
@keyframes pulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        @keyframes flicker {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.8; }
        }

        .led-services-services {
            padding: 6rem 5%;
            background: #0f0f0f;
        }

        .led-services-section-header {
            text-align: center;
            margin-bottom: 4rem;
        }
        .led-services-section-header h2 {
           font-size: 3rem;
        }

       

        .led-services-section-header p {
            font-size: 1.1rem;
            color: #b0b0b0;
        }

        .led-services-services-grid {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .led-services-service-card {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(123, 47, 247, 0.05));
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 20px;
            padding: 2.5rem;
            transition: all 0.3s;
        }

        .led-services-service-card:hover {
            transform: translateY(-10px);
            border-color: #00d4ff;
            box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
        }

        .led-services-service-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #00d4ff, #7b2ff7);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin-bottom: 1.5rem;
        }

        .led-services-service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .led-services-service-card p {
            color: #b0b0b0;
            line-height: 1.6;
        }

        .led-services-features {
            padding: 6rem 5%;
            background: #0a0a0a;
            padding-bottom: 13rem;
        }

        .led-services-features-grid {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 3rem;
        }

        .led-services-feature-item {
            display: flex;
            gap: 1.5rem;
        }

        .led-services-feature-number {
            font-family: 'Space Grotesk', sans-serif;
            width: 50px;
            height: 50px;
            color: white;
            background: linear-gradient(135deg, #AC3838, #671C68, #7B54B1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .led-services-feature-content h4 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: white;
        }

        .led-services-feature-content p {
            color: #b0b0b0;
            line-height: 1.6;
        }

        .led-services-cta-section {
            padding: 6rem 5%;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(123, 47, 247, 0.1));
            text-align: center;
        }

        .led-services-cta-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .led-services-cta-content h2 {
            font-size: 3rem;
            margin-bottom: 1.5rem;
        }

        .led-services-cta-content p {
            font-size: 1.2rem;
            color: #b0b0b0;
            margin-bottom: 2rem;
        }

       

        @media (max-width: 968px) {
            .led-services-hero-content {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .led-services-hero-text h1 {
                font-size: 2.5rem;
            }

            .led-services-hero-buttons {
                justify-content: center;
            }

            .led-services-features-grid {
                grid-template-columns: 1fr;
            }

            .led-services-nav-links {
                display: none;
            }
        }

/* GADGETS AND OFFICE STYLES*/
        .gadgets-services-section{
            padding: 60px 20px; 
            max-width: 1400px;
            margin: auto;
        }
        .gadgets-services-hero { 
            text-align: center; 
            margin-bottom: 60px; 
        }
        .gadgets-services-hero img { 
            max-width: 100%; 
            border-radius: 20px; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.5); 
        }
        .gadgets-services-grid { display: grid;
             grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
             gap: 30px; 
            }
        .gadgets-services-card { background: #1e1e1e;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 8px 16px rgba(0,0,0,0.4);
            transition: transform 0.3s, box-shadow 0.3s; 
            }
        .gadgets-services-card:hover { 
             transform: translateY(-5px)scale(1.02);
             box-shadow: 0 10px 40px rgba(0,0,0,0.3); 
             border-color:rgba(255, 255, 255, 0.3);
             border-width: 2px;
            }
        .gadgets-services-card img { 
              width: 100%;
              height: 250px;
              object-fit: cover; 
            }
        .gadgets-services-card h3 { 
            color: #00b09b;
            padding: 20px 20px 10px;
            font-size: 1.6rem; 
        }
        .gadgets-services-card p { 
             padding: 20px 20px 20px;
             line-height: 1.6;
             color: white; 
            }
        .gadgets-services-header{
            padding: 100px 20px; 
            text-align: center;
            font-size: 2.5rem;
        }

        /* LED WALL LED WALL LED WALL LED WALL LED WALL */


.led-area-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.led-wrapper-main {
    position: relative;
    width: 100%;
    height: 830px;
    overflow: hidden;
    margin-bottom: 0%;
    margin-top: -40px;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 85%,
        transparent 100%
    );
}

.led-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.led-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        360deg, 
        rgba(255, 23, 68, 0) 30%, 
        rgba(255, 23, 68, 0.5) 60%, 
        rgba(187, 134, 252, 1) 100%
    );
    z-index: 1;
    pointer-events: none; /* Allow clicks to pass through */
}

.led-header {
    position: absolute;
    justify-content: center;
    margin-top: 480px;
    text-align: center;
    padding: 40px 60px;
    width: 100%;
}

.led-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}



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

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 0.6;
            }
            50% {
                opacity: 1;
            }
        }

        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes scanline {
            0% {
                transform: translateY(-100%);
            }
            100% {
                transform: translateY(100%);
            }
        }

        .led-area2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            margin: 80px auto;
            padding: 0 20px;
            position: relative;
        }

        .led-header2 {
            text-align: center;
            margin-bottom: 40px;
            animation: fadeInUp 0.8s ease-out forwards;
            position: relative;
            z-index: 2;
        }

        .led-title2 {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 30px;
            letter-spacing: -1px;
        }

        .led-title2 .gradient-text {
            background: linear-gradient(
                90deg,
                #FF1744,
                #FF6B35,
                #F7931E,
                #FDC830,
                #37D5D6,
                #6C63FF,
                #BB86FC
            );
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 3s ease infinite;
            display: inline-block;
        }

        .word-first{
            font-family: 'Space Grotesk', sans-serif;
            font-size: 68px;
        }

        .led-title2 {
            color: #FF1744;
            animation: fadeInUp 0.6s ease-out 0.2s backwards;
        }

        .led-title2 .word-experience {
            animation: fadeInUp 0.6s ease-out 0.4s backwards;
        }

        .led-title2 .word-our {
            color: #37D5D6;
            animation: fadeInUp 0.6s ease-out 0.6s backwards;
        }

        .led-title2 .word-ledwall {
            animation: fadeInUp 0.6s ease-out 0.8s backwards;
        }

        .led-description {
            font-size: clamp(1rem, 2vw, 1.2rem);
            color: #c0c0c0;
            max-width: 800px;
            line-height: 1.8;
            animation: fadeInUp 1s ease-out 0.4s backwards;
            margin: auto;
        }

        .led-wrapper {
            position: relative;
            width: 100%;
            max-width: 1200px;
            height: 600px;
            overflow: hidden;
            border-radius: 20px;
            animation: fadeInUp 1.2s ease-out 0.6s backwards;
            box-shadow: 
                0 0 60px rgba(255, 23, 68, 0.2),
                0 0 120px rgba(187, 134, 252, 0.1);
            position: relative;
            z-index: 1;
            margin-top: 50px;
        }

        /* Glowing border effect */
        .led-wrapper::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(
                45deg,
                #FF1744,
                #BB86FC,
                #37D5D6,
                #FF1744
            );
            background-size: 400% 400%;
            border-radius: 20px;
            z-index: -1;
            animation: gradientShift 4s ease infinite;
            opacity: 0.6;
        }

        /* Scanline effect */
        .led-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(
                to right,
                transparent,
                rgba(255, 255, 255, 0.8),
                transparent
            );
            animation: scanline 3s linear infinite;
            z-index: 100;
        }

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

        .led-carousel-track {
            display: flex;
            height: 100%;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .led-carousel-slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .led-carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
        }

        /* Gradient overlay on images */
        .led-carousel-slide::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 30%,
                rgba(255, 23, 68, 0.15) 60%,
                rgba(187, 134, 252, 0.25) 100%
            );
            pointer-events: none;
        }

        .led-carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 20;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 24px;
        }

        .led-carousel-nav:hover {
            background: rgba(255, 23, 68, 0.8);
            border-color: #FF1744;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 0 20px rgba(255, 23, 68, 0.6);
        }

        .led-carousel-nav.prev {
            left: 20px;
        }

        .led-carousel-nav.next {
            right: 20px;
        }

        .led-carousel-indicators {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 12px;
            z-index: 20;
        }

        .led-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(5px);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .led-indicator.active {
            background: #FF1744;
            width: 40px;
            border-radius: 6px;
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 15px rgba(255, 23, 68, 0.8);
        }

        .led-indicator:hover:not(.active) {
            background: rgba(255, 255, 255, 0.6);
            transform: scale(1.2);
        }

        /* Features section */
        .led-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
    width: 100%;
    max-width: 1200px;
    animation: fadeInUp 1.4s ease-out 0.8s backwards;
}

.led-feature-card {
    background: linear-gradient(
        135deg,
        rgba(255, 23, 68, 0.05),
        rgba(187, 134, 252, 0.05)
    );
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.led-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.led-feature-card:hover::before {
    left: 100%;
}

/* Card 1 - Gold/Yellow Theme */
.led-feature-card:nth-child(1) {
    border: 2px solid rgba(255, 193, 7, 0.3);
    background: #000;
}

.led-feature-card:nth-child(1):hover {
    transform: translateY(-10px);
    border-color: #FFC107;
    box-shadow: 0 10px 40px rgba(255, 193, 7, 0.4);
}

/* Card 2 - Red Theme */
.led-feature-card:nth-child(2) {
    border: 2px solid rgba(255, 23, 68, 0.5);
    background: #000;
}

.led-feature-card:nth-child(2):hover {
    transform: translateY(-10px);
    border-color: #FF1744;
    box-shadow: 0 10px 40px rgba(255, 23, 68, 0.5);
}

/* Card 3 - Cyan/Blue Theme */
.led-feature-card:nth-child(3) {
    border: 2px solid rgba(55, 213, 214, 0.3);
    background: #000;
}

.led-feature-card:nth-child(3):hover {
    transform: translateY(-10px);
    border-color: #37D5D6;
    box-shadow: 0 10px 40px rgba(55, 213, 214, 0.4);
}

.led-feature-icon {
    font-size: 40px;
    margin-bottom: 15px;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

.led-feature-title {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
}

.led-feature-description {
    color: #b0b0b0;
    line-height: 1.6;
}


/* ========================================
   BASE STYLES
   ======================================== */

.led-area-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 10px auto 50px auto;
    animation: fadeInUp 1.1s ease-out forwards;
}

.led-wrapper-main {
    position: relative;
    width: 100%;
    height: 830px;
    overflow: hidden;
    margin-bottom: 0%;
    margin-top: -40px;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 85%,
        transparent 100%
    );
}

.led-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.led-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        360deg, 
        rgba(255, 23, 68, 0) 30%, 
        rgba(255, 23, 68, 0.5) 60%, 
        rgba(187, 134, 252, 1) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.led-header {
    position: absolute;
    justify-content: center;
    margin-top: 480px;
    text-align: center;
    padding: 40px 60px;
    width: 100%;
}

.led-header h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
}

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */

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

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* ========================================
   SECTION 2 STYLES
   ======================================== */

.led-area2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 80px auto;
    padding: 0 20px;
    position: relative;
}

.led-header2 {
    text-align: center;
    margin-bottom: 40px;
    animation: fadeInUp 0.8s ease-out forwards;
    position: relative;
    z-index: 2;
}

.led-title2 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 30px;
    letter-spacing: -1px;
    color: #FF1744;
    animation: fadeInUp 0.6s ease-out 0.2s backwards;
}

.led-title2 .gradient-text {
    background: linear-gradient(
        90deg,
        #FF1744,
        #FF6B35,
        #F7931E,
        #FDC830,
        #37D5D6,
        #6C63FF,
        #BB86FC
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
    display: inline-block;
}

.word-first {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 68px;
}

.led-title2 .word-experience {
    animation: fadeInUp 0.6s ease-out 0.4s backwards;
}

.led-title2 .word-our {
    color: #37D5D6;
    animation: fadeInUp 0.6s ease-out 0.6s backwards;
}

.led-title2 .word-ledwall {
    animation: fadeInUp 0.6s ease-out 0.8s backwards;
}

.led-description {
    font-size: 24px;
    color: #c0c0c0;
    max-width: 1000px;
    line-height: 1.8;
    animation: fadeInUp 1s ease-out 0.4s backwards;
    margin: auto;
}

.led-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 600px;
    overflow: hidden;
    border-radius: 20px;
    animation: fadeInUp 1.2s ease-out 0.6s backwards;
    box-shadow: 
        0 0 60px rgba(255, 23, 68, 0.2),
        0 0 120px rgba(187, 134, 252, 0.1);
    z-index: 1;
    margin-top: 50px;
}

.led-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(
        45deg,
        #FF1744,
        #BB86FC,
        #37D5D6,
        #FF1744
    );
    background-size: 400% 400%;
    border-radius: 20px;
    z-index: -1;
    animation: gradientShift 4s ease infinite;
    opacity: 0.6;
}

.led-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    animation: scanline 3s linear infinite;
    z-index: 100;
}

/* ========================================
   CAROUSEL STYLES
   ======================================== */

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

.led-carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.led-carousel-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.led-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.led-carousel-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 30%,
        rgba(255, 23, 68, 0.15) 60%,
        rgba(187, 134, 252, 0.25) 100%
    );
    pointer-events: none;
}

.led-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 24px;
}

.led-carousel-nav:hover {
    background: rgba(255, 23, 68, 0.8);
    border-color: #FF1744;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(255, 23, 68, 0.6);
}

.led-carousel-nav.prev {
    left: 20px;
}

.led-carousel-nav.next {
    right: 20px;
}

.led-carousel-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 20;
}

.led-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.led-indicator.active {
    background: #FF1744;
    width: 40px;
    border-radius: 6px;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(255, 23, 68, 0.8);
}

.led-indicator:hover:not(.active) {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

/* ========================================
   FEATURES SECTION
   ======================================== */

.led-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
    width: 100%;
    max-width: 1200px;
    animation: fadeInUp 1.4s ease-out 0.8s backwards;
}


.led-feature-card {
    background: #000;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.led-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.led-feature-card:hover::before {
    left: 100%;
}

.led-feature-card:nth-child(1) {
    border: 2px solid rgba(255, 193, 7, 0.3);
}

.led-feature-card:nth-child(1):hover {
    transform: translateY(-10px);
    border-color: #FFC107;
    box-shadow: 0 10px 40px rgba(255, 193, 7, 0.4);
}

.led-feature-card:nth-child(2) {
    border: 2px solid rgba(255, 23, 68, 0.5);
}

.led-feature-card:nth-child(2):hover {
    transform: translateY(-10px);
    border-color: #FF1744;
    box-shadow: 0 10px 40px rgba(255, 23, 68, 0.5);
}

.led-feature-card:nth-child(3) {
    border: 2px solid rgba(55, 213, 214, 0.3);
}

.led-feature-card:nth-child(3):hover {
    transform: translateY(-10px);
    border-color: #37D5D6;
    box-shadow: 0 10px 40px rgba(55, 213, 214, 0.4);
}

.led-feature-icon svg {
            width: 50px;
            height: 50px;
            display: block;
            margin-top: 20px;
}

/* Icon specific colors */
        .led-feature-card:nth-child(1) .led-feature-icon svg {
            stroke: #FFC107;
            fill: none;
        }

        .led-feature-card:nth-child(2) .led-feature-icon svg {
            stroke: #FF1744;
            fill: none;
        }

        .led-feature-card:nth-child(3) .led-feature-icon svg {
            stroke: #37D5D6;
            fill: none;
        }

.led-feature-title {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
}

.led-feature-description {
    color: #b0b0b0;
    line-height: 1.6;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* 320px - 344px (Small phones) */
@media (min-width: 320px) and (max-width: 344px) {
    .led-wrapper-main {
        height: 350px;
        margin-top: -120px;
    }

    .led-header {
        margin-top: 200px;
        padding: 20px 15px;
    }

    .led-header h1 {
        font-size: 24px;
    }

    .word-first {
        font-size: 28px;
    }

    .led-title2 {
        font-size: 28px;
    }

    .led-description {
        font-size: 14px;
        padding: 0 10px;
    }

    .led-wrapper {
        height: 300px;
        border-radius: 12px;
        margin-top: 30px;
    }

    .led-carousel-nav {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    .led-carousel-nav.prev {
        left: 10px;
    }

    .led-carousel-nav.next {
        right: 10px;
    }

    .led-carousel-indicators {
        bottom: 15px;
        gap: 8px;
    }

    .led-indicator {
        width: 8px;
        height: 8px;
    }

    .led-indicator.active {
        width: 24px;
    }

    .led-features {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    .led-feature-card {
        padding: 20px;
    }

    .led-feature-icon {
        font-size: 32px;
    }

    .led-feature-title {
        font-size: 1.2rem;
    }

    .led-feature-description {
        font-size: 14px;
    }
}

/* 350px - 360px */
@media (min-width: 350px) and (max-width: 360px) {
    .led-wrapper-main {
        height: 250px;
        margin-top: -120px;
    }

    .led-header {
        margin-top: 220px;
        padding: 25px 20px;
    }

    .led-header h1 {
        font-size: 26px;
    }

    .word-first {
        font-size: 32px;
    }

    .led-title2 {
        font-size: 32px;
    }

    .led-description {
        font-size: 16px;
    }

    .led-wrapper {
        height: 320px;
        border-radius: 14px;
    }

    .led-carousel-nav {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .led-carousel-nav.prev {
        left: 12px;
    }

    .led-carousel-nav.next {
        right: 12px;
    }

    .led-features {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .led-feature-card {
        padding: 22px;
    }
}

/* 370px - 375px */
@media (min-width: 370px) and (max-width: 375px) {
    .led-wrapper-main {
        height: 380px;
        margin-top: -120px;
    }

    .word-first {
        font-size: 34px;
        margin-top: -35px;
    }

    .led-description {
        font-size: 16px;
    }

    .led-wrapper {
        height: 340px;
        border-radius: 15px;
    }

    .led-carousel-nav {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .led-carousel-nav.prev {
        left: 14px;
    }

    .led-carousel-nav.next {
        right: 14px;
    }

    .led-feature-card {
        margin: auto;
        width: 300px;
        height: 250px;
    }
    
    .led-feature-icon svg{
        height: 40px;
        width: 40px;
        margin-top: 0px;
    }

    .led-feature-title{
        font-size: 24px;
        margin-top: -10px;
    }

    .led-feature-description{
        font-size: 16px;
    }
}

/* 380px - 390px */
@media (min-width: 380px) and (max-width: 390px) {
    .led-wrapper-main {
        height: 400px;
        margin-top: -110px;
    }

    .led-header {
        margin-top: 250px;
        padding: 30px 25px;
    }

    .led-header h1 {
        font-size: 30px;
    }

    .word-first {
        font-size: 36px;
    }

    .led-description {
        font-size: 18px;
    }

    .led-wrapper {
        height: 350px;
    }

    .led-features {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* 400px - 412px */
@media (min-width: 400px) and (max-width: 412px) {
    .led-wrapper-main {
        height: 370px;
        margin-top: -110px;
    }

    .led-header {
        margin-top: 260px;
        padding: 35px 30px;
    }

    .led-header h1 {
        font-size: 32px;
    }

    .word-first {
        font-size: 38px;
    }

    .led-description {
        font-size: 18px;
    }

    .led-wrapper {
        height: 360px;
    }

    .led-carousel-nav {
        width: 42px;
        height: 42px;
        font-size: 22px;
    }
}

/* 413px - 414px */
@media (min-width: 413px) and (max-width: 414px) {
    .led-wrapper-main {
        height: 530px;
        margin-top: -120px;
    }

    .led-header {
        margin-top: 270px;
        padding: 35px 30px;
    }

    .word-first {
        font-size: 35px;
    }

    .led-description {
        font-size: 18px;
    }

    .led-wrapper {
        height: 365px;
    }

    .led-features {
        height: 800px;
    }

    .led-feature-card {
        width: 360px;
    }

    .led-feature-icon svg{
        height: 40px;
        margin-top: 5px;
    }
}

/* 420px - 430px */
@media (min-width: 420px) and (max-width: 430px) {
    .led-wrapper-main {
        height: 400px;
        margin-top: -110px;
    }

    .led-header {
        margin-top: 280px;
        padding: 35px 30px;
    }

    .led-header h1 {
        font-size: 34px;
    }

    .word-first {
        font-size: 40px;
    }

    .led-description {
        font-size: 18px;
    }

    .led-wrapper {
        height: 370px;
    }

    .led-carousel-nav {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
}

/* 500px - 540px */
@media (min-width: 500px) and (max-width: 540px) {
    .led-wrapper-main {
        height: 420px;
        margin-top: -110px;
    }

    .led-header {
        margin-top: 300px;
        padding: 40px 40px;
    }

    .led-header h1 {
        font-size: 38px;
    }

    .word-first {
        font-size: 36px;margin-top: -20px;
    }

    .led-description {
        font-size: 18px;
    }

    .led-wrapper {
        height: 400px;
    }

    .led-carousel-nav {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }

    .led-carousel-nav.prev {
        left: 15px;
    }

    .led-carousel-nav.next {
        right: 15px;
    }

    .led-features {
        grid-template-columns: 1fr;
        gap: 25px;
        width: 400px;
    }
}

/* 750px - 768px (Tablets) */
@media (min-width: 750px) and (max-width: 768px) {
    .led-wrapper-main {
        height: 650px;
        margin-top: -100px;
    }

    .led-header {
        margin-top: 350px;
        padding: 40px 50px;
    }

    .led-header h1 {
        font-size: 48px;
    }

    .word-first {
        font-size: 52px;
    }

    .led-title2 {
        font-size: 52px;
    }

    .led-wrapper {
        height: 450px;
    }

    .led-carousel-nav {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .led-carousel-nav.prev {
        left: 18px;
    }

    .led-carousel-nav.next {
        right: 18px;
    }

    .led-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .led-feature-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

/* 800px - 820px */
@media (min-width: 800px) and (max-width: 820px) {
    .led-wrapper-main {
        height: 680px;
        margin-top: -35px;
    }

    .led-header {
        margin-top: 370px;
        padding: 40px 55px;
    }

    .led-header h1 {
        font-size: 52px;
    }

    .word-first {
        font-size: 56px;
    }

    .led-title2 {
        font-size: 56px;
    }

    .led-wrapper {
        height: 480px;
    }

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

    .led-feature-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

/* 840px - 853px */
@media (min-width: 840px) and (max-width: 853px) {
    .led-wrapper-main {
        height: 700px;
        margin-top: -38px;
    }

    .led-header {
        margin-top: 380px;
        padding: 40px 55px;
    }

    .led-header h1 {
        font-size: 54px;
    }

    .word-first {
        font-size: 58px;
    }

    .led-title2 {
        font-size: 58px;
    }

    .led-wrapper {
        height: 500px;
    }

    .led-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}

/* 900px - 912px */
@media (min-width: 900px) and (max-width: 912px) {
    .led-wrapper-main {
        height: 720px;
        margin-top: -38px;
    }

    .led-header {
        margin-top: 400px;
        padding: 40px 60px;
    }

    .led-header h1 {
        font-size: 56px;
    }

    .word-first {
        font-size: 60px;
    }

    .led-title2 {
        font-size: 60px;
    }

    .led-wrapper {
        height: 520px;
    }

    .led-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* 980px - 992px */
@media (min-width: 980px) and (max-width: 992px) {
    .led-wrapper-main {
        height: 750px;
        margin-top: -40px;
    }

    .led-header {
        margin-top: 420px;
        padding: 40px 60px;
    }

    .led-header h1 {
        font-size: 58px;
    }

    .word-first {
        font-size: 62px;
    }

    .led-title2 {
        font-size: 62px;
    }

    .led-wrapper {
        height: 540px;
    }

    .led-carousel-nav {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .led-carousel-nav.prev {
        left: 20px;
    }

    .led-carousel-nav.next {
        right: 20px;
    }

    .led-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* 1000px - 1024px */
@media (min-width: 1000px) and (max-width: 1024px) {
    .led-wrapper-main {
        height: 470px;
        margin-top: -40px;
    }

    .word-first {
        font-size: 44px;
    }

    .led-title2 {
        font-size: 44px;
    }

    .led-wrapper {
        width: 800px;
        height: 450px;
    }

    .led-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        width: 800px;
    }
}

/* 1200px - 1280px */
@media (min-width: 1200px) and (max-width: 1280px) {
    .led-wrapper-main {
        height: 500px;
        margin-top: -40px;
    }

    .led-header {
        margin-top: 460px;
        padding: 40px 60px;
    }

    .led-header h1 {
        font-size: 62px;
    }

    .word-first {
        margin-top: -30px;
        font-size: 56px;
    }

    .led-title2 {
        font-size: 66px;
    }

    .led-wrapper {
        height: 580px;
    }

    .led-features {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        max-width: 1100px;
    }
}

/* General mobile landscape orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .led-wrapper-main {
        height: 350px;
    }

    .led-header {
        margin-top: 150px;
        padding: 20px 30px;
    }

    .led-header h1 {
        font-size: 24px;
    }

    .led-area2 {
        margin: 40px auto;
    }

    .led-wrapper {
        height: 280px;
    }
}

/* PA SYSTEM */ /* PA SYSTEM */ /* PA SYSTEM */ /* PA SYSTEM */ /* PA SYSTEM */ /* PA SYSTEM */
    

.top-cctv-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 150px auto;
}

.primary-cctv-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
    animation: fadeInUp 1.1s ease-out forwards;
   
    background-image:
        linear-gradient(to top, 
    rgba(255, 36, 0, 1) 0%,        /* Red at bottom */
    rgba(138, 43, 226, 0.8) 30%,   /* Violet in middle */
    rgba(0, 100, 255, 0.4) 50%,    /* Blue */
    rgba(0, 100, 255, 0) 100%      /* Transparent blue at top */
),
        url('https://scontent.fmnl9-2.fna.fbcdn.net/v/t1.15752-9/604440343_889863323579066_200045213746391097_n.png?_nc_cat=111&ccb=1-7&_nc_sid=9f807c&_nc_eui2=AeEMLfwODBzcbqQMzmfHS1WAeO32s53vN8t47fazne83y2Th8iDBAQC332CKGsnHSunZyLezvyWNTbiIAUHPTy0_&_nc_ohc=cLdqA-aZ3XkQ7kNvwEILF9M&_nc_oc=Adl9KHg1pIF0NshEaViRzCecxcqtgNgAllQHquOzDP-jKrl8F0PJn_P9RKMbtrMGi0k&_nc_zt=23&_nc_ht=scontent.fmnl9-2.fna&oh=03_Q7cD4AHju1kZI3GPDlUdkuIatwCyHIWzi-KI2O8CplcOb-Ll7A&oe=69716C0B');
    background-size: cover;
    background-position: center;

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 10%,
        black 85%,
        transparent 100%
    );
}

/* Animated Bars Container */
.bars-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    z-index: 1;
    pointer-events: none;
    padding: 0 20px;
}

/* Individual Bar Styling */
.bars-container span {
    width: 40px;
    min-height: 10px;
    background: linear-gradient(to top, 
    rgba(255, 36, 0, 1) 0%,      /* Full red at bottom */
    rgba(255, 36, 0, 0.85) 60%,  /* 85% opacity red */
    rgba(255, 36, 0, 0.7) 80%,   /* 70% opacity red */
    rgba(255, 36, 0, 0.5) 100%,   /* 50% opacity red */
    rgba(255, 36, 0, 0.2) 100%   /* 20% opacity at top */
);
    border-radius: 6px 6px 0 0;
    animation: barPulse 1.2s infinite ease-in-out;
    box-shadow: 
    0 0 10px rgba(255, 36, 0, 0.6),
    0 0 20px rgba(255, 107, 0, 0.4),
    0 0 30px rgba(255, 36, 0, 0.2);
    opacity: 0.9;
}

/* Staggered Animation Delays for Each Bar */
.bars-container span:nth-child(1) { animation-delay: 0s; }
.bars-container span:nth-child(2) { animation-delay: 0.05s; }
.bars-container span:nth-child(3) { animation-delay: 0.1s; }
.bars-container span:nth-child(4) { animation-delay: 0.15s; }
.bars-container span:nth-child(5) { animation-delay: 0.2s; }
.bars-container span:nth-child(6) { animation-delay: 0.25s; }
.bars-container span:nth-child(7) { animation-delay: 0.3s; }
.bars-container span:nth-child(8) { animation-delay: 0.35s; }
.bars-container span:nth-child(9) { animation-delay: 0.4s; }
.bars-container span:nth-child(10) { animation-delay: 0.45s; }
.bars-container span:nth-child(11) { animation-delay: 0.5s; }
.bars-container span:nth-child(12) { animation-delay: 0.55s; }
.bars-container span:nth-child(13) { animation-delay: 0.6s; }
.bars-container span:nth-child(14) { animation-delay: 0.55s; }
.bars-container span:nth-child(15) { animation-delay: 0.5s; }
.bars-container span:nth-child(16) { animation-delay: 0.45s; }
.bars-container span:nth-child(17) { animation-delay: 0.4s; }
.bars-container span:nth-child(18) { animation-delay: 0.35s; }
.bars-container span:nth-child(19) { animation-delay: 0.3s; }
.bars-container span:nth-child(20) { animation-delay: 0.25s; }
.bars-container span:nth-child(21) { animation-delay: 0.2s; }
.bars-container span:nth-child(22) { animation-delay: 0.15s; }
.bars-container span:nth-child(23) { animation-delay: 0.1s; }
.bars-container span:nth-child(24) { animation-delay: 0.05s; }
.bars-container span:nth-child(25) { animation-delay: 0.1s; }
.bars-container span:nth-child(26) { animation-delay: 0.15s; }
.bars-container span:nth-child(27) { animation-delay: 0.2s; }
.bars-container span:nth-child(28) { animation-delay: 0.25s; }
.bars-container span:nth-child(29) { animation-delay: 0.3s; }
.bars-container span:nth-child(30) { animation-delay: 0.35s; }

/* Bar Pulse Animation */
@keyframes barPulse {
    0%, 100% { 
        height: 20px;
        opacity: 0.6;
    }
    20% { 
        height: 80px;
        opacity: 0.8;
    }
    40% { 
        height: 150px;
        opacity: 1;
    }
    60% { 
        height: 100px;
        opacity: 0.9;
    }
    80% { 
        height: 60px;
        opacity: 0.7;
    }
}

/* Header Layer */
.cctv-header-layer {
    position: absolute;
    bottom: 30px;
    left: 0;
    padding: 40px 60px;
    width: 100%;
    z-index: 2;
}

.cctv-header-layer h1 {
    color: white;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 212, 255, 0.3);
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .primary-cctv-wrapper {
        height: 450px;
    }
    
    .bars-container {
        height: 200px;
        padding: 0 10px;
    }
    
    .bars-container span {
        width: 8px;
    }
    
    .cctv-header-layer {
        padding: 20px 30px;
    }
    
    .cctv-header-layer h1 {
        font-size: 32px;
    }
    
    @keyframes barPulse {
        0%, 100% { 
            height: 15px;
            opacity: 0.6;
        }
        20% { 
            height: 50px;
            opacity: 0.8;
        }
        40% { 
            height: 100px;
            opacity: 1;
        }
        60% { 
            height: 65px;
            opacity: 0.9;
        }
        80% { 
            height: 35px;
            opacity: 0.7;
        }
    }
}

@media (max-width: 480px) {
    .bars-container span {
        width: 6px;
    }
    
    .cctv-header-layer h1 {
        font-size: 24px;
    }
}

.ananda-title{
    font-family: Space Grotesk, sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 40px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    text-align: center;
}

    .ananda-title.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .ananda-title.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }   


.second-cctv-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 2000px;
    margin: 50px auto 150px auto;
}

    .second-cctv-area.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .second-cctv-area.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

.secondary-cctv-wrapper {
    position: relative;
    width: 100%;
    height: 650px !important;
    overflow: hidden;
    margin-bottom: 0px;

    background-image:
    linear-gradient(to top, rgba(255, 36, 0, 1) 0%, rgba(255, 36, 0, 0.4) 30%, rgba(255, 36, 0, 0) 100%),
    url('/images/services/pasystem2nd.jpg');
    background-size: cover;
    background-position: center;

    /* New properties for the fade-out effect at both top and bottom */
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,  /* Start fully transparent (top fade-out) */
        black 10%,        /* Become fully visible at 5% */
        black 85%,       /* Stay fully visible until 95% */
        transparent 100% /* Become fully transparent (bottom fade-out) */
    );
}

.ananda-caption {
    padding: 20px;
    margin-bottom: 30px;
    margin-top: -130px;
}

    .ananda-caption.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

	.ananda-caption.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }

.ananda-captions{
    font-family: Space Grotesk, sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
    text-align: left;
    margin-left: 250px;
    margin-right: 500px;
}

.myDIV {
    margin-left: 1340px;
    margin-top: -100px;
}


.speech {
    position: absolute;
    width: 300px;
    height: 100px;
    text-align: center;
    line-height: 2rem;
    background: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%);
    display: none;
    border-radius: 20px;
    left: 1400px;
    margin-top: 550px;
    padding: 15px;

    font-family: Space Grotesk, sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    letter-spacing: 0%;
}

/* Large circle */
.speech:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #A80606 0%, #C3631F 100%);
  border-radius: 50%;
  left: 15px;
  bottom: -25px;
}

/* Small circle */
.speech:before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #A80606 0%, #C3631F 100%);
  border-radius: 50%;
  left: 8px;
  bottom: -35px;
}


.myDIV:hover+.speech {
  display: block;
  color: red;
}

/* Contact Icons Container */
.contact-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px;
    flex-wrap: nowrap;
}

/* Individual contact Icon Styling */


.contact-icon {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
    transform: translateY(0);
    margin: 20px;
}

    /* Hover state for the container */
    .contact-icon:hover {
        transform: translateY(-8px) scale(1.1);
    }

    /* Icon image styling */
    .contact-icon img {
        width: 80%;
        height: 80%;
        object-fit: contain;
        transition: all 0.3s ease;
        filter: brightness(0.9);
    }


.myDIV2 {
    margin-left: 1430px;
    margin-top: -100px;
}


.speech2 {
    position: absolute;
    width: 300px;
    height: 100px;
    text-align: center;
    line-height: 2rem;
    background: linear-gradient(90deg, #A80606 0%, #C3631F 50%, #EA3838 100%);
    display: none;
    border-radius: 20px;
    left: 1490px;
    margin-top: 550px;
    padding: 15px;

    font-family: Space Grotesk, sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    letter-spacing: 0%;
}

/* Large circle */
.speech2:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #A80606 0%, #C3631F 100%);
  border-radius: 50%;
  left: 15px;
  bottom: -25px;
}

/* Small circle */
.speech2:before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #A80606 0%, #C3631F 100%);
  border-radius: 50%;
  left: 8px;
  bottom: -35px;
}


.myDIV2:hover+.speech2 {
  display: block;
  color: red;
}


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


/* Large Desktops (1400px - 1600px) */
@media (max-width: 1600px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 40px auto 100px auto;
    }

    .ananda-captions {
        margin-top: 30px;
        margin-left: 200px;
        margin-right: 400px;
    }
    
    .myDIV {
        margin-left: 1100px;
    }
    
    .myDIV2 {
        margin-left: 1190px;
    }
    
    .speech {
        left: 1160px;
    }
    
    .speech2 {
        left: 1250px;
    }

    .modal-content {
        width: 100%;
        margin-top: -210px;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 820px;
        margin-top: 50px;
        margin-left: 30px;
    }
    
    .modal-caption {
        margin-top: 210px;
        width: 820px;
        margin-left: 30px;
    }
    
    .modal-caption h2 {
        font-size: 1.9rem;
        margin-bottom: 8px;
        margin-left: 30px;
    }
    
    .modal-caption p {
        font-size: 1.4rem;
        line-height: 1;
        margin-left: 10px;
    }
}

/* Standard Desktops (1200px - 1400px) */
@media (max-width: 1400px) {

    .cctv-header-layer h1 {
        font-size: 42px;
    }
    
    .ananda-title {
        font-size: 36px;
    }
    
    .ananda-captions {
        margin-left: 150px;
        margin-right: 300px;
        font-size: 22px;
    }
    
    .myDIV {
        margin-left: 950px;
    }
    
    .myDIV2 {
        margin-left: 1040px;
    }
    
    .speech {
        left: 1010px;
        width: 170px;
    }
    
    .speech2 {
        left: 1100px;
        width: 170px;
    }
}

/* Medium Desktops (992px - 1200px) */
@media (max-width: 1200px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 40px auto 100px auto;
    }
    
    .primary-cctv-wrapper {
        height: 400px;
    }
    
    .secondary-cctv-wrapper {
        height: 500px;
    }
    
    .cctv-header-layer {
        padding: 30px 40px;
    }
    
    .cctv-header-layer h1 {
        font-size: 36px;
    }
    
    .second-title {
        margin-left: 10%;
    }
    
    .ananda-title {
        font-size: 32px;
    }
    
    .ananda-caption {
        margin-top: -100px;
        max-width: 800px;
    }
    
    .ananda-captions {
        margin-left: 80px;
        margin-right: 200px;
        font-size: 20px;
    }
    
    .myDIV {
        margin-left: 650px;
    }
    
    .myDIV2 {
        margin-left: 740px;
    }
    
    .contact-icon {
        width: 55px;
        height: 55px;
    }
    
    .speech,
    .speech2 {
        width: 200px;
        font-size: 14px;
    }
    
    .speech {
        left: 710px;
    }
    
    .speech2 {
        left: 800px;
    }
}


/* Desktops (1200px - 1280px) */
@media (min-width: 1200px) and (max-width: 1280px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 35px auto 90px auto;
    }
    
    .primary-cctv-wrapper {
        height: 380px;
    }
    
    .secondary-cctv-wrapper {
        height: 430px;
    }
    
    .cctv-header-layer h1 {
        font-size: 35px;
    }
    
    .ananda-title {
        font-size: 30px;
    }
    
    .ananda-captions {
        font-size: 19px;
    }
}

/* Standard Desktops (1000px - 1024px) */
@media (min-width: 1000px) and (max-width: 1024px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 32px auto 85px auto;
    }
    
    .primary-cctv-wrapper {
        height: 365px;
    }
    
    .secondary-cctv-wrapper {
        height: 415px;
    }
    
    .cctv-header-layer h1 {
        font-size: 33px;
    }
    
    .ananda-title {
        font-size: 29px;
    }
    
    .ananda-captions {
        font-size: 18.5px;
    }
}

/* Tablets Landscape (980px - 992px) */
@media (min-width: 980px) and (max-width: 992px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 30px auto 82px auto;
    }
    
    .primary-cctv-wrapper {
        height: 355px;
    }
    
    .secondary-cctv-wrapper {
        height: 405px;
    }
    
    .cctv-header-layer h1 {
        font-size: 32.5px;
    }
    
    .ananda-title {
        font-size: 28.5px;
    }
    
    .ananda-captions {
        font-size: 18px;
    }
}

/* Tablets Landscape (768px - 992px) */
@media (max-width: 992px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 30px auto 80px auto;
    }
    
    .primary-cctv-wrapper {
        height: 350px;
    }
    
    .secondary-cctv-wrapper {
        height: 400px;
    }
    
    .cctv-header-layer {
        padding: 25px 30px;
    }
    
    .cctv-header-layer h1 {
        font-size: 32px;
    }
    
    .second-title {
        margin-left: 5%;
        margin-bottom: 30px;
    }
    
    .ananda-title {
        font-size: 28px;
    }
    
    .ananda-caption {
        margin-top: -80px;
        width: 95%;
    }
    
    .ananda-captions {
        margin-left: 50px;
        margin-right: 150px;
        font-size: 18px;
    }
    
    .myDIV {
        margin-left: 300px;
        margin-top: 30px;
    }
    
    .myDIV2 {
        margin-left: 390px;
        margin-top: -92px;
    }
    
    .contact-icon {
        width: 50px;
        height: 50px;
    }
    
    .speech,
    .speech2 {
        width: 200px;
        font-size: 13px;
        padding: 12px;
    }
    
    .speech {
        left: 355px;
        margin-top: -220px;
    }
    
    .speech2 {
        left: 445px;
        margin-top: -220px;
    }
}

/* Tablets (900px - 912px) */
@media (min-width: 900px) and (max-width: 912px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 28px auto 75px auto;
    }
    
    .primary-cctv-wrapper {
        height: 440px;
    }
    
    .secondary-cctv-wrapper {
        height: 390px;
    }
    
    .cctv-header-layer h1 {
        font-size: 31px;
    }
    
    .ananda-title {
        font-size: 27px;
    }
    
    .ananda-captions {
        font-size: 17.5px;
        margin-left: 45px;
        margin-right: -70px;
    }
    .anandascap { 
        max-width: 1500px;
    }
}

/* Tablets (840px - 853px) */
@media (min-width: 840px) and (max-width: 853px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 26px auto 70px auto;
    }
    
    .primary-cctv-wrapper {
        height: 330px;
    }
    
    .secondary-cctv-wrapper {
        height: 380px;
    }
    
    .cctv-header-layer h1 {
        font-size: 30px;
    }
    
    .ananda-title {
        font-size: 26px;
    }
    
    .ananda-captions {
        font-size: 17px;
        margin-left: 40px;
        margin-right: 130px;
    }
}

/* Tablets (800px - 820px) */
@media (min-width: 800px) and (max-width: 820px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 24px auto 65px auto;
    }
    
    .primary-cctv-wrapper {
        height: 400px;
    }
    
    .secondary-cctv-wrapper {
        height: 370px !important;
    }
    
    .cctv-header-layer h1 {
        font-size: 29px;
    }
    
    .ananda-title {
        font-size: 25px;
    }
    
    .ananda-captions {
        font-size: 17px;
        margin-left: 35px;
        margin-right: 120px;
    }

    .anandascap {
        width:850px;
    }
}

/* Tablets Portrait (576px - 768px) */
@media (max-width: 768px) {
    .top-cctv-area,
    .second-cctv-area {
        width:100%;
    }
    
    .primary-cctv-wrapper {
        height: 350px;
    }
    
    .secondary-cctv-wrapper {
        height: 350px !important;
    }
    
    .cctv-header-layer {
        padding: 20px 25px;
    }
    
    .cctv-header-layer h1 {
        font-size: 28px;
    }
    
    .second-title {
        margin-left: 5%;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .ananda-title {
        font-size: 24px;
    }
    
    .ananda-caption {
        margin-top: -80px;
        width: 100%;
        padding: 15px;
    }
    
    .ananda-captions {
        margin-left: 20px;
        margin-right: 20px;
        font-size: 16px;
        text-align: center;
        line-height: 1.6;
    }
    
    .myDIV,
    .myDIV2 {
        position: relative;
        display: inline-block;
        margin: 20px 15px 0 0;
    }
    
    .myDIV {
        margin-left: 0;
    }
    
    .myDIV2 {
        margin-left: 0;
    }
    
    .contact-icon {
        width: 45px;
        height: 45px;
    }
    
    .speech{
        width: 220px;
        font-size: 12px;
        padding: 10px;
        position: absolute;
        top: 1200px;
        left: 55%;
        transform: translateX(-50%);
        height: 85px;
    }

    .speech2 {
        width: 220px;
        font-size: 12px;
        padding: 10px;
        position: absolute;
        top: 1200px;
        left: 69%;
        transform: translateX(-50%);
        height: 85px;
    }
    
    .speech:after,
    .speech2:after {
        left: 10%;
        transform: translateX(-50%);
    }
    
    .speech:before,
    .speech2:before {
        left: 10%;
        transform: translateX(-10px);
    }
    
    /* Center icons container */
    .ananda-caption {
        text-align: center;
    }
}

/* Mobile Devices (400px - 576px) */
@media (max-width: 576px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 40px auto;
    }
    
    .primary-cctv-wrapper {
        height: 250px;
        border-radius: 8px;
    }
    
    .secondary-cctv-wrapper {
        height: 300px;
        border-radius: 8px;
    }
    
    .cctv-header-layer {
        padding: 15px 20px;
    }
    
    .cctv-header-layer h1 {
        font-size: 24px;
    }
    
    .second-title {
        margin-left: 0;
        text-align: center;
        padding: 10px 15px;
    }
    
    .ananda-title {
        font-size: 20px;
    }
    
    .ananda-caption {
        margin-top: -40px;
        margin-bottom: -40px;
        width: 98%;
        padding: 10px;
    }
    
    .ananda-captions {
        margin-left: 15px;
        margin-right: 15px;
        font-size: 14px;
        line-height: 1.7;
    }
    
    .contact-icon {
        width: 40px;
        height: 40px;
    }
    
    .speech {
        width: 170px;
        font-size: 11px;
        padding: 8px;
        top: 1035px;
        left: 54%;
    }

    .speech2 {
        width: 170px;
        font-size: 11px;
        padding: 8px;
        top: 1035px;
        left: 78%;
    }
    
    .speech:after,
    .speech2:after {
        width: 16px;
        height: 16px;
        bottom: -20px;
    }
    
    .speech:before,
    .speech2:before {
        width: 10px;
        height: 10px;
        bottom: -28px;
    }
}

/* Larger Mobile (500px - 540px) */
@media (min-width: 500px) and (max-width: 540px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 42px auto;
    }
    
    .primary-cctv-wrapper {
        height: 260px;
    }
    
    .secondary-cctv-wrapper {
        height: 310px;
    }
    
    .cctv-header-layer h1 {
        font-size: 25px;
    }
    
    .ananda-title {
        font-size: 21px;
    }
    
    .ananda-captions {
        font-size: 14.5px;
    }
    
    .speech {
        width: 175px;
        top: 1037px;
        left: 54.5%;
    }
    
    .speech2 {
        width: 175px;
        top: 1037px;
        left: 77%;
    }
}

/* Mobile (420px - 430px) */
@media (min-width: 420px) and (max-width: 430px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 40px auto;
    }
    
    .primary-cctv-wrapper {
        height: 252px;
    }
    
    .secondary-cctv-wrapper {
        height: 302px;
    }
    
    .cctv-header-layer h1 {
        font-size: 24.5px;
    }
    
    .ananda-title {
        font-size: 20.5px;
    }
    
    .ananda-captions {
        font-size: 14px;
    }

    .speech {
        margin-top: -60px;
    }
    
    .speech2 {
        margin-top: -60px;
    }

    .contact-icon {
        width: 39px;
        height: 39px;
    }
}

/* Mobile (413px - 414px) */
@media (min-width: 413px) and (max-width: 414px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 40px auto;
    }
    
    .primary-cctv-wrapper {
        height: 251px;
    }
    
    .secondary-cctv-wrapper {
        height: 301px;
    }
    
    .cctv-header-layer h1 {
        font-size: 24px;
    }
    
    .ananda-title {
        font-size: 20px;
    }
    
    .ananda-captions {
        font-size: 14px;
    }

    .speech {
        width: 170px;
        margin-top: -60px;
        left: 54%;
    }
    
    .speech2 {
        width: 170px;
        margin-top: -60px;
        left: 78%;
    }
}

/* Mobile (400px - 412px) */
@media (min-width: 400px) and (max-width: 412px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 40px auto;
    }
    
    .primary-cctv-wrapper {
        height: 250px;
    }
    
    .secondary-cctv-wrapper {
        height: 300px;
    }
    
    .cctv-header-layer h1 {
        font-size: 24px;
    }
    
    .ananda-title {
        font-size: 20px;
    }
    
    .ananda-captions {
        font-size: 14px;
    }
    
    .contact-icon {
        width: 40px;
        height: 40px;
    }
    
    .speech {
        width: 170px;
        margin-top: -60px;
        left: 54%;
    }
    
    .speech2 {
        width: 170px;
        margin-top: -60px;
        left: 78%;
    }
}

/* Small Mobile Devices (340px - 390px) */
@media (max-width: 390px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 15px auto 40px auto;
    }
    
    .primary-cctv-wrapper {
        height: 250px;
        border-radius: 8px;
    }
    
    .secondary-cctv-wrapper {
        height: 250px !important;
        border-radius: 8px;
    }
    
    .cctv-header-layer {
        padding: 12px 15px;
    }
    
    .cctv-header-layer h1 {
        font-size: 20px;
    }
    
    .ananda-title {
        font-size: 18px;
    }

    .ananda-caption{
        margin-bottom: -30px;
    }
    
    .ananda-captions {
        margin-left: 10px;
        margin-right: 10px;
        font-size: 13px;
    }
    
    .contact-icon {
        width: 35px;
        height: 35px;
    }
    
    .speech {
        width: 140px;
        font-size: 11px;
        padding: 8px;
        top: 1060px;
        left: 52%;
        height: 80px;
    }

    .speech2 {
        width: 140px;
        font-size: 11px;
        padding: 8px;
        top: 1060px;
        left: 78%;
        height: 80px;
    }
}

/* Small Mobile (380px - 390px) */
@media (min-width: 380px) and (max-width: 390px) {
    .cctv-header-layer {
        padding: 12px 16px;
    }
    
    .cctv-header-layer h1 {
        font-size: 20.5px;
    }
    
    .ananda-title {
        font-size: 18.5px;
    }
    
    .ananda-captions {
        font-size: 13.5px;
    }
    
    .contact-icon {
        width: 36px;
        height: 36px;
    }
    
    .speech {
        width: 145px;
        left: 53%;
        margin-top: -160px;
    }
    
    .speech2 {
        width: 145px;
        left: 77%;
        margin-top: -160px;
    }
}

/* Small Mobile (370px - 375px) */
@media (min-width: 370px) and (max-width: 375px) {
    .secondary-cctv-wrapper {
        height: 200px !important;
    }

    .cctv-header-layer h1 {
        font-size: 21px;
    }
    
    .ananda-title {
        font-size: 19px;
    }
    
    .ananda-caption {
        margin-bottom: -32px;
    }
    
    .ananda-captions {
        font-size: 13.5px;
    }
    
    .contact-icon {
        width: 36px;
        height: 36px;
    }
    
    .speech {
        width: 145px;
        left: 52.5%;
    }
    
    .speech2 {
        width: 145px;
        left: 77.5%;
    }
}

@media (min-width: 360px) {
    .secondary-cctv-wrapper {
        height: 200px;
    }
     .ananda-caption{
        margin-bottom: -30px;
    }           
    .speech {
        top: 980px;
    }
    
    .speech2 {
        top: 980px;
    }
}

/* Small Mobile (350px - 360px) */
@media (min-width: 350px) and (max-width: 360px) {
    .cctv-header-layer {
        padding: 11px 14px;
    }
    
    .cctv-header-layer h1 {
        font-size: 19.5px;
    }
    
    .ananda-title {
        font-size: 17.5px;
    }
    
    .ananda-caption {
        margin-bottom: -28px;
    }
    
    .ananda-captions {
        font-size: 12.5px;
    }
    
    .contact-icon {
        width: 34px;
        height: 34px;
    }
    
    .speech {
        width: 135px;
        left: 51%;
        margin-top: -170px;
        height: 78px;
    }
    
    .speech2 {
        width: 135px;
        left: 78%;
        margin-top: -170px;
        height: 78px;
    }
}

/* Extra Small Mobile (320px - 344px) */
@media (min-width: 320px) and (max-width: 344px) {
    .top-cctv-area,
    .second-cctv-area {
        width: 100%;
        margin: 12px auto 35px auto;
    }
    
    .primary-cctv-wrapper {
        height: 240px;
    }
    
    .secondary-cctv-wrapper {
        height: 290px;
    }
    
    .cctv-header-layer {
        padding: 10px 12px;
    }
    
    .cctv-header-layer h1 {
        font-size: 18px;
    }
    
    .ananda-title {
        font-size: 16px;
    }
    
    .ananda-caption {
        margin-bottom: -25px;
    }
    
    .ananda-captions {
        margin-left: 8px;
        margin-right: 8px;
        font-size: 12px;
    }
    
    .contact-icon {
        width: 32px;
        height: 32px;
    }
    
    .speech {
        width: 130px;
        font-size: 10px;
        padding: 7px;
        top: 1065px;
        left: 50%;
        height: 75px;
    }
    
    .speech2 {
        width: 130px;
        font-size: 10px;
        padding: 7px;
        top: 1065px;
        left: 80%;
        height: 75px;
    }
}



/* MODAL PART */

        .header {
            padding: 40px;
            margin-bottom: 30px;
            border-radius: 8px;
        }

        .header h1 {
            font-family: Lexend, sans-serif;
            font-weight: 600;
            font-style: Light;
            font-size: 50px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            text-align: center;
        }

        .header p {
            font-family: Space Grotesk, sans-serif;
            font-weight: 400;
            font-style: Regular;
            font-size: 32px;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
            text-align: center;
            color: white;

        }

        .gallery-installation {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            width: 1300px;
            margin-left: -70px;
        }

        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s ease;
            aspect-ratio: 16/9;
        }

        .gallery-item:hover {
            transform: scale(1.02);
            box-shadow: 
        /* Deep Red Shadow */
        5px 5px 5px #A80606, 
        
        /* Orange-Brown Shadow (offset a bit less) */
        5px 5px 5px #C3631F,
        
        /* Bright Red/Pink Shadow (offset a bit more) */
        5px 5px 5px #EA3838;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Modal/Lightbox */
        .modal {
            display: none;
            position: fixed;
            top: 7%;
            left: 9%;
            width: 100%;
            height: 100%;
            z-index: 1000;
            animation: fadeIn 0.3s ease;
            cursor: pointer;
        }

        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            position: relative;
            max-width: 70%;
            max-height: 90%;
            animation: zoomIn 0.3s ease;
            background: transparent;
            margin-top: -150px;
        }

        .modal-content img {
            width: 75%;
            height: auto;
            max-height: 65vh;
            object-fit: cover;
            border-radius: 8px;
        }

        .modal-caption {
            background: linear-gradient(135deg, #c62828 0%, #ff6f00 100%);
            padding: 10px 10px;
            margin-top: 440px;
            border-radius: 8px;
            text-align: center;
            position: absolute;
            width: 75%;

            font-family: Space Grotesk;
            font-weight: 400;
            font-style: Regular;
            font-size: 1.5rem;
        }

        .modal-caption h2 {
            font-size: 2rem;
            margin-bottom: 10px;

            font-family: Lexend, sans-serif;
            font-weight: 600;
            font-style: Regular;
            leading-trim: NONE;
            line-height: 100%;
            letter-spacing: 0%;
        }

        .close-btn {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 40px;
            color: #fff;
            cursor: pointer;
            z-index: 1001;
            transition: color 0.3s ease;
        }

        .close-btn:hover {
            color: #ff6f00;
        } 

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes zoomIn {
            from { 
                opacity: 0;
                transform: scale(0.8);
            }
            to { 
                opacity: 1;
                transform: scale(1);
            }
        }

       

/* Responsive Design */

/* Large Desktops (1200px - 1400px) */
@media (max-width: 1300px) {
    .header h1 {
        font-size: 45px;
    }
    
    .header p {
        font-size: 28px;
    }

    .gallery-installation{
        max-width: 1100px;
        margin-left: 40px;
    }
        
}

/* Standard Desktops (992px - 1200px) */
@media (max-width: 1200px) {
    .martin-section {
        padding: 30px 15px;
    }
    
    .header {
        padding: 25px;
        margin-bottom: 25px;
    }
    
    .header h1 {
        font-size: 40px;
        margin-bottom: 40px;
    }
    
    .header p {
        font-size: 24px;
        line-height: 1.5;
    }
    
    .gallery-installation {
        gap: 18px;
        margin: auto;
        width: 900px;
    }
    
    .modal-content {
        width: 100%;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 820px;
        margin-top: -230px;
        margin-left: -150px;
    }
    
    .modal-caption {
        margin-top: 210px;
        width: 820px;
        margin-left: -150px;
    }
    
    .modal-caption h2 {
        font-size: 1.9rem;
        margin-bottom: 8px;
        margin-left: 40px;
    }
    
    .modal-caption p {
        font-size: 1.4rem;
        line-height: 1;
        margin-left: 10px;
    }
}


@media (max-width: 1024px) {
    .martin-section {
        padding: 30px 15px;
    }
    
    .header {
        padding: 25px;
        margin-bottom: 25px;
    }
    
    .header h1 {
        font-size: 40px;
        margin-bottom: 40px;
    }
    
    .header p {
        font-size: 24px;
        line-height: 1.5;
    }
    
    .gallery-installation {
        gap: 18px;
        margin: auto;
        width: 900px;
    }
    
    .modal-content {
        margin-top: 150px;
        width: 100%;
        margin-left: 130px;
    }
    
    .modal-content img {
        max-height: 90vh;
        width: 700px;
        margin-top: -230px;
        margin-left: -150px;
    }
    
    .modal-caption {
        margin-top: 80px;
        width: 700px;
        margin-left: -150px;
    }
    
    .modal-caption h2 {
        font-size: 1.5rem;
        margin-bottom: 8px;
        margin-left: 40px;
    }
    
    .modal-caption p {
        font-size: 1.2rem;
        line-height: 1;
        margin-left: 10px;
    }
}


/* Tablets Landscape (768px - 992px) */
@media (max-width: 992px) {
    .martin-section {
        padding: 25px 15px;
    }
    
    .header {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .header h1 {
        font-size: 36px;
    }
    
    .header p {
        font-size: 20px;
        line-height: 1.5;
    }
    
    .gallery-installation {
        gap: 15px;
        width: 600px;
    }
    
    .modal-content {
        width: 100%;
        margin-left: 160px;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 600px;
        margin-top: -230px;
        margin-left: -160px;
    }
    
    .modal-caption {
        padding: 18px;
        width: 600px;
        margin-top: 70px;
        margin-left: -160px;
    }
    
    .modal-caption h2 {
        font-size: 1.3em;
        margin-left: 10px;
    }
    
    .modal-caption p {
        font-size: 1rem;
        margin-left: 10px;
    }
}

/* Tablets Portrait (576px - 768px) */
@media (max-width: 768px) {
    .martin-section {
        padding: 20px 10px;
        width: 100%;
    }
    
    .header {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .header h1 {
        font-size: 32px;
        margin-bottom: 15px;
    }
    
    .header p {
        font-size: 18px;
        line-height: 1.6;
    }
    
    .gallery-installation {
        grid-template-columns: 1fr;
        gap: 15px;
        width: 600px;
    }
    
    .modal-content {
        width: 100%;
        margin-left: 160px;

    }
    
    .modal-content img {
        max-height: 100vh;
        width: 600px;
        margin-top: -200px;
        margin-left: -180px;
    }
    
    .modal-caption {
        margin-top: 120px;
        width: 600px;
        margin-left: -180px;
    }
    
    .modal-caption h2 {
        font-size: 1.5em;
        margin-bottom: 8px;
        margin-left: 10px;
    }
    
    .modal-caption p {
        font-size: 1rem;
        line-height: 1.5;
        margin-left: 10px;
    }
}

/* Mobile Devices (400px - 576px) */
@media (max-width: 576px) {
    .martin-section {
        padding: 15px 10px;
    }
    
    .header {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .header h1 {
        font-size: 28px;
        margin-bottom: 35px;
    }
    
    .header p {
        font-size: 16px;
        line-height: 1.6;
    }
    
    .gallery-installation {
        gap: 12px;
        width: 350px;
    }
    
    .modal {
        padding: 15px;
        margin-left: -30px;
    }
    
    .modal-content {
        width: 100%;
        margin-left: 210px;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 350px;
        margin-top: -230px;
        margin-left: -150px;
    }
    
    .modal-caption {
        margin-top: -30px;
        width: 350px;
        margin-left: -150px;
    }
    
    .modal-caption h2 {
        font-size: 1rem;
        margin-bottom: 8px;
        margin-left: -5px;
    }
    
    .modal-caption p {
        font-size: 0.8rem;
        line-height: 1;
        margin-left: -10px;
        margin-bottom: 1px;
    }
    
    .gallery-item:hover {
        transform: scale(1.01);
    }
}

@media (max-width: 430px) {
    .martin-section {
        padding: 10px 8px;
        max-width: 100%;
    }
    
    .header {
        padding: 10px;
        margin-bottom: 12px;
    }
    
    .header h1 {
        font-size: 24px;
        margin-bottom: 50px;
    }
    
    .header p {
        font-size: 14px;
        line-height: 1.7;
    }
    
    .gallery-installation {
        gap: 10px;
        width: 300px;
    }
    
    .modal-content {
        width: 100%;
        margin-left: 133px;
        margin-top: 50px;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 300px;
        margin-top: -220px;
        margin-left: -100px;
    }
    
    .modal-caption {
        margin-top: -80px;
        width: 300px;
        margin-left: -100px;
    }
    
    .modal-caption h2 {
        font-size: 1rem;
        margin-bottom: 8px;
        margin-left: -5px;
    }
    
    .modal-caption p {
        font-size: 0.8rem;
        line-height: 1;
        margin-bottom: 1px;
        margin-left: -5px;
    }
}

/* Small Mobile Devices (320px - 400px) */
@media (max-width: 400px) {
    .martin-section {
        padding: 10px 8px;
        max-width: 100%;
    }
    
    .header {
        padding: 10px;
        margin-bottom: 12px;
    }
    
    .header h1 {
        font-size: 24px;
        margin-bottom: 50px;
    }
    
    .header p {
        font-size: 14px;
        line-height: 1.7;
    }
    
    .gallery-installation {
        gap: 10px;
        width: 300px;
    }
    
    .modal-content {
        width: 100%;
        margin-left: 113px;
        margin-top: 50px;
    }
    
    .modal-content img {
        max-height: 100vh;
        width: 300px;
        margin-top: -220px;
        margin-left: -100px;
    }
    
    .modal-caption {
        margin-top: -80px;
        width: 300px;
        margin-left: -100px;
    }
    
    .modal-caption h2 {
        font-size: 1rem;
        margin-bottom: 8px;
        margin-left: -5px;
    }
    
    .modal-caption p {
        font-size: 0.8rem;
        line-height: 1;
        margin-bottom: 1px;
        margin-left: -5px;
    }
}

/* Extra Small Devices (below 320px) */
@media (max-width: 320px) {
    .header h1 {
        font-size: 20px;
        margin-bottom: 30px;
    }

    
    .header p {
        font-size: 13px;
    }
    
    .modal-caption h2 {
        font-size: 0.9em;
    }
    
    .modal-caption p {
        font-size: 0.75rem;
    }
}

/* ==============================================
   GALLERY ITEM ANIMATIONS
   ============================================== */

/* Initial hidden state for gallery items */
.gallery-item {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Visible state when in viewport */
.gallery-item.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered animation delay for each gallery item */
.gallery-item:nth-child(1).animate-in {
    animation: slideInGallery 0.6s ease-out 0.1s backwards;
}

.gallery-item:nth-child(2).animate-in {
    animation: slideInGallery 0.6s ease-out 0.2s backwards;
}

.gallery-item:nth-child(3).animate-in {
    animation: slideInGallery 0.6s ease-out 0.3s backwards;
}

.gallery-item:nth-child(4).animate-in {
    animation: slideInGallery 0.6s ease-out 0.4s backwards;
}

/* Keyframe for slide in animation */
@keyframes slideInGallery {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Exit animation when leaving section */
.gallery-item.animate-out {
    animation: slideOutGallery 0.4s ease-in forwards;
}

@keyframes slideOutGallery {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
}

/* Header animations */
.martin-section .header {
    opacity: 100%;
    transform: translateY(30px);
}

.martin-section .header.animate-in {
    animation: fadeInHeader 0.8s ease-out forwards;
}

@keyframes fadeInHeader {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.martin-section .header.animate-out {
    animation: fadeOutHeader 0.4s ease-in forwards;
}

@keyframes fadeOutHeader {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Enhanced hover effect with animation */
.gallery-item.animate-in:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 
        /* Deep Red Shadow */
        0 15px 30px rgba(168, 6, 6, 0.4), 
        /* Orange-Brown Shadow */
        0 10px 20px rgba(195, 99, 31, 0.3),
        /* Bright Red/Pink Shadow */
        0 5px 10px rgba(234, 56, 56, 0.2);
}

/* Smooth transition back to normal state */
.gallery-item.animate-in {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal animation improvements */
.modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal.active {
    opacity: 1;
    pointer-events: auto;
}

.modal.active .modal-content {
    animation: modalZoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalZoomIn {
    from { 
        opacity: 0;
        transform: scale(0.7) translateY(50px);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Modal caption slide up */
.modal.active .modal-caption {
    animation: captionSlideUp 0.5s ease-out 0.2s backwards;
}

@keyframes captionSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

@media (max-width: 768px) {
    .gallery-item {
        transform: translateY(30px) scale(0.95);
    }
    
    @keyframes slideInGallery {
        from {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    /* Faster animations on mobile */
    .gallery-item:nth-child(1).animate-in {
        animation-delay: 0.05s;
    }
    
    .gallery-item:nth-child(2).animate-in {
        animation-delay: 0.1s;
    }
    
    .gallery-item:nth-child(3).animate-in {
        animation-delay: 0.15s;
    }
    
    .gallery-item:nth-child(4).animate-in {
        animation-delay: 0.2s;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .gallery-item,
    .martin-section .header,
    .modal-content,
    .modal-caption {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }
    
    .gallery-item.animate-in,
    .martin-section .header.animate-in {
        opacity: 1;
        transform: none;
    }
}



/* FEEDBACK SECTION */

.finish-feedback {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:"visual content" "button button";
   
    gap: 10px;
    max-width: 1800px;
    margin: 170px auto;
    padding: 0 0;
    align-items: start;
}

    .finish-feedback.is-hidden {
        opacity: 0; /* Ensures it starts invisible */
    }

    .finish-feedback.animate-visible {
        animation: 1.5s anim-fadeIn linear forwards; 
    }


.finish-feedback-text {
    grid-area: content;
    padding-right: 70px;
    margin-top: 40px;

}

.finish-header {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-style: ExtraLight;
    font-size: 50px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    margin-bottom: 40px;
    margin-top: 20px;
}

.finish-client-quote {
    color: white;
    font-size: 32px;
    line-height: 1.6;
    margin-bottom: 30px;
    font-style: italic;
    font-weight: 400;
    font-family: 'Space Grotesk', sans-serif;
}

.client-qoute {
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    margin-left: 470px;
    margin-top: -63px;
    margin-bottom: 50px;
}

.finish-stars-container .fas {
    color: #FFD700;
    font-size: 22px;
    margin-top: 20px;
    margin-right: 5px;
    display: contents;

        
    /* 💥 CRITICAL FIX: Ensures the icon is an individual block element 
       so the text-shadow property can be animated correctly. */
    display: inline-block; 
    
    /* Ensure the animation is fully defined */
    animation: rgbGoldPulse 2s ease-in-out infinite alternate;
}

    .finish-stars-container :hover {
        transform: translateY(-5px) scale(1.05);
}

    .finish-stars-container :hover {
        transform: translateY(-5px) scale(1.05);
    }

.item-finish-visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    padding: auto;
    margin-left: 60px;
   
    /* Placeholder for the image */
    background-image: url(https://www.mhzav.com/wp-content/uploads/2024/10/What-Is-a-PA-System.webp); /* REPLACE with your actual image path or URL */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 700px;
}


/* Responsive Design */

/* Large Desktops (1200px - 1400px) */
@media (max-width: 1400px) {
    .finish-feedback {
        max-width: 1000px;
        gap: 30px;
        margin-left: -100px;
    }
    
    .finish-header {
        font-size: 45px;
    }
    
    .finish-client-quote {
        font-size: 28px;
        max-width: 70%;
        justify-content: center;
    }
    
    .finish-feedback-text {
        padding-right: 30px;
    }

    .client-qoute {
        margin-right: -90px;
    }
}

/* Desktops (1200px - 1280px) */
@media (min-width: 1200px) and (max-width: 1280px) {
    .finish-feedback {
        max-width: 950px;
        gap: 28px;
        margin-left: -95px;
    }
    
    .finish-header {
        font-size: 42px;
    }
    
    .finish-client-quote {
        font-size: 27px;
    }
    
    .finish-feedback-text {
        padding-right: 35px;
    }
}

/* Standard Desktops (992px - 1200px) */
@media (max-width: 1200px) {
    .finish-feedback {
        margin: 100px auto;
        gap: 5px;
    }
    
    .item-finish-visual {
        min-height: 450px;
        margin-left: -90px;
    }

    .finish-feedback-text{
        padding-right: 80px;
    }
    
    .finish-header {
        font-size: 40px;
        margin-bottom: 25px;
    }
    
    .finish-client-quote {
        font-size: 26px;
        margin-bottom: 25px;
    }
    
    .client-qoute {
        font-size: 18px;
        margin: 20px;
        margin-left: 90px;
    }
    
    .finish-feedback-text {
        padding-right: 30px;
        margin-left: -60px;
        margin-top: 0px;
    }
    
    .finish-stars-container .fas {
        margin-top: 10px;
    }
}

/* Desktops (1000px - 1024px) */
@media (min-width: 1000px) and (max-width: 1024px) {
    .finish-feedback {
        margin: 95px auto;
        gap: 10px;
    }
    
    .item-finish-visual {
        min-height: 440px;
        margin-left: -85px;
    }
    
    .finish-header {
        font-size: 39px;
    }
    
    .finish-client-quote {
        font-size: 25px;
    }
}

/* Tablets Landscape (980px - 992px) */
@media (min-width: 980px) and (max-width: 992px) {
    .finish-feedback {
        margin: 85px auto;
        gap: 18px;
    }
    
    .item-finish-visual {
        min-height: 410px;
    }
    
    .finish-header {
        font-size: 37px;
    }
    
    .finish-client-quote {
        font-size: 25px;
    }
}

/* Tablets Landscape (768px - 992px) */
@media (max-width: 992px) {
    .finish-feedback {
        margin: 80px auto;
        gap: 20px;
        padding: 0 15px;
    }
    
    .item-finish-visual {
        min-height: 400px;
    }
    
    .finish-header {
        font-size: 36px;
        margin-bottom: 20px;
    }
    
    .finish-client-quote {
        font-size: 24px;
        line-height: 1.5;
        margin-bottom: 20px;
    }
    
    .client-qoute {
        font-size: 17px;
    }
    
    .finish-feedback-text {
        padding-right: 20px;
    }
    
    .finish-stars-container .fas {
        margin-top: 20px;
        font-size: 19px;
    }
}

/* Tablets (900px - 912px) */
@media (min-width: 900px) and (max-width: 912px) {
    .finish-feedback {
        margin: 75px auto;
        gap: 22px;
    }
    
    .item-finish-visual {
        min-height: 390px;
    }
    
    .finish-header {
        font-size: 35px;
    }
    
    .finish-client-quote {
        font-size: 23px;
    }
}

/* Tablets (840px - 853px) */
@media (min-width: 840px) and (max-width: 853px) {
    .finish-feedback {
        margin: 70px auto;
        gap: 24px;
    }
    
    .item-finish-visual {
        min-height: 380px;
    }
    
    .finish-header {
        font-size: 34px;
    }
    
    .finish-client-quote {
        font-size: 23px;
    }
}

/* Tablets (800px - 820px) */
@media (min-width: 800px) and (max-width: 820px) {
    .finish-feedback {
        margin: 68px auto;
        gap: 90px;
    }
    
    .item-finish-visual {
        width: 400px !important;
        margin-left: 40px;
    }
    
    .finish-header {
        font-size: 33px;
    }
    
    .finish-client-quote {
        font-size: 22px;
    }
}

/* Tablets Portrait (750px - 768px) */
@media (min-width: 750px) and (max-width: 768px) {
    .finish-feedback {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "content"
            "button"
            "visual";
        margin: 65px auto !important;
        gap: 28px;
    }
    
    .item-finish-visual {
        min-height: 360px;
        max-width: 550px;
        margin: -50px;
    }
    
    .finish-header {
        font-size: 33px;
        text-align: center;
        margin-left: 7%;
    }
    
    .finish-client-quote {
        font-size: 23px;
        text-align: center;
        margin-left: 20%;
    }
}

/* Tablets Portrait (576px - 768px) */
@media (max-width: 768px) {
    .finish-feedback {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "content"
            "button"
            "visual";
        margin: 60px auto;
        gap: 30px;
        padding: 0 15px;
    }

    .finish-feedback{
        margin-left: -100px;
    }
    
    .item-finish-visual {
        min-height: 350px;
        width: 90%;
        margin-left: 100px;
    }
    
    .finish-feedback-text {
        padding-right: 0;
        text-align: center;
    }
    
    .finish-header {
        font-size: 32px;
        margin-bottom: 20px;
        text-align: center;
        margin-left: 7%;
    }
    
    .finish-client-quote {
        font-size: 22px;
        line-height: 1.6;
        margin-bottom: 20px;
        text-align: center;
        margin-left: 20%;
    }
    
    .client-qoute {
        font-size: 16px;
        text-align: center;
        margin-bottom: 15px;
        margin-left: 7%;
    }
    
    .finish-stars-container {
        justify-content: center;
        margin-top: 20px;
        margin-left: 6%;
    }
    
    .finish-stars-container .fas {
        margin-top: 20px;
        font-size: 20px;
    }
}

/* Mobile Devices (400px - 576px) */
@media (max-width: 576px) {
    .finish-feedback {
        margin: 40px auto;
        gap: 20px;
        padding: 0 15px;
        margin-left: 20px;
    }
    
    .item-finish-visual {
        min-height: 300px;
        margin-left: 10px;
    }

    .finish-feedback-text {
        margin-right: auto;
    }
    
    .finish-header {
        font-size: 28px;
        margin-bottom: 18px;
        line-height: 1.2;
    }
    
    .finish-client-quote {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 18px;
    }
    
    .client-qoute {
        font-size: 15px;
        margin-bottom: 12px;
    }
    
    .finish-stars-container {
        margin-top: 12px;
        gap: 4px;
    }
    
    .finish-stars-container .fas {
        margin-top: 20px;
        font-size: 18px;
    }
}

/* Larger Mobile (500px - 540px) */
@media (min-width: 500px) and (max-width: 540px) {
    .finish-feedback {
        margin: 45px auto;
        gap: 22px;
        margin-left: 25px;
    }
    
    .item-finish-visual {
        min-height: 310px;
        margin-left: 15px;
    }
    
    .finish-header {
        font-size: 29px;
    }
    
    .finish-client-quote {
        font-size: 19px;
    }
}

/* Mobile (420px - 430px) */
@media (min-width: 420px) and (max-width: 430px) {
    .finish-feedback {
        margin: 38px auto;
        gap: 20px;
        margin-left: 22px;
    }
    
    .item-finish-visual {
        min-height: 290px;
        margin-left: 12px;
        margin-top: -130px;
    }
    
    .finish-header {
        font-size: 27px;
    }
    
    .finish-client-quote {
        font-size: 17.5px;
    }
}

/* Mobile (413px - 414px) */
@media (min-width: 413px) and (max-width: 414px) {
    .finish-feedback {
        margin: 36px auto;
        gap: 20px;
        margin-left: 21px;
    }
    
    .item-finish-visual {
        min-height: 285px;
        margin-left: 11px;
        margin-top: -130px;
    }
    
    .finish-header {
        font-size: 26.5px;
    }
    
    .finish-client-quote {
        font-size: 17px;
    }
}

/* Mobile (400px - 412px) */
@media (min-width: 400px) and (max-width: 412px) {
    .finish-feedback {
        margin: 35px auto;
        gap: 20px;
        margin-left: 21px;
    }
    
    .item-finish-visual {
        min-height: 280px;
        margin-left: 11px;
        margin-top: -130px;
    }
    
    .finish-header {
        font-size: 26px;
    }
    
    .finish-client-quote {
        font-size: 17px;
    }
}

/* Small Mobile Devices (320px - 400px) */
@media (max-width: 400px) {
    .finish-feedback {
        margin-top: 30px;
        gap: 20px;
        padding: 0 10px;
    }
    
    .item-finish-visual {
        min-height: 250px;
        margin-top: -100px;
    }
    
    .finish-header {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .finish-feedback-text{
        text-align: center;
        justify-content: center;
        margin: auto;
    }
    
    .finish-client-quote {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 15px;
    }
    
    .client-qoute {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .finish-stars-container {
        margin-top: 20px;
        gap: 3px;
    }
    
    .finish-stars-container .fas {
        font-size: 16px;
    }
}

/* Small Mobile (380px - 390px) */
@media (min-width: 380px) and (max-width: 390px) {
    .finish-feedback {
        margin-top: 32px;
        gap: 20px;
        margin-left: -40px;
    }
    
    .item-finish-visual {
        min-height: 260px;
        margin-top: -100px;
        margin-left: 40px;
    }
    
    .finish-header {
        font-size: 25px;
    }
    
    .finish-client-quote {
        font-size: 16.5px;
    }
}

/* Small Mobile (370px - 375px) */
@media (min-width: 370px) and (max-width: 375px) {
    .finish-feedback {
        margin-top: 31px;
        gap: 20px;
        margin-left: -40px;
    }
    
    .item-finish-visual {
        min-height: 255px;
        max-width: 300px;
        margin-top: -150px;
        margin-left: 70px;
    }
    
    .finish-header {
        font-size: 24.5px;
    }
    
    .finish-client-quote {
        font-size: 16px;
    }
}

/* Small Mobile (350px - 360px) */
@media (min-width: 350px) and (max-width: 360px) {
    .finish-feedback {
        margin-top: 30px;
        gap: 20px;
        margin-left: -30px;
    }
    
    .item-finish-visual {
        min-height: 245px;
        margin-top: -150px;
        margin-left: 33px;
    }
    
    .finish-header {
        font-size: 23.5px;
    }
    
    .finish-client-quote {
        font-size: 15.5px;
    }
    
    .client-qoute {
        font-size: 13.5px;
    }
}

/* Extra Small Devices (below 320px) */
@media (max-width: 320px) {
    .item-finish-visual {
        min-height: 200px;
    }
    
    .finish-header {
        font-size: 22px;
    }
    
    .finish-client-quote {
        font-size: 15px;
    }
    
    .client-qoute {
        font-size: 13px;
    }
    
    .finish-stars-container .fas {
        margin-top: 20px;
        font-size: 15px;
    }
}

/* Extra Small Mobile (320px - 344px) */
@media (min-width: 321px) and (max-width: 344px) {
    .item-finish-visual {
        min-height: 220px;
        margin-top: -105px;
    }
    
    .finish-header {
        font-size: 23px;
    }
    
    .finish-client-quote {
        font-size: 15px;
    }
    
    .client-qoute {
        font-size: 13px;
    }
    
    .finish-stars-container .fas {
        font-size: 15.5px;
    }
}




/* Mobile Form Homepage*/
/* Mobile Form Styles */
        .mobile-form {
            display: none;
        }

        .mobile-form-container {
            padding: 20px;
            background: rgb(8, 8, 8);
            border-radius: 10px;
            margin: 0 15px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
            padding: 2px;
            background: linear-gradient(90deg, 
                #ff0000, #ff7700, #ffff00, #00ff00, 
                #0000ff, #4b0082, #9400d3, #ff0000);
            background-size: 200% 200%;
            animation: rainbowBorder 3s linear infinite;
        }

        .mobile-form-container::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            border-radius: 8px;
            background: rgb(8, 8, 8);
            z-index: 1;
        }

        .mobile-form-content {
            position: relative;
            z-index: 2;
            padding: 20px;
        }

        .send-us-mobile h2 {
            color: #FFF;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
            text-align: center;
        }

        .mobile-field-container {
            margin-bottom: 20px;
        }

        .mobile-field-container label {
            display: block;
            color: #FFF;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
            font-family: 'Space Grotesk', sans-serif;
        }

        .mobile-field-container input,
        .mobile-field-container textarea {
            width: 100%;
            padding: 12px 15px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: #FFF;
            font-size: 16px;
            font-family: 'Space Grotesk', sans-serif;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .mobile-field-container input::placeholder,
        .mobile-field-container textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .mobile-field-container input:focus,
        .mobile-field-container textarea:focus {
            outline: none;
            border-color: #f85858;
            background: rgba(255, 255, 255, 0.15);
        }

        .mobile-field-container textarea {
            min-height: 120px;
            resize: vertical;
        }

        .mobile-action-button {
            width: 100%;
            padding: 15px;
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
            border: none;
            border-radius: 8px;
            color: #FFF;
            font-size: 16px;
            font-weight: 600;
            font-family: 'Space Grotesk', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .mobile-action-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(248, 88, 88, 0.4);
        }

        .mobile-contact-info {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .mobile-info-item {
            margin-bottom: 20px;
        }

        .mobile-info-item h3 {
            color: #FFF;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
            font-family: 'Space Grotesk', sans-serif;
        }

        .mobile-info-item p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 5px 0;
            font-family: 'Lexend', sans-serif;
        }

        /* Responsive behavior - hide desktop form on mobile */
        @media (max-width: 768px) {
            .desktop-form {
                display: none !important;
            }
            
            .mobile-form {
                display: block !important;
            }

            .contactForm {
                padding: 40px 0 !important;
            }

            .title-contactForm {
                font-size: 32px !important;
                text-align: center;
                margin-bottom: 20px;
            }

            .title-contactDes {
                font-size: 16px !important;
                text-align: center;
                padding: 0 20px;
                line-height: 1.5;
            }

        }

        .contactForm {
            padding: 40px 0 !important;
        }

        .title-contactForm {
            font-size: 32px !important;
            text-align: center;
            margin-bottom: 20px;
        }

        /* Rainbow border animation */
        @keyframes rainbowBorder {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }


        /* About Us Page Internal CSS - Should be scoped to about page only */
        /* Removed global overrides that were affecting contact form width */
        .mission-vision-wrapper {
            background: #0a0a0a;
            padding: 80px 20px;
            position: relative !important;
            overflow: visible;
        }
        .reach-us-main-container {
            margin: 0 auto 60px !important;
            margin-bottom: 60px !important;
            clear: both !important;
        }
        .mission-vision-container {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 40px !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .details-panel-wrapper h2 {
            color: #ffffff !important;
            margin: 0 0 20px 0 !important;
            padding: 0 !important;
            text-indent: 0 !important;
        }
        .details-panel-wrapper p {
            color: #e0e0e0 !important;
            line-height: 1.6 !important;
        }
        .join-team-section {
            position: relative !important;
            z-index: 1 !important;
            margin-top: 0 !important;
        }
        .main-content {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }
        /* Hide team section */
        .team-intro,
        .team-desc,
        .team-wrapper,
        .leaders-group,
        .admin-group,
        .marketing-group,
        .technicians-group,
        .developers-group {
            display: none !important;
        }
        
        /* Mobile responsive for mission and vision cards */
        @media (max-width: 767px) {
            .mission-vision-container {
                grid-template-columns: 1fr !important;
                gap: 20px !important;
            }
        }
        
        /* Logo glow animation */
        @keyframes logoGlow {
            from {
                filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
            }
            to {
                filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.3));
            }
        }
        
        /* Logo entrance animation */
        @keyframes logoEntrance {
            0% {
                opacity: 0;
                transform: scale(0.3) translateY(30px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        /* Heading entrance animations */
        @keyframes headingEntrance {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes subtitleEntrance {
            0% {
                opacity: 0;
                transform: translateY(15px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .about-v2-hero-logo {
            animation: logoEntrance 1.5s ease-out forwards, logoGlow 3s ease-in-out 1.5s infinite alternate;
        }
        
        .about-v2-hero-heading h1 {
            opacity: 0;
            animation: headingEntrance 1s ease-out 1.2s forwards;
        }
        
        .about-v2-hero-heading p {
            opacity: 0;
            animation: subtitleEntrance 0.8s ease-out forwards;
        }
        
        .about-v2-hero-heading p:nth-of-type(1) {
            animation-delay: 1.4s;
        }
        
        .about-v2-hero-heading p:nth-of-type(2) {
            animation-delay: 1.6s;
        }
        
        /* Modern About Section Styles */
        .btn-primary-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(248, 88, 88, 0.3);
        }
        
        .btn-secondary-modern:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
            transform: translateY(-2px);
        }
        
        .feature-item:hover .feature-icon {
            transform: scale(1.1);
            transition: transform 0.3s ease;
        }
        
        /* Responsive for mobile */
        @media (max-width: 768px) {
            
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .btn-primary-modern,
            .btn-secondary-modern {
                width: 100%;
                text-align: center;
            }
            
        }
        
        
        /* Vision section responsive styles */
        @media (max-width: 768px) {
            
        }
        
        /* Mobile responsive - Hide About Us section image */
        @media (max-width: 768px) {
            .about-v2-modern-section .modern-about-image-wrapper {
                display: none !important;
            }
            
            .about-v2-modern-section .col-lg-6:first-child {
                display: none !important;
            }
            
            .about-v2-modern-section .col-lg-6:last-child {
                flex: 0 0 100% !important;
                max-width: 100% !important;
            }
            
            /* Make buttons horizontal on mobile */
            .about-v2-modern-section .about-v2-action-buttons {
                display: flex !important;
                flex-direction: row !important;
                gap: 1rem !important;
                justify-content: center !important;
                flex-wrap: wrap !important;
            }
            
            .about-v2-modern-section .about-v2-action-buttons a {
                flex: 1 !important;
                min-width: 120px !important;
                max-width: 200px !important;
                text-align: center !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
            
            /* Mission section - move icons to left on mobile */
            .about-v2-mission-section .about-v2-value-item {
                flex-direction: row !important;
                text-align: left !important;
                justify-content: flex-start !important;
            }
            
            .about-v2-mission-section .about-v2-value-item .about-v2-value-icon {
                order: -1 !important;
                margin-right: 1rem !important;
                margin-left: 0 !important;
                margin-bottom: 0 !important;
            }
            
            .about-v2-mission-section .about-v2-value-item .about-v2-value-text {
                text-align: left !important;
                flex: 1 !important;
                order: 1 !important;
            }
            
            /* Hide Mission section image on mobile */
            .about-v2-mission-section .mission-image-wrapper {
                display: none !important;
            }
            
            .about-v2-mission-section .col-lg-6.order-lg-2 {
                display: none !important;
            }
            
            .about-v2-mission-section .col-lg-6.order-lg-1 {
                flex: 0 0 100% !important;
                max-width: 100% !important;
            }
            
            /* Hide Vision section image on mobile */
            .about-v2-vision-section .vision-image-wrapper {
                display: none !important;
            }
            
            .about-v2-vision-section .col-lg-6:first-child {
                display: none !important;
            }
            
            .about-v2-vision-section .col-lg-6:last-child {
                flex: 0 0 100% !important;
                max-width: 100% !important;
            }
            
            /* Remove black hole fade-in animation on mobile */
            .blackhole-hero-container {
                opacity: 1 !important;
                animation: none !important;
            }
            
            .blackhole-hero-container.initial-load {
                animation: none !important;
            }
            
            .about-v2-hero-heading {
                opacity: 1 !important;
                animation: none !important;
            }
        }
        
        /* Scroll-triggered fade-in animations for About Us section */
        .fade-in-element {
            opacity: 0;
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        
        .fade-in-from-right {
            transform: translateX(50px);
        }
        
        .fade-in-from-left {
            transform: translateX(-50px);
        }
        
        .fade-in-element.visible {
            opacity: 1;
            transform: translateX(0);
        }
        
        .fade-in-element.fade-out {
            opacity: 0;
            transition: opacity 0.3s ease-in, transform 0.3s ease-in;
        }
        
        .fade-in-element.fade-out.fade-in-from-right {
            transform: translateX(120px);
        }
        
        .fade-in-element.fade-out.fade-in-from-left {
            transform: translateX(-120px);
        }
        
        /* Stagger animation for feature items */
        .about-v2-feature-item {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .about-v2-feature-item.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .about-v2-feature-item.fade-out {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.2s ease-in, transform 0.2s ease-in;
        }
        
        .about-v2-feature-item:nth-child(1) { transition-delay: 0.1s; }
        .about-v2-feature-item:nth-child(2) { transition-delay: 0.2s; }
        .about-v2-feature-item:nth-child(3) { transition-delay: 0.3s; }
        .about-v2-feature-item:nth-child(4) { transition-delay: 0.4s; }
        
        /* Enhanced fade-out for image wrappers */
        .modern-about-image-wrapper.fade-in-element.fade-out {
            transform: translateX(150px) scale(0.95);
            transition: opacity 0.25s ease-in, transform 0.25s ease-in;
        }
        
        .mission-image-wrapper.fade-in-element.fade-out {
            transform: translateX(150px) scale(0.95);
            transition: opacity 0.25s ease-in, transform 0.25s ease-in;
        }
        
        .vision-image-wrapper.fade-in-element.fade-out {
            transform: translateX(150px) scale(0.95);
            transition: opacity 0.25s ease-in, transform 0.25s ease-in;
        }
        
        /* Stagger animation for mission value items */
        .about-v2-value-item {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .about-v2-value-item.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .about-v2-value-item.fade-out {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.2s ease-in, transform 0.2s ease-in;
        }
        
        .about-v2-value-item:nth-child(1) { transition-delay: 0.1s; }
        .about-v2-value-item:nth-child(2) { transition-delay: 0.2s; }
        .about-v2-value-item:nth-child(3) { transition-delay: 0.3s; }
        
        /* Stagger animation for vision pillar items */
        .about-v2-pillar-item {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        .about-v2-pillar-item.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .about-v2-pillar-item.fade-out {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.2s ease-in, transform 0.2s ease-in;
        }
        
        .about-v2-pillar-item:nth-child(1) { transition-delay: 0.1s; }
        .about-v2-pillar-item:nth-child(2) { transition-delay: 0.2s; }
        .about-v2-pillar-item:nth-child(3) { transition-delay: 0.3s; }
        .about-v2-pillar-item:nth-child(4) { transition-delay: 0.4s; }
        
        /* Fix rotating button clickability */
        .rotating-button {
            z-index: 100;
            position: relative;
        }
        
        .rotating-button a {
            z-index: 11;
            pointer-events: auto !important;
            cursor: pointer !important;
        }
        
        .rotating-button a:hover {
            pointer-events: auto !important;
        }
        
        /* Black hole fade-in animation on page load */
        .blackhole-hero-container {
            opacity: 0;
        }
        
        .blackhole-hero-container.fade-out {
            opacity: 0;
            transition: opacity 0.6s ease-in;
        }
        
        .blackhole-hero-container.visible {
            opacity: 1;
            transition: opacity 0.8s ease-out;
        }
        
        .blackhole-hero-container.initial-load {
            animation: blackHoleFadeIn 2s ease-out forwards;
        }
        
        /* Stop black hole animation when not visible */
        .blackhole-hero-container.animation-stopped {
            pointer-events: none;
        }
        
        .blackhole-hero-container.animation-stopped * {
            animation-play-state: paused !important;
            transition: none !important;
        }
        
        @keyframes blackHoleFadeIn {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        /* Hero content fade-in with delay */
        .about-v2-hero-heading {
            opacity: 0;
            animation: heroContentFadeIn 2.5s ease-out 0.5s forwards;
        }
        
        @keyframes heroContentFadeIn {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        
        

/* Homepage Internal CSS */

/* Navbar v2 Styles - Same as about-v2.html */
        .navbar-v2 {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 1000;
            padding: 1rem 0;
            background: transparent;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }
        
        .navbar-v2.scrolled {
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        }
        
        .nav-container {
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        .nav-logo {
            order: 1;
        }
        
        .nav-menu {
            order: 2;
        }
        
        .nav-toggle {
            order: 3;
        }
        
        .nav-logo .logo-img {
            width: 40px;
            height: 40px;
            object-fit: contain;
        }
        
        .nav-menu {
            display: flex;
            gap: 2rem;
            align-items: center;
        }
        
        .nav-link {
            color: #fff !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 6px;
            transition: all 0.3s ease;
            font-family: 'Space Grotesk', sans-serif;
            text-decoration: none;
        }
        
        .nav-link:hover {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
            color: transparent !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
        }
        
        .nav-link.active {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
            color: transparent !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            background-color: transparent !important;
        }
        
        .nav-link.active:hover {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
            color: transparent !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            background-color: transparent !important;
        }
        
        .nav-link:focus {
            outline: none !important;
            outline-offset: 0 !important;
            box-shadow: none !important;
        }
        
        .nav-toggle {
            display: none;
            flex-direction: column;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
        }
        
        .bar {
            width: 25px;
            height: 3px;
            background: white;
            margin: 3px 0;
            transition: 0.3s;
        }
        
        .nav-mobile {
            display: none;
            position: absolute;
            top: calc(100% - 1px);
            left: 0;
            right: 0;
            width: 100%;
            background: #000000;
            backdrop-filter: blur(10px);
            flex-direction: column;
            padding: 0 2rem 3rem;
            gap: 1.5rem;
            margin: 0;
            border: none;
            transform: translateY(-10px);
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            align-items: center;
            justify-content: center;
        }
        
        .nav-mobile.active {
            opacity: 1;
            max-height: 500px;
            transform: translateY(0);
        }
        
        .navbar-v2:not(.scrolled) .nav-mobile {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(2px);
        }
        
        .navbar-v2:not(.scrolled).mobile-active {
            background: #000000 !important;
            backdrop-filter: blur(10px) !important;
            transition: none !important;
        }
        
        .navbar-v2.mobile-active .nav-mobile {
            background: #000000 !important;
            backdrop-filter: blur(10px) !important;
        }
        
        .nav-link-mobile {
            color: #fff !important;
            font-weight: 500;
            font-family: 'Space Grotesk', sans-serif;
            padding: 0.5rem 1rem !important;
            border-radius: 6px;
            transition: all 0.3s ease;
            text-decoration: none;
        }
        
        .nav-link-mobile:hover {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1);
            color: transparent !important;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: background 0.4s;
            background-color: transparent !important;
            transform: none !important;
        }
        
        .nav-link-mobile.active {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
            color: transparent !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            background-color: transparent !important;
        }
        
        .nav-link-mobile.active:hover {
            background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
            color: transparent !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            background-color: transparent !important;
        }
        
        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }
            
            .nav-toggle {
                display: flex;
            }
            
            .nav-container {
                padding: 0 0.5rem;
                width: 100%;
                max-width: 100vw;
                box-sizing: border-box;
            }
            
            .navbar-v2 {
                padding: 1rem 0;
                box-sizing: border-box;
                left: 0;
                right: 0;
            }
            
            .nav-mobile {
                box-sizing: border-box;
                left: 0;
                right: 0;
                width: 100%;
                max-width: 100vw;
                padding: 0 1rem 2rem;
                transform: translateY(-10px);
                opacity: 0;
                max-height: 0;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                position: absolute;
                align-items: center;
            }
            
            .nav-link {
                color: #fff !important;
                font-weight: 500;
                padding: 0.5rem 1rem !important;
                border-radius: 6px;
                transition: all 0.3s ease;
                font-family: 'Space Grotesk', sans-serif;
                text-decoration: none;
            }
            
            .nav-link:hover {
                background: linear-gradient(90deg, #f85858, #ef5ef1, #5b1eb1) !important;
                color: transparent !important;
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
                background-clip: text !important;
            }
        }
        
        /* Fix for laptop screens - align Upgrade with your reality */
        @media (min-width: 769px) and (max-width: 1440px) {
            .manual-titleposition {
                left: 4rem !important;
            }
        }
    html, body {
        overflow-x:hidden;
    }

        body{
            margin: 0 !important;
            padding: 0 !important;
        }

        /* Hide What We Offer section on mobile devices */
        @media (max-width: 768px) {
            .hide-on-mobile {
                display: none !important;
            }
            
            /* Show mobile-only section with higher specificity */
            section.mobile-services-section.show-on-mobile {
                display: block !important;
            }
            
            .show-on-mobile {
                display: block !important;
            }
            
            /* Mobile services grid - 2 columns x 4 rows */
            .mobile-services-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                padding: 0 15px;
            }
            
            .mobile-service-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-decoration: none;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 12px;
                padding: 0;
                transition: all 0.3s ease;
                text-align: center;
                position: relative;
                overflow: hidden;
                aspect-ratio: 1;
            }
            
            .mobile-service-card:hover {
                background: rgba(255, 255, 255, 0.1);
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            }
            
            .mobile-service-card img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 12px;
            }
            
            .mobile-service-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 12px;
                z-index: 1;
            }
            
            .mobile-service-card span {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 16px;
                font-weight: 700;
                font-family: 'Space Grotesk', sans-serif;
                text-transform: uppercase;
                letter-spacing: 1px;
                text-align: center;
                padding: 0;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 90%;
                max-width: 90%;
                box-sizing: border-box;
                z-index: 2;
            }
        }
        
        /* Hide mobile section on desktop */
        @media (min-width: 769px) {
            .show-on-mobile {
                display: none !important;
            }
        }

        /* WEB COMPLETED PROJECTS STYLES*/
    .web-project-container {
            padding-top: 0rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .web-project-header {
            text-align: center;
            margin-bottom: 50px;
            color: white;
        }

        .web-project-h1 {
            font-size: 3em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .web-project-subtitle {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .web-project-projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .web-project-project-card {
            background: black;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .web-project-project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.4);
        }

        .web-project-project-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            cursor: pointer;
            transition: opacity 0.3s ease;
        }

        .web-project-project-image:hover {
            opacity: 0.9;
        }

        .web-project-project-content {
            padding: 25px;
        }

        .web-project-project-title {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 10px;
        }

        .web-project-project-description {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .web-project-visit-btn {
            display: inline-block;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 600;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .web-project-visit-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .web-project-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
            justify-content: center;
            align-items: center;
        }

        .web-project-modal-content {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
            border-radius: 10px;
        }

        .web-project-close-modal {
            position: absolute;
            top: 30px;
            right: 50px;
            color: white;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .web-project-close-modal:hover {
            color: #667eea;
        }
        /* WEB COMPLETED PROJECTS RESPONSIVENESS */
        @media (max-width: 768px) {
            .web-project-h1 {
                font-size: 2em;
            }

            .web-project-projects-grid {
                grid-template-columns: 1fr;
            }
        }
         @media (max-width: 480px) {
            body {
                padding: 20px 10px;
            }

            .web-project-h1 {
                font-size: 1.5em;
            }

            .web-project-subtitle {
                font-size: 1em;
            }

            .web-project-projects-grid {
                gap: 20px;
            }

            .web-project-project-image {
                height: 150px;
            }

            .web-project-project-content {
                padding: 15px;
            }

            .web-project-project-title {
                font-size: 1.2em;
            }

            .web-project-project-description {
                font-size: 0.9em;
            }

            .web-project-visit-btn {
                padding: 10px 20px;
                font-size: 0.9em;
            }

            .web-project-close-modal {
                top: 15px;
                right: 20px;
                font-size: 30px;
            }

            .web-project-modal-content {
                max-width: 95%;
                max-height: 80%;
            }
        }