.features {
    display: flex;
    width: 100%;
    height: 735px;
    flex-direction: column;
    background-image: url(../images/main/features/background.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 5%;
    padding-right: 3%;
    margin-top: -4%;
}

.features_title {
    display: flex;
    justify-content: center;
    color: #FFFFFF;
}

h2.features_title {
    font-size: 28px;
    font-weight: 700;
    line-height: 37px;
    color: #FFFFFF;
    margin-top: 76px;
    margin-bottom: 54px;
}

.wrapper {
    position: relative;
    display: grid;
    width: 100%;
    gap: 1px;
    grid-template-columns: 25% 25%  25%;
    grid-template-rows: 40% 40% 40%;
    grid-column-gap: 10%;
    
}

.wrapper p {
    position: relative;
    color: #FFFFFF;
}

.wrapper img {
    margin-bottom: 10px;
}

.features_info {
    display: flex;
    flex-direction: column;
    text-decoration: #FFFFFF;
}

.wrapper_mob {
    display: none;
}

/****** features media ******/

@media (max-width: 1020px) { 
.features {
    display: flex;
    width: 100%;
    height: 800px;
    flex-direction: column;
    align-items: center;
    padding: 0;
    
}

.wrapper {
    justify-content: center;
    grid-template-rows: 40% 45% 40%;
    grid-column-gap: 10%;
}
}

@media (max-width: 940px) { 
.features {
    height: 850px; 
}

.wrapper {
    grid-template-rows: 40% 45%;
}
}

@media (max-width: 804px) { 
.features {
    height: 780px; 
}

.wrapper {
    grid-template-rows: 40% 45%;
}
}

/****** features media 720/mobile ******/

@media (max-width: 720px) { 
.features {
     display: flex;
    width: 100%;
    height: 1450px;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background-image: none;
}

.features_title {
    display: flex;
    justify-content: center;
    color: #4F4F4F;
}

h2.features_title {
    display: flex;
    color: #333333;
    margin-top: 74px;
    margin-bottom: 52px;
    width: 80%;
    text-align: center;
}

.wrapper {
display: none;}

.wrapper_mob {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wrapper_mob p {
    margin-top: 10px;
    margin-bottom: 40px;
}

.features_mob_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 80%;
}
}

@media (max-width: 540px) { 
.features {
    height: 1500px;
    
}
}

@media (max-width: 460px) { 
.features {
    height: 1600px;
    
}
}

@media (max-width: 420px) { 
.features {
    height: 1700px;
    
}
}

@media (max-width: 360px) { 
.features {
    height: 1775px;
    
}
}