/* --- Global Service Page Layout --- */
.services {
    padding: 20vh 2rem 5vh 2rem;
    text-align: center;
    background-color: #fde2cf;
}

.services h1 {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    color: #8f2121;
    margin-bottom: 1rem;
}

/* --- Detail Services Grid - FIXED OVERLAP --- */
.detailServices {
    padding: 5vh 8vw;
    background-color: #fde2cf;
}

.services-header {
    text-align: center;
    margin-bottom: 3rem;
}

.services-header h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #1e1a16;
}

.services-dashboard-grid {
    display: grid;
    /* This ensures cards wrap correctly instead of pushing into each other */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
    gap: 2.5rem;
    max-width: 1300px;
    margin: 0 auto;
}

.service-main-card {
    background: #f8a720;
    border: 3px solid #642714;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 8px 8px 0px #8f2121;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.service-main-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0px #ed6325;
}

.service-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px dashed #642714;
}

.service-card-header h2 {
    font-size: 1.4rem;
    color: #8f2121;
    line-height: 1.2;
}

.service-sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.service-sub-list h3 {
    font-size: 1.15rem;
    color: #642714;
    margin-bottom: 0.2rem;
}

.service-sub-list p {
    font-size: 0.95rem;
    color: #642714;
    line-height: 1.4;
    font-weight: 500;
}

/* --- Tech Stack - SIZED TO CONTENT --- */
.tech {
    padding: 8vh 2rem;
    background-color: #fde2cf;
    text-align: center;
}

.tech-dashboard {
    display: flex;
    width: 100%;
    max-width: 900px; /* Reduced width to prevent "too big" look */
    margin: 0 auto;
    background: #f8a720;
    border-radius: 24px;
    border: 3px solid #642714;
    box-shadow: 10px 10px 0px #8f2121;
    overflow: hidden;
}

.tech-nav {
    width: 30%;
    background: #642714;
    display: flex;
    flex-direction: column;
}

.tech-nav-item {
    padding: 1.2rem 1.5rem;
    color: #fde2cf;
    font-family: "VVDS", sans-serif;
    font-size: 1.2rem;
    cursor: pointer;
    border-left: 5px solid transparent;
    transition: 0.3s;
    text-align: left;
}

.tech-nav-item.active {
    background: #ed6325;
    border-left: 5px solid #fde2cf;
}

.tech-content-viewport {
    width: 70%;
    padding: 2.5rem;
    background-image: radial-gradient(#64271415 1.5px, transparent 0);
    background-size: 15px 15px;
}

.tech-details-container {
    transition: opacity 0.2s ease;
}

.tech-details-container h2 {
    color: #642714;
    margin-bottom: 1rem;
    text-align: left;
}

.tech-details-container ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
}

.tech-details-container li {
    background: #ed6325;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid #642714;
}

/* --- CTA Section - LEFT ALIGNED --- */
.cta-wrapper {
    padding: 5vh 5vw;
    background-color: #fde2cf;
}

.cta {
    background-color: #f8a720;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem;
    border-radius: 24px;
    border: 3px solid #642714;
    box-shadow: 12px 12px 0px #8f2121;
    text-align: left; /* Strict left alignment */
}

.cta h1 {
    color: #8f2121;
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 1.5rem;
}

.cta-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.cta-list li {
    margin-bottom: 1.5rem;
}

.ctaBtn {
    background-color: #ed6325;
    color: #fde2cf;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1.5rem;
    border: none;
    box-shadow: 0px 6px 0px #8f2121;
    cursor: pointer;
    transition: 0.2s;
}

.ctaBtn:hover {
    transform: translateY(3px);
    box-shadow: 0px 3px 0px #8f2121;
}

/* --- Responsive Fixes --- */
@media (max-width: 992px) {
    .tech-dashboard { flex-direction: column; }
    .tech-nav { width: 100%; flex-direction: row; overflow-x: auto; }
    .tech-content-viewport { width: 100%; padding: 1.5rem; }
    .cta { padding: 2rem; }
}

@media (max-width: 768px) {
    .services-dashboard-grid { grid-template-columns: 1fr; }
}