@keyframes gradient {  
    0% {  
         background-position: 0% 50%;  
   }  
    50% {  
         background-position: 100% 50%;  
   }  
    100% {  
         background-position: 0% 50%;  
   }  
}  
@media screen and (max-width: 520px) {  
    h1 {  
         font-size: 16px;  
         line-height: 24px;  
   }  
}  
@media screen and (max-width: 520px) {  
    p {  
         font-size: 14px;  
         line-height: 20px;  
   }  
}  
.swiper-wrapper {  
    width: 100%;  
    height: 100%;  
    display: flex;  
    align-items: center;  
    z-index: 1;  
    position: relative;  
}  
.swiper-container {  
    width: 100%;  
    position: relative;  
    max-width: 420px;  
    height: 100%;  
    max-height: 420px;  
    border-radius: 10px;  
}  
.slider-image-wrapper {  
    height: 200px;  
    width: 100%;  
    overflow: hidden;  
}  
.slider-item {  
    /* width: 100%;   */
    height: 100%;  
    border-radius: 10px;  
    overflow: hidden;  
    display: flex;  
    flex-direction: column;  
    flex-shrink: 0;  
    opacity: 0;  
    cursor: grab;  
}  
.slider-item-content {  
    padding: 32px 0px;  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    transition: 0.4s;  
}  
.slider-item-content > * {  
    opacity: 0;  
    transform: translateY(20px);  
}  
.swiper-slide-active .slider-item-content > * {  
    transform: translateY(0px);  
    opacity: 1;  
}  
.slider-image {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
    transition: 0.2s;  
}  
.swiper-pagination {  
    position: absolute;  
    left: 50%;  
    bottom: 0px;  
    transform: translatex(-50%);  
    z-index: 1;  
    width: auto !important;  
    top: 95%;
}  
.swiper-pagination-bullet {  
    border-radius: 0;  
    width: 8px;  
    height: 8px;  
    border-radius: 50%;  
    line-height: 30px;  
    font-size: 12px;  
    opacity: 1;  
    background: rgba(132, 73, 199, 0.3);  
    display: inline-block;  
    margin-right: 8px;  
    cursor: pointer;  
    transition: all 0.2s;  
}  
.swiper-pagination-bullet-active {  
    background: #6F5494
    ;  
    width: 20px;  
    border-radius: 10px;  
}  
.slider-buttons {
    position: absolute;
    display: flex;
    top: 69%;
    left:117px;
    z-index: 99999;
    justify-content: flex-end;
    width: 100%;
}
.swiper-button-next, .swiper-button-prev {  
    background-color: transparent;  
    border: none;  
    cursor: pointer;  
    outline: none;  
    color: black;  
    position: relative;  
    /* margin-left: 4px;   */
}  
.swiper-button-next:before, .swiper-button-prev:before {  
    content: '';  
    position: absolute;  
    background-color: #fff;  
    height: 1px;  
    width: 0;  
    left: 0;  
    bottom: -1px;  
    transition: 0.2s;  
}  
.swiper-button-next:hover:before, .swiper-button-prev:hover:before {  
    width: 100%;  
}  
.socials {  
    position: fixed;  
    top: 12px;  
    right: 16px;  
    display: flex;  
    align-items: center;  
}  
.socials .social-link {  
    display: inline-block;  
    margin-left: 8px;  
    color: #fff;  
}  
@media screen and (max-width: 520px) {  
   .slider-buttons {
    position: relative;
    display: flex;
    /* top: 69%; */
    z-index: 99999;
    justify-content: center;
    width: 100%;
}
.swiper-pagination {  
    position: absolute;  
    left: 50%;  
    bottom: 0px;  
    transform: translatex(-50%);  
    z-index: 1;  
    width: auto !important;  
    top: 101%;
} 
.slider-image-wrapper {
    height: 96px;
    width: 70%;
    overflow: hidden;
}
}  
@media screen and (max-width: 1440px) {  
    .slider-buttons {
        position: absolute;
        display: flex;
        top: 69%;
        left:50px;
        z-index: 99999;
        justify-content: flex-end;
        width: 100%;
    }
 }  
@media screen and (max-width: 1024px) {  
    .slider-buttons {
        position: absolute;
        display: flex;
        top: 69%;
        left:8px;
        z-index: 99999;
        justify-content: flex-end;
        width: 100%;
    }
 }  
@media screen and (max-width: 425px) {  
    .swiper-container {
        width: 375px;
        position: relative;
        max-width: 420px;
        height: 100%;
        max-height: 231px;
        border-radius: 10px;
        padding: 1px 15px;
    }
    .slider-buttons {
        position: absolute;
        display: flex;
        top: 69%;
        left:-70px;
        z-index: 99999;
        justify-content: flex-end;
        width: 100%;
    }
    .setText{
        content: "X";
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
    }
 }  
 @media screen and (max-width: 375px) {  
    .swiper-container {
        width: 325px;
        position: relative;
        max-width: 420px;
        height: 100%;
        max-height: 231px;
        border-radius: 10px;
        padding: 1px 15px;
    }
 }  
 @media screen and (max-width: 320px) {  
    .swiper-container {
        width: 275px;
        position: relative;
        max-width: 420px;
        height: 100%;
        max-height: 231px;
        border-radius: 10px;
        padding: 1px 15px;
    }
 }