.tech__FrameOneImgContainer
{
    position : relative;
    z-index : 1;
}

.tech__Earth
{
    position : absolute;
    top : 0;
    left : 9rem;
    z-index : -1;
    animation : moveTopToBottom2 8s linear infinite;
}

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

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

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

.frame1__TechH3
{
    line-height : 3.7rem;
}

.Tech__Frame2
{
    margin : 3rem 0rem;
    padding : 3rem;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    gap : 1rem;
}

.Tech__Frame2 h3 
{
    margin-bottom : 2rem;
    font-size : 2rem;
    font-weight : 700;
    color : #2d3c58;
    text-transform : capitalize;
}

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

.tech__Frame2CardOne
{
    width : 100%;
    height : 100%;
    padding : 2rem;
    background: #f4f9ff;
    border-radius : 1rem;
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : flex-start;
    gap : 1rem;
}

.tech__Frame2CardOne h4 
{
    font-size : 1.2rem;
    font-weight : 700;
    color : #2d3c58;
    text-transform : capitalize;
}

.tech__Frame2CardOne p 
{
    font-size : 1rem;
    font-weight : 400;
    color : #2d3c58;
}

/*================================= Design Third Section =============================*/
.tech__Frame3MainContainer
{
    background-color : #2d3c58;
}

.Tech__Frame3
{
    margin : 3rem 0rem;
    padding : 5rem 3rem;
    display : flex;
    flex-direction : row;
    align-items : flex-start;
    justify-content : space-between;
    gap : 1rem;
}

.tech__Frame3ImgContainer
{
    width : 40%;
    display : flex;
    flex-direction : row;
    align-items : flex-start;
    justify-content : flex-start;
}

.tech__Frame3ImgContainer img 
{
    width : 100%;
    height : 100%;
    border-radius : 1rem;
}

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

.tech__Frame3TxtContainer h3 
{
    color : #fff;
    font-size : 2.3rem;
    font-weight : 700;
    text-transform : capitalize;
}

.tech__Frame3TxtContainer p 
{
    color : #fff;
    font-size : 1rem;
    font-weight : 400;
}

/*======================= Design Frame 4 =========================*/
.tech__Frame4
{
    margin : 3rem 0rem;
    padding : 3rem;
    display : flex;
    flex-direction : row;
    align-items : flex-start;
    justify-content: flex-start;
}

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

.tech__Frame4TxtContainer h3 
{
    text-transform : capitalize;
    font-size : 2.5rem;
    line-height : 3rem;
    font-weight : 700;
    color : #2d3c58;
}

.tech__Frame4TxtContainer p 
{
    font-size : 1rem;
    font-weight : 400;
    color : #2d3c58;
    margin : 1rem 0rem;
    width : 80%;
}

.tech__Frame4ImgContainer
{
    width : 60%;
}

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

.tech__Frame4ImgContainer img 
{
    border-radius : 1.1rem;
}

.banner2ImgSm1
{
    margin-top : 11rem;
}







/*============================ MEDIA QUERY FOR MEDIUM SIZE DEVICES =======================*/
@media screen and (max-width : 768px)
{
    
    .Tech__Frame2 h3 
    {
        font-size : 2rem;
        text-align : center;
    }

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

    .tech__Frame2CardOne h4 
    {
        font-size: 1.4rem;
    }

    /*========================== media query for frame 3 ================================*/
    .Tech__Frame3 
    {
        flex-direction: column;
    }

    .tech__Frame3ImgContainer, 
    .tech__Frame3TxtContainer
    {
        width : 100%;
    }

    .tech__Frame2CardOne p 
    {
        max-width: 80%;
        font-size: 1.1rem;
    }


    /*========================== media query for frame 4 ================================*/
    .tech__Frame4 
    {
        margin : 3rem auto;
        flex-direction: column;
    }

    .tech__Frame4TxtContainer, 
    .tech__Frame4ImgContainer
    {
        width : 100%;
    }
}


/*=============== MEDIA QUERY FOR SMALLER DEVICES ===================*/
@media screen and (max-width : 525px)
{
    .tech__Frame3MainContainer {
        width: 100%;
    }

    .tech__Frame4ImgContainer 
    {
        flex-direction : column;
    }

    .Tech__Frame3 {
        margin: 1rem 0rem;
        padding: 5rem 2rem;
    }

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

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

    .tech__Frame4TxtContainer p {
        width : 100%;
    }

    .tech__Frame4TxtContainer, 
    .tech__Frame4ImgContainer 
    {
        padding: 2rem 0rem;
    }

    .tech__Frame4ImgContainer img 
    {
        width : 100%;
        height : 300px;
        object-fit : cover;
    }

    .banner2ImgSm1 
    {
        width : 100%;
        height : 300px;
        margin-top: 2rem;
    }
}


@media screen and (max-width : 425px)
{
    .tech__Frame4TxtContainer h3,
    .tech__Frame3TxtContainer h3,
    .Tech__Frame2 h3,
    .blog__FrameTwoTxtContainer h3  
     {
        font-size: 1.6rem;
        line-height: 2rem;
    }

    .blog__FrameSmallTxt {
        font-size: 0.8rem;
    }

    .tech__Earth 
    {
        bottom: 2rem;
        left: 1rem;
    }

    .tech__Frame2CardOne 
    {
        padding: 1rem;
    }

    .tech__Frame2CardOne img 
    {
        width : 50px;
        height : 50px;
    }

    .tech__Frame2CardOne h4 {
        font-size: 1.1rem;
        line-height : 1.4rem;
    }

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

    .tech__Frame3TxtContainer p 
    {
        line-height : 1.1rem;
        font-size: 0.9rem;
    }

    .tech__Frame4 
    {
        padding: 1rem 2rem;
    }


}












/*========================================== MEDIA QUERY FOR LARGER SCREEN SIZES ===========================================*/
@media screen and (min-width : 1024px)
{
    .Tech__Frame2
    {
        max-width : 1200px;
        margin : 5rem auto;
    }

    .Tech__Frame3
    {
        max-width : 1200px;
        margin : 4rem auto;
    }

    .tech__Frame4
    {
        max-width : 1200px;
        margin : 4rem auto;
    }
}