@font-face {
    font-family: AvenirBold;
    src: url(../fonts/AvenirLTStd-Black.otf);
}

@font-face {
    font-family: Avenir;
    src: url(../fonts/AvenirLTStd-Roman.otf);
}


body {
    font-family: 'DM Sans';
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
}

.desaturate {
    filter: saturate(0);
}

.hideme
{
    opacity:0;
}

.color-white {
    color: white;
}

.bg-white {
    background-color: white !important;
}

.cta-dark {
    border-radius: 10px;
    border-color: white;
    box-shadow: 1px 1px 3px 0 #76074abc, -1px -1px 3px 0 #be4c91d9;
    border-radius: 10px;
    padding: 10px;
    background-color: #AF106F;
    color: #fff;
    font-family: 'DM Sans';
    font-size: 110%;
}

.cta-dark-small {
    border-radius: 10px;
    border-color: white;
    box-shadow: 1px 1px 3px 0 #76074abc, -1px -1px 3px 0 #be4c91d9;
    border-radius: 5px;
    padding: 5px;
    background-color: #AF106F;
    color: #fff;
    font-family: 'DM Sans';
    font-size: 90%;
}

.cta-light {
    border-radius: 10px;
    border-color: white;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.25), -1px -1px 3px 0 rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 10px;
    background-color: #efefef;
    color: #444;
    font-family: 'DM Sans';
    font-size: 110%;
}

.cta-light-small {
    border-radius: 10px;
    border-color: white;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.25), -1px -1px 3px 0 rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    padding: 5px;
    background-color: #efefef;
    color: #444;
    font-family: 'DM Sans';
    font-size: 90%;
}

@media (orientation: portrait) {
    .cta-light-small {
        font-size: 60%;
    }
    
}

.d-flex {
    display: flex
}

.cursor {
    cursor: pointer;
}

.gone {
    display: none;
}

.h-300 {
    height: 300px !important;
}

.h-350 {
    height: 350px !important;
}

.h-320 {
    height: 320px !important;
}

.box-inset {
    box-shadow: inset 3px 3px 5px #bbbbbb,
                    inset -5px -5px 8px #ffffff;
    border-radius: 10px;
    padding: 20px;
    background-color: #efefef;
}

.box-outset {
    border-radius: 10px;
    padding: 20px;
}

.clients {
    background-color: #761964;
    opacity: 1;
    /* background-image: radial-gradient(#9b518c 0.5px, #761964 0.5px); */
/* background-image:  linear-gradient(#9b518c 1px, transparent 1px), linear-gradient(to right, #9b518c 1px, #761964 1px); */
/* background-size: 20px 20px; */
    /* background-size: 10px 10px; */
background-image: linear-gradient(to right, #761964 5px, #761964, #833774, #833774 5px );
background-size: 6px 100%;
}

.logo-box {
    width: 200px;
    height: 120px;
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    margin: 10px;
    box-shadow: inset 3px 3px 5px #bbbbbb,
                inset -5px -5px 8px #ffffff;
}

.logo-box-dark {
    width: 200px;
    height: 120px;
    padding: 10px;
    border-radius: 10px;
    background-color: #6B245D;
    color: white;
    margin: 10px;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
}

.logo-box img{
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

@media (orientation: portrait) {

    .logo-box {
        width: 120px;
        height: 90px;
        padding: 5px;
        border-radius: 7px;

    }

}

.coverage-box {
    transform:
    perspective(1000px)
    rotateX(4deg)
    rotateY(-4deg)
    rotateZ(4deg);
    width: 250px;
    padding: 10px;
    border-radius: 5px;
    background-color: #6B245D;
    color: white;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
}

.coverage-box-light {
    transform:
    perspective(1000px)
    rotateX(4deg)
    rotateY(-4deg)
    rotateZ(4deg);
    height: 200px;
    width: 250px;
    padding: 10px;
    border-radius: 5px;
    background-color: #e0a8c7;
    color: #740039;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
    &:hover {
        transform:
        perspective(0px)
        rotateX(0deg)
        rotateY(0deg)
        rotateZ(0deg);
      }
}

.numeric-h1 {
    color: #AF106F;
    font-size: 400%;
}

.numeric-text-h1 {
    color: #AF106F;
    font-size: 210%;
}

@media (orientation: portrait) {
    .numeric-text-h1 {
        color: #AF106F;
        font-size: 150%;
    }
}

.generic-h2 {
    color: #333;
    font-size: 150%;
}

.picture {
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.text-white {
    color: white !important;
}

.text-lt {
    color: #bbb !important;
}

.text-gray {
    color: #666;
}


.text-center {
    text-align: center;
}

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

.heading {
    font-size: 300%;
    color: #740039;
    font-weight: 800;
}

@media (orientation: portrait) {

    .heading {
        font-size: 250%;
    }

}

.heading-light {
    font-size: 300%;
    color: #fff;
    font-weight: 800;
}

.chip {
    background-color: #da83ac;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 10px;
}

.description {
    font-size: 110%;
}

.description-small {
    font-size: 80% !important;
}

.description-generic {
    color: #666;
}

/*

hero

*/

.tagline {
    background-color: #761964;
    opacity: 1;
    background-image: radial-gradient(#9b518c 0.5px, #761964 0.5px);
    background-size: 10px 10px;
}

.generic-h1 {
    font-weight: 800;
    margin-top: 20px;
    font-size: 300%;
}

.splide__arrow {
    background-color: #eab4cd;
    color: white;
}

.splide-snack-1 {
    background-color: #761964;
    opacity: 1;
    background-image: radial-gradient(#9b518c 0.5px, #761964 0.5px);
    background-size: 10px 10px;
}

.splide-snack-2 {
    opacity: 1;
    background-size: 10px 10px;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
}

.splide-snack-4 {
    opacity: 1;
    background-size: 10px 10px;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
}

.splide-snack-5 {
    opacity: 1;
    background-size: 10px 10px;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
}

@media (orientation: landscape) {

    .splide-item {
        width: 100%;
        height: 500px;
        color: white;
    }

    .splide-item-snack-1 {
        width: 100%;
        height: 100px;
        color: white;
    }

    .splide-item-snack-2 {
        width: 100%;
        color: white;
        height: auto !important;
    }

    .splide-item-snack-4 {
        width: 100%;
        color: white;
        height: auto !important;
    }

    .splide-item-snack-5 {
        height: auto !important;
    }

    .hero-title {
        font-size: 350%;
        font-family: 'DM Sans';
        font-weight: 800;
    }

    .hero-desc {
        font-size: 150%;
        font-family: 'DM Sans';
    }

    .hero-desc-snack {
        color: white;
        font-weight: 400;
    }

}

@media (orientation: portrait) {

    .splide-item {
        width: 100%;
        height: 400px;
        color: white;
    }

    .splide-item-snack-1 {
        width: 100%;
        height: auto !important;
        color: white;
    }

    .splide-item-snack-2 {
        width: 100%;
        height: auto !important;
        color: white;
    }

    .splide-item-snack-5 {
        height: auto !important;
    }

    .hero-title {
        font-size: 250%;
        font-family: 'DM Sans';
        font-weight: 800;
    }

    .hero-desc {
        font-size: 150%;
        font-family: 'DM Sans';
    }

}


/*

navbar

*/

.navbar {
    width: 100%;
    z-index: 999;
}

@media (orientation: landscape) {

    .navbar {
        display: flex;
        background-color: white;
        align-items: center;
        position: fixed;
        top: 0px;
        left: 0px;
    }

    .navbar .left {
        display: flex;
        align-items: center;
    }

    .navbar .toggle {
        display: none;
    }

    .navbar .logo-hero {
        width: 200px;
        margin-top: 10px;
        margin-left: 20px;
        margin-bottom: 10px;
        background-color: white;
    }

    .navbar ul{
        display: flex;
        list-style: none;
    }

    .navbar ul li{
        padding-left: 10px;
        padding-right: 10px;
        font-size: 120%;
    }

    .navbar ul li a {
        text-decoration: none;
        color: #740039;
    }

    .container {
        width: 70%;
        margin-left: 15%;
    }

}

@media (orientation: portrait) {

    .navbar {
        display: flex;
        flex-wrap: wrap;
        background-color: white;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        top: 0px;
        left: 0px;
    }

    .navbar .toggle {
        padding: 20px;
    }

    .navbar ul {
        display: none;
        list-style: none;
        margin-top: 0px;
        padding-left: 10px;
        flex-wrap: wrap;
    }

    .navbar .logo-hero {
        width: 150px;
        margin-top: 10px;
        margin-left: 20px;
        margin-bottom: 10px;
        background-color: white;
    }

    .navbar ul li{
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        font-size: 150%;
    }

    .navbar ul li a {
        text-decoration: none;
        color: #740039;
    }

    .container {
        width: 90%;
        margin-left: 5%;
    }

}


.flex-wrap {
    flex-wrap: wrap;
}

.flex-c {
    flex-direction: column;
}

.w-90p {
    width: 90%
}

.w-80p {
    width: 80%
}

.w-100p {
    width: 100%
}

@media (orientation: portrait) {

    .w-100p-p {
        width: 100%
    }
    
}

.w-10p {
    width: 10%
}

.w-15p {
    width: 15%
}

.w-50p {
    width: 50%
}

.w-60p {
    width: 60%
}


.w-63p {
    width: 63%
}

.h-80h {
    height: 80vh;
}

.w-40p {
    width: 40%
}

@media (orientation: landscape) {

    .w-40p-l {
        width: 40%
    }
    
}


.w-70p {
    width: 70%
}

.w-30p {
    width: 30%
}

.w-20p {
    width: 20%
}

.w-25p {
    width: 25%
}


.w-150 {
    width: 150px;
}

.w-250 {
    width: 250px;
}

.w-25 {
    width: 25px;
}

.jc-c {
    justify-content: center;
}

.jc-e {
    justify-content: flex-end;
}

.jc-sb {
    justify-content: space-between;
}

.jc-se {
    justify-content: space-evenly;
}

.ai-c {
    align-items: center;
}

.ai-e {
    align-items: flex-end;
}

.ai-st {
    align-items: stretch;
}


.ai-s {
    align-items: flex-start;
}


.mt-0 {
    margin-top: 0px;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-50 {
    margin-bottom: 50px;
}


.mb-80 {
    margin-bottom: 80px;
}

.p-20 {
    padding: 20px;
}

.p-30 {
    padding: 30px;
}

.pl-0 {
    padding-left: 0px;
}

.pl-20 {
    padding-left: 20px;
}

.pr-20 {
    padding-right: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-50 {
    padding-top: 50px;
}

.pt-20 {
    padding-top: 20px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-50 {
    padding-bottom: 50px;
}

.p-5p {
    padding: 5%;
}

.pl-5p {
    padding-left: 5%;
}

.pr-5p {
    padding-right: 5%;
}

.pt-5p {
    padding-top: 5%;
}

.pb-5p {
    padding-bottom: 5%;
}

.p-10p {
    padding: 10%;
}

.pl-10p {
    padding-left: 10%;
}

.pr-10p {
    padding-right: 10%;
}

.pt-10p {
    padding-top: 10%;
}

.pb-10p {
    padding-bottom: 10%;
}

.m-20 {
    margin: 20px;
}

.m-10 {
    margin: 10px;
}

.m-10p {
    margin: 10%;
}

.m-5p {
    margin: 5%;
}

.m-5p {
    margin: 5%;
}

.ml-25p-m {
    margin-left: -25px;
}

.ml-5p {
    margin-left: 5%;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-5p {
    margin-right: 5%;
}

.mt-5 {
    margin-top: 5px;
}

.mt-5p {
    margin-top: 5%;
}

.mb-5p {
    margin-bottom: 5%;
}


.ml-10p {
    margin-left: 10%;
}

.mr-10p {
    margin-right: 10%;
}

.mt-10p {
    margin-top: 10%;
}

.mt-20 {
    margin-top: 20px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-100 {
    margin-top: 100px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-30 {
    margin-left: 30px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-10 {
    margin-right: 10px;
}


.mt-10 {
    margin-top: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-10p {
    margin-bottom: 10%;
}

.blog-box {
    background-color: #efefef;
    box-shadow: inset 3px 3px 5px #bbbbbb,
                inset -5px -5px 8px #ffffff;
    padding: 20px;
    border-top: solid 1px rgba(255, 255, 255, 0.1) !important;
    border-left: solid 1px rgba(255, 255, 255, 0.1) !important;
    border-bottom: solid 1px rgba(255, 255, 255, 0.1) !important;
    border-right: solid 1px rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
}

.yt-box {
    box-shadow: inset 3px 3px 5px #bbbbbb,
                inset -5px -5px 8px #ffffff;
    border-radius: 10px;
}

.contact-box {
    background-color: #efefef;
    box-shadow: inset 3px 3px 5px #00000022,
                inset -5px -5px 8px #6B245D !important;
    border-top: solid 1px rgba(255, 255, 255, 0.1) !important;
    border-left: solid 1px rgba(255, 255, 255, 0.1) !important;
    border-bottom: solid 1px rgba(255, 255, 255, 0.1) !important;
    border-right: solid 1px rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px;
}

.paper-rev {
    background-color: #efefef;
    box-shadow: inset 3px 3px 5px #bbbbbb,
                inset -5px -5px 8px #ffffff;
    border-top: solid 1px rgba(255, 255, 255, 0.8);
    border-left: solid 1px rgba(255, 255, 255, 0.8);
    border-bottom: solid 1px rgba(255, 255, 255, 0.8);
    border-right: solid 1px rgba(255, 255, 255, 0.8);
    border-radius: 20px;
}



/*

desktop & mobile

*/

@media (orientation: landscape) {
    
    .desktop {

        display: flex;

    }

    .mobile {

        display: none;

    }

    .desktop-block {

        display: block;

    }

    .mobile-block {

        display: none;

    }

}

@media (orientation: portrait) {

    .desktop {

        display: none;

    }

    .mobile {

        display: flex;

    }

    .desktop-block {

        display: none;

    }

    .mobile-block {

        display: block;

    }

}

/*

mast, hero

*/


.mast {
    background: linear-gradient(#ffffff, #ffffff);
}

@media (orientation: landscape) {

    .hero {
        margin-top: 90px;
    }

    #sf-animated-text-3::part(text) {
        font-size: 120%;
        font-weight: 400;
        color: #740039;
        line-height: 130%;
        font-weight: 800;
        font-family: DM Sans;
        height: 3rem;
    }
    
    #sf-animated-text-1::part(text) {
        font-size: 320%;
        font-weight: 400;
        margin-bottom: 40px;
        color: #740039;
        line-height: 130%;
        height: 5.5em;
        font-family: DM Sans;
    }


}

@media (orientation: portrait) {

    .hero {
        margin-top: 80px;
    }    

    #sf-animated-text-1::part(text) {
        font-size: 150%;
        font-weight: 800;
        margin-top: 20px;
        margin-bottom: 20px;
        color: #740039;
        height: 5em;
        line-height: 130%;
    }

}

/*

Spotlight

*/


@media (orientation: landscape) {

    .light-youtube {
        width: 400px;
    }

    .spotlight .description h3{
        font-family: DM Sans;
        font-weight: 800;
        font-size: 350%;
        color: #d3147d;
        border: none;
        padding: 0px;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .spotlight .description h4{
        font-family: DM Sans;
        font-weight: 400;
        font-size: 150%;
        color: #555;
        line-height: 150%;
        border: none;
        text-transform: none;
        padding: 0px;
    }

}

@media (orientation: portrait) {

    .light-youtube {
        width: 90%;
    }

    .spotlight .description h3{
        font-family: DM Sans;
        font-weight: 800;
        font-size: 200%;
        color: #d3147d;
        border: none;
        padding: 0px;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .spotlight .description h4{
        font-family: DM Sans;
        font-weight: 400;
        font-size: 150%;
        color: #555;
        line-height: 150%;
        border: none;
        text-transform: none;
        padding: 0px;
    }

}

/*

About

*/

/*

GRC

*/

.strip-dark {
    background-color: #740039;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
    padding: 20px;
}

.grc-description-dark {
    color: white;
}

.grc {
    
    background-color: #6B245D;
    opacity: 1;
    background-image: radial-gradient(#9b518c 0.5px, #6B245D 0.5px);
    background-size: 10px 10px;
}

@media (orientation: landscape) {

    .grc .grc-item {
        box-shadow: 1px 1px 10px 0 #70104a66, -1px -1px 10px 0 #28061ab1;
        border-top: solid 1px #AF106F;
        border-left: solid 1px #AF106F;
        border-bottom: solid 1px #AF106F;
        border-right: solid 1px #AF106F;
        border-radius: 20px;
        padding: 20px;
        margin: 30px;
        margin-right: 3%;
        margin-left: 3%;
        background-color: #AF106F;
        color: white;
        width: 20%;
    }

    .grc-item h1{

        font-size: 400%;
        margin-bottom: 20px;
        margin-top: 20px;
        color: #d3147d;
        font-family: DM Sans;
        font-weight: 800;
    }

    .grc h2 {
        font-size: 200%;
        color: white;
        margin: 0px;
        text-align: center;
    }

    .grc h4 {
        font-size: 120%;
        color: #666;
        font-weight: 400;
        margin: 0px;
        margin-top: 10px;
        text-align: center;
    }

    .grc h3 {
        font-size: 120%;
        color: #d3147d;
        font-weight: 800;
        margin: 0px;
        margin-top: 0px;
        text-align: center;
        font-family: DM Sans;
    }

    .grc-title {
        color: #000;
        margin: 0px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-family: DM Sans;
    }

    .grc-subtitle {
        font-size: 200%;
        color: #d3147d;
        margin: 0px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: 800;
        font-family: DM Sans;

    }

    .grc-subtitle-large {
        font-size: 150%;
        color: #444;
        margin: 0px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-family: DM Sans;
        text-align: center;
        line-height: 150%;

    }

    .grc-subtitle-small {
        font-size: 100%;
        color: #d3147d;
        margin: 0px;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
        font-family: DM Sans;

    }

    .grc-description {
        font-size: 130%;
        color: #666;
        font-weight: 400;
        margin: 0px;
        margin-top: 10px;
        line-height: 150%;
    }

    .grc-description span {
        font-family: DM Sans;
        font-weight: 800;
    }

    .grc-description-dark {
        font-size: 200%;
        color: #da83ac;
        font-weight: 400;
        margin: 0px;
        margin-bottom: 0px;
        font-family: DM Sans;
    }

}

@media (orientation: portrait) {

    .grc .grc-item {
        box-shadow: 1px 1px 10px 0 #70104a66, -1px -1px 10px 0 #28061ab1;
        border-top: solid 1px #AF106F;
        border-left: solid 1px #AF106F;
        border-bottom: solid 1px #AF106F;
        border-right: solid 1px #AF106F;
        border-radius: 20px;
        padding: 20px;
        background-color: #AF106F;
        color: white;
        width: 80%;
        margin-bottom: 20px;
    }

    .grc-item h1{

        font-size: 400%;
        margin-top: 20px;
        margin-bottom: 10px;
        color: #740039;
        font-family: DM Sans;
        font-weight: 800;
    }

    .grc h2 {
        font-size: 150%;
        color: white;
        margin: 0px;
        text-align: center;
        font-family: DM Sans;
        font-weight: 800;
    }

    .grc h4 {
        font-size: 120%;
        color: #666;
        font-weight: 400;
        margin: 0px;
        margin-top: 10px;
        text-align: center;
    }

    .grc h3 {
        font-size: 120%;
        color: #d3147d;
        font-weight: 800;
        margin: 0px;
        margin-top: 0px;
        text-align: center;
        font-family: DM Sans;
    }

    .grc .description {

        color: white;
        font-weight: 400;
        margin: 0px;
        margin-top: 10px;
        line-height: 150%;

    }

    .grc-description span {
        font-family: DM Sans;
    }

    .grc-title {
        color: #740039;
        margin: 0px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-family: DM Sans;
    }

    .grc-subtitle {
        font-size: 150%;
        color: #d3147d;
        font-weight: 800;
        margin: 0px;
        margin-top: 0px;
        font-family: DM Sans;
        line-height: 150%;
    }

    .grc-subtitle-large {
        font-size: 150%;
        color: #444;
        margin: 0px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-family: DM Sans;
        line-height: 150%;
        text-align: center;
    }

    .grc-subtitle-small {
        font-size: 100%;
        color: #d3147d;
        margin: 0px;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
        font-family: DM Sans;

    }

    .grc-description {
        font-size: 120%;
        color: #666;
        font-weight: 400;
        margin: 0px;
        margin-top: 10px;
    }


    .grc-description-dark {
        font-size: 120%;
        color: #da83ac;
        font-weight: 400;
        margin: 0px;
        margin-bottom: 0px;
        font-family: DM Sans;
    }
}




/*

Customers

*/

.customers h4 {
    color: #444444 !important;
    font-size: 120% !important;
    font-weight: 400 !important;
    font-family: 'DM Sans' !important;
}

/*

ISO

*/

@media (orientation: landscape) {

    .iso {

        box-shadow: inset 3px 3px 5px #bbbbbb,
                    inset -5px -5px 8px #ffffff;
        border-top: solid 1px rgba(255, 255, 255, 0.8);
        border-left: solid 1px rgba(255, 255, 255, 0.8);
        border-bottom: solid 1px rgba(255, 255, 255, 0.8);
        border-right: solid 1px rgba(255, 255, 255, 0.8);
        border-radius: 20px;
        padding: 20px;
        background-color: #efefef;

    }

    .iso-title {
        color: #740039;
        font-size: 150%;
        font-family: DM Sans;
    }

    .iso-subtitle {
        color: #d3147d;
        font-size: 140%;
        font-family: DM Sans;
    }

    .iso-content {
        color: #555;
        font-size: 125%;
    }

}

@media (orientation: portrait) {

    .iso {

        box-shadow: inset 3px 3px 5px #bbbbbb,
                    inset -5px -5px 8px #ffffff;
        border-top: solid 1px rgba(255, 255, 255, 0.8);
        border-left: solid 1px rgba(255, 255, 255, 0.8);
        border-bottom: solid 1px rgba(255, 255, 255, 0.8);
        border-right: solid 1px rgba(255, 255, 255, 0.8);
        border-radius: 20px;
        padding: 20px;
        background-color: #efefef;

    }

    .iso-title {
        color: #000;
        font-size: 120%;
        font-family: DM Sans;
    }

    .iso-subtitle {
        color: #000;
        font-size: 120%;
        font-family: DM Sans;
        font-weight: 800;
    }

    .iso-content {
        color: #555;
        font-size: 100%;
    }

}

/*

Table

*/

@media (orientation: landscape) {


    .table-item {
        padding: 30px;
        text-align: center;
    }

    .table-item h2{
        font-size: 200%;
        color: #d3147d;
        margin: 0px;
    }

    .table-item-col-head{
        color: #d3147d;
        border-bottom: solid 1px #d3147d;
    }

    .table-item-row-head{
        color: #740039;
        line-height: 210%;
        border-right: solid 1px #740039;
    }

    .table-item h3{
        font-size: 200%;
        color: #740039;
        margin: 0px;
    }

    .table-item h4{
        font-size: 150%;
        color: #000;
        margin: 0px;
        text-align: left;
    }

    .table-item-text {
        text-align: left;
    }

    .table-item li{
        color: #444;
    }

}

@media (orientation: portrait) {


    .table-item {
        padding: 30px;
        box-shadow: inset 3px 3px 5px #bbbbbb,
                    inset -5px -5px 8px #ffffff;
        border-top: solid 1px rgba(255, 255, 255, 0.8);
        border-left: solid 1px rgba(255, 255, 255, 0.8);
        border-bottom: solid 1px rgba(255, 255, 255, 0.8);
        border-right: solid 1px rgba(255, 255, 255, 0.8);
        border-radius: 20px;
        padding: 20px;
    }

    .table-item h2{
        font-size: 200%;
        color: #d3147d;
        margin: 0px;
    }

    .table-item h5{
        margin: 0px;
    }

    .table-item h6{
        font-size: 70%;
        color: #740039;
        margin: 0px;
        margin-top: 20px;
    }

    .table-item p{
        font-size: 50%;
        margin: 0px;
        color: #666;
        margin-top: 10px;
    }
    
    .table-item li{
        font-size: 50%;
        margin: 0px;
        color: #444;
    }

    .table-item ul{
        margin-top: 10px;
    }

    .table-item-col-head{
        color: #d3147d;
        text-align: left !important;
        font-size: 200%;

    }

    .table-item-row-head{
        color: #740039;
        line-height: 210%;
        text-align: left;
    }

    .table-item h3{
        font-size: 200%;
        color: #740039;
        margin: 0px;
    }

    .table-item h4{
        font-size: 150%;
        color: #000;
        margin: 0px;
        text-align: left;
    }

    .table-item-text {
        text-align: left;
    }

}

/*

Bytes

*/


@media (orientation: landscape) {

    .bytes h2 {
        font-size: 300%;
        color: #740039;
        margin: 0px;
        margin-top: 20px;
        text-align: center;
        text-transform: capitalize;
        font-family: DM Sans;
        font-weight: 800;
    }

    .bytes h4 {
        font-size: 250%;
        color: #444444;
        margin: 0px;
        text-align: center;
        text-transform: capitalize;
        font-family: DM Sans;
        font-weight: 800;
    }

    .bytes h3 {
        font-size: 200%;
        color: #444444;
        margin: 0px;
        text-transform: capitalize;
        border-left: solid 7px;
        padding: 10px;
        background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        font-weight: 800;
        font-family: DM Sans;
        font-weight: 800;
    }

    .bytes-text {
        color: #d3147d;
        font-size: 180%;
        font-weight: 200;
    }

}


@media (orientation: portrait) {

    .bytes h2 {
        font-size: 200%;
        color: #740039;
        margin: 0px;
        margin-top: 20px;
        text-align: center;
        text-transform: capitalize;
    }

    .bytes h4 {
        font-size: 200%;
        color: #444444;
        margin: 0px;
        text-align: center;
        text-transform: capitalize;
        font-family: DM Sans;
    }

    .bytes h3 {
        font-size: 200%;
        color: #444444;
        margin: 0px;
        text-transform: capitalize;
        border-left: solid 7px;
        padding: 10px;
        background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        font-weight: 800;
    }

    .bytes-text {
        color: #d3147d;
        font-size: 180%;
        font-weight: 200;
    }

}

/*

Value

*/


@media (orientation: landscape) {

    .value-item {
        padding: 20px;
    }

    .value h2 {
        font-size: 250%;
        font-weight: 800;
        color: #740039;
        margin: 0px;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    
    .value h4 {
        font-size: 150%;
        color: #d3147d;
        margin: 0px;
        margin-bottom: 10px;
        font-family: DM Sans;
        font-weight: 800;
    }
    
    .value .bytes h2 {
        text-align: left;
        margin-top: 0px;
    }

    .value p {
        font-size: 120%;
        line-height: 150%;
        margin: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
        color: #666;
    }

}

@media (orientation: portrait) {

    .value-item {
        padding: 0px;
    }

    .value h2 {
        font-size: 200%;
        font-weight: 800;
        color: #740039;
        margin: 0px;
        margin-right: 20px;
        margin-bottom: 20px;
        font-family: DM Sans;
    }
    
    .value h4 {
        font-size: 150%;
        color: #d3147d;
        margin: 0px;
        margin-bottom: 5px;
        font-family: DM Sans;
        font-weight: 800;
    }
    
    .value .bytes h2 {
        text-align: left;
        margin-top: 0px;
    }

    .value p {
        font-size: 120%;
        line-height: 150%;
        margin: 0px;
        margin-top: 0px;
        margin-bottom: 20px;
        color: #666;
    }

}


/*

One

*/

.one {
    background: linear-gradient(#ffffff, #f5f5f5);
}

@media (orientation: landscape) {

    .one h2 {
        font-size: 400%;
        color: #740039;
        margin: 0px;
        margin-top: 20px;
        text-align: center;
        text-transform: capitalize;
    }

    .one h4 {
        font-size: 200%;
        color: #444444;
        margin: 0px;
        text-align: center;
        text-transform: capitalize;
        font-family: DM Sans;
    }

    .one-text {
        color: #d3147d;
        font-size: 120%;
        font-weight: 200;
        font-family: DM Sans;
    }

    #sf-animated-text-2::part(text) {
        margin-top: -10px;
        margin-bottom: 10px;
        font-family: DM Sans;
    }
}

@media (orientation: portrait) {

    .one h2 {
        font-size: 300%;
        color: #740039;
        margin: 0px;
        margin-top: 20px;
        text-align: center;
        text-transform: capitalize;
    }

    .one h4 {
        font-size: 150%;
        color: #444444;
        margin: 0px;
        text-align: center;
        text-transform: capitalize;
        font-family: DM Sans;
    }

    .one-text {
        color: #d3147d;
        font-size: 120%;
        font-weight: 200;
        font-family: DM Sans;
    }

    #sf-animated-text-2::part(text) {
        margin-top: -10px;
        margin-bottom: 10px;
        font-family: DM Sans;
    }
}

/*

diff

*/

.diff {
    background-color: #f5f5f5;
}

.diff h2 {
    color: #d3147d;
    font-size: 150%;
    font-family: DM Sans;
    font-weight: 800;
}

@media (orientation: portrait) {

    .diff div {
        text-align: center;

    }

    .diff h2 {
        margin-top: 10px;
    }

}

@media (orientation: landscape) {

    .diff-item .description{
        font-size: 120%;
        color: #666;
        margin-top: 5px;;
    }

}

@media (orientation: portrait) {

    .diff-item .description{
        font-size: 120%;
        color: #666;
        margin-top: 5px;;
    }

}

/*

Offerings

*/


.offerings, .who-2, .why {
    background-color: #f5f5f5;
}


@media (orientation: landscape) {

    .offerings .bytes h2 {
        font-size: 250%;
        font-weight: bold;
        color: #740039;
        margin: 0px;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .offerings h2 {
        font-size: 200%;
        font-weight: bold;
        color: #d3147d;
        margin: 0px;
        margin-right: 20px;
        margin-bottom: 20px;
        font-family: DM Sans;
    }
    
    .offerings h4 {
        font-size: 120%;
        color: #740039;
        font-weight: 400;
        margin: 0px;
        margin-bottom: 20px;
    }
    
    .offerings p {
        font-size: 120%;
        line-height: 150%;
        margin: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #666;
    }

    .who-2 h2 {
        font-size: 250%;
        font-weight: bold;
        color: #d3147d;
        margin: 0px;
        margin-right: 20px;
    }

    .who-2 h4 {
        font-size: 150%;
        color: #740039;
        font-weight: 400;
        margin: 0px;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .who-2 p {
        font-size: 120%;
        line-height: 150%;
        margin: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #666;
    }

}

@media (orientation: portrait) {

    .offerings .bytes h2 {
        font-size: 200%;
        font-weight: bold;
        color: #740039;
        margin: 0px;
        margin-right: 20px;
        margin-bottom: 20px;
    }


    .offerings .bytes h3 {
        font-size: 150%;
        color: #444444;
        margin: 0px;
        text-transform: capitalize;
        border-left: solid 7px;
        padding: 10px;
        background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
        font-weight: 800;
        font-family: DM Sans;
    }

    .offerings h2 {
        font-size: 150%;
        font-weight: bold;
        color: #d3147d;
        margin: 0px;
        margin-right: 20px;
        margin-bottom: 20px;
        font-family: DM Sans;
    }
    
    .offerings h4 {
        font-size: 120%;
        color: #740039;
        font-weight: 400;
        margin: 0px;
        margin-bottom: 20px;
    }
    
    .offerings p {
        font-size: 100%;
        line-height: 150%;
        margin: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #666;
    }

    .who-2 h2 {
        font-size: 250%;
        font-weight: bold;
        color: #d3147d;
        margin: 0px;
        margin-right: 20px;
    }

    .who-2 h4 {
        font-size: 150%;
        color: #740039;
        font-weight: 400;
        margin: 0px;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .who-2 p {
        font-size: 120%;
        line-height: 150%;
        margin: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #666;
    }

}


.b {    
    padding: 10px;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
    border-top: solid 1px rgba(255, 255, 255, 0.3);
    border-left: solid 1px rgba(255, 255, 255, 0.3);
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    border-right: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    background: #d3147d;
    font-weight: 800;
    font-size: 120%;
    color: #fff;
    font-family: DM Sans;
}

.b:active {

    border-width: 0px;      
    border-radius: 5px;
    color: #666;
    background: #efefef;
    box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25), -1px -1px 1px 0 rgba(255, 255, 255, 0.6);
    border-top: solid 1px rgba(255, 255, 255, 0.3);
    border-left: solid 1px rgba(255, 255, 255, 0.3);
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    border-right: solid 1px rgba(0, 0, 0, 0.1);
    
  }

.c-black {
    color: black;
}


@media (orientation: portrait) {

    .who h2 {
        font-size: 200%;
        color: #d3147d;
    }
    
    .who h4 {
        font-size: 120%;
        color: #666;
        font-weight: 400;
    }
    
    .who p {
        line-height: 140%;
    }

}

/*

coverage

*/

@media (orientation: landscape) {

    .coverage {
        background-color: #f5f5f5;
    }

    .coverage h2 {
        font-size: 300%;
        color: #740039;
        margin: 0px;
        margin-top: 20px;
        text-align: center;
        text-transform: capitalize;
        font-family: DM Sans;
        font-weight: 800;
    }

    .coverage h4 {
        font-size: 150%;
        font-weight: bold;
        color: #d3147d;
        margin: 0px;
        margin-bottom: 0px;
        font-family: DM Sans;
        font-weight: 800;
    }

    .coverage p {
        font-size: 120%;
        line-height: 150%;
        margin: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #666;
    }

    .coverage-item {
        background-color: #efefef;
        box-shadow: inset 3px 3px 5px #bbbbbb,
                    inset -5px -5px 8px #ffffff;
        border-top: solid 1px rgba(255, 255, 255, 0.8);
        border-left: solid 1px rgba(255, 255, 255, 0.8);
        border-bottom: solid 1px rgba(255, 255, 255, 0.8);
        border-right: solid 1px rgba(255, 255, 255, 0.8);
        border-radius: 20px;
    }

    .coverage .description {
        margin-top: 20px;
        margin-bottom: 0px;
        font-size: 120%;
        color: #333;
        line-height: 140%;
    }

}

@media (orientation: portrait) {

    .coverage {
        background-color: #f5f5f5;
    }

    .coverage h2 {
        font-size: 200%;
        color: #740039;
        margin: 0px;
        margin-top: 20px;
        text-align: center;
        text-transform: capitalize;
        font-family: DM Sans;
        font-weight: 800;
    }

    .coverage h4 {
        font-size: 120%;
        font-weight: bold;
        color: #d3147d;
        margin: 0px;
        margin-bottom: 0px;
        font-family: DM Sans;
        font-weight: 800;
    }

    .coverage p {
        font-size: 120%;
        line-height: 150%;
        margin: 0px;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #666;
    }

    .coverage-item {
        background-color: #efefef;
        box-shadow: inset 3px 3px 5px #bbbbbb,
                    inset -5px -5px 8px #ffffff;
        border-top: solid 1px rgba(255, 255, 255, 0.8);
        border-left: solid 1px rgba(255, 255, 255, 0.8);
        border-bottom: solid 1px rgba(255, 255, 255, 0.8);
        border-right: solid 1px rgba(255, 255, 255, 0.8);
        border-radius: 20px;
    }

    .coverage .description {
        margin-top: 20px;
        margin-bottom: 0px;
        font-size: 120%;
        color: #333;
        line-height: 140%;
    }

}

/*

why

*/


@media (orientation: landscape) {

    .why h2 {
        font-size: 200%;
        font-weight: 800;
        color: #740039;
        margin: 0px;
        margin-right: 20px;
        margin-bottom: 20px;
        font-family: DM Sans;
    }
    
    .why h4 {
        font-size: 150%;
        font-weight: bold;
        color: #d3147d;
        margin: 0px;
        margin-bottom: 0px;
        font-family: DM Sans;
        font-weight: 800;
    }
    
    .why p {
        font-size: 120%;
        line-height: 150%;
        margin: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
        color: #666;
    }

}

@media (orientation: portrait) {

    .why h2 {
        font-size: 200%;
        font-weight: 800;
        color: #740039;
        margin: 0px;
        margin-right: 20px;
        margin-bottom: 20px;
        font-family: DM Sans;
    }
    
    .why h4 {
        font-size: 120%;
        color: #d3147d;
        margin: 0px;
        margin-bottom: 10px;
        font-family: DM Sans;
        font-weight: 800;
    }
    
    .why p {
        font-size: 120%;
        line-height: 150%;
        margin: 0px;
        margin-top: 0px;
        margin-bottom: 10px;
        color: #666;
    }

}

/*

Team

*/

@media (orientation: landscape) {

    .team {
        background-color: #fdfdfd;
    }

    .team-item {
        margin: 20px;
        padding: 20px;
        width: 25%;  
    }

    .team-item h4 {

        margin-top: 20px;
        margin-bottom: 0px;
        color: #d3147d;
        font-size: 150%;
        text-align: center;
    }

    .team-item p {

        margin-top: 5px;
        margin-bottom: 0px;
        font-size: 100%;
        color: #666;
        text-align: center;
    }

    .team .description {
        margin-top: 20px;
        margin-bottom: 0px;
        font-size: 120%;
        color: #333;
        text-align: center;
        line-height: 140%;
    }

    .team h5 {
        background-color: #da83ac;
        color: white;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 5px;
        font-weight: 400;
        margin-top: 10px;
        margin-bottom: 0px;
    }

}

@media (orientation: portrait) {

    .team {
        background-color: #fdfdfd;
    }

    .team-item {
        width: 100%;
        margin: 20px;
        padding: 20px;   
    }

    .team-item h4 {

        margin-top: 20px;
        margin-bottom: 0px;
        color: #d3147d;
        font-size: 150%;
        text-align: center;
    }

    .team-item p {

        margin-top: 5px;
        margin-bottom: 0px;
        font-size: 100%;
        color: #666;
        text-align: center;
    }

    .team .description {
        margin-top: 20px;
        margin-bottom: 0px;
        font-size: 120%;
        color: #333;
        line-height: 140%;
    }

    .team h5 {
        background-color: #da83ac;
        color: white;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 5px;
        font-weight: 400;
        margin-top: 10px;
        margin-bottom: 0px;
    }

}

/*

Bio

*/

#bio {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.8);
}


@media (orientation: landscape) {

    #bio {

        border-radius: 10px;
        overflow-y: auto;

    }

    #bio-cover {
        width: 40%;
        background-color: white;
        box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
        border-radius: 10px;;
    }

    #bio img {

        border-radius: 10px;

    }

    #bio h4 {

        margin-top: 0px;
        margin-bottom: 0px;
        color: #740039;
        font-size: 150%;
    }

    #bio .designation {

        margin-top: 5px;
        margin-bottom: 0px;
        font-size: 100%;
        color: #666;
    }

    #bio .rt {

        color: #333;
        font-size: 110%;
    }

    #bio .description {

        line-height: 150%;
    }

}

@media (orientation: portrait) {

    #bio {

        border-radius: 10px;
        overflow-y: auto;

    }

    #bio-cover {
        width: 90%;
        background-color: white;
        box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
        border-radius: 10px;;
    }

    #bio img {

        border-radius: 10px;

    }

    #bio h4 {

        margin-top: 0px;
        margin-bottom: 0px;
        color: #740039;
        font-size: 120%;
    }

    #bio .designation {

        margin-top: 5px;
        margin-bottom: 0px;
        font-size: 100%;
        color: #666;
    }

    #bio .rt {

        color: #333;
        font-size: 95%;
    }

    #bio .description {

        line-height: 130%;
    }

}


/*

Contact

*/

.contact-box {
    background-color: #833774;
}

@media (orientation: landscape) {

    .contact {
        background-color: #6B245D;
    /* background-image: linear-gradient(to right, #761964 5px, #761964, #833774, #833774 5px );
    background-size: 6px 100%; */
        background-size: 10px 10px;
        background-image: repeating-linear-gradient(45deg, #833774 0, #833774 1px, #761964 0, #761964 50%);
    }

    .contact .description {
        margin-top: 20px;
        margin-bottom: 0px;
        font-size: 110%;
        color: #333;
        line-height: 140%;
    }

    .contact .description-inner {
        margin-top: 20px;
        margin-bottom: 0px;
        font-size: 90%;
        color: #333;
        line-height: 140%;
        text-align: left;
    }

    .contact h4 {
        color: #740039;
        text-align: left;
        font-size: 120%;
    }

    .contact h4 a{
        color: #d3147d;
        text-align: left;
        font-size: 120%;
        text-decoration: none;
        cursor: pointer;
    }

    .contact h5 {
        color: #d3147d;
        font-size: 100%;
        font-weight: bold;
        text-align: left;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .contact-item {
        padding: 0px;
    }

}

@media (orientation: portrait) {

    .contact {
        background-color: #6B245D;
        background-size: 10px 10px;
        background-image: repeating-linear-gradient(45deg, #833774 0, #833774 1px, #761964 0, #761964 50%);
    }

    .contact .description {
        margin-top: 20px;
        margin-bottom: 0px;
        font-size: 100%;
        color: #333;
        line-height: 140%;
    }

    .contact .description-inner {
        margin-top: 20px;
        margin-bottom: 0px;
        font-size: 90%;
        color: #333;
        line-height: 120%;
        text-align: left;
    }

    .contact h4 {
        color: #740039;
        text-align: left;
        font-size: 100%;
    }

    .contact h4 a{
        color: #d3147d;
        text-align: left;
        font-size: 100%;
        text-decoration: none;
        cursor: pointer;
    }

    .contact h5 {
        color: #d3147d;
        font-size: 100%;
        font-weight: bold;
        text-align: left;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .contact-item {
        padding: 0px;
    }

}

/*

Footer

*/

.footer {
    /* border-top: solid 1px #8a4b7d; */
    background-color: #6B245D;
    /* background-image: linear-gradient(to right, #761964 5px, #761964, #833774, #833774 5px );
    background-size: 6px 100%; */
    /* background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, #833774 0, #833774 1px, #761964 0, #761964 50%); */
}


@media (orientation: landscape) {


    .footer img {
        width: 150px;
    }

    .footer ul{
        display: flex;
        list-style: none;
    }

    .footer ul li{
        padding-left: 10px;
        padding-right: 10px;
        font-size: 120%;
    }

    .footer ul li a {
        text-decoration: none;
        color: #740039;
    }

    .grievance {
        color: #666;
        font-size: 100%;
    }

    .footer .copyright {
        color: #666;
        font-size: 120%;
    }

    .footer .w-25 {
        width: 25px;;
    } 
}

@media (orientation: portrait) {


    .footer img {
        width: 150px;
    }

    .footer ul{
        display: flex;
        list-style: none;
        padding-left: 0px;
        flex-wrap: wrap;
    }

    .footer ul li{
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        font-size: 120%;
    }

    .footer ul li a {
        text-decoration: none;
        color: #740039;
    }

    .footer .copyright {
        color: #666;
        font-size: 100%;
    }

    .footer .w-25 {
        width: 25px;;
    } 

    .grievance {
        color: #666;
        font-size: 80%;
    }
}


/*

Testimonial

*/

.testimonials {
    background-color: #f5f5f5;
}

@media (orientation: landscape) {

    .testimonial-subtitle {
        font-family: DM Sans;
        color: #d3147d;
        font-size: 150%;
        margin-bottom: 10px;
    }

    .testimonial-title {
        font-family: DM Sans;
        font-weight: 800;
        color: #740039;
        font-size: 200%;
        margin-top: 0px;
    }

    .testimonial-width {
        width: 60%;
    }

}

@media (orientation: portrait) {

    .testimonial-subtitle {
        font-family: DM Sans;
        color: #d3147d;
        font-size: 120%;
        margin-bottom: 10px;
    }

    .testimonial-title {
        font-family: DM Sans;
        color: #740039;
        font-size: 200%;
        margin-top: 0px;
    }

    .testimonial-width {
        width: 80%;
    }

}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Make the images invisible by default */
.Containers {
  display: none;
  width: 100%;
  flex-wrap: wrap;
}

/* forward & Back buttons */
.Back, .forward {
  cursor: pointer;
  width: auto;
  padding: 17px;
  color: grey;
  font-weight: bold;
  font-size: 19px;
  transition: 0.4s ease;
  border-radius: 0 5px 5px 0;
  user-select: none;
}

/* Place the "forward button" to the right */
.forward {
  right: 0;
  border-radius: 4px 0 0 4px;
}

/*when the user hovers,add a black background with some little opacity */
.Back:hover, .forward:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption Info */
.Info {
    display: flex;
    font-size: 16px;
    width: 100%;
    text-align: center;
    display: flex;
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.25), -1px -1px 10px 0 rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    align-items: flex-start;
    justify-content: space-between;
    background-color: #AF106F;
    flex-wrap: wrap;
}

@media (orientation: landscape) {

    .Info {
        padding: 30px;
    }

    .quote img {
        width: 100px;
    }

}

@media (orientation: portrait) {

    .Info {
        padding: 20px;
    }

    .quote img {
        width: 70px;
    }

}

.quote-text {
    text-align: left;
    line-height: 140%;
    color: white;
    
}

@media (orientation: landscape) {

    .quote-text {
        margin-left: 20px;
        font-size: 120%;
    }

}

@media (orientation: portrait) {

    .quote-text {
        font-size: 90%;
    }

}

.quote-user {
    text-align: left;
    line-height: 140%;
    color: #da83ac;
    
    border-top: solid 3px #da83ac;
    font-family: DM Sans;
        font-weight: 800;
    margin-top: 20px;
    padding-top: 10px;
}

@media (orientation: landscape) {

    .quote-user {
        margin-left: 20px;
        font-size: 120%;
    }

}

@media (orientation: portrait) {

    .quote-user {
        font-size: 90%;
    }

}

/* Worknumbering (1/3 etc) */
.MessageInfo {
  color: #f2f2f3;
  font-size: 14px;
  padding: 10px 14px;
  position: absolute;
  top: 0;
}

/* The circles or bullets and indicators */
.dots {
  cursor: pointer;
  height: 16px;
  width: 16px;
  margin: 0 3px;
  background-color: #acc;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.5s ease;
}

.enable, .dots:hover {
  background-color: #717161;
}

/* Faint animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.4s;
  animation-name: fade;
  animation-duration: 1.4s;
}

@-webkit-keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}

@keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}

/*

Quote

*/