/* Animatated Card section */

.animation-cards-section .card {
    border-radius: 39px;
    overflow: hidden;
    min-height: 550px;
    position: relative;
    border: 3px solid #FFFFFF;
    box-shadow: 4px 6px 24px 0px #6D8DAD26;
    padding: 25px;
}

.card-1 {
    background: linear-gradient(180deg, rgba(242, 181, 0, 0.3) 0%, rgba(255, 221, 12, 0.1) 47.5%, rgba(242, 181, 0, 0.3) 100%);
}

/* First Card */
.card-1 .bg-dot-1 {
    position: absolute;
    background: url('../images/AI-dot.webp') no-repeat center center;
    background-size: cover;
    width: 98px;
    height: 100px;
    bottom: 4%;
    right: 8%;
    animation: move-dot-1 4s linear; /* Animation for dot-1 */
}

/* Dot 2 Animation */
.card-1 .bg-dot-2 {
    position: absolute;
    background: url('../images/AI-dot.webp') no-repeat center center;
    background-size: cover;
    width: 98px;
    height: 100px;
    left: 30%;
    animation: move-dot-2 4s linear forwards; /* Ensures it stays at final position */
}

/* AI Image Animation */
.card-1 .bg-image-AI {
    position: absolute;
    background: url('../images/ai-2.png') no-repeat center center;
    background-size: cover;
    top: 0px;
    right: -100px;
    width: 169%;
    height: 100%;
    transform: rotate(-65deg);
    animation: rotate-ai 4s linear; /* Rotation animation for AI image */
}

/* Dot 1 Movement - Bottom Right to Bottom Left */
@keyframes move-dot-1 {
    0% {
        top: 10%;
        right: -7%;
    }

    25% {
        top: 30%;
        right: -4%;
    }

    50% {
        top: 50%;
        right: 1%;
    }

    75% {
        top: 65%;
        right: 6%;
    }

    100% {
        top: 78%;
        right: 8%;
    }
}

/* Dot 2 Movement - Bottom Left to Top Left */
@keyframes move-dot-2 {
    0% {
        top: 70%;
        left: 0%;
    }

    25% {
        top: 50%;
        left: 5%;
    }

    50% {
        top: 20%;
        left: 7%;
    }

    75% {
        top: 10%;
        left: 20%;
    }

    100% {
        top: 3%;
        left: 30%;
    }
}

/* AI Image Rotation */
@keyframes rotate-ai {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-65deg);
    }
}

/* Default: No animation initially */
.card-1 .bg-dot-1,
.card-1 .bg-dot-2,
.card-1 .bg-image-AI {
    animation: none;
}

/* Add animations when .animate class is applied */
.card-1.animate .bg-dot-1 {
    animation: move-dot-1 4s linear;
}

.card-1.animate .bg-dot-2 {
    animation: move-dot-2 4s linear;
}

.card-1.animate .bg-image-AI {
    animation: rotate-ai 4s linear;
}


/* card 2 */

.card-2 {
    background: url('../images/card-2-bg.webp') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    color: #FFFFFF;
}

    .card-2 .card-2-content {
        margin-top: 50px;
    }

        .card-2 .card-2-content h4 {
            font-family: Inter;
            font-size: 42.61px;
            font-weight: 300;
            line-height: 51.56px;
        }

        .card-2 .card-2-content h3 {
            font-family: Poppins;
            font-size: 42.61px;
            font-weight: 600;
            line-height: 63.91px;
        }

        .card-2 .card-2-content p {
            font-family: Inter;
            font-size: 20px;
            font-weight: 300;
            line-height: 30px;
        }

    .card-2 .hashtag {
        font-family: Poppins;
        font-size: 24px;
        font-weight: 700;
        line-height: 30px;
        text-align: center;
    }

    .card-2 .card-2-logo {
        text-align: start;
    }

        .card-2 .card-2-logo img {
            height: 72px;
            width: 77px;
        }

.card-2-content {
    opacity: 0;
    transform: translateY(-200px) scale(0.8);
    transition: opacity 1s ease-out, transform 1.5s ease-out;
}

.hashtag,
.card-2-logo img {
    opacity: 0;
    transform: translateY(200px) scale(0.8);
    transition: opacity 1s ease-out, transform 1.5s ease-out;
}

.card-2.animate .card-2-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.card-2.animate .hashtag {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.5s;
}

.card-2.animate .card-2-logo img {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
}


.card-3 {
    background: url('../images/card-3-bg.webp') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.card-3-content {
    margin-top: 25px;
}

    .card-3-content h4 {
        font-family: Poppins;
        font-size: 32px;
        font-weight: 600;
        line-height: 45px;
        text-align: left;
        color: #000000;
    }

    .card-3-content p {
        font-family: Inter;
        font-size: 20px;
        font-weight: 300;
        line-height: 30px;
        text-align: left;
        color: #000000;
    }

.card-3-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .card-3-logo img {
        height: 72px;
        width: 77px;
    }

    .card-3-logo .btn {
        font-family: Inter;
        font-size: 24.78px;
        font-weight: 600;
        line-height: 29.99px;
        color: #FFDD0C;
        background-color: #000000;
    }

.card-3-content .title,
.card-3-content .content {
    opacity: 0;
    transform: translateY(-200px) scale(0.8);
    transition: opacity 1s ease-out, transform 1.5s ease-out;
}


.card-3-logo .btn {
    opacity: 0;
    transform: translateY(200px) scale(0.8);
    transition: opacity 1s ease-out, transform 1.5s ease-out;
}

.card-3.animate .title {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.card-3.animate .content {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.5s;
}

.card-3.animate .card-3-logo .btn {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
}


/* Default transition for all cards */
.owl-carousel .product-item {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* Animation for the remaining items */
@keyframes slideInFromRight {
    0% {
        opacity: 0.4;
        transform: translateX(100%) scale(1.2);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Apply right animation to the rest */
.owl-carousel .owl-item.active .product-item {
    animation: slideInFromRight 1s ease-in-out forwards;
}



/* main animation */



.animation-text {
    position: relative;
    height: 150px;
}

.text {
    position: relative;
    font-weight: 700;
    font-family: Poppins !important;
    color: #FFFFFF;
    white-space: nowrap;
}

.colored-text {
    color: #FFDD0C;
    font-weight: 700;
    font-family: Poppins !important;
}

.still-2,
.movable {
    font-family: Inter;
}


.still {
    position: absolute;
    top: 40px;
    right: 6%;
}


.moveable {
    position: absolute;
    opacity: 0;
    right: 52%;
    top: 37px;
    transition: opacity 1s ease, transform 1s ease;
}

/* Individual positions for Part 1 */
.line-1 .moveable {
    transform: translateX(50px);
}

.line-2 .moveable {
    transform: translateX(-50px);
}

.line-3 .moveable {
    transform: translateX(50px);
}

.line-4 .moveable {
    transform: translateX(-50px);
}

.line-5 .moveable {
    transform: translateX(50px);
}


.moveable.animate {
    opacity: 1;
    transform: translateX(0);
}


.hide {
    opacity: 0;
    transition: opacity 1s ease;
}




.still-2 {
    position: absolute;
    top: 40px;
    left: 11%;
    opacity: 0;
    transition: opacity 1s ease;
}


.movable-2 {
    position: absolute;
    opacity: 0;
    top: 40px;
    left: 50%;
    transition: opacity 1s ease, transform 1s ease;
}

.line-6 .moveable-2 {
    transform: translateX(-50px);
}

.line-7 .moveable-2 {
    transform: translateX(50px);
}
.line-8 .moveable-2 {
    transform: translateX(-50px);
}
.line-9 .moveable-2 {
    transform: translateX(50px);
}
.line-10 .moveable-2 {
    transform: translateX(-50px);
}
.line-11 .moveable-2 {
    transform: translateX(50px);
}
.line-12 .moveable-2 {
    transform: translateX(-50px);
    transition: transform 1s ease !important;
}

.movable-2.animate {
    opacity: 1;
    transform: translateX(0);
}

.line-12 .movable-2.animate {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1s ease, transform 1s ease !important;
}

.line-12 .movable-2:not(.animate) {
    opacity: 0 !important;
    transition: opacity 1.7s ease;
}


.line-13 {
    position: absolute;
    top: 40px;
    left: 10%;
    opacity: 0;
    transform: scale(1);
    transition: transform 1.7s ease-out, opacity 0.5s ease-out;
}

    .line-13.animate {
        opacity: 1;
        transform: scale(1.2);
    }


@media(max-width: 1450px) {
    .animation-text {
        height: 120px;
    }

    .text {
        font-size: 75px;
    }

    .still {
        top: 30px;
        right: 9%;
    }


    .moveable {
        right: 52%;
        top: 30px;
    }

    .still-2 {
        top: 30px;
        left: 14%;
    }


    .movable-2 {
        top: 30px;
        left: 50%;
    }

    .line-13 {
        top: 30px;
    }

}



@media(max-width: 1200px){

    .animation-text {
        height: 120px;
    }

    .text {
        font-size: 65px;
    }

    .still {
        top: 30px;
        right: 8%;
    }


    .moveable {
        right: 52%;
        top: 30px;
    }

    .still-2 {
        top: 30px;
        left: 13%;
    }


    .movable-2 {
        top: 30px;
        left: 50%;
    }

    .line-13 {
        top: 30px;
    }


}

@media(max-width: 992px) {

    .animation-text {
        height: 90px;
    }

    .text {
        font-size: 51px;
    }

    .still {
        top: 30px;
        right: 5%;
    }


    .moveable {
        right: 52%;
        top: 30px;
    }

    .still-2 {
        top: 30px;
        left: 11%;
    }


    .movable-2 {
        top: 30px;
        left: 50%;
    }

    .line-13 {
        top: 30px;
    }


}

@media(max-width: 767px) {

    .animation-text {
        height: 120px;
    }

    .text {
        font-size: 40px;
    }

    .still {
        top: 30px;
        right: 5%;
    }


    .moveable {
        right: 54%;
        top: 30px;
    }

    .still-2 {
        top: 30px;
        left: 9%;
    }


    .movable-2 {
        top: 30px;
        left: 50%;
    }

    .line-13 {
        top: 30px;
        left: 10%;
    }
}

@media(max-width: 600px) {

    .animation-text {
        height: 120px;
    }

    .text {
        font-size: 35px;
    }

    .still {
        top: 30px;
        right: 7%;
    }


    .moveable {
        right: 52%;
        top: 30px;
    }

    .still-2 {
        top: 30px;
        left: 11%;
    }


    .movable-2 {
        top: 30px;
        left: 50%;
    }

    .line-13 {
        top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        left: 13%;
    }

    .line-13 span{
        display: block;
    }
}

@media(max-width: 515px) {
    .animation-text {
        height: 140px;
    }

    .text {
        font-size: 46px;
    }

    .still {
        top: 90px;
        right: 13%;
    }

    .line-1 .moveable {
        right: 20%;
    }

    .line-2 .moveable {
        right: 25%;
    }

    .line-3 .moveable {
        right: 20%;
    }

    .line-4 .moveable {
        right: 22%;
    }

    .line-5 .moveable {
        right: 23%;
    }

    .still-2 {
        right: 9%;
    }

    .movable-2 {
        top: 90px;
    }

    .line-6 .colored-text {
        left: 15%;
    }

    .line-7 .colored-text {
        left: 16%;
    }

    .line-8 .colored-text {
        left: 16%;
    }

    .line-9 .colored-text {
        left: 18%;
    }

    .line-10 .colored-text {
        left: 15%;
    }

    .line-11 .colored-text {
        left: 19%;
    }

    .line-12 .colored-text {
        left: 16%;
    }

    .line-13 {
        left: 15%;
    }

}


@media(max-width: 400px) {
    .animation-text {
        height: 130px;
    }

    .text {
        font-size: 42px;
    }

    .still {
        top: 90px;
        right: 13%;
    }

    .line-1 .moveable {
        right: 20%;
    }

    .line-2 .moveable {
        right: 25%;
    }

    .line-3 .moveable {
        right: 20%;
    }

    .line-4 .moveable {
        right: 22%;
    }

    .line-5 .moveable {
        right: 23%;
    }

    .still-2 {
        right: 9%;
    }

    .movable-2 {
        top: 90px;
    }
    .line-6 .colored-text {
        left: 14%;
    }

    .line-7 .colored-text {
        left: 16%;
    }

    .line-8 .colored-text {
        left: 16%;
    }

    .line-9 .colored-text {
        left: 15%;
    }

    .line-10 .colored-text {
        left: 15%;
    }

    .line-11 .colored-text {
        left: 19%;
    }

    .line-12 .colored-text {
        left: 16%;
    }

}

@media(max-width: 350px) {
    .animation-text {
        height: 150px;
    }

    .text {
        font-size: 35px;
    }

    .still {
        top: 80px;
        right: 13%;
    }

    .still-2 {
        right: 9%;
    }

    .movable-2 {
        top: 80px;
    }
}
#text1,#text2 {
    position:relative;
    opacity:1;
    visibility:visible;
    transition: all 0.5s ease-in-out;
    left:0;
    right:0;
}
.text {
    transition: all 2s ease-in-out;
    position: absolute;
    top: 0;
    left: 45%;
    transform: translate(-45%, 0%);
    width: 100%;
}
#textline2{
    opacity:0;
    visibility:hidden;
}
.main-div{
    position:relative; 
}

@media(max-width:550px)
{
    .text {
        white-space: unset; 
    }
    #text1, #text2{
        display:block; 
    }
    
}

body{
    overflow-x:hidden;
}