/*================================= DESIGN FRAME2 ===============================*/
.blog__FrameTwo
{
    display : flex;
    flex-direction : row;
    align-items : flex-start;
    justify-content : center;
    margin : 5rem 0;
    padding : 5rem 1rem;
    overflow: hidden;
}

.blog__FrameTwoTxtContainer
{
    width : 50%;
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : flex-start;
    gap : 1rem;
}

.blog__FrameTwoImgContainer
{
    width : 50%;
    display : flex;
    flex-direction : row;
    align-items: flex-start;
    justify-content : center;
    position : relative;
}

.blog__FrameSmTagTxt
{
    margin-bottom : 0.3rem;
}

.blog__FrameSmTagTxt p 
{
    width : fit-content;
    background: hsla(0, 0%, 100%, .1);
    padding : 0.5rem 1rem;
    border-radius : 0.3rem;
    font-size : 0.9rem;
    font-weight : 500;
}

.blog__FrameTwoTxtContainer h3 
{
    font-size : 3.2rem;
    font-weight : bold;
}

.blog__FrameSmallTxt
{
    font-size : 1rem;
    font-weight: 500;
    max-width : 90%;   
    margin-bottom : 1rem;
}

.blog__FrameBtn
{
    background : #ffc107;
    color : #4c5671;
    padding : 0.9rem 1.5rem;
    border-radius : 0.5rem;
    font-size: 1rem;
    font-weight : bolder;
    cursor : pointer;
}

.about__BlogFirstImg
{
    position : relative;
    vertical-align : middel;
}

.about__BlogSecImg
{
    position : absolute;
    bottom : 90px;
    right : 90px;
}

.about__LeftToRight
{
    position : absolute;
    top : -80px;
    right : 10px;
    animation: moveLeftToRight 15s linear infinite;
}

@keyframes moveLeftToRight {
    0% {
        transform: translateX(-50px);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(-50px);
    }
}


/* ================================== Design Frame Three ================================*/
.Blog__FrameThree
{
    margin : 5rem 1rem;
    padding : 5rem 1rem;
}

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

.blog__CardOne
{
    display : flex;
    flex-direction : row;
    align-items : flex-start;
    justify-content : space-between;
    margin-bottom : 6rem;
    gap : 2rem;
}

.blog__CardImgContainer
{
    width : 40%;
    height : 272px;
}

.blog__CardImgContainer img 
{
    width : 100%;
    height : 100%;
}

.blog__CardTxtContainer
{
    width : 70%;
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : center;
    gap : 1rem;
}

.blog__CardSmTxtTag
{
    padding : 0.3rem 0.7rem;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : flex-start;
    gap : 0.5rem;
    background: #fff;
    box-shadow: 0 4px 10px 3px rgba(0, 0, 0, .06);
}

.blog__CardSmTxtTag h4 
{
    font-weight: bolder;
    color : #4c5671;
}

.blog__CardTxt__Round 
{
    width: 6px;
    height: 6px;
    line-height: 6px;
    border-radius: 50%;
    background: #d9d9d9;
}

.blog__CardTxt__date
{
    color : #4c5671;
}

.blog__CardSmTxth4 h4 
{
    font-size : 1.3rem;
    font-weight : bolder;
    color : #2d3c58;
    transition : all 0.3s ease;
}

.blog__CardSmTxth4:hover h4 
{
    text-decoration: underline;
}

.blog__CardSmTxtp p 
{
    width : 90%;
    font-size : 1rem;
    font-weight : 500;
    color : #2d3c58;
}

.blog__CardSmTxtBtn button 
{
    font-size: 1.1rem;
    font-weight : 600;
    color : #4c5671;
}

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

.Blog__CardNavigationOne
{
    font-size : 1.2rem;
    width : 30px;
    height : 30px;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    transition : all 0.3s ease; 
}

.Blog__CardNavigationOne:hover 
{
    color : #fff;
    background: #007BFF;
    border-radius : 50%;
}

.Blog__NavigationActive
{
    color : #fff;
    background: #007BFF;
    border-radius : 50%;
}










/*============================== MEDIA QUERY FOR MEDIUM SIZE DEVICES ====================*/
@media screen and (max-width : 768px)
{
    .blog__FrameTwo 
    {
        margin : 5rem auto;
        flex-direction: column;
        gap : 3rem;
    }

    .blog__FrameTwoTxtContainer, 
    .blog__FrameTwoImgContainer
    {
        width : 100%;
    }

    .about__LeftToRight 
    {
        right: 3%;
    }

    .about__BlogSecImg 
    {
        right: 20%;
    }

    .Blog__CardBigContainer 
    {
        flex-direction: column;
    }
}



/*======================== MEDIA QUERY FOR SMALLER DEVICES ======================*/
@media screen and (max-width : 525px)
{
    .blog__FrameTwo 
    {
        margin: 1rem auto;
        padding : 1rem;
    }

    .blog__FrameTwoTxtContainer h3 
    {
        font-size: 2rem;
        line-height : 2.2rem;
    }

    .blog__FrameSmallTxt 
    {
        font-size: 0.9rem;
    }

    .blog__FrameBtn
    {
        padding : 0.5rem 1rem;
        font-size: 0.7rem;
        line-height : 1.1rem;
    }

    .blog__FrameTwoImgContainer
    {
        width : 80%;
        margin : 1rem auto;
    }

    .about__LeftToRight 
    {
        width: 50%;
        right: -3%;
    }

    .about__BlogSecImg 
    {
        bottom: 7%;
        right: 0%;
    }

    .Blog__FrameThree 
    {
        margin: 1rem auto;
        padding: 1rem 1rem;
    }

    .blog__CardOne 
    {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .blog__CardSmTxth4 h4 {
        font-size: 1.1rem;
    }

    .blog__CardSmTxtp p 
    {
        width: 100%;
        font-size: 0.9rem;
    }

    .blog__CardSmTxtBtn button 
    {
        font-size: 0.9rem;
    }

    .blog__CardOne 
    {
        margin-bottom: 3rem;
        gap: 2rem;
    }

    .blog__CardImgContainer 
    {
        width: 60%;
    }

    .Blog__CardNavigationOne 
    {
        font-size: 1rem;
        width: 20px;
        height: 20px;
    }

    .Blog__CardNavigationOne 
    {
        font-size: 0.9rem;
    }

    .blog__CardSmTxtTag 
    {
        width: 100%;
        flex-direction : column;
        align-items : center;
    }

    .blog__CardImgContainer 
    {
        width : 50%;
    }
    
}


@media screen and (max-width : 425px)
{
    .blog__CardImgContainer 
    {
        width: 60%;
        height : 300px;
    }
}


@media screen and (max-width : 325px)
{
    .blog__CardImgContainer
    {
        height : 250px;
    }
}








/* media query for larger devices */
@media screen and (min-width : 1024px)
{

    .blog__FrameTwo
    {
        max-width : 1024px;
        margin : 4rem auto;
    }

    .Blog__FrameThree
    {
        max-width : 1200px;
        margin : 4rem auto;
        padding : 5rem 2rem;
    }
}

@media screen and (min-width : 1344px)
{

    .blog__FrameTwo
    {
        max-width : 1300px;
        margin : 4rem auto;
    }

    .Blog__FrameThree
    {
        max-width : 1300px;
    }
}


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

    .blog__FrameTwo
    {
        max-width : 1600px;
        margin : 4rem auto;
    }
}


@media screen and (min-width : 3840px)
{
    .blog__FrameTwo
    {
        max-width : 1800px;
        margin : 4rem auto 6rem;
        padding : 6rem 4rem;
    }

    .about__BlogSecImg 
    {
        right: 10rem;
    }
}