div.content {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.area {
    display: flex;
    flex-direction: row; 
    height: 500px;
}

.img {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

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

.text {
    width: 50%;
    display: flex;
    align-items: center; 
    justify-content: center;
    padding: 20px;
}
.color1{
    background: rgb(0,42,166);
    background: linear-gradient(112deg, rgba(0,42,166,1) 0%, rgba(33,154,155,1) 67%, rgba(38,123,171,1) 88%, rgba(10,90,129,1) 100%);
}
.color2{
    background: rgb(235,209,4);
    background: linear-gradient(112deg, rgba(235,209,4,1) 18%, rgba(213,14,14,1) 61%, rgba(19,32,31,1) 100%);
}
.color3{
    background: rgb(192,5,5);
    background: linear-gradient(90deg, rgba(192,5,5,1) 0%, rgba(44,0,0,1) 96%);
}
.color4{
    background: rgb(233,192,25);
    background: linear-gradient(112deg, rgba(233,192,25,1) 0%, rgba(247,91,0,1) 39%, rgba(255,171,0,1) 64%, rgb(255, 136, 0) 100%);
}
.color5{
    background: #4568DC;  
    background: -webkit-linear-gradient(to right, #B06AB3, #4568DC);  
    background: linear-gradient(to right, #B06AB3, #4568DC); 

}
.text div.main{
    height: 85%;
    width: 85%;
    background: rgba(0, 0, 0, 0.6);  
    color: white;  
    padding: 15px;
    border-radius: 10px;
    backdrop-filter: blur(10px); 
    margin: 20px auto;
}
.text h3{
    text-align: center;
}
.text ul{
    margin-left: 10px;
}
.text ul li, h3{
    line-height: 1.8;
}

@media (max-width: 1720px) {
  

    .area {
        display: flex; 
        flex-direction: column; 
        width: 100%;
        height: auto; 
    }

    
    .img {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

    .img img {
        max-width: 80%; 
        max-height: 500px; 
        object-fit: contain;
        display: block;
    }

    
    .text {
        width: 100%;
        height: auto;
        padding: 20px;
        text-align: left;
    }
    .second{
        flex-flow: column-reverse nowrap;
    }
    .text div.main{
        width: 100% !important;
    }
}
@media (max-width: 768px) {
    .content{
        margin-top: 130px;
    }

}