.universal-slider-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.universal-slider-wrapper .swiper {
width: 100%;
height: 100%;
}
.universal-slider-wrapper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
}
.universal-slider-wrapper .slide-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
position: relative;
}
.universal-slider-wrapper .slide-inner {
width: 100%;
max-width: 1200px;
padding: 0 20px;
text-align: center;
position: relative;
z-index: 2;
}
.universal-slider-wrapper .slide-title {
margin: 0 0 20px;
opacity: 0;
}
.universal-slider-wrapper .slide-subtitle {
margin: 0 0 30px;
opacity: 0;
}
.universal-slider-wrapper .slide-button {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0;
}
.universal-slider-wrapper .slide-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.universal-slider-wrapper .swiper-button-prev,
.universal-slider-wrapper .swiper-button-next {
color: #fff;
width: 50px;
height: 50px;
}
.universal-slider-wrapper .swiper-button-prev:after,
.universal-slider-wrapper .swiper-button-next:after {
font-size: 24px;
}
.universal-slider-wrapper .swiper-pagination-bullet {
background: #fff;
opacity: 0.5;
width: 12px;
height: 12px;
}
.universal-slider-wrapper .swiper-pagination-bullet-active {
opacity: 1;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.animate-fadeIn {
animation: fadeIn 0.8s ease forwards;
}
.animate-fadeInUp {
animation: fadeInUp 0.8s ease forwards;
}
.animate-fadeInDown {
animation: fadeInDown 0.8s ease forwards;
}
.animate-fadeInLeft {
animation: fadeInLeft 0.8s ease forwards;
}
.animate-fadeInRight {
animation: fadeInRight 0.8s ease forwards;
}
.animate-slideInUp {
animation: slideInUp 0.8s ease forwards;
}
.animate-slideInDown {
animation: slideInDown 0.8s ease forwards;
}
.animate-slideInLeft {
animation: slideInLeft 0.8s ease forwards;
}
.animate-slideInRight {
animation: slideInRight 0.8s ease forwards;
}
.animate-zoomIn {
animation: zoomIn 0.8s ease forwards;
}
.animate-bounceIn {
animation: bounceIn 0.8s ease forwards;
}
@media (max-width: 768px) {
.universal-slider-wrapper .slide-title {
font-size: 36px !important;
line-height: 40px !important;
}
.universal-slider-wrapper .slide-subtitle {
font-size: 24px !important;
line-height: 30px !important;
}
.universal-slider-wrapper .slide-button {
width: auto !important;
padding: 0 30px;
}
}