.about{
    width: 100%;
    @include Flex; flex-direction: column;
    padding-block: 60px ;
    .about_container{
        width: 80%;
        display: flex;

        .left{
            width:48%;
            h4{
                font-size: 1.3vw;
                color: var(--primary);
                font-weight: bold;
                letter-spacing: 3.5px;
            }
            h1{
                font-size: 2.5vw;
                font-weight: bold;
            }
            p{
                color: var(--darkGray);
                font-size:1.4vw;
            }
        }
        .right{
            width: 50%;
            .about_image{
                width: 100%;
                .about_image_scale{
                    transition: ease-in-out .2s;
                    &:hover{
                        transform: scale(1.04);
                    }
                  }
            }
            
        }
    }
}

@media screen and (max-width:800px) {
    .about{
        padding-block: 10px !important   ;
        .about_container{
            width: 90%;
            flex-direction: column;
            .left,
            .right{
                width:90%;
                @include Flex; flex-direction: column;
                margin-inline: auto;
                h4{
                    text-align: center;
                    font-size: 14px;
                }
                >h1{
                    text-align: center;
                    font-size: 27px;
                }
                >p{
                    text-align: center;
                    font-size: 21px;
                }
                .about_card{
                    width: 100%;
                    svg{
                        font-size: 40px;
                    }
                    div{
                        h1{
                            font-size: 20px !important;
                        }
                        p{
                            font-size: 16px !important;    
                        }
                    }
                }
            }
        }
    }   
}




@media screen and (max-width:500px) {
    .about{
        padding-block: 60px ;
        .about_container{
            .left,
            .right{
                h4{
                    font-size: 10px;
                }
                >h1{
                    font-size: 22px;
                }
                >p{
                    font-size: 16px;
                }
                .about_card{
                    svg{
                        font-size: 30px;
                    }
                    div{
                        h1{
                            font-size: 12px !important;
                        }
                        p{
                            font-size: 12px !important;    
                        }
                    }
                }
            }
        }
    }   
}
