/*
Theme Name: Netband
Author: Modina Theme
Author URI: https://themeforest.net/user/modinatheme/
Description:  Internet provider & Broadband TV HTML Template
Version: 1.0.0
*/

/*
=================================
|***    Table of contents:   ***|
=================================

1. General styles
2. Typography
3. Helpers
4. Preloader
5. Go up button
6. Header and navigation
7. Hero Section
8. About us
9. Services
10. Fun facts
11. Projects
12. Pricing
13. Testimonial
14. CTA
15. Team
16. Video Banner
17. Shop
18. Marquee
19. Blog
20. Footer
21. Logo Styles

Main Style file-> assets/css/main.css 
*/

/* ========== IMPROVED LOGO STYLES ========== */

.logo {
    display: flex;
    align-items: center;
}

.logo-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.logo-link:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.logo-wrapper {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.logo-primary {
    background: linear-gradient(135deg, #0367d2 0%, #0c035a 100%);
    color: rgb(235, 149, 0);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
    display: inline-block;
}

.logo-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
    transform: scale(1.05);
}

.logo-secondary {
    font-size: 1.5rem;
    font-weight: 800;
    color: #333;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.logo-tagline {
    font-size: 0.65rem;
    color: #888;
    margin-top: 2px;
    margin-bottom: 0;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Responsive Logo */
@media (max-width: 768px) {
    .logo-primary {
        font-size: 1.5rem;
        padding: 6px 12px;
    }

    .logo-secondary {
        font-size: 1.25rem;
    }

    .logo-tagline {
        font-size: 0.55rem;
    }
}

@media (max-width: 576px) {
    .logo-primary {
        font-size: 1.25rem;
        padding: 5px 10px;
    }

    .logo-secondary {
        font-size: 1rem;
    }

    .logo-wrapper {
        gap: 0.25rem;
    }

    .logo-tagline {
        display: none;
    }
}

/* ========== IMPROVED MARQUEE STYLES ========== */

/* Keyframe animations for smooth scrolling */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

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

/* Marquee wrapper and container */
.marquee-wrapper-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(248, 247, 247, 0.08);
    transition: all 0.3s ease;
}

.marquee-wrapper-list:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(90deg, #010101 0%, #000000 100%);
}

/* Marquee content - holds all the scrolling text */
.marquee-content {
    display: flex;
    width: 200%;
    animation: scroll-left 40s linear infinite;
    gap: 50px;
}

/* Pause animation on hover */
.marquee-wrapper-list:hover .marquee-content {
    animation-play-state: paused !important;
}

/* Marquee text styling */
.marquee-text {
    display: flex;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 20px;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.marquee-text:hover {
    color: #ffffff;
    text-decoration: none;
}

/* Marquee label with icon */
.marquee-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.08);
    padding: 6px 12px;
    border-radius: 6px;
    min-width: max-content;
    transition: all 0.3s ease;
}

.marquee-text:hover .marquee-label {
    background: rgba(0, 0, 0, 0.15);
    color: #ffffff;
}

/* Marquee numbers/phone styling */
.marquee-numbers {
    color: #666;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: color 0.5s ease;
}

.marquee-text:hover .marquee-numbers {
    color: #ffffff;
    font-weight: 600;
}

/* Duplicate marquee content for seamless loop */
.marquee-duplicate {
    margin-left: 50px;
}

/* Icon styling */
.marquee-label i {
    font-size: 1.1rem;
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Responsive marquee */
@media (max-width: 1024px) {
    .marquee-content {
        animation: scroll-left 35s linear infinite;
    }

    .marquee-text {
        font-size: 0.9rem;
        padding: 10px 16px;
    }

    .marquee-label {
        padding: 5px 10px;
        font-size: 0.85rem;
    }

    .marquee-numbers {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .marquee-content {
        animation: scroll-left 30s linear infinite;
    }

    .marquee-text {
        font-size: 0.85rem;
        padding: 8px 12px;
        gap: 10px;
    }

    .marquee-label {
        padding: 4px 8px;
        font-size: 0.75rem;
        gap: 4px;
    }

    .marquee-label i {
        font-size: 0.9rem;
    }

    .marquee-numbers {
        font-size: 0.8rem;
    }

    .marquee-content {
        gap: 30px;
    }

    .marquee-duplicate {
        margin-left: 30px;
    }
}

@media (max-width: 576px) {
    .marquee-content {
        animation: scroll-left-mobile 25s linear infinite;
        width: 300%;
    }

    .marquee-text {
        font-size: 0.75rem;
        padding: 6px 8px;
        gap: 6px;
    }

    .marquee-label {
        padding: 3px 6px;
        font-size: 0.65rem;
    }

    .marquee-numbers {
        font-size: 0.7rem;
        letter-spacing: 0;
    }

    .marquee-wrapper-list {
        border-radius: 4px;
    }

    .marquee-content {
        gap: 20px;
    }

    .marquee-duplicate {
        margin-left: 20px;
    }
}