.contactus__FrameSmallTxt
{
    width : 75%;
}

.blog__FrameTwoImgContainer
{
    position : relative;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : flex-end;
    z-index : 1;
}

.blog__FrameTwoImgContainer img 
{
    display : flex;
    flex-direction : row;
    align-items : flex-end;
    justify-content : flex-end;
    border : 0;
    vertical-align: middle;
    max-width : 100%;
    height : auto;
}

.contact__BannerImg2, .contact__BannerImg3, .contact__BannerImg4
{
    position : absolute;
}

.contact__BannerImg1
{
    top : 15%;
    left : 45%;
}

.contact__BannerImg2
{
    top : -30%;
    left : 50%;
    z-index: -1;
    animation : moveTopToBottom2 8s linear infinite;
}

@keyframes moveTopToBottom2 
{
    0% 
    {
        transform : translateY(-2%);
    }   

    50% 
    {
        transform : translateY(2%);
    }

    100% 
    {
        transform : translateY(-2%);
    }
}

.contact__BannerImg3
{
    top : -28%;
    left : 34%;
    animation : shakeBR 8s linear infinite;
}

@keyframes shakeBR 
{
    0%, 100% 
    {
        trasnform : rotate(0deg);
        transform-origin : 100% 100%;
    }    

    10% 
    {
        transform : rotate(10deg);
    }

    20%, 40%, 60% 
    {
        transform : rotate(-4deg);
    }

    30%, 50%, 70% 
    {
        transform : rotate(4deg);
    }

    80% 
    {
        transform : rotate(-2deg);
    }

    90% 
    {
        transform : rotate(2deg);
    }
}

.contact__BannerImg4
{
    top : -30%;
    right : 2%; 
    animation : moveLeftToRight2 15s linear infinite;
}

@keyframes moveLeftToRight2 
{
    0% 
    {
        transform : translateX(-20px);
    }

    50% 
    {
        transform : translateX(20px);
    }

    100% 
    {
        transform : translateX(-20px);
    }
}

.contact__Banner5
{
    position : absolute;
    top : -13%;
    left : 35%;
    z-index : -1;
}


/*==================================== Design Second Frame =============================*/
.small__ContactDetailContainer
{
    margin : 2rem 0rem;
    padding : 3rem 1rem;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
}

.contactDetailCards
{
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content :  center;
    gap : 1rem;
}

.contact__Card
{
    width : 100%;
    padding : 2rem;
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : flex-start;
    background : #f4f9ff;
    border-radius : 0.9rem;
    cursor : pointer;
    transition : all 0.3s ease;
}

.contact__Card:hover 
{
    background : #0774ff;
}

.contactCard__Icon
{
    width : 50px;
    height : 50px;
    display : flex;
    flex-direction : row;
    align-items : flex-start;
    justify-content : flex-start;
}

.contact__Card:hover i 
{
    color : #fff;
}

.contactCard__Icon i 
{
    font-size : 2rem;
    color : #2d3c58;
}


.contact__Card h4 
{
    font-size : 1.1rem;
    font-weight : 400;
    color : #2d3c58;
}

.contact__Card:hover h4 
{
    color : #fff;
}

/*========================= Desing Map Frame =========================*/
.Little__SiteMap
{
    width : 100%;
    margin : 2rem 0rem;
    padding : 3rem 1rem;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
}

.Little__SiteMap iframe 
{
    width : 100%;
}

/*======================= MEDIA QUERY FOR SMALLER DEVICES =======================*/
@media screen and (max-width : 525px)
{

    .blog__FrameBtn 
    {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    .blog__FrameTwoImgContainer {
        padding: 5rem 0rem;
        justify-content : center;
    }

    .contact__Banner5 
    {
        top: 11%;
        left: 26%;
    }

    .contact__BannerImg2 {
        top: 5%;
    }

    .contact__BannerImg3 
    {
        top: -1%;
        left: 25%;
    }

    .contact__BannerImg4 {
        top: -3%;
        right: 1%;
    }

    .contactDetailCards 
    {
        width : 90%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .contact__Card 
    {
        width : 200px;
        height : 200px;
        padding : 2rem 1rem;
    }

    .contactCard__Icon 
    {
        width: 30px;
        height: 30px;
    }

    .contactCard__Icon i 
    {
        font-size: 1.5rem;
    }

    .contact__Card h4 
    {
        font-size : 1rem;
    }
}


@media screen and (max-width : 425px)
{
    .blog__FrameTwo 
    {
        padding: 5rem 1rem;
    }

    .contactDetailCards 
    {
        grid-template-columns: repeat(1, 1fr);
    }

    .contact__Card 
    {
        width: 100%;
        height: 150px;
    }

    .blog__FrameTwoImgContainer 
    {
        display : none;
    }
}

@media screen and (max-width : 325px)
{
    .blog__FrameTwoTxtContainer h3 
    {
        width: 100%;
        text-align: left;
    }

    .contactus__FrameSmallTxt 
    {
        text-align: left;
        width: 100%;
        font-size: 0.7rem;
    }

    .support__MsgTxt h1 
    {
        font-size: 1.6rem;
        line-height: 1.8rem;
    }

    .support__MsgTxt img 
    {
        width: 29%;
        top: 9%;
        right: 40%;
    }
}




/*========================= MEDIA QUERY FOR MEDIUM SCREEN SIZE ========================*/
@media screen and (min-width : 768px)
{
    .blog__FrameTwoImgContainer 
    {
        margin-top: 5rem;
        justify-content: center;
    }

    .blog__FrameTwo 
    {
        margin : 3rem auto;
        padding : 1rem;
    }

    .contact__BannerImg2 {
        top: -16%;
    }

    .contact__BannerImg4 
    {
        top: -23%;
        right: 12%;
    }

    .small__ContactDetailContainer 
    {
        margin: 2rem auto;
    }

    .contactDetailCards 
    {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .contact__Card
    {
        height : 200px;
    }
}





/* media query for larger devices */
@media screen and (min-width : 1440px)
{
    .Little__SiteMap 
    {
        max-width: 1400px;
        padding : 4rem 2rem;
        margin : 3rem auto;
    }
}

@media screen and (min-width : 1920px)
{
    .Little__SiteMap 
    {
        max-width: 1600px;
        padding : 4rem 2rem;
        margin : 3rem auto;
    }
}