/*
|--------------------------------------------------------------------------
| 1. CSS RESET/BASE STYLES
|--------------------------------------------------------------------------
| Styles for the overall document body and non-element-specific utilities.
*/

/* 1.1 Professional Scrollbar Styles */
/* For Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0f0f11;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    /* Gradient from a darker blue to the main blue-700 color */
    background: linear-gradient(180deg, #1e40af, #1d4ed8); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563eb, #3b82f6); 
}

* {
    scrollbar-width: thin;
    scrollbar-color: #1d4ed8 #0f0f11;
}

/* 1.2 Fixed/Utility Elements */
#myCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10; /* Ensures background is behind everything */
}

#whatsappBtn {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#whatsappBtn:hover {
    transform: scale(1.15) rotate(-3deg);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5); /* Clear shadow for hover effect */
}

/*
|--------------------------------------------------------------------------
| 2. NAVIGATION (MOBILE)
|--------------------------------------------------------------------------
| Styles for collapsible mobile menus.
*/

/* 2.1 Mobile Nav Panel (Main Menu) */
.mobile-nav-panel {
    max-height: 0;
    /* Use 'max-height' for smooth CSS transitions on dynamic heights */
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.mobile-nav-panel.open {
    max-height: 80vh;
    overflow-y: auto;
}

/* 2.2 Mobile Submenu (Nested Menu) */
.mobile-submenu {
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

.mobile-submenu.open {
    max-height: 500px; /* Use a large enough value to accommodate content */
}

/*
|--------------------------------------------------------------------------
| 3. NAVIGATION (DESKTOP DROPDOWN)
|--------------------------------------------------------------------------
| Styles for the professional desktop mega-menu dropdowns.
*/

@media (min-width: 1024px) {
    /* 3.1 Dropdown Area Base */
    .dropdown-area {
        display: none; /* Initially hidden, controlled by hover */
        opacity: 0;
        pointer-events: none;
        width: 500px; /* Consistent two-column width */
        z-index: 60;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(10px); /* Initial offset for smooth drop */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* 3.2 Hover State & Arrow Rotation */
    .group:hover > a .dropdown-arrow {
        transform: rotate(180deg);
    }

    .group:hover > a + .dropdown-area {
        display: block !important;
        opacity: 1;
        transform: translateX(-50%) translateY(0); /* Drop up into position */
        pointer-events: auto;
    }

    /* 3.3 Modifier: Right-Aligned Dropdown (for last item) */
    .right-aligned-drop .dropdown-area {
        left: auto;
        right: 0;
        transform: translateX(0) translateY(10px); /* No X translation */
    }

    .right-aligned-drop:hover > a + .dropdown-area {
        transform: translateX(0) translateY(0); /* Drop up into position (right-aligned) */
    }

    /* 3.4 Dropdown Item Styling (Icon + Text) */
    .desktop-dropdown-item {
        display: flex;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 8px;
        color: #4b5563; /* Gray text for normal state */
        transition: background-color 0.15s, color 0.15s;
        text-decoration: none;
        align-items: center; /* Vertical centering */
    }

    .desktop-dropdown-item > div {
        /* Ensure text remains left-aligned after the icon, overriding potential framework defaults */
        flex-grow: 0;
        text-align: left;
    }

    .desktop-dropdown-item:hover {
        background-color: #ebf5ff; /* Light blue hover */
        color: #1e40af; /* Dark blue text on hover */
    }

    .desktop-dropdown-item:hover .item-icon {
        color: #2563eb; /* Blue icon on hover for consistency */
    }
}

/*
|--------------------------------------------------------------------------
| 4. HERO SECTION ANIMATIONS (PERFORMANCE CRITICAL)
|--------------------------------------------------------------------------
| Styles for complex background effects. Kept minified for SEO performance.
| NOTE: These are the heavy styles and should be kept together.
*/

.quantum-particles{background:transparent}
.quantum-particle{position:absolute;background:var(--particle-color,#00f3ff);border-radius:50%;pointer-events:none;filter:blur(1px);animation:quantum-float 15s infinite linear}
@keyframes quantum-float{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translate(calc(100vw * var(--move-x, 1)),calc(100vh * var(--move-y, 1))) rotate(360deg) scale(0);opacity:0}}
.holographic-matrix{perspective:1000px}
.grid-layer{position:absolute;inset:0;background-image:linear-gradient(rgba(0,243,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,243,255,.1) 1px,transparent 1px);background-size:50px 50px;animation:grid-move 20s infinite linear}
.grid-1{transform:translateZ(0);animation-duration:25s}
.grid-2{transform:translateZ(100px);background-size:40px 40px;animation-duration:20s;animation-direction:reverse}
.grid-3{transform:translateZ(200px);background-size:30px 30px;animation-duration:15s}
@keyframes grid-move{0%{transform:translate(0,0)}100%{transform:translate(50px,50px)}}
.vortex{position:absolute;border-radius:50%;background:conic-gradient(from 0deg,transparent 0%,#00f3ff 10%,#0066ff 30%,#aa00ff 50%,#ff00aa 70%,#00f3ff 90%,transparent 100%);animation:vortex-spin 15s infinite linear;filter:blur(20px)}
.vortex-1{width:300px;height:300px;top:10%;left:10%;animation-duration:20s}
.vortex-2{width:400px;height:400px;bottom:20%;right:15%;animation-duration:25s;animation-direction:reverse}
.vortex-3{width:200px;height:200px;top:60%;left:70%;animation-duration:18s}
@keyframes vortex-spin{from{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.2)}to{transform:rotate(360deg) scale(1)}}
.neural-path{position:absolute;background:linear-gradient(90deg,transparent,#00f3ff,transparent);height:1px;animation:neural-pulse 4s infinite ease-in-out}
.path-1{top:20%;left:0;width:100%;animation-delay:0s}
.path-2{top:40%;left:0;width:100%;animation-delay:-1s}
.path-3{top:60%;left:0;width:100%;animation-delay:-2s}
.path-4{top:80%;left:0;width:100%;animation-delay:-3s}
.path-5{top:30%;left:0;width:100%;animation-delay:-.5s}
@keyframes neural-pulse{0%,100%{opacity:.1;transform:scaleX(.8)}50%{opacity:.8;transform:scaleX(1)}}
.energy-orb{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(0,243,255,.8) 0%,rgba(0,102,255,.4) 30%,rgba(170,0,255,.2) 60%,transparent 100%);filter:blur(30px);animation:energy-float 12s infinite ease-in-out}
.orb-1{width:120px;height:120px;top:20%;left:20%;animation-delay:0s}
.orb-2{width:80px;height:80px;top:60%;left:70%;animation-delay:-3s}
.orb-3{width:150px;height:150px;top:40%;left:80%;animation-delay:-6s}
.orb-4{width:100px;height:100px;top:70%;left:30%;animation-delay:-9s}
.orb-5{width:200px;height:200px;top:10%;left:60%;animation-delay:-12s}
@keyframes energy-float{0%,100%{transform:translate(0,0) scale(1);opacity:.3}25%{transform:translate(50px,-30px) scale(1.1);opacity:.6}50%{transform:translate(20px,40px) scale(.9);opacity:.4}75%{transform:translate(-30px,20px) scale(1.05);opacity:.7}}
.cyber-glow{position:absolute}
.glow-effect{position:absolute;background:radial-gradient(circle,rgba(0,243,255,.6) 0%,rgba(0,102,255,.3) 40%,transparent 70%);filter:blur(60px);animation:cyber-pulse 8s infinite alternate}
.glow-1{width:400px;height:400px;top:-100px;left:-100px;animation-delay:0s}
.glow-2{width:300px;height:300px;bottom:-50px;right:-50px;animation-delay:-2s}
.glow-3{width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-4s}
.glow-4{width:350px;height:350px;top:80%;left:20%;animation-delay:-6s}
@keyframes cyber-pulse{0%{opacity:.2;transform:scale(1)}100%{opacity:.5;transform:scale(1.3)}}
.digital-rain{background:linear-gradient(180deg,transparent 0%,rgba(0,243,255,.05) 10%,rgba(0,243,255,.1) 20%,transparent 30%,transparent 70%,rgba(0,243,255,.1) 80%,rgba(0,243,255,.05) 90%,transparent 100%);animation:digital-rain-fall 3s infinite linear;mask:linear-gradient(transparent 0%,black 20%,black 80%,transparent 100%)}
@keyframes digital-rain-fall{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
.wave{position:absolute;bottom:0;left:0;width:100%;height:100px;background:linear-gradient(90deg,transparent,rgba(0,243,255,.1),rgba(0,102,255,.2),rgba(170,0,255,.1),transparent);animation:wave-move 6s infinite ease-in-out;mask:linear-gradient(transparent 0%,black 100%)}
.wave-1{animation-delay:0s;height:80px}
.wave-2{animation-delay:-2s;height:120px}
.wave-3{animation-delay:-4s;height:100px}
@keyframes wave-move{0%,100%{transform:translateX(0) scaleY(1);opacity:.3}50%{transform:translateX(50px) scaleY(1.2);opacity:.6}}
@keyframes floatGlow{0%{transform:translate(0px,0px) scale(1)}25%{transform:translate(-40px,-20px) scale(1.05)}50%{transform:translate(-10px,30px) scale(.95)}75%{transform:translate(30px,-10px) scale(1.08)}100%{transform:translate(0px,0px) scale(1)}}

/*
|--------------------------------------------------------------------------
| 5. ANIMATION UTILITY CLASSES
|--------------------------------------------------------------------------
| Reusable animation declarations and related keyframes.
*/

/* Core Keyframes (Minified as above) */
@keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
@keyframes pulse-slow{0%,100%{opacity:.3}50%{opacity:.6}}
@keyframes pulse-medium{0%,100%{opacity:.2}50%{opacity:.4}}
@keyframes pulse-slower{0%,100%{opacity:.1}50%{opacity:.3}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(34,211,238,.3)}50%{box-shadow:0 0 40px rgba(34,211,238,.6),0 0 60px rgba(34,211,238,.3)}}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spin-medium{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes spin-slower{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}
@keyframes blink-cursor{0%,50%{opacity:1}51%,100%{opacity:0}}

/* Utility Class Mapping */
.glow-move{animation:floatGlow 12s ease-in-out infinite}
.animate-fade-in-up{animation:fade-in-up 0.8s ease-out forwards;opacity:0}
.animate-pulse-slow{animation:pulse-slow 6s ease-in-out infinite}
.animate-pulse-medium{animation:pulse-medium 4s ease-in-out infinite}
.animate-pulse-slower{animation:pulse-slower 8s ease-in-out infinite}
.animate-pulse-glow{animation:pulse-glow 3s ease-in-out infinite}
.animate-spin-slow{animation:spin-slow 20s linear infinite}
.animate-spin-medium{animation:spin-medium 15s linear infinite}
.animate-spin-slower{animation:spin-slower 25s linear infinite}

/* Typewriter Cursor (Specific Element) */
.typewriter-cursor::after{content:"|";animation:blink-cursor 0.7s infinite;color:#60a5fa;font-weight:300}

/**************************************************/

/*for faq2.php*/

.faq2 {
  padding-left: 1rem;
  padding-right: 1rem;
  overflow: visible !important;
}
 /*Custom Animations */
@keyframes faq-float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}
@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
  }
}
.faq-item {
  animation: faq-float 6s ease-in-out infinite;
}

.faq-item:nth-child(even) {
  animation-delay: -3s;
}
.faq-item:hover {
  animation: glow 2s ease-in-out infinite;
}

 Perfect Smooth FAQ Transitions 
.faq-answer {
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.faq-content {
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-origin: top !important;
}

.faq-item.active .faq-content {
  transform: scaleY(1) !important;
  opacity: 1 !important;
  max-height: 500px !important;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg) !important;
}

.faq-item.active .faq-icon svg {
  transform: rotate(180deg) !important;
}

/* for sticky faq image section */
.sticky-col{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 150px; /* Distance from top of screen */
    align-self: start; /* CRITICAL: Prevents the column from stretching to full height */
}
/*section{*/
/*    overflow: visible !important;*/
/*}*/

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar for webkit */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #3b82f6, #06b6d4);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #2563eb, #0891b2);
}

/* Prevent layout shift during animation */
.faq-answer {
  will-change: transform, opacity, max-height;
}

.faq-content {
  will-change: transform, opacity, max-height;
}


/*******************************/

/*** from newsletter.php **/

/* Additional micro-interactions */

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

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/**********************************/
/***** from plans.php *****/

/*updated css*/
.marquee-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.marquee {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scroll var(--speed) linear infinite;
}

/* speed control */
:root {
    --speed: 30s;   /* desktop */
}

@media (max-width: 768px) {
    :root {
        --speed: 15s;   /* mobile = faster */
    }
}

.brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 100%;
    padding: 0 16px;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .brand-item { width: 160px; }
}
@media (min-width: 1024px) {
    .brand-item { width: 200px; }
}

.brand-logo {
    height: 32px;
    max-width: 100%;
    object-fit: contain;
    opacity: 0.6;
    transition: opacity .3s ease;
}
.brand-logo:hover {
    opacity: 1;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}


/********************************/
/**** for show_post.php ***/
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Modal fade + scale + float animation */
.modal-content {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
    transition:
        opacity 0.35s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); /* Smooth spring-like easing */
}

/* When modal is open */
.modal-open {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* to hide the horizontal scrollbar */
.custom-hide-scrollbar {
    /* For Microsoft Edge and Internet Explorer */
    -ms-overflow-style: none;
    /* For Firefox */
    scrollbar-width: none;
}

/* For WebKit browsers (Chrome, Safari) */
.custom-hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ----------------------------- */
/* Fixed-height scrollable comments box */
/* ----------------------------- */
.comments-container {
    max-height: 160px;      /* Adjust height as needed */
    overflow-y: auto;       /* Enable vertical scroll */
    overflow-x: hidden;     /* Prevent horizontal scroll */
    padding-right: 6px;     /* Prevent text from hiding under scrollbar */
}

/* Optional: nicer scrollbar styling */
.comments-container::-webkit-scrollbar {
    width: 6px;
}

.comments-container::-webkit-scrollbar-thumb {
    background: #4b5563;      /* Gray-600 */
    border-radius: 4px;
}

.comments-container::-webkit-scrollbar-thumb:hover {
    background: #6b7280;      /* Gray-500 */
}

.comments-container::-webkit-scrollbar-track {
    background: transparent;
}


/* for popular_search.php */
/* Add the necessary CSS for the subtle background animations */
@keyframes pulse-slow {
  0%,
  100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.25;
  }
}
@keyframes pulse-slower {
  0%,
  100% {
    opacity: 0.05;
  }
  50% {
    opacity: 0.15;
  }
}
.animate-pulse-slow {
  animation: pulse-slow 8s ease-in-out infinite;
}
.animate-pulse-slower {
  animation: pulse-slower 10s ease-in-out infinite;
}


/*** this for contact_us.php ***/
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out;
}