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

:root {
    --color-red: #e63946;
    --color-dark-red: #c1121f;
    --color-blue: #1d3557;
    --color-light-blue: #457b9d;
    --color-dark: #0a0a0b;
    --color-darker: #050506;
}

body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    background-color: var(--color-dark);
    color: #fff;
}

.hero-section {
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.1;
    z-index: 1;
}

.video-gradient-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom, transparent 50%, var(--color-dark));
    pointer-events: none;
    z-index: 2;
}

@media (max-width: 768px) {
    .hero-video {
        object-position: center;
    }
}

.gradient-text {
    background: linear-gradient(90deg, var(--color-red) 0%, var(--color-light-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-bg {
    background: linear-gradient(90deg, var(--color-red) 0%, var(--color-blue) 100%);
}

.card-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.service-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.1) 0%, rgba(29, 53, 87, 0.1) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(229, 57, 70, 0.1);
    border-color: var(--color-red);
}

.beat-animation {
    animation: beat 1.5s infinite ease-in-out;
}

@keyframes beat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background: linear-gradient(90deg, var(--color-red) 0%, var(--color-light-blue) 100%);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.glass-effect {
    backdrop-filter: blur(10px);
    background-color: rgba(10, 10, 11, 0.7);
}

.off-canvas-menu {
    right: -100%;
    transition: right 0.3s ease;
}

.off-canvas-menu.open {
    right: 0;
}

.overlay {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.equalizer-container {
    display: flex;
    align-items: flex-end;
    height: 50px;
    gap: 3px;
}

.equalizer-bar {
    border-radius: 999px;
    width: 3px;
    background: linear-gradient(to top, var(--color-red), var(--color-light-blue));
    animation: equalize 1.5s infinite ease-in-out;
}

.equalizer-bar:nth-child(1) {
    animation-delay: 0.0s;
}

.equalizer-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.equalizer-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.equalizer-bar:nth-child(4) {
    animation-delay: 0.3s;
}

.equalizer-bar:nth-child(5) {
    animation-delay: 0.4s;
}

.equalizer-bar:nth-child(6) {
    animation-delay: 0.5s;
}

.equalizer-bar:nth-child(7) {
    animation-delay: 0.6s;
}

.equalizer-bar:nth-child(8) {
    animation-delay: 0.7s;
}

@keyframes equalize {

    0%,
    100% {
        height: 10px;
    }

    50% {
        height: 40px;
    }
}

.gallery-img {
    transition: all 0.3s ease;
}

.gallery-img:hover {
    transform: scale(1.05);
}

input,
select,
textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-red) !important;
    box-shadow: 0 0 0 3px rgba(229, 57, 70, 0.2) !important;
}

.animated-bg {
    position: relative;
    overflow: hidden;
}

.animated-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(230, 57, 70, 0.1) 0%, rgba(29, 53, 87, 0.1) 100%);
    z-index: 0;
}

.animated-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.05;
    z-index: 0;
}

.animated-bg::before,
.animated-bg::after,
.wave-bg .wave {
    pointer-events: none;
}


.vinyl-record {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #333 0%, #000 40%, #333 40%, #000 42%, #333 42%, #000 44%, #333 44%, #000 46%, #333 46%, #000 48%, #333 48%, #000 50%, #333 50%, #000 52%, #333 52%, #000 54%, #333 54%, #000 56%, #333 56%, #000 58%, #333 58%, #000 60%, #333 60%, #000 80%, #333 80%, #000 100%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    animation: spin 10s linear infinite;
}

.vinyl-record::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #e63946 0%, #1d3557 100%);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(230, 57, 70, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
    }
}

.wave-bg {
    position: relative;
    overflow: hidden;
}


.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.pricing-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 1;
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.05) 0%, rgba(29, 53, 87, 0.05) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pricing-card:hover::before {
    opacity: 1;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(229, 57, 70, 0.1);
    border-color: var(--color-red);
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-question {
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    color: var(--color-red);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.group:hover .group-hover-visible {
    visibility: visible;
    opacity: 1;
}

.group-hover-visible {
    transition: visibility 0.3s, opacity 0.3s;
}

.btn-pulsate {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(90deg, var(--color-red) 0%, var(--color-blue) 100%);
    color: white;
}

.btn-pulsate:hover {
    transform: scale(1.05);
}

.btn-pulsate:hover::after,
.btn-pulsate:focus::after,
.btn-pulsate:active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: pulsate 1s ease-out infinite;
}

@keyframes pulsate {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

/* Add this for the active/clicked state */
.btn-pulsate:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(74, 140, 255, 0.2);
}

        .animated-bg {
            position: relative;
            overflow: hidden;
        }
   .wave-bg {
       position: relative;
       overflow: hidden;
   }

   /* Bottom wave container (keeping your existing one) */
   .wave-container-bottom {
       position: absolute;
       left: 0;
       bottom: 0;
       width: 100%;
       height: 80px;
       overflow: hidden;
       z-index: 10;
       display: flex;
       align-items: flex-end;
   }

   /* New top wave container */
   .wave-container-top {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 80px;
       overflow: hidden;
       z-index: 10;
       display: flex;
       align-items: flex-start;
       /* Align to top instead of bottom */
   }

   .wave-bar {
       flex: 1;
       background-color: rgba(193, 18, 31, 0.3);
       /* #c1121f with transparency */
       margin: 0 2px;
       height: 10px;
   }

   /* Different border radius for top vs bottom bars */
   .wave-container-bottom .wave-bar {
       border-radius: 2px 2px 0 0;
   }

   .wave-container-top .wave-bar {
       border-radius: 0 0 2px 2px;
   }

   /* Animation for bottom bars (keeping your existing ones) */
   .wave-container-bottom .wave-bar {
       animation: wave-animation-bottom 3s infinite ease-in-out;
   }

   /* Animation for top bars - reverse direction */
   .wave-container-top .wave-bar {
       animation: wave-animation-top 3s infinite ease-in-out;
   }

   /* Create 20 bars with staggered animations for bottom */
   .wave-container-bottom .wave-bar:nth-child(1) {
       animation-delay: 0s;
   }

   .wave-container-bottom .wave-bar:nth-child(2) {
       animation-delay: 0.15s;
   }

   .wave-container-bottom .wave-bar:nth-child(3) {
       animation-delay: 0.3s;
   }

   .wave-container-bottom .wave-bar:nth-child(4) {
       animation-delay: 0.45s;
   }

   .wave-container-bottom .wave-bar:nth-child(5) {
       animation-delay: 0.6s;
   }

   .wave-container-bottom .wave-bar:nth-child(6) {
       animation-delay: 0.75s;
   }

   .wave-container-bottom .wave-bar:nth-child(7) {
       animation-delay: 0.9s;
   }

   .wave-container-bottom .wave-bar:nth-child(8) {
       animation-delay: 1.05s;
   }

   .wave-container-bottom .wave-bar:nth-child(9) {
       animation-delay: 1.2s;
   }

   .wave-container-bottom .wave-bar:nth-child(10) {
       animation-delay: 1.35s;
   }

   .wave-container-bottom .wave-bar:nth-child(11) {
       animation-delay: 1.5s;
   }

   .wave-container-bottom .wave-bar:nth-child(12) {
       animation-delay: 1.65s;
   }

   .wave-container-bottom .wave-bar:nth-child(13) {
       animation-delay: 1.8s;
   }

   .wave-container-bottom .wave-bar:nth-child(14) {
       animation-delay: 1.95s;
   }

   .wave-container-bottom .wave-bar:nth-child(15) {
       animation-delay: 2.1s;
   }

   .wave-container-bottom .wave-bar:nth-child(16) {
       animation-delay: 2.25s;
   }

   .wave-container-bottom .wave-bar:nth-child(17) {
       animation-delay: 2.4s;
   }

   .wave-container-bottom .wave-bar:nth-child(18) {
       animation-delay: 2.55s;
   }

   .wave-container-bottom .wave-bar:nth-child(19) {
       animation-delay: 2.7s;
   }

   .wave-container-bottom .wave-bar:nth-child(20) {
       animation-delay: 2.85s;
   }

   /* Create 20 bars with staggered animations for top - reversed order */
   .wave-container-top .wave-bar:nth-child(1) {
       animation-delay: 2.85s;
   }

   .wave-container-top .wave-bar:nth-child(2) {
       animation-delay: 2.7s;
   }

   .wave-container-top .wave-bar:nth-child(3) {
       animation-delay: 2.55s;
   }

   .wave-container-top .wave-bar:nth-child(4) {
       animation-delay: 2.4s;
   }

   .wave-container-top .wave-bar:nth-child(5) {
       animation-delay: 2.25s;
   }

   .wave-container-top .wave-bar:nth-child(6) {
       animation-delay: 2.1s;
   }

   .wave-container-top .wave-bar:nth-child(7) {
       animation-delay: 1.95s;
   }

   .wave-container-top .wave-bar:nth-child(8) {
       animation-delay: 1.8s;
   }

   .wave-container-top .wave-bar:nth-child(9) {
       animation-delay: 1.65s;
   }

   .wave-container-top .wave-bar:nth-child(10) {
       animation-delay: 1.5s;
   }

   .wave-container-top .wave-bar:nth-child(11) {
       animation-delay: 1.35s;
   }

   .wave-container-top .wave-bar:nth-child(12) {
       animation-delay: 1.2s;
   }

   .wave-container-top .wave-bar:nth-child(13) {
       animation-delay: 1.05s;
   }

   .wave-container-top .wave-bar:nth-child(14) {
       animation-delay: 0.9s;
   }

   .wave-container-top .wave-bar:nth-child(15) {
       animation-delay: 0.75s;
   }

   .wave-container-top .wave-bar:nth-child(16) {
       animation-delay: 0.6s;
   }

   .wave-container-top .wave-bar:nth-child(17) {
       animation-delay: 0.45s;
   }

   .wave-container-top .wave-bar:nth-child(18) {
       animation-delay: 0.3s;
   }

   .wave-container-top .wave-bar:nth-child(19) {
       animation-delay: 0.15s;
   }

   .wave-container-top .wave-bar:nth-child(20) {
       animation-delay: 0s;
   }

   @keyframes wave-animation-bottom {

       0%,
       100% {
           height: 15px;
       }

       50% {
           height: 50px;
       }
   }

   @keyframes wave-animation-top {

       0%,
       100% {
           height: 15px;
       }

       50% {
           height: 50px;
       }
   }