/*

Type: .css
FileName: main
AuthFile: Fabian.L
Property: Naytics
TimeStamp: 28/07/24 - 19:33

*/

.round{
    border-bottom-left-radius: 7vw;
    border-bottom-right-radius: 7vw;
}

.unround{
    border-top-left-radius: 7vw;
    border-top-right-radius: 7vw;
}

.round2{
    border-top-left-radius: 7vw;
    border-top-right-radius: 7vw;
    border-bottom-left-radius: 7vw;
    border-bottom-right-radius: 7vw;
}
    
.fa-arrow-right{
    transition: all .35s;
}

a:hover .fa-arrow-right{
    transform: translateX(5px);
}

/* Submit button Newsletter */

#submit-btn.submitting #arrow-icon {
    transform: translateX(50px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

#submit-btn #check-icon {
    transform: scale(0);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#submit-btn.submitting #check-icon {
    transform: scale(1);
    opacity: 1;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

/* End of submit button Newsletter */

/* Carousel */ 

.swiper-wrapper {
    width: 100%;
    height: max-content !important;
    padding-bottom: 64px !important;
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    position: relative;
}

.swiper-pagination-bullet {
    background: #4f46e5;
}

/* End of Carousel */

.rs{
    transition: all .35s;
    display: flex;
}
    
.rs:hover{
    transform: translateY(-5px);
}

.anim{
    animation: logo-jc 4s linear infinite;
}

@keyframes logo-jc{
    0%{
        rotate: 0deg;
    }
    50%{
        rotate: 10deg;
    }
    100%{
        rotate: 0deg;
    }
}

.widthcust{
    width: 90%;
}

.stickcc {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.surhover{
    background: radial-gradient(circle at right, rgba(232, 136, 115, 0.3), rgba(0, 0, 0, 0.7));
}

.surhover:hover{
    background: radial-gradient(circle at left, rgba(232,136,115,0.2), black);
}

.surhover .zoomm{
    background-size: 100%;
    transition: background-size .35s;
}

.surhover:hover .zoomm{
    background-size: 120%;
    transition: background-size .35s;
}

/* Play Button */

.button-container {
    position: relative;
    display: inline-block;
}

.button-content::before, .button-content::after {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    content: attr(data-content);
}

.button-content::before {
    background-color: #E88873;
    color: #fff;
    content: "ㅤDive into Adventure!";
}

.button-content::after {
    background-color: #FF7D73;
    color: #fff;
    transform: translateX(-100%);
    content: "Start Your Quest!ㅤ";
}

.button-container:hover .button-content::before {
    transform: translateX(100%);
}

.button-container:hover .button-content::after {
    transform: translateX(0);
}

.button-container::before {
    content: "➔";
    position: absolute;
    left: 10px;
    top: 45%;
    transform: translateY(-45%);
    background-color: #000;
    color: #fff;
    padding: 8px 10px;
    border-radius: 48%;
    transition: transform 0.3s ease-in-out;
    z-index: 10;
}

.button-container:hover::before {
    transform: translateY(-50%) translateX(675%);
}

.btn-play {
    position: relative;
    width: 300px;
    height: 60px;
}

#little_to{
    animation: tactical 3s linear infinite;
}

@keyframes tactical{
    0%{
        rotate: 0deg;
    }
    50%{
        rotate: 10deg;
    }
    100%{
        rotate: 0deg;
    }
}