*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/* 
body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#00E676,#1E88E5);
    overflow:hidden;
}
 */
/* Main Wrapper */

.hero-ripple{
    position:relative;
    width:520px;
    height:520px;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Ripple Waves */

.wave{
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
   border:4px solid rgba(118,196,241,.8);
    animation:ripple 6s linear infinite;
}

.wave1{animation-delay:0s;}
.wave2{animation-delay:1.5s;}
.wave3{animation-delay:3s;}
.wave4{animation-delay:4.5s;}

@keyframes ripple{
    0%{
        transform:scale(1);
        opacity:1;
    }
    100%{
        transform:scale(2.4);
        opacity:0;
    }
}

/* Rings */

.circle1{
    position:absolute;
    width:660px;
    height:660px;
    border-radius:50%;
    background:linear-gradient(135deg,#289EEB,#27BBD7);
    display:flex;
    justify-content:center;
    align-items:center;
}

.circle2{
    width:620px;
    height:620px;
    border-radius:50%;
    background:linear-gradient(135deg,#52B5EF,#54C8E1);
    display:flex;
    justify-content:center;
    align-items:center;
}

.circle3{
    width:580px;
    height:580px;
    border-radius:50%;
    background:linear-gradient(135deg,#76C4F1,#75D1E6);
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Slider */

.slider-box{
    width:540px;
    height:540px;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.25);
}

.slider-track{
    display:flex;
    width:500%;
    height:100%;
    transition:transform .8s ease-in-out;
}

.slider-track img{
    width:20%;
    height:100%;
    object-fit:cover;
    flex-shrink:0;
}

/* Tablet */

 @media (min-width:479px) and (max-width:768px){

.hero-ripple{
    width:450px;
    height:450px;
}

.wave{
    width:250px;
    height:250px;
}

.circle1{
    width:500px;
    height:500px;
}

.circle2{
    width:470px;
    height:470px;
}

.circle3{
    width:440px;
    height:440px;
}

.slider-box{
    width:410px;
    height:410px;
}

}

/* tablet landscap1024px */
/* 
@media (min-width:769px) and (max-width:1024px){

.hero-ripple{
    width:550px;
    height:550px;
}

.wave{
    width:320px;
    height:320px;
}

.circle1{
    width:600px;
    height:600px;
}

.circle2{
    width:560px;
    height:560px;
}

.circle3{
    width:520px;
    height:520px;
}

.slider-box{
    width:480px;
    height:480px;
}

}
 */
/* mobile 478 */

@media (max-width:478px){

.hero-ripple{
    width:300px;
    height:300px;
}

.wave{
    width:180px;
    height:180px;
}

.circle1{
    width:320px;
    height:320px;
}

.circle2{
    width:290px;
    height:290px;
}

.circle3{
    width:260px;
    height:260px;
}

.slider-box{
    width:230px;
    height:230px;
}

} 
/* =====================================================
   Large Tablet Landscape
   iPad Pro 10.5", iPad Air, iPad Pro 11", iPad Pro 12.9"
===================================================== */

@media only screen and (min-width:1024px) and (max-width:1566px) and (orientation:landscape){

.hero-ripple{
    width:520px;
    height:520px;
}

.wave{
    width:360px;
    height:360px;
}

.circle1{
    width:540px;
    height:540px;
}

.circle2{
    width:520px;
    height:520px;
}

.circle3{
    width:480px;
    height:480px;
}

.slider-box{
    width:440px;
    height:440px;
}

}