:root {
    --bg: #f8f7fa;
    --menutxtcl: 111,115,145;
    --menutxtweight: 600;
    --intlinear: 90, 99, 129;
    --txtall: 79, 82, 107;
    --cl1: 127, 139, 216;
    --pckdf: var(--cl1);
    --whydf: var(--cl1);
    --lbds: 255, 255, 255;
    --lsdb: 56, 58, 70;
    --text: 85, 85, 85;
    --fixedtel: #d581b4;
}
body.dark {
    --bg: #26272d;
    --menutxtcl: 226, 226, 228;
    --intlinear: 45, 45, 58;
    --txtall: 226, 226, 228;
    --cl1: 192,128,223;
    --lbds: 56, 58, 70;
    --lsdb: 255, 255, 255;
    --pckdf: var(--cl1);
    --text: 226, 226, 228;
}

* {
    box-sizing: border-box;
}

.serviceList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    justify-content: flex-start; /* Alt satırdaki hizmetleri sola hizala */
}

.serviceItem {
    width: calc(100% / 8 - 10px); /* 8 öğeyi tam olarak yan yana hizala */
    background: lightgray;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Küçük ekranlar için responsive tasarım */
@media (max-width: 1024px) {
    .serviceItem {
        width: calc(100% / 4 - 10px); /* Tabletlerde 4 sütun */
    }
}

@media (max-width: 768px) {
    .serviceItem {
        width: calc(100% / 2 - 10px); /* Mobilde 2 sütun */
    }
}

@media (max-width: 480px) {
    .serviceItem {
        width: calc(100% - 10px); /* Küçük ekranlarda tam genişlik */
    }
}