*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    width:100%;
    height:100vh;

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    font-family:'Montserrat',sans-serif;

}



/* Background */

.background{

    position:fixed;

    inset:0;

    background:
    radial-gradient(
        circle,
        #220000,
        #000 65%
    );

    z-index:-1;

        display:none;

}





.container{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:100%;

    position:relative;

    z-index:10;

}





/*
=================================
 SINGLE LOGO
=================================
*/


.logo-wrapper{


    height:130px;


    display:flex;

    align-items:center;

    justify-content:center;


    /*
    logo starts top
    */

    animation:
    logoToO 1.8s cubic-bezier(.25,.8,.25,1) forwards;

      position:relative;

      overflow:visible;

      z-index:20;


}



.brand-logo{

    width:110px;

    height:110px;

    object-fit:contain;

    position:relative;

    z-index:30;

}






/*
=================================
 HOLD WORD
=================================
*/


.hold-word{

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:10px;

    gap:0px;

}





.letter{

    color:white;

    font-size:120px;

    font-weight:700;

    line-height:1;

    display:flex;

    align-items:center;

}





/* H */

.left-letter{


    opacity:0;


    transform:translateX(-120px);


    animation:

    leftEnter 1s ease-out 2s forwards;


}





/* ld */

.right-letter{


    opacity:0;


    transform:translateX(120px);


    animation:

    rightEnter 1s ease-out 2s forwards;


}






/*
=================================
 LOGO O SPACE
=================================
*/


.logo-space{

    width:125px;

    height:115px;

    display:flex;

    align-items:center;

    justify-content:center;

    display:none;

    

}






/*
=================================
 MOVE LOGO INTO O POSITION

 Same logo will shrink and settle
=================================
*/






@keyframes logoToO{


    0%{

        transform:
        translateY(-350px)
        translateX(0)
        scale(1);

        opacity:0;

    }



    100%{

        transform:
        translateY(135px)
        translateX(-10px)
        scale(0.88);

        opacity:1;

    }


}







/*
=================================
 H LD ANIMATION
=================================
*/


@keyframes leftEnter{


    to{

        transform:translateX(0);

        opacity:1;

    }

}



@keyframes rightEnter{


    to{

        transform:translateX(0);

        opacity:1;

    }

}






/*
=================================
 MESSAGE
=================================
*/


.message{


    margin-top:45px;


    opacity:0;


    animation:

    messageShow 1s ease 3s forwards;


}



.message h2{


    color:white;


    font-size:26px;


    font-weight:400;


    letter-spacing:4px;


}





.red-line{


    width:85px;

    height:3px;


    background:#ed2727;


    margin:18px auto;


    border-radius:10px;


}





@keyframes messageShow{


    from{


        opacity:0;

        transform:translateY(25px);


    }


    to{


        opacity:1;

        transform:translateY(0);


    }


}






/*
=================================
 MOBILE
=================================
*/


@media(max-width:600px){


    /* Hold word ছোট করা */

    .letter{

        font-size:65px;

    }



    /* Drop logo ছোট করা */

    .brand-logo{

        width:65px;

        height:65px;

    }



    /* O logo ছোট করা */

    .o-logo{

        width:65px;

        height:65px;

    }



    /* Logo জায়গা adjust */

    .logo-space{

        width:75px;

        height:75px;

    }



    /* পুরো animation group উপরে উঠানো */

    .container{

        transform:translateY(-50px);

    }



    /* নিচের লেখা */

    .message{

        margin-top:25px;

    }



    .message h2{

        font-size:14px;

        letter-spacing:2px;

        text-align:center;

    }



    .red-line{

        width:60px;

    }


}


/* ==========================================
   CINEMATIC FALLING WIND EFFECT
========================================== */

.logo-wrapper{

    height:130px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    z-index:50;

    animation:
    logoToO 1.8s cubic-bezier(.25,.8,.25,1) forwards;

}


/* Logo always above wind */

.brand-logo{

    width:110px;

    height:110px;

    object-fit:contain;

    position:relative;

    z-index:100;

}


/* ==========================================
   VERTICAL SPEED / WIND TRAILS
========================================== */

.wind-trails{

    position:absolute;

    left:50%;
    top:-170px;

    width:120px;
    height:260px;

    transform:translateX(-50%);

    pointer-events:none;

    z-index:5;

    opacity:0;

    animation:
    windTrailShow 1.55s ease-out forwards;

}


.wind-trails span{

    position:absolute;

    top:0;

    width:3px;

    height:210px;

    border-radius:50%;

    background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,.12) 20%,
        rgba(255,255,255,.85) 70%,
        rgba(255,255,255,0)
    );

    filter:blur(1px);

}


/* Different wind lines */

.wind-trails span:nth-child(1){

    left:25px;

    height:190px;

    opacity:.55;

}


.wind-trails span:nth-child(2){

    left:48px;

    height:245px;

    opacity:.9;

}


.wind-trails span:nth-child(3){

    left:72px;

    height:220px;

    opacity:.7;

}


.wind-trails span:nth-child(4){

    left:95px;

    height:170px;

    opacity:.4;

}


/* ==========================================
   CIRCULAR WIND RINGS
========================================== */

.wind-ring{

    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

    pointer-events:none;

    z-index:5;

    opacity:0;

}


/* Large sweeping wind */

.wind-ring-one{

    width:180px;
    height:75px;

    border-top:
    3px solid rgba(255,255,255,.65);

    border-right:
    2px solid rgba(255,255,255,.20);

    transform:
    translate(-50%,-50%)
    rotate(-18deg);

    filter:
    blur(.4px)
    drop-shadow(0 0 6px rgba(255,255,255,.25));

    animation:
    windOrbitOne .9s ease-out 1.05s forwards;

}


/* Second opposite wind */

.wind-ring-two{

    width:150px;
    height:65px;

    border-bottom:
    2px solid rgba(255,255,255,.45);

    border-left:
    2px solid rgba(255,255,255,.12);

    transform:
    translate(-50%,-50%)
    rotate(25deg);

    filter:blur(.7px);

    animation:
    windOrbitTwo 1s ease-out 1.12s forwards;

}



/* ==========================================
   VERTICAL TRAIL ANIMATION
========================================== */

@keyframes windTrailShow{

    0%{

        opacity:0;

        transform:
        translateX(-50%)
        translateY(-60px)
        scaleY(.5);

    }


    20%{

        opacity:.9;

    }


    75%{

        opacity:.75;

    }


    100%{

        opacity:0;

        transform:
        translateX(-50%)
        translateY(180px)
        scaleY(1.2);

    }

}



/* ==========================================
   WIND ORBIT 1
========================================== */

@keyframes windOrbitOne{

    0%{

        opacity:0;

        transform:
        translate(-50%,-50%)
        rotate(-80deg)
        scale(.4);

    }


    30%{

        opacity:.85;

    }


    100%{

        opacity:0;

        transform:
        translate(-50%,-50%)
        rotate(35deg)
        scale(1.35);

    }

}



/* ==========================================
   WIND ORBIT 2
========================================== */

@keyframes windOrbitTwo{

    0%{

        opacity:0;

        transform:
        translate(-50%,-50%)
        rotate(80deg)
        scale(.5);

    }


    35%{

        opacity:.65;

    }


    100%{

        opacity:0;

        transform:
        translate(-50%,-50%)
        rotate(-40deg)
        scale(1.3);

    }

}
/* =========================
   BACKGROUND VIDEO
========================= */


.bg-video{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-3;

}



/* Dark layer */

.video-overlay{

    position:fixed;

    inset:0;

    background:

    rgba(0,0,0,0.55);

    z-index:-1;

}
.bg-video{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-2;

}


.video-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.55);

    z-index:-1;

}


.container{

    position:relative;

    z-index:5;

}
.left-letter{

    margin-right:50px;

}


.right-letter{

    margin-left:45px;

}
.loading-dots {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
}

.loading-dots span {
    opacity: 0.2;
    animation: dotBlink 1.4s infinite ease-in-out;
    display: inline-block;
}

.loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotBlink {
    0%, 20%, 100% {
        opacity: 0.2;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/* ==========================
   MOBILE FINAL FIX
========================== */


@media screen and (max-width:600px){


    /* Move whole design upward */

    .container{

        transform:translateY(-70px);

    }



    /* Hold letters */

    .letter{

        font-size:55px !important;

    }



    /* Main dropping logo */

    .brand-logo{

        width:55px !important;

        height:55px !important;

    }



    /* O logo */

    .o-logo{

        width:55px !important;

        height:55px !important;

    }



    .logo-space{

        width:65px !important;

        height:65px !important;

    }




    /* Hold spacing */

    .hold-word{

        margin-top:0px;

    }




    /* Message */

    .message{

        margin-top:20px;

    }



    .message h2{

        font-size:12px !important;

        letter-spacing:1px;

        text-align:center;

    }



    .red-line{

        width:55px;

    }





    /* Adjust logo drop position on mobile */

    .logo-wrapper{

        transform:translateY(-60px);

    }



}

/* ==========================
   MOBILE LOGO POSITION FIX
========================== */

@media screen and (max-width:600px){

    .logo-wrapper{

        animation-name: mobileLogoToO;

    }



    @keyframes mobileLogoToO{


        0%{

            transform:
            translateY(-250px)
            translateX(0)
            scale(1);

            opacity:0;

        }



        100%{

            transform:
            translateY(92px)
            translateX(-5px)
            scale(0.81);

            opacity:1;

        }


    }

}
@media screen and (max-width:600px){


    .left-letter{

        margin-right:21px !important;

    }


    .right-letter{

        margin-left:21px !important;

    }


}
/* =========================
   TYPING RED SWEEP EFFECT
========================= */

#typing-text{
    color:white;
    font-size:26px;
    font-weight:400;
    letter-spacing:4px;
    white-space:pre-wrap;
}

#typing-text .char{
    color:white;
    transition:color 0.25s ease;
}

#typing-text .char.active-red{
    color:#ed2727;
}

/* mobile */
@media screen and (max-width:600px){
    #typing-text{
        font-size:12px !important;
        letter-spacing:1px;
        text-align:center;
    }
}
/* ==========================
   FINAL DOT ANIMATION
========================== */


#typing-text .dot{

    display:inline-block;

    animation:dotBlink 1.4s infinite ease-in-out;

}



#typing-text .dot:nth-last-child(3){

    animation-delay:0s;

}


#typing-text .dot:nth-last-child(2){

    animation-delay:0.2s;

}


#typing-text .dot:nth-last-child(1){

    animation-delay:0.4s;

}



@keyframes dotBlink{


    0%,20%,100%{

        opacity:.25;

        transform:translateY(0);

    }


    50%{

        opacity:1;

        transform:translateY(-3px);

    }

}