/* ==========================================================================  
   01. VARIABLES & CSS ROOT CONFIGURATION  
   ========================================================================== */  
:root {  
    /* Color Palette - Smooth Dark Theme (Default) */  
    --bg-primary: #14060f; /* Softened dark slate instead of pure black */
    --bg-secondary: #161922;        /* Smooth secondary container background */  
    --bg-navbar-mobile: rgb(58, 4, 58);     /* Mobile nav background for contrast */
    --text-navbar-mobile: #ffffff; /* White text for mobile nav */
    --bg-card: #1f2330;             /* Elevated card background with soft contrast */  
    --text-primary: #f0f2f5;        /* Off-white to eliminate harsh stark white contrast */  
    --text-secondary: #9da6b8;      /* Cool muted grey-blue for subtext */  
    /* Vibrant Purple Accent Palette */  
    --accent-purple: #9d4edd;  
    --accent-purple-bright: #c77dff;  
    --accent-purple-glow: rgba(157, 78, 221, 0.25);  
    /* Header Backgrounds */  
    --header-bg: rgba(15, 17, 23, 0.95);  
    /* Structural Rules */  
    --font-main: 'Poppins', system-ui, -apple-system, sans-serif;  
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  
    --max-width: 1200px;  
    --card-border: 1px solid rgba(255, 255, 255, 0.1);  
    --card-boxshadow: 1px 1px 3px rgba(255, 255, 255, 0.05), 8px 8px 16px rgba(255, 255, 255, 0.03), 16px 16px 32px rgba(255, 255, 255, 0.01);  
    --footer-divider-border: 0.01px solid rgba(230, 230, 230, 0.2);
    --header-box-shadow: 0 10px 20px rgba(255, 100, 255, 0.2);    
}  
/* Modern & Stylish Light Theme Variables */  
[data-theme="light"] {  
    /*--bg-primary: #f8fafc;*/ /* Modern slate-tinted off-white */  
    --bg-primary: linear-gradient(to right, lightgrey, rgb(225, 187, 248)); /* Gradient for a sleek, modern look */
    --bg-primary: hwb(273 65% 5%);
    --bg-secondary: #f1f5f9;/* Subtle contrast section background */
    --bg-navbar-mobile: purple;     /* Mobile nav background for contrast */
    --text-navbar-mobile: #ffffff; /* White text for mobile nav */
    --bg-card: #ffffff;/* Crisp white surface for elevated cards */  
    --text-primary: #0f172a;        /* Deep slate for high-contrast, modern typography */  
    --text-secondary: #64748b;      /* Refined neutral tone for secondary text */  
    /* Tuned Light Mode Purple Accent */  
    --accent-purple: #7c3aed;  
    --accent-purple-bright: #8b5cf6;  
    --accent-purple-glow: rgba(124, 58, 237, 0.15);  
    --header-bg: rgba(248, 250, 252, 0.95);
    --card-border: 1px solid rgba(0, 0, 0, 0.1);  
    --card-boxshadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.03), 0 16px 32px rgba(0, 0, 0, 0.01);   
    --footer-divider-border: 0.01px solid rgba(25, 25, 25, 0.2);  
    --header-box-shadow: 0 10px 20px rgba(200,50,255, 0.2);
}  
/* poppins-regular - latin */  
@font-face {  
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */  
  font-family: 'Poppins';  
  font-style: normal;  
  font-weight: 400;  
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */  
}  
/* Base Resets */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
html {  
    scroll-behavior: smooth;  
    font-size: calc(15px + 0.39vw);  
}  
body {  
    font-family: var(--font-main);  
    background-color: var(--bg-primary);  
    color: var(--text-primary);  
    line-height: 1.6;  
    transition: var(--transition);  
}  
html, body {  
  overflow-x: hidden;  
}  
a {  
    text-decoration: none;  
    color: inherit;  
}  
ul {  
    list-style: none;  
}  
.container {  
    max-width: var(--max-width);  
    margin: 0 auto;  
    padding: 0 1.5rem;  
}  
.section-padding {  
    padding: 5rem 0 0;
    background: var(--bg-primary);
}  
.section-title {  
    text-align: center;  
    /* margin-bottom: 3rem;  */
}  

.section-title h1 {  
    font-size: 1.8rem;
    line-height: 1.8rem;
    color: var(--text-primary);  
    margin-bottom: 2rem;  
}  
.section-title h2 {  
    font-size: 1.5rem;  
    color: var(--text-primary);  
    margin-bottom: 2rem;  
}  
.section-title p {  
    color: var(--text-secondary);  
}  

.service-card h2 {
    font-size: 1.25rem; 
}
.services-grid {
    margin-top: 2rem;
}

.photo-about-section, .photo-services-section {
  padding-top: 2rem;
}
/* ==========================================================================  
   02. HEADER SECTION & NAVIGATION  
   ========================================================================== */  
.header {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    z-index: 3500;  
    background-color: var(--header-bg);  
    backdrop-filter: blur(10px);  
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.08); */
    box-shadow: var(--header-box-shadow);
    transition: var(--transition);  
}  
.header-container {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    height: 3.3rem;
}

.logo-container {
    display: flex;
}
.logo-div {  
    display: flex;
}

.logo-photo {  
    height: 2.7rem;  
    width: 3rem;
}  
.logo-photo img {  
    width: 100%;  
    height: 100%;
    float: right;
}  
.logo {  
    font-size: 1rem;  
    font-weight: 700;  
    color: var(--text-primary);  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    align-items: flex-start;
    line-height: 20px;  
}  

.logo-accent {  
    color: var(--accent-purple-bright);  
    font-weight: 800;  
}  
.logo-x {
  display: none;
}
.nav-list {  
    display: flex;  
    gap: 2rem;  
}  
.nav-link {  
    font-weight: 600;  
    color: var(--text-secondary);  
    transition: var(--transition);  
}  
.nav-link:hover, .nav-link.active {  
    color: var(--accent-purple-bright);  
}  
.header-actions {  
    display: flex;  
    align-items: center;  
    gap: 1.5rem;  
}  
/* Theme Toggle Button */  
.theme-toggle {  
    background: none;  
    border: none;  
    color: var(--text-primary);  
    cursor: pointer;  
    transition: var(--transition);  
}  
.theme-toggle .fa-sun {  
    color: yellow;  
    font-size: 1.2rem;  
}  
.theme-toggle .fa-moon {  
    color: black;  
    font-size: 1.4rem;  
}  
.theme-toggle:hover {  
    color: var(--accent-purple-bright);  
}  
/* Mobile 3-Lines Toggle */  
.mobile-toggle {  
    display: none;  
    flex-direction: column;  
    justify-content: space-between;  
    width: 25px;  
    height: 18px;  
    background: transparent;  
    border: none;  
    cursor: pointer;  
}  
.mobile-toggle .bar {  
    width: 100%;  
    height: 3px;  
    background-color: var(--text-primary);  
    border-radius: 2px;  
    transition: var(--transition);  
    transition: all 0.5s ease-in-out;  
}  
.mobile-toggle :nth-child(2) {  
    background-color: var(--accent-purple-bright);  
}  
/* Hamburger active state animation */  
.mobile-toggle.active .bar:nth-child(1) {  
    transform: translateY(7.5px) rotate(135deg);  
}  
.mobile-toggle.active .bar:nth-child(2) {  
    opacity: 0;  
}  
.mobile-toggle.active .bar:nth-child(3) {  
    transform: translateY(-7.5px) rotate(-135deg);    
}  
/* ==========================================================================  
   03. MAIN SECTION -- HERO SECTION  
   ========================================================================== */  
.hero-section {  
    position: relative;  
    width: 100%;  
    height: 100vh;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    overflow: hidden;  
}  
/* Responsive Full-Viewport Background Figure */  
.hero-bg-figure {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    margin: 0;  
    z-index: 1;  
}  
.hero-bg-img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
    object-position: center;  
    mix-blend-mode: overlay;  
}  
/* Dark Blending Overlay */  
.hero-overlay {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background-color: rgba(5, 10, 30, 0.65);  
    z-index: 2;  
}  
.hero-content {  
    position: relative;  
    z-index: 3;  
    text-align: left;  
    max-width: 850px;  
    padding-top: 5%;  
}  
.hero-buttons {  
    display: flex;  
    column-gap: 2rem;  
}  
/* Container for the h1 to ensure stacking and indentation works */  
.hero-div h1 {  
    display: flex;  
    flex-direction: column;  
    /* Aligns both lines to the left edge of the container */  
    align-items: flex-start;   
    margin: 0 0 1.5rem 0; /* Example bottom margin */  
    padding: 0;  
}  
/* 1. Title Styling — Now SLIDES IN */  
.hero-title {  
    display: block; /* Required for transforms to work */  
    color: #ffffff;  
    letter-spacing: -1px;  
    font-size: 62px;  
    font-weight: 800;  
    text-shadow: 3px 3px 6px black;  
    line-height: 0.9;  
    /* Animation state at start */  
    opacity: 0;  
    /* ANIMATION SWAP: Uses slidein */  
    animation: slidein 1s ease-out forwards;  
    /* Start sooner as it's the primary line */  
    animation-delay: 0.2s;   
}  
/* 2. Tagline Styling — Now DROPS and BOUNCES */  
.hero-main {  
    display: block; /* Required for transforms to work */  
    color: rgba(230, 130, 255, 1); 
    -webkit-text-stroke: 0.05px black;  
    font-weight: 1000;  
    /* VISUAL LAYOUT: Adds the requested indentation */  
    margin: 0 auto;  
    margin-top: 0.5rem; /* Precise vertical gap beneath the title */  
    /* Animation state at start */  
    opacity: 0;  
    /* ANIMATION SWAP: Uses dropAndBounce */  
    animation: dropAndBounce 1.2s ease-out forwards;  
    /* Delay slightly to start AFTER the main title lands */  
    animation-delay: 0.7s;   
}  
/* ===========================  
   Keyframes (Animations)  
   =========================== */  
/* Drop and Bounce (Vertical Drop) */  
@keyframes dropAndBounce {  
    0% {  
        opacity: 0;  
        /* Drops from 100% viewport height above */  
        transform: translateY(-100vh);  
    }  
    /* First impact/landing */  
    70% {  
        opacity: 1;  
        transform: translateY(15px); /* Small squash past ground */  
    }  
    /* First rebound */  
    85% {  
        transform: translateY(-6px); /* Small bounce up */  
    }  
    /* Final settle position */  
    100% {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  
/* Slidein (Horizontal Slide-In from left) */  
@keyframes slidein {  
    0% {  
        /* Starts off-screen to the left (-1000px) */  
        transform: translateX(-1000px);  
        opacity: 0;  
    }  
    100% {  
        /* Ends at its natural CSS position */  
        transform: translateX(0);  
        opacity: 1;  
    }  
}  
.hero-description {  
    color: #fff;  
    margin: 2.5rem 0 2.5rem;  
    text-shadow: 3px 3px 6px black;  
    -webkit-text-stroke: 0.01px black;  
}  
.btn {  
    display: inline-block;  
    padding: 0.8rem 2rem;  
    font-weight: 600;  
    transition: var(--transition);  
    cursor: pointer;  
    border-radius: 50px;  
}  
.btn-explore-services {  
    border: 1px solid white;  
    color: white;  
    width: 50%;  
    background: rgba(138, 43, 226, 0.25);  
    box-shadow: 12px 12px 12px rgba(0,0,0,0.1);  
}  
.btn-get-started {  
    background-color: rgba(0,0,0, 0.25);  
    border: 1px solid white;  
    color: #ffffff;  
    box-shadow: 12px 12px 12px rgba(0,0,0,0.1);  
    width: 50%;  
}  

.btn-explore-services, .btn-get-started {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-explore-services:hover, .btn-get-started:hover {  
    background-color: var(--accent-purple);  
    transform: scale(1.02);  
}  

/* ==========================================================================
   DUAL-ROW CONTINUOUS MARQUEE SLIDER (NO HOVER PAUSE)
   ========================================================================= */
.marquee-section {
    padding: 3rem 0;
    background-color: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
    margin-top: 3rem;
}

.marquee-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
    user-select: none;
    /* Edge fade mask */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
    width: max-content;
}

/* Row 1: Leftward Infinite Movement */
.track-left {
    animation: scrollLeft 22s linear infinite;
}

/* Row 2: Rightward Infinite Movement */
.track-right {
    animation: scrollRight 26s linear infinite;
}

/* Individual Feature Box Styling */
.marquee-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    /* background-color: var(--bg-card);*/
    background-color: var(--accent-purple);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    color: var(--text-primary);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.marquee-box i {
    color: var(--accent-purple-bright);
    color: white;
    font-size: 1.1rem;
}

.marquee-box:hover {
    border-color: var(--accent-purple-bright);
    box-shadow: 0 0 15px var(--accent-purple-glow);
}

/* Light Theme Overrides */
[data-theme="light"] .marquee-box {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Keyframe Animations */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .track-left { animation-duration: 16s; }
    .track-right { animation-duration: 18s; }
    
    .marquee-box {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
    
    .marquee-section {
        margin-top: 0;
    }
}
/* ==========================================================================  
   04. OTHER MAIN SECTIONS (SERVICES & PRICING)  
   ========================================================================== */  
/*
.services-overview {  
    background-color: var(--bg-secondary);  
}  
*/
.services-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  
    gap: 2rem;  
}  
.service-card {  
    background-color: var(--bg-card);  
    padding: 2.5rem 1.5rem;  
    border-radius: 12px;  
    transition: var(--transition);  
    border: var(--card-border);  
    box-shadow: var(--card-boxshadow);  
    transform: scale(0.7);  
    opacity: 0.4;  
    transition: transform 0.5s ease, opacity 0.5s ease;  
    width: 100%;  
    height: auto;  
}  
.service-card.live {  
    transform: scale(1);  
    opacity: 1;  
}  
.service-card:hover {  
    transform: translateY(-5px);  
    border-color: var(--accent-purple-bright);  
    box-shadow: 0 8px 25px var(--accent-purple-glow);  
}  
.service-icon {  
    font-size: 2.5rem;  
    color: var(--accent-purple-bright);  
    margin-bottom: 1rem;  
}  
.service-card h3 {  
    margin-bottom: 0.8rem;  
    color: var(--text-primary);  
}  
.service-card p {  
    color: var(--text-secondary);  
    font-size: 0.95rem;  
}  
/* ==========================================================================  
   PRICING SWIPER & EQUAL-HEIGHT CARDS CSS  
   ========================================================================== */  
/* Swiper Outer Layout */  
.pricing-swiper {  
    width: 100%;  
    padding-bottom: 3.5rem !important; /* Space for pagination bullets */  
    overflow: hidden;  
}  
/* Force Flexbox alignment across slides for equal heights */  
.pricing-swiper .swiper-wrapper {  
    display: flex !important;  
    align-items: stretch !important; /* Forces all cards to match height */  
}  
.pricing-swiper .swiper-slide {  
    height: auto !important; /* Enables stretch height computation */  
    display: flex !important;  
}  
/* Card Outer Frame */  
.pricing-card {  
    display: flex;  
    flex-direction: column;  
    justify-content: space-between;  
    width: 100%;  
    height: 100%; /* Spans full height of stretch slide */  
    background-color: var(--bg-card);  
    /*border: var(--card-border);  */
    border-radius: 16px;  
    padding: 1.5rem 2rem;  
    position: relative;  
    box-sizing: border-box;  
    transition: var(--transition);  
    box-shadow: var(--card-boxshadow);  
}  

.pricing-card:hover {  
    /*transform: scale(1.01);  */
    border-color: var(--accent-purple-bright);  
    box-shadow: 0 10px 30px var(--accent-purple-glow);  
} 

/*  
.pricing-card.featured {  
    border-color: var(--accent-purple-bright);  
    box-shadow: 0 0 20px var(--accent-purple-glow);  
}  
*/  
/*  
.pricing-card .badge {  
    position: absolute;  
    top: 1.5rem;  
    right: 1.5rem;  
    background-color: var(--accent-purple);  
    color: #ffffff;  
    font-size: 0.75rem;  
    padding: 0.3rem 0.8rem;  
    border-radius: 20px;  
    font-weight: 600;  
}  
*/  

.pricing-header h2 {  
    font-size: 1.25rem;  
    font-weight: 700;  
    color:  #ffffff;
    margin-bottom: 0.2rem;  
}  
.plan-type {  
    display: block;  
    font-size: 0.8rem;  
    color: var(--text-secondary);  
    margin-bottom: 1rem;  
}  
.pricing-card .price {  
    font-size: 1.5rem;  
    font-weight: 800;  
    color: var(--accent-purple-bright);
    color: white;  
    /* margin-bottom: 1.5rem;  
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);  */
    padding-bottom: 1rem;  
}  
/* Feature List Flex Expansion */  
.pricing-features {  
    margin-bottom: 2rem;  
    flex-grow: 1; /* Pushes button down evenly */  
}  
.pricing-features li {  
    display: flex;  
    align-items: flex-start;  
    gap: 0.75rem;  
    margin-bottom: 0.5rem;  
    font-size: 0.8rem;  
    color: var(--text-secondary);  
    line-height: 1.4;  
}  
.pricing-features i {  
    color: var(--accent-purple-bright);  
    margin-top: 0.2rem;  
    flex-shrink: 0;  
}

.pricing-main-header {
    width: calc(100% + 4rem);         /* Expands past the card's left/right padding (2rem + 2rem) */
    margin-top: -1.5rem;              /* Pulls it up to cover the top padding of the card */
    margin-left: -2rem;               /* Pulls it to the left edge of the card */
    margin-right: -2rem;              /* Pulls it to the right edge of the card */
    background-color: purple;         /* Your desired background color */
    padding: 1.5rem 2rem 0.5rem 2rem; /* Re-applies padding inside the header so text isn't cramped */
    border-top-left-radius: 16px;     /* Matches the card's 16px border radius */
    border-top-right-radius: 16px;    /* Matches the card's 16px border radius */
    margin-bottom: 1.5rem;
}


/* "Choose Plan" Button Locked to Bottom */  
.pricing-card .btn-full {  
    /*display: block; */ 
    display: flex;  
    justify-content: center;  
    align-items: center;  
    width: 100%;  
    text-align: center;  
    /*padding: 0.9rem 1.5rem;  */
    font-size: 1rem;  
    font-weight: 600;  
    border-radius: 30px;  
    /*margin-top: auto;*/ /* Guarantees exact bottom alignment */  
    background-color: var(--accent-purple);  
    color: #ffffff;  
    border: none;  
    box-shadow: 0 4px 15px var(--accent-purple-glow);  
    transition: var(--transition);  
}  
.pricing-card .btn-full:hover {  
    background-color: var(--accent-purple-bright);  
    transform: translateY(-2px);  
}  
.btn-secondary { 
    background-color: var(--accent-purple); 
    color: white; 
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center; 
} 
.btn-primary { 
background-color: var(--accent-purple); 
color: white; 
    font-weight: 600; 
} 
/* Swiper Pagination Styling */  
.pricing-swiper .swiper-pagination {  
    bottom: 0 !important;  
}  
.pricing-swiper .swiper-pagination-bullet {  
    background: var(--text-secondary);  
    opacity: 0.4;  
    width: 10px;  
    height: 10px;  
    margin: 0 5px !important;  
    transition: var(--transition);  
}  
.pricing-swiper .swiper-pagination-bullet-active {  
    background: var(--accent-purple-bright);  
    opacity: 1;  
    width: 28px;  
    border-radius: 6px;  
}  
/* Light Mode Overrides */  
/*  
[data-theme="light"] .pricing-card {  
    border: 1px solid rgba(0, 0, 0, 0.08);  
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);  
}  
*/  
[data-theme="light"] .pricing-card .price {  
    border-bottom-color: rgba(0, 0, 0, 0.08);  
}  
/* ==========================================================================  
   05. FOOTER SECTION  
   ========================================================================== */  
.footer {  
    background-color: var(--bg-secondary);  
    padding-top: 4rem;
    margin-top: 5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);  
}  
.footer-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  
    gap: 2.5rem;  
    margin-bottom: 2rem;  
}  
.footer-brand p {  
    color: var(--text-secondary);  
    margin-top: 1rem;  
    font-size: 0.9rem;  
}  
.logo-footer {  
    font-size: 1.1rem;  
    font-weight: 800;  
    color: var(--text-primary);  
    display: flex;  
    column-gap: 0.3rem;  
    line-height: 20px;  
}  
.logo-accent-footer {  
    color: var(--accent-purple-bright);  
}  
.footer-links h3, .footer-contact h3, .footer-socials h3 {  
    color: var(--text-primary);  
    margin-bottom: 1.2rem;  
    font-size: 1rem;  
}  
.footer-links ul li {  
    margin-bottom: 0.5rem;  
    line-height: 1.2rem;  
}  
.footer-links ul li a {  
    color: var(--text-secondary);  
    transition: var(--transition);  
    font-size: 0.9rem;  
}  
.footer-links ul li a:hover {  
    color: var(--accent-purple-bright);  
}  
.footer-contact p {  
    color: var(--text-secondary);  
    margin-bottom: 0.6rem;  
    font-size: 0.9rem;  
}  
.social-icons {  
    display: flex;  
    gap: 1rem;  
}  
.social-icons a {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    width: 40px;  
    height: 40px;  
    background-color: var(--bg-card);  
    color: var(--text-primary);  
    transition: var(--transition);  
}  
.social-icons a:hover {  
    background-color: var(--accent-purple-bright);  
    color: #ffffff;  
    transform: translateY(-3px);  
}  
.footer-divider {  
    border: none;  
    /*border-top: 1px solid rgba(255, 255, 255, 0.1);  */
    border-top: var(--footer-divider-border);  
    margin-bottom: 0.8rem;  
}  
.footer-bottom {  
    padding-bottom: 0.8rem;  
    text-align: center;  
    color: var(--text-secondary);  
    font-size: 0.85rem;  
}  
/* ==========================================================================  
   06. WHATSAPP WIDGET  
   ========================================================================== */  
/* Floating Button */  
.wa-btn {  
position: fixed;  
right: 25px;  
bottom: 100px;  
width: 60px;  
    height: 60px;  
    background: #25D366;  
    border-radius: 50%;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
   cursor: pointer;  
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);  
z-index: 10;  
}  
.wa-btn i {  
font-size: 2.7rem;  
color: rgba(255, 255, 255, 0.9);  
}  
/* Chat Box */  
.wa-chat-box {  
    width: 30%;  
    height: auto;  
    max-height: 70vh;  
    background: #fff;  
    position: fixed;  
    bottom: 0;  
    right: 0;  
    border-radius: 12px;  
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);  
    display: none;  
    flex-direction: column;  
    overflow: hidden;  
    z-index: 10;  
}  
/* Animation class */  
.wa-chat-box.open {  
    animation: slideUp 0.8s ease;  
}  
@keyframes slideUp {  
    from { transform: translateY(20px); opacity: 0; }  
    to { transform: translateY(0); opacity: 1; }  
}  
/* Header */  
.wa-header{  
    background:#075E54;  
    color:white;  
    padding:12px;  
    display:flex;  
    align-items:center;  
    gap:10px;  
    position:relative;  
}  
.agent-img {  
    width: 45px;  
    height: 45px;  
    border-radius: 50%;  
}  
.agent-name {   
font-weight: bold;  
}  
.agent-status {  
font-size: 12px; opacity: 0.8;  
}  
/* Close Button */  
.wa-close{  
    position:absolute;  
    right:1rem;  
    top:50%;  
    transform:translateY(-50%);  
    width:2rem;  
    height:2rem;  
    background:rgb(7,115,84);  
    border-radius:50%;  
    display:flex;  
    justify-content:center;  
    align-items:center;  
    cursor:pointer;  
    font-size:1.5rem;  
    font-weight:400;  
    color:#fff;  
    line-height:0;  
    padding:1%;  
}  
/* Body */  
.wa-body {  
            flex: 1;  
            padding: 12px;  
            background: #ECE5DD;  
            overflow-y: auto;  
            display: flex;          /* Added flex layout */  
            flex-direction: column; /* Stacks messages top to bottom */  
}  
.msg {  
        max-width: 80%;  
        padding: 10px 12px;  
        margin-bottom: 10px;  
        border-radius: 8px;  
        font-size: 14px;  
        line-height: 1.4;  
        color: #111111 !important; /* Forces dark readable text */  
}  
    /* Ensure paragraph tags inside bubbles override global site styles */  
.msg p {  
    color: #111111 !important;  
    margin: 0 0 6px 0; /* Replaces ugly <br> tags with proper spacing */  
    padding: 0;  
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}  
.msg p:last-child {  
    margin-bottom: 0;  
}  
.agent {  
    background: white;  
    align-self: flex-start;  
}  
.user {  
    background: #DCF8C6;  
    align-self: flex-end;  
}  
/* Typing Indicator */  
.typing {  
    background: white;  
    padding: 8px 12px;  
    width: 50px;  
    border-radius: 20px;  
    gap: 4px;  
    display: none; /* keep only this */  
            align-items: center;    /* Fix alignment */  
            justify-content: center; /* Fix alignment */  
}  
.typing span {  
            display: inline-block; /* Essential so width/height work */  
            width: 6px;  
            height: 6px;  
            background: #555;      /* Darkened from #999 for better visibility */  
            border-radius: 50%;  
            animation: blink 1.4s infinite both;  
}  
.typing span:nth-child(2) { animation-delay: .2s; }  
.typing span:nth-child(3) { animation-delay: .4s; }  
@keyframes blink {  
    0% { opacity: .2; }  
    20% { opacity: 1; }  
    100% { opacity: .2; }  
}  
/* Footer */  
    .wa-footer {  
        position: sticky;  
        bottom: 0;  
        background:#f0f0f0;  
        z-index: 5;  
        display: flex;  
        padding: 10px;  
    }  
.wa-footer input {  
        flex: 1;  
        padding: 8px 12px;  
        border-radius: 20px;  
        border: 1px solid #ccc;  
        background: #fff;  /* Ensure background is clean white */  
        color: #333;       /* High-contrast readable text */  
        outline: none;  
}  
.wa-footer button {  
        background: #25D366;  
        border: none;  
        color: white;  
        padding: 0;           /* Clean padding */  
        border-radius: 50%;  
        margin-left: 8px;  
        cursor: pointer;  
        width: 40px;  
        height: 40px;  
        display: flex;        /* Center the arrow icon */  
        align-items: center;  
        justify-content: center;  
        font-size: 16px;  
}  
    /* ==========================================================================  
   07. SUBPAGE SPECIFIC STYLES & CONTACT FORM  
   ========================================================================== */  
.page-main {  
    padding-top: 2rem;
    min-height: calc(100vh - 80px);  
}  

.contact-section {  
    padding-top: 2rem;
}  
.contact-wrapper {  
    display: grid;  
    grid-template-columns: 1fr 1.5fr;  
    gap: 2.5rem;  
    align-items: start;  
}  
/* Contact Info Card */  
.contact-info-card {  
    background-color: var(--bg-card);  
    border: 1px solid rgba(255, 255, 255, 0.08);  
    border-radius: 16px;  
    padding: 2.5rem;  
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);  
}  
.contact-info-card h3 {  
    font-size: 1rem;  
    color: var(--text-primary);  
    margin-bottom: 0.8rem;  
}  
.info-desc {  
    color: var(--text-secondary);  
    font-size: 0.95rem;  
    margin-bottom: 2rem;  
}  
.info-list {  
    display: flex;  
    flex-direction: column;  
    gap: 1.8rem;  
    margin-bottom: 2.5rem;  
}  
.info-item {  
    display: flex;  
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.2rem;  
}  
.info-icon {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    width: 48px;  
    height: 48px;  
    background-color: var(--bg-secondary);  
    border-radius: 12px;  
    color: var(--accent-purple-bright);  
    font-size: 1.2rem;  
    flex-shrink: 0;  
    border: 1px solid rgba(138, 43, 226, 0.2);  
}  

.info-text {  
    display: flex;  
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.2rem;  
}
.info-text h4 {  
    font-size: 1rem;  
    color: var(--text-primary);  
    margin-bottom: 0.2rem;  
}  
.info-text p, .info-text a {  
    color: var(--text-secondary);  
    font-size: 0.9rem;  
    transition: var(--transition);  
}  
.info-text a:hover {  
    color: var(--accent-purple-bright);  
}  

.contact-socials {  
    display: flex;  
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;  
    
}
.contact-socials h4 {  
    font-size: 1rem;  
    color: var(--text-primary);  
    margin-bottom: 1rem;  
}  
/* Form Styles */  
.contact-form-card {  
    background-color: var(--bg-card);  
    border: 1px solid rgba(255, 255, 255, 0.08);  
    border-radius: 16px;  
    padding: 2.5rem;  
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);  
}  
.contact-form {  
    display: flex;  
    flex-direction: column;  
    gap: 1.5rem;  
}  
.form-row {  
    display: grid;  
    grid-template-columns: 1fr 1fr;  
    gap: 1.5rem;  
}  
.form-group {  
    display: flex;  
    flex-direction: column;  
    gap: 0.5rem;  
}  
.form-group label {  
    font-size: 0.9rem;  
    font-weight: 600;  
    color: var(--text-primary);  
}  
.form-group label .required {  
    color: var(--accent-purple-bright);  
}  
.input-wrapper {  
    position: relative;  
    display: flex;  
    align-items: center;  
}  
.input-icon {  
    position: absolute;  
    left: 1.2rem;  
    color: var(--text-secondary);  
    font-size: 1rem;  
    pointer-events: none;  
    transition: var(--transition);  
}  
.textarea-wrapper .input-icon {  
    top: 1.2rem;  
}  
.input-wrapper input,  
.input-wrapper textarea {  
    width: 100%;  
    padding: 0.9rem 1rem 0.9rem 3rem;  
    background-color: var(--bg-secondary);  
    border: 1px solid rgba(255, 255, 255, 0.1);  
    border-radius: 10px;  
    color: var(--text-primary);  
    font-family: var(--font-main);  
    font-size: 0.95rem;  
    outline: none;  
    transition: var(--transition);  
}  
.input-wrapper textarea {  
    resize: vertical;  
    min-height: 120px;  
}  
/* Light Mode Input Adjustments */  
[data-theme="light"] .input-wrapper input,  
[data-theme="light"] .input-wrapper textarea {  
    border: 1px solid rgba(0, 0, 0, 0.12);  
}  
.input-wrapper input:focus,  
.input-wrapper textarea:focus {  
    border-color: var(--accent-purple-bright);  
    box-shadow: 0 0 10px var(--accent-purple-glow);  
}  
.input-wrapper input:focus + .input-icon,  
.input-wrapper textarea:focus + .input-icon,  
.input-wrapper:focus-within .input-icon {  
    color: var(--accent-purple-bright);  
}  
.btn-submit {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    gap: 0.8rem;  
    padding: 1rem 2rem;  
    font-size: 1rem;  
    border: none;  
    width: 100%;  
    color: white; 
}  
/* ==========================================================================  
   06. MEDIA QUERIES & RESPONSIVE DESIGN  
   ========================================================================== */  
@media (max-width: 768px) {  

    .header-container {
        padding-left: 0.4rem;
    }

    .mobile-toggle {
        display: flex;
    }


    /* =========================================
       MOBILE NAVBAR
       ========================================= */

    .navbar {

        position: fixed;

        top: 3.3rem;
        right: 0;

        width: 80%;

        height: 80vh;
        height: 80dvh;

        border-bottom-left-radius: 20px;

        /* background: rgba(92, 35, 145, 1);
        background-color: var(--header-bg); */
        background-color: var(--bg-navbar-mobile);

        z-index: -15;

        display: flex;
        justify-content: center;
        align-items: center;

        /*
         * Initial / closed position
         *
         * Completely outside viewport.
         */
        transform:
            translate(100%, -100%)
            rotate(0deg);

        transform-origin: center center;

        pointer-events: none;

        will-change: transform;
        visibility: hidden;
    }


    /* =========================================
       OPEN
       ========================================= */

    .navbar.active {

        pointer-events: auto;

       visibility: visible;
        animation:
            navbarOpen 0.4s ease-in-out forwards;
    }


    /* =========================================
       CLOSE
       ========================================= */

    .navbar.is-closing {

        pointer-events: none;

       visibility: visible;
        animation:
            navbarClose 0.4s ease-in-out forwards;
    }


    /* =========================================
       OPEN ANIMATION
       ========================================= */

    @keyframes navbarOpen {

        /*
         * Start outside viewport
         */
        0% {

            transform:
                translate(0, 0)
                rotate(25deg);
        }

        /*
         * Now perform the FULL 360°
         * while completely visible.
         */
        50% {

            transform:
                translate(0, -50%)
                rotate(0deg);
        }
        75% {

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

            transform:
                translate(0, 0)
                rotate(0deg);
        }
    }


    /* =========================================
       CLOSE ANIMATION
       ========================================= */

    @keyframes navbarClose {

        /*
         * Start fully visible.
         */
        0% {

            transform:
                translate(0, 0)
                rotate(360deg);
        }


        /*
         * Complete the 360° rotation
         * while still completely visible.
         */
        70% {

            transform:
                translate(0, 0)
                rotate(180deg);
        }


        /*
         * NOW leave the viewport.
         */
        100% {

            transform:
                translate(100%, -100%)
                rotate(0deg);
        }
    }


    /* =========================================
       NAVIGATION LINKS
       ========================================= */

    .nav-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }

    .nav-link {
        font-weight: 700;
        color: var(--text-navbar-mobile);
    }

    
    .hero-content {  
        padding: 5% 10% 0;  
    }  
    .hero-title {  
        font-size: 1.5rem;  
        margin-top: 2rem;  
    }  
    .hero-main {  
        font-size: 1.5rem;  
    }  
    .hero-description {  
        font-size: 15px;  
    }  
    .hero-buttons {  
        display: flex;  
        flex-direction: column;  
        row-gap: 1rem;  
    }  
   .btn {  
      height: 45px;  
      display: flex;  
      align-items: center; 
   }  
    .btn-explore-services {  
        width: 75%;  
    }  
    .btn-get-started {  
        width: 100%;  
    }  

    .btn-explore-services, .btn-get-started {
        justify-content: flex-start;
    }

    .wa-chat-box {     
        /*inset: 0;*/    /* shorthand for top: 0; right: 0; bottom: 0; left: 0; */  
        width: 80%;
        z-index: 500000;
    }  
    .wa-btn{  
        right:25px;  
        bottom:25px;  
    }  
/* Stack contact sidebar and form vertically */  
    .contact-wrapper {  
        display: flex !important;  
        flex-direction: column !important;  
        gap: 1.5rem !important;  
        width: 100% !important;  
    }  
    /* Stack form row (Mobile Number & Email) into 1 column */  
    .form-row {  
        display: flex !important;  
        flex-direction: column !important;  
        gap: 1.5rem !important;  
        width: 100% !important;  
    }  
    /* Adjust padding for small screens */  
    .contact-info-card,   
    .contact-form-card {  
        padding: 1.5rem !important;  
        width: 100% !important;  
        box-sizing: border-box !important;  
    }  
    /* Ensure inputs take full available width */  
    .input-wrapper input,  
    .input-wrapper textarea {  
        width: 100% !important;  
        box-sizing: border-box !important;  
    }  
}  



/* Container Frame for Xpand365 TechTower */ 
.video {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 3rem auto 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #0f172a;
  /* border: 1px solid rgba(255, 255, 255, 0.1);*/
  box-shadow: 
    0 10px 25px -5px rgba(15, 23, 42, 0.2),
    0 8px 10px -6px rgba(15, 23, 42, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Video Player */  
.intro-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: inherit;
  vertical-align: middle;
}

/* Fallback Notice */  
.intro-video p {
  padding: 1.5rem;
  color: #94a3b8;
  font-size: 0.95rem;
  text-align: center;
}

/* Responsive adjustment for tablets & mobile */  
@media (max-width: 768px) {
  .video {
    max-width: 100%;
    border-radius: 0;
    /*margin: 1.5rem 0;*/
  }

}