* {
    margin: 0;
    padding: 0;
}
*,
:after,
:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    margin-top: 0 !important;
}
body {
    font-family: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body {
    background: var(--primary-dark);
    color: var(--white);
}
body.darkmode {
    background: var(--white);
    color: var(--primary-dark);
}

body .svg-logo {
    fill: var(--white);
}

body.darkmode .svg-logo {
    fill: var(--primary-dark);
}

.page-center {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
}
.bg-overlay,
.overlay,
.peach-overlay {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    position: absolute;
}
.overlay {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8)));    
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));    
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    pointer-events: none;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.bg-overlay {
    background: -o-linear-gradient(170.05deg, rgba(47, 47, 47, 0) 9.68%, hsla(0, 0%, 6%, 0.8) 48.73%);
    background: linear-gradient(279.95deg, rgba(47, 47, 47, 0) 9.68%, hsla(0, 0%, 6%, 0.8) 48.73%);
    z-index: 1;
}
.peach-overlay {
    background: var(--lightpink);
    opacity:0.8;
}

.grid {
    display: -ms-grid;
    display: grid;
}
.grid-cols-2 {
    -ms-grid-columns: (1fr) [2];
    grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
    -ms-grid-columns: (1fr) [3];
    grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
    -ms-grid-columns: (1fr) [4];
    grid-template-columns: repeat(4, 1fr);
}
.grid-cols-5 {
    -ms-grid-columns: (1fr) [5];
    grid-template-columns: repeat(5, 1fr);
}
.grid-cols-6 {
    -ms-grid-columns: (1fr) [6];
    grid-template-columns: repeat(6, 1fr);
}
.gap-2 {
    gap: 20px;
}
.gap-3 {
    gap: 30px;
}
.gap-4 {
    gap: 40px;
}
.gap-5 {
    gap: 50px;
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.flex-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}
.items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.items-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.justify-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.justify-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.text-left {
    text-align: left;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.card-item {
    background: var(--lightblue);
    padding: 40px;
    border-radius: 20px;
    margin-bottom: 20px;
    color: var(--dark-text);
}

.card-item p.lg {
    color: var(--black);
}

.card-item svg {
  height: 60px; 
  width: auto; 
  padding-bottom: 10px;
}

.gloverlay {
    transition: max-width 0.3s ease-out, max-height 0.3s ease-out;
    margin: 0 auto;
}

.gloverlay::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.05); 
    z-index: 0;
    width: 105%;
    height: 105%;
    pointer-events: none;
    content: "";
    background: radial-gradient(141.53% 114.68% at 87.46% 55.27%, #177175 36.75%, rgba(14, 10, 162, 0) 100%);
    filter: blur(42px);
    border-radius: inherit;
    opacity: .85;
    mix-blend-mode: plus-lighter;
}