@media(max-width: 1024px) {
} @media(min-width: 768px) and (max-width: 1023px) {  
} @media(max-width: 768px) {  
.logo-div .logo-wrapp.top {
transition: all 2.1s ease;
transform: translate(33%, -50%);
}
.logo-div .logo-wrapp.active img.part1 {
transform: translate(-90%, -230%);
}
.logo-div .logo-wrapp.active img.part2 {
transform: translate(90%, -230%);
}
.logo-div .logo-wrapp.active img.part3 {
transform: translate(-90%, 230%);
}
.logo-div .logo-wrapp.active img.part4 {
transform: translate(90%, 230%);
}
.slider-1 p,
.slider-2 p,
.slider-3 p,
.slider-4 p,
.slider-5 p,
.slider-6 p {
font-size: 25px;
color: #fff;
line-height: 28px;
font-weight: 700;
}
.s-2-anim, .s-3-anim, .s-4-anim, .s-5-anim, .s-6-anim {
font-size: 25px;
font-weight: 500;
color: #fff;
transform: translate(90%, 400px) rotate(-90deg);
transform-origin: top left;
transition: all 2.1s ease;
}
.logo-text img {
width: 320px;
}
.text {
font-size: 9px;
font-weight: 700;
}
.slider-7.svg-wrapper {
transform: translate(-5%, 330px) rotate(0deg);
}
.slider-8.svg-wrapper {
transform: translate(28%, 164px) rotate(0deg);
}
.slider-9.svg-wrapper {
transform: translate(60%, 0px) rotate(0deg);
}
.shape {
stroke-width: 4px;
}
.shape.active {
stroke-width: 3px;
stroke-dashoffset: 0;
stroke-dasharray: 760;
border-radius: 100%;
}
}