/* ----------------------------------------------------
                    ACCUEIL HERO
---------------------------------------------------- */
.hc-hero-content h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.hc-hero-content h1 > span {
    font-size: 80px;
    font-family: "DM Serif Display";
    font-weight: 400;
    line-height: 87.74px;
}

.hc-hero-content h1 span:nth-child(1) {
    line-height: 36.74px;
    font-size: 64px;
}

.hc-hero-content h1 span:nth-child(2) {
    color: var(--primary-color);
    text-shadow: 0px 20px 30px #157dfe99;
}

.hc-hero-content h1 span:nth-child(3) {
    text-transform: uppercase;
}

.hc-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 80px;
    margin-bottom: 70px;
}

.hc-hero-content #woman-smiling {
    height: 400px;
    position: absolute;
    bottom: 0;
    right: -16px;
    object-fit: contain;
}

@media only screen and (max-width: 1050px) {
    .hc-hero-content {
        margin-top: 100px;
        margin-bottom: 80px;
    }

    .hc-hero-content img {
        width: 220px;
    }

    .hc-hero-content #woman-smiling {
        height: 280px;
        right: 0px;
    }

    .hc-hero-content h1 > span {
        font-size: 60px;
    }
    
    .hc-hero-content h1 span:nth-child(1) {
        font-size: 50px;
    }
}

@media only screen and (max-width: 560px) {
    .hc-hero-content {
        margin-top: 80px;
        margin-bottom: 90px;
    }

    .hc-hero-content img {
        width: 180px;
    }

    .hc-hero-content h1 > span {
        font-size: 36px;
        line-height: 55px;
    }
    
    .hc-hero-content h1 span:nth-child(1) {
        font-size: 28px;
        line-height: 25px;
    }

    .hc-hero-content #woman-smiling {
        height: 220px;
    }
}

/* ----------------------------------------------------
                 ACCUEIL BANNIERE HAUT
---------------------------------------------------- */

.hc-find-your-teacher-banner {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hc-find-your-teacher-banner h2 {
    font-size: 40px;
    font-weight: 400;
    font-family: "DM Serif Display";
}

.hc-find-your-teacher-banner p {
    font-size: 20px;
    margin-top: 5px;
}

.hc-find-your-teacher-banner a {
    margin-top: 32px;
}

/* ----------------------------------------------------
                    ACCUEIL ETAPES
---------------------------------------------------- */

.hc-step-list  {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 64px;
}

.hc-step-list .step {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 110px;
    row-gap: 30px;
    flex-wrap: wrap;
}

.hc-step-list .step[data-step="2"] {
    flex-direction: row-reverse;
}

.hc-step-list .step .picture-part {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--white-background-color);
    border-width: 1px;
    border-color: white;
    border-style: solid;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    width: 371px;
    height: 307px;
}
.hc-step-list .step .text-part {
    width: 272px;
}

.hc-step-list .step .text-part h4 {
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-size: 20px;
    font-family: "DM Serif Display";
    font-weight: 400;
}

.hc-step-list .step .text-part h4 span {
    font-weight: 700;
    font-size: 12px;
    background-color: var(--primary-color);
    padding: 5px 9px;
    color: white;
    border-radius: 100%;
    font-family: 'Inter';
}   

.hc-step-list .step .text-part p {
    font-size: 16px;
    margin-top: 8px;
}

.hc-step-list .search {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 50px;
    row-gap: 45px;
    width: 100%;
    flex-wrap: wrap;
}

.hc-step-list .search .pic-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--white-background-color);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    width: 330px;
}

.hc-step-list .search .pic-part .text-part {
    padding-left: 24px;
    padding-bottom: 16px;
}

.hc-step-list .search .pic-part .text-part h4 {
    margin-bottom: 10px;
    font-size: 20px;
    font-family: "DM Serif Display";
    font-weight: 400;
}

.hc-step-list .search .pic-part .text-part p {
    font-size: 16px;
    padding-right: 60px;
}

.hc-step-list #search-item1-image {
    padding: 48px 0px;
}

.hc-step-list #search-item3-image {
    padding: 68px 0px;
}

.hc-step-list .search .logo-container {
    display: flex;
    background-color: var(--primary-color);
    border-radius: 100px;
    padding: 12px 55px;
    align-items: center;
    gap: 5px;
}

.hc-step-list .search .logo-container p {
    display: flex;
    justify-content: center;
    align-self: center;
    color: white;
    font-weight: 500;
    font-size: 24px;
}

@media only screen and (max-width: 560px) {
    .hc-step-list .step .picture-part {
        width: 100%;
    }

    .hc-step-list .search .pic-part {
        width: 100%;
    }

    .hc-step-list .search .logo-container {
        padding: 10px 40px
    }

    .hc-step-list .search .logo-container p {
        font-size: 18px;
    } 
}

/* ----------------------------------------------------
                   ACCUEIL HISTOIRE
---------------------------------------------------- */

.hc-history-section {
    display: flex;
    width: 100%;
    margin-top: 150px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(21,125,254,0.2) 100%);
    flex-direction: column;
    align-items: center;
    border-radius: 40px;  
    margin-bottom: 100px;
}

.hc-history-section .history-section-content-container {
    display: flex;
    gap: 120px;
    flex-direction: column;
}

.hc-history-section .history-container {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
    padding: 0 20px;
}

.hc-history-section .history-container .pic-part {
    display: flex;
    flex-direction: column;
    width: 470px;
    border-radius: 10px;
}

.hc-history-section .history-container .pic-part img {
    border-start-end-radius: 10px;
    border-start-start-radius: 10px;
    max-width: 100%;
}

.hc-history-section .history-container .pic-part .footer{
    display: flex;
    justify-content: center;
    column-gap: 10px;
    padding: 20px 0px;
    background-color: var(--primary-color);
    border-end-end-radius: 10px;
    border-end-start-radius: 10px;
}

.hc-history-section .history-container .pic-part .footer p {
    font-size: 16px;
    color: white;
}

.hc-history-section .history-container .text-part {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    max-width: 550px;
}

.hc-history-section .history-container .text-part .citation {
    font-size: 16px;
}

.hc-history-section .history-container .text-part .advise {
    font-size: 40px;
}

.hc-history-section .history-container .text-part .color {
    color: var(--primary-color);
}

.hc-history-section .history-container .text-part .from {
    display: flex;
    flex-direction: column;
}

.hc-history-section .history-container .text-part .from span:nth-child(1) {
    font-size: 20px;
}


.hc-history-section .become-teacher-banner {
    display: flex;
    border-radius: 10px;
    border: 1px solid white;
    background-color: #FFFFFF4d;
    backdrop-filter: blur(10px);
    padding: 100px 30px 0 100px;
    min-height: 500px;
    margin-bottom: -100px;
    gap: 20px;
    flex-wrap: wrap;
    row-gap: 40px;
}

.hc-history-section .become-teacher-banner .text-part {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    max-width: 500px;
}

.hc-history-section .become-teacher-banner .text-part h4 {
    font-size: 48px;
}

.hc-history-section .become-teacher-banner .text-part p {
    font-size: 20px;
}

.hc-history-section .become-teacher-banner img {
    object-fit: contain;
    align-self: end;
}

@media only screen and (max-width: 560px) {
    .hc-history-section .history-container .pic-part {
        width: 100%;
    }  

    .hc-history-section .become-teacher-banner {
        padding: 80px 30px 0 30px;
    }

    .hc-history-section .become-teacher-banner img {
        width: 240px;
    }

}

/* ----------------------------------------------------
                   ACCUEIL AVIS
---------------------------------------------------- */

.hc-reviews-section-fullwidth {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    width: 100%;
    overflow: hidden;
}

.hc-reviews-section {
    display: flex;
    width: 100%;
    max-width: var(--max-page-width);
}

.hc-reviews-section-container-wrap {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 20px;
    flex-wrap: wrap;
    row-gap: 60px;
}

.hc-reviews-section .left-part {
    display: flex;
    flex-direction: column;
    gap: 35px;
    flex-grow: 1;
    min-width: 260px;
    max-width: 500px;
    justify-content: center;
}

.hc-reviews-section .left-part h4 {
    font-size: 40px;
}

.hc-reviews-section .left-part p:nth-child(2) {
    font-size: 20px;
}

.hc-reviews-section .right-part {
    max-width: 550px;
}

.hc-reviews-section .right-part-content {
    position: relative;
}

.hc-reviews-section .right-part .background {
    position: absolute;
    right: 0;
    height: 100%;
    width: 90%;
    background: linear-gradient(260deg, rgba(0,0,0,0) 0%, rgba(0,133,255,0.2) 100%);
    border-start-start-radius: 20px;
    border-end-start-radius: 20px;
}

.hc-reviews-section .right-part .card-list {
    display: flex;
    gap: 25px;
    position: relative;
    padding: 65px 0px;
    width: 650px;
    overflow: visible;
}

.hc-reviews-section .right-part .card-list .card {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 20px 0px #157dfe40;
    border: 1px solid white;
    background-color: #FFFFFF4D;
    flex-grow: 1;
    width: 400px;
    min-width: 400px;
}

.hc-reviews-section .right-part .card[data-card="1"] {
    background-color: white;
    border: none;
}

.hc-reviews-section .right-part .card .profil {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-top: 40px;
}

.hc-reviews-section .right-part .card .profil p {
    font-weight: 500;
}

.hc-reviews-section .right-part .card .chat-quote {
    width: 50px;
    margin-bottom: 20px;
}

.hc-reviews-section .right-part .card .profil-pic {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 40px;
    border-radius: 10px;
}

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

    .hc-reviews-section .left-part {
        min-width: 0px;
    }
    
    .hc-reviews-section .right-part .card-list {
        width: 250px;
    }

}

/* ----------------------------------------------------
                   ACCUEIL BLOG
---------------------------------------------------- */

.hc-blog-cards-section {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
    margin-top: 120px;
}

.hc-blog-cards-section h3 {
    font-weight: 'Inter';
    font-size: 32px;
}

.hc-blog-cards-container {
    display: flex;
    column-gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 40px;
}


.hc-blog-cards-container .blog-card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-width: 370px;
    min-width: 370px;
    text-decoration: none;
    color: black;
}

.hc-blog-cards-container .blog-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-start-end-radius: 10px;
    border-start-start-radius: 10px;
}

.hc-blog-cards-container .blog-card:hover img {
    filter: brightness(0.8);
    transition: filter 0.3s ease;
}

.hc-blog-cards-container .blog-card:hover h4 {
    color: var(--primary-color);
}

.hc-blog-cards-container .blog-card .text-part {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 25px;
    border-end-end-radius: 10px;
    border-end-start-radius: 10px;
}

.hc-blog-cards-container .blog-card .text-part h4 {
    font-family: 'Inter';
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.hc-blog-cards-container .blog-card .text-part .description {
    font-family: 'Inter';
    color: #444444;
    font-size: 16px;
    margin-bottom: 25px;
}

.hc-blog-cards-container .blog-card .text-part .blog-card-infos {
    display: flex;
    justify-content: space-evenly;
    font-family: 'Inter';
    font-size: 12px;
    gap: 8px;
    align-items: center;
}

.hc-blog-cards-container .blog-card hr {
    height: 15px;
    opacity: 0.5;
}

@media only screen and (max-width: 560px) {
    .hc-blog-cards-container .blog-card {
        max-width: 370px;
        min-width: 0px;
    }

    .hc-blog-cards-container .blog-card .text-part h4 {
        font-size: 20px;
    }

    .hc-blog-cards-container .blog-card .text-part {
        padding: 15px;
    }

    .hc-blog-cards-container .blog-card .text-part .description {
        font-size: 14px;
    }
}

/* ----------------------------------------------------
                   ACCUEIL BOUTONS
---------------------------------------------------- */

.hc-icon-button-list {
    margin-top: 120px;
    width: 100%;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.hc-icon-button-list h3 {
    font-size: 32px;
    text-align: center;
    margin-bottom: 32px;
}

.hc-icon-button-list .line {
    display: flex;
    justify-content: center;
    gap: 50px;
    width: 100%;
    overflow: hidden;
}

.hc-icon-button-list .line .icon-button {
    border: 1px solid #D7EAFE;
    padding: 12px 24px;
    border-radius: 10px;
    background-color: white;
    white-space: nowrap;
    text-decoration: none;
    color: black;
}

.hc-icon-button-list .line .icon-button:hover {
    background-color: #D7EAFE;
}

@media only screen and (max-width: 1050px) {
    .hc-icon-button-list .line {
        gap: 30px;
    }
}

@media only screen and (max-width: 560px) {
    .hc-icon-button-list .line {
        gap: 15px;
        flex-direction: column;
    }

}

/* ----------------------------------------------------
                 ACCUEIL BANNIERE BAS
---------------------------------------------------- */

.hc-learn-now-banner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 70px 20px;
    background-color: var(--primary-color);
    gap: 30px;
    width: 100%;
    margin-top: 100px;
}

.hc-learn-now-banner h4 {
    font-size: 32px;
    font-weight: 600;
    color: white;
}

.hc-learn-now-banner .button {
    padding: 12px 35px;
    background-color: white;
    border-radius: 100px;
    cursor: pointer;
    white-space: nowrap;
}

@media only screen and (max-width: 560px) {
    .hc-learn-now-banner {
        flex-wrap: wrap;
    }

}

/* ----------------------------------------------------
                 ACCUEIL TITRE CPF
---------------------------------------------------- */

.hc-cpf-teachers-list {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hc-cpf-teachers-list .hc-cpf-teachers-list-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    column-gap: 10px;
}

.hc-cpf-teachers-list .hc-cpf-teachers-list-title span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.hc-cpf-teachers-list .hc-cpf-teachers-list-title h2 {
    font-size: 40px;
    font-family: "DM Serif Display";
    font-weight: 400;
}

.hc-cpf-teachers-list .hc-cpf-teachers-list-title h2 span {
    font-family: "DM Serif Display";
}

.hc-cpf-teachers-list .hc-cpf-teachers-list-title .medal-icon {
    background-color: var(--accent-color);
    padding: 10px;
    border-radius: 100px;
    width: 48px;
    height: 48px;
}

.hc-cpf-teachers-list .hc-cpf-teachers-list-subtitle {
    font-size: 20px;
    margin-top: 5px;
    text-align: center;
}

/* ----------------------------------------------------
                        FOOTER
---------------------------------------------------- */
.hc-footer {
    margin-top: 0px;
    width: 100%;
    font-family: 'Inter';
    font-size: 16px;
    font-weight: 400;
}

.hc-footer .footer-content-container {
    display: flex;
    background-color: white;
    justify-content: center;
}

.hc-footer .footer-content {
    display: flex;
    column-gap: 40px;
    row-gap: 80px;
    padding: 80px 30px;
    width: 100%;
    max-width: var(--max-page-width);
    flex-wrap: wrap;
}

.hc-footer .footer-content .footer-col {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.hc-footer .footer-content .footer-col .footer-links-container {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    row-gap: 10px;
}

.hc-footer .footer-content .footer-col .footer-links-container a {
    color: #444444;
    text-decoration: none;
    font-size: 16px;
}

.hc-footer .footer-content .footer-col .footer-links-container a:hover {
    text-decoration: underline;
}

.hc-footer .footer-content .footer-col .footer-links-container .mail {
    position: relative;
}

.hc-footer .footer-content .footer-col .footer-links-container .mail input {
    padding: 16px 20px;
    border-radius: 100px;
    border: none;
    outline: none;
    background-color: #EEF7FE;
    min-width: 250px;
}

.hc-footer .footer-content .footer-col .footer-links-container .mail button {
    display: flex;
    position: absolute;
    border-radius: 100px;
    right: 6px;
    top: 4px;
    height: 40px;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: var(--bg-border-color);
    border: none;
}

.hc-footer .logo-col {
    flex-grow: 1;
}

.hc-footer .footer-content .logo-col .logo {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hc-footer .footer-content .logo-col .logo p {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 24px;
}

.hc-footer .footer-content .logo-col p {
    width: fit-content;
    display: block;
}

.hc-footer .footer-content .logo-col .social-icon {
    display: flex;
    gap: 10px;
    align-items: center;
}

.hc-footer .footer-content .footer-col > p {
    font-weight: 700;
    font-size: 18px;
}

.hc-footer .copyright {
    display: flex;
    justify-content: center;
    padding-bottom: 140px;
    padding-top: 25px;
}

.hc-footer .copyright p {
    color: #444444;
    text-align: center;
    padding: 0 20px;
}