/* ==========================
   CSS VARIABLES
========================== */

:root {

    --primary: #E83E99;
    --primary-dark: #C92F82;
    --primary-light: #FCE8F3;

    --dark: #232323;

    --text: #555555;

    --background: #FAFAFA;

    --white: #FFFFFF;

    --border-radius: 16px;

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

    --transition: .3s ease;
}

/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Open Sans',sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.7;
}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

section{

    padding:100px 0;

}

.container{

    max-width:1200px;

}

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

h1,h2,h3,h4,h5{

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

    color:var(--dark);

    font-weight:700;

}

.section-title{

    margin-bottom:1rem;

}

.section-subtitle{

    color:var(--primary);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

}

/* ==========================
   BUTTONS
========================== */

.btn-primary{

    background:var(--primary);

    border:none;

    border-radius:50px;

    padding:14px 28px;

    transition:var(--transition);

}

.btn-primary:hover{

    background:var(--primary-dark);

}