.values {
    background-image: url(../img/values-wrapper.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 70px;
}
.values__container {
    padding: 60px 32px 100px;
}

.values__header {
    font-size: 50px;
    color:var(--main-color);
    text-align: center;
    margin-bottom: 60px;
}

.values__content {
    display: flex;    
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}

.value__item-container {
    display: flex;
    flex-direction: column;
    background-color: var(--main-color); 
    width: 30%;
    padding: 25px 20px;
}
.value__item {    
    display: flex;
    min-height: 95px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;    
    text-align: justify;
    gap: 30px;   
    hyphens: manual;
}
.value__icon-container {
    align-self: center; 
}
.value__icon {     
    width: 64px;
    height: 64px;
}
.value__item-container h4 {
    margin-bottom: 15px;
    text-align: center;
    letter-spacing:1px;
}
.value__text p{
    letter-spacing:1px;
    
}

@media(max-width:1440px) {
    .value__text p{
        font-size: 17px;        
    } 
    .value__item {  
        min-height: 90px;
    }   
}

@media(max-width:1200px) {
    .value__item-container {
        padding: 20px 15px;
    }
    .values__container {
        padding: 40px 32px 70px;
    }
    .values__header {
        font-size: 40px;
        margin-bottom: 45px;
    }
    .value__icon {     
        width: 50px;
        height: 50px;
    }
    .value__text p{
        font-size: 15px;
    }
    .value__item-container h4 {
        font-size: 18px;
        margin-bottom: 10px;
    }   
    .value__item {          
        gap:20px; 
    }
}
@media(max-width:1000px) {
    .values__header {
        font-size: 33px;
        margin-bottom: 45px;
    }
    .value__icon {     
        display: none;
    }
    .value__item {          
        gap:0px; 
    }
}
@media(max-width:760px) {
    .values__container {
        padding: 40px 32px 50px;
    }
    .value__icon {     
        display: block;
    }  
    .value__text {
        display: none;
    }   
    .value__item {          
        order:-1;         
    }
    .value__item {
        justify-content: center;
    }
    .value__item-container h4 {       
        margin-bottom: 0px;
    } 
    
    .value__icon-container {       
        margin-bottom: 15px;
    }
    .value__item-container {       
        padding: 16px 0px;
    }
}

@media (max-width:580px) {
    .value__icon-container {     
        display: none;
    }
    .value__item-container { 
        width: 95%;         
        padding: 12px 8px;
        margin-bottom: 10px;
    }
    .value__item {  
        min-height:0px;      
    }    
    .values__header {
        font-size: 30px;     
    } 
    .values__content {
        flex-direction: column;
        align-items: center;
    }    
    
}