/*
|--------------------------------------------------------------------------
| Section 1 (Hero section)
|--------------------------------------------------------------------------
*/

@keyframes circleFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.circleButtonThatAppear_sticky {
    position: fixed;
    right: 0;
    bottom: 3rem;
    z-index: 100;
    animation: circleFadeIn 1s ease-in-out;
}

@media (min-width: 1024px) {
    .circleButtonThatAppear_sticky {
        bottom: 1rem;
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

/*
|--------------------------------------------------------------------------
| Section 5 (Course content)
|--------------------------------------------------------------------------
*/

#section-5 details {
    overflow: hidden;
    position: relative;
}

#section-5 details > summary {
    list-style: none;
}

#section-5 details > summary::marker,
#section-5 details > summary::-webkit-details-marker {
    display: none;
}

#section-5 summary {
    transition-property: color, font-weight;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    cursor: pointer;
}

#section-5 summary::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff' class='w-6 h-6'%3E%3Cpath fill-rule='evenodd' d='M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
    right: 0;
    top: 0;
    position: absolute;
    color: #fff;
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 0.25rem;
    margin-top: 0.675rem;
    margin-right: 1rem;
}

#section-5 details[open] > summary {
    font-weight: 600;
}

#section-5 details[open] > summary::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' class='w-6 h-6'%3E%3Cpath fill-rule='evenodd' d='M3.75 12a.75.75 0 01.75-.75h15a.75.75 0 010 1.5h-15a.75.75 0 01-.75-.75z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
}

/*
|--------------------------------------------------------------------------
| Section 12 (FAQ)
|--------------------------------------------------------------------------
*/

#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;
}

/*
|--------------------------------------------------------------------------
| More info bar that appear.
|--------------------------------------------------------------------------
*/

@keyframes bar_fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

.bar_fadeInLeft {
    animation: bar_fadeInLeft 1s;
}

@keyframes bar_fadeInLeftToDissapear {
    0% {
        opacity: 1;
        transform: translateZ(0);
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}

.bar_fadeInLeftToDissapear {
    animation: bar_fadeInLeftToDissapear 1s;
}