:root {
    --blue: #4ed4ff;
    --aquamarine:  #00c7ae;
    --green: #54ffbc;
    --lavender: #b2a0f6;
    --dark: #181d3d;
    --cobalt: #2f3b77;
    --indigo: #4835ba;
}

* {
    scroll-snap-type: y mandatory; 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif, 'Poppins';
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

@media (max-width: 600px) {
    * {
     -webkit-transition: none !important;
     -moz-transition: none !important;
     -o-transition: none !important;
     -ms-transition: none !important;
     transition: none !important;
    }
  }

body {
    background: var(--dark);
}

.scrollbar {
    position: absolute;
    width: 2rem;
    height: 4600vh;
    z-index: 1;
    top: 0;
    right: 0;
    margin-left: 2em;
    overflow-x: hidden;
    background-image: linear-gradient( #00cab1, #0075b6, #6f80ff, #c896ff,
    #4ed4ff, #54ffbc, #558aff, #3f38cc, #ff7c55 );
}
@media (max-width: 960px) {
    .scrollbar { width: 1rem; }}
@media (max-width: 600px) {
    .scrollbar { width: .6rem; }}


.grid1 {
    display: grid;
    grid-template-rows: fit-content(13%) 1fr;
    grid-template-columns: repeat(5, 1fr) ;
    justify-items: stretch;
    align-items: stretch;
    background: var(--cobalt);
    height: 100vh;
    width: 100%;
}
@media (max-width: 600px) {
    .grid1 { grid-template-rows: fit-content(15%) 1fr; }}


.grid1b {
    display: grid;
    grid-template-rows: fit-content(15% calc(100% - 15%));
    grid-template-columns: repeat(4, 1fr) ;
    justify-items: stretch;
    align-items: stretch;
    background: var(--cobalt);
}

.grid2 {
    display: grid;
    grid-template-rows: fit-content(15%) 1fr;
    grid-template-columns: 1fr 1fr 1fr ;
    background: #2f3b77;
}
@media (max-width: 600px) {
    .grid2 { grid-template-rows: 1fr 1fr 1fr 1fr; }}

.grid2a {
    display: grid;
    grid-template-rows: fit-content(15%) 1fr;
    grid-template-columns: 1fr 1fr 1fr ;
    justify-items: stretch;
    align-items: stretch;
    background: white;
}

.grid2b {
    display: grid;
    grid-template-rows: fit-content(15%) 3fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
    justify-items: stretch;
    align-items: stretch;
    height: 100vh;
}
@media (max-width: 800px) {
    .grid2b { grid-template-rows: fit-content(15%) 4fr;}}

.grid2c {
    display: grid;
    grid-template-rows: fit-content(auto);
    grid-template-columns: 1fr 1fr 1fr ;
    background: #2f3b77;
}
@media (max-width: 600px) {
    .grid2c { grid-template-rows:  fit-content(auto) fit-content(auto) fit-content(auto) fit-content(auto); }}

.grid2d {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr ;
    justify-items: stretch;
    align-items: stretch;
    background: white;
}

.grid2e {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
    justify-items: stretch;
    align-items: stretch;
}

.grid3 {
    display: grid;
    grid-template-rows: 1fr 2fr;
    grid-template-columns: repeat(auto-fit(4, 1fr));
    justify-items: stretch;
    align-items: stretch;
}

.item-container1 {
    display: grid;
    grid-row: 2 / 3;
    grid-column: span 5;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    margin-left: 5%;
    margin-right: 5%;
}
@media (max-width: 600px) {
    .item-container1 { grid-template-rows: 1fr 1fr; }}

.item-container2 {
    display: grid;
    grid-row: 2 / 3;
    grid-column: span 5;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: fit-content(18%) 45% 37%;
    margin-left: 7%;
    margin-right: 5%;
}
@media (max-width: 600px) {
    .item-container2 { display: flex; }
    .item-container2 { flex-direction: column; }}


.item-container3 {
    display: grid;
    grid-row: 2 / 3;
    grid-column: span 5;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 3fr;
    padding-left: 7%;
    padding-right: 5%;
    background: white;
}
@media (max-width: 800px) {
    .item-container3 { display: flex; }
    .item-container3 { flex-direction: column; }}

.item-container4 {
    display: flex;
    flex-direction: row;
    grid-row: 2 / 3;
    grid-column: span 5;
    margin-left: 7%;
    margin-right: 5%;
    overflow: auto;
}
@media (max-width: 600px) {
    .item-container4 { display: flex; }
    .item-container4 { flex-direction: column; }
    .item-container4 { align-items: center; }}


.item-container5 {
    display: flex;
    flex-direction: column;
    grid-row: 2 / 3;
    grid-column: span 5;
    align-items: center;
    padding-top: 3%;
}
@media (max-width: 600px) {
    .item-container4 { display: flex; }
    .item-container4 { flex-direction: column; }
    .item-container4 { align-items: center; }
    .item-container4 { overflow: auto; }}


.item1 {
    grid-row: 1 / 2;
    grid-column: span 4;
    padding-top: 5%;
    padding-bottom: 2%;
    padding-left: 8%;
    padding-right: 15%;
    background: #181d3d;
}
@media (max-width: 600px) {
    .item1 { padding-top: 10%; }
    .item1 { padding-bottom: 5%;}}

@media (max-width: 600px) {
    .item1 { align-self: end; }}



.item1b {
    grid-row: 1 / 2;
    grid-column: span 3;
    padding-top: 5%;
    padding-bottom: 3%;
    padding-left: 8%;
    padding-right: 8%;
    background: #181d3d;
}
@media (max-width: 600px) {
    .item1b { padding-right: 0%; }}


.item1c {
    grid-row: 1 / 2;
    grid-column: span 2;
    justify-self: stretch;
    padding-top: 5%;
    padding-bottom: 2%;
    padding-left: 8%;
    margin-right: 0em;
    background: #181d3d;
}

.item1d {
    grid-row: 1 / 2;
    grid-column: span 4;
    align-self: end;
    padding-left: 8%;
    background: #181d3d;
}

.item1e {
    grid-row: 1 / 2;
    grid-column: span 3;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 8%;
    padding-right: 10%;
    background: var(--dark);
}

.item2 {
    grid-row: 1 / 2;
    grid-column: span 1;
    background: #181d3d;
}
@media (max-width: 960px) {
    .item2 { right: 20%;; }}
@media (max-width: 600px) {
    .item2 { right: 30%;; }}

.item2b {
    grid-row: 1 / 2;
    grid-column: span 1;
    position: relative;
    padding-left: 20em;
    padding-right: 10%;
    background: #181d3d;
}

.item3 {
    grid-row: 2 / 3;
    grid-column: 1 / 6;
    padding-top: 6%;
}

.item-3 {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
}
@media (max-width: 600px) {
    .item-3 { grid-row: 1 / 2; }
    .item-3 { grid-column: 1 / 3; }}

.item-4 {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
}
@media (max-width: 600px) {
    .item-4 { grid-row: 2 / 3; }
    .item-4 { grid-column: 1 / 3; }}

.item-5 {
    grid-row: 1 / 4;
    grid-column: 1 / 2;
    padding-top: 20%;
    padding-right: 12%;
}
@media (max-width: 800px) {
    .item-5 { grid-row: 1 / 2; }
    .item-5 { grid-column: 1 / 4; }
    .item-5 { padding-right: 8%; }
    .item-5 { padding-top: 7%; }}

.item-6 {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    padding-top: 7%;
    padding-right: 10%;
}
@media (max-width: 600px) {
    .item-6 { grid-row: 2 / 3; }
    .item-6 { grid-column: 1 / 4; }
    .item-6 { padding-right: 8%; }
    .item-6 { padding-top: 3%; }
    .item-6 { padding-bottom: 5%; }}

.item-7 {
    grid-row: 1 / 4;
    grid-column: 3 / 4;
    padding-top: 10%;
}
@media (max-width: 600px) {
    .item-7 { padding-top: 3%; }
    .item-7 { margin-left: -8%; }}

.item-8 {
    grid-row: 1 / 4;
    grid-column: 2 / 3;
    padding-top: 5%;

    padding-right: 10%;
}
@media (max-width: 600px) {
    .item-8 { grid-row: 2 / 3; }
    .item-8 { grid-column: 1 / 4; }
    .item-8 { padding-right: 8%; }
    .item-8 { padding-top: 3%; }
    .item-8 { padding-bottom: 5%; }}



.item3aa {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
}

.item3a {
    grid-row: 2 / 3; ;
    grid-column: span 5 ;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    align-items: start;
    background: white;
}
@media (max-width: 600px) {
    .item3a { grid-template-rows: minmax(min-content, max-content); }
    .item3a { grid-template-columns: 1fr ; }
    .item3a {  overflow: scroll; }
    .item3a {  padding-top: 2%; }}

.item3b {
    grid-row: 2 / 3;
    grid-column: span 1;
    padding-top: 10%;
    padding-left: 25%;
    background: #2f3b77;
}
@media (max-width: 600px) {
    .item3b { grid-row: 2 / 3; }}
@media (max-width: 600px) {
    .item3b { grid-column: span 3; }}
@media (max-width: 600px) {
    .item3b { padding-left: 8%; }}
@media (max-width: 600px) {
    .item3b { padding-top: 8%; }}
@media (max-width: 600px) {
    .item3b { padding-right: 12%; }}

.item3c {
    grid-row: 2 / 3;
    grid-column: span 1;
    padding-top: 10%;
    padding-right: 12%;
    padding-left: 12%;
    background: #2f3b77;
}
@media (max-width: 600px) {
    .item3c { grid-row: 3 / 4; }}
@media (max-width: 600px) {
    .item3c { grid-column: span 3; }}
@media (max-width: 600px) {
    .item3c { padding-left: 8%; }}
@media (max-width: 600px) {
    .item3c { padding-right: 12%; }}
@media (max-width: 600px) {
    .item3c { padding-top: 0; }}



.item3d {
    grid-row: 2 / 3;
    grid-column: span 1;
    padding-top: 10%;
    padding-right: 25%;
    background: #2f3b77;
}
@media (max-width: 600px) {
    .item3d { grid-row: 4 / 5; }}
@media (max-width: 600px) {
    .item3d { grid-column: span 3; }}
@media (max-width: 600px) {
    .item3d { padding-left: 8%; }}
@media (max-width: 600px) {
    .item3d { padding-right: 12%; }}
@media (max-width: 600px) {
    .item3b { padding-top: 0%; }}


.item3e {
    grid-row: 2 / 3;
    grid-column: span 4;
    align-self: start;
    padding-right: 10%
}

.item3f {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 3fr;
    grid-column: span 1;
    align-items: start;
    align-self: start;
    padding-top: 5%;
    padding-left: 15%;
    background: white;
}
@media (max-width: 600px) {
    .item3f { padding-left: 8%; }
    .item3f { padding-top: 0; }
    .item3f { padding-right: 10%; }}

.item3g {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 3fr;
    grid-column: span 1;
    align-items: start;
    padding-top: 5%;
    padding-right: 3%;
    padding-left: 8%;
    background: white;
}
@media (max-width: 600px) {
    .item3g { padding-left: 8%; }
    .item3g { padding-top: 0; }
    .item3g { padding-right: 10%; }}

.item3h {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 3fr;
    grid-column: span 1;
    align-items: start;
    padding-top: 5%;
    padding-right: 20%;
    background: white;
}
@media (max-width: 600px) {
    .item3h { padding-left: 8%; }
    .item3h { padding-top: 0; }
    .item3h { padding-right: 10%; }}

.item3i {
    grid-row: 2 / 3;
    grid-column: span 5;
    display: flex;
    background: #2f3b77;
}
@media (max-width: 600px) {
    .item3i { grid-row: 2 / 4; }
    .item3i { flex-direction: column; }
    .item3i { flex: 4 0 85%; }}

.item4 {
    grid-row: 2 / 3;
    grid-column: span 2;
    align-self: center;
    padding-right: 10%;
}

.item5 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    padding-top: 22%;
    padding-right: 0;
    padding-left: 32%;
    background: #2f3b77;
}

.item6 {
    grid-row: 2 / 3;
    grid-column: 2 / 4;
    padding-top: 5em;
    padding-right: 0em;
    padding-left: 5em;
    background: #2f3b77;
}

.item7 {
    grid-row: 2 / 3;
    grid-column: span 2;
    padding-top: 5em;
    padding-right: 0em;
    padding-left: 5em;
    background: #2f3b77;
}

.item8 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    padding-top: 4rem;
    padding-left: 32%;
    background: white;
}

.item9 {
    grid-row: 2 / 3;
    grid-column: span 4;
    padding-top: 4rem;
    padding-left: 5%;
    padding-right: 10%;
    background: white;
}

.item10a {
    grid-row: 2 / 3;
    grid-column: span 2;
    padding-top: 2em;
    padding-left: 10em;
    padding-right: 4em;
}

.item10b {
    grid-row: 2 / 3;
    grid-column: span 2;
    padding-top: 2em;
    padding-left: 4em;
    padding-right: 10%;
}

.header {
    flex: 1;
    padding-top: 3%;
    padding-bottom: 2%;
    padding-left: 8%;
    padding-right: 10%;
    width: 100%;
}
@media (max-width: 600px) {
    .header { padding-bottom: 3%;}}


.header1 {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-self: flex-end;
    padding-top: 3%;
    padding-bottom: 2%;
    padding-left: 8%;
    padding-right: 10%;
    width: 100%;
}

.header2 {
    grid-row: 2 / 3;
    grid-column: span 5;
    display: flex;
    flex: 1;
    padding-top: 3%;
    padding-bottom: 2%;
    padding-left: 8%;
    padding-right: 10%;
    width: 100%;
}

.column {
    display: flex;
    flex: 20% ;
    flex-direction: column;
    padding-right: 5%;
}
@media (max-width: 600px) {
    .column { padding-bottom: 10%;}}

.column1 {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-items: center;
    margin-left: 10em;
    margin-right: 10em;
}

.column1a {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-items: center;
    margin-left: 10em;
    margin-right: 10em;
    background: white;
}

.column2 {
    display: flex;
    flex: 2;
    flex-direction: column;
    background: #2f3b77;
}

.column2a {
    display: flex;
    flex: 2;
    flex-direction: row;
    background: #2f3b77;
    padding-right: 10%;
    padding-bottom: 25%;
}
@media (max-width: 800px) {
    .column2a { flex-direction: column;}}


.column2b {
    display: flex;
    flex: 3;
    flex-direction: column;
    background: #2f3b77;
    padding-top: 5%;
    padding-left: 5%;
    padding-bottom: 30%;
}
@media (max-width: 600px) {
    .column2b { padding-left: 8%;}
    .column2b { padding-top: 10%;}}

.column3 {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 5%;
    margin-left: 8%;
    margin-right: 3%;
}
@media (max-width: 800px) {
    .column3 { flex: 0; }
    .column3 { margin-right: 10%; }}

.column3a {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 5%;
    margin-right: 10%;
}
@media (max-width: 800px) {
    .column3a { margin-top: 5%; }
    .column3a { margin-left: 8%; }}

.box {
    display: flex;
    flex: 3;
    margin-right: 10%;
    margin-left: 8%;
}
@media (max-width: 600px) {
    .box { flex-direction: column; }}




.box1 {
    display: flex;
    flex-direction: column;
}
@media (max-width: 600px) {
    .box1 { flex-direction: row; }}

.box1a {
    display: flex;
    flex: 3;
}

.box1b {
    display: flex;
    flex-direction: column;
    flex: 4;
    min-width: 100%;
    background: #2f3b77;
    overflow: auto;
    scroll-snap-type: y mandatory; 
}

.box1c {
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    align-self: flex-start;
    padding-top: 3%;
}

.box2 {
    flex: 4;
}

.box3 {
    width: 33%;
}

.box4 {
    padding-right: 5%;
}

.box4a {
    grid-row: span 1;
    grid-column: span 1;
    padding-top: 2em;
    padding-right: 1em;
}
@media (max-width: 600px) {
    .box1 { padding-top: 0;}}

.box5 {
    display: flex;
    flex-direction: column;
    padding-top: 5%;
}
@media (max-width: 600px) {
    .box5 { flex-direction: row; }}


section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    min-height: 100vh; 
    max-height: 100vh;
    background: #181d3d;
    overflow: hidden;
}

.sec-1 {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    min-height: 100vh; 
    max-height: 100vh;
    background: #181d3d;
    overflow: hidden;
}
@media (max-width: 960px) {
    .sec-1 { flex-direction: column; }}


.sec-2 {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sec-3 {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-content: center;
}
@media (max-width: 960px) {
    .sec-3 { flex-direction: column; }}

.sec-4 {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
}


.sec-8 {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh; 
    background: #181d3d;
    overflow: hidden;
}

.sec-10 {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh; 
    background: #181d3d;
    overflow: hidden;
}

.sec-20 {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    min-height: 100vh; 
    background: #181d3d;
    overflow: hidden;
}

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 8%;
    margin-right: 10%;
    padding-top: 5%;
    padding-bottom: 3%;
    text-align: left;
}

.container-a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 8%;
    margin-right: 10%;
    padding-top: 5%;
    padding-bottom: 3%;
    text-align: left;
}
@media (max-width: 960px) {
.container-a { justify-content: flex-end; }}

.container-b {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 8%;
    margin-right: 10%;
    padding-top: 5%;
    padding-bottom: 3%;
    text-align: left;
}
@media (max-width: 960px) {
.container-b { justify-content: flex-start; }}

.container-c {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 8%;
    margin-right: 10%;
    padding-top: 5%;
    padding-bottom: 3%;
}
@media (max-width: 600px) {
    .container-c { justify-content: flex-start; }
    .container-c { margin-top: 40%; }}


.container1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 8%;
    padding-right:10%;
    padding-top:5%;
    padding-bottom: 15%;
    text-align: left;
}

.container1a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left-style: solid; 
    border-width: 5px;
    border-color: white;
    padding-left: 5em;
    padding-right: 10%;
    text-align: left;
}
@media (max-width: 960px) {
    .container1a { justify-content: flex-start; }
    .container1a { border-left-style: none;  }
    .container1a { padding-left: 0; }}


.container1b {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top-style: solid; 
    border-width: 5px;
    padding-top: 2%;
    border-color: white;
    text-align: left;
}
@media (max-width: 960px) {
    .container1b { margin-left: 8%; }}
@media (max-width: 960px) {
    .container1b { margin-top: 5%; }}
@media (max-width: 960px) {
    .container1b { border-width: 2px; }}
@media (max-width: 960px) {
    .container1b {     padding-top: 3%;; }}

.container1c {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-items: center;
    margin-left: 8%;
    margin-right: 10%;
    text-align: left;
}

.container1d {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 8%;
    margin-right: 10%;
    padding-top: 5%;
    padding-bottom: 3%;
    text-align: left;
}
@media (max-width: 1040px) {
    .container1d { padding-top: 3%;; }}

.container1e {
    flex: 1;
    display: flex;
    width: 100%;
    padding-left: 8%;
    padding-right:10%;
    padding-bottom: 15%;
    text-align: left;
    background: var(--cobalt);
}
@media (max-width: 600px) {
    .container1e { flex-direction: column; }}


.container2 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 3em;
    padding-top: 5em;
    padding-left: 10em;
    padding-right: 10em;
    background: #2f3b77;
    flex: 0 0 auto;
    width: 100%;
}

.container3 {
    display: flex;
    flex-direction: row;
}
@media (max-width: 960px) {
    .container3 { flex-direction: column; }}

.container4 {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    padding: 6em;
    background: #54ffbc;
}
@media (max-width: 800px) {
    .container4 { flex: 0 1 auto }
    .container4 { height: 35vh;}}
@media (max-width: 800px) {
    .container4 { padding: 0; }}

.container4a {
    display: flex;
    flex: 1;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    padding: 6em;
    background: #b2a0f6;
}
@media (max-width: 800px) {
    .container4a { flex: 0 1 1fr }
    .container4a { height: 35vh;}}
@media (max-width: 800px) {
    .container4a { padding: 0; }}

.container4b {
    display: flex;
    flex: 1;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    padding: 6em;
    background: #4ed4ff;
}
@media (max-width: 800px) {
    .container4b { flex: 0 1 1fr }
    .container4b { height: 35vh;}}
@media (max-width: 800px) {
    .container4b { padding: 0; }}

.container4c {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-left: 8%;
    padding-right: 5%;
    padding-bottom: 10%;
    padding-top: 5%;
    background: white;
}
@media (max-width: 600px) {
    .container4c { flex: 0 3 30% }
    .container4c { align-items: center; }
    .container4c { padding-top: 5%; }
    .container4c { padding-bottom: 5%; }
    .container4c { padding-left: 8%; }
    .container4c { padding-right: 8%; }}

.container4d {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-left: 7%;
    padding-right: 7%;
    padding-bottom: 10%;
    padding-top: 5%;
    background: white;
}
@media (max-width: 600px) {
    .container4d { flex: 0 3 30% }
    .container4d { padding-top: 5%; }
    .container4d { padding-bottom: 5%; }
    .container4d { padding-left: 7%; }
    .container4d { padding-right: 12%; }}


.container5 {
    display: flex;
    flex: 2;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 10%;
    margin-left: 8%;
    text-align: left;
}
@media (max-width: 800px) {
    .container5 { flex: 2 0 50%; }
    .container5 { justify-content: flex-start;}
    .container5 { align-items: flex-start;}
    .container5 { padding-bottom: 15%; }
    .container5 { padding-top: 10%; }}

.container5a {
    display: flex;
    flex: 2;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 8%;
    margin-left: 3%;
    padding-top: 10%;
}
@media (max-width: 600px) {
    .container5a { padding-top: 8%; }
    .container5a { margin-left: 7%; }
    .container5a { margin-right: 3%; }}

.container6 {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    margin-left: 8%;
    margin-right: 10%;
    text-align: left;
}
@media (max-width: 960px) {
    .container6 { flex: 3; }
    .container6 { justify-content: flex-end; }
    .container6 { align-self: center; }}

.container7 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8em;
    padding: 5em 10em;
    background: white;
    flex: 0 1 auto;
    width: 100%;
}

.container8 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 3em;
    padding-left: 10em;
    padding-right: 10em;
}

.article {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 90%;
}

.article1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
@media (max-width: 600px) {
    .article1 { padding-top: 5%; }}
@media (max-width: 600px) {
    .article1 { padding-bottom: 5%; }}
    

.article1a {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 90%;
    padding-top: 8%;
}
@media (max-width: 600px) {
    .article1a { flex: 4fr; }}

.article1b {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 90%;
    padding-top: 8%;
}
@media (min-width: 601px) {
    .article1b { padding-left: 5%;; }}
@media (min-width: 601px) {
    .article1b { padding-right: 5%;; }}
@media (max-width: 600px) {
    .article1b { flex: 4fr; }}

.article1c {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 90%;
}
@media (max-width: 600px) {
    .article1c { flex: 4fr; }}
@media (max-width: 600px) {
    .article1c { padding-top: 8%; }}

.article1d {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 90%;
}
@media (min-width: 601px) {
    .article1d { padding-left: 5%;; }}
@media (min-width: 601px) {
    .article1d { padding-right: 5%;; }}
@media (max-width: 600px) {
    .article1d { flex: 4fr; }}
@media (max-width: 600px) {
    .article1d { padding-top: 8%; }}

    
.article1e {
    display: flex;
    flex-direction: column;
}
 
.article1f {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top-style: solid; 
    border-width: 2px;
    border-color: white;
    padding-top: 2%;
    padding-bottom: 8%;
    padding-left: 3%;
    padding-right: 3%;
    margin-top: 2%;
}

.article2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 5em;
    flex: 1 0 40%;
}

.article3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;   
    flex: 1 0 40%;
}

.article3a {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;  
    padding-right: 8%;
}

.article3b {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;   
    padding-left: 10%;
}

.article4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 25%;
}
@media (max-width: 800px) {
    .article4 { justify-content: flex-start; }}

.article4a {
    padding-top: 10%;
    padding-left: 5%;
    padding-right: 8%;
}
@media (max-width: 600px) {
    .article4a { padding-top: 1%; }}

.article5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80%;
    position: relative;
}

.article6a {
    border-left-style: solid; 
    border-width: 5px;
    border-color: #4ed4ff;
    margin-left: 8%;
    margin-right: 10%;
    margin-top: 5em;
    padding-left: 3%;
    width: 80%;
}
@media (max-width: 600px) {
    .article6a { border-width: 2px; }}

.article6b {
    border-left-style: solid; 
    border-width: 5px;
    border-color: #54ffbc;
    margin-left: 8%;
    margin-right: 10%;
    margin-top: 5em;
    padding-left: 3%;
    width: 80%;
}

@media (max-width: 600px) {
    .article6b { border-width: 2px; }}

.article6c {
    border-left-style: solid; 
    border-width: 5px;
    border-color: #b2a0f6;
    margin-left: 8%;
    margin-right: 10%;
    margin-top: 5em;
    padding-left: 3%;
    width: 80%;
}
@media (max-width: 600px) {
    .article6c { border-width: 2px; }}

.article6d {
    border-left-style: solid; 
    border-width: 5px;
    border-color: #4835ba;
    margin-left: 8%;
    margin-right: 10%;
    margin-top: 5em;
    padding-left: 3%;
    width: 80%;
}
@media (max-width: 600px) {
    .article6d { border-width: 2px; }}

.article7 {
    padding-bottom: 5%;
    Padding-right: 15%;
}

.article8 {
    width: 20%;
}

.sidebar {
    display: flex;
    flex-direction: column;
}

.sidebar1 {
    display: flex;
    flex-direction: row;
    padding-top: 5%;
    padding-bottom: 5%;
    width: 15%;
}
@media (max-width: 600px) {
    .sidebar1 { width: 100%; }
    .sidebar1 { justify-content: center; }}

.sidebar2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 1 15%;
}

.popup {
    display: flex;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    padding-top: 5%;
    padding-left: 8%;
    padding-right: 10%;
    padding-bottom: 25%;
    background: #2f3b77;
    overflow-y: hidden;
}
@media (max-width: 600px) {
        .popup { flex: 3; }}


.popup2 {
    display: flex;
    flex: 4;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-bottom: 10%;
    background: white;
    overflow-y: hidden;
}
@media (max-width: 600px) {
    .popup2 { overflow-y: auto; }}

.popup3 {
    display: flex;
    flex: 4;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-bottom: 10%;
    background: white;
    overflow-y: hidden;
}



.background1 {
    display: flex;
    min-width: 100%;
    background-image: url("./images/01_A_NLArep2024_Cogs.png");
    background-repeat: no-repeat;
    background-position: right;
    background-attachment: scroll;
    background-size:contain;
}
@media (max-width: 800px) {
    .background1 { background-size: cover; }}
@media (max-width: 800px) {
    .background1 { background-image: url("./images/01_A_NLArep2024_Cogs_Mbl.png") }}


.background2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    min-width: 100%;
    background-image: url("./images/06_NLArep24_WhWeDo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

.background3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    min-width: 100%;
    background-image: url("./images/13_NLArep2024_WhoWeWork.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

.background4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    min-width: 100%;
    background-image: url("./images/20_NLArep24_Approach.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

.background5 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    min-width: 100%;
    background-image: url("./images/37_NLArep2024_Partners.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

.background7 {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-width: 100%;
    background-image: url("./images/40_NLArep2024_WhoFunds.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}
@media (max-width: 960px) {
    .background7 { flex-direction: column; }}
@media (max-width: 960px) {
    .background7 { justify-content: center; }}
@media (max-width: 960px) {
    .background7 { align-items: flex-start; }}


.background8 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    min-width: 100%;
    background-image: url("./images/42_NLArep2024_MultiEntity.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

.background9 {
    display: flex;
    min-height: 100vh;
    min-width: 100%;
    background-image: url("./images/45_NLArep2024_LearnMore.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}
@media (max-width: 800px) {
    .background9 { background-image: url("./images/45_NLArep2024_LearnMore_Mbl.png") }
    .background9 { flex-direction: column; }}

.background10 {
    display: flex;
    flex-direction: column;
    flex: 3;
    min-width: 100%;
    background-image: url("./images/09_NLArep2024_Quotes.svg");
    background-repeat: no-repeat;
    background-position: left;
    background-attachment: scroll;
    background-size: contain;

}

img.stats {
    width: 1000px;
    max-width: 100%;
    height: auto;
    object-fit: contain;  
}

.stats {
    margin-top: 3%;
    padding-bottom: 5%;
    padding-left: 1%;
    object-fit: contain;
}
@media (max-width: 600px) {
    .stats { padding-right: 2%  }}

.stats1 {
    max-height: 100%;
    margin-top: 3%;
    padding-bottom: 5%;
    padding-left: 2%;
    padding-right: 2%;
    object-fit: contain;
}
@media (max-width: 800px) {
    .stats1 { margin-top: 0; }
    .stats1 { padding-bottom: 0; }
    .stats1 { padding-left: 0; }
    .stats1 { padding-right: 0; }}

img.stats1 {
    width: 300px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;  
}
@media (max-width: 1540px) {
    img.stats1 { width: 260px; }}
@media (max-width: 1480px) {
    img.stats1 { width: 220px; }}
@media (max-width: 1280px) {
    img.stats1 { width: 200px; }}
@media (max-width: 1110px) {
    img.stats1 { width: 180px; }}
    @media (max-width: 1000px) {
        img.stats1 { width: 170px; }}

img.stats2 {
    width: 500px;
    max-width: 100%;
    height: auto;
    object-fit: contain;   
}

img.stats3 {
    width: 400px;
    max-width: 100%;
    height: auto;
    object-fit: contain;  
}
@media (max-width: 1280px) {
    img.stats3 { width: 330px; }}
@media (max-width: 800px) {
    img.stats3 { width: 200px; }}
@media (max-width: 600px) {
    img.stats3 { width: 120px; }}

img.stats4 {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    width: 300px;
    margin-left: -5%;
}

.stats4 {
    object-fit: contain;
}
@media (max-width: 800px) {
    .stats4 { margin-top: 0; }
    .stats4 { padding-bottom: 0; }
    .stats4 { padding-left: 0; }
    .stats4 { padding-right: 0; }}

img.strat {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    padding-right: 15%;
    padding-bottom: 5%;
}
@media (max-width: 600px) {
    img.strat { display: none; }}

img.stratalt {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    padding-right: 15%;
    padding-bottom: 5%;
    display: none;
}
@media (max-width: 600px) {
    img.stratalt { display: block; }}

img.nla {
    max-width: 100%;
    height: auto;
    width: 300px;
}
.nla {
    display: flex;
    object-fit: contain;
    padding-top: 2%;
    padding-bottom: 2%;
}
@media (max-width: 600px) {
    img.nla { width: 220px; }
    .nla { align-self: center; }
    .nla { padding-top: 2%; }
    .nla { padding-bottom: 2%; }
    .nla { padding-left: 2%;}
    .nla { padding-right: 8%;}}
@media (max-width: 480px) {
    img.nla { width: 180px; }}

img.logos {
    width: 500px;
    margin-left: -1em;
    margin-top: -5em;
    padding-bottom: 5em;
}

img.logos2 {
    width: 460px;
    max-width: 100%;
    height: auto;
}

.logos2 {
    position: relative;
    top: -9%;
    left: -55%;
}
@media (max-width: 800px) {
    .logos2 { top: 10%}
    .logos2 { left: -1%}

}

img.logos4 {
    max-width: 100%;
    height: 1fr;
}
@media (max-width: 960px) {
    img.logos4 { width: 400px; }}
@media (max-width: 600px) {
    img.logos4 { width: 320px; }}

.logos4 {
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1280px) {
    img.logos { width: 400px; }
    img.logos2 { width: 400px; }}
@media (max-width: 800px) {
    img.logos { width: 250px; 
                margin-left: 0em;
                padding-bottom: 2em;}
    img.logos2 { width: 250px; }}
@media (max-width: 380px) {
    img.logos { width: 200px; }
    img.logo2 { width: 200px; }
}


img.icon {
    max-width: 100%;
    height: auto;
    align-items: center;
    Justify-items: center;
}
@media (max-width: 960px) {
    img.icon { max-height: 12em; }}
@media (max-width: 600px) {
    img.icon { max-height: 9em; }}


img.icon3 {
    width: 8em;
    max-width: 100%;
    height: auto;
}

img.logos3 {
    max-width: 100%;
    height: auto;
    width: 25em;
    padding-top: 10em;
    padding-bottom: 10em;
}
@media (max-width: 960px) {
    img.logos3 { padding-top: 0; }
    img.logos3 { padding-bottom: 0;}}

img.strategy {
    width: 13em;
    max-width: 100%;
    height: auto;
    position: relative;
    right: 3em;
}
@media (max-width: 600px) {
    img.strategy { right: 2em;}}

img.program {
    width: 10em;
    max-width: 100%;
    height: auto;
    justify-self: center;
    padding-bottom: 0;
}
@media (max-width: 600px) {
    img.program { width: 8em;}}
@media (max-width: 380px) {
    img.program { width: 4em;}}

img.work {
    width: 10em;
    max-width: 100%;
    height: auto;
    justify-self: center;
    padding-bottom: 5%;
    padding-right: 10%;
}
@media (max-width: 600px) {
    img.work { width: 6em;}
    img.work { padding-top: 18%;}}

img.nak {
    width: 14em;
    max-width: 100%;
    margin-top: 3em;
    padding-bottom: 0;
}
@media (max-width: 800px) {
    img.nak { display: none; }}

img.nak2 {
    width: 10em;
    max-width: 100%;
    margin-top: 3em;
    padding-bottom: 0;
}
@media (max-width: 1100px) {
    img.nak2 { width: 8em; }}
@media (max-width: 800px) {
    img.nak2 { display: none; }}

img.nakalt {
    width: 10em;
    max-width: 100%;
    margin-top: 5%;
    padding-bottom: 0;
}
@media (min-width: 801px) {
    img.nakalt { display: none; }}
@media (max-width: 800px) {
    img.nakalt { display: block; }}
@media (max-width: 600px) {
    img.nakalt { width: 8em;; }}


img.nakalt2 {
    width: 7em;
    max-width: 100%;
    margin-top: 5%;
    padding-bottom: 0;
}
@media (min-width: 801px) {
    img.nakalt2 { display: none; }}
@media (max-width: 800px) {
    img.nakalt2 { display: block; }}
@media (max-width: 600px) {
    img.nakalt2 { width: 6em; }}
@media (max-width: 480px) {
    img.nakalt2 { width: 5em; }}

img.capacity {
    width: 15em;
}

.logobox {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin-left: auto;
    padding-right: 5%;
    padding-left: 2%;
    background: white;
    object-fit: contain;
}
@media (max-width: 960px) {
    .logobox { margin-left: 0;}
}


.map {
    display: flex;
    object-fit: contain;
    flex: 2;
    margin-right: 25%;
}
@media (max-width: 960px) {
    .map { margin-right: 5%;}}
@media (max-width: 800px) {
    .map { padding-bottom: 15%}}


img.map {
    width: 150%;
    height: auto;
    object-fit: contain;
}
@media (max-width: 960px) {
    img.map { width: 100%;}}
    

    img.mouse {
        max-width: 40px
}
@media (max-width: 1440px) {
    img.mouse { width: 30px;}}
@media (max-width: 1280px) {
    img.mouse { max-width: 25px;}}
@media (max-width: 960px) {
    img.mouse { width: 15px;}}

.mouse {
    position: absolute;
    bottom: 2%;
    left: 8%;
}

.mouse2 {
    position: absolute;
    bottom: 2%;
    left: 0;
}

.blue {
    color:  var(--blue);
}
.white {
    color:  white;
}
.aquamarine {
    color:  var(--aquamarine);
}
.green {
    color: var(--green);
}
.lavender {
    color: var(--lavender);
}
.black {
    color: var(--dark);
}
.dark {
    color: var(--dark);
}
.indigo {
    color: var(--indigo);
}
.bold {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.italic {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
}

p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 128%;
    color: white;
}

.p2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 48px;
    margin-top: .5em;
    color: white;
}


.p3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 42px;
    line-height: 128%;
    color: white;
}

@media (max-width: 1720px) {
    p { font-size: 32px; }
    .p3 { font-size: 38px; }}
@media (max-width: 1580px) {
    p { font-size: 30px; }
    .p2 { font-size: 36px; }
    .p3 { font-size: 34px; }}
@media (max-width: 1280px) {
    p { font-size: 24px; }
    .p2 { font-size: 30px; }
    .p3 { font-size: 26px; }}
@media (max-width: 800px) {
    p { font-size: 18px; }
    .p2 { font-size: 24px; }
    .p3 { font-size: 22px; }}
@media (max-width: 500px) {
    p { font-size: 14px; }
    .p2 { font-size: 20px; }
    .p3 { font-size: 18px; }}
@media (max-width: 380px) {
    p { font-size: 12px; }
    .p2 { font-size: 14px; }
    .p3 { font-size: 13px; }}

h1 {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 600;
    font-size: 80px;
    line-height: 118%;
    color:  #00c7ae;
}

@media (max-width: 1580px) {
    h1 { font-size: 72px; }}
@media (max-width: 1280px) {
    h1 { font-size: 60px; }}
@media (max-width: 800px) {
    h1 { font-size: 48px; }}
@media (max-width: 500px) {
    h1 { font-size: 36px; }}
@media (max-width: 380px) {
    h1 { font-size: 28px; }}

h2 {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 600;
    font-size: 60px;
    line-height: 118%;
    color:  #00c7ae;
}
@media (max-width: 1720px) {
    h2 { font-size: 54px; }}
@media (max-width: 1580px) {
    h2 { font-size: 48px; }}
@media (max-width: 1440px) {
    h2 { font-size: 44px; }}
@media (max-width: 1280px) {
    h2 { font-size: 40px; }}
@media (max-width: 1120px) {
    h2 { font-size: 36px; }}
@media (max-width: 960px) {
    h2 { font-size: 32px; }}
@media (max-width: 800px) {
    h2 { font-size: 30px; }}
@media (max-width: 600px) {
    h2 { font-size: 24px; }}
@media (max-width: 480px) {
    h2 { font-size: 22px; }}
@media (max-width: 380px) {
    h2 { font-size: 20px; }}
@media (max-width: 320px) {
    h2 { font-size: 18px; }}

h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 96px;
    line-height: 118%;
    color:  white;
}
@media (max-width: 1580px) {
    h3 { font-size: 88px; }}
@media (max-width: 1280px) {
    h3 { font-size: 78px; }}
@media (max-width: 1000px) {
    h3 { font-size: 66px; }}
@media (max-width: 800px) {
    h3 { font-size: 58px; }}
@media (max-width: 640px) {
    h3 { font-size: 48px; }} 
@media (max-width: 500px) {
    h3 { font-size: 38px; }} 
@media (max-width: 380px) {
    h3 { font-size: 28px; }}

h4 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 120%;
    color:  white;
}
@media (max-width: 1580px) {
    h4 { font-size: 52px; }}
@media (max-width: 1440px) {
    h4 { font-size: 44px; }}
@media (max-width: 1280px) {
    h4 { font-size: 40px; }}
@media (max-width: 800px) {
    h4 { font-size: 36px; }}
@media (max-width: 500px) {
    h4 { font-size: 28px; }}
@media (max-width: 380px) {
    h4 { font-size: 22px; }}
@media (max-width: 380px) {
    h4 { font-size: 20px; }}

h5 {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 600;
    font-size: 38px;
}
@media (max-width: 1580px) {
    h5 { font-size: 32px; }}
@media (max-width: 1440px) {
    h5 { font-size: 28px; }}
@media (max-width: 1280px) {
    h5 { font-size: 24px; }}
@media (max-width: 960px) {
    h5 { font-size: 20px; }}
@media (max-width: 800px) {
    h5 { font-size: 18px; }}
@media (max-width: 600px) {
    h5 { font-size: 16px; }}
@media (max-width: 380px) {
    h5 { font-size: 15px; }}
@media (max-width: 320px) {
    h5 { font-size: 14px; }}

.small {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 140%;
}
@media (max-width: 1720px) {
    .small { font-size: 28px; }}
@media (max-width: 1580px) {
    .small { font-size: 24px; }}
@media (max-width: 1280px) {
    .small { font-size: 20px; }}
@media (max-width: 960px) {
    .small { font-size: 18px; }}
@media (max-width: 800px) {
    .small { font-size: 16px; }}
@media (max-width: 500px) {
    .small { font-size: 13px; }}
@media (max-width: 380px) {
    .small { font-size: 10px; }}
@media (max-width: 320px) {
    .small { font-size: 9px; }}

.smallbold {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 140%;
}
@media (max-width: 1720px) {
    .smallbold { font-size: 28px; }}
@media (max-width: 1580px) {
    .smallbold { font-size: 24px; }}
@media (max-width: 1280px) {
    .smallbold { font-size: 20px; }}
@media (max-width: 960px) {
    .smallbold { font-size: 18px; }}
@media (max-width: 800px) {
    .smallbold { font-size: 16px; }}
@media (max-width: 500px) {
    .smallbold { font-size: 13px; }}
@media (max-width: 380px) {
    .smallbold { font-size: 10px; }}
@media (max-width: 320px) {
    .smallbold { font-size: 9px; }}


.small2 {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 600;
    font-size: 30px;

}
@media (max-width: 1580px) {
    .small2 { font-size: 24px; }}
@media (max-width: 1280px) {
    .small2 { font-size: 20px; }}
@media (max-width: 800px) {
    .small2 { font-size: 16px; }}
@media (max-width: 500px) {
    .small2 { font-size: 13px; }}
@media (max-width: 380px) {
    .small2 { font-size: 10px; }}

.mini {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 28px;
}
@media (max-width: 1580px) {
    .mini { font-size: 22px; }}
@media (max-width: 1440px) {
    .mini { font-size: 20px; }}
@media (max-width: 1280px) {
    .mini { font-size: 18px; }}
@media (max-width: 960px) {
    .mini { font-size: 16px; }}
@media (max-width: 800px) {
    .mini { font-size: 14px; }}
@media (max-width: 500px) {
    .mini { font-size: 12px; }}
@media (max-width: 380px) {
    .mini { font-size: 11px; }}
@media (max-width: 320px) {
    .mini { font-size: 10px; }}
@media (max-width: 280px) {
    .mini { font-size: 9px; }}

.mini2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
}
@media (max-width: 1580px) {
    .mini2 { font-size: 20px; }}
@media (max-width: 1440px) {
    .mini2 { font-size: 18px; }}
@media (max-width: 1280px) {
    .mini2 { font-size: 16px; }}
@media (max-width: 800px) {
    .mini2 { font-size: 13px; }}
@media (max-width: 500px) {
    .mini2 { font-size: 12px; }}
@media (max-width: 380px) {
    .mini2 { font-size: 11px; }}
@media (max-width: 320px) {
    .mini2 { font-size: 10px; }}
@media (max-width: 280px) {
    .mini2 { font-size: 9px; }}


.special {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 120%;
    color:  #4835ba;
}
@media (max-width: 1580px) {
    .special { font-size: 22px; }}
@media (max-width: 1440px) {
    .special { font-size: 20px; }}
@media (max-width: 1280px) {
    .special { font-size: 18px; }}
@media (max-width: 960px) {
    .special { font-size: 16px; }}
@media (max-width: 800px) {
    .special { font-size: 14px; }}
@media (max-width: 500px) {
    .special { font-size: 12px; }}
@media (max-width: 380px) {
    .special { font-size: 11px; }}
@media (max-width: 320px) {
    .special { font-size: 10px; }}
@media (max-width: 280px) {
    .special { font-size: 9px; }}

ul {
    font-family: 'Poppins', sans-serif;
    width: 80%;
    color: white;
}


.small-ul {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 140%;
    color: white;
}
@media (max-width: 1720px) {
    .small-ul { font-size: 28px; }}
@media (max-width: 1580px) {
    .small-ul { font-size: 24px; }}
@media (max-width: 1280px) {
    .small-ul { font-size: 20px; }}
@media (max-width: 960px) {
    .small-ul { font-size: 18px; }}
@media (max-width: 800px) {
    .small-ul { font-size: 16px; }}
@media (max-width: 500px) {
    .small-ul { font-size: 13px; }}
@media (max-width: 380px) {
    .small-ul { font-size: 10px; }}
@media (max-width: 320px) {
    .small-ul { font-size: 9px; }}

li {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 36px;
    color: white;
    margin-left: 3%;
}
@media (max-width: 1720px) {
    li { font-size: 32px; }}
@media (max-width: 1580px) {
    li { font-size: 30px; }}
@media (max-width: 1280px) {
    li { font-size: 24px; }}
@media (max-width: 800px) {
    li { font-size: 18px; }}
@media (max-width: 500px) {
    li { font-size: 14px; }}
@media (max-width: 380px) {
    li { font-size: 12px; }}


li::marker {
    color: #00c7ae;
}

a:link {
    color: #4835ba;
}
a:visited {
    color: #4835ba;
}
a:hover {
    color: #00c7ae;
}
a:active {
    color: #4835ba;
}

.link2 a:link {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: white;
}
.link2 a:hover {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: #4835ba;
}
.link2 a:active {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: white
}
.link2 a:visited {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    color: white;
}

.link3 a:link {
    font-family: "Barlow Semi Condensed", sans-serif;
    color: #54ffbc;
}
.link3 a:hover {
    font-family: "Barlow Semi Condensed", sans-serif;
    color: white;
}
.link3 a:active {
    font-family: "Barlow Semi Condensed", sans-serif;
    color: #54ffbc;
}
.link3 a:visited {
    font-family: "Barlow Semi Condensed", sans-serif;
    color: #54ffbc;
}


.sec-8 .animate {
    transform: translateY( 100%);
    opacity: 1;
    transition: 1s;
}
@media (max-width: 600px) {
    .sec-8 .animate { transform: translateY(90%); }}

.sec-8.show-animate .animate {
    transform: translateY( 0em);
    transition-delay: calc(.5s * var(--i));
}
@media (max-width: 600px) {
    .sec-8.show-animate .animate { transform: translateY(0em); }}


section .animate {
    opacity: 0;
    /* filter: blur(5px); */
    transition: 1s;
}

section.show-animate .animate {
    opacity: 1;
    filter: blur(0);
    transition-delay: calc(1s * var(--i));
}  

.sec-10 .animate {
    transform: translateY( 100%);
    opacity: 1;
    transition: 1s;
}
@media (max-width: 600px) {
    .sec-10.show-animate .animate { transform: translateY( 50%); }}

.sec-10.show-animate .animate {
    transform: translateY( 5em);
    opacity: 1;
    transition-delay: calc(.5s * var(--i));
}
@media (max-width: 600px) {
    .sec-10.show-animate .animate { transform: translateY( 0em); }}


.sec-2 .animate {
    transform: translateX(200%);
}

.sec-2.show-animate .animate {
    transform: translateX(0);
}

.sec-3 .animate .images img {
    opacity: 0;
    transition: 2s;
    transition-delay: calc(2s * var(--i));
}

.sec-3.show-animate .animate .images img {
    opacity: 1;
}