/* google font  */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,700&display=swap');



:root {
    --clr-gold: #d39038;
    --clr-btn: #d33838;
    --clr-btn-bg: #fff;
}




#Ramadan_CardModel .txtBx {
    position: relative;
    max-width: 550px;
    float: left;
}

    #Ramadan_CardModel .txtBx h2 {
        color: var(--clr-gold);
        font-size: 3.5rem;
        margin-bottom: 10px;
        font-weight: 700;
        /* animation  */
        opacity: 0;
        animation: slide_right .5s linear forwards;
        animation-delay: 1s;
        /*float:left;*/
    }

    #Ramadan_CardModel .txtBx p {
        font-size: 1.2rem;
        color: #102740;
        /* animation  */
        opacity: 0;
        animation: slide_right .5s linear forwards;
        animation-delay: 1.5s;
        float:left;
        word-wrap:break-word;
        font-weight:bold;
    }

    #Ramadan_CardModel .txtBx a {
        display: inline-block;
        margin-top: 20px;
        padding: 15px 30px;
        background: var(--clr-btn);
        color: var(--clr-btn-bg);
        font-style: 1.2rem;
        border-radius: 40px;
        font-weight: 700;
        letter-spacing: 1px;
        text-decoration: none;
        transition: .5s;
        /* animation  */
        opacity: 0;
        animation: slide_top .5s linear forwards;
        animation-delay: 2s;
    }

        #Ramadan_CardModel .txtBx a:hover {
            color: var(--clr-btn-bg);
            background: var(--clr-gold);
        }

#Ramadan_CardModel .sci {
    position: absolute;
    bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #Ramadan_CardModel .sci li {
        list-style: none;
    }

        #Ramadan_CardModel .sci li a {
            position: relative;
            display: inline-block;
            margin-left: 15px;
            width: 50px;
            height: 50px;
            background: var(--clr-btn);
            border-radius: 50%;
            display: grid;
            place-items: center;
            transition: .5s ease-in-out;
            /* animation  */
            opacity: 0;
            animation: slide_right .5s linear forwards;
            animation-delay: calc(.2s * var(--i));
        }

            #Ramadan_CardModel .sci li a:hover {
                background: var(--clr-gold);
                transform: translateY(-10px) !important;
            }

            #Ramadan_CardModel .sci li a ion-icon {
                color: var(--clr-btn-bg);
                font-size: 1.5rem;
            }

#Ramadan_CardModel .main-img {
    position: absolute;
    right: 0;
    height: 80%;
    width: auto;
    /* animation  */
    opacity: 0;
    animation: fade_in .5s linear forwards;
    animation-delay: 1s;
}
#Ramadan_CardModel #ramadan-form {
    opacity: 0;
    animation: fade_in .5s linear forwards;
    animation-delay: 2s;
}
/* Ok Let's Animate This  */
/* ============== Animation ============== */
@keyframes slide_left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

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

@keyframes slide_right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

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

@keyframes slide_top {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

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

@keyframes fade_in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@media (min-width: 320px) and (max-width: 425px) {
    #ramadanCardimg {
        margin-top: 35% !important;
    }
}