.assessment-section {
    padding: 20px;
    background-color: #3D5F32
}

.desktop-assessment {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.assessment-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 51%
}

.assessment-text h2 {
    font-size: 50px;
    color: #fff;
    font-weight: 600;
    font-family: 'Montserrat'
}

.assessment-text p {
    color: #fff;
    font-family: 'Montserrat';
    font-size: 30px;
    line-height: 1.7
}

.phone-frame {
    width: 420px;
    height: 800px;
    border-radius: 40px;
    padding: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.phone-frame img {
    width: 100%;
    height: 80%;
    object-fit: contain;
    position: relative;
    top: 70px
}

.carousel {
    display: flex;
    height: 100%;
    transition: transform .6s ease-in-out
}

#assessmentCarousel,
#discoverCarousel,
#discoverCarousel2 {
    height: fit-content;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.mobile-assessment {
    display: none
}

.pos-relative {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

@media(min-width:300px) and (max-width:479px) {
    .assessment-section {
        padding: 10px;
        height: auto
    }

    .mobile-assessment {
        display: block
    }

    .desktop-assessment {
        display: none
    }

    .mobile-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        padding: 20px
    }

    .carousel {
        display: flex !important;
        flex-direction: column;
        transition: transform .6s ease-in-out
    }

    #carousel {
        flex-direction: row;
    }

    .carousel-indicators {
        order: 2;
    }

    .carousel-inner {
        order: 1;
    }


    .mobile-slide p {
        color: #FFF;
        text-align: center;
        font-family: 'Montserrat';
        font-size: 30px;
        font-style: normal;
        font-weight: 400;
        line-height: 40px;
        padding-bottom: 30px;
    }

    .phone-frame {
        max-width: 260px;
        max-height: 472px;
        height: 100%;
    }

    .phone-frame img {
        top: 0;
    }

    .assessment-mbl-text {
        text-align: center;
        font-size: 30px;
        color: #fff;
        font-weight: 600;
        font-family: 'Montserrat';
        padding: 20px 0 0 0
    }


    .assessment-indicators [data-bs-target] {
        width: 50px;
        height: 20px;
        border-radius: 50px;
        border: 0;
        background-color: #fff
    }

    .assessment-indicators .active {
        background-color: #FF5CBF !important
    }

    .mobile-assessment .carousel,
    .mobile-assessment .carousel-inner {
        width: 100%;
        overflow: hidden
    }



    .mobile-assessment .phone-frame {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center
    }
}

@media(min-width:480px) and (max-width:767px) {
    .assessment-section {
        padding: 20px;
        height: auto
    }

    .assessment-mbl-text {
        text-align: center;
        font-size: 40px;
        color: #fff;
        font-weight: 600;
        font-family: 'Montserrat';
        padding: 20px 0 0 0
    }

    .mobile-assessment {
        display: block
    }

    .desktop-assessment {
        display: none
    }

    .mobile-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        padding: 10px
    }

    .mobile-slide p {
        color: #FFF;
        text-align: center;
        font-family: Montserrat;
        font-size: 30px;
        font-style: normal;
        font-weight: 400;
        line-height: 40px;
        padding-bottom: 30px;
    }

    .phone-frame {
        max-width: 260px;
        max-height: 530px
    }

    .assessment-indicators {
        bottom: 8px;

    }

    .assessment-indicators [data-bs-target] {
        width: 60px;
        height: 20px;
        border-radius: 50px;
        border: 0;
        background-color: #fff
    }

    .assessment-indicators .active {
        background-color: #FF5CBF !important
    }

    .mobile-assessment .carousel,
    .mobile-assessment .carousel-inner {
        width: 100%;
        overflow: hidden
    }


    .mobile-assessment .phone-frame {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center
    }
}

@media(min-width:768px) and (max-width:1023px) {
    .assessment-section {
        padding: 20px;
        height: auto
    }

    .mobile-assessment {
        display: block
    }

    .desktop-assessment {
        display: none
    }

    .mobile-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        padding: 10px
    }

    .mobile-slide p {
        color: #FFF;
        text-align: center;
        font-family: Montserrat;
        font-size: 30px;
        font-style: normal;
        font-weight: 400;
        line-height: 40px;
        padding-bottom: 30px;
    }

    .phone-frame {
        max-width: 260px;
        max-height: 530px
    }

    .assessment-indicators {
        bottom: -15px;

    }

    .assessment-mbl-text {
        text-align: center;
        font-size: 40px;
        color: #fff;
        font-weight: 600;
        font-family: 'Montserrat';
        padding: 20px 0 0 0
    }

    .assessment-indicators [data-bs-target] {
        width: 90px;
        height: 20px;
        border-radius: 50px;
        border: 0;
        background-color: #fff
    }

    .assessment-indicators .active {
        background-color: #FF5CBF !important
    }

    .mobile-assessment .carousel,
    .mobile-assessment .carousel-inner {
        width: 100%;
        overflow: hidden
    }



    .mobile-assessment .phone-frame {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center
    }
}

@media(min-width:1024px) and (max-width:1439px) {
    .assessment-text {
        gap: 0
    }

    .assessment-text h2 {
        font-size: 45px
    }

    .assessment-text p {
        font-size: 24px
    }

    .phone-frame {
        width: 400px;
        height: 750px
    }
}