/* ?------------CARD 1 OR TITLE CARDS------------ */

/* *Card*/
.card-1 {
    /* position: absolute; */
    /* background: radial-gradient(circle at top left, #A1FFCE 0%, #FAFFD1 100%); */
    background: #ffffff;
    /* background: radial-gradient(circle at top left, #72867b 0%, #26574e 100%); */
    box-shadow: 0 8px 60px 0 rgba(103, 151, 255, .11), 0 12px 90px 0 rgba(103, 151, 255, .11);
    height: 27vw;
    width: 20vw;
    z-index: 100;
    left: -27vw;

    border-radius: 0 40px 40px 0;
    transition: all 0.3s ease-in-out;
    transition-delay: 0.3s;
    margin-top: -0.7vw;

    /* opacity: 0; */
}

.card1-active {
    left: 0;
}

/*! Card*/
.doms {
    /* background: radial-gradient(circle at top left, #A1FFCE 0%, #FAFFD1 100%); */
    background: #ffffff;

    height: 10vw;
    width: 8vw;
    border-radius: 0 40px 40px 0;
    transition: all 0.2s;
    cursor: pointer;
}

.doms:hover {
    transform: scale(1.08);
}

/* *Image */
.card__image {
    height: 15vw;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    object-fit: cover;
}

/* ! Image */
.dom__image {
    opacity: 0;
    width: 100%;
    height: 5vw;
    animation: ImageFadeIn .8s 1.4s forwards;
    object-fit: cover;
    object-position: center;


}


/* * Title */
.main-card__content {
    margin-top: -1rem;
    opacity: 0;
    transition: all 0.5s ease-in-out 0.5s;
}

.main-card__title {
    /* color: #e0f5e9; */
    color: #142850;
    /* text-shadow: 2px 2px grey; */
    margin-top: 1vw;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-size: 1.7vw;
    transition: all 0.2s ease-in-out;
}

/* ! Title */
.card__content {
    margin-top: -1rem;
    opacity: 0;
    animation: ContentFadeIn .8s 1.6s forwards;
}

.dom__title {
    color: #142850;
    font-weight: 700;
    margin: 0.5vw -1.5vw;
    letter-spacing: 0.01em;
    font-size: 0.8vw;
    width: fit-content;
}

/* *COMMON////////////////////////////////////////////////////////////// */



.title-card {
    border-radius: 6px;
    padding: 2vw;
    color: rgb(10, 10, 10);
    box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2), 0 0 1rem rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* ??????????????????????? IMAGE     ???????????????? */

.card__image-container {
    margin: -2rem -2rem 1rem -2rem;
    display: flex;
    justify-content: center;
    object-fit: cover;
    object-position: center;
}

.card__image-appear {
    animation-name: ImageFadeIn;
    animation-duration: 0.8s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.3s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.an-image-change {
    opacity: 0;
    filter: blur(50px);
}



/* ?????????????????????    TITLE ?????????????? */

.card__content-appear {
    animation: ContentFadeIn .8s 0.6s forwards;
}

.a-title-change {
    transform: translateY(1rem);
    opacity: 0;
}

/* ????????????????  Animations ????????????? */


@keyframes ContentFadeIn {
    0% {
        transform: translateY(-1rem);
        opacity: 0;
    }

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


@keyframes ImageFadeIn {
    0% {
        transform: translate(-0.5rem, -0.5rem) scale(1.05);
        opacity: 0;
        filter: blur(10px);
    }

    50% {
        opacity: 1;
        filter: blur(4px);
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0px);
    }
}