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

/* =========================================================
   SIGMAEQI GLOBAL FONT
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');


:root {
    --sq-navy: #102b57;
    --sq-blue: #1d4f91;
    --sq-red: #c5223d;

    --text-dark: #172033;
    --text-light: #647084;

    --white: #ffffff;
}


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

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;
}


body {
    margin: 0;
    padding: 0;

    width: 100%;
    max-width: 100%;

    font-family: "DM Sans", sans-serif;

    color: var(--text-dark);
    background: #ffffff;

    overflow-x: hidden;
}


/* IMPORTANT:
   Prevent headings/buttons from accidentally inheriting
   browser serif fonts.
*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
span,
li,
strong {
    font-family: "DM Sans", sans-serif;
}


button,
input,
textarea,
select {
    font-family: inherit;
}


a {
    text-decoration: none;
    color: inherit;
}


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


.container {
    width: min(1400px, 92%);
    max-width: 1400px;

    margin-left: auto;
    margin-right: auto;
}


.section {
    padding: 5.5rem 0;
}


/* =========================================================
   SIGMAEQI GLOBAL RESPONSIVE FOUNDATION
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

.container {
    width: min(100% - 32px, var(--container-width));
    margin-inline: auto;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .container {
        width: min(100% - 36px, var(--container-width));
    }

    .section {
        padding: 4rem 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    html {
        font-size: 15px;
    }

    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .container {
        width: calc(100% - 30px);
        max-width: none;
        margin-inline: auto;
    }

    .section {
        padding: 3rem 0;
    }

    h1,
    h2,
    h3,
    h4,
    p {
        max-width: 100%;
        overflow-wrap: break-word;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .container {
        width: calc(100% - 24px);
    }

    .section {
        padding: 2.5rem 0;
    }

}

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: calc(100% - 32px);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}