.ranges .flex_element:hover .flex_element_img,
.ranges .flex_element:hover .little_title,
.support .flex_element:hover .flex_element_img,
.support .flex_element:hover .little_title {
transform: scale(1.05);
}
.ranges .flex_element:hover .little_title span::after,
.support .flex_element:hover .little_title span::after {
width: 100%;
}
.ranges .flex_element:hover .flex_element_p,
.support .flex_element:hover .flex_element_p {
font-weight: 600;
} .modal {
display: none;
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9999999999999999999999999;
}
.modal-content {
display: none;
position: relative;
background-color: #fefefe;
padding: 3rem 2rem;
border: 1px solid var(--main-grey); width: 85%;
max-width: 1600px;
max-height: 100%; top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
gap: 1rem;
}
#heyModal .modal-content {
max-width: unset;
max-height: unset;
width: 100%;
height: 100%;
}
.modal li {
list-style: disc;
list-style-position: inside;
padding-left: 1rem;
line-height: 1.5;
}
.modal ul ul li {
list-style: circle;
list-style-position: inside;
padding-left: 2rem;
}
.close {
position: absolute;
right: 20px;
top: 10px;
color: var(--main-grey);
font-size: 2rem;
font-weight: 500;
transition: color .3s ease;
}
.close:hover,
.close:focus {
color: var(--main-gold);
cursor: pointer;
}