.who-we-are{
    .description-main{
        display: flex;
        justify-content: space-between;
        gap: 20px;

        .description{
            width: 50%;
            padding: 20px;
            border-radius: 10px;
            
            h6{
                font-size: 1.8rem;
                color:rgb(209, 0, 36) !important;
                margin-bottom: 10px;
            }
            h2{
                font-size: 1.5rem;
                color: #000 !important;
                margin-bottom: 20px;
            }
            p{
                font-size: 1.2rem;
                color: #000 !important;
                line-height: 1.5;
            }
        }

        .description-image{
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 2;
            .img-box{
                position: relative;
                &::before{
                    position: absolute;
                    content: '';
                    top: -10px;
                    left: -10px;
                    height: 100px;
                    width: 100px;
                    background-color: rgb(209, 0, 36);
                    z-index: -1;
                    transition: width 0.3s linear, height 0.3s linear;
                }
                &::after{
                    position: absolute;
                    content: '';
                    bottom: -10px;
                    right: -10px;
                    height: 100px;
                    width: 100px;
                    background-color: rgb(209, 0, 36);
                    transition: width 0.3s linear, height 0.3s linear;
                    z-index: -1;
                }
                 &:hover{
                    &::before,&::after{
                        width: calc(100% + 20px);
                        height: 100%;
                    }
                }

            }

            img{
                width: 100%;
                height: auto;
                border: 5px solid #fff;
            }
        }
    }
}

.our-mission{
    .mission-main{
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center;

        .mission-image{
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;

            .img-box{
                display: flex;
                align-items: center;
                gap: 20px;
                position: relative;

                &::before{
                    position: absolute;
                    content: '';
                    top: -10px;
                    left: -10px;
                    height: 100px;
                    width: 100px;
                    background-color: rgb(209, 0, 36);
                    z-index: 1;
                    transition: width 0.3s linear, height 0.3s linear;
                
                }
                &::after{
                    position: absolute;
                    content: '';
                    bottom: -10px;
                    right: -10px;
                    height: 100px;
                    width: 100px;
                    background-color: rgb(209, 0, 36);
                    z-index: 1;
                    transition: width 0.3s linear, height 0.3s linear;
                    
                }

                img{
                    z-index: 2;
                    width: 100%;
                    border: 5px solid #fff;
                }

                &:hover{
                    &::before,&::after{
                        width: calc(100% + 20px);
                        height: 100%;
                    }
                }
            }
            
        }

        .mission{
            width: 50%;
            padding: 20px;
            border-radius: 10px;

            h6{
                font-size: 1.8rem;
                color:rgb(209, 0, 36) !important;
                margin-bottom: 10px;
            }
            h2{
                font-size: 1.5rem;
                color: #000 !important;
                margin-bottom: 20px;
            }
            p{
                font-size: 1.2rem;
                color: #000 !important;
                line-height: 1.5;
            }
        }
    }
}


.our-vision{
    .vision-main{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        gap: 20px;

        .vision{
            padding: 20px;
            border-radius: 10px;

            h6{
                font-size: 1.8rem;
                color:rgb(209, 0, 36) !important;
                margin-bottom: 10px;
                text-align: center;
            }
            h2{
                font-size: 1.5rem;
                color: #000 !important;
                margin-bottom: 20px;
                text-align: center;
            }
            p{
                font-size: 1.2rem;
                color: #000 !important;
                line-height: 1.5;
                text-align: center;
            }
        }

        .vision-image{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            &::before{
                position: absolute;
                content: '';
                top: -10px;
                left: -10px;
                height: 100px;
                width: 100px;
                background-color: rgb(209, 0, 36);
                transition: width 0.3s linear, height 0.3s linear;

                
            }
            &::after{
                position: absolute;
                content: '';
                bottom: -10px;
                right: -10px;
                height: 100px;
                width: 100px;
                background-color: rgb(209, 0, 36);
                transition: width 0.3s linear, height 0.3s linear;

                
            }
            img{
                z-index: 2;
                position: relative;
                width: 100%;
                height: auto;
                border: 5px solid #fff;
            }
             &:hover{
                 &::before,&::after{
                    width: calc(100% + 20px);
                    height: 100%;
                }
             }
        }
    }
}


  .who-we-are, .our-mission, .our-vision {
            padding: 3rem 0;
        }

        .description-main, .mission-main, .vision-main {
            display: flex;
            align-items: center;
            gap: 3rem;
            background: #fff;
            padding: 3rem;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;

            @media(max-width:600px){
                padding: 0px !important;
            }
        }

        .description-main:hover, .mission-main:hover, .vision-main:hover {
            transform: translateY(-5px);
        }

        .description, .mission, .vision {
            flex: 1;
        }

        .description-image, .mission-image, .vision-image {
            flex: 1;
        }

@media(max-width:991px){
    .description-main{
        flex-direction: column;
        gap: 20px;

        .description{
            width: 100% !important;
        }

        .description-image{
            width: 100% !important;
        }
    }

    .mission-main{
        flex-direction: column-reverse;
        gap: 20px;

        .mission-image{
            width: 100% !important;
        }

        .mission{
            width: 100% !important;
        }
    }
    
}

@media(max-width:600px){
    .mission-main{

        .mission-image{
            .img-box{
                flex-direction: column;
                gap: 10px;
            }
        }

    }

   .sub-title{
    font-size: 24px !important;
   }
}