@charset "UTF-8";
/* CSS Document */


/*---van color root a style.css-ben------*/

/*-------------- V E L E M E N Y E K . C S S --------------*/


/*------SEC 1 ------*/


.rolam-section1 {
    text-align: center;
    padding: 100px 0 8px 0;
    position: relative;
    background-color: #F7F7F7;
}
.rolam-section1 h1 {
    margin-top: 0px;
    margin-bottom: 20px;
    animation-name: slide-up;
    animation-duration: 1s;
}



#rolam-section1-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 15px; 
    max-width: 1000px;
    margin: auto;
    
}
.rolam-section1-box {
    display: flex;
    justify-content: center;
    position: relative;
    text-align: center;
}
.rolam-section1-box-content {
    width: 100%;
    color: #fff;
    margin: 7.5px; 
}
.rolam-section1-box-content div {
    background: #fff;
    color: var(--kek);
    padding: 3% 0 3% 0;
    border-radius: 15px;
    transition-duration: 0.6s, 0.6s, 0s;
    transition-property: background-color, transform, color;
    animation-name: slide-up;
    animation-duration: 0.4s;
    animation-timing-function: ease-in-out;
}


.rolam-section1-box-content div:hover {
    background-color: #F7F7F7;
    transform: translateY(2%);
    background: #F7F7F7;
    color: #A5A5A5;
}


.rolam-section2 {
    text-align: center;
    position: relative;
    max-width: 900px;
    padding: 0 3vw;
    margin: 0 auto 100px;
}

.rolam-section2 h5 {
    color: var(--gray1);
    animation-name: slide-up;
    animation-duration: 0.5s
}
.rolam-section2 h2 {
    color: var(--gray1);
    margin-bottom: -28px  
}

.rolam-section2 h1 {
    animation-name: slide-up;
    animation-duration: 1s
}
.rolam-section2 a:hover {
    text-decoration: underline;
}




/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/





/* 768 SCREEN - 768 SCREEN -768 SCREEN */

/*---------- 768 PX SCREEN ----------*/

@media(max-width:768px){    


@media(max-width:500px){  
    
#rolam-section1-grid {
    padding: 7.5px;
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));   
}