body {
    background: #FBFBFF;
    display: flex;
    justify-content: center;
    margin: 0px;
}

.hidden{
    display: none !important;
}

.show{
    display: block !important;
}

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

.selected-page {
    color: #9046CF !important;
    font-weight: 700 !important;
}

.main-color {
    color: #9046CF !important;
}

.dark-color {
    color: #3F3D56 !important;
}

.regular {
    font-weight: 400;
}

.bold {
    font-weight: 700;
}

.roboto {
    font-family: 'Roboto';
}

.mw {
    font-family: 'Merriweather';
}

.font-line-24 {
    line-height: 24px;
}

.font-line-32 {
    line-height: 32px;
}

.font-line-54 {
    line-height: 54px;
}

.font-16 {
    font-size: 16px;
}

.font-24 {
    font-size: 24px;
}

.font-46 {
    font-size: 46px;
}

.center-container {
    position: relative;
}

.centerX-element {
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.centerY-element {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

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

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

.mt-32 {
    margin-top: 30px;
}

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

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

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

.contact-us {
    display: block;
    position: relative;
    width: 143px;
    height: 48px;
    background: #9046CF;
    border-radius: 24px;
}

.contact-us div {
    color: white;
    text-decoration: none;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.visible-s,
.visible-s-up,
.visible-m-down,
.visible-l-down
{
    display: block;
}

.visible-m,
.visible-m-up,
.visible-l,
.visible-l-up,
.visible-xl
{
    display: none;
}

#privacy-container{
    padding: 5px 120px;
    text-align: justify;
}

.slider-dot {
    background: #D9D9D9;
    border: 1px solid transparent;
    border-radius: 50%;
    width: 10px;
    height: 12px;
    z-index: 10px;
    cursor: pointer;
}

.slidet-dot-active {
    background: #9046CF !important;
}

@media only screen and (max-width: 767px)
{
    #header {
        height: 97px;
    }
    
    #header-content {
        width: 100%;
        height: 97px;
        padding-top: 12px;
        display: grid;   
        position: fixed;            
        left: 0px;
        right: 0px;
        background: #FBFBFF;
        z-index: 10 !important;   
    }
    
    #logo {    
        width: 100%;
        height: 42px;        
        position: relative;
    }
    
    #logo a {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #tabs {
        margin-top: 1px;
        height: 42px;
        display: flex;      
        flex-direction: row;
        align-content: stretch;
    }
    
    .tab {
        width: calc(100% / 3);
        position: relative;
        border-bottom:1px solid #CCCCCC;
        color: #000000;
    }
    
    .tab a,
    .tab a:link,
    .tab a:hover,
    .tab a:visited,
    .tab a:active {        
        color: inherit;
        text-decoration: none;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);        
    }  
    
    .selected-page
    {
        border-bottom: 3px solid #9046CF;
        border-radius: 2px;
    }

    #login-m
    {
        position: fixed;
        top: 18px;
        right: 16px;
        width: 24px;
        height: 24px;
        background: url('./../images/login-mobile.svg');
        background-repeat: no-repeat;
        background-size: contain;
    }   

    #lang-change-m{
        position: fixed;
        top: 21px;
        right: 70px;
    }

    #lang-change-dialog{
        width: 100%;
        height: 100%;
        background-color: white;
        border: 0px;
    }

    #lang-change-dialog-title{
        height: 48px;
        width: 100%;
        margin-bottom: 16px;
        text-align: center;        
    }

    #lang-change-dialog-title img{
       position: absolute;
        left: 13px;
        margin-top: -2px;
    }

    #lang-change-dialog-content a{
        text-decoration: none;
        display: block;
        position: relative;  
        color: #000000;  
        height: 48px;
        font-family: 'Roboto';
        font-size: 16px;
    }  

    #lang-change-dialog-content a img{
        width: 20px;
        height: 20px;
    }
    
    #lang-change-dialog-content a span{
        margin-left: 32px;
    }

    .lang_check{
        right: 0px;
    }

    #index-text {        
        margin-top: 30px;
        padding: 0 16px;
        text-align: center;
    }

    #index-text h1 {
        font-style: normal;
        color: #3F3D56;
        font-size: 24px;
        margin-top: 0;
    }

    #index-text p {
        color: #2F2E41;        
        font-size: 16px;   
        line-height: 24px !important;     
    }

    #main-content {
        position: relative;
    }

    #index-image {
        position: fixed;
        width: 284px;
        height: auto;
        aspect-ratio: 1;
        bottom: 86px;
        max-height: 50%;   
        background: url('./../images/index.svg');
        background-repeat: no-repeat;
        background-size: contain;
        left: 49%;
        transform: translateX(-50%);
        z-index: -1;
    }

    .contact-us {
        display: block;
        position: fixed;
        width: 143px;
        height: 48px;
        bottom: 38px;
        left: calc((100% - 143px)/ 2);
        background: #9046CF;
        border-radius: 24px;
    }
    
    .contact-us div {
        color: white;
        text-decoration: none;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #title {
        height: 104px;
        position: relative;
    }

    #title div {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    #title h1 {
        font-style: normal;
        font-size: 24px;
        line-height: 23px;
        margin-top: 30px;
        text-align: center;
        width: 220px;
    }

    #title p {
        font-style: normal;
        text-align: center;
        font-size: 16px;
        padding: 0px;
        color: #818181;
    }  
    
    #container {
        position: relative;
        display: contents;
    }

    #about-center {
        position: absolute;
        width: 261px;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #about-image1 {
        background: url('./../images/about1.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;        
        height: 160px; 
        width: 123px;  
    }

    #about-image2 {
        background: url('./../images/about2.svg');
        background-repeat: no-repeat;        
        background-position: center;
        background-size: contain;
        height: 160px; 
        width: 260px;    
        margin-top: 80px;    
    }

    #about-image3 {
        background: url('./../images/about3.svg');
        background-repeat: no-repeat;        
        background-position: center;
        background-size: contain;
        height: 160px; 
        width: 222px;  
        margin-top: 80px;                     
    }

    #about-image4 {
        background: url('./../images/about4.svg');
        background-repeat: no-repeat;        
        background-position: center;
        background-size: contain;
        height: 160px; 
        width: 140px; 
        margin-top: 80px;                   
    }
    .about-number {        
        font-style: normal;
        font-size: 40px;
        color: #2F2E41;  
        margin-top: 40px;              
        text-align: center;
    }

    .divider {     
        margin-top: 24px;         
        width: 60px;
        height: 4px;
        border: 1px solid #2F2E41;
        background: #2F2E41;
        border-radius: 3px;
        margin-left: calc((100% - 60px) / 2);
    }

    #about-text1 {
        margin-top: 24px;            
    }

    #about-text2 {
        margin-top: 24px;                
    }

    #about-text3 {
        margin-top: 24px;                      
    }

    #about-text4 {
        margin-top: 24px;                
    }

    .about-text {
        font-style: normal;
        text-align: center;
        color: #2F2E41;
    }

    .slider {        
        width: 99vw;
        display: grid;
        grid-template-columns: 30px 1fr 30px;
        grid-template-rows: 1fr 15px;
        grid-column-gap: 0px;
        grid-row-gap: 10px;
    }

    .slide {
        width:  calc(100% - 48px);        
        display: none;
        padding: 24px;
        grid-template-columns: 1fr;
        grid-template-rows: 180px 60px 139px;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .slide-previous {        
        display: none;
    }

    .slide-next {        
        display: none;
    }

    .slide-active {
        grid-area: 1 / 2 / 2 / 3;
        display: grid;
        background: white;       
        border-radius: 24px;
        border: 1px solid #FDFDFF;
    }

    .slide-next-btn {
        display: none;
    }

    .slide-next-btn button {
        display: none;
        border: none;
        z-index: 10;
        padding: 0;
        cursor: pointer;
        background: transparent;    
        margin-left: calc((100% - 21px)/ 2);    
    }

    .slide-prev-btn {
        display: none;
    }

    .slide-prev-btn button {
        display: none;
        border: none;
        z-index: 10;
        cursor: pointer;
        background: transparent;                      
        padding: 0;
        margin-left: calc((100% - 21px)/ 2);
    }


    .slide-image {
        grid-area: 1 / 1 / 2 / 2;
        margin-top: 20px;
    }

    .slide-image img{
        height: 160px;                
    }

    .slide-title {
        grid-area: 2 / 1 / 3 / 2;
        color: #2F2E41;
    }

    .slide-title p{
        margin-top: 20px;
    }

    .slide-text {
        grid-area: 3 / 1 / 4 / 2;
    }

    .slide-text p {
        color: #2F2E41;        
        text-align: center;
        line-height: 24px;
        padding: 0px;
        width: 100%;
    }

    .slider-status {
        grid-area: 2 / 2 / 3 / 3;        
    }

    .slider-grid {
        display: grid;
        grid-template-columns: repeat(5, 12px);
        grid-template-rows: 12px;
        grid-column-gap: 12px;
        grid-row-gap: 0px;
    }

    #dot1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    #dot2 {
        grid-area: 1 / 2 / 2 / 3;
    }

    #dot3 {
        grid-area: 1 / 3 / 2 / 4;
    }

    #dot4 {
        grid-area: 1 / 4 / 2 / 5;
    }

    #dot5 {
        grid-area: 1 / 5 / 2 / 6;
    }

    #pricing-center {
        width: calc(100vw - 16px); 
        margin-top: 30px;
        display: flex;
        overflow-x: auto;     
        -ms-overflow-style: none;
        scrollbar-width: none;          
    }

    #pricing-center::-webkit-scrollbar {
        display: none;
      }

    .pricing-card {
        border-radius: 24px;
        border: 1px solid #9046CF;
        padding: 32px;
        font-style: normal;
        width: 176px;
        flex-shrink: 0;
        height: calc(100% - 64px);
    }

    .pricing-card h3 {
        font-size: 18px;
        line-height: 32px;
        margin-top: 0px;
    }

    #pricing-regular {        
        background: #9046CF;
        color: white;
    }

    #pricing-special {       
        background: transparent;
        color: #3F3D56;
        margin-left: 16px;
    }

    #pricing-image
    {
        background: url('./../images/pricing.svg');
        background-repeat: no-repeat;
        background-size: contain;
        height: 452px;
        width: auto;
        aspect-ratio: calc(194/537);        
    }

    #pricing-image2
    {
        display: none;
    }

    .pricing-divider {
        width: 32px;
        height: 4px;
        border: solid 1px;
        border-radius: 3px;
        margin-top: 5px;
        margin-bottom: 14px;
    }

    .pricing-divider-dark {
        background-color: #3F3D56;
        border-color: #3F3D56;
    }

    .pricing-divider-white {
        background-color: white;
        border-color: white;
    }

    .price {        
        margin-bottom: 20px;
        font-size: 30px;
        line-height: 16px;
        margin-top: 4px;
        height: 40px;
        margin-right: -32px;
    }

    .price span{
        font-size: 12px;
        font-weight: 400;
    }

    .pricing-card ul {
        list-style-type: "✓  ";
        font-family: 'Roboto';
        margin-top: 0px;
        padding-inline-start: 20px;
    }

    .pricing-card li {
        margin-bottom: 1em;
    }

    .price-expl
    {
        font-size: 12px;
    }

    #pricing-expl {        
        color: #818181;
        width: calc(100% - 32px);
        text-align: center;
    }

    #pricing-expl p{
        font-size: 12px;
    }

    .contact-us-m {
        display: block;
        position: relative;
        width: 143px;
        height: 48px;
        background: #9046CF;
        border-radius: 24px;
    }
    
    .contact-us-m div {
        color: white;
        text-decoration: none;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

@media only screen and (max-width: 420px)
{
    #title {
        height: 104px;
        position: relative;
    }

    #title div {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    #title h1 {
        font-style: normal;
        font-size: 18px;
        line-height: 23px;
        margin-top: 30px;
        text-align: center;
    }
}

@media only screen and (max-width: 300px)
{
    .slide-text p {
        line-height: 20px;
        font-size: 12px !important;        
    }
}

@media only screen and (min-width: 768px)
{
    .visible-s
    {
        display: none;
    }

    .visible-m,
    .visible-m-up
    {
        display: block;
    }    

    #header {
        height: 80px;
    }

    #main-container {
        width: 768px;
    }

    #header-content {
        width: 768px;
        height: 80px;
        display: grid;
        grid-template-columns: 30px 82px 100px 253px 66px 214px 22px;
        grid-template-rows: 80px;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    #logo {
        margin-top: 26px;
        margin-bottom: 26px;
        width: 81px;
        height: 39px;
        grid-area: 1 / 2 / 2 / 3;
        position: relative;
    }

    #logo a {
        margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    #tabs {
        grid-area: 1 / 4 / 2 / 5;
        margin-top: 24px;
        margin-bottom: 21px;
        height: 32px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-content: center;
    }

    .tab {
        width: 80px;
        position: relative;
        color: #000000;
    }

    .tab a,
    .tab a:link,
    .tab a:hover,
    .tab a:visited,
    .tab a:active {        
        color: inherit;
        text-decoration: none;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #login-contact {
        margin-top: 24px;
        margin-bottom: 21px;
        height: 32px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        grid-area: 1 / 6 / 2 / 7;
        align-content: center;
    }

    #contact {
        color: white !important;
        border: 1px solid #9046CF;
        background: #9046CF;
        border-radius: 16px;
        display: flex;
        justify-content: center;
        padding: 5px 14px;
    }

    #index-text {
        position: absolute;
        left: 30px;
        top: 40px;
    }

    #index-text h1 {
        font-style: normal;
        color: #3F3D56;
        width: 495px;
        font-size: 40px;
        margin-top: 0;
    }

    #index-text p {
        color: #818181;
        width: 398px;
        font-size: 18px;
    }

    #main-content {
        position: relative;
    }

    #index-image {
        position: fixed;
        right: calc((100% - 768px) / 2);
        width: 601px;
        height: 611px;
        max-height: calc(100% - 311px);
        bottom: 0px;
        background: url('./../images/index.svg');
        background-repeat: no-repeat;
        background-size: contain;
    }

    #title {
        height: 154px;
        position: relative;
    }

    #title div {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    #title h1 {
        font-style: normal;
        font-size: 40px;
        line-height: 44px;
        margin-top: 40px;
        text-align: center;
    }

    #title p {
        font-style: normal;
        text-align: center;
        font-size: 18px;
        padding: 0 58px;
        color: #818181;
    }

    #container {
        position: relative;
    }

    #about-center {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        display: grid;
grid-template-columns: repeat(2, 344px);
grid-template-rows: 120px 96px 6px 144px 150px 96px 6px 144px;
grid-column-gap: 20px;
grid-row-gap: 0px;
    }

    #about-image1 {
        grid-area: 1 / 1 / 2 / 2;
        background: url('./../images/about1.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height: 120px;
        width: 195px;
        margin-left: 74.5px;
    }

    #about-image2 {
        background: url('./../images/about2.svg');
        background-repeat: no-repeat;
        grid-area: 1 / 2 / 2 / 3;
        background-position: center;
        background-size: contain;
        height: 120px;
        width: 195px;
        margin-left: 74.5px;
    }

    #about-image3 {
        background: url('./../images/about3.svg');
        background-repeat: no-repeat;
        grid-area: 5 / 1 / 6 / 2;
        background-position: center;
        background-size: contain;
        height: 120px;
        width: 195px;
        margin-left: 74.5px;
        margin-top: 30px;
    }

    #about-image4 {
        background: url('./../images/about4.svg');
        background-repeat: no-repeat;
        grid-area: 5 / 2 / 6 / 3;
        background-position: center;
        background-size: contain;
        height: 120px;
        width: 195px;
        margin-left: 74.5px;  
        margin-top: 30px;      
    }

    #about-number1 {
        grid-area: 2 / 1 / 3 / 2;
        position: relative;
    }

    #about-number2 {
        grid-area: 2 / 2 / 3 / 3;
        position: relative;
    }

    #about-number3 {
        grid-area: 6 / 1 / 7 / 2;
        position: relative;
    }

    #about-number4 {
        grid-area: 6 / 2 / 7 / 3;
        position: relative;
    }

    .about-number {
        position: absolute;
        left: 50%;
        top: 36px;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        font-style: normal;
        font-size: 40px;
        color: #2F2E41;
    }

    #about-divider1 {
        position: relative;
        grid-area: 3 / 1 / 4 / 2;
    }

    #about-divider2 {
        position: relative;
        grid-area: 3 / 2 / 4 / 3;
    }

    #about-divider3 {
        position: relative;
        grid-area: 7 / 1 / 8 / 2;
    }

    #about-divider4 {
        position: relative;
        grid-area: 7 / 2 / 8 / 3;
    }

    .divider {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);

        width: 60px;
        height: 4px;
        border: 1px solid #2F2E41;
        background: #2F2E41;
        border-radius: 3px;
    }

    #about-text1 {
        margin-top: 8px;
        margin-left: 31px;
        width: 282px;
        grid-area: 4 / 1 / 5 / 2;
    }

    #about-text2 {
        margin-top: 8px;
        margin-left: 31px;
        width: 282px;
        grid-area: 4 / 2 / 5 / 3;
    }

    #about-text3 {
        margin-top: 8px;
        margin-left: 32px;
        width: 282px;
        grid-area: 8 / 1 / 9 / 2;
    }

    #about-text4 {
        margin-top: 8px;
        margin-left: 32px;
        width: 282px;
        grid-area: 8 / 2 / 9 / 3;
    }

    .about-text {
        font-style: normal;
        text-align: center;
        color: #2F2E41;
    }

    .slider {
        margin-top: 98px;
        display: grid;
        grid-template-columns: 150px 380px 150px;
        grid-template-rows: 560px 32px;
        grid-column-gap: 18px;
        grid-row-gap: 24px;
    }

    .slide {
        width: 300px;
        height: 480px;
        display: none;
        padding: 40px;
        grid-template-columns: 300px;
        grid-template-rows: 210px 122px 165px;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .slide-previous {        
        display: none;
    }

    .slide-next {        
        display: none;
    }

    .slide-active {
        grid-area: 1 / 2 / 2 / 3;
        display: grid;
        background: white;    
        border-radius: 24px;
        border: 1px solid #FDFDFF;
    }

    .slide-next-btn {
        grid-area: 1 / 3 / 2 / 4;
    }

    .slide-next-btn button {
        border: none;
        z-index: 10px;
        cursor: pointer;
        background: transparent;
        margin-left: 62px;
    }

    .slide-prev-btn {
        grid-area: 1 / 1 / 2 / 2;
    }

    .slide-prev-btn button {
        border: none;
        z-index: 10px;
        cursor: pointer;
        background: transparent;        
        margin-left: 57px;        
    }


    .slide-image {
        grid-area: 1 / 1 / 2 / 2;
        margin-top: 50px;
    }

    .slide-image img{
        height: 160px;                
    }

    .slide-title {
        grid-area: 2 / 1 / 3 / 2;
        color: #2F2E41;
    }

    .slide-title p{
        margin-top: 66px;
    }

    .slide-text {
        grid-area: 3 / 1 / 4 / 2;
    }

    .slide-text p {
        color: #2F2E41;
        width: 300px;
        text-align: center;
        line-height: 32px;
        padding: 0px;
    }

    .slider-status {
        grid-area: 2 / 2 / 3 / 3;
        margin-bottom: 20px;
    }

    .slider-grid {
        display: grid;
        grid-template-columns: repeat(5, 12px);
        grid-template-rows: 12px;
        grid-column-gap: 12px;
        grid-row-gap: 0px;
    }        

    #dot1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    #dot2 {
        grid-area: 1 / 2 / 2 / 3;
    }

    #dot3 {
        grid-area: 1 / 3 / 2 / 4;
    }

    #dot4 {
        grid-area: 1 / 4 / 2 / 5;
    }

    #dot5 {
        grid-area: 1 / 5 / 2 / 6;
    }

    #pricing-center {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        margin-top: 110px;        
        display: grid;
        grid-template-columns: repeat(2, 285px);
        grid-template-rows: 428px;
        grid-column-gap: 22px;
        grid-row-gap: 0px;
    }

    .pricing-card {
        border-radius: 24px;
        border: 1px solid #9046CF;
        padding: 32px;
        font-style: normal;
    }

    .pricing-card h3 {
        font-size: 18px;
        line-height: 32px;
        margin-top: 0px;
    }

    #pricing-regular {
        grid-area: 1 / 1 / 2 / 2;
        background: #9046CF;
        color: white;
    }

    #pricing-special {
        grid-area: 1 / 2 / 2 / 3;
        background: transparent;
        color: #3F3D56;
    }

    #pricing-image
    {
        grid-area: 1 / 4 / 2 / 5;
        margin-left: -22px;
        background: none;
        background-repeat: no-repeat;
        background-size: contain;
    }

    #pricing-image2
    {
        position: fixed;
        background: url('./../images/pricing2.svg');
        background-repeat: no-repeat;
        background-size: contain;
        width: 245px;
        height: 362px;
        top: 672px;
        left: calc(((100% - 245px)/2) - 34px);
    }

    .pricing-divider {
        width: 32px;
        height: 4px;
        border: solid 1px;
        border-radius: 3px;
        margin-top: 5px;
        margin-bottom: 14px;
    }

    .pricing-divider-dark {
        background-color: #3F3D56;
        border-color: #3F3D56;
    }

    .pricing-divider-white {
        background-color: white;
        border-color: white;
    }

    .price {        
        margin-bottom: 20px;
        font-size: 36px;
        line-height: 32px;
        margin-top: 4px;
        height: 40px;
        margin-right: -30px;
    }

    .price span{
        font-size: 14px;
        font-weight: 400;
    }

    .pricing-card ul {
        list-style-type: "✓  ";
        font-family: 'Roboto';
        margin-top: 0px;
        padding-inline-start: 20px;
    }

    .pricing-card li {
        margin-bottom: 1em;
    }

    .price-expl
    {
        font-size: 14px;
    }

    #pricing-expl {
        top: 530px;
        color: #818181;
        width: 590px;
    }

    #pricing-expl p{
        font-size: 12px;
    }
}

@media only screen and (min-width: 1024px)
{
    .visible-m,
    .visible-m-down
    {
        display: none;
    }

    .visible-l,
    .visible-l-up
    {
        display: block;
    }

    #header {
        height: 80px;
    }

    #main-container {
        width: 1024px;
    }

    #header-content {
        width: 1024px;
        height: 80px;
        display: grid;
        grid-template-columns: 60px 82px 227px 287px 77px 232px 61px;
        grid-template-rows: 80px;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    #logo {
        margin-top: 26px;
        margin-bottom: 26px;
        width: 81px;
        height: 39px;
        grid-area: 1 / 2 / 2 / 3;
        position: relative;
    }

    #logo a {
        margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    #tabs {
        grid-area: 1 / 4 / 2 / 5;
        margin-top: 24px;
        margin-bottom: 21px;
        height: 32px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-content: center;
    }

    #login-contact {
        margin-top: 24px;
        margin-bottom: 21px;
        height: 32px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        grid-area: 1 / 6 / 2 / 7;
        align-content: center;
    }

    #contact {
        color: white !important;
        border: 1px solid #9046CF;
        background: #9046CF;
        border-radius: 16px;
        display: flex;
        justify-content: center;
        padding: 5px 14px;
    }

    .tab {
        width: 85px;
        position: relative;
        color: #000000;
    }   

    

    .tab a,
    .tab a:link,
    .tab a:hover,
    .tab a:visited,
    .tab a:active {        
        color: inherit;
        text-decoration: none;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #index-text {
        position: absolute;
        left: 60px;
        top: 40px;
    }

    #index-text h1 {
        font-style: normal;
        color: #3F3D56;
        width: 495px;
        font-size: 40px;
        margin-top: 0;
    }

    #index-text p {
        color: #818181;
        width: 398px;
        font-size: 18px;
    }

    #main-content {
        position: relative;
    }

    #index-image {
        position: fixed;
        right: calc((100% - 1024px) / 2);
        width: 489px;
        height: 497px;
        max-height: calc(100% - 80px);
        bottom: 0px;
        background: url('./../images/index.svg');
        background-repeat: no-repeat;
        background-size: contain;
    }

    #title {
        height: 206px;
        position: relative;
    }

    #title div {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    #title h1 {
        font-style: normal;
        font-size: 40px;
        line-height: 44px;
        margin-top: 40px;
    }

    #title p {
        font-style: normal;
        text-align: center;
        font-size: 18px;
        padding: 0 58px;
        color: #818181;
    }

    #container {
        position: relative;
    }

    #about-center {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat(4, 195px);
        grid-template-rows: 120px 134px 6px 160px;
        grid-column-gap: 34px;
        grid-row-gap: 0px;
    }

    #about-image1 {
        grid-area: 1 / 1 / 2 / 2;
        background: url('./../images/about1.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        height: 120px;
        width: 195px;
        margin: 0;
    }

    #about-image2 {
        background: url('./../images/about2.svg');
        background-repeat: no-repeat;
        grid-area: 1 / 2 / 2 / 3;
        background-position: center;
        background-size: contain;
        height: 120px;
        width: 195px;
        margin: 0;
    }

    #about-image3 {
        background: url('./../images/about3.svg');
        background-repeat: no-repeat;
        grid-area: 1 / 3 / 2 / 4;
        background-position: center;
        background-size: contain;
        height: 120px;
        width: 195px;
        margin: 0;
    }

    #about-image4 {
        background: url('./../images/about4.svg');
        background-repeat: no-repeat;
        grid-area: 1 / 4 / 2 / 5;
        background-position: center;
        background-size: contain;
        height: 120px;
        width: 195px;
        margin: 0;
    }

    #about-number1 {
        grid-area: 2 / 1 / 3 / 2;
        position: relative;
    }

    #about-number2 {
        grid-area: 2 / 2 / 3 / 3;
        position: relative;
    }

    #about-number3 {
        grid-area: 2 / 3 / 3 / 4;
        position: relative;
    }

    #about-number4 {
        grid-area: 2 / 4 / 3 / 5;
        position: relative;
    }

    .about-number {
        position: absolute;
        left: 50%;
        top: 54px;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        font-style: normal;
        font-size: 40px;
        color: #2F2E41;
    }

    #about-divider1 {
        position: relative;
        grid-area: 3 / 1 / 4 / 2;
    }

    #about-divider2 {
        position: relative;
        grid-area: 3 / 2 / 4 / 3;
    }

    #about-divider3 {
        position: relative;
        grid-area: 3 / 3 / 4 / 4;
    }

    #about-divider4 {
        position: relative;
        grid-area: 3 / 4 / 4 / 5;
    }

    .divider {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);

        width: 60px;
        height: 4px;
        border: 1px solid #2F2E41;
        background: #2F2E41;
        border-radius: 3px;
    }

    #about-text1 {
        margin-top: 24px;
        margin-left: 0;
        width: 100%;
        grid-area: 4 / 1 / 5 / 2;
    }

    #about-text2 {
        margin-top: 24px;
        margin-left: 0;
        width: 100%;
        grid-area: 4 / 2 / 5 / 3;
    }

    #about-text3 {
        margin-top: 24px;
        margin-left: 0;
        width: 100%;
        grid-area: 4 / 3 / 5 / 4;
    }

    #about-text4 {
        margin-top: 24px;
        margin-left: 0;
        width: 100%;
        grid-area: 4 / 4 / 5 / 5;
    }

    .about-text {
        font-style: normal;
        text-align: center;
        color: #2F2E41;
    }

    .slider {
        margin-top: 0px;
        display: grid;
        grid-template-columns: 45px repeat(3, 288px) 45px;
        grid-template-rows: 420px 32px;
        grid-column-gap: 18px;
        grid-row-gap: 24px;
    }

    .slide {
        width: 240px;
        height: 372px;
        display: none;
        padding: 24px;
        grid-template-columns: 240px;
        grid-template-rows: 137px 65px 165px;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .slide-previous {
        grid-area: 1 / 2 / 2 / 3;
        display: grid;
    }

    .slide-next {
        grid-area: 1 / 4 / 2 / 5;
        display: grid;
    }

    .slide-active {
        grid-area: 1 / 3 / 2 / 4;
        display: grid;
        background: white;    
        border-radius: 24px;
        border: 1px solid #FDFDFF;
    }

    .slide-next-btn {
        grid-area: 1 / 5 / 2 / 6;
    }

    .slide-next-btn button {
        border: none;
        z-index: 10px;
        cursor: pointer;
        background: transparent;
        margin-left: 0;
    }

    .slide-prev-btn {
        grid-area: 1 / 1 / 2 / 2;
    }

    .slide-prev-btn button {
        border: none;
        z-index: 10px;
        cursor: pointer;
        background: transparent;
        right: 0px;
        margin-left: 0;
    }


    .slide-image {
        grid-area: 1 / 1 / 2 / 2;
        margin-top: 15px;
    }

    .slide-image img{
        height: 120px;
    }

    .slide-title {
        grid-area: 2 / 1 / 3 / 2;
        color: #2F2E41;
    }

    .slide-title p{
        margin-top: 15px;
    }

    .slide-text {
        grid-area: 3 / 1 / 4 / 2;
    }

    .slide-text p {
        color: #2F2E41;
        width: 240px;
        text-align: center;
        line-height: 24px;
        padding: 0px;
    }

    .slider-status {
        grid-area: 2 / 3 / 3 / 4;
        margin-bottom: 20px;
    }

    .slider-grid {
        display: grid;
        grid-template-columns: repeat(5, 12px);
        grid-template-rows: 12px;
        grid-column-gap: 12px;
        grid-row-gap: 0px;
    }    

    #dot1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    #dot2 {
        grid-area: 1 / 2 / 2 / 3;
    }

    #dot3 {
        grid-area: 1 / 3 / 2 / 4;
    }

    #dot4 {
        grid-area: 1 / 4 / 2 / 5;
    }

    #dot5 {
        grid-area: 1 / 5 / 2 / 6;
    }

    #pricing-center {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        margin-top: 0;
        display: grid;
        grid-template-columns: 138px repeat(2, 285px) 138px;
        grid-template-rows: 428px;
        grid-column-gap: 22px;
        grid-row-gap: 0px;
    }

    .pricing-card {
        border-radius: 24px;
        border: 1px solid #9046CF;
        padding: 32px;
        font-style: normal;
    }

    .pricing-card h3 {
        font-size: 18px;
        line-height: 32px;
        margin-top: 0px;
    }

    #pricing-regular {
        grid-area: 1 / 2 / 2 / 3;
        background: #9046CF;
        color: white;
    }

    #pricing-special {
        grid-area: 1 / 3 / 2 / 4;
        background: transparent;
        color: #3F3D56;
    }

    #pricing-image
    {
        grid-area: 1 / 4 / 2 / 5;
        margin-left: -22px;
        background: url('./../images/pricing.svg');
        background-repeat: no-repeat;
        background-size: contain;
    }

    .pricing-divider {
        width: 32px;
        height: 4px;
        border: solid 1px;
        border-radius: 3px;
        margin-top: 5px;
        margin-bottom: 14px;
    }

    .pricing-divider-dark {
        background-color: #3F3D56;
        border-color: #3F3D56;
    }

    .pricing-divider-white {
        background-color: white;
        border-color: white;
    }

    .price {        
        margin-bottom: 20px;
        font-size: 36px;
        line-height: 32px;
        margin-top: 4px;
        height: 40px;
        margin-right: -30px;
    }

    .price span{
        font-size: 14px;
        font-weight: 400;
    }

    .pricing-card ul {
        list-style-type: "✓  ";
        font-family: 'Roboto';
        margin-top: 0px;
        padding-inline-start: 20px;
    }

    .pricing-card li {
        margin-bottom: 1em;
    }

    .price-expl
    {
        font-size: 14px;
    }

    #pricing-expl {
        top: 420px;
        color: #818181;
        width: 590px;
    }

    #pricing-expl p{
        font-size: 12px;
    }
}

@media only screen and (min-width: 1440px) {
    .visible-l,
    .visible-l-down
    {
        display: none;
    }

    .visible-xl
    {
        display: block;
    }
    
    #header {
        height: 116px;
    }

    #main-container {
        width: 1440px;
    }

    #header-content {
        width: 1440px;
        height: 116px;
        display: grid;
        grid-template-columns: 120px 82px 426px 387px 71px 232px 120px;
        grid-template-rows: 116px;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    #logo {
        margin-top: 39px;
        margin-bottom: 39px;
        width: 81px;
        height: 39px;
        grid-area: 1 / 2 / 2 / 3;
        position: relative;
    }

    #logo a {
        margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    #tabs {
        grid-area: 1 / 4 / 2 / 5;
        margin-top: 42px;
        margin-bottom: 39px;
        height: 32px;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-content: center;
    }

    #login-contact {
        margin-top: 42px;
        margin-bottom: 39px;
        height: 32px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        grid-area: 1 / 6 / 2 / 7;
        align-content: center;
    }

    #contact {
        color: white !important;
        border: 1px solid #9046CF;
        background: #9046CF;
        border-radius: 16px;
        display: flex;
        justify-content: center;
        padding: 5px 14px;        
    }

    .tab {
        width: 85px;
        position: relative;
        color: #000000;        
    }

    .tab a,
    .tab a:link,
    .tab a:hover,
    .tab a:visited,
    .tab a:active {        
        color: inherit;
        text-decoration: none;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);        
    }

    #index-text {
        position: absolute;
        left: 120px;
        top: 84px;
    }

    #index-text h1 {
        font-style: normal;
        color: #3F3D56;
        width: 570px;
        font-size: 46px;
        margin-top: 31px;
    }

    #index-text p {
        color: #818181;
        width: 532px;
        font-size: 24px;
    }

    #main-content {
        position: relative;
    }

    #index-image {
        position: fixed;
        right: calc((100% - 1440px) / 2);
        width: 740px;
        height: 754px;
        max-height: calc(100% - 114px);
        bottom: 0px;
        background: url('./../images/index.svg');
        background-repeat: no-repeat;
        top: auto;
    }

    #title {
        height: 220px;
        position: relative;
    }

    #title div {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    #title h1 {
        font-style: normal;
        font-size: 46px;
        line-height: 44px;
        margin-top: 31px;
    }

    #title p {
        font-style: normal;
        text-align: center;
        font-size: 24px;
        color: #818181;
        padding: 0;
    }

    #container {
        position: relative;
    }

    #about-center {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat(4, 260px);
        grid-template-rows: 160px 134px 6px 128px;
        grid-column-gap: 44px;
        grid-row-gap: 0px;
    }

    #about-image1 {
        grid-area: 1 / 1 / 2 / 2;
        background: url('./../images/about1.svg');
        background-repeat: no-repeat;
        background-position: center;
        height: 160px;
        width: 260px;
        margin: 0;
    }

    #about-image2 {
        background: url('./../images/about2.svg');
        background-repeat: no-repeat;
        grid-area: 1 / 2 / 2 / 3;
        background-position: center;
        height: 160px;
        width: 260px;
        margin: 0;
    }

    #about-image3 {
        background: url('./../images/about3.svg');
        background-repeat: no-repeat;
        grid-area: 1 / 3 / 2 / 4;
        background-position: center;
        height: 160px;
        width: 260px;
        margin: 0;
    }

    #about-image4 {
        background: url('./../images/about4.svg');
        background-repeat: no-repeat;
        grid-area: 1 / 4 / 2 / 5;
        background-position: center;
        height: 160px;
        width: 260px;
        margin: 0;
    }

    #about-number1 {
        grid-area: 2 / 1 / 3 / 2;
        position: relative;
    }

    #about-number2 {
        grid-area: 2 / 2 / 3 / 3;
        position: relative;
    }

    #about-number3 {
        grid-area: 2 / 3 / 3 / 4;
        position: relative;
    }

    #about-number4 {
        grid-area: 2 / 4 / 3 / 5;
        position: relative;
    }

    .about-number {
        position: absolute;
        left: 50%;
        top: 54px;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        font-style: normal;
        font-size: 40px;
        color: #2F2E41;
    }

    #about-divider1 {
        position: relative;
        grid-area: 3 / 1 / 4 / 2;
    }

    #about-divider2 {
        position: relative;
        grid-area: 3 / 2 / 4 / 3;
    }

    #about-divider3 {
        position: relative;
        grid-area: 3 / 3 / 4 / 4;
    }

    #about-divider4 {
        position: relative;
        grid-area: 3 / 4 / 4 / 5;
    }

    .divider {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);

        width: 60px;
        height: 4px;
        border: 1px solid #2F2E41;
        background: #2F2E41;
        border-radius: 3px;
    }

    #about-text1 {
        margin-top: 24px;
        width: 100%;
        grid-area: 4 / 1 / 5 / 2;
    }

    #about-text2 {
        margin-top: 24px;
        margin-left: 0;
        width: 100%;
        grid-area: 4 / 2 / 5 / 3;
    }

    #about-text3 {
        margin-top: 24px;
        margin-left: 0;
        width: 100%;
        grid-area: 4 / 3 / 5 / 4;
    }

    #about-text4 {
        margin-top: 24px;
        margin-left: 0;
        width: 100%;
        grid-area: 4 / 4 / 5 / 5;
    }

    .about-text {
        font-style: normal;
        text-align: center;
        color: #2F2E41;
    }

    #pricing-center {
        position: absolute;
        left: 50%;
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        margin-top: 0;
        display: grid;
        grid-template-columns: 176px repeat(2, 387px) 176px;
        grid-template-rows: 535px;
        grid-column-gap: 18px;
        grid-row-gap: 0px;
    }

    .pricing-card {
        border-radius: 24px;
        border: 1px solid #9046CF;
        padding: 54px;
        font-style: normal;
    }

    .pricing-card h3 {
        font-size: 24px;
        line-height: 32px;
        margin-top: 0px;
    }

    #pricing-regular {
        grid-area: 1 / 2 / 2 / 3;
        background: #9046CF;
        color: white;
    }

    #pricing-special {
        grid-area: 1 / 3 / 2 / 4;
        background: transparent;
        color: #3F3D56;
    }

    #pricing-image
    {
        grid-area: 1 / 4 / 2 / 5;
        margin-left: -18px;
        background: url('./../images/pricing.svg');
        background-repeat: no-repeat;
    }

    .pricing-divider {
        width: 32px;
        height: 4px;
        border: solid 1px;
        border-radius: 3px;
        margin-top: 12px;
        margin-bottom: 32px;
    }

    .pricing-divider-dark {
        background-color: #3F3D56;
        border-color: #3F3D56;
    }

    .pricing-divider-white {
        background-color: white;
        border-color: white;
    }

    .price {
        height: 43px;
        margin-bottom: 20px;
        margin-top: 46px;
        font-size: 46px;
        line-height: 32px;
        margin-right: 0px;
    }

    .price span{
        font-size: 16px;
    }

    .pricing-card ul {
        list-style-type: "✓  ";
        font-family: 'Roboto';
        margin-top: 40px;
        padding-inline-start: 20px;
    }

    .pricing-card li {
        margin-bottom: 1em;
    }

    .price-expl
    {
        font-size: 16px;        
    }

    #pricing-expl {
        top: 525px;
        color: #818181;
        width: 770px;
    }

    #pricing-expl p{
        font-size: 16px;
    }

    .slider {
        margin-top: -40px;
        display: grid;
        grid-template-columns: 45px repeat(3, 380px) 45px;
        grid-template-rows: 560px 32px;
        grid-column-gap: 32px;
        grid-row-gap: 24px;
    }

    .slide {
        width: 300px;
        height: 480px;
        display: none;
        padding: 40px;
        grid-template-columns: 300px;
        grid-template-rows: 210px 105px 160px;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .slide-previous {
        grid-area: 1 / 2 / 2 / 3;
        display: grid;
    }

    .slide-next {
        grid-area: 1 / 4 / 2 / 5;
        display: grid;
    }

    .slide-active {
        grid-area: 1 / 3 / 2 / 4;
        display: grid;
        background: white;    
        border-radius: 24px;
        border: 1px solid #FDFDFF;
    }

    .slide-next-btn {
        grid-area: 1 / 5 / 2 / 6;
    }

    .slide-next-btn button {
        border: none;
        z-index: 10px;
        cursor: pointer;
        background: transparent;
        margin-left: 0;
    }

    .slide-prev-btn {
        grid-area: 1 / 1 / 2 / 2;
    }

    .slide-prev-btn button {
        border: none;
        z-index: 10px;
        cursor: pointer;
        background: transparent;
        right: 0px;
        margin-left: 0;
    }


    .slide-image {
        grid-area: 1 / 1 / 2 / 2;
        margin-top: 50px;
    }

    .slide-image img{
        height: 160px;
    }

    .slide-title {
        grid-area: 2 / 1 / 3 / 2;
        color: #2F2E41;
    }

    .slide-title p{
        margin-top: 50px;
    }

    .slide-text {
        grid-area: 3 / 1 / 4 / 2;
    }

    .slide-text p {
        color: #2F2E41;
        width: 315px;
        text-align: center;
        line-height: 32px;
        padding: 0 10px;
    }

    .slider-status {
        grid-area: 2 / 3 / 3 / 4;
        margin-bottom: 20px;
    }

    .slider-grid {
        display: grid;
        grid-template-columns: repeat(5, 12px);
        grid-template-rows: 12px;
        grid-column-gap: 12px;
        grid-row-gap: 0px;
    }    

    #dot1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    #dot2 {
        grid-area: 1 / 2 / 2 / 3;
    }

    #dot3 {
        grid-area: 1 / 3 / 2 / 4;
    }

    #dot4 {
        grid-area: 1 / 4 / 2 / 5;
    }

    #dot5 {
        grid-area: 1 / 5 / 2 / 6;
    }
}

#lang.tab{
    width: 32px;
    position: relative;
    color: #000000;
}  

#lang.tab a{ 
    width: 32px;
    height: 32px;
    
   border-radius: 8px;
}  


#lang.tab a:hover
{        
   background-color: #EAEBED;
}

#lang.tab a img{ 
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
} 

.langDropdown-content {
    display: none;
    position: absolute;
    background-color: #Ffffff;
    width: 120px;
    top: 32px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;    
    border-radius: 8px;
    padding-top: 32px;
  }

  #langDropdown a {
    color: black;
    width: 100px !important;
    height: auto !important;
    text-decoration: none;
    display: block;
    position: relative;    
    border-radius: 0px !important;
    padding: 10px !important;
  }

  #langDropdown a:hover {
    background-color: #E7D7F4 !important;
  }

  #langDropdown a img {
    position: relative !important;   
    top: 0 !important;
    left: 0 !important;
    -ms-transform: translate(0, 0) !important;
    transform: translate(-0, 0) !important;    
    padding-right: 10px; 

  }

  .lang-clicked{
    background-color: #EAEBED;
  }