.faq .container .faq-title{
    font-family: var(---outfit-font);
    font-size: var(---title-font);
    color: var(---menu-bg-color);
    margin-bottom: 15px;
}

.faq .container{
    padding: 20px 0;
}

.faq-content .faq-content-box {
    border-top: 1px solid #DDDDDD;
    display: grid;
    grid-template-columns: repeat(12, 1fr); 
    align-items: center;
    gap: 20px; 
    padding: 20px 10px;
    border-bottom: 1px solid #DDDDDD;
}

.faq-content .faq-content-box .faq-content-box-left {
    grid-column: span 4; 
}

.faq-content .faq-content-box .faq-content-box-left span{
    font-family: var(---outfit-font);
    color: var(---menu-bg-color);
    text-align: justify;
}

.faq-content .faq-content-box .faq-content-box-right {
    grid-column: span 8; 
}

.faq-content .faq-content-box .faq-content-box-right span{
    font-family: var(---outfit-font);
    color: var(---notices-date-bg-color);
    text-align: justify;
    display: block;
}


/* MOBILE VIEW */
@media (max-width: 768px) {
    .faq .container {
        padding: 20px; 
    }

    .faq-content .faq-content-box {
        grid-template-columns: 1fr; 
        padding: 10px 0;
    }

    .faq-content .faq-content-box .faq-content-box-left,
    .faq-content .faq-content-box .faq-content-box-right {
        grid-column: span 1; 
    }

    .faq-content .faq-content-box .faq-content-box-left span,
    .faq-content .faq-content-box .faq-content-box-right span {
        font-size: 1rem;
        text-align: justify; 
    }
}



/* TABLET VIEW */
@media (min-width: 768px) and (max-width: 1024px) {
    .faq .container {
        padding: 15px 0; 
    }

    .faq-content .faq-content-box {
        grid-template-columns: repeat(12, 1fr); 
        gap: 15px; 
        padding: 15px; 
    }

    .faq-content .faq-content-box .faq-content-box-left {
        grid-column: span 4;
    }

    .faq-content .faq-content-box .faq-content-box-right {
        grid-column: span 8; 
    }

    .faq-content .faq-content-box .faq-content-box-left span,
    .faq-content .faq-content-box .faq-content-box-right span {
        font-size: 1.2rem; 
        text-align: justify;
    }
}