/* Responsive styles for different screen sizes */

/* Mobile devices (up to 576px) */
@media (max-width: 576px) {
    .hero {
        display: unset;
    }

    .hero-img-div {
        margin-top: 40px;
    }

    .hero-img-div div {
        height: 241px;
        flex: 1 !important;
    }


    .hero-img-div div:first-child img {
        width: 140%;
    }

    .bgblack {
        padding: 10px;
        margin: 0;
    }

    button,
    .bg-grid button,
    section button {
        max-width: 100%;
        width: 100%;
    }

    .hero {
        height: auto;
    }

    h1 {
        font-size: 54px;
        position: relative;
        line-height: 65px;
        top: 40px;
    }

    h2 {
        font-size: 42px;
        margin-bottom: 20px;
        line-height: 40px;
    }

    .hero div:nth-child(1) p {
        margin-top: 40px;
    }

    #faqAccordion,
    .avantages-container {
        width: 100%;
        padding: 10px;
    }

    .img-continer,
    .content-colone,
    .tarfication {
        width: 100%;
    }

    .inscription,
    .avantages {
        width: 100%;
        margin-left: 0;
    }

    .accordion-button {
        font-size: 20px;
        line-height: 20px;
        padding: 50px 20px;
    }

    .bg-grid div:nth-child(2) {
        height: 300px;
    }

    .grid-3 {
        grid-template-columns: unset;
    }

    body {
        overflow-x: hidden;
    }

    .text-center {
        text-align: left !important;
    }



    .content-colone {
        padding: 15px;
    }

    .bg-grid div:nth-child(2) img {
        width: 100%;
        left: 0;
    }

    #forfaits .smal-img-container {
        overflow: hidden;
    }

    #forfaits .smal-img-container img {
        width: 80% !important;
        bottom: -10px !important;
        position: absolute;
        left: 50px !important;
    }
}

/* Tablet devices (up to 768px) */
@media (max-width: 768px) {
    .hero {
        display: unset;
    }

    .hero-img-div {
        margin-top: 40px;
    }

    .hero-img-div div {
        height: 241px;
        flex: 1 !important;
    }


    .hero-img-div div:first-child img {
        width: 140%;
    }

    .bgblack {
        padding: 10px;
        margin: 0;
    }

    button,
    .bg-grid button,
    section button {
        max-width: 100%;
        width: 100%;
    }

    .hero {
        height: auto;
    }

    h1 {
        font-size: 54px;
        position: relative;
        line-height: 65px;
        top: 40px;
    }

    h2 {
        font-size: 42px;
        margin-bottom: 20px;
        line-height: 40px;
    }

    .hero div:nth-child(1) p {
        margin-top: 40px;
    }

    #faqAccordion,
    .avantages-container {
        width: 100%;
        padding: 10px;
    }

    .img-continer,
    .content-colone,
    .tarfication {
        width: 100%;
    }

    .inscription,
    .avantages {
        width: 100%;
        margin-left: 0;
    }

    .accordion-button {
        font-size: 20px;
        line-height: 20px;
        padding: 50px 20px;
    }

    .bg-grid div:nth-child(2) {
        height: 300px;
    }

    .grid-3 {
        grid-template-columns: unset;
    }

    body {
        overflow-x: hidden;
    }

    .text-center {
        text-align: left !important;
    }

    .content-colone {
        padding: 15px;
    }

    .bg-grid div:nth-child(2) img {
        width: 100%;
        left: 0;
    }

    #forfaits .smal-img-container img {
        width: 80% !important;
        bottom: -20px !important;
        position: absolute;
        left: 50px !important;
    }

    #forfaits .smal-img-container {
        overflow: hidden;
    }
}

/* Small desktop (up to 992px) */
@media (max-width: 992px) {
    .hero {
        display: unset;
    }

    .hero-img-div {
        margin-top: 40px;
    }

    .hero-img-div div {
        height: 241px;
        flex: 1 !important;
    }


    .hero-img-div div:first-child img {
        width: 140%;
    }

    .bgblack {
        padding: 10px;
        margin: 0;
    }

    button,
    .bg-grid button,
    section button {
        max-width: 100%;
        width: 100%;
    }

    .hero {
        height: auto;
    }

    h1 {
        font-size: 54px;
        position: relative;
        line-height: 65px;
        top: 40px;
    }

    h2 {
        font-size: 42px;
        margin-bottom: 20px;
        line-height: 40px;
    }

    .hero div:nth-child(1) p {
        margin-top: 40px;
    }

    #faqAccordion,
    .avantages-container {
        width: 100%;
        padding: 10px;
    }

    .img-continer,
    .content-colone,
    .tarfication {
        width: 100%;
    }

    .inscription,
    .avantages {
        width: 100%;
        margin-left: 0;
    }

    .accordion-button {
        font-size: 20px;
        line-height: 20px;
        padding: 50px 20px;
    }

    .bg-grid div:nth-child(2) {
        height: 300px;
    }

    .grid-3 {
        grid-template-columns: unset;
    }

    body {
        overflow-x: hidden;
    }

    .text-center {
        text-align: left !important;
    }

    .content-colone {
        padding: 15px;
    }

    .bg-grid div:nth-child(2) img {
        width: 100%;
        left: 0;
    }

    #forfaits .smal-img-container img {
        width: 80% !important;
        bottom: -20px !important;
        position: absolute;
        left: 50px !important;
    }

    #forfaits .smal-img-container {
        overflow: hidden;
    }
}

/** Large mobile devices (up to 425px) */
@media (min-width: 992px) and (max-width: 1024px) {
    .hero {
        display: unset;
    }

    .hero-img-div {
        margin-top: 40px;
    }

    .hero-img-div div {
        height: 600px !important;
        flex: 1 !important;
    }


    .hero-img-div div:first-child img {
        width: 140%;
    }

    .bgblack {
        padding: 10px;
        margin: 0;
    }

    button,
    .bg-grid button,
    section button {
        max-width: 100%;
        width: 100%;
    }

    .hero {
        height: auto;
    }

    h1 {
        font-size: 154px;
        position: relative;
        line-height: 140px;
        top: 40px;
    }

    .hero div:nth-child(1) p {
        margin-top: 40px;
        font-size: 50px;
    }

    h2 {
        font-size: 42px;
        margin-bottom: 20px;
        line-height: 40px;
    }



    button,
    .bg-grid button,
    section button {
        padding: 30px;
        height: auto;
    }






















    .hero div:nth-child(1) p {
        margin-top: 40px;
    }

    #faqAccordion,
    .avantages-container {
        width: 100%;
        padding: 10px;
    }

    .img-continer,
    .content-colone,
    .tarfication {
        width: 100%;
    }

    .inscription,
    .avantages {
        width: 100%;
        margin-left: 0;
    }

    .accordion-button {
        font-size: 20px;
        line-height: 20px;
        padding: 50px 20px;
    }

    .bg-grid div:nth-child(2) {
        height: 300px;
    }

    .grid-3 {
        grid-template-columns: unset;
    }

    body {
        overflow-x: hidden;
    }

    .text-center {
        text-align: left !important;
    }

    .content-colone {
        padding: 15px;
    }

    .bg-grid div:nth-child(2) img {
        width: 100%;
        left: 0;
    }

    #forfaits .smal-img-container img {
        width: 80% !important;
        bottom: -20px !important;
        position: absolute;
        left: 50px !important;
    }

    #forfaits .smal-img-container {
        overflow: hidden;
    }
}

/* Medium desktop (up to 1200px) */
@media (max-width: 1200px) {}

/* Large desktop (1200px and above) */
@media (min-width: 1200px) {}