/* Font Families */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. Global Resets & Variables
   ========================================================================== */
:root {
    --primary-glow: rgba(144, 101, 255, 0.2);
    --dark-bg: #0f0e17;
    --card-bg: #1a1a2e;
    --text-light: #fffffe;
    --text-secondary: #a7a9be;
    --hover-bg: #f2f2f6;
    --hover-text: #000000;

    /* Additional root variables from your second block */
    --primary: #7e22ce;
    --secondary: #3b82f6;
    --dark: #0f172a;
    --light: #f8fafc;
    --accent: #a855f7;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ul {
    margin: 0;
    padding: 0;
}

body {
    /* To make the header blend, the body's initial background should allow it.
       If your .immersion-hero covers the top part of the body, then a transparent
       body background will work. If there's content above the hero, consider
       setting body background to match the hero's initial background or removing it.
       For this case, we'll ensure it doesn't default to black. */
    background-color: transparent; /* Changed or ensured this is transparent/removed */
    font-family: 'Poppins', sans-serif;
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
}

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

/* ==========================================================================
   2. Header & Navigation
   ========================================================================== */
header {
    width: 100%;
    padding: 20px 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
    background: transparent; /* This is already correctly set to transparent */
    box-shadow: none; /* Ensure no initial shadow if you want it to truly blend */
}

header.scrolled {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(144, 101, 255, 0.25);
    padding: 15px 0;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-container img {
    height: 50px;
    transition: height 0.3s ease;
    display: block;
}

header.scrolled .logo-container img {
    height: 40px;
}

/* --- Desktop Navigation (Main Menu) --- */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 35px;
}

.main-nav ul li {
    position: relative;
}

.main-nav ul li > a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 1px;
    padding-bottom: 5px;
}

.main-nav ul li:hover > a {
    color: #b58aff;
}

/* --- Desktop Submenu --- */
.main-nav .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(15, 15, 15, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 5px 0;
    min-width: 220px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    display: flex;
    flex-direction: column;
}

.main-nav li:hover > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

.main-nav .submenu li {
    width: 100%;
}

.main-nav .submenu li a {
    display: block;
    padding: 10px 20px; /* Adjusted padding for better spacing */
    color: #ffffff;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.main-nav .submenu li a:hover {
    background: #1f1f2f; /* Slightly darker hover */
    color: #b58aff;
}

/* --- Header Actions & Desktop Contact Button --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contact-btn {
    display: inline-block;
    padding: 10px 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(217, 179, 255, 0.6);
    border-radius: 50px;
    color: #b58aff;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.contact-btn:hover {
    background: rgba(217, 179, 255, 0.08);
    border-color: #b58aff;
    box-shadow: 0 0 14px #b58aff, 0 0 30px #9065ff; /* Glow on Hover */
}

/* --- Mobile Navigation (Hamburger & Side Menu) --- */
#hamburger-menu {
    display: none; /* Hidden by default, shown in media query */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
    z-index: 1002; /* Higher than side menu to be clickable */
    background: none;
    border: none;
}

#hamburger-menu span {
    width: 25px;
    height: 3px;
    background: #b58aff;
    transition: all 0.3s ease;
    border-radius: 2px;
    display: block;
}

/* Hamburger animation */
#hamburger-menu.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

#hamburger-menu.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


#side-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Off-screen by default */
    width: 280px;
    height: 100%;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(15px);
    padding: 20px;
    z-index: 1001; /* Above main content, below hamburger trigger */
    transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow-y: auto; /* Enable scrolling for long menus */
}

#side-menu.active {
    right: 0; /* Slide in when active */
}

#side-menu .side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--primary-glow);
}

#side-menu .side-menu-header h3 {
    color: #b58aff;
    font-size: 1.5rem;
}

#close-menu-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    /* Optional: for better hit area and visual */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

#close-menu-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#side-menu .side-nav-list,
#side-menu .submenu-mobile {
    list-style: none;
    padding: 0; /* Ensure no default padding from ul */
    margin: 0; /* Ensure no default margin from ul */
}

#side-menu .side-nav-list > li {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#side-menu .side-nav-list li:last-child {
    border-bottom: none; /* No border for the last item */
}

#side-menu .side-nav-list li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    display: block;
    padding: 12px 5px;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

#side-menu .side-nav-list li a:hover {
    color: #b58aff;
}

#side-menu .submenu-mobile {
    padding-left: 20px;
    display: none; /* Hidden by default */
    margin-top: 10px;
}

#side-menu li.active > .submenu-mobile {
    display: block; /* Show submenu when parent is active */
}

#side-menu .submenu-mobile li {
    border-bottom: none; /* Submenu items don't need individual borders */
}

#side-menu .submenu-mobile li a {
    font-size: 1rem;
    padding: 10px 5px;
    color: #ccc;
    text-transform: none; /* Submenu items typically not uppercase */
    transition: color 0.2s ease;
}

#side-menu .submenu-mobile li a:hover {
    color: #b58aff;
}

#side-menu li.active > a {
    color: #d84dff; /* Highlight parent link when submenu is open */
}

/* ==========================================================================
   3. Hero Section
   ========================================================================== */


/* Hero Section */
.immersion-hero {
    background: linear-gradient(135deg, #0f0f10 0%, #0e0e0e 100%);
    min-height: 78vh;
  padding-top: 140px;      /* clears fixed header */
  padding-bottom: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;      /* center everything inside */
  position: relative;
  z-index: 1;
}

.immersion-hero-content {
   max-width: 1050px;       /* was 600px */
  margin: 0 auto;
  padding: 0 24px;
}

.immersion-hero h1 {
  font-size: clamp(1.8rem, 2.6vw + .5rem, 3.25rem); /* reduced */
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  background: linear-gradient(90deg,#ffffff 0%, #c7d2fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  text-align: center;
}

.immersion-hero p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin-bottom: 28px;
}

/* Main Sections */
.immersion-section {
    padding: 100px 0;
    background-color: #0e0e0e;
}

.vr-section {
    background-color: #0a0a0f;
}

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

.section-grid {
    display: flex;
    align-items: center;
    gap: 60px;
}

.reverse {
    flex-direction: row-reverse;
}

.section-image {
    flex: 1;
    position: relative;
}

.section-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.tech-badge {
    position: absolute;
    top: -20px;
    right: -20px;
    background: linear-gradient(90deg, #7e22ce 0%, #3b82f6 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.section-content {
    flex: 1;
}

.section-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #ffffff 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.section-content p {
    color: #94a3b8;
    margin-bottom: 30px;
    font-size: 1.05rem;
    text-align: left;
}

/* Feature List */
.feature-list {
    margin-bottom: 30px;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #e2e8f0;
}

.feature-item i {
    width: 40px;
    height: 40px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: #a855f7;
    font-size: 1.1rem;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    background: linear-gradient(90deg, #7e22ce 0%, #3b82f6 100%);
    padding: 12px 30px;
    border-radius: 50px;
    color: white;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(110, 69, 226, 0.4);
    transition: all 0.3s ease;
}

.btn-secondary {
    display: inline-block;
    background: linear-gradient(90deg, rgba(126, 34, 206, 0.7) 0%, rgba(59, 130, 246, 0.7) 100%);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(110, 69, 226, 0.4);
}

.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(110, 69, 226, 0.6);
}

/* Responsive Styles */
@media (max-width: 992px) {
    .section-grid {
        flex-direction: column;
        gap: 40px;
    }
    
    .reverse {
        flex-direction: column;
    }
    
    .section-image {
        margin-bottom: 30px;
    }
    
    .section-content h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .immersion-hero {
        padding: 80px 0;
    }
    
    .immersion-hero h1 {
        font-size: 2.2rem;
    }
    
    .immersion-section {
        padding: 70px 0;
    }
}

@media (max-width: 480px) {
    .immersion-hero h1 {
        font-size: 1.8rem;
    }
    
    .section-content h2 {
        font-size: 1.6rem;
    }
    
    .btn-primary,
    .btn-secondary {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   5. Footer
   ========================================================================== */
.footer-section {
    background-color: #000;
    padding: 80px 0 40px;
    font-family: 'Poppins', sans-serif;
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col {
    flex: 1;
    min-width: 200px; /* Ensures columns don't get too narrow before wrapping */
}

.footer-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 12px;
}

.footer-menu a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s;
    font-family: 'Poppins', sans-serif;
}

.footer-menu a:hover {
    color: #fff !important; /* Using !important to ensure override if needed */
}

.footer-col img {
    max-width: 150px;
    margin-bottom: 20px;
    filter: none; /* Ensures no default filter is applied */
    opacity: 1;
    transition: opacity 0.3s ease;
}

.footer-col img:hover {
    opacity: 0.9;
}

.company-info {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

.company-info p {
    margin: 0 0 10px;
}

.company-info strong {
    color: #fff;
}

.footer-contact {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  color: #94a3b8; /* default text color */
  line-height: 1.6;
}

.footer-contact strong {
  color: #fff; /* labels "Email:" / "Phone:" stay white */
}

/* email link */
.footer-contact a.email-link {
  color: #a855f7; /* violet tone */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact a.email-link:hover {
  color: #c084fc; /* lighter purple on hover */
}

/* phone link */
.footer-contact a.phone-link {
  color: #3b82f6; /* brand blue */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact a.phone-link:hover {
  color: #60a5fa; /* lighter blue hover */
}


/* ==========================================================================
   6. Copyright / Bottom Bar
   ========================================================================== */
.glass-bottom-bar {
    background: rgba(0, 0, 0, 0.91);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 16px 20px;
    border-top: 1px solid rgba(181, 138, 255, 0.2);
    box-shadow: 0 -4px 12px rgba(181, 138, 255, 0.2);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    z-index: 99;
}

.glass-content-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.glass-copyright {
    color: #94a3b8;
    font-size: 14px;
    margin: 0;
}

.glass-copyright a {
    color: #94a3b8;
    text-decoration: none;
    font-weight: 500;
}

.glass-copyright a:hover {
    color: #FFFFFF;
}

.glass-icons {
    display: flex;
    gap: 16px;
}

.icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: all 0.3s ease;
    font-size: 15px; /* Adjust if using icon fonts */
    background-color: transparent;
    border: none;
}

.icon svg {
    height: 24px;
    width: 24px;
    fill: currentColor; /* Allows color property to change SVG fill */
    transition: color 0.3s ease;
}

.icon:hover {
    background-color: transparent; /* Ensure no background on hover */
    box-shadow: none; /* Ensure no box-shadow on hover */
    transform: scale(1.2);
}

/* Specific icon hover colors */
.icon.li:hover svg {
    color: #FFFFFF;
}

.icon.tw:hover svg {
    color: #FFFFFF;
}

.icon.ig:hover svg {
    color: #FFFFFF;
}

/* ==========================================================================
   7. Media Queries (Responsiveness)
   ========================================================================== */

/* Tablet & Mobile styles (up to 992px) */
@media (max-width: 992px) {
    .experience-row,
    .vr-row {
        flex-direction: column; /* Stacks content vertically */
    }

    .vr-row {
        flex-direction: column; /* Ensure it also stacks, overriding desktop row-reverse */
    }

    .experience-image,
    .vr-image {
        margin-bottom: 40px;
    }

    /* Adjust font size for main headings on tablets/small desktops */
    h2 {
        font-size: 2.2rem; /* Adjusted for better readability on smaller screens */
    }
}

/* Mobile specific styles (up to 768px) */
@media (max-width: 768px) {
    /* Header & Navigation Adjustments */
    .main-nav {
        display: none; /* Hides desktop navigation links */
    }
    #hamburger-menu {
        display: flex; /* Shows hamburger menu on mobile */
    }
    /* Hides the "CONTACT" button that is part of the header-actions on small screens */
    .header-actions .contact-btn {
        display: none; /* This is the key change to hide the desktop contact button */
    }

    /* Content Section Adjustments */
    .experience-section,
    .vr-section {
        padding: 60px 0;
    }

    h2 {
        font-size: 1.8rem; /* Further adjustment for smaller mobile screens */
    }

    .tech-badge {
        top: -15px;
        right: -15px;
        padding: 8px 15px;
        font-size: 0.9rem;
    }

    /* Footer Adjustments */
    .footer-columns {
        flex-direction: column;
        gap: 30px;
    }

    .footer-col {
        min-width: 100% !important; /* Ensure footer columns take full width */
    }

    /* Banner Adjustments */
    .hero-section-small { /* Renamed for consistency with provided HTML */
        min-height: 500px;
        padding-top: 60px;
        margin-top: -60px;
    }

    .hero-title { /* Renamed for consistency with provided HTML */
        font-size: 28px;
    }

    /* Assuming 'banner-text h1 > span:last-child' maps to a part of hero-title if dynamic */
    /* If not, this rule might need adjustment based on your specific HTML for 'Zone IQ' page */
    .hero-title > span:last-child {
        font-size: 32px;
    }

    /* Assuming 'banner-image' maps to something like 'hero-image' if present */
    /* If not, this rule might need adjustment based on your specific HTML for 'Zone IQ' page */
    .hero-image img {
        max-height: 40vh;
    }

    /* Assuming 'banner-content' maps to a container for hero-title/subtitle/button */
    /* If not, this rule might need adjustment based on your specific HTML for 'Zone IQ' page */
    .hero-container {
        flex-direction: column;
        gap: 20px;
    }

    /* Assuming 'banner-image' maps to something like 'hero-image' if present */
    /* If not, this rule might need adjustment based on your specific HTML for 'Zone IQ' page */
    .hero-image {
        justify-content: center;
    }

    /* Assuming 'banner-text' maps to the container for hero-title/subtitle */
    /* If not, this rule might need adjustment based on your specific HTML for 'Zone IQ' page */
    .hero-text {
        align-items: center;
        text-align: center;
    }

    .scroll-down {
        bottom: 20px;
    }
}

/* Smaller Mobile specific styles (up to 480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 24px;
    }

    .hero-title > span:last-child {
        font-size: 28px;
    }

    .scroll-text {
        font-size: 10px;
    }
}

/* Smaller Mobile specific styles (up to 600px) */
@media (max-width: 600px) {
    .glass-content-wrap {
        flex-direction: column;
        gap: 10px;
    }

    .glass-icons {
        justify-content: center;
    }
}

/* ==========================================================================
   8. Floating Action Buttons
   ========================================================================== */

/* --- WhatsApp Floating Button --- */
.whatsapp-float {
    position: fixed;
    /* Positioned above the back-to-top button */
    bottom: 100px; 
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.6);
}

.whatsapp-float i {
    /* Small adjustment for better icon centering */
    margin-top: 2px; 
}

/* --- Back to Top Progress Button --- */
.progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 60px;
    width: 60px;
    cursor: pointer;
    display: block;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(144, 101, 255, 0.2);
    z-index: 99;
    /* Initially hidden and offset */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 400ms linear;
}

/* This class is added by JS when user scrolls down */
.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Faint background glow on hover */
.progress-wrap::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #7e22ce 0%, #3b82f6 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.progress-wrap:hover::after {
    opacity: 0.1;
}

.progress-wrap .progress-icon {
    position: absolute;
    height: 100%;
    width: 100%;
    font-size: 18px;
    color: #9065ff;
    left: 0;
    top: 0;
    z-index: 1;
    transition: all 400ms linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-wrap:hover .progress-icon {
    color: #ffffff; /* Icon turns white on hover */
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: #9065ff; /* Progress circle color */
    stroke-width: 4;
    box-sizing: border-box;
    /* JS will animate stroke-dashoffset, transition smooths it */
    transition: all 200ms linear;
}