/* ===========================
   Custom Red Scrollbar
=========================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #111111;
}

::-webkit-scrollbar-thumb {
    background: #dc2626;
    border-radius: 50px;
    border: 2px solid #111111;
    transition: all .3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #b91c1c;
}

html {
    scrollbar-width: thin;
    scrollbar-color: #dc2626 #111111;
     scroll-behavior: smooth;
}

/* ===========================
   Text Selection
=========================== */

::selection {
    background: #dc2626;
    color: #ffffff;
}

::-moz-selection {
    background: #dc2626;
    color: #ffffff;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(80px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slowZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

.animate-fade-up {
    animation: fadeUp 1s ease forwards;
}

.animate-fade-up-delay {
    animation: fadeUp 1s ease forwards;
    animation-delay: .3s;
}

.animate-fade-up-delay2 {
    animation: fadeUp 1s ease forwards;
    animation-delay: .6s;
}

.animate-slow-zoom {
    animation: slowZoom 12s ease-in-out infinite alternate;
}

/* about------------- */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }

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

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

/* ------------------------ */

.watermark-text {
    font-family: 'Dancing Script', cursive;
    font-size: 90px;
    color: rgba(255, 255, 255, 0.212);
    white-space: nowrap;
    animation: floatText 8s ease-in-out infinite;
}

.section-noise::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
    opacity: .08;
    pointer-events: none;
}

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

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


.noise {
    background-image: url("https://www.transparenttextures.com/patterns/asfalt-light.png");
}

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

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spinSlow 20s linear infinite;
}

/* ------------------------ */
@keyframes pulseRing {
    0% {
        transform: scale(.9);
        opacity: .8;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.play-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: white;
    animation: pulseRing 2s infinite;
}

.noise {
    background-image:
        radial-gradient(rgba(255, 255, 255, .15) 1px, transparent 1px);
    background-size: 8px 8px;
}


/* --------------------about us page design------------------------ */