@import 'reset.css';
@import "navbar.css";
@import "footer.css";
@import "buttons.css";
@import url("./frontend.css") layer(app);


:root {
    --clr-primary-100: #266C82;
    --clr-primary-75: #5C91A1;
    --clr-primary-50: #93B6C1;
    --clr-primary-40: #A8C4CD;
    --clr-primary-30: #BED3DA;
    --clr-primary-20: #D4E1E6;
    --clr-primary-10: #E9F0F3;

    --clr-black-100: #282D33;
    --clr-black-75: #5E6266;
    --clr-black-50: #949699;
    --clr-black-20: #cccccc;
    --clr-black-10: #EAEAEB;

    --clr-back-bet-100: #00b073;
    --clr-lay-bet: #005ea6;

    --clr-green-100: #60BA8D;
    --clr-green-80: #7BE8B2;
    --clr-green-75: #87CBA9;
    --clr-green-50: #AFDCC6;
    --clr-green-25: #D7EDE2;

    --clr-dark-green-100: #091c2e;
    --clr-light-greem-100: #096b81;
    /*fix typo back compat*/
    --clr-light-green-100: #096b81;


    --clr-navy-100: #101c2e;


    --clr-accent-100: #3FD997; /* Base color */
    --clr-accent-90: #59DFA3; /* 90% base, 10% white */
    --clr-accent-80: #73E5AF; /* 80% base, 20% white */
    --clr-accent-60: #A7F0C7; /* 60% base, 40% white */
    --clr-accent-50: #C1F6D3; /* 50% base, 50% white */
    --clr-accent-40: #DBFBE0; /* 40% base, 60% white */
    --clr-accent-30: #F5FFEB; /* 30% base, 70% white */
    --clr-accent-20: #FAFFF3; /* 20% base, 80% white */
    --clr-accent-10: #FDFFFA; /* 10% base, 90% white */

    --clr-red-100: #FF0000; /* Base red */
    --clr-red-90: #FF1A1A; /* 90% base, 10% white */
    --clr-red-80: #FF3333; /* 80% base, 20% white */
    --clr-red-70: #FF4D4D; /* 70% base, 30% white */
    --clr-red-60: #FF6666; /* 60% base, 40% white */
    --clr-red-50: #FF8080; /* 50% base, 50% white */
    --clr-red-40: #FF9999; /* 40% base, 60% white */
    --clr-red-30: #FFB3B3; /* 30% base, 70% white */
    --clr-red-20: #FFCCCC; /* 20% base, 80% white */
    --clr-red-10: #FFE6E6; /* 10% base, 90% white */

    --ff-primary: "Inter", sans-serif;
    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);

    --fw-extra-light: 100;
    --fw-light: 200;
    --fw-regular: 400;
    --fw-semi-bold: 500;
    --fw-bold: 700;

    --fs-100: .64rem;
    --fs-200: .8rem;
    --fs-300: 1rem;
    --fs-400: 1.25rem;
    --fs-500: 1.563rem;
    --fs-600: 1.953rem;
    --fs-700: 2.441rem;
    --fs-800: 3.052rem;
    --fs-900: 3.815rem;

    --fs-body: var(--fs-200);
    --fs-body-small: var(--fs-100);
    --fs-body-large: var(--fs-300);
    --fs-heading-primary: var(--fs-700);
    --fs-heading-secondary: var(--fs-600);
    --fs-heading-tertiary: var(--fs-500);
    --fs-heading-medium: var(--fs-500);
    --fs-heading-small: var(--fs-400);
    --fs-nav: var(--fs-300);
    --fs-button: var(--fs-500);

}

@media (min-width: 576px) {
    :root {
        --fs-body-small: var(--fs-200);
        --fs-body: var(--fs-300);
        --fs-body-large: var(--fs-400);
        --fs-heading-primary: var(--fs-800);
    }
}


@media (min-width: 768px) {
    :root {
        --fs-heading-primary: var(--fs-900);
        --fs-heading-secondary: var(--fs-700);
        --fs-heading-tertiary: var(--fs-600);

    }
}

@media (min-width: 992px) {
    :root {
        --fs-heading-secondary: var(--fs-800);
        --fs-heading-tertiary: var(--fs-700);
        --fs-heading-medium: var(--fs-600);
        --fs-heading-small: var(--fs-500);

    }
}


/* General Styling */

body {
    --section-divider-oval-height: 35vh;
    --section-divider-oval-offset: calc(var(--section-divider-oval-height) * 0.075);
    --section-bottom-border-radius: 0 0 16px 16px;
    --section-top-border-radius: 16px 16px 0 0;
    font-size: var(--fs-body);
    font-family: var(--ff-body);
    color: var(--clr-black-100);
    overflow-x: hidden;
    background: var(--app-color-bg, #f7f7f7);
}

.section-divider-oval {
    background-color: var(--clr-primary-30);
    width: 100%;
    border-radius: 35%;
    z-index: 0;
    height: 35vh;
    position: absolute;
    top: 0;
}

@media (min-width: 768px) {
    body {
        --section-bottom-border-radius: 0 0 40px 40px;
        --section-top-border-radius: 40px 40px 0 0;
        --section-divider-oval-offset: calc(var(--section-divider-oval-height) * 0.1);

    }
}


[aria-hidden="true"] {
    display: none;
}


.section-container {
    --max-width: 1184px;
    --spacing: 1rem;

    width: min(var(--max-width), 100% - (var(--spacing) * 2));
    margin-inline: auto;
}


/* Headings */
.heading-primary {
    font-size: var(--fs-heading-primary);
    font-weight: var(--fw-semi-bold);
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 1rem;
}

.heading-secondary {
    font-size: var(--fs-heading-secondary);
    font-weight: var(--fw-semi-bold);
    text-align: center;
    padding-block: 1rem 0.5rem;
}

.heading-tertiary {
    font-size: var(--fs-heading-tertiary);
    font-weight: var(--fw-light);
    text-align: center;
    padding-block: 1rem 0.5rem;
}

.heading-medium {
    font-size: var(--fs-heading-medium);
    font-weight: var(--fw-semi-bold);
    text-align: center;
    padding-block: 1rem 0.5rem;
}

.heading-small {
    font-size: var(--fs-heading-small);
    font-weight: var(--fw-semi-bold);
    text-align: center;
    padding-block: 1rem 0.5rem;
}

@media (min-width: 576px) {
    .heading-primary {
        padding-inline: 2rem;
    }
}

@media (min-width: 768px) {
    .heading-secondary {
        padding-block: 2rem 1rem;
    }

    .heading-tertiary {
        padding-block: 2rem 1rem;
    }
}

@media (min-width: 992px) {
    .heading-primary {
        padding-top: 6rem;
        padding-bottom: 2rem;
    }
}


/*Utility classes*/
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.blurred {
    filter: blur(4px);
}


.no-click {
    pointer-events: none;
}


.p-large {
    font-weight: var(--fw-light);
    font-size: var(--fs-body-large);
}


.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}


.flex {
    display: flex;
}

@media (min-width: 576px) {
    .d-sm-none {
        display: none;
    }

    .d-sm-block {
        display: block;
    }

    .d-sm-flex {
        display: flex;
    }

    .d-sm-inline-block {
        display: inline-block;
    }
}


@media (min-width: 768px) {
    .d-md-none {
        display: none;
    }

    .d-md-block {
        display: block;
    }

    .d-md-flex {
        display: flex;
    }

    .d-md-inline-block {
        display: inline-block;
    }
}

@media (min-width: 992px) {
    .d-lg-none {
        display: none;
    }

    .d-lg-block {
        display: block;
    }

    .d-lg-inline-block {
        display: inline-block;
    }

    .d-lg-flex {
        display: flex;
    }
}


.w-full {
    width: 100%;
}


.m-0 {
    margin: 0
}

.m-5 {
    margin: 1.25rem;
}


.my-5 {
    margin-block: 1.25rem;
}

.mx-3 {
    margin-inline: 0.75rem;
}


.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}


.p-5 {
    padding: 1.25rem
}


.px-3 {
    padding-inline: 0.75rem;
}

.px-4 {
    padding-inline: 1rem;
}

.px-5 {
    padding-inline: 1.25rem;
}


.py-2 {
    padding-block: 0.5rem;
}

.py-5 {
    padding-block: 1.25rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pt-4 {
    padding-top: 1rem
}


.pb-5 {
    padding-bottom: 1.25rem;
}


.text-white {
    color: white;
}

.underline {
    text-decoration-line: underline;
}

.placeholder-lighter::placeholder {
    color: #cccccc; /* Lighter color for placeholder */
    opacity: 1; /* Ensure full opacity */
}