/*
Theme Name: UnisourceBD
Description: WordPress theme for Unisource Technology
Version: 1.0
Author: Unisource Technology
*/

/* Hide WordPress admin bar on frontend */
#wpadminbar {
    display: none !important;
}

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Tailwind CSS */
@import url('https://cdn.tailwindcss.com');

/* Lucide Icons */
@import url('https://unpkg.com/lucide@latest/dist/umd/lucide.js');

/* FontAwesome Icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Custom CSS Variables */
:root {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.145 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
}

body {
    font-family: 'Inter', sans-serif;
}

/* Plasma Background */
.plasma-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at 20% 80%, rgb(28 50 104) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgb(28 45 71) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgb(2 187 255 / 30%) 0%, transparent 50%);
    animation: plasma-move 20s ease-in-out infinite;
}

@keyframes plasma-move {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

/* Glass Effects */
.liquid-glass-header {
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.brand-text {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.nav-link {
    color: #ffffff !important;
    font-weight: 500 !important;
    transition: color 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.nav-link:hover {
    color: #60a5fa !important;
}

/* Mobile overflow fixes */
* {
    box-sizing: border-box;
}

html, body {
    max-width: 100vw;
}

.container {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Fix for elements that might cause horizontal scroll */
@media (max-width: 470px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Ensure text doesn't overflow */
    h1, h2, h3, h4, h5, h6, p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Fix floating elements on very small screens */
    .floating-icons {
        display: none;
    }
    
    .moving-text {
        font-size: 2rem;
    }
    
    /* Ensure buttons don't overflow */
    .btn-primary {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Fix header on very small screens */
    .flex.items-center.justify-between {
        gap: 0.5rem;
    }
    
    /* Ensure logo and text fit properly */
    .flex.items-center.gap-2 span {
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }
    
    /* Fix mobile menu width */
    .mobile-menu {
        width: 100vw;
        max-width: 280px;
    }
}

/* Enhanced mobile menu positioning and overflow prevention */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    max-width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #0f1b2e 0%, #1e2a47 50%, #0a1428 100%) !important;
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.mobile-menu.open {
    right: 0;
}

.mobile-menu .text-white {
    color: #ffffff !important;
}

.mobile-menu .text-gray-100 {
    color: #f3f4f6 !important;
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Responsive Classes */
.mobile-hidden {
    display: block;
}

.desktop-hidden {
    display: none;
}

@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
    .desktop-hidden {
        display: block !important;
    }
}

/* Animated button styles */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 12px 24px;
    border-radius: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.btn-primary::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-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline {
    background: transparent;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

.card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

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

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.floating-element {
    animation: float 6s ease-in-out infinite;
}

.pulse-element {
    animation: pulse 2s ease-in-out infinite;
}

.rotate-element {
    animation: rotate 20s linear infinite;
}

/* Text Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.animate-slide-up {
    animation: slideInUp 0.8s ease-out;
}

.animate-fade-scale {
    animation: fadeInScale 1s ease-out;
}

/* Marquee Animation */
/*
 The animation itself still travels from -100% to 100% (a full two‑length
 cycle), which is what allows the duplicated contents to wrap seamlessly.

 * The top strip uses `scroll-right` and begins from the left; the bottom
   strip uses `scroll-left` and is flex‑row‑reversed so its first logo is at
   the right edge.  the JavaScript reset routine (see script.js) pauses both
   strips, calculates an appropriate wrapper shift for the bottom bar, and
   then restarts them at the same moment with a negative delay.  this keeps
   the two marquees perfectly in sync and prevents the bottom logos from
   appearing later than the top ones.

 * If the strip is shorter than its container the wrapper shift is clamped
   to zero to avoid pushing content offscreen unnecessarily.
*/
@keyframes scroll-right {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes scroll-left {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}


/* synced-start: pause both strips until JS restarts */
.animate-scroll-right,
.animate-scroll-left {
    animation-play-state: paused;
}

.animate-scroll-right {
    animation: scroll-right 60s linear infinite;
}

.animate-scroll-left {
    animation: scroll-left 60s linear infinite;
}
.marquee-mask {
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

/* Background Animations */
.bg-animated {
    position: relative;
    overflow: hidden;
}

.bg-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 30%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
    animation: plasma-move 15s ease-in-out infinite;
    z-index: -1;
}

/* Floating Icons Animation */
.floating-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.floating-icon {
    position: absolute;
    opacity: 0.1;
    animation: float-random 8s ease-in-out infinite;
}

@keyframes float-random {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    25% { transform: translateY(-30px) translateX(20px) rotate(90deg); }
    50% { transform: translateY(-10px) translateX(-15px) rotate(180deg); }
    75% { transform: translateY(-25px) translateX(10px) rotate(270deg); }
}

.floating-icon:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.floating-icon:nth-child(2) { top: 20%; right: 15%; animation-delay: 2s; }
.floating-icon:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 4s; }
.floating-icon:nth-child(4) { bottom: 20%; right: 10%; animation-delay: 6s; }
.floating-icon:nth-child(5) { top: 50%; left: 50%; animation-delay: 1s; }

/* Moving Text Animation */
@keyframes moveText {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.moving-text {
    animation: moveText 10s linear infinite;
}

.bg-black {
    background: linear-gradient(135deg, #0f1b2e 0%, #1e2a47 50%, #0a1428 100%) !important;
}

/* Plasma Background */
.plasma-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at 20% 80%, rgb(28 50 104) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgb(28 45 71) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgb(2 187 255 / 30%) 0%, transparent 50%);
    animation: plasma-move 20s ease-in-out infinite;
}

@keyframes plasma-move {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

/* Glass Effects */
.liquid-glass-header {
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.brand-text {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.nav-link {
    color: #ffffff !important;
    font-weight: 500 !important;
    transition: color 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.nav-link:hover {
    color: #60a5fa !important;
}

/* Added mobile overflow fixes and improved responsive design */
* {
    box-sizing: border-box;
}

html, body {
    max-width: 100vw;
}

.container {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Fix for elements that might cause horizontal scroll */
@media (max-width: 470px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Ensure text doesn't overflow */
    h1, h2, h3, h4, h5, h6, p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Fix floating elements on very small screens */
    .floating-icons {
        display: none;
    }
    
    .moving-text {
        font-size: 2rem;
    }
    
    /* Ensure buttons don't overflow */
    .btn-primary {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Fix header on very small screens */
    .flex.items-center.justify-between {
        gap: 0.5rem;
    }
    
    /* Ensure logo and text fit properly */
    .flex.items-center.gap-2 span {
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }
    
    /* Fix mobile menu width */
    .mobile-menu {
        width: 100vw;
        max-width: 280px;
    }
}

/* Enhanced mobile menu positioning and overflow prevention */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    max-width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #0f1b2e 0%, #1e2a47 50%, #0a1428 100%) !important;
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.mobile-menu.open {
    right: 0;
}

.mobile-menu .text-white {
    color: #ffffff !important;
}

.mobile-menu .text-gray-100 {
    color: #f3f4f6 !important;
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Responsive Classes */
.mobile-hidden {
    display: block;
}

.desktop-hidden {
    display: none;
}

@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
    .desktop-hidden {
        display: block !important;
    }
}

/* Added animated button styles */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 12px 24px;
    border-radius: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.btn-primary::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-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline {
    background: transparent;
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

.card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

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

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.floating-element {
    animation: float 6s ease-in-out infinite;
}

.pulse-element {
    animation: pulse 2s ease-in-out infinite;
}

.rotate-element {
    animation: rotate 20s linear infinite;
}

/* Text Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.animate-slide-up {
    animation: slideInUp 0.8s ease-out;
}

.animate-fade-scale {
    animation: fadeInScale 1s ease-out;
}

.marquee-mask {
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

/* Background Animations */
.bg-animated {
    position: relative;
    overflow: hidden;
}

.bg-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 30%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
    animation: plasma-move 15s ease-in-out infinite;
    z-index: -1;
}

/* Floating Icons Animation */
.floating-icons {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.floating-icon {
    position: absolute;
    opacity: 0.1;
    animation: float-random 8s ease-in-out infinite;
}

@keyframes float-random {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    25% { transform: translateY(-30px) translateX(20px) rotate(90deg); }
    50% { transform: translateY(-10px) translateX(-15px) rotate(180deg); }
    75% { transform: translateY(-25px) translateX(10px) rotate(270deg); }
}

.floating-icon:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.floating-icon:nth-child(2) { top: 20%; right: 15%; animation-delay: 2s; }
.floating-icon:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 4s; }
.floating-icon:nth-child(4) { bottom: 20%; right: 10%; animation-delay: 6s; }
.floating-icon:nth-child(5) { top: 50%; left: 50%; animation-delay: 1s; }

/* Moving Text Animation */
@keyframes moveText {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.moving-text {
    animation: moveText 10s linear infinite;
}