@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans&family=Open+Sans+Condensed:wght@300&family=Oswald&family=Roboto&display=swap');
:root {
  --black: #010101;
  --grey: #494848;
  --primaryRed: #d92b0e;
  --primaryGrey: #454545;
  --primaryYellow: #fec401;
  
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Alegreya Sans', sans-serif;
}

.slider,
.slider0,
.slider1,
.slider2,
.slider3,
.slider4 {
    position: relative;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
}

.full-screen {
    height: 46rem;
}

.adjusted {
    height: 36rem;
}

.small {
    height: 24rem;
}

.slider .slide,
.slider0 .slide0,
.slider1 .slide1,
.slider2 .slide2,
.slider3 .slide3,
.slider4 .slide4 {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: circle(0% at 0 50%);
}

.dark-background {
    background: radial-gradient(circle, rgba(21, 31, 47, 0.7) 0%, rgba(10, 10, 10, 0.1)100%);
}

.light-background {
    background: radial-gradient(circle, rgba(21, 31, 47, 0.0) 0%, rgba(10, 10, 10, 0.1)100%);
}

.slider .slide.active,
.slider0 .slide0.active0,
.slider1 .slide1.active1,
.slider2 .slide2.active2,
.slider3 .slide3.active3,
.slider4 .slide4.active4 {
    clip-path: circle(150% at 0 50%);
    transition: 2s;
}

.slider .slide.active h2,
.slider0 .slide0.active0 h2,
.slider1 .slide1.active1 h2,
.slider2 .slide2.active2 h2,
.slider3 .slide3.active3 h2,
.slider4 .slide4.active4 h2 {
    animation: fadeInLeft 4s 1;
}

.slider .slide.active p,
.slider0 .slide0.active0 p,
.slider1 .slide1.active1 p,
.slider2 .slide2.active2 p,
.slider3 .slide3.active3 p,
.slider4 .slide4.active4 p {
    animation: bounceInDown 4s 1;
}

.slider .slide img,
.slider0 .slide0 img,
.slider1 .slide1 img,
.slider2 .slide2 img,
.slider3 .slide3 img,
.slider4 .slide4 img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider .slide .contain,
.slider0 .slide0 .contain,
.slider1 .slide1 .contain,
.slider2 .slide2 .contain,
.slider3 .slide3 .contain,
.slider4 .slide4 .contain {
    object-fit: contain;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 1);
}

.slider .slide .info,
.slider0 .slide0 .info,
.slider1 .slide1 .info,
.slider2 .slide2 .info,
.slider3 .slide3 .info,
.slider4 .slide4 .info {
    color: #ffffff;
    width: 40%;
}

.align-center {}

.left {
    position: absolute;
    top: 40%;
    left: 5vw;
}

.mid {
    position: absolute;
    top: 40%;
    left: 30%;
}

.right {
    position: absolute;
    top: 40%;
    right: 5vw;
}

.backgroundBox {
    background: radial-gradient(circle, rgba(21, 63, 125, 0.5) 0%, rgba(10, 10, 10, 0.5)100%);
    box-shadow: 0 0.5rem 1.5rem rgba(21, 31, 47, 0.9);
}

.slider .slide .info h2,
.slider0 .slide0 .info h2,
.slider1 .slide1 .info h2,
.slider2 .slide2 .info h2,
.slider3 .slide3 .info h2,
.slider4 .slide4 .info h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-transform: capitalize;
    letter-spacing: 6px;
    /*text shadow effect*/
    --x-offset: -0.0625em;
    --y-offset: 0.0625em;
    --stroke: 0.025em;
    --background-color: var(--black);
    --stroke-color: var(--primaryRed);
    text-shadow: var(--x-offset) var(--y-offset) 0px var(--background-color), calc( var(--x-offset) - var(--stroke)) calc( var(--y-offset) + var(--stroke)) 0px var(--stroke-color);
}

.slider .slide .info p,
.slider0 .slide0 .info p,
.slider1 .slide1 .info p,
.slider2 .slide2 .info p,
.slider3 .slide3 .info p,
.slider4 .slide4 .info p {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 4%;
    text-shadow: -0.125rem 0.125rem 0.125rem var(--black), 0.125rem 0.125rem 0.125rem var(--primaryRed);
    letter-spacing: 0.125rem;
}

.slider .slide .info a,
.slider0 .slide0 .info a,
.slider1 .slide1 .info a,
.slider2 .slide2 .info a,
.slider3 .slide3 .info a,
.slider4 .slide4 .info a {
    text-decoration: none;
    font-size: 4rem;
    letter-spacing: 0.125rem;
    color: #ffffff;
    text-shadow: -0.125rem 0.0625rem 0.125rem var(--black), -0.25rem 0.125rem 0.125rem var(--primaryRed);
}

.navigation,
.navigation0,
.navigation1,
.navigation2,
.navigation3,
.navigation4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0.1;
    transition: opacity 0.5s ease;
}

.slider:hover .navigation,
.slider0:hover .navigation0,
.slider1:hover .navigation1,
.slider2:hover .navigation2,
.slider3:hover .navigation3,
.slider4:hover .navigation4 {
    opacity: 1;
}

.prev-btn,
.prev-btn0,
.prev-btn1,
.prev-btn2,
.prev-btn3,
.prev-btn4,
.next-btn,
.next-btn0,
.next-btn1,
.next-btn2,
.next-btn3,
.next-btn4 {
    z-index: 2;
    font-size: 2rem;
    color: #1a1a1a;
    background-color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.6rem;
}

.prev-btn:hover,
.prev-btn0:hover,
.prev-btn1:hover,
.prev-btn2:hover,
.prev-btn3:hover,
.prev-btn4:hover,
.next-btn:hover,
.next-btn0:hover,
.next-btn1:hover,
.next-btn2:hover,
.next-btn3:hover,
.next-btn4:hover {
    background-color: rgba(255, 255, 255, 1);
    color: var(--primaryRed);
}

.prev-btn,
.prev-btn0,
.prev-btn1,
.prev-btn2,
.prev-btn3,
.prev-btn4 {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.next-btn,
.next-btn0,
.next-btn1,
.next-btn2,
.next-btn3,
.next-btn4 {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

.navigation-visibility,
.navigation-visibility0,
.navigation-visibility1,
.navigation-visibility2,
.navigation-visibility3,
.navigation-visibility4 {
    z-index: 2;
    display: flex;
    justify-content: center;
}

.navigation-visibility .slide-icon,
.navigation-visibility0 .slide-icon0,
.navigation-visibility1 .slide-icon1,
.navigation-visibility2 .slide-icon2,
.navigation-visibility3 .slide-icon3,
.navigation-visibility4 .slide-icon4 {
    z-index: 2;
    background: rgba(255, 255, 255, 0.8);
    width: 3rem;
    height: 1rem;
    transform: translateY(-3rem);
    margin: 0 0.4rem;
    border-radius: 50px;
    box-shadow: 0 0.5rem 1.5rem rgba(10, 10, 10, 0.5);
    transition: ease-in-out 0.5s;
}

.navigation-visibility .slide-icon:hover,
.navigation-visibility0 .slide-icon0:hover,
.navigation-visibility1 .slide-icon1:hover,
.navigation-visibility2 .slide-icon2:hover,
.navigation-visibility3 .slide-icon3:hover,
.navigation-visibility4 .slide-icon4:hover {
    background-color: rgba(254, 196, 1, 0.8);
    outline: rgba(254, 196, 1, 0.25) solid 0.25rem;
    opacity: 1;
    cursor: pointer;
}

.navigation-visibility .slide-icon.active,
.navigation-visibility0 .slide-icon0.active0,
.navigation-visibility1 .slide-icon1.active1,
.navigation-visibility2 .slide-icon2.active2,
.navigation-visibility3 .slide-icon3.active3,
.navigation-visibility4 .slide-icon4.active4 {
    background-color: rgba(254, 196, 1, 0.8);
    opacity: 1;
    animation: slideIcon 1s infinite;
}

@keyframes slideIcon {
    0% {
        outline: rgba(254, 196, 1, 0.00) solid 0rem;
    }
    10% {
        outline: rgba(254, 196, 1, 0.1) solid 0.05rem;
    }
    20% {
        outline: rgba(254, 196, 1, 0.2) solid 0.10rem;
    }
    30% {
        outline: rgba(254, 196, 1, 0.3) solid 0.15rem;
    }
    40% {
        outline: rgba(254, 196, 1, 0.4) solid 0.20rem;
    }
    50% {
        outline: rgba(254, 196, 1, 0.5) solid 0.25rem;
    }
    60% {
        outline: rgba(254, 196, 1, 0.4) solid 0.20rem;
    }
    70% {
        outline: rgba(254, 196, 1, 0.3) solid 0.15rem;
    }
    80% {
        outline: rgba(254, 196, 1, 0.2) solid 0.10rem;
    }
    90% {
        outline: rgba(254, 196, 1, 0.1) solid 0.05rem;
    }
    100% {
        outline: rgba(254, 196, 1, 0.0) solid 0rem;
    }
}

@media only screen and (max-width:991px) {
    .slider .slide .info,
    .slider0 .slide0 .info,
    .slider1 .slide1 .info,
    .slider2 .slide2 .info,
    .slider3 .slide3 .info,
    .slider4 .slide4 .info {
        width: 50%;
    }
    .navigation,
    .navigation0,
    .navigation1,
    .navigation2,
    .navigation3,
    .navigation4 {
        opacity: 0.8;
    }
    .left {
        top: 20%;
    }
    .mid {
        top: 20%;
    }
    .right {
        top: 20%;
        right: 0%;
    }
    .prev-btn,
    .prev-btn0,
    .prev-btn1,
    .prev-btn2,
    .prev-btn3,
    .prev-btn4,
    .next-btn,
    .next-btn0,
    .next-btn1,
    .next-btn2,
    .next-btn3,
    .next-btn4 {
        font-size: 1rem;
    }
}

@media only screen and (max-width:767px) {
    .navigation-visibility .slide-icon,
    .navigation-visibility0 .slide-icon0,
    .navigation-visibility1 .slide-icon1,
    .navigation-visibility2 .slide-icon2,
    .navigation-visibility3 .slide-icon3,
    .navigation-visibility4 .slide-icon4 {
        width: 0.5rem;
        height: 0.5rem;
    }
    .full-screen {
        height: 23rem;
    }
    .adjusted {
        height: 18rem;
    }
    .small {
        height: 12rem;
    }
    .slider .slide .info h2,
    .slider0 .slide0 .info h2,
    .slider1 .slide1 .info h2,
    .slider2 .slide2 .info h2,
    .slider3 .slide3 .info h2,
    .slider4 .slide4 .info h2 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    .slider .slide .info p,
    .slider0 .slide0 .info p,
    .slider1 .slide1 .info p,
    .slider2 .slide2 .info p,
    .slider3 .slide3 .info p,
    .slider4 .slide4 .info p {
        font-size: 1rem;
        text-shadow: -0.0625rem 0.0625rem 0.0625rem var(--black), 0.0625rem 0.0625rem 0.0625rem var(--primaryRed);
    }
    .slider .slide .info a,
    .slider0 .slide0 .info a,
    .slider1 .slide1 .info a,
    .slider2 .slide2 .info a,
    .slider3 .slide3 .info a,
    .slider4 .slide4 .info a {
        font-size: 2rem;
    }
    .navigation-visibility .slide-icon,
    .navigation-visibility0 .slide-icon0,
    .navigation-visibility1 .slide-icon1,
    .navigation-visibility2 .slide-icon2,
    .navigation-visibility3 .slide-icon3,
    .navigation-visibility4 .slide-icon4 {
        width: 0.5rem;
        height: 0.5rem;
        margin: 0 0.2rem;
    }
}

@media (max-width: 900px) {
    .slider {
        width: 100%;
    }
    .slider .slide .info {
        position: relative;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width:500px) {
    .slider .slide .info h2 {
        font-size: 1.8em;
        line-height: 2.5rem;
    }
    .slider .slide .info p {
        font-size: 0.9rem;
    }
}

@keyframes bounceInDown {
    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0) scaleY(3);
    }
    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0) scaleY(0.9);
    }
    75% {
        transform: translate3d(0, -10px, 0) scaleY(0.95);
    }
    90% {
        transform: translate3d(0, 5px, 0) scaleY(0.985);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
}