/* =========================
   Global Reset
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 1.125rem; /* 18px */
}

body {
    font-family: "Poppins", sans-serif;
    color: #111;
    background-color: #fafafa;
    line-height: 1.5;
}

/* =========================
   Variables
========================= */
:root {
  --primary: #095ED8;
  --accent: #F8CB1B;
  --background: #FAFAFA;
  --accent-text: #000000;
  --text-light: #fafafa;
  --text-white: #ffffff;
  --container-width: 1300px;
  --powder-blue: #9AC1DC;
  --light-cyan: #CCECF5;
}

/* =========================
   Layout Helpers
========================= */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.cta{
    background-color: var(--accent);
    color: var(--accent-text);
    font-size: 19px;
    font-weight: 500;
    /* letter-spacing: 0.8px; */
    padding: 14px 28px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    &:hover {
        background-color: var(--primary);
        color: var(--text-light);
    }
}


.highlighted-primary{
    color: var(--primary);
}

/* 
.card{
    background-color: var(--text-white, #fff);
    box-shadow: 11px 14px 0 0 var(--light-cyan, #ccecf5);
    height: 100%;
    position: relative;
    border: 2px solid var(--powder-blue, #9ac1dc);
    border-radius: 16px;
    padding: 150px 32px 32px;
} */

.title-primary{
  color: var(--primary);
  font-size: 3.5rem;
  font-family: "Bebas Neue", sans-serif;
}

.color-primary{
  color: var(--primary);
}
.section-title{
  font-family: "Bebas Neue", sans-serif;
  display: inline;
  font-size: 3.5rem;
  color: var(--accent) !important;
  text-align: center;
  margin-bottom: 70px;
  position: relative;
    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -0.4rem;
        width: 100%;
        height: 20px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background-image: url("./assets/hero-line.svg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
}

.wave-top{
    width: 100%;
    transform: rotate(180deg);
}

.wave{
    width: 100%;
}

.section{
  margin-bottom: 60px;
}