.container {

    max-width: var(--container-width);

    margin: 0 auto;

    padding: 0 20px;
}

.section {

    padding: var(--spacing-xl) 0;
}

.grid-2 {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 30px;
}

.grid-3 {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px,1fr)
        );

    gap: 30px;
}
.services-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;
}
header {

    background: var(--bg-white);

    box-shadow: var(--shadow);

    position: sticky;

    top: 0;

    z-index: 100;
}

header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 20px;
}
footer {

    background: var(--primary-light);

    padding: 40px 0;

    text-align: center;
}
/* ==========================
   HEADER
========================== */

.site-header {

    background: #fff;

    border-bottom: 1px solid #f3bfd8;

    position: sticky;

    top: 0;

    z-index: 999;
}

.site-header .container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

/* ==========================
   LOGO
========================== */

.site-logo {

    font-size: 2rem;

    font-weight: 700;

    color: #e754a6;

    flex-shrink: 0;
}

/* ==========================
   NAVIGATION
========================== */

.site-nav {

    flex: 1;

    display: flex;

    justify-content: center;
}

.site-nav ul {

    display: flex;

    align-items: center;

    gap: 35px;

    list-style: none;

    margin: 0;

    padding: 0;
}

.site-nav li {

    margin: 0;
}

.site-nav a {

    text-decoration: none;

    color: #333;

    font-weight: 600;

    font-size: 1rem;

    transition: .3s ease;
}

.site-nav a:hover {

    color: #e754a6;
}

/* ==========================
   BUTTON
========================== */

.header-btn {

    flex-shrink: 0;

    padding: 12px 24px;
}