/*
|--------------------------------------------------------------------------
| First section (Hero section)
|--------------------------------------------------------------------------
*/
@media (min-width: 1024px) {
    #first-section {
        height: 800px;
    }
    #play-button {
        top: 75%;
        left: 35%;
    }
    #hero-image {
        width: 85%;
    }
}
/*
|--------------------------------------------------------------------------
| Section 4 (Laptop)
|--------------------------------------------------------------------------
*/
@media (min-width: 640px) {
    .laptop-image {
        width: 75%;
    }
}
@media (min-width: 1024px) {
    .laptop-image {
        position: absolute;
        top: 15%;
    }

    .laptop-image:hover {
        transform: translateX(-6rem);
    }
}
@media (min-width: 1280px) {
    .laptop-image {
        top: 0;
    }
}
/*
|--------------------------------------------------------------------------
| Price Section
|--------------------------------------------------------------------------
*/
.price-card:hover > .price-card__price {
    background: linear-gradient(to right, #625be1, #9e00a4);
    color: #fff;
}
.price-card:hover .price_card__button {
    background: linear-gradient(to right, #625be1, #9e00a4);
    border-color: transparent;
    color: #fff;
}
@media (min-width: 1024px) {
    #price-card-best-choice {
        height: 29rem;
    }
}
/*
|--------------------------------------------------------------------------
| FAQ Section
|--------------------------------------------------------------------------
*/
#section-faq details {
    overflow: hidden;
    position: relative;
}
#section-faq details > summary {
    list-style: none;
}
#section-faq details > summary::marker,
#section-faq details > summary::-webkit-details-marker {
    display: none;
}
#section-faq summary {
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    cursor: pointer;
}
#section-faq summary::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5' /%3E%3C/svg%3E%0A");
    position: absolute;
    right: 0;
    top: 0;
    color: rgb(55 65 81);
    height: 2rem;
    width: 2rem;
    border-radius: 0.25rem;
    margin-top: 1.25rem;
    margin-right: 1rem;
    opacity: 0.5;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
#section-faq details[open] > summary {
    color: #000;
}
#section-faq details[open] > summary::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
    opacity: 1;
}