@import "./constants.css";

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

html {
    font-family: Open-Sans, sans-serif;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

body {
    height:100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-position: center;
    background-size: cover;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

ul {
    list-style: none;
}

.cloud-bg{
    background-color: #f0f8ffe6;
    mix-blend-mode: screen;
    z-index: 1;
    flex: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.rays-container{
    opacity: 0.75;
    transform: none;
    background: radial-gradient(100% 100% at 0% 0%, #d1d1d1 0%, #f6fbff 100%);
    opacity: .75;
    pointer-events: none;
    will-change: auto;
    z-index: 1;
    flex: none;
    gap: 10px;
    height: 200vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    -webkit-mask: radial-gradient(125% 100% at 0 0, #000 0%, #00000039 88.2883%, #0000 100%);
    mask: radial-gradient(125% 100% at 0 0, #000 0%, #00000039 88.2883%, #0000 100%);
}

.rays-container div:nth-child(1){
    transform: skewX(45deg);
    background: linear-gradient(#ffffff80 0%, #fff 83.9344%, #fff0 100%);
    flex: none;
    width: 591px;
    max-width: 960px;
    height: 1269px;
    position: absolute;
    top: -209px;
    left: calc(33.5833% - 295.5px);
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, #0000 0%, #000 20.0362%, #0000 36.175%, #000 55.4054%, #00000021 67.1171%, #000 78.2306%, #0000 97.2973%);
    mask: linear-gradient(90deg, #0000 0%, #000 20.0362%, #0000 36.175%, #000 55.4054%, #00000021 67.1171%, #000 78.2306%, #0000 97.2973%);
}

.rays-container div:nth-child(2){ 
    transform: skewX(45deg);
    background: linear-gradient(#ffffff80 0%, #fff 83.9344%, #fff0 100%);
    flex: none;
    width: 582px;
    max-width: 960px;
    height: 1269px;
    position: absolute;
    top: -209px;
    left: calc(-1.5% - 291px);
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, #0000 11.3985%, #000 25.5578%, #0000008c 41.6966%, #00000021 67.1171%, #000 78.2306%, #0000 97.2973%);
    mask: linear-gradient(90deg, #0000 11.3985%, #000 25.5578%, #0000008c 41.6966%, #00000021 67.1171%, #000 78.2306%, #0000 97.2973%);
}

.rays-container div:nth-child(3){
    transform: skewX(45deg);
    background: linear-gradient(#ffffff80 0%, #fff 83.9344%, #fff0 100%);
    flex: none;
    width: 441px;
    max-width: 960px;
    height: 1269px;
    position: absolute;
    top: -209px;
    left: calc(33.6667% - 220.5px);
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, #0000 9.81489%, #000 20.0362%, #0000008c 28.5878%, #0000006c 40.0901%, #000 48.6487%, #0004 54.5045%, #00000021 78.579%, #000 88.554%, #0000 97.2973%);
    mask: linear-gradient(90deg, #0000 9.81489%, #000 20.0362%, #0000008c 28.5878%, #0000006c 40.0901%, #000 48.6487%, #0004 54.5045%, #00000021 78.579%, #000 88.554%, #0000 97.2973%);
}

.rays-container div:nth-child(4){
    transform: skewX(45deg);
    opacity: .6;
    background: linear-gradient(#ffffff80 0%, #fff 83.9344%, #fff0 100%);
    flex: none;
    width: 683px;
    max-width: 960px;
    height: 1269px;
    position: absolute;
    top: -209px;
    left: calc(50.0833% - 341.5px);
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, #0000 0%, #000 17.6591%, #0000008c 26.6417%, #000 35.2302%, #0000 47.6985%, #00000021 69.1776%, #000 79.1456%, #0000 97.2973%);
    mask: linear-gradient(90deg, #0000 0%, #000 17.6591%, #0000008c 26.6417%, #000 35.2302%, #0000 47.6985%, #00000021 69.1776%, #000 79.1456%, #0000 97.2973%);
}

.rays-container div:nth-child(5){
    transform: skewX(45deg);
    opacity: .75;
    background: linear-gradient(#ffffff80 0%, #fff 83.9344%, #fff0 100%);
    flex: none;
    width: 426px;
    max-width: 960px;
    height: 1269px;
    position: absolute;
    top: -209px;
    left: calc(49.0833% - 213px);
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, #0000 0%, #000 20.0362%, #0000008c 27.5778%, #000 42.3423%, #0000 48.6047%, #00000021 67.1171%, #000 74.9525% 82.4324%, #00000078 88.6719%, #0000 97.2973%);
    mask: linear-gradient(90deg, #0000 0%, #000 20.0362%, #0000008c 27.5778%, #000 42.3423%, #0000 48.6047%, #00000021 67.1171%, #000 74.9525% 82.4324%, #00000078 88.6719%, #0000 97.2973%);
}

.window-blur{
    position: absolute;
    pointer-events: none;
    z-index: 9;
    flex: none;
    height: 100px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.window-blur div:nth-child(1){
    opacity: 1;
    position: absolute;
    inset: 0px;
    z-index: 1;
    mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%);
    border-radius: 0px;
    pointer-events: none;
    backdrop-filter: blur(0.0546875px);
    will-change: auto;
}

.window-blur div:nth-child(2){
    opacity: 1;
    position: absolute;
    inset: 0px;
    z-index: 2;
    mask-image: linear-gradient(rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%);
    border-radius: 0px;
    pointer-events: none;
    backdrop-filter: blur(0.109375px);
    will-change: auto;
}

.window-blur div:nth-child(3){
    opacity: 1;
    position: absolute;
    inset: 0px;
    z-index: 3;
    mask-image: linear-gradient(rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%);
    border-radius: 0px;
    pointer-events: none;
    backdrop-filter: blur(0.21875px);
    will-change: auto;
}

.window-blur div:nth-child(4){
    opacity: 1;
    position: absolute;
    inset: 0px;
    z-index: 4;
    mask-image: linear-gradient(rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%);
    border-radius: 0px;
    pointer-events: none;
    backdrop-filter: blur(0.4375px);
    will-change: auto;
}

.window-blur div:nth-child(5){
    opacity: 1;
    position: absolute;
    inset: 0px;
    z-index: 5;
    mask-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%);
    border-radius: 0px;
    pointer-events: none;
    backdrop-filter: blur(0.875px);
    will-change: auto;
}

.window-blur div:nth-child(6){
    opacity: 1;
    position: absolute;
    inset: 0px;
    z-index: 6;
    mask-image: linear-gradient(rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
    border-radius: 0px;
    pointer-events: none;
    backdrop-filter: blur(1.75px);
    will-change: auto;
}

.window-blur div:nth-child(7){
    opacity: 1;
    position: absolute;
    inset: 0px;
    z-index: 7;
    mask-image: linear-gradient(rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
    border-radius: 0px;
    pointer-events: none;
    backdrop-filter: blur(3.5px);
    will-change: auto;
}

.window-blur div:nth-child(8){
    opacity: 1;
    position: absolute;
    inset: 0px;
    z-index: 8;
    mask-image: linear-gradient(rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
    border-radius: 0px;
    pointer-events: none;
    backdrop-filter: blur(7px);
    will-change: auto;
}

.navbar {
    display: flex;
    flex-direction: row;
    font-size: 18px;
    z-index: 95;
    padding: 10px;
    width: calc(100vw - var(--margin));
    margin-top: 2vh;
    margin-left: calc(var(--margin)/2);
    margin-right: calc(var(--margin)/2);
    height: auto;
    min-height: 48px;
    position: fixed;
    background-color: rgba(246, 251, 255, 0.975);
    border-radius: 12px;
    box-shadow: rgba(76, 80, 133, 0.2) 0px 10px 17px -5px;
    transition: all 0.5s; 
    overflow: hidden;
}
  
.navbar.activated {
    border-radius: 18px;
    height: auto;
    overflow: hidden;
    transition: all 0.5s;
}

.navbar-toggle {
    background: none;
    border: none;
    position: absolute;
    display: block;
    right: 1vw;
    width: 2em;
    cursor: pointer;
    margin-right: 2vw;
    color: var(--colorPrimaryDark);
    font-size: 1em;
    transition: margin 600ms;
}

.navbar-toggle .bar {
    display: block;
    width: 0em;
    height: 0.1em;
    margin: 0.3em 0;
    border-right: 1.4em solid var(--colorPrimaryDark);
    box-sizing: border-box;
    transition-property: transform, margin, border-right-color, box-shadow;
    transition-duration: 600ms;
}

.navbar-toggle .bar:nth-of-type(1) {
    transition: opacity 300ms;
}

.navbar-toggle .bar:nth-of-type(2) {
    transform: rotate(-180deg);
}

.pushed .bar:nth-of-type(1) {
    opacity: 0;
}

.pushed .bar:nth-of-type(2) {
    transform: rotate(-137deg) translateY(0em);
}

.pushed .bar:nth-of-type(3) {
    margin-left: 0.5em;
    transform: rotate(-42deg) translateY(-0.8em);
}
  
.main-nav {
    list-style-type: none;
    display: flex;
    height: 0px;
    overflow: hidden;
}

.nav-links,
.logo {
    text-decoration: none;
    color: var(--colorPrimaryDark);
}

.main-nav li {
    text-align: left;
    margin: 15px auto;
}

#download{    
    background: linear-gradient(127deg, var(--colorPrimaryDark, rgb(14, 28, 41)) -68%, var(--colorPrimaryDarkFaded, rgb(50, 61, 104)) 100%);
    border-radius: 2.2em;
    box-shadow: rgb(184, 193, 230) 0px 1px 2px 0px inset, rgba(46, 64, 128, 0.35) 0px 0.706592px 0.706592px -0.583333px, rgba(46, 64, 128, 0.34) 0px 1.80656px 1.80656px -1.16667px, rgba(46, 64, 128, 0.33) 0px 3.62176px 3.62176px -1.75px, rgba(46, 64, 128, 0.3) 0px 6.8656px 6.8656px -2.33333px, rgba(46, 64, 128, 0.26) 0px 13.6468px 13.6468px -2.91667px, rgba(46, 64, 128, 0.15) 0px 30px 30px -3.5px;
    color: var(--colorWhite);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 2.7em;
    position: relative;
    top: -0.65em;
    margin-right: 3.5vw;
} 
    
#download:hover{
    background-color: transparent;
    box-shadow: var(--colorPrimaryDarkFaded) 2px 2px 10px;  
}

.logo {
    display: inline-block;
    font-size: 1.8em;
    margin-top: 0.1em;
    line-height: 0.8em;
    margin-left: 3vw;
    margin-right: 1em;
    font-family: Sejagad; 
    color: var(--colorPrimaryDark);
    font-weight: 400;
    
}

.logo img {
    height: 31px;
    width: auto;
}

.main-nav.active {
    display: block;
    height: auto;
    padding-top: 25px;
    transition: all 0.5s;
}
  

.nav-links{
    font-size: 1.15em;
    font-family: Open-Sans;
    color: rgba(0, 0, 0, 0.85);
}

.nav-links.scroll-active{
    color: var(--colorWhite);
}

section{
    padding-top: var(--buffer);
    position: relative;
    display: flex;
}

.verified-container{
    background-color: var(--colorWhite);
    height: 100vh;
}

.resetPass-container{
    background-color: var(--colorWhite);
    height: 100vh;
}

.resetPass-container .verified{
    display: none;
}

.slider-container{
    margin: 20px var(--margin) 70px var(--margin);
    width: 100vw; 
    z-index: 2;
}

.hero-container {
    z-index: 3;
    flex-flow: column;
    flex: none;
    place-content: center flex-start;
    align-items: center;
    gap: 30px;
    width: calc(100% - var(--margin)*2);
    margin: 0 var(--margin);
    height: min-content;
    padding: 0;
    display: flex;
    position: relative;
    overflow: visible;
}

.hero-container .heading{
    z-index: 3;
    flex-flow: column;
    flex: none;
    place-content: center flex-start;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1000px;
    height: min-content;
    padding: 0;
    display: flex;
    position: relative;
    overflow: visible;
}

.hero-container .heading .logo-cont{
    background-color: var(--colorWhite, #f6fbff);
    z-index: 2;
    border-radius: 16px;
    flex-flow: row;
    flex: none;
    place-content: center;
    align-items: center;
    gap: 10px;
    width: min-content;
    height: min-content;
    padding: 10px;
    display: flex;
    position: relative;
    overflow: visible;
    box-shadow: inset 0 -3px 0 2px #8dc2eb40, 0 .706592px .706592px -.583333px #10314d36, 0 1.80656px 1.80656px -1.16667px #10314d33, 0 3.62176px 3.62176px -1.75px #10314d33, 0 6.8656px 6.8656px -2.33333px #10314d2e, 0 13.6468px 13.6468px -2.91667px #10314d29, 0 30px 30px -3.5px #10314d17;
}

.hero-container .heading .logo-cont .img-framer{
    background-color: var(--colorPrimaryDark, #0e1c29);
    border-radius: 10px;
    flex-flow: row;
    flex: none;
    place-content: center;
    align-items: center;
    gap: 10px;
    width: min-content;
    height: min-content;
    padding: 16px;
    display: flex;
    position: relative;
    overflow: visible;
    box-shadow: 0 .706592px .706592px -.666667px #10314d3d, 0 1.80656px 1.80656px -1.33333px #10314d3b, 0 3.62176px 3.62176px -2px #10314d38, 0 6.8656px 6.8656px -2.66667px #10314d33, 0 13.6468px 13.6468px -3.33333px #10314d29, 0 30px 30px -4px #10314d0f;
}

.hero-container .heading .logo-cont .img-framer img{
    display: block;
    width: 3vw;
    height: 3vw;
    border-radius: inherit;
    object-position: center;
    object-fit: contain;
}

.hero-container .heading .text-cont{
    outline: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
    transform: none;
    white-space: pre-wrap;
    z-index: 2;
    flex: none;
    width: 100%;
    height: auto;
    position: relative;
    gap: 24px;
    font-family: "Open-Sans", sans-serif;
}

.hero-container .heading .text-cont .head-cont{
    outline: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    flex: none;
}

.hero-container .heading .text-cont .head-cont h1{
    text-align: center;
    font-size: calc(var(--hf2) * 1.35);
    font-weight: 500;
    
}
.hero-container .heading .text-cont .head-cont h2 {
    text-align: center;
    font-size: calc(var(--hf2) * 1.35);
    font-weight: 500;
}

.hero-container .heading .text-cont p{
    text-align: center;
    font-size: var(--hfbody); 
}

.hero-container .img-cont {
    opacity: 1;
    transform: none;
    aspect-ratio: 1.16667;
    height: 65vw;
    will-change: auto;
    border-radius: 10px;
    flex-flow: column;
    flex: none;
    place-content: center;
    align-items: center;
    gap: 32px;
    width: 100%;
    padding: 0;
    display: flex;
    position: relative;
    overflow: visible;
}

.hero-container .img-cont div{
    position: absolute;
    width: 100% !important;
    border-radius: inherit;
    top: 0;
    right: 0;
    bottom: 0;
    left: 1vw;
}

.hero-container .img-cont div img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    object-position: left top;
    object-fit: fill;
}

.home-container{
    background: var(--colorLightestGrey);
    color: var(--colorPrimaryDark);
    width: 100%; 
    flex-direction: column;
    background-image: url("../images/image.webp");
    background-repeat: repeat;
    background-position: left top;
    border: 0;
    background-size: 128px auto;
}

.blurbg {
    background-image: url("../images/image.webp");
    background-repeat: repeat;
    background-position: left top;
    border: 0;
    background-size: 128px auto;
    z-index: 0 !important;
}

.feature-container{
    background-color: var(--colorLightestGrey);
    z-index: 2;
}

#loading-container{
    display: flex;
    position: fixed;
    width: 100vw; 
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: var(--colorWhite);
    padding-top: 0px;
}

#loading-container .pulsating {  
    z-index: 98;
    margin: auto;
    height: 70px;
    background-color: #1100efac;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 999px;
    font-size: 18px;
    cursor: pointer;
    animation: pulse 2.5s infinite ease-in-out;
    width: 200px;
}

#loading-container .pulsating.grow {
    height: 0px;
    width: 0px;
    padding: 0px;
    animation: expand 0.7s ease-out;
}

#loading-container .text-cont{
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 99;
}

#loading-container .text-cont h2{ 
    font-family: "Segoe UI";
    font-style: italic;
    font-size: 50px;
    line-height: 50px;
    font-weight: bold;
    width: fit-content;
    height: auto;
    margin: 0 auto 9px;
    color: var(--colorWhite);
}

#loading-container h2.change{ 
    color: #1100efb9;
    transition: color 0.3s;
    transition-delay: 0.7s;
}
  
#loading-container #progressBar-Cont {
    height: 0.25rem;
    position: absolute;
    width: 100%;
    background-color: var(--colorPrimaryDark);
}
  
#progressBar-Cont #progressBar {
    width: 1%;
    height: 100%;
    background-color: var(--colorWhite);
}

.fade {
    animation: fadeOut 1.6s;
}

.cb-container{
    background-image: linear-gradient(#FFF 50%,var(--colorLightestGrey) 50%);
    padding-bottom: 4rem;
    padding-top: 4rem;
}

.cb {
    margin-left: var(--margin);
    margin-right: var(--margin);
    padding: calc((--margin)*2) 0;
    max-width: 100%;
    width: 100%;
    border-radius: 1rem;
    background-color: var(--colorPrimaryDarkish);
    display: flex;
    flex-direction: row-reverse;
    height: fit-content;
}

.cb-1 {
    padding-bottom: 2rem;
    padding-top: 2rem;
    padding-left: 8%;
    padding-right: 8%;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.cb-1 img{
    width: 100%;
    height: auto;
    object-fit: contain;
}

.cb-2 {
    font-family: "Open-Sans";
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 5%;
    padding-right: 5%;
    align-items: center;
}

.cb-2 h3{
    color: var(--colorAccent);
    font-size: var(--hf3);
    text-align: center;
    font-weight: 500;
}

.typewriter{
    position: relative;
    display: flex;
    margin: 0 auto;
}

.info{
    z-index: 2;
    width: 100%; 
    flex-direction: column;
    color: var(--colorPrimaryDark);
}

.info-container{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.info-text {
    font-family: "Open-Sans";
    margin-top: 20px;
    text-align: center;
    font-weight: 300;
}

.info button{ 
    outline: none;
    border: none;  
    min-height: 45px;
    box-shadow: rgb(184, 193, 230) 0px 1px 2px 0px inset, rgba(46, 64, 128, 0.35) 0px 0.706592px 0.706592px -0.583333px, rgba(46, 64, 128, 0.34) 0px 1.80656px 1.80656px -1.16667px, rgba(46, 64, 128, 0.33) 0px 3.62176px 3.62176px -1.75px, rgba(46, 64, 128, 0.3) 0px 6.8656px 6.8656px -2.33333px, rgba(46, 64, 128, 0.26) 0px 13.6468px 13.6468px -2.91667px, rgba(46, 64, 128, 0.15) 0px 30px 30px -3.5px;
    color: var(--colorWhite);
    font-size: var(--hfbody);
    font-weight: 400;
    background: linear-gradient(127deg, var(--colorPrimaryDark, rgb(14, 28, 41)) -68%, var(--colorPrimaryDarkFaded, rgb(50, 61, 104)) 100%);
    border-radius: 2.2em;
    transition: all 0.65s ease-in-out;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    padding: 0.9rem 1.6rem;
    width: fit-content;
    letter-spacing: -.01em;
    text-decoration: none;
    font-family: "Open-Sans";
    margin-top: 2em;
}

.info button:hover{
    box-shadow: #E3FAF6 2px 2px 10px;
}

.info-img-cont .hero-cont{
    position: relative;
}

.info-img-cont .hero-cont .img-card{
    z-index: 10;
    border-radius: 20px;
    -webkit-box-shadow: rgba(16, 49, 77, 0.05) 0px 0.706592px 0.706592px -0.291667px, rgba(16, 49, 77, 0.06) 0px 1.80656px 1.80656px -0.583333px, rgba(16, 49, 77, 0.06) 0px 3.62176px 3.62176px -0.875px, rgba(16, 49, 77, 0.06) 0px 6.8656px 6.8656px -1.16667px, rgba(16, 49, 77, 0.07) 0px 13.6468px 13.6468px -1.45833px, rgba(16, 49, 77, 0.1) 0px 30px 30px -1.75px;
    box-shadow: rgba(16, 49, 77, 0.05) 0px 0.706592px 0.706592px -0.291667px, rgba(16, 49, 77, 0.06) 0px 1.80656px 1.80656px -0.583333px, rgba(16, 49, 77, 0.06) 0px 3.62176px 3.62176px -0.875px, rgba(16, 49, 77, 0.06) 0px 6.8656px 6.8656px -1.16667px, rgba(16, 49, 77, 0.07) 0px 13.6468px 13.6468px -1.45833px, rgba(16, 49, 77, 0.1) 0px 30px 30px -1.75px;
    position: absolute;
    max-width: 210px;
    bottom: -70px;
    left: -20px;
}

.info-img-cont .hero-cont .img-main{
    position: relative;
    z-index: 9;
    opacity: 1;
    transform: translateZ(0);
    transition-duration: 0.8s;
    transition-property: opacity, transform;
    border-radius: 1em !important;
    max-width: 85%;
    margin-left: 15%;
    -webkit-box-shadow: rgba(16, 49, 77, 0.05) 0px 0.706592px 0.706592px -0.291667px, rgba(16, 49, 77, 0.06) 0px 1.80656px 1.80656px -0.583333px, rgba(16, 49, 77, 0.06) 0px 3.62176px 3.62176px -0.875px, rgba(16, 49, 77, 0.06) 0px 6.8656px 6.8656px -1.16667px, rgba(16, 49, 77, 0.07) 0px 13.6468px 13.6468px -1.45833px, rgba(16, 49, 77, 0.1) 0px 30px 30px -1.75px;
    box-shadow: rgba(16, 49, 77, 0.05) 0px 0.706592px 0.706592px -0.291667px, rgba(16, 49, 77, 0.06) 0px 1.80656px 1.80656px -0.583333px, rgba(16, 49, 77, 0.06) 0px 3.62176px 3.62176px -0.875px, rgba(16, 49, 77, 0.06) 0px 6.8656px 6.8656px -1.16667px, rgba(16, 49, 77, 0.07) 0px 13.6468px 13.6468px -1.45833px, rgba(16, 49, 77, 0.1) 0px 30px 30px -1.75px;
    height: auto;
}

.flex {
    display: flex;
}

.margin{    
    margin: 20px var(--margin) 70px var(--margin)
}

.mar-pad{    
    padding: 20px var(--margin) 70px var(--margin)
}

.zero-mar{    
    justify-content: center;
    margin: 0 var(--margin);
    flex-wrap: wrap;
    gap: 1em;
    z-index: 5;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap{
    flex-wrap: wrap;
}
.gap-y-0 {
    row-gap: 0;
}

.gap-y-xl {
    row-gap: var(--space-xl);
}

.gap-y-xl {
    row-gap: var(--space-xl);
}

.gap-y-x2 {
    row-gap: var(--space-2xl);
}

.gap-x-gutter {
    column-gap: var(--pad);
}

.gap-x-gutterX2 {
    column-gap: var(--space-2xl);
}

.gap-x-pad {
    padding-left: var(--pad);
    padding-right: var(--pad);
}

.basis-full{
    flex-basis: 100%;
}

.typewriter{
    min-height: 60px;
}

.typewriter h2{
    text-transform: uppercase;
}

.typewriter .blinker{
    height: 45px;
    width: 3px;
    margin-left: 7px;
    animation: blink 1s infinite;
    background-color: var(--colorGreyish);
}

.extra-dark {
    background-color: var(--colorPrimaryDark);
    color: var(--colorWhite);
}

.main-fader {    
    background-image: linear-gradient(var(--colorPrimaryDark) 20%,var(--colorLightestGrey) 95%);
    color: var(--colorWhite);
}

.accordion {
    display: flex;
    justify-content: space-between;
    background-color: transparent;
    cursor: pointer;
    padding: 2em 2em 0.5em 2em;
    font-family: Open-Sans;
    font-weight: bold;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: var(--hf3);
    transition: 0.4s;
}

.accordion div{
    display: block;
    height: fit-content;
    margin: auto 0;
    font-weight: 400;
    max-width: 80%;
}

.accordion i{
    display: block;
    margin: auto 0;
    padding-left: 14px;
    font-weight: 900;
    height: fit-content;
    -webkit-transition: transform 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out;
    -ms-transition: transform 0.3s ease-out;
    -o-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}
  
.accordion:hover, .accordion:hover i:after {
    color: var(--colorDarkestGrey);
}

.accordion i:after {
    content: '\002B';
    color: var(--colorPrimaryDark);
    font-size: var(--hf4);
    font-weight: bolder;
    font-style: normal;
}

.accordion.active i:after {
    content: "\2212";
}
  
.extra-dark .accordion {
    color: var(--colorWhite);
}
  
.extra-dark .accordion:hover, .extra-dark .accordion:hover i:after {
    color: var(--colorGrey);
}

.extra-dark .accordion i:after {
    color: var(--colorWhite);
}

.panel {
    padding: 0em 2.8em;
    padding-right: 7em;
    max-height: 0;
    font-size: var(--hf5);
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel a {
    color: var(--colorPrimaryDark);
    font-weight: bold;
}

.panel a:hover {
    text-decoration: none;
}

.accordion-bar {
    margin: 2em 2em 0 2em;
    border-top: 2px solid var(--colorDarkerGrey);
}

.action-button {
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    color: var(--colorPrimaryDark);
    letter-spacing: -.01em;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--hf5);
    line-height: var(--hf5);    
    padding: 1rem 1.6rem;
    margin: 0 auto;
    border-color: var(--colorPrimaryDark);
    border-style: solid;
    border-width: 2px;
    border-radius: 2.2rem;
    overflow: hidden;
    max-width: 100%;
    display: inline-block;
    position: relative;
}

.action-button:hover {
    color: var(--colorDarkestGrey);
    border-color: var(--colorDarkestGrey);
}

.action-dark {
    color: var(--colorWhite);
    background-color: var(--colorPrimaryDark);
    border-color: var(--colorPrimaryDark);
}

.action-dark:hover {
    color: var(--colorWhite);
    background-color: var(--colorPrimaryDarkDim);
    border-color: var(--colorPrimaryDarkDim);
}

.prominent {    
    display: flex;
    flex-direction: column;
    margin: 0 var(--margin);
    z-index: 5;
    font-family: Open-Sans, sans-serif;
}

.prominent h1{ 
    text-align: center;
    font-size: calc(var(--hf2) * 1.3);
    margin-bottom: 0.5em;
    font-weight: 400;
}

.prominent .text{
    text-align: center;
    font-size: var(--hfbody);
}

.prominent .text-small{
    text-align: center;
    font-size: calc(var(--hfbody) * 0.8);
    margin-top: 1.4em;
}

.prominent .input-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 4rem;
    padding-right: 0.25rem;
    padding-left: 1.5rem;
    background-color: var(--colorWhite);
    border: 2px solid var(--colorPrimaryDark);
    border-radius: 9999px;
    margin-top: 1.8em;
}

.prominent .input-container input {
    width: 93%;
    height: 3.5rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
    font-size: var(--hfbody);
    border: none;
    color: var(--colorPrimaryDarkDim);
    background-color: transparent;
}

.prominent .input-container .but-cont {
    display: none;
}

.flex.zero-mar .highlight a{
    background: linear-gradient(127deg, var(--colorPrimaryDark, rgb(14, 28, 41)) -68%, var(--colorPrimaryDarkFaded, rgb(50, 61, 104)) 100%);
    border-radius: 2.2em;
    box-shadow: rgb(184, 193, 230) 0px 1px 2px 0px inset, rgba(46, 64, 128, 0.35) 0px 0.706592px 0.706592px -0.583333px, rgba(46, 64, 128, 0.34) 0px 1.80656px 1.80656px -1.16667px, rgba(46, 64, 128, 0.33) 0px 3.62176px 3.62176px -1.75px, rgba(46, 64, 128, 0.3) 0px 6.8656px 6.8656px -2.33333px, rgba(46, 64, 128, 0.26) 0px 13.6468px 13.6468px -2.91667px, rgba(46, 64, 128, 0.15) 0px 30px 30px -3.5px;
    color: var(--colorWhite);
    transition: all 0.65s ease-in-out;
    border: none;
    font-size: var(--hfbody);
    font-weight: 400;
    padding: 0.9rem 1.6rem;
}

.flex.zero-mar .highlight a:hover{
    box-shadow: var(--colorPrimaryDarkFaded) 2px 2px 10px;
}

.flex.zero-mar .light a {
    background: linear-gradient(125deg, var(--token-e4409358-08fe-4ba3-8dc3-7989b447f0b6, rgb(119, 75, 229)) -4%, var(--token-e4409358-08fe-4ba3-8dc3-7989b447f0b6, rgb(119, 75, 229)) 100%);
    border-radius: 2.2em;
    box-shadow: rgb(192, 176, 232) 0px 1px 2px 0px inset, rgba(99, 69, 173, 0.35) 0px 0.706592px 0.706592px -0.583333px, rgba(99, 69, 173, 0.34) 0px 1.80656px 1.80656px -1.16667px, rgba(99, 69, 173, 0.33) 0px 3.62176px 3.62176px -1.75px, rgba(99, 69, 173, 0.3) 0px 6.8656px 6.8656px -2.33333px, rgba(99, 69, 173, 0.26) 0px 13.6468px 13.6468px -2.91667px, rgba(99, 69, 173, 0.15) 0px 30px 30px -3.5px;
    opacity: 1;
    border: none;
    transition: all 0.65s ease-in-out;
    font-size: var(--hfbody);
    color: var(--colorWhite);
    font-weight: 400;
}

.flex.zero-mar .light a:hover {
    background-color: transparent;
    box-shadow: var(--colorPrimaryDarkFaded) 2px 2px 10px;

}

.mailing-reminder-container {
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(60deg,var(--colorAccent) 5%,var(--colorAccent) 31%,var(--colorWhite) 60%,transparent 95%),linear-gradient(300deg,var(--colorPrimary) 35%,transparent 70%);
}

.beige-bg {
    display: flex;
    flex-direction: column;
    background-color: #c8ad7f;
}

.bright-bg {
    display: flex;
    flex-direction: column;
    background-color: #10a5f5;
}

.footer.min{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--colorPrimaryDark);
    color: var(--colorWhite);
    padding: 1.1em var(--margin) 1.5em calc(var(--margin)*0.9);
}

.footer.min .term-cont{
    padding-top: 0;
    margin: auto 0;
}

.footer.min .stocko-footer-cont {
    width: 2rem;
    min-width: 2rem;
}

footer{
    display: flex;
    flex-direction: column;
    background-color: var(--colorPrimaryDark);
    color: var(--colorWhite);
    width: 100%;    
    font-family: Open-Sans;
    padding:40px calc(var(--logo-margin)*1.5) 1.5em calc(var(--logo-margin)*1.5);
    position: relative;
    text-align: start;
}

.footer{
    color: var(--colorWhite);
    width: 100%;
    position: absolute;
    bottom: 0px;
    font-family: Open-Sans;
    text-align: start;
    padding: 40px;
    padding-bottom: 1.5em;
}

.footer-extras{
    padding-top: 4rem;
    background-color: inherit;
    gap: 4rem;
}

.stocko-footer-cont {
    min-width: 7rem;
}

footer .stocko, .footer .stocko{
    width: 2.4rem;
    height: 2.7rem;
}

footer h1, .footer h1{
    width: 100%;
    margin-bottom:0.3em;
    font-family: Open-Sans;
}

footer h3, .footer h3{
    width: fit-content;
    font-weight: normal;
    margin-top: 0.5em;  
    font-size: 1em;
    font-weight: 600;
}

footer ul, .footer ul {
    margin-top: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

footer ul a, .footer ul a{
    display: block;
    margin-top: 0.5rem;
    padding-bottom: 0.125rem;
    padding-top: 0.125rem;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.5rem;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
}

footer a, .footer a {
    text-decoration: none;
    color: var(--colorWhite);
    font-weight: normal;
}

footer a:hover, .footer a:hover {
    text-decoration: underline;
}

.footer-bar {
    margin-top: 2rem;
    border-top: 1px solid var(--colorDarkerGrey);
}

footer i, .footer i {
    font-size: 1.5rem;
}

.section-header{
    font-family: Open-Sans; 
}

.header-flex{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 10px var(--margin);
    z-index: 10;
}

.text-load-content h2, .header-flex h2 {    
    font-size: var(--hf2);  
    font-weight: 400;
}

.text-load-content h3, .header-flex h3{
    margin-top: var(--pad);
    font-size: var(--hf3);  
    font-weight: 400;
}

.text-load-content h4, .info-container h3, .header-flex h4{
    color: var(--colorPrimary);
    text-transform: uppercase;
    font-size: var(--hf4);  
    font-weight: 400;
}

.text-load-content h2{
    font-size: 2rem;  
    font-weight: 400;
    color: var(--colorPrimaryDark);
}

.text-load-content h4{
    color: var(--colorDarkestGrey);
    text-transform: uppercase;
    font-size: 1rem;  
    font-weight: 400;
    padding-bottom: 0.5rem;
}

.info-container h3 {
    text-align: center;
    color: var(--colorPrimaryDark);
    padding-bottom: 0.6em;
    font-size: var(--hf5);   
    font-weight: 400;
}

.header-flex .body{
    margin-top: var(--pad);
    font-weight: 300;
    font-size: var(--hfbody);  
}

.grid{
    display: grid;
}

.grid-cols-4 {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.my-0 {
    margin-bottom: 0;
    margin-top: 0;
}

.col-span-12 {
    grid-column: span 12/span 12;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.w-full {
    width: 100%;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.justify-center {
    justify-content: center;
}

.feature {
    display: flex;
    flex-direction: column;
    font-family: Open-Sans;
}

.feature-topbar {
    margin: 10px 0 30px 0;
    border-top: 2px solid var(--colorDarkGrey);
}

.feature-ico-image {
    margin: 10px 0 var(--pad) 0;
    width: 4rem;
    height: auto;
    display: block;
}

.feature-top-image {
    margin: 10px 0 var(--buffer) 0;
    width: 100%;
    height: auto;
    display: block;
}

.feature-text h3{
    color: var(--colorPrimaryDark);
    font-size: var(--hf4);
    margin-bottom: var(--space-x05); 
    font-weight: 400;
}

.feature-text h4{
    color: var(--colorPrimaryDark);
    font-size: var(--hf4);
    margin-bottom: var(--space-x05); 
    font-weight: 400;
}

.feature-text .body{
    color: var(--colorDarkestGrey);
    font-size: var(--hfbody);
    font-weight: normal;
}

.feature-spacer {
    height: var(--pad);
}

.heroShow {
    margin: 20px var(--margin);
}

.heroShow img{
    content: url(../images/bgImg.png);
    width: 100%;
    height: auto;
}

.slider-img-cont { 
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow: hidden;
    align-items: center;
    scroll-snap-type: x mandatory;
    display: flex;
    height: fit-content;
    margin: auto;
}

.slider-panel {
  max-width: 100%;
  scroll-snap-align: center;
  flex-shrink: 0;
  margin-left: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-img-cont img {  
    width: 100%;
    height: auto;
    vertical-align: middle;
    scroll-snap-align: center;
    display: inline-block;
    object-fit: contain;
    align-self: flex-start;
}

.ease-in-out {
    transition-timing-function: cubic-bezier(.4,0,.2,1);    
    transition-duration: .2s;
}

.transition-transform {
    transition-duration: .15s;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.transition-colors {
    transition-duration: .15s;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.accent-border{
    position: absolute;
    top: 0%;
    z-index: 20;
    left: -0.25rem;
    width: 100%;
    height: 100%;
    display: none;
    background: none;
}

.dark {
    background-color: var(--colorGreyish);
    color: var(--colorPrimaryDark);
}

.draw-accent{
    display: block;
    height: 100%;
    animation: drawBorder 5000ms;
    border-left: 4px solid var(--colorPrimary);
}

.slider-button{
    outline: none;
    border: none;
    text-align: left;
    border-color: var(--colorDarkGrey);
    position: relative;
    background-color: transparent;
    background-image: none;
    cursor: default;
    text-transform: none;
    color: inherit;
    font-family: Open-Sans;
    font-size: 100%;
    margin: 0;
    padding: 0;
}

.slider-button:hover{
    border-color: var(--colorPrimary);
}

.slider-button-hidden {
    display: none;
}

.slider-button.dull {
    display: none;
}

.slider-button.accent {
    display: block;
}

.slider-detached-button {
    outline: none;
    border: none;
    width: calc(33% - 1rem);
    padding-bottom: 1rem;
    padding-top: 1rem;
    max-width: 5.25rem;
    margin-top: 1.25rem;
    margin-right: 0.85rem;
    margin-bottom: 1rem;
    position: relative;
    background-color: transparent;
    background-image: none;
}

.slider-detached-button .accent {
        background-color: var(--colorPrimary);
}

.slider-detached-button .dull {
        background-color: var(--colorGrey);
}

.slider-detached-button .top {
        transform: translate(0, -50%) rotate(0) skew(0) skewY(0) scaleX(1) scaleY(1);
        width: 100%;
        height: 0.125rem;
        top: 50%;
        position: absolute;
}

.slider-detached-button .bottom {
        transform: translate(0,-50%) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        transform-origin: left;
        width: 100%;
        height: 0.25rem;
        z-index: 10;
        top: 50%;
        position: absolute;
}

.md-hidden {
    display: block;
}

.md-block {
    display: none;
}

.arrow-button {
    display: flex;
    height: 2em;
    font-size: 20px;
    color: var(--colorAccent);
    margin: 0.5em 0;
    text-decoration: none;
}

.arrow-button div{
    display: block;
    height: fit-content;
    margin: auto 0;
    font-weight: normal;
    font-size: Open-Sans;
}

.arrow-button i{
    display: block;
    margin: auto 0;
    padding-left: 14px;
    font-weight: 900;
    font-size: 1.2em;
    -webkit-transition: transform 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out;
    -ms-transition: transform 0.3s ease-out;
    -o-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}

.arrow-button:hover {
    color: var(--colorWhite);
}

.arrow-button:hover i{
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
}

.footer-all-links{
    column-gap: 1rem;
    gap: 3rem;
    flex-wrap: wrap;
    max-height: 32.5rem;
}

.footer-links-cont{
    width: calc(50% - 1rem);
}

.term-cont {
    padding-top: 2rem;
    background-color: inherit;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.socials {
    padding-bottom: 2rem;
    padding-top: 2rem;
    gap: 2rem;
}

@media (min-width: 950px) {
    html{
        font-family: sans-serif;
        overflow-y: scroll;
    }

    .window-blur {
      display: none;
    }

    .navbar {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 60px;
      max-height: 60px;
      width: 780px;
      border-radius: 16px;
      margin-top: 2vh;
      margin-left: calc(((100vw - 780px)/2) - 0.5vw);
      margin-right: calc(((100vw - 780px)/2) + 0.5vw);
      align-items: center;
      transition: background-color 0.45s ease, box-shadow 0.45s ease, backdrop-filter 0.45s ease;
      overflow: visible;
    }

    .navbar.transparent {
      background-color: transparent;
      box-shadow: none;
    }
  
    .navbar.transitioning{
        background-color: rgba(245, 250, 255, 0.72);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 16px;
        box-shadow: rgba(76, 80, 133, 0.2) 0px 0px 0px 0px;
        transition: background-color 0.45s ease, box-shadow 0.45s ease, backdrop-filter 0.45s ease; 
    } 

    .logo{
        margin-left: 1vw;
        font-size: 2em;
        margin-top: 0.2em;
    }
  
    .main-nav {
      display: flex;
      margin-right: var(--logo-margin);
      flex-direction: row;
      justify-content: flex-end;
      height: fit-content;
      overflow: visible;
    }

    .main-nav .nav-left {
        display: flex;
        list-style-type: none;
    }

    

    .main-nav .nav-right {    
        display: flex;
        flex-direction: row;
        position: absolute;
        right: 2%;
    }
  
    .main-nav li {
      margin: 0;
      font-size: 0.7em;
      color: #b70000;
    }
  
    .nav-links, .nav-links.active {
      margin-left: var(--space-x1-smaller);
      color: var(--colorPrimaryDark);
      transition: all 1s ease;
      border-radius: 2.2em;
      padding: 8px 15px;
    }
  
    .navbar .nav-links:hover,.navbar .nav-links.active:hover {
        background: rgb(216,223,229);
    }

    #download{    
        background: linear-gradient(127deg, var(--colorPrimaryDark, rgb(14, 28, 41)) -68%, var(--colorPrimaryDarkFaded, rgb(50, 61, 104)) 100%);
        border-radius: 2.2em;
        box-shadow: rgb(184, 193, 230) 0px 1px 2px 0px inset, rgba(46, 64, 128, 0.35) 0px 0.706592px 0.706592px -0.583333px, rgba(46, 64, 128, 0.34) 0px 1.80656px 1.80656px -1.16667px, rgba(46, 64, 128, 0.33) 0px 3.62176px 3.62176px -1.75px, rgba(46, 64, 128, 0.3) 0px 6.8656px 6.8656px -2.33333px, rgba(46, 64, 128, 0.26) 0px 13.6468px 13.6468px -2.91667px, rgba(46, 64, 128, 0.15) 0px 30px 30px -3.5px;
        color: var(--colorWhite);
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        height: 2.7em;
        max-width: 9em;
        position: relative;
        margin-right: 0;
    }
  
    .logo {
      margin-top: 0;
      color: var(--colorPrimaryDark);
    }

    .navbar.transparent .logo{
      color: var(--colorPrimaryDark);
    }
  
    .navbar-toggle {
      display: none;
    }

    .navbar.transparent .nav-links:hover{
        color: var(--colorPrimaryDark);
    }

    .nav-links.active{
        font-weight: 600;
    }

    .info-text{
        font-size: var(--hfbody);
    }

    #loading-container img{
        width: 25%;
    }

    .md-basis-13{
        flex-basis: calc(33.33333% - var(--pad)*2/3);
    }

    .md-basis-12{
        flex-basis: calc(50% - var(--pad));
    }
    
    .md-my-0 {
        margin-bottom: 0;
        margin-top: 0;
    }

    .md-col-span-6 {
        grid-column: 1/span 6;
    }

    .md-col-span-5 {
        grid-column: 8/span 5;
    }

    .md-order-1 {
        order: 1;
    }
    
    .md-order-2 {
        order: 2;
    }
    
    .md-grid-cols-12 {
        grid-template-columns: repeat(12,minmax(0,1fr));
    }
    
    .md-grid-cols-4 {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    .md-slider-button{
        padding-left: 1.5rem;
        border-left-width: 4px;
        border-left: 4px solid;
        cursor: pointer;
        display: block;
    }

    .slider-button.accent,
    .slider-button.dull {
        display: block;
    }

    .accent {
        border-color: var(--colorDarkGrey);
    }

    .dull {
        border-color: var(--colorDarkGrey);
    }

    .md-slider-button:hover{
        border-color: var(--colorPrimary);
    }
    
    .md-h-10 {
        height: 1.5rem;
    }

    .md-hidden {
        display: none;
    }

    .slider-button-hidden {
        display: block;
    }

    .typewriter .blinker{
        min-height: 50px;
    }

    .typewriter h2{
        font-size: 3em;
    }
    
    section{
        scroll-snap-align: start;
    }

    footer, .footer{
        scroll-snap-align: start;
        padding-top: 2em;
    }

    footer h1, .footer h1{
        font-size: 1.4em;
    }

    footer h2, .footer h2{
        font-size: 0.9em;        
    }

    .term-cont {
        gap: 2.5rem;
        justify-content: space-between;
        flex-direction: row;
    }

    .footer-extras{
        padding-top: 5rem;
        gap: 5rem;
        justify-content: space-between;
        flex-wrap: nowrap;
        flex-direction: row;
    }

    .footer-all-links {
        justify-content: flex-end;
        display: block;
        column-gap: 4rem;
        gap: 5rem;
    }
}

@media (min-width: 1120px) {
    .prominent h1{ 
        text-align: center;
        font-size: calc(var(--hf2) * 1.6);
    }   

    .navbar.transparent {
      width: 76vw;
      margin-left: 12vw;
      margin-right: 12vw;
    }
}
 
@media (max-width: 950px) {
    .navbar {
        display: flex;
        flex-direction: column;
    }

    .logo img {
        height: 27px;
    }

    .main-nav{
        margin: 0rem 1.5rem 0 1.5rem;
        transition: all 0.5s;
        display: block;
    }

    .main-nav.active{
        overflow: visible;
    }

    .nav-left {
        margin-top: 2rem;
    }
  
    #loading-container #progressBar-Cont {
        height: 0.3rem;
    }
    

    #loading-container .pulsating.grow {
        height: 0px;
        width: 0px;
        padding: 0px;
        animation: expand-small 0.8s ease-out;
    }

    .info-container{       
        margin-top: 2em;
        width: 100%;
    }

    .info-text{
        margin-top: 10px;
        font-size: var(--hfbody);
    }

    .typewriter{
        min-height: 55px;
    }

    .typewriter h2{
        font-size: 2.4em;
    }

    .draw-accent{
        display: none;
    }

    .heroShow img{
        content: url(../images/bgImgPortrait.png);
        width: 100%;
        height: auto;
    }   

    .cb-2 h3{
        margin-left: 0.4em;
    }

    .arrow-button {
        margin-left: 0.7em;
    }

    .nav-links:hover,
    .nav-links.active{
        color: var(--colorPrimaryDark);
    }
    
    .accordion {
        padding: 2em 0em 0.5em 0em;;
    }

    .nav-links{
        font-size: 0.95em;
        margin: 1.25rem 0;    
    }

    .nav-right { 
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .nav-right li {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0;
        background-color: transparent;
        text-align: left;
        font-family: Open-Sans;
        margin: 0;
        margin-bottom: 0px;
        color: rgba(255, 255, 255, 0.65);
    }

    .nav-right li a{
        margin: 1.5rem 0 0;
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        text-decoration: none;
        font-size: 0.95em;
    }

    .small-login {
        background-color: transparent;
        border:solid 1px var(--colorPrimaryDark);
        border-radius: 2.2em;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        height: 2.7em;
        max-width: 100%;
        position: relative;
    }

    #download {
        margin-right: 0;
        position: relative;
        z-index: 10;
        box-shadow: rgb(184, 193, 230) 0px 1px 2px 0px inset, rgba(46, 64, 128, 0.35) 0px 0.706592px 0.706592px -0.583333px, rgba(46, 64, 128, 0.34) 0px 1.80656px 1.80656px -1.16667px !important;
    }

    .panel {
        padding: 0em;
    }
 

    .info button{        
        margin: 2em auto;
    }
    
    .accordion-bar{
        margin: 2em 0em 0 0em;
    }

    footer, .footer{
        padding-top: 1.5em;
    }

    footer h1, .footer h1{
        font-size: 1.35em;
    }

    footer h2, .footer h2{
        font-size: 0.8em;        
    }
}

@media (min-width: 640px) and (max-width: 950px) {
    .sm-grid-cols-8 {
        grid-template-columns: repeat(8,minmax(0,1fr));
    }

    .hero-container .img-cont {
        height: 70vw;
    }
    

    .hero-container .heading .logo-cont .img-framer img{
        width: 3.5vw;
        height: 3.5vw;
    }

    #loading-container img{
        width: 35%;
    }
}

@media (min-width: 640px){ 
    .typewriter{
        margin: 0 auto 0 0;
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2,minmax(0,1fr));
    } 

    .md-block {
        display: block;
    }   

    .info button{        
        margin: var(--margin) auto var(--margin) 0;
    }

    .info-container h3{        
        text-align: left;
    }

    .info-text {
        text-align: left;
    }

    .prominent .input-container {
        width: 498px;
        margin: auto;
        margin-top: 1.8em;
    }

    .prominent .input-container button {
        font-size: var(--hfbody);
        padding: 0.8rem 1.6rem;
    }

    .prominent .input-container .but-cont {
        display: block;
    }

    .prominent .input-container input {        
        width: 18rem;
    }

    .prominent .highlight {
        display: none;
    }

    .cb-1{
        padding-bottom: 2rem;
        flex-direction: row;
        flex-basis: 55%;
        width: 100%;
    }

    .cb-1 img{
        margin: auto;
    }

    .cb-2 {
        padding-top: 2rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        flex-direction: row;
        flex-basis: 45%;
    }

    .cb-2 h3{
        text-align: start;
    }

    .term-cont {
        gap: 2rem;
        align-items: flex-start;
    }

    .footer-extras{
        justify-content: flex-start;
    }

    .terms {
        flex-direction: row;
    }

    .footer-all-links{
        grid-template-columns: repeat(3,minmax(0,1fr));
        max-height: -moz-fit-content;
        max-height: fit-content;
        display: grid;
    }

    .footer-links-cont{
        width: fit-content;
    }
}

@media (max-width: 640px){    
    .hero-container .heading .logo-cont .img-framer img{
        width: 5.5vw;
        height: 5.5vw;
    }

    .cb{
        flex-direction: column-reverse;
    }

    .terms {
        text-align: center;
    }
}

@media (max-width: 390px) {
    .action-button {
        font-size: var(--hfbody);
        line-height: var(--hfbody); 
        padding: 0.8rem 1.2rem; 
    }
}

@media (max-width: 360px) {
    .info-container{       
        margin-top: 2em;
        width: 100%;
        padding: 0 var(--margin) 0 var(--margin);
    }

    .info-text{
        margin-top: 10px;
        font-size: var(--hfbody);
    }

    .typewriter .blinker{
        height: 30px;
    }

    .typewriter h2{
        font-size: 1.6em;
    }

    footer, .footer{
        padding-top: 1.5em;
    }

    footer h1, .footer h1{
        font-size: 1.35em;
    }

    footer h2, .footer h2{
        font-size: 0.8em;        
    }
}

@keyframes blink{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}

@keyframes fadeOut{
    0%{
        opacity: 1;
    }
    75%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

@keyframes drawBorder{
    0%{
        height: 0%;
    }
    100%{
        height: 100%;
    }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15); /* Expand slightly */
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes expand {
  0% {
    height: 70px;
    width: 200;
    border-radius: 999px;
  }
  50% {
    height: 120%;
    width: 120%;
    border-radius: 0px;
  }
  100% {
    height: 0;
    width: 0;
    border-radius: 999px;
  }
}

@keyframes expand-small {
  0% {
    height: 70px;
    width: 100%;
    border-radius: 0px;
  }
  50% {
    height: 120%;
    width: 100%;
    border-radius: 0px;
  }
  95% {
    height: 0%;
    width: 100%;
    border-radius: 0px;
  }
  100% {
    height: 0;
    width: 0;
    border-radius: 0px;
  }
}


@font-face {
    font-family: Sejagad;
    src: local("Great Sejagad"), local("Great-Sejagad"),
         url(../fonts/Great\ Sejagad.ttf) format("truetype");
    font-style: normal;
    font-display: swap;
}