/* FLAT DESCRIPTION STYLES */

#main-home-page-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5em;
    background: linear-gradient(0deg,var(--main-bg) 0%, var(--surface-muted) 33%, var(--surface-muted) 66%, var(--main-bg) 100%);
}

#main-home-page-content-wrapper > h1 {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 1.5em;
}

.desc-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5em;
}

.desc-container:nth-child(odd) {
    flex-direction: row-reverse;
}

.desc-container-btn {
    background-color: color-mix(in hsl, var(--button-primary) 60%, transparent 40%);
    color: var(--button-primary-text);

    margin-top: 1.5em;
    padding: .5em;

    transition: background-color .2s ease-out, cursor 1s ease-out;
}

.desc-container-btn:hover {
    cursor: pointer;
    background-color: color-mix(in hsl, var(--button-primary-hover) 70%, transparent 30%);
}

.desc-container-dialog {
    position: fixed;
    z-index: 999999999;

    border: 2px solid color-mix(in hsl, var(--surface-hover) 80%, black 20%);
    border-radius: 2em;

    overflow-y: auto;

    max-width: 30em;
    background-color: var(--surface-muted);
}

.desc-container-dialog h2 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-block: .5em;
}

.desc-container-dialog .cross-icon{
    position: absolute;
    border-bottom-right-radius: .2em;
    background-color: var(--surface-muted);
}

.desc-container-dialog .cross-icon:hover {
    cursor: pointer;
}

.dialog-content {
    height: 80vh;
    width: 100%;

    padding: 1.75em 1em;

    overflow-y: scroll;
}

.dialog-content::-webkit-scrollbar-thumb {
    background-color: color-mix(in hsl, var(--surface-hover) 90%, black 10%);
    border-radius: 1em;
}

.dialog-content::-webkit-scrollbar {
    background-color: transparent;
    width: .5em;
}




.text-content {
    display: flex;
    flex-direction: column;
    max-width: 35em;
}

.text-content h2 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: .5em;
}

.desc-img{
    height: 20em;
    width: auto;
}

/* FLAT DESCRIPTION STYLES */

/* FAQ */

#faq-wrapper {
    display: flex;
    flex-direction: column;

    align-items: center;

    margin-top: 7.5em;
    margin-bottom: 5em;

    gap: 2em;
}

#faq-wrapper a {
    color: var(--text-secondary);
    text-decoration: underline;
    user-select: auto;
    

    transition: color .2s ease-out;
}

#faq-wrapper a:hover {
    color: color-mix(in hsl, var(--text-secondary) 60%, black 40%)
}

#faq-header {
    display: flex;
    flex-direction: column;
    width: 80%;
}

#faq {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-secondary);
}

#faq-pl {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.faq-container {
    width: 80vw;
    padding: 1em;

    border-radius: 1.5em;
    border: 1px solid transparent;

    background-color: var(--surface-muted);
}

.faq-container:hover {
    cursor: pointer;
}

.faq-container-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;

    margin-inline: 2.5em;

    height: 2em;

    gap: 2.5em;

    transition: height .2s ease-out;
}

.faq-container-content-wrapper * {
    user-select: none;
}

.faq-container-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    font-size: 1.5rem;
    font-weight: 500;
}

.faq-container-description{
    display: none;
}

.faq-icons-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.faq-icon {
    height: 32px;
    width: auto;
}

.minus-icon {
    display: none;
}

/* FAQ */

/* MAP & LOCATION */

#map-wrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    margin-bottom: 10em;
}

#map {
    border-radius: 1em;

    height: 30em;
    width: 60vw;
}

#location {
    display: flex;
    flex-direction: column;
    gap: .5em;

    font-size: .8rem;

    background-color: var(--surface-muted);
    padding: 1.5em;
    border-radius: 1em;

    width: 15vw;
}

#location-text-header {
    font-size: 1.1rem;
    font-weight: 600;
}

.fake-separator {
    width: 100%;
    height: .1em;

    border-bottom: solid 1px color-mix(in hsl, var(--surface-hover) 80%, black 20%);
}

.fake-separator:last-child {
    display: none;
    width: 0px !important;
    height: 0px !important;
    border-bottom: none !important;
}


/* MAP & LOCATION */

/* MOBILE DEVICES */

@media (max-width: 1000px) {
    #map-wrapper {
        flex-direction: column;
        gap: 2em;

        overflow-x: hidden;
    }

    #map {
        width: 90vw;
    }

    #location {
        width: 30em;
    }
}

@media (max-width: 750px) {

    #main-home-page-content-wrapper > h1, .text-content {
        margin-left: .75em !important;
    }

    .desc-container {
        flex-direction: column !important;
    }

    .desc-container-btn {
        margin-left: 2em;
    }

    #map {
        width: 100vw;
    }

    
}



/* MOBILE DEVICES */