#music_download {

    cursor: pointer;

}

.main-form {

    position: relative;

    width: 800px;

    max-width: 100%;

    margin-top: 20px;

    display: flex;

    justify-content: space-between;

}

@media screen and (max-width: 767px) {

    .main-form {

        flex-direction: column;

    }
    
}

.main-form input,
.main-form .download-btn {

    border-radius: 6px;

    height: 50px;

}

.main-form input:focus,
.main-form button:focus {

    outline: none;

}

.main-form input {

    width: calc(100% - 160px);
    
    padding: 0 15px;

    border: none;

    background-color: white;

}

@media screen and (max-width: 767px) {

    .main-form input {

        width: 100%;

        margin-bottom: 15px;

    }

}

.main-form .download-btn {

    width: 150px;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #01BE63;

    font-weight: 600;

    font-size: 18px;

    color: white;

}

@media screen and (max-width: 767px) {

    .main-form .download-btn {

        margin: 0 auto;

    }

}

.main-form .download-btn svg {

    margin-left: -5px;

    margin-right: 5px;

}

.main-form .paste-btn {

    position: absolute;

    right: 180px;

    top: 10px;

    width: 50px;

    height: 30px;

    background-color: #DAE4FE;

    border-radius: 6px;

    font-size: 14px;

    font-weight: 600;

    color: #0423ee;

}

@media screen and (max-width: 767px) {

    .main-form .paste-btn {

       right: 15px;

    }

}

.paste-btn.active {

    background-color: #6C6B79;

    color: white;

}

.sec {

    padding: 0 15px;

}

.sec-heading {

    margin-bottom: 10px;

    font-weight: bold;

    font-size: 20px;

}

.chapter-heading {

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 10px;

}

.sec p {

    margin-bottom: 10px;

    line-height: 1.7;

}

.sec img {

    margin: 20px 0;

    display: block;

}

.sub-title {

    margin-bottom: 10px;

    font-size: 18px;

    font-weight: 600;

}

.sec .list {

    list-style: disc;

    padding-left: 40px;

}

.sec .list li {

    margin-bottom: 10px;

    line-height: 1.7;

}

.faq {

    margin-bottom: 20px;

    box-shadow: 0 0 1px 1px rgb(0 0 0 / 8%);

    border-radius: 6px;

}

.faq:first-of-type {

    margin-top: 30px;

}

.faq .faq-question {

    width: 100%;

    padding: 10px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: #3488CE;

    border-radius: 6px;

    color: white;

}

@media screen and (max-width: 767px) {

    .faq .faq-question {

        padding: 5px 10px;

        text-align: left;

    }

}

.faq .faq-question .arrow {

    width: 10px;

    height: 10px;

    border: 3px solid white;

    border-left: honeydew;

    border-top: none;

    transform: rotate(45deg);

    transition: .3s ease-in-out;

}

@media screen and (max-width: 767px) {

    .faq .faq-question .arrow {

        margin-left: 15px;

    }

}

.faq .faq-question.active .arrow {

    transform: rotate(225deg);

}

.faq .outer {

    overflow: hidden;

    max-height: 0;

    transition: .3s ease-in-out;

}

.faq .faq-desc {

    margin: 0;

    padding: 20px 30px;

    line-height: 2;

}

@media screen and (max-width: 767px) {

    .faq .faq-desc {

        padding: 10px 15px;

    }

}

.faq .faq-question.active + .outer {

    max-height: 1000px;

}

.footer {

    border-top: 1px solid #ccc;

    padding: 30px 15px;

    background-color: #F3F4F6;

}

.footer .foots {

    display: flex;

}

@media screen and (max-width: 767px) {

    .footer .foots {

        flex-direction: column;

        row-gap: 20px;

    }

}

.footer .foot {

    width: 33.6666667%;

}

@media screen and (max-width: 767px) {

    .footer .foot {
    
        width: 100%;

    }

}

.footer .foot h3 {

    margin-bottom: 5px;

    font-size: 18px;

    font-weight: bold;

}

.footer .foot a {

    display: block;

    padding-top: 10px;

}

.footer .copyright {

    margin-top: 30px;

    text-align: center;

}

.footer .copyright a {

    color: #3488CE;

}