:root {
    --primary-bg-color: rgb(255, 255, 255);
    --secondary-bg-color: rgba(241, 241, 241, 0.945);;
    --primary-text-color: rgb(35, 35, 35);
    --primary-accent-color: rgb(239, 91, 80);
    --secondary-accent-color: rgb(255, 198, 92);
}

#faq-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    box-sizing: border-box;
    width: 100vw;
    height: fit-content;
    padding: 2vh 5vw 5vh 5vw;
    gap: 1vw;
}

#image {
    display: flex;
    border-radius: 30px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80");
    width: fill;
    height: fill;
    align-items: center;
}

#image .heading {
    margin: auto auto;
}

#faq-container button {
    font-size: clamp(1.5rem, 1.2vw, 100rem);
}

#faq-container p {
    font-size: clamp(1rem, 1vw, 100rem);
    padding: 1vw 0%;
}

.accordion {
    width: 100%;
    padding: 1vw;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color: var(--secondary-bg-color);
    text-align: left;
    font-family: var(--font), sans-serif;
    transition: 0.4s;
    cursor: pointer;
}

.accordion::after {
    content: "\002B"; /* Unicode character for "plus" sign (+) */
    color: var(--primary-text-color);
    font-size: clamp(1.5rem, 1.2vw, 100rem);
    float: right;
    margin-left: 3vw;
  }
  
  .active::after {
    content: "\2212"; /* Unicode character for "minus" sign (-) */
    color: var(--primary-text-color);
  }

.active, .accordion:hover {
    border-radius: 10px 10px 0 0;
    background-color: var(--primary-accent-color);
}

.panel {
    max-height: 0px;
    padding: 0 1vw;
    margin-bottom: 1rem;
    background-color: var(--secondary-bg-color);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    transition: 200ms;
}

/* Mobile resrictions */
@media screen and (max-width: 600px) {

    #image {
        padding-top: 3vh;
        margin-bottom: 2vh;
        border-radius: 10px;
    }

    #faq-container {
        display: block;
    }

    .accordion {
        padding: 4vw;
    }

    .accordion:hover {
        border-radius: 10px;
        background-color: var(--secondary-bg-color);
    }

    .active {
        border-radius: 10px 10px 0 0 !important;
        background-color: var(--primary-accent-color) !important;
    }

    #faq-container p {
        font-size: clamp(1rem, 1vw, 100rem);
        padding: 5vw;
        text-wrap: wrap;
    }
    
}