.home-section {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

.home-banner-title {
    margin-top: calc(50vh - (205px / 2));
    font-family: "Poppins";
    font-weight: bold;
    will-change: margin-top;
    -webkit-transition: margin-top ease-out 1s;
    -moz-transition: margin-top ease-out 1s;
    -o-transition: margin-top ease-out 1s;
    transition: margin-top ease-out 1s
}

.contact-title {
    left: 50%;
    transform: translateX(calc(-50%));
}
.contact-title::before {
    position: absolute;
    content: 'We are ready when you are';
    display: inline-block;
    top: 5px;
    left: 5px;
    color: transparent;
    -webkit-text-stroke: 1px #F2304D;
    z-index: 0;
}
.contact-title::after {
    position: absolute;
    content: '';
    display: none;
    bottom: -10px;
    left: 0;
    transform: translateX(-50%);
    opacity: 0;
    width: 50%;
    height: 10px;
    background-color: #ffffff;
}

/* .contact-title.active:after {
    left: 50%;
    opacity: 1;
    will-change: transition, opacity;
    -webkit-transition: left ease-out .7s, opacity ease-out 1.5s;
    -moz-transition: left ease-out .7s, opacity ease-out 1.5s;
    -o-transition: left ease-out .7s, opacity ease-out 1.5s;
    transition: left ease-out .7s, opacity ease-out 1.5s;
} */

@media (max-width: 1279px) {
    .home-banner-title {
        margin-top: calc(50vh - (132px / 2));
    }
    .contact-title::before {
        top: 3px;
        left: 3px;
    }
}

@media (max-width: 1023px) {
    .home-banner-title {
        margin-top: calc(50vh - (99px / 2));
    }
    .contact-title::before {
        top: 2.5px;
        left: 2.5px;
    }
    .contact-title::after {
        height: 8px;
    }
}

@media (max-width: 767px) {
    .home-banner-title {
        margin-top: calc(50vh - (82px / 2));
    }

    .contact-title::before {
        top: 2px;
        left: 1.5px;
    }
    .contact-title::after {
        height: 5px;
    }
}

@media (max-width: 639px) {
    .home-banner-title {
        margin-top: calc(50vh - (41px / 2));
    }
    .contact-title::before {
        top: 1.5px;
        left: 1.5px;
    }
    .contact-title::after {
        height: 3px;
    }
}

@media (max-width: 639px) {
    .home-banner-title {
        margin-top: calc(50vh - (35px / 2));
    }
    .contact-title::before {
        top: 1.5px;
        left: 1.5px;
    }
    .contact-title::after {
        height: 2px;
    }
}

.textUnder {
    -webkit-text-stroke: 1px #FF245E;
}  

.service-digital-bg {
    background-image: url("../public/images/services/digital.jpg");
}

.service-social-bg {
    background-image: url("../public/images/services/social.jpg");
}

.service-tech-bg {
    background-image: url("../public/images/services/services.jpg");
}

.service-crm-bg {
    background-image: url("../public/images/services/crm.jpg");
}

.goggles-bg {
    background-image: url("../public/images/home/goggles-1.png");
    will-change: opacity, transform;
}

@media (max-width: 767px) {
    .service-digital-bg {
        background-image: url("../public/images/services/digital_mob.jpg");
    }
    .service-social-bg {
        background-image: url("../public/images/services/social_mob.jpg");
    }
    .service-tech-bg {
        background-image: url("../public/images/services/services_mob.jpg");
    }
    .service-crm-bg {
        background-image: url("../public/images/services/crm_mob.jpg");
    }
}

.serviceSwiper {
    width: 100%;
    height: 100%;
}
    .serviceSwiper .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    
    .bullet-list {
        position: relative;
        transform: translate3d(0px,0%,0) !important;
        z-index: 1;
    }

    .bullet {
        display: block;
        cursor: pointer;
        width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,20px));
        height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,20px));
        margin: var(--swiper-pagination-bullet-vertical-gap,12px) 0;
        border-radius: 50%;
        background: var(--swiper-pagination-bullet-inactive-color,#000);
        opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
        opacity: 0.5 !important;
        background-color: #FF245E !important;
    }
    .bullet-active {
        background-color: #FF245E !important;
        opacity: 1 !important;
    } 

@media (max-width: 991px) {
    .bullet {
        width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,15px));
        height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,15px));
    }
}

@media (max-width: 639px) {
    .bullet {
        width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));
        height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));
        margin: var(--swiper-pagination-bullet-vertical-gap,8px) 0;
    }
}

.circle-ripple {
    animation: 4s ripple infinite;
}

.circle-ripple:before {
    content: "";
    position: absolute;
    width: 110%;
    height: 110%;
    opacity: 1;
    border: 5px solid #FF245E;
    border-radius: 99999px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: opacity, scale;
}

.finger {
    animation: 4s finger_anime infinite;
}

@keyframes ripple {
    100% {
        opacity: 0;
        scale: 1.5;
    }
}

@keyframes finger_anime {
    0% {
        transform: translate3d(15%, 120%, 45px);
        rotate: -30deg;
    }
    33% {
        transform: translate3d(10%, 30%, 45px);
        rotate: -30deg;
    }
    66% {
        transform: translate3d(15%, 120%, 45px);
        rotate: -30deg;
    }
    100% {
        transform: translate3d(15%, 120%, 45px); 
        rotate: -30deg;
    }
}

.explore-btn {
    background-image: linear-gradient(black, black), linear-gradient(41deg, rgb(231 142 165 / 80%) 30%, rgb(242, 48, 77));
}
    .explore-btn .explore-arrow {
        position: relative;
        display: inline-block;
        width: 24px;
        margin-left: 5px;
    }
        .explore-btn .explore-arrow:after {
            content: '>>';
            position: relative;
            animation: explore-arrow 1.5s infinite;
            -webkit-animation: explore-arrow 1.5s infinite;
        }
.contact-us-btn {
    background-image: linear-gradient(black, black), linear-gradient(41deg, rgb(231 142 165 / 80%) 30%, rgb(242, 48, 77));
}

.down-arrow {
    animation: downArrow 2s ease-in-out infinite;
}

@keyframes downArrow {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(50%);
    }
    100% {
        transform: translateY(0%);
    }
}

@keyframes explore-arrow {
    0% {
        opacity: 0;
        transform-origin: translate(-15px, 0);
        left: -15px;
    }
    33% {
        opacity: 1;
        transform-origin: translate(0, 0);
        left: 0px;
    }
    66% {
        opacity: 1;
        transform-origin: translate(0, 0);
        left: 0px;
    }
    100% {
        opacity: 0;
        transform-origin: translate(15px, 0);
        left: 15px;
    }
}