/*
|--------------------------------------------------------------------------
| First section (Hero section)
|--------------------------------------------------------------------------
*/
@media (min-width: 1024px) {
    #section-1 {
        background-image: var(--bg-section-1);
        background-position: center;
        background-size: cover;
    }

    #section-1-form {
        position: absolute;
        bottom: calc(-5% - 2rem);
        z-index: 10;
        left: 5%;
    }

    #play-button {
        position: absolute;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        bottom: 25%;
        right: -5%;
    }
}
@media (min-width: 1140px) {
    #section-1-form {
        left: 10%;
    }
}
@media (min-width: 1280px) {
    #section-1-form {
        left: 20%;
    }
}
.changing-title__animated {
    transition: all 1s ease;
    animation: 1s fadeIn ease;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/*
|--------------------------------------------------------------------------
| When i'm at the Section 3: Call to action bar appears
|--------------------------------------------------------------------------
*/
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: translateZ(0);
    }
}
.fadeInLeft {
    animation: fadeInLeft 1s ease;
}
@keyframes fadeInRight {
    from {
        opacity: 1;
        transform: translateZ(0);
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}
.fadeInRight {
    animation: fadeInRight 1s ease;
}
/*
|--------------------------------------------------------------------------
| Section 4 (Why choose EGCI?)
|--------------------------------------------------------------------------
*/
@media (min-width: 1280px) {
    #section-4-title {
        font-size: 2.75rem;
    }
}
/*
|--------------------------------------------------------------------------
| Section 5 (What we offer?)
|--------------------------------------------------------------------------
*/
.liquid-hover-card {
    position: relative;
    background: #fff;
    border-radius: 1rem;
    transition: all 500ms ease;
    z-index: 1;
    width: 100%;
    height: 18rem;
    margin-left: auto;
    margin-right: auto;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.liquid-hover-card__inner {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 8rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2.5rem;
    border-radius: 1rem;
    overflow: hidden;
    z-index: 1;
}
.liquid-hover-card__inner::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    background: linear-gradient(to right, #2c2486, #3f2dae);
    border-radius: 1rem;
    transition: all 500ms ease;
    transform: translate3d(0px, 100%, 0px);
    z-index: -1;
    width: 100%;
    height: 100%;
}
.liquid-hover-card__image {
    position: absolute;
    width: 7rem;
    height: 7rem;
    -o-object-fit: cover;
       object-fit: cover;
    top: -0.6rem;
    left: -0.6rem;
    z-index: -1;
    border-bottom-right-radius: 100%;
    border-bottom-left-radius: 100%;
    border-top-right-radius: 100%;
    border: 4px solid #2c2486;
    transition: all 500ms ease;
}
.liquid-hover-card__number {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1rem;
    margin-right: 2rem;
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    color: #4329b3;
    transition: all 500ms ease;
}
.liquid-hover-card__title {
    color: #4329b3;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    transition: all 500ms ease;
}
.liquid-hover-card__description {
    margin-top: 0.5rem;
    font-size: 1rem;
    text-align: center;
    transition: all 500ms ease;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.liquid-hover-card:hover {
    transform: translateY(-10px);
}
.liquid-hover-card:hover .liquid-hover-card__inner::before {
    transform: translate3d(0px, 0, 0px);
}
.liquid-hover-card:hover .liquid-hover-card__image {
    border: 4px solid #7d7dfb;
}
.liquid-hover-card:hover .liquid-hover-card__number {
    color: #7d7dfb;
}
.liquid-hover-card:hover .liquid-hover-card__title {
    color: white;
}
.liquid-hover-card:hover .liquid-hover-card__description {
    color: white;
}
/*
|--------------------------------------------------------------------------
| 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;
}