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

html, body {
    height: 100%;
    font-family: "JetBrains Mono";
    font-size: 1rem;
    line-height: 1.6;
    background: #F4F0EA;
    color: #222;
    scroll-behavior: smooth;
    /*display: flex;*/
    /*flex-direction: column;*/
    min-height: 100vh;
    /*overflow-x: hidden;*/
}

/* ================= light-darkmode ================= */
:root {
    /* Base background & text */
    --clr-bg--primary: white;
    --clr-bg--secondary: #f4f0ea;
    --clr-bg--tertiary: #daccb7;
    --clr-text: #222;
    --clr-text-muted: #555;

    /*navbar */
    --clr-nav-bg: rgba(250, 250, 250, 0.7);
    --clr-nav-text: #222;
    --clr-nav-hover-bg: #1b2b66;
    --clr-nav-active-underline: #d8553b;

    /*brand clrs */
    --clr-blue-primary: #1b2b66;
    --clr-blue-primary-dark: #4784c5;
    --clr-blue-primary-light: #8fd2e6;
    --clr-teal-secondary: #125d6e;
    --clr-teal-secondary-dark: #1ea69f;
    --clr-teal-secondary-light: #8fd2e6;
    --clr-coral-accent: #d8553b;

    /* Decorative shapes */
    --clr-shape-blue-light: rgba(143, 210, 230, 0.4); /*--clr-blue-primary-light*/

    /* Stats circles */
    --clr-circle-bg: #1b2b66;

    /* Hero */
    --clr-hero-bg: black;

    /* Borders */
    --clr-border: #ccc;

    /* Footer */
    --clr-footer-text: #062a64;
    --clr-footer-bg: white;

    /* Shadows */
    --shdw-light: rgba(0, 0, 0, 0.05);
    --shdw-medium: rgba(36, 62, 134, 0.15);
    --shdw-heavy: rgba(36, 62, 134, 0.25);
}

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

html, body {
    height: 100%;
}

/*body {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    height: 100vh;          !* full viewport *!*/
/*    overflow: hidden;       !* no scroll *!*/
/*}*/

/*********TRIANGLE BG************/

.bg-triangle-pattern .triangle {
    opacity: 0.05;
}


.bg-triangles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}


.triangle {
    position: absolute;
    top: -49vh;
    height: 200vh;
    width: 63vw;
    will-change: transform;

    filter: drop-shadow(28px 7px 18px rgba(255, 255, 255, 0.17));
}




/* Darkest / leftmost ON TOP */
.t1 { left: -22vw; fill: #0b6f82; z-index: 5; }
.t2 { left: 11vw; fill: #3c8fa0; z-index: 4; }
.t3 { left: 34vw;   fill: #78b3bd; z-index: 3; }
/*.t4 { left: 44vw;  fill: #a7dede; z-index: 2; }*/
/*.t5 { left: 71vw;  fill: #d6f1f1; z-index: 1; }*/


.navbar,
main,
footer {
    position: relative;
    z-index: 2;
}




@media (max-width: 768px) {
    .content-inner .row {
        flex-direction: column;
    }
    .content-inner .row .col.txt,
    .content-inner .row .col.img {
        flex: 1 1 100%;
    }
    .icon-row {
        flex-wrap: wrap;
        gap: 20px;
    }
    .item {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
        height: 160px;
    }
    .circle {
        width: 100px;
        height: 100px;
    }
    .circle img {
        width: 60px;
        height: 60px;
    }
}