
/* --- SERVICE SECTION --- */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.container-content {
    width: 100%;
    margin-top: 0; /* Changed from -650px to 0 */
}

.service-card {
    background-color: #040914;
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(244, 20, 20, 0.3);
}

.service-title {
    font-family: var(--font-sub);
    font-size: 22px;
    color: #FFFFFF;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

/* Red underline for service titles */
.service-title::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
    margin-top: 5px;
}

.service-desc {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-grey);
    line-height: 1.6;
    text-align: justify;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .skills-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .services-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }

    .tools-card {
        justify-content: flex-start; /* Align start to scroll */
        gap: 20px;
    }
}

/* From Uiverse.io by ArturCodeCraft */ 
/* <reset-style> ============================ */
a {
  text-decoration: none;
  margin-left: 20px;
  margin-bottom: 20px;
}
/* <main-style> ============================ */
.menu__link {
  color: #0e85f5;
  line-height: 2;
  position: relative;
  padding-right: 4px;
}

.menu__link:hover {
  text-decoration: underline;
}

.menu__link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-top: solid 2px #0099ff;
  border-right: solid 2px #fff;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .4s;
}

.menu__link:hover::before {
  transform: translateX(4px) translateY(-50%) rotate(45deg);
}
