/* Global constants for the website */

.hide {
    display: none;
    visibility: hidden;
}

.show {
    display: block!important;
    visibility: visible;
}

.hovered {
    background-color: white;
}

.unhovered {
    background-color: #efefef;
}

.green {
    color: #2ecc71;
}

.turquoise {
    color: #1abc9c;
}

.blue {
    color: #3498db;
}

.purple {
    color: #9b59b6;
}

.red {
    color: #e74c3c;
}

.dark-blue {
    color: #2c3e50;
}

.header {
    text-align: center;
    color: white;
    font-family: Arcon;
    font-size: 3rem;

    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
    border-radius: 24px;                          /* rounded edges */
    padding: 1.2rem 1rem;
    margin: 1.5rem auto;
    width: 100%;
    max-width: 1280px;                            /* keeps it aligned with content */

    box-shadow: 0 10px 28px rgba(0,0,0,0.30);     /* soft shadow */
    position: relative;
}

/* subtle white stroke */
.header::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, #ffffff15, #ffffff05); /* reduced opacity */
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

.sub-header {
    text-align: center;
    color: #ffffff;                 /* softer contrast */
    font-family: Arcon;
    font-size: 1.2rem;
    margin-top: 0.8rem;
}



/* Overlay style */

.overlay {
    position: fixed;
    z-index: 99;

    width: 100%;
    height: 100vh;

    opacity: 0;
    background-color: black;
}

@media (max-width: 767px) {
    .header {
        font-size: 2rem;
    }
}

.stop-scroll {
    overflow: hidden;
}

/* Everything besides the menu */
#main-container {
    z-index: 98;
}

/*******************************/

.p-1 {
    padding: 1rem !important;
}

.p-2 {
    padding: 2rem !important;
}

.p-3 {
    padding: 3rem !important;
}

.p-4 {
    padding: 4rem !important;
}

.p-5 {
    padding: 5rem !important;
}

.p-6 {
    padding: 6rem !important;
}

.p-7 {
    padding: 7rem !important;
}

.p-8 {
    padding: 8rem !important;
}

.p-9 {
    padding: 9rem !important;
}

.p-10 {
    padding: 10rem !important;
}

.m-1 {
    margin: 1rem !important;
}

.m-2 {
    margin: 2rem !important;
}

.m-3 {
    margin: 3rem !important;
}

.m-4 {
    margin: 4rem !important;
}

.m-5 {
    margin: 5rem !important;
}

.m-6 {
    margin: 6rem !important;
}

.m-7 {
    margin: 7rem !important;
}

.m-8 {
    margin: 8rem !important;
}

.m-9 {
    margin: 9rem !important;
}

.m-10 {
    margin: 10rem !important;
}

.px-1 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.px-2 {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

.px-3 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.px-4 {
    padding-right: 4rem !important;
    padding-left: 4rem !important;
}

.px-5 {
    padding-right: 5rem !important;
    padding-left: 5rem !important;
}

.px-6 {
    padding-right: 6rem !important;
    padding-left: 6rem !important;
}

.px-7 {
    padding-right: 7rem !important;
    padding-left: 7rem !important;
}

.px-8 {
    padding-right: 8rem !important;
    padding-left: 8rem !important;
}

.px-9 {
    padding-right: 9rem !important;
    padding-left: 9rem !important;
}

.px-10 {
    padding-right: 10rem !important;
    padding-left: 10rem !important;
}

.mx-1 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.mx-2 {
    margin-right: 2rem !important;
    margin-left: 2rem !important;
}

.mx-3 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.mx-4 {
    margin-right: 4rem !important;
    margin-left: 4rem !important;
}

.mx-5 {
    margin-right: 4rem !important;
    margin-left: 5rem !important;
}

.mx-6 {
    margin-right: 4rem !important;
    margin-left: 6rem !important;
}

.mx-7 {
    margin-right: 4rem !important;
    margin-left: 7rem !important;
}

.mx-8 {
    margin-right: 4rem !important;
    margin-left: 8rem !important;
}

.mx-9 {
    margin-right: 4rem !important;
    margin-left: 9rem !important;
}

.mx-10 {
    margin-right: 4rem !important;
    margin-left: 10rem !important;
}

.py-1 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-2 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.py-3 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.py-4 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.py-5 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.py-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

.py-7 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
}

.py-8 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
}

.py-9 {
    padding-top: 9rem !important;
    padding-bottom: 9rem !important;
}

.py-10 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
}

.my-1 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-2 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.my-3 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.my-4 {
    margin-top: 4rem !important;
    margin-bottom: 4rem !important;
}

.my-5 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}

.my-6 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

.my-7 {
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
}

.my-8 {
    margin-top: 8rem !important;
    margin-bottom: 8rem !important;
}

.my-9 {
    margin-top: 9rem !important;
    margin-bottom: 9rem !important;
}

.my-10 {
    margin-top: 10rem !important;
    margin-bottom: 10rem !important;
}

.pt-1 {
    padding-top: 1rem !important;
}

.pt-2 {
    padding-top: 2rem !important;
}

.pt-3 {
    padding-top: 3rem !important;
}

.pt-4 {
    padding-top: 4rem !important;
}

.pt-5 {
    padding-top: 5rem !important;
}

.pt-6 {
    padding-top: 6rem !important;
}

.pt-7 {
    padding-top: 7rem !important;
}

.pt-8 {
    padding-top: 8rem !important;
}

.pt-9 {
    padding-top: 9rem !important;
}

.pt-10 {
    padding-top: 10rem !important;
}

.pl-1 {
    padding-left: 1rem !important;
}

.pl-2 {
    padding-left: 2rem !important;
}

.pl-3 {
    padding-left: 3rem !important;
}

.pl-4 {
    padding-left: 4rem !important;
}

.pl-5 {
    padding-left: 5rem !important;
}

.pl-6 {
    padding-left: 6rem !important;
}

.pl-7 {
    padding-left: 7rem !important;
}

.pl-8 {
    padding-left: 8rem !important;
}

.pl-9 {
    padding-left: 9rem !important;
}

.pl-10 {
    padding-left: 10rem !important;
}

.pb-1 {
    padding-bottom: 1rem !important;
}

.pb-2 {
    padding-bottom: 2rem !important;
}

.pb-3 {
    padding-bottom: 3rem !important;
}

.pb-4 {
    padding-bottom: 4rem !important;
}

.pb-5 {
    padding-bottom: 5rem !important;
}

.pb-6 {
    padding-bottom: 6rem !important;
}

.pb-7 {
    padding-bottom: 7rem !important;
}

.pb-8 {
    padding-bottom: 8rem !important;
}

.pb-9 {
    padding-bottom: 9rem !important;
}

.pb-10 {
    padding-bottom: 10rem !important;
}

.pr-1 {
    padding-right: 1rem !important;
}

.pr-2 {
    padding-right: 2rem !important;
}

.pr-3 {
    padding-right: 3rem !important;
}

.pr-4 {
    padding-right: 4rem !important;
}

.pr-5 {
    padding-right: 5rem !important;
}

.pr-6 {
    padding-right: 6rem !important;
}

.pr-7 {
    padding-right: 7rem !important;
}

.pr-8 {
    padding-right: 8rem !important;
}

.pr-9 {
    padding-right: 9rem !important;
}

.pr-10 {
    padding-right: 10rem !important;
}

.mt-1 {
    margin-top: 2rem !important;
}

.mt-2 {
    margin-top: 2rem !important;
}

.mt-3 {
    margin-top: 3rem !important;
}

.mt-4 {
    margin-top: 4rem !important;
}

.mt-5 {
    margin-top: 5rem !important;
}

.mt-6 {
    margin-top: 6rem !important;
}

.mt-7 {
    margin-top: 7rem !important;
}

.mt-8 {
    margin-top: 8rem !important;
}

.mt-9 {
    margin-top: 9rem !important;
}

.mt-10 {
    margin-top: 10rem !important;
}

.ml-1 {
    margin-left: 1rem !important;
}

.ml-2 {
    margin-left: 2rem !important;
}

.ml-3 {
    margin-left: 3rem !important;
}

.ml-4 {
    margin-left: 4rem !important;
}

.ml-5 {
    margin-left: 5rem !important;
}

.ml-6 {
    margin-left: 6rem !important;
}

.ml-7 {
    margin-left: 7rem !important;
}

.ml-8 {
    margin-left: 8rem !important;
}

.ml-9 {
    margin-left: 9rem !important;
}

.ml-10 {
    margin-left: 10rem !important;
}

.mb-1 {
    margin-bottom: 1rem !important;
}

.mb-2 {
    margin-bottom: 2rem !important;
}

.mb-3 {
    margin-bottom: 3rem !important;
}

.mb-4 {
    margin-bottom: 4rem !important;
}

.mb-5 {
    margin-bottom: 5rem !important;
}

.mb-6 {
    margin-bottom: 6rem !important;
}

.mb-7 {
    margin-bottom: 7rem !important;
}

.mb-8 {
    margin-bottom: 8rem !important;
}

.mb-9 {
    margin-bottom: 9rem !important;
}

.mb-10 {
    margin-bottom: 10rem !important;
}

.mr-1 {
    margin-right: 1rem !important;
}

.mr-2 {
    margin-right: 2rem !important;
}

.mr-3 {
    margin-right: 3rem !important;
}

.mr-4 {
    margin-right: 4rem !important;
}

.mr-5 {
    margin-right: 5rem !important;
}

.mr-6 {
    margin-right: 6rem !important;
}

.mr-7 {
    margin-right: 7rem !important;
}

.mr-8 {
    margin-right: 8rem !important;
}

.mr-9 {
    margin-right: 9rem !important;
}

.mr-10 {
    margin-right: 10rem !important;
}