.page-contact-wrapper{
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    .contact-title{
        height: 35px;
    }
    .box-wrapper{
        border-radius: 16px;
        border: 1px solid #EAEAEA;
        background: #ffffff;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        padding: 40px 20px;
    }
    .href-hover:hover{
        color: #FBB516;
    }
    .contact-question{
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 50px;
    }
    .contact-guide{
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 50px;
    }
    #questionItem{
        cursor: pointer;
    }
    .question-list{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .question-item:not(:last-child){
        padding-bottom: 15px;
        border-bottom: 2px solid #3A1B49;
    }
    .arrow-icon{
        width: 14px;
        height: 8px;
        cursor: pointer;
        transition: transform 0.3s;
    }
    .arrow-up {
        transform: rotate(180deg);
    }
    .question-answer {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        padding: 0 20px;
        margin-top: 5px;
    }

    .question-item.open .question-answer {
        max-height: 400px;
        opacity: 1;
    }
    .contact-additional{
        text-align: center;
    }
    .social-icons {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin: 10px 0;
        .footer-link-icon{
            width: 25px;
            height: 25px;
        }
        img{
          width: 50px;
          height: 50px;
        }
    }
}
@media screen and (max-width: 1200px) {
    .page-contact-wrapper{
        .contact-title{
            font-size: 24px;
        }
    }
}
@media screen and (max-width: 992px) {
    .page-contact-wrapper{
        .contact-title{
            height: auto;
            width: 40%;
        }
        .box-wrapper{
            padding: 20px;
        }
        .contact-question{
            grid-template-columns: 1fr;
            gap: 20px
        }
        .contact-guide{
            grid-template-columns: 1fr;
            gap: 20px
        }
    }
}
@media screen and (max-width: 768px) {
    .page-contact-wrapper{
        .contact-title{
            width: 48%;
        }
        .question-list{
            gap: 10px;
        }
        .question-item:not(:last-child) {
            padding-bottom: 8px;
        }
        .text-size-normal{
            width: 80%;
        }
    }
}
@media screen and (max-width: 500px) {
    .page-contact-wrapper {
        .contact-title {
            width: 70%;
        }
    }
}