table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f4f4f4;
    }
    
    .grid-container2 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 40px;
        margin-bottom: 50px;
        padding: 20px;
        width: 100%;
    }
    
    .grid-item {
        padding: 0px;
        margin-bottom: 40px;
        text-align: left;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    .grid-item strong {
        display: block;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .grid-item-name {
        display: grid;
        place-items: center; /* Центрирует содержимое по горизонтали и вертикали */
        background: #e9ecef;
        padding: 20px;
        text-align: center;
        font-weight: bold;
        height: 80px;
        border-radius: 10px 10px 0 0;
    }
    
    .grid-item-content {
        font-size: 14px;
        padding: 12px;
        padding-bottom: 0px;
        background: #ffffff;
    }
    
    .grid-item-name-description {
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        height: 50px;
    }
    
    .grid-item-develop, .grid-item-servis {
        font-size: 14px;
        padding-top: 10px;
    }
    .grid-item-develop {
        height: 480px;
    }
    

    .grid-item-develop ul li, .grid-item-servis ul li {
        font-size: 14px;
        margin: 0 0 4px 0px;
        padding: 0;
        }
    
    .grid-item-develop-name {
        font-size: 14px;
        text-transform: uppercase;
        font-weight: bold;
        padding-bottom: 10px;
    }
    
    .grid-item-servis {
        min-height: 100px;
    }
    
    .grid-item-price {
        background: #e9ecef;
        padding: 20px;
        text-align: center;
        font-weight: bold;
        border-radius: 0 0 10px 10px;
    }
    
    
:root {
  --color-site-vizitka: #87CEEB;
  --color-landing-page: #FFA500;
  --color-korporativny-site: #777777;
  --color-site-katalog: #4CAF50;
  --color-internet-magazin: #E64A19;
  --color-web-service: #007BFF;
  --color-platforma: #8A2BE2;
}    
    
.bg-color-site-vizitka {
    background: linear-gradient(0deg, var(--color-site-vizitka), #00BFFF);
}
.bg-color-site-vizitka-end {
    background: linear-gradient(180deg, var(--color-site-vizitka), #00BFFF);
}

.bg-color-landing-page {
    color: #fff;
    background: linear-gradient(45deg, var(--color-landing-page), #FF6347, #FFD700);

}
.bg-color-korporativny-site {
    color: #fff;
    background: linear-gradient(135deg, var(--color-korporativny-site), #555555, #777777);
}
.bg-color-site-katalog {
    color: #fff;
    background: linear-gradient(135deg, #66C466, #4CAF50, #2C6B2F);
}

.bg-color-internet-magazin {
    color: #fff;
    background: linear-gradient(0deg, #d1532e, #e1612c);
}
.bg-color-internet-magazin-end {
    color: #fff;
    background: linear-gradient(180deg, #d1532e, #e1612c);
}


.bg-color-web-service {
    color: #fff;
    background: linear-gradient(135deg, var(--color-web-service), #00BFFF, #1E90FF);
}
.bg-color-platforma {
    color: #fff;
    background: linear-gradient(135deg, var(--color-platforma), #9B30FF, #7B68EE);
}

.border-color-site-vizitka {
    border: 1px solid var(--color-site-vizitka);
}

.border-color-landing-page {
    border: 1px solid var(--color-landing-page);
}

.border-color-korporativny-site {
    border: 1px solid var(--color-korporativny-site);
}

.border-color-site-katalog {
    border: 1px solid var(--color-site-katalog);
}

.border-color-internet-magazin {
    border: 1px solid var(--color-internet-magazin);
}

.border-color-web-service {
    border: 1px solid var(--color-web-service);
}

.border-color-platforma {
    border: 1px solid var(--color-platforma);
}


@media (min-width: 1025px) and (max-width: 1366px) {
    .grid-container2 {
       grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 577px) and (max-width: 1024px) {
    .grid-container2 {
        grid-template-columns: repeat(4, 1fr);
    }    
}


@media (max-width: 576px) {
    .grid-container2 {
        grid-template-columns: 1fr;
    }
    
    .grid-item-name {
        height: auto;
    }
    
    
    .grid-item-name-description {
        height: auto;
    }
    

    .grid-item-develop {
        height: auto;
    }
    

    .grid-item-servis {
        min-height: auto;
    }
    
        
    
    
    
}