@media(min-width:320px) and (max-width:480.98px) {
    .navbar {
        justify-content: space-around;
    }

    .area-one .title h1 {
        font-size: 42px;
        width: 100%;
    }

    .area-one .description p {
        width: 100%;
        font-size: 18px;
    }

    .area-one .description,
    .button-subs {
        margin-top: 2.5rem;
    }

    .btn.btn-success {
        max-width: 200px !important;
    }

    .card h1 {
        font-size: 28px;
    }

    .card h6 {
        width: 100%;
    }

    .splide__slide.is-active .card {
        width: 90% !important;
        position: static !important;
        transform: none;
        padding: 2rem 1rem !important;
        padding-bottom: 2rem !important;
        height: auto !important;
    }

    .splide__slide:not(.is-active) .card {
        width: 90% !important;
        transform: scaleY(1);
        height: auto !important;
        position: static !important;
        padding: 2rem 1rem;
    }

    .area-two {
        height: 500px;
    }

    .area-three {
        display: none;
    }

    .area-four h1 {
        font-size: 34px;
        display: block;
        margin: 0 !important;
    }

    .area-four {
        padding: 45px 10px;
        display: flex;
    }

    .area-four img {
        height: auto;
        width: 100px;
        display: flex;
        justify-content: flex-end;
        margin: 0 auto;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .splide__arrows {
        display: none !important;
    }

    .area-five .left-comment,
    .area-five .right-comment {
        margin-top: 2rem;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        justify-content: center;
        margin: 1rem auto;
    }

    .area-five .card-comment p {
        font-size: 10px;
    }

    .area-five .card-comment {
        width: 90%;
        padding: 1.5rem 1rem;
    }

    .area-five .card-comment h6 {
        font-size: 56px;
    }

    .has-one {
        top: -1rem;
        left: -.7rem;
    }

    .has-two {
        bottom: -3rem;
        right: -.7rem;
    }

    .card-comment.right-comment img {
        width: 2rem;
        right: -.7rem;
        top: -1rem;
    }

    .modal-dialog {
        max-width: 100% !important;
        padding: 0rem !important;
    }

    .modal-content .form-control {
        width: 200px;
    }

    footer a {
        font-size: 10px !important;
    }

    .up-scroll {
        width: 40px;
        height: 40px;

    }

    .up-scroll svg {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width: 40px !important;
        height: 43px !important;
    }

    .icon-up {
        right: 1rem !important;
        bottom: 5rem !important;
    }

    footer img {
        max-width: 6rem !important;
    }

    footer a {
        width: 100%;
        margin: 0 1rem !important;
    }

    .card h6 {
        color: var(--Primary-Generic-50, #1C1B1B);
        text-align: center;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        /* 15px */
        letter-spacing: -0.3px;
    }

    .mobile-about{
        display: block !important;
    }

    .desk-about{
        display: none;
    }
}

@media(min-width:481px) and (max-width:575.98px) {
    .navbar {
        justify-content: space-around;
    }

    .area-one .title h1 {
        font-size: 46px;
    }

    .area-one .description p {
        width: 100%;
        font-size: 18px;
    }

    .area-one .description,
    .button-subs {
        margin-top: 2.5rem;
    }

    .btn.btn-success {
        max-width: 200px !important;
    }

    .card h1 {
        font-size: 28px;
    }

    .card h6 {
        width: 100%;
    }

    .splide__slide.is-active .card {
        width: 90% !important;
        position: static !important;
        transform: none;
        padding: 2rem 1rem !important;
        padding-bottom: 2rem !important;
        height: auto !important;
    }

    .splide__slide:not(.is-active) .card {
        width: 90% !important;
        transform: scaleY(1);
        height: auto !important;
        position: static !important;
        padding: 2rem 1rem;
    }

    .area-two {
        height: 500px;
    }

    .area-three {
        display: none;
    }

    .area-four h1 {
        font-size: 38px;
        display: block;
        margin: 0 !important;
    }

    .area-four {
        padding: 45px 10px;
        display: flex;
    }

    .area-four img {
        height: auto;
        width: 120px;
        display: flex;
        justify-content: flex-end;
        margin: 0 auto;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .splide__arrows {
        display: none !important;
    }

    .area-five .left-comment,
    .area-five .right-comment {
        margin-top: 2rem;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        justify-content: center;
        margin: 1rem auto;
    }

    .area-five .card-comment p {
        font-size: 12px;
    }

    .area-five .card-comment {
        width: 90%;
        padding: 1.5rem 1rem;
    }

    .area-five .card-comment h6 {
        font-size: 56px;
    }

    .has-one {
        top: -1rem;
        left: -.7rem;
    }

    .has-two {
        bottom: -3rem;
        right: -.7rem;
    }

    .card-comment.right-comment img {
        width: 2rem;
        right: -.7rem;
        top: -1rem;
    }

    .modal-dialog {
        max-width: 100% !important;
        padding: 0rem !important;
    }

    .modal-content .form-control {
        width: 200px;
    }

    footer a {
        font-size: 10px !important;
    }

    .up-scroll {
        width: 40px;
        height: 40px;

    }

    .up-scroll svg {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width: 40px !important;
        height: 43px !important;
    }

    .icon-up {
        right: 1rem !important;
        bottom: 5rem !important;
    }

    footer img {
        max-width: 6rem !important;
    }

    footer a {
        width: 100%;
        margin: 0 1rem !important;
    }

    .card h6 {
        color: var(--Primary-Generic-50, #1C1B1B);
        text-align: center;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        /* 15px */
        letter-spacing: -0.3px;
    }

    .mobile-about{
        display: block !important;
    }

    .desk-about{
        display: none;
    }
}

@media(min-width:576px) and (max-width:767.98px) {
    .navbar {
        justify-content: space-around;
    }

    .area-one .title h1 {
        font-size: 52px;
    }

    .area-one .description p {
        width: 100%;
        font-size: 18px;
    }

    .area-one .description,
    .button-subs {
        margin-top: 2.5rem;
    }

    .btn.btn-success {
        max-width: 200px !important;
    }

    .card h1 {
        font-size: 36px;
    }

    .card h6 {
        width: 100%;
    }

    .splide__slide.is-active .card {
        width: 90% !important;
        position: static !important;
        transform: none;
        padding: 2rem 1rem !important;
        padding-bottom: 2rem !important;
        height: auto !important;
    }

    .splide__slide:not(.is-active) .card {
        width: 90% !important;
        transform: scaleY(1);
        height: auto !important;
        position: static !important;
        padding: 2rem 1rem;
    }

    .area-two {
        height: 500px;
    }

    .area-three {
        display: none;
    }

    .area-four h1 {
        font-size: 38px;
        display: block;
        margin: 0 !important;
    }

    .area-four {
        padding: 45px 10px;
        display: flex;
    }

    .area-four img {
        height: auto;
        width: 120px;
        display: flex;
        justify-content: flex-end;
        margin: 0 auto;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .splide__arrows {
        display: none !important;
    }

    .area-five .left-comment,
    .area-five .right-comment {
        margin-top: 2rem;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        justify-content: center;
        margin: 1rem auto;
    }

    .area-five .card-comment p {
        font-size: 14px;
    }

    .area-five .card-comment {
        width: 90%;
        padding: 1.5rem 1rem;
    }

    .area-five .card-comment h6 {
        font-size: 56px;
    }

    .has-one {
        top: -1rem;
        left: -.7rem;
    }

    .has-two {
        bottom: -3rem;
        right: -.7rem;
    }

    .card-comment.right-comment img {
        width: 2rem;
        right: -.7rem;
        top: -1rem;
    }

    .modal-dialog {
        max-width: 100% !important;
        padding: 0rem !important;
    }

    footer a {
        font-size: 10px !important;
    }

    .up-scroll {
        width: 40px;
        height: 40px;

    }

    .up-scroll svg {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width: 40px !important;
        height: 43px !important;
    }

    .icon-up {
        right: 1rem !important;
        bottom: 5rem !important;
    }

    footer img {
        max-width: 6rem !important;
    }

    footer a {
        width: 100%;
        margin: 0 1rem !important;
    }

    .card h6 {
        color: var(--Primary-Generic-50, #1C1B1B);
        text-align: center;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        /* 15px */
        letter-spacing: -0.3px;
    }

    .mobile-about{
        display: block !important;
    }

    .desk-about{
        display: none;
    }
}

@media(min-width:768px) and (max-width:991.98px) {

    .card h1 {
        font-size: 36px;
    }

    .card h6 {
        width: 100%;
    }

    .splide__slide.is-active .card {
        min-width: 500px !important;
        position: static !important;
        transform: none;
        padding: 2rem 1rem !important;
        padding-bottom: 2rem !important;
        height: 100% !important;
    }

    .splide__slide:not(.is-active) .card {
        min-width: 100% !important;
        transform: scaleY(1);
        position: static !important;
        padding: 2rem 1rem;
    }

    .area-two {
        height: 500px;
    }

    .area-three h1{
        font-size: 50px;
        margin-left: 2.2rem;
    }

    .area-three p{
        font-size: 12px;
        margin-left:0;
        margin-top: 0;
    }

    .area-three{
        height: auto;
    }

    .area-four h1 {
        font-size: 30px;
        display: block;
    }

    .area-four {
        padding: 45px 10px;
        display: flex;
    }

    .area-four img {
        height: auto;
        width: 130px;
        display: flex;
        justify-content: flex-end;
        margin-left: 5rem;
    }

    .area-five .left-comment,
    .area-five .right-comment {
        margin-top: 2rem;
        margin-left: 0;
        margin-right: 0;
        display: flex;
        justify-content: center;
        margin: 1rem auto;
    }

    .area-five .card-comment p {
        font-size: 16px;
    }

    .area-five .card-comment {
        width: 90%;
        padding: 1.5rem 1rem;
    }

    .area-five .card-comment h6 {
        font-size: 56px;
    }

    .has-one {
        top: -1rem;
        left: -.7rem;
    }

    .has-two {
        bottom: -3rem;
        right: -.7rem;
    }

    .card-comment.right-comment img {
        width: 2rem;
        right: -.7rem;
        top: -1rem;
    }

    .modal-dialog {
        max-width: 100% !important;
        padding: 0rem !important;
    }

    footer a {
        font-size: 10px !important;
    }

    .up-scroll {
        width: 40px;
        height: 40px;

    }

    .up-scroll svg {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width: 40px !important;
        height: 43px !important;
    }

    .icon-up {
        right: 1rem !important;
        bottom: 5rem !important;
    }

    footer img {
        max-width: 8rem !important;
        margin-right: 5rem;
    }

    footer a {
        width: 100%;
        font-size: .9rem !important;
    }

    .card h6 {
        color: var(--Primary-Generic-50, #1C1B1B);
        text-align: center;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        /* 15px */
        letter-spacing: -0.3px;
    }

    .area-three-mobile{
        display: none !important;
    }

    .splide__arrow--next{
        right: 0;
        font-size: 5rem;
    }

    .splide__arrow--prev{
        left: 0;
        font-size: 5rem;
    }
}

@media(min-width:992px) and (max-width:1199.98px){
    .splide__slide.is-active .card {
        min-width: 800px !important;
        position: static !important;
        transform: none;
        padding: 2rem 1rem !important;
        padding-bottom: 2rem !important;
        height: auto !important;
    }

    .splide__slide:not(.is-active) .card {
        min-width: 100% !important;
        transform: scaleY(.9);
        position: static !important;
        padding: 2rem 1rem;
        height: auto;
    }

    .splide__arrow--next{
        right: 1.4rem;
    }

    .splide__arrow--prev{
        left: 1.4rem;
    }

    .area-three p{
        font-size: 15px;
        margin-top: 0;
        margin-left: 1rem;
    }

    .area-three{
        height: 500px;
    }

    .area-three h1{
        margin-left: 1rem;
    }

    .area-four h1{
        margin: 0 auto;
        font-size: 72px;
    }

    .area-four{
        padding: 92px 0;
    }

    .area-four img{
        width: 250px;
        height: auto;
        margin-left: 2rem;
    }

    .area-five{
        margin-top: 2rem;
    }

    .area-five .left-comment,.area-five .right-comment{
        margin-top: 4rem;
    }

    .has-one{
        left: -.7rem;
    }

    .has-two,.card-comment.right-comment img{
        right: -.7rem;
    }
}

@media(min-width:1200px) and (max-width:1399.98px){
    .splide__slide.is-active .card {
        min-width: 800px !important;
        position: static !important;
        transform: none;
        padding: 2rem 1rem !important;
        padding-bottom: 2rem !important;
        height: auto !important;
    }

    .splide__slide:not(.is-active) .card {
        min-width: 100% !important;
        transform: scaleY(.9);
        position: static !important;
        padding: 2rem 1rem;
        height: auto;
    }

    .splide__arrow--next{
        right: 8rem;
    }

    .splide__arrow--prev{
        left: 8rem;
    }

    .area-three p{
        font-size: 17px;
        margin-top: 0;
        margin-left: 2rem;
    }

    .area-three{
        height: 600px;
    }

    .area-three h1{
        margin-left: 2.5rem;
    }

    .area-four h1{
        margin: 0 auto;
        font-size: 72px;
    }

    .area-four{
        padding: 92px 0;
    }

    .area-four img{
        width: 250px;
        height: auto;
        margin-left: 2rem;
    }

    .area-five{
        margin-top: 2rem;
    }

    .area-five .left-comment,.area-five .right-comment{
        margin-top: 4rem;
    }

    .has-one{
        left: -.7rem;
    }

    .has-two,.card-comment.right-comment img{
        right: -.7rem;
    }
}

@media(min-width:1400px) and (max-width:1599.98px){
    .splide__slide.is-active .card {
        min-width: 800px !important;
        position: static !important;
        transform: none;
        padding: 2rem 1rem !important;
        padding-bottom: 2rem !important;
        height: auto !important;
    }

    .splide__slide:not(.is-active) .card {
        min-width: 100% !important;
        transform: scaleY(.9);
        position: static !important;
        padding: 2rem 1rem;
        height: auto;
    }

    .splide__arrow--next{
        right: 15rem;
    }

    .splide__arrow--prev{
        left: 15rem;
    }

    .area-three p{
        font-size: 18px;
        margin-top: 0;
        margin-left: 2rem;
    }

    .area-three{
        height: 650px;
    }

    .area-three h1{
        margin-left: 2.5rem;
    }

    .area-four h1{
        margin: 0 auto;
        font-size: 72px;
    }

    .area-four{
        padding: 92px 0;
    }

    .area-four img{
        width: 250px;
        height: auto;
        margin-left: 2rem;
    }

    .area-five{
        margin-top: 2rem;
    }

    .area-five .left-comment,.area-five .right-comment{
        margin-top: 4rem;
    }

    .has-one{
        left: -.7rem;
    }

    .has-two,.card-comment.right-comment img{
        right: -.7rem;
    }
}

@media(min-width:1600px) and (max-width:1799.98px){

    .splide__arrow--next{
        right: 15rem;
    }

    .splide__arrow--prev{
        left: 15rem;
    }

    .area-three p{
        font-size: 18px;
        margin-top: 0;
        margin-left: 2rem;
    }

    .area-three{
        height: 650px;
    }

    .area-three h1{
        margin-left: 2.5rem;
    }

    .area-four h1{
        margin: 0 auto;
        font-size: 72px;
    }

    .area-four{
        padding: 92px 0;
    }

    .area-four img{
        width: 250px;
        height: auto;
        margin-left: 2rem;
    }

    .area-five{
        margin-top: 2rem;
    }

    .area-five .left-comment,.area-five .right-comment{
        margin-top: 4rem;
    }

    .has-one{
        left: -.7rem;
    }

    .has-two,.card-comment.right-comment img{
        right: -.7rem;
    }
}