/*Variables*/
:root {
    /*Fonts*/
    --font-family: "Poppins";
    --fs-50: clamp(0.25rem, 0.5rem + 0.25vw, 1.25rem);
    --fs-75: clamp(0.5rem, 0.75rem + 0.5vw, 1.5rem);
    --fs-100: 1rem;
    --fs-125: 1.125rem;
    --fs-150: clamp(1.5rem, 1.25rem + 0.25vw, 2rem);
    --fs-200: clamp(1.75rem, 1.678rem + 0.36vw, 2.252rem);
    --fs-300: clamp(2rem, 1.858rem + 0.71vw, 2.997rem);
    --fs-400: clamp(2.25rem, 2.036rem + 1.07vw, 3.749rem);
    --fs-500: clamp(2.5rem, 2.072rem + 2.14vw, 5.498rem);
    --fs-600: clamp(2.75rem, 2.25rem + 2.5vw, 6.25rem);
    --fs-700: clamp(3rem, 2.428rem + 2.86vw, 7.002rem);
    --fs-800: clamp(3.25rem, 2.608rem + 3.21vw, 7.747rem);
    --fs-900: clamp(3.5rem, 2.786rem + 3.57vw, 8.499rem);
    --fs-1000: clamp(4rem, 2.964rem + 3.93vw, 9.251rem);
    --fs-1100: clamp(4.25rem, 3.464rem + 3.93vw, 9.751rem);
    --fs-1200: clamp(4.5rem, 3.642rem + 4.29vw, 10.503rem);
    --fs-1300: clamp(4.75rem, 3.822rem + 4.64vw, 11.248rem);
    --fs-1400: clamp(5rem, 4rem + 5vw, 12rem);
    --fs-1500: clamp(5.25rem, 4.178rem + 5.36vw, 12.752rem);
    --fs-1600: clamp(5.5rem, 4.358rem + 5.71vw, 13.479rem);
    --fs-1700: clamp(5.75rem, 4.536rem + 6.07vw, 14.249rem);
    --fs-1800: clamp(6.5rem, 5.214rem + 6.43vw, 15.501rem);
    --fs-1900: clamp(7rem, 5.572rem + 7.14vw, 16.998rem);
    --fs-2000: clamp(7.5rem, 5.928rem + 7.86vw, 18.502rem);
    --fs-2100: clamp(8rem, 6.286rem + 8.57vw, 19.999rem);
    --fs-2200: clamp(8.75rem, 6.964rem + 8.93vw, 21.251rem);
    --fs-2300: clamp(9.25rem, 7.322rem + 9.64vw, 22.748rem);
    /*Colors*/
    --color-scheme: light;
    --clr-bck-white-primary: hsl(210, 8%, 90%);
    --clr-bck-white-100: hsl(240, 20%, 98%);
    --clr-bck-white-200: hsl(240, 20%, 94%);
    --clr-bck-white-300: hsl(240, 20%, 90%);
    --clr-bck-white-400: hsl(240, 20%, 86%);
    --clr-bck-blue-300: hsl(219, 76%, 55%);
    --clr-bck-blue-400: hsl(219, 76%, 40%);
    --clr-bck-blue-500: hsl(219, 76%, 25%);
    --clr-bck-secondary-300: hsl(269, 75%, 55%);
    --clr-bck-secondary-300: hsl(269, 75%, 40%);
    --clr-bck-secondary-300: hsl(269, 75%, 25%);
    --clr-bck-accent-200: hsl(358, 76%, 80%);
    --clr-bck-accent-300: hsl(358, 76%, 65%);
    --clr-bck-accent-400: hsl(358, 76%, 50%);
    --clr-bck-accent-500: hsl(358, 76%, 35%);
    --clr-bdr-white-primary: hsl(0, 0%, 100%);
    --clr-primary__purple: hsl(290, 34%, 27%);
    --clr-primary__white: hsl(0, 0%, 100%);
    /*Spacing*/
    --sp-base: 0.25rem;
    --sp-8: calc(var(--sp-base) * 2);
    --sp-12: calc(var(--sp-base) * 3);
    --sp-16: calc(var(--sp-base) * 4);
    --sp-20: calc(var(--sp-base) * 5);
    --sp-24: calc(var(--sp-base) * 6);
    --sp-28: calc(var(--sp-base) * 7);
    --sp-32: calc(var(--sp-base) * 8);
    --sp-36: calc(var(--sp-base) * 9);
    --sp-40: calc(var(--sp-base) * 10);
    --sp-44: calc(var(--sp-base) * 11);
    --sp-48: calc(var(--sp-base) * 12);
    --sp-52: calc(var(--sp-base) * 13);
    --sp-56: calc(var(--sp-base) * 14);
    --sp-60: calc(var(--sp-base) * 15);
    --sp-64: calc(var(--sp-base) * 16);
    --sp-68: calc(var(--sp-base) * 17);
    --sp-72: calc(var(--sp-base) * 18);
    --sp-76: calc(var(--sp-base) * 19);
    --sp-80: calc(var(--sp-base) * 20);
    --sp-96: calc(var(--sp-base) * 24);
    --sp-112: calc(var(--sp-base) * 28);
    --sp-120: calc(var(--sp-base) * 30);
    --sp-128: calc(var(--sp-base) * 32);
    --sp-240: calc(var(--sp-base) * 60);
    --sp-256: calc(var(--sp-base) * 64);
    --flow-space: var(--sp-base * 4);
    /*Percentage*/
    --percent-10: 10%;
    --percent-20: 20%;
    --percent-30: 30%;
    --percent-40: 40%;
    --percent-50: 50%;
    --percent-60: 60%;
    --percent-70: 70%;
    --percent-80: 80%;
    --percent-90: 90%;
    --percent-100: 100%;
    /*Sizes*/
    --max-width: 100%;
    --page-max-width: 100vw;
    --page-max-height: 100vh;
    --content-breakout-width: 1600px;
    --content-max-width: 1440px;
    --content-inner-max-width: 1280px;
    --content-max-height: 100%;
    /*Alignment*/
    --auto: auto;
    --center: center;
}
/*==================*/
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
    outline: none;
}
/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0;
    padding: 0;
    margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
    list-style: none;
}
/* Set core body defaults */
body {
    line-height: 160%;
    font-family: var(--font-family);
    background-color: var(--clr-bck-white-primary);
}
/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 160%;
}
/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
    text-wrap: balance;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}
/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select,
a {
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
}
/* No Button Backgrounds or Borders */
button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
}
/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}
/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}
/*====================*/
/*Custom CSS Utilities*/
/*====================*/
/*Logical Properties*/
.margin-auto {
    margin-inline: auto;
}
.height-auto {
    height: auto;
}
.content-size__contained-inner {
    max-inline-size: var(--content-inner-max-width);
}
.content-size__contained {
    max-inline-size: var(--content-max-width);
}
.content-size__breakout {
    max-inline-size: var(--content-breakout-width);
}
.content-size__max {
    max-inline-size: var(--max-width);
}
.min-content {
    width: min-content;
}
.align-content__center {
    align-content: center;
}
.align-content__start {
    align-content: start;
}
.align-content__end {
    align-content: end;
}
.align-self__start {
    align-self: start;
}
.align-self__end {
    align-self: end;
}
/*Display Types*/
.flex {
    display: flex;
}
.grid {
    display: grid;
}
.inline {
    display: inline;
}
.inline-block {
    display: inline-block;
}
/*Flex Styles*/
.flex-wrap {
    flex-wrap: wrap;
}
.flex-1 {
    flex: 1;
}
.flex-gs__4 {
    flex: 1 1 4rem;
}
.flex-gs__8 {
    flex: 1 1 8rem;
}
.flex-gs__10 {
    flex: 1 1 10rem;
}
.flex-gs__20 {
    flex: 1 1 20rem;
}
.flex-gs__30 {
    flex: 1 1 30rem;
}
.flex-gs__40 {
    flex: 1 1 40rem;
}
.flex-gs__50 {
    flex: 1 1 50rem;
}
.flex-basis__10 {
    flex-basis: 10%;
}
.flex-basis__20 {
    flex-basis: 20%;
}
.flex-basis__30 {
    flex-basis: 30%;
}
.flex-basis__40 {
    flex-basis: 40%;
}
.flex-basis__50 {
    flex-basis: 50%;
}
.flex-basis__60 {
    flex-basis: 60%;
}
.flex-basis__70 {
    flex-basis: 70%;
}
.flex-basis__80 {
    flex-basis: 80%;
}
.flex-basis__90 {
    flex-basis: 90%;
}
.flex-basis__100 > * {
    flex-basis: 100%;
}
.flex-justify__center {
    justify-content: center;
}
.flex-justify__around {
    justify-content: space-around;
}
.flex-justify__between {
    justify-content: space-between;
}
.flex-justify__even {
    justify-content: space-evenly;
}
.flex-justify__start {
    justify-content: flex-start;
}
.flex-justify__end {
    justify-content: flex-end;
}
.flex-align__center {
    align-items: center;
}
.flex-direction__col {
    flex-direction: column;
}
.flex-direction__row {
    flex-direction: row;
}
/*Grid Styles*/
.auto-grid {
    --grid-column-size: 4rem;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(var(--grid-column-size), 100%), 1fr)
    );
}
/*Alignment*/
.text-align__center {
    text-align: center;
}
.text-align__left {
    text-align: left;
}
.text-align__right {
    text-align: right;
}
/*Gaps*/
.gap__1 {
    gap: 1rem;
}
.gap__2 {
    gap: 2rem;
}
.gap__3 {
    gap: 3rem;
}
.gap__4 {
    gap: 4rem;
}
.gap__5 {
    gap: 5rem;
}
.gap__6 {
    gap: 6rem;
}
.gap__7 {
    gap: 7rem;
}
.gap__8 {
    gap: 8rem;
}
/*Blocks*/
.img-block__image {
    object-fit: cover;
    object-position: center;
}
.img-block__background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}
.min-height__400 {
    min-height: 400px;
}
/*Positions*/
.position-relative {
    position: relative;
}
.position-absolute {
    position: absolute;
}
/*Backgrounds*/
.bg__primary {
    background-color: var(--clr-primary__purple);
}
.bg__primary-white {
    background-color: var(--clr-primary__white);
}
.bg__white-100 {
    background-color: var(--clr-bck-white-100);
}
.bg__primary-gradient {
    background: linear-gradient(
        to bottom,
        var(--clr-primary__purple) 0% 50%,
        var(--clr-primary__white) 50% 100%
    );
}
/*Borders*/
.outliner {
    border-width: 1px 0 1px 0;
    border-style: solid;
    border-color: var(--clr-bdr-white-primary);
}
/*Buttons*/
.btn {
    text-decoration: none;
}
/*Spacers*/
.flow > * + * {
    margin-top: 20px;
}
.pad-v-2 {
    padding-block: calc(var(--sp-base) / 2);
}
.pad-v-4 {
    padding-block: var(--sp-base);
}
.pad-v-8 {
    padding-block: var(--sp-8);
}
.pad-v-12 {
    padding-block: var(--sp-12);
}
.pad-v-16 {
    padding-block: var(--sp-16);
}
.pad-v-20 {
    padding-block: var(--sp-20);
}
.pad-v-24 {
    padding-block: var(--sp-24);
}
.pad-v-28 {
    padding-block: var(--sp-28);
}
.pad-v-32 {
    padding-block: var(--sp-32);
}
.pad-v-36 {
    padding-block: var(--sp-36);
}
.pad-v-40 {
    padding-block: var(--sp-40);
}
.pad-v-44 {
    padding-block: var(--sp-44);
}
.pad-v-48 {
    padding-block: var(--sp-48);
}
.pad-v-52 {
    padding-block: var(--sp-52);
}
.pad-v-56 {
    padding-block: var(--sp-56);
}
.pad-v-60 {
    padding-block: var(--sp-60);
}
.pad-v-64 {
    padding-block: var(--sp-64);
}
.pad-v-68 {
    padding-block: var(--sp-68);
}
.pad-v-72 {
    padding-block: var(--sp-72);
}
.pad-v-76 {
    padding-block: var(--sp-76);
}
.pad-v-80 {
    padding-block: var(--sp-80);
}
.pad-h-2 {
    padding-inline: calc(var(--sp-base) / 2);
}
.pad-h-4 {
    padding-inline: var(--sp-base);
}
.pad-h-8 {
    padding-inline: var(--sp-8);
}
.pad-h-12 {
    padding-inline: var(--sp-12);
}
.pad-h-16 {
    padding-inline: min(var(--sp-16), 4vw);
}
.pad-h-20 {
    padding-inline: min(var(--sp-20), 5vw);
}
.pad-h-24 {
    padding-inline: var(--sp-24);
}
.pad-h-28 {
    padding-inline: var(--sp-28);
}
.pad-h-32 {
    padding-inline: var(--sp-32);
}
.pad-h-36 {
    padding-inline: var(--sp-36);
}
.pad-h-40 {
    padding-inline: min(var(--sp-40), 10vw);
}
.pad-h-44 {
    padding-inline: var(--sp-44);
}
.pad-h-48 {
    padding-inline: var(--sp-48);
}
.pad-h-52 {
    padding-inline: var(--sp-52);
}
.pad-h-56 {
    padding-inline: var(--sp-56);
}
.pad-h-60 {
    padding-inline: var(--sp-60);
}
.pad-h-64 {
    padding-inline: var(--sp-64);
}
.pad-h-68 {
    padding-inline: var(--sp-68);
}
.pad-h-72 {
    padding-inline: var(--sp-72);
}
.pad-h-76 {
    padding-inline: var(--sp-76);
}
.pad-h-80 {
    padding-inline: var(--sp-80);
}
.spacer {
    line-height: 0;
    visibility: hidden;
    border: none;
}
/*=Sizing=*/
/*Text*/
.fs-50 {
    font-size: var(--fs-50);
}
.fs-75 {
    font-size: var(--fs-75);
}
.fs-100 {
    font-size: var(--fs-100);
}
.fs-125 {
    font-size: var(--fs-125);
}
.fs-150 {
    font-size: var(--fs-150);
}
.fs-200 {
    font-size: var(--fs-200);
}
.fs-300 {
    font-size: var(--fs-300);
}
.fs-400 {
    font-size: var(--fs-400);
}
.fs-500 {
    font-size: var(--fs-500);
}
.fs-600 {
    font-size: var(--fs-600);
}
.fs-700 {
    font-size: var(--fs-700);
}
.fs-800 {
    font-size: var(--fs-800);
}
.fs-900 {
    font-size: var(--fs-900);
}
.fs-1000 {
    font-size: var(--fs-1000);
}
.fs-1100 {
    font-size: var(--fs-1100);
}
.fs-1200 {
    font-size: var(--fs-1200);
}
.fw-100 {
    font-weight: 100;
}
.fw-200 {
    font-weight: 200;
}
.fw-300 {
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}
.fw-800 {
    font-weight: 800;
}
.fw-900 {
    font-weight: 900;
}
.fc-white {
    color: var(--clr-primary__white);
}
.fc-purple {
    color: var(--clr-primary__purple);
}
.fst-italic {
    font-style: italic;
}
.line-height__normal {
    line-height: normal;
}
.line-height__80 {
    line-height: 80%;
}
.line-height__100 {
    line-height: 100%;
}
.line-height__120 {
    line-height: 120%;
}
.line-height__140 {
    line-height: 140%;
}
.line-height__160 {
    line-height: 160%;
}
.line-height__180 {
    line-height: 180%;
}
.line-height__240 {
    line-height: 240%;
}
.line-height__280 {
    line-height: 280%;
}
.ls-4 {
    letter-spacing: 4%;
}
.ls-8 {
    letter-spacing: 8%;
}
.ls-12 {
    letter-spacing: 12%;
}
.ls-16 {
    letter-spacing: 16%;
}
.ls-20 {
    letter-spacing: 20%;
}
.max-width {
    width: var(--max-width);
}
/*Content Widths*/
.width-1 {
    width: var(--percent-100);
    max-width: min(80%, 320px);
}
.width-2 {
    width: var(--percent-100);
    max-width: min(66.67%, 426.67px);
}
.width-3 {
    width: var(--percent-100);
    max-width: min(62.5%, 512px);
}
.width-4 {
    width: var(--percent-100);
    max-width: min(50%, 640px);
}
.width-5 {
    width: var(--percent-100);
    max-width: min(75%, 800px);
}
.width-6 {
    width: var(--percent-100);
    max-width: min(80%, 960px);
}
.width-7 {
    width: var(--percent-100);
    max-width: min(85%, 1140px);
}
.width-8 {
    width: var(--percent-100);
    max-width: min(90%, 1280px);
}
/*================*/
/*Body Elements*/
.main {
    width: var(--max-width);
}
.header {
    background-color: white;
}
.content-block {
    overflow: hidden;
}
.content-block__content-columns {
    overflow: hidden;
}
.content-block__bck-img--pattern {
    background-image: url(assets/KM_K_Background.png);
}
/*Text Carousel Styling*/
/*==================*/
.container-textcarouselbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4rem;
}
/* Slideshow container */
.slideshow-container {
    position: relative;
    background: var(--purple);
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}
/* Count */
#count-text {
    position: relative;
    top: 30px;
    z-index: 0;
}
/* Slides */
.mySlides {
    display: none;
    text-align: center;
    color: var(--white);
}
/* Next & previous buttons */
.prev-text,
.next-text {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: 16px;
    color: #888;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    z-index: 1;
}
/* Position the "next button" to the right */
.next {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px;
}
.arrow-left {
    width: 60px;
    filter: invert(100%) sepia(79%) saturate(0%) hue-rotate(360deg)
        brightness(1000%) contrast(100%);
}
.arrow-right {
    width: 60px;
    filter: invert(100%) sepia(79%) saturate(0%) hue-rotate(360deg)
        brightness(1000%) contrast(100%);
}
.arrow-left-white {
    width: 60px;
}
/*Hover Image*/
.tooltip_1 {
    color: var(--clr-primary__white);
    z-index: 1;
    top: 72.5%;
    left: 40%;
    background-color: var(--clr-primary__purple);
    border-radius: 360%;
    cursor: pointer;
    aspect-ratio: 1;
}
.tooltip_1:hover {
    background-color: white;
    color: var(--clr-primary__purple);
}
.tooltip_1:hover ~ .modal-1 {
    visibility: visible;
}
.modal-1 {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: -27.5%;
    inset: auto;
    right: 37.5%;
    border: 0;
    width: 100%;
    max-width: 200px;
    padding: 20px;
    visibility: hidden;
}
.tooltip_1-inner {
    position: relative;
}
.tooltip_1-inner::before,
.tooltip_1-inner::after {
    position: absolute;
    content: "";
    top: -3rem;
    left: 3rem;
    transform: translateX(-50%);
}
.tooltip_1-inner::before {
    content: attr(data-tooltip);
    padding: 0.5rem;
    color: white;
    background-color: black;
}
.tooltip_2 {
    color: var(--clr-primary__white);
    z-index: 1;
    top: 6%;
    left: 50%;
    background-color: var(--clr-primary__purple);
    border-radius: 50%;
    cursor: pointer;
}
.tooltip_2:hover {
    background-color: white;
    color: var(--clr-primary__purple);
}
.tooltip_2:hover ~ .modal-2 {
    visibility: visible;
}
.modal-2 {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: -55%;
    inset: auto;
    right: 27.5%;
    border: 0;
    width: 100%;
    max-width: 200px;
    padding: 20px;
    visibility: hidden;
}
.tooltip_2-inner {
    position: relative;
}
/*Media Queries*/
/*=============*/
/*1280px*/
@media screen and (width < 1280px) {
    .bg__primary-gradient {
        background: linear-gradient(
            to bottom,
            var(--clr-primary__purple) 0% 50%,
            var(--clr-primary__white) 50% 100%
        );
    }
    .modal-1 {
        margin-top: -25%;
        right: 35%;
    }
    .modal-2 {
        margin-top: -55%;
        right: 27.5%;
    }
}
/*960px*/
@media screen and (width < 960px) {
    .flex-justify__between {
        justify-content: center;
    }
    .footer-nav {
        gap: 2rem;
    }
    .footer-nav__date {
        padding-top: 2rem;
    }
    .bg__primary-gradient {
        background: linear-gradient(
            to bottom,
            var(--clr-primary__purple) 0% 25%,
            var(--clr-primary__white) 25% 100%
        );
    }
    .flex-basis__20 {
        flex-basis: 100%;
    }
}
@media screen and (width < 640px) {
    .flex-justify__between {
        justify-content: center;
    }
    .flex-direction__row {
        flex-direction: column;
    }
    .footer-nav {
        gap: 2rem;
    }
    .footer-nav__date {
        padding-top: 2rem;
    }
    .modal-1 {
        margin-top: -45%;
        right: 20%;
    }
    .modal-2 {
        margin-top: -60%;
        right: 27.5%;
    }
    .quote {
        font-size: var(--fs-100);
    }
}
/*480*/
@media screen and (width < 480px) {
    .flex-justify__between {
        justify-content: center;
    }
    .modal-1 {
        margin-top: -25%;
        right: 35%;
    }
    .modal-2 {
        margin-top: -85vw;
        right: 27.5%;
    }
    .quote {
        font-size: var(--fs-100);
    }
}
/*320*/
@media screen and (width < 320px) {
    .flex-justify__between {
        justify-content: center;
    }
    .modal-1 {
        margin-top: -25%;
        right: 35%;
    }
    .modal-2 {
        margin-top: -67vw;
        right: 27.5%;
    }
    .quote {
        font-size: var(--fs-100);
    }
}