.hero-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 -10px;
}
.hero-caption {
    width: 54%;
    padding: 0px 10px;
}
.hero-image {
    width: 46%;
    padding: 0px 10px;
}
.hero-caption h1 {
    margin-bottom: 30px;
    padding-left: 50px;
}
.hero-inner h3 {
    position: absolute;
    left: 31px;
    top: -25px;
    transform: rotate(90deg);
    transform-origin: left top;
}
.hero-inner {
    position: relative;
}
.hero-caption .elementor-button {
    margin-top: 10px;
}
.hero-btns .elementor-button-icon {
    margin-left: 3px;
}
.swiper-button-next,
.swiper-button-prev {
    background: #0000008f;
    height: 50px;
    width: 32px;
    border-radius: 4px;
}
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px;
    color: #d5dddf;
}
.hero-banner .swiper-pagination {
    position: absolute;
    left: -97px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: auto;
}
.hero-banner .swiper-pagination-bullet {
    width: 22px;
    height: 22px;
    border-radius: 0px;
    background: transparent;
    border: 2px solid #15151533;
    opacity: 1;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-banner .swiper-pagination-bullet:after {
    content: "";
    background: transparent;
    height: 5px;
    width: 5px;
    position: absolute;
}
.hero-banner .swiper-pagination-bullet-active {
    border-color: var(--e-global-color-accent);
}
.hero-banner .swiper-pagination-bullet-active:after {
    background: var(--e-global-color-accent);
}
@media only screen and (min-width: 1025px) and (max-width: 1300px) {
}
@media only screen and (max-width: 1024px) {
.hero-caption h1 {
    max-width: 400px;
}
.hero-banner .swiper-pagination {
    left: 0;
    top: auto;
    transform: none;
    display: inline-block;
    width: 100%;
    bottom: -60px !important;
    text-align: left;
    padding-left: 20px;
}
.hero-banner .swiper-pagination-bullet {
    display: inline-block;
}
.hero-banner .swiper-pagination-bullet:after {
    top: 7px;
    right: 6px;
}
}
@media only screen and (max-width: 767px) {
.hero-row {
    flex-direction: column-reverse;
}    
.hero-caption,.hero-image {
    width: 100%;
}
.hero-caption {
    margin-top: 50px;
}
.hero-inner h3 {
    left: 27px;
    top: -35px;
}
.hero-caption h1 {
    padding-left: 38px;
}
.hero-content br {
    display: none;
}
}

/* Animation */
/* Image */
/*.hero-image img {
    transform: scale(1);
}
.hero-slide.swiper-slide-active .hero-image img {
    animation: imageZoom 2s ease forwards;
}
@keyframes imageZoom {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}*/
.hero-image img {
    animation: smoothZoom 5s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}
@keyframes smoothZoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}
/* Main heading */
.hero-slide h1 {
    opacity: 0;
}
.hero-slide.swiper-slide-active h1 {
    animation: titleUp 0.9s ease forwards;
}
@keyframes titleUp {
    0% {
        opacity: 0;
        transform: translateY(80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Content */
.hero-content {
    opacity: 0;
}
.hero-slide.swiper-slide-active .hero-content {
    animation: contentUp 0.9s ease forwards;
    animation-delay: 0.2s;
}
@keyframes contentUp {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Button */
.hero-slide .hero-btns {
    opacity: 0;
}
.hero-slide.swiper-slide-active .hero-btns {
    animation: btnUp 0.9s ease forwards;
    animation-delay: 0.4s;
}
@keyframes btnUp {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Sub Heading */
.hero-slide h3 {
    opacity: 0;
}
.hero-slide.swiper-slide-active h3 {
    animation: fadeOnly 2s ease-in-out forwards;
}
@keyframes fadeOnly {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.hero-slide.swiper-slide {
    backface-visibility: hidden;
}