/* ====================================
   DESIGN SYSTEM
==================================== */
:root {

    /* ====================================
       BRAND COLORS
    ==================================== */

    --primary-color: #E8A4C9;
    --primary-dark: #D97BAE;
    --primary-light: #F6D6E8;

    --accent-color: #C85A93;

    /* ====================================
       TEXT
    ==================================== */

    --text-dark: #333333;
    --text-light: #666666;
    --text-white: #FFFFFF;

    /* ====================================
       BACKGROUNDS
    ==================================== */

    --bg-white: #FFFFFF;
    --bg-light: #FAFAFA;
    --bg-dark: #2B2B2B;

    /* ====================================
       BORDERS
    ==================================== */

    --border-color: #F1D9E7;

    /* ====================================
       LAYOUT
    ==================================== */

    --container-width: 1200px;

    /* ====================================
       SPACING
    ==================================== */

    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 80px;

    --section-padding: 100px;

    /* ====================================
       BORDER RADIUS
    ==================================== */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* ====================================
       SHADOWS
    ==================================== */

    --shadow-sm:
        0 2px 10px rgba(0,0,0,.08);

    --shadow-md:
        0 8px 24px rgba(0,0,0,.08);

    --shadow-lg:
        0 15px 35px rgba(0,0,0,.12);

}
/* ====================================
   TYPOGRAPHY
==================================== */

body {

    font-family:
        "Poppins",
        sans-serif;

    color: var(--text-dark);

    line-height: 1.7;

    background: var(--bg-light);

}

h1,
h2,
h3,
h4 {

    margin-top: 0;

    font-weight: 700;

    color: var(--text-dark);

}

h1 {

    font-size: 4rem;

}

h2 {

    font-size: 2.5rem;

}

h3 {

    font-size: 1.5rem;

}

p {

    color: var(--text-light);

}
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

.section-title {

    text-align: center;

    margin-bottom: 50px;

    color: var(--primary-dark);

    position: relative;
}

.section-title::after {

    content: "";

    width: 80px;

    height: 3px;

    background: var(--primary-color);

    display: block;

    margin: 15px auto 0;
}
.section-subtitle {

    text-align: center;

    max-width: 600px;

    margin: -25px auto 50px;

    color: var(--text-light);
}