*{
margin:0;
padding:0;
}

body{
margin:0;
padding:0;
font-family: "Manrope", sans-serif;
}

.hero{
position: relative;
background: url('../images/pattern-bg.jpg') no-repeat;
background-size: cover;
background-position: center;
width:100%;
height:100vh;
}

.hero_innercontent {
position: relative;
width: 100%;
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.hero_content {
max-width: 900px;
width: 100%;
margin: 0 auto;
padding: 0 30px;
}

.hero_content img{
max-width:150px;
width:100%;
margin:0 auto 10px;
}

.hero_content h1 {
font-size: clamp(35px, 5vw, 80px);
color: #fff;
line-height: normal;
font-weight: 700;
letter-spacing: normal;
margin-bottom: 30px;
}

.hero_content p{
font-size: 18px;
color: #fff;
line-height: normal;
font-weight: 400;
letter-spacing: normal;
}

#countdown{
font-variant-numeric: tabular-nums;
}

.loader {
width: 18px;
height: 18px;
border: 2px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
margin: 0 5px -3px 0;
}

@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} 

.shape_animation{
max-width: 420px;
width: 100%;
margin: 0 auto 20px;
height: 100px;
position: relative;
}

.shape_animation svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

#infinity-outline {
fill: transparent;
stroke-width: 4;
stroke: #fff;
stroke-dasharray: 3px, 300px;
stroke-dashoffset: 0;
animation: anim 3000ms linear infinite;
}

#infinity-bg {
fill: transparent;
stroke-width: 4;
stroke: #fff;
opacity: 0.5;
}

@keyframes anim {
12.5% {
stroke-dasharray: 42px, 300px;
stroke-dashoffset: -33px;
}
43.75% {
stroke-dasharray: 105px, 300px;
stroke-dashoffset: -105px;
}
100% {
stroke-dasharray: 3px, 300px;
stroke-dashoffset: -297px;
}
}

.logo_icon_box {
max-width: 206px;
width: 100%;
margin: 26px auto 0;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
left: 0;
right: 0;
top: 0;
}

.logo_icon_box img{
max-width: 45px;
width: 100%;
}


@media(max-width:575px){
.shape_animation {
max-width: 315px;
}
.logo_icon_box {
margin: 32px auto 0;
max-width: 155px;
}
.logo_icon_box img {
max-width: 35px;
}
}