@font-face {
    font-family: FuturaBT-Light;
    src: url('../fonts/FuturaBT-Light.ttf');
}

@font-face {
    font-family: FuturaBT-Bold;
    src: url('../fonts/FuturaBT-Bold.ttf');
}

@font-face {
    font-family: Helvetica-Bold;
    src: url('../fonts/HelveticaNeueLTStd-Bd.otf');
}

@font-face {
    font-family: Helvetica-Light;
    src: url('../fonts/HelveticaNeueLTStd-Lt.otf');
}

@font-face {
  font-family: Visby-heavey;
  src: url("../fonts/VisbyHeavy.otf"); 
}

@font-face {
  font-family: Visby-light;
  src: url("../fonts/VisbyLight.otf"); 
}


:root{
    --main-bg-color: #1e3343;
    --main-bg-color-light: #164d76;
    
    --alt-main-bg-color: #C8CEEE;
    --alt-main-bg-color-light: #E8DAF0;
    --main-text-color: #1b1c1c;
    --main-text-color-light: #1b1c1c27;
    --alt-bg-color: #fff;
    --main-grey: rgba(0, 0, 0, .125);
    --alt-text-color: #1b1c1c;
    --main-container-width: 1630px;
    --main-padding-width: 8vw;

    --admin-main-container-width: 1200px;

    --main-nav-bg-color: #ffffff;

    --white-bg-color-fade: rgba(255, 255, 255, 0.7);
    --blue-bg-color-fade: rgb(30 51 68 / 70%);

    --hero-font-size-lg: 6em;
    --hero-font-size-sm: 4em;
    --h1-font-size: 3em;
    --h2-font-size: 1.8em;
    --h3-font-size: 1.3em;
    --p-font-size: 1em;

    --formgap-20: 20px;
    --formgap-15: 15px;
    --formgap-10: 10px;
    --formgap-5: 5px;

    --main-gap: 32px;
    --medium-gap: 18px;
    --small-gap: 10px;
    --formgap-20: 20px;
    --formgap-15: 15px;
    --formgap-10: 10px;
    --formgap-8: 8px;
    --formgap-5: 5px;

    --row-gap: var(--main-gap);

    --border-radius-5: 5px;

    /* Main Clors */
    --primary: 35, 50, 90;
    --primary-color: rgba(var(--primary));
    --primary-color-light: rgba(var(--primary), 0.5);
    --primary-color-extra-light: rgba(var(--primary), 0.1);

    --secondary: 150, 123, 183;
    --secondary-color: rgba(var(--secondary));
    --secondary-color-light: rgba(var(--secondary) ,0.5);
    --secondary-color-extra-light: rgba(var(--secondary) ,0.1);

    --tertiary: 217, 186, 215;
    --tertiary-color: rgba(var(--tertiary));
    --tertiary-color-light:rgba(var(--tertiary), 0.5);
    --tertiary-color-extra-light:rgba(var(--tertiary), 0.1);

    --quaternary: 251, 248, 246;
    --quaternary-color: rgba(var(--quaternary));
    --quaternary-color-light:rgba(var(--quaternary), 0.5);
    --quaternary-color-extra-light:rgba(var(--quaternary), 0.1);

    --main-white-color: #ffffff;
    --main-grey-color: #eeeeee;
    --main-grey-color-light: #f8f9fa;
    --main-grey-color-dark: #3d3d3d;

    /* Other Colors */

    --bs-success: #198754;
    --bs-success-text-emphasis: #0a3622;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-success-border-subtle: #a3cfbb;

    --bs-warning: #ffc107;
    --bs-warning-text-emphasis: #664d03;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-warning-border-subtle: #ffe69c;

    --bs-danger: #dc3545;
    --bs-danger-text-emphasis: #58151c;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-danger-border-subtle: #f1aeb5;

    --main-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);

    --col-10percent: calc(10% - calc(calc(var(--row-gap, 0px) * 9) /10));
    --col-20percent: calc(20% - calc(calc(var(--row-gap, 0px) * 4) /5));
    --col-25percent: calc(25% - calc(calc(var(--row-gap, 0px) * 3) /4));
    --col-30percent: calc(30% - calc(calc(var(--row-gap, 0px) * 1) /2));
    --col-33percent: calc(33.333333% - calc(calc(var(--row-gap, 0px) * 2) /3));
    --col-40percent: calc(40% - calc(calc(var(--row-gap, 0px) * 1) /2));
    --col-50percent: calc(50% - calc(calc(var(--row-gap, 0px) * 1) /2));
    --col-60percent: calc(60% - calc(calc(var(--row-gap, 0px) * 1) /2));
    --col-66percent: calc(66.666666% - calc(calc(var(--row-gap, 0px) * 1) /3));
    --col-70percent: calc(70% - calc(calc(var(--row-gap, 0px) * 1) /2));
    --col-75percent: calc(75% - calc(calc(var(--row-gap, 0px) * 1) /3));
    --col-80percent: calc(80% - calc(calc(var(--row-gap, 0px) * 1) /4));
    --col-90percent: calc(90% - calc(calc(var(--row-gap, 0px) * 1) /5));

    interpolate-size: allow-keywords;
}

*{
    box-sizing: border-box;
    margin-block-start: 0;
    margin-block-end: 0;
}

body{
    font-family: Visby-light, sans-serif;
    color: var(--main-text-color);
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    overflow: hidden scroll;
}

.body.active{
    height: 100%;
    overflow-y: hidden;
}

hr{
    width: 100%;
    border: 1px solid var(--main-text-color);
    border-radius: 2px;
}

/* typography */

a{
    color: var(--main-bg-color);
    text-decoration: none;
}

a:hover{
    color: var(--main-bg-color-light);
}

h1,
h2,
h3,
h4,
h5,
h6{
    margin-bottom: 0rem;
    font-weight: 500;
    line-height: 1.2;
}

p{
    margin-bottom: 0rem;
}

.text-center{
    text-align: center;
}

.text-white{
    color: #fff;
}

/* Images */

img {
    vertical-align: middle;
    border-style: none;
    width: 100%;
}

/* Admin Bar */

#cookieConsent{
    position: fixed;
    bottom: 0;
    z-index: 9999999999999;
    width: 100%;
    background-color: var(--main-bg-color);
    padding: 30px;
}

#cookieConsent .container {
    max-width: 100%;
}

#cookieConsent .container a{
    cursor: pointer;
}


/* Bootstrap reset */

/* div[class*="col-"] {
    padding-right: 0px;
    padding-left: 0px 
  } */


.maincontainer{
    width: 100%;
}

.innercontainer{
    margin: auto;
    max-width: var(--main-container-width);
    padding: 18px;
}

.flex{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

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

.flex-item-right {
    margin-left: auto;
}

.main-padding{
    padding: 80px var(--main-padding-width);
}

.main-paddingLR{
    padding: 0px var(--main-padding-width);
}

.gap{
    gap: var(--main-gap);
}

.gap-medium{
    gap: var(--medium-gap);
}

.gap-small{
    gap: var(--small-gap);
}

.row{
    --row-gap: var(--main-gap);
    --row-margin: var(--main-gap);
    display: flex;
    flex-direction: row;
    gap: var(--row-gap, inherit);
    flex-wrap: wrap;
    /* margin: var(--row-margin) auto; */
    width: 100%;
}

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

.row-left{
    justify-content: flex-start;
}

.row-right{
    justify-content: flex-end;
}

.col-left,
.col-top{
    align-items: flex-start;
}

.col-center{
    align-items: center;
}

.col-right,
.col-bottom{
    align-items: flex-end;
}

.col-10{
    width: var(--col-10percent);
}

.col-20{
    width: var(--col-20percent);
}

.col-25{
    width: var(--col-25percent);
}

.col-30{
    width: var(--col-30percent);
}

.col-33{
    width: var(--col-33percent);
}

.col-40{
    width: var(--col-40percent);
}

.col-50{
    width: var(--col-50percent);
}

.col-60{
    width: var(--col-60percent);
}

.col-66{
    width: var(--col-66percent);
}

.col-70{ 
    width: var(--col-70percent);
}

.col-75{
    width: var(--col-75percent);
}

.col-80{
    width: var(--col-80percent);
}

.col-90{
    width: var(--col-90percent);
}

.col-100{
    width: 100%;
}


@media only screen and (min-width: 425px) {
    .S-col-10{
        width: var(--col-10percent);
    }

    .S-col-20{
        width: var(--col-20percent);
    }

    .S-col-25{
        width: var(--col-25percent);
    }

    .S-col-30{
        width: var(--col-30percent);
    }

    .S-col-33{
        width: var(--col-33percent);
    }

    .S-col-40{
        width: var(--col-40percent);
    }

    .S-col-50{
        width: var(--col-50percent);
    }

    .S-col-60{
        width: var(--col-60percent);
    }

    .S-col-66{
        width: var(--col-66percent);
    }

    .S-col-70{ 
        width: var(--col-70percent);
    }

    .S-col-75{
        width: var(--col-75percent);
    }

    .S-col-80{
        width: var(--col-80percent);
    }

    .S-col-90{
        width: var(--col-90percent);
    }
}

@media only screen and (min-width: 768px) {
    .M-col-10{
        width: var(--col-10percent);
    }

    .M-col-20{
        width: var(--col-20percent);
    }

    .M-col-25{
        width: var(--col-25percent);
    }

    .M-col-30{
        width: var(--col-30percent);
    }

    .M-col-33{
        width: var(--col-33percent);
    }

    .M-col-40{
        width: var(--col-40percent);
    }

    .M-col-50{
        width: var(--col-50percent);
    }

    .M-col-60{
        width: var(--col-60percent);
    }

    .M-col-66{
        width: var(--col-66percent);
    }

    .M-col-70{ 
        width: var(--col-70percent);
    }

    .M-col-75{
        width: var(--col-75percent);
    }

    .M-col-80{
        width: var(--col-80percent);
    }

    .M-col-90{
        width: var(--col-90percent);
    }
}

@media only screen and (min-width: 1024px) {
    .L-col-10{
        width: var(--col-10percent);
    }

    .L-col-20{
        width: var(--col-20percent);
    }

    .L-col-25{
        width: var(--col-25percent);
    }

    .L-col-30{
        width: var(--col-30percent);
    }

    .L-col-33{
        width: var(--col-33percent);
    }

    .L-col-40{
        width: var(--col-40percent);
    }

    .L-col-50{
        width: var(--col-50percent);
    }

    .L-col-60{
        width: var(--col-60percent);
    }

    .L-col-66{
        width: var(--col-66percent);
    }

    .L-col-70{ 
        width: var(--col-70percent);
    }

    .L-col-75{
        width: var(--col-75percent);
    }

    .L-col-80{
        width: var(--col-80percent);
    }

    .L-col-90{
        width: var(--col-90percent);
    }
}

/* Accordian */

details {
    width: 100%;
    align-self: stretch;
    border-radius: 6px;
    background: var(--alt-main-bg-color);
    overflow: hidden;
}

details:hover {
    box-shadow: 2px 2px 2px 1px #e6e6e6;
}

details::details-content{
    block-size: 0;
    transition: 
        block-size 0.5s,
        content-visibility 0.5s;
    transition-behavior: allow-discrete;
}

details[open]::details-content{
    block-size: auto;
}

details[open] summary{
   background: var(--main-bg-color);
   color: #fff;
}

details[open] summary .flex-item-right{
   transform: rotate(180deg);
}

details[open] summary .flex-item-right g g path{
   fill: #fff;
}

details summary {
    display: flex;
    padding: 24px;
    cursor: pointer;
    align-items: center;
    gap: 24px;
    color: var(--main-bg-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 26.46px;
    border-radius: 6px 6px 0 0;
}

details summary .number-circle{
    display: flex;
    background-color: #fff;
    aspect-ratio: 1 / 1;
    width: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 50% 50% 50% 50%;
    border: 2px solid var(--main-bg-color);
    /* transform: rotate(-45deg); */
}

/* details summary .number-circle p{
    transform: rotate(45deg);
} */

details[open] summary .number-circle{
    color: var(--alt-text-color);
}

.details-main {
    display: flex;
    padding: 48px 21px;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 0 0 8px 8px;
    border: 1px solid #ADAEB1;
    background: #F4F5F9;
    flex-direction: column;
}

summary svg{
    width: 25px;
    stroke-width: 5px;
}