/*-- Services ------------------------------*/

#services{
    position: relative;
    padding: 100px clamp(20px, 10%, 10%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap: 100px;
}

#services .section-title{
    margin-bottom: -80px;
}

#services > h2{
    font-size: 40px;
    text-align: center;
    max-width: 1000px;
    margin: auto;
}

#services-list{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 40px;
}

.services-item{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: column;
    gap: 20px;
}

.services-item img{
    max-width: 120px;
    transform: translateX(-17px);
}

.services-item h3{
    font-size: 28px;
    font-weight: 600;
}

.services-item p{
    color: #ffffff80;
}

.services-item a{
    position: relative;
    display: inline-flex;
    justify-content: flex-start;
    align-items: baseline;
    text-decoration: none;
    gap: 10px;
}

.services-item a i{
    rotate: 45deg;
    transition: 0.3s ease;
}

.services-item a:hover i{
    transform: translateY(-3px);
}







/*-- Responsive Design -----------------------*/

@media screen and (max-width: 1280px) {
    
}
@media screen and (max-width: 1160px) {
    
}
@media screen and (max-width: 1000px) {
    
}
@media screen and (max-width: 900px) {
    
}
@media screen and (max-width: 800px) {
    #services-list{
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 700px){
    #services h2{
        font-size: 30px;
    }
}
@media screen and (max-width: 500px) {
    
}







/*-- Scroll Animations -------------------------*/

#services .section-title.animate{
    transform: translateY(-50px);
    opacity: 0;
}
#services h2.animate{
    transform: translateY(-50px);
    opacity: 0;
}
.services-item:nth-child(1){ transition-delay: 0.1s; }
.services-item:nth-child(2){ transition-delay: 0.2s; }
.services-item:nth-child(3){ transition-delay: 0.3s; }
.services-item:nth-child(4){ transition-delay: 0.4s; }
.services-item:nth-child(5){ transition-delay: 0.5s; }
.services-item.animate{
    transform: translateX(-50px);
    opacity: 0;
}
#services > a.animate{
    transform: translateY(50px);
    opacity: 0;
}