/*
Theme Name: Super App
Theme URI: http://localhost:8080/
Author: Joyride Development Team
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: joyride, superapp
Text Domain: localhost

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

html {
    -webkit-font-smoothing: antialiased;
    line-height: normal !important;
}

body {
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden !important;
}

html, body, p, span, .font-normal {
    -webkit-font-smoothing: antialiased;
    font-family: "TTCommonsRegular", 'sans-serif' !important;
    color: #16162C;
}

h1,h2,h3, .font-medium {
    color: #16162C;
    -webkit-font-smoothing: antialiased;
    font-family: 'TTCommonsBold', 'sans-serif' !important;
}

h4, h5, strong, a, .font-bold {
    color: #16162C;
    -webkit-font-smoothing: antialiased;
    font-family: 'TTCommonsDemiBold', 'sans-serif';
}

.section-title {
    font-family: 'TTNormsProBold' !important;
}

.section-header {
    font-family: 'TTNormsProBold' !important;
}

.section-body {
    font-family: 'TTNormsProRegular' !important;
}

.text-extrabold {
    font-family: 'TTNormsProExtraBold' !important;
}

.text-bold {
    font-family: 'TTNormsProBold' !important;
}

.text-medium {
    font-family: 'TTNormsProMedium' !important;
}

.text-regular {
    font-family: 'TTNormsProRegular' !important;
}

:root {
    --baseFont: 16px;
}

.secondary-color {
    color: #313131;
}

.tertiary-color {
    color: #4D4D4C;
}

.bg-primary {
    background-color: #301BD7;
}

.text-primary {
    color: #301BD7 !important;
}
 
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    background-color: #4D4D4C !important;
}

.hamburger-inner:hover, .hamburger-inner:after, .hamburger-inner:before {
    background-color: #4D4D4C !important;
}
.blurple-bg {
    background-color: #301BD7;
}
.pink-bg {
    background-color: #C11BD7;
}
.orange-bg {
    background-color: #FF713C;
}
.sky-bg {
    background-color: #3AA2F7;
}

.area-background {
    background-color: #DDF5FF;
}

.area-image {
    height: auto;
    width: 100%;
    margin: 0 auto;
}

/* Homepage Services Section */
.services-background {
    background-color: #16162C;
    padding: 5rem 0 4rem;
}

@media(min-width: 1024px) {
    .services-background {
        padding: 5rem 0;
    }
}


/* Overview Section */
.overview-background {
    background-color: #16162C;
}

.contact-background {
    background-color: #CFD9FC;
}

.text-blue {
    color: #171aca;
}

.--active {
    color: #171aca;
    transition: 0.3s ease-out;
}

.tab-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: 12px;
    border-bottom: 1px solid #D3D3D3;
}

@media(min-width: 768px) {
    .tab-bar {
        display: block;
    }
}
.tablink {
    outline: none;
}

.multiline > p {
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    font-size: 1.1em;
    margin-bottom: 0;
}

.title-multiline {
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.glide__bullets {
    transform: none !important;
    left: 0em !important;
    bottom: 2em !important;
    left: unset !important;
}

.glide__bullet {
    width: 10px !important;
    height: 10px !important;
    margin: 0 0.4em  !important;
    border: none !important;
    background-color: #CBCBCB !important;
}

.glide__bullet--active {
    background-color: #171aca !important;
}

.glide__arrow {
    top: unset !important;
    bottom: 0 !important;
    left: 0 !important;
    border: none !important;
    text-shadow: none !important;
    box-shadow:  none !important;
}

@media(min-width: 768px) {
    .glide__arrow {
        top: unset !important;
        bottom: 2.5em !important;
        left: unset !important;
        right: 0 !important;
        border: none !important;
        text-shadow: none !important;
        box-shadow:  none !important;
    }    
    .glide__bullets {
        transform: none !important;
        right: 3em;
        bottom: 5em !important;
        left: unset !important;
    }
}


/* Overview Section */
.product-one-background {
    background-color: #92A1F8;
}
.product-two-background {
    background-color: #F5B0F2;
}
.product-three-background {
    background-color: #FDB38C;
}
.product-four-background {
    background-color: #A8D1FB;
}
.products-card img{
    width: 80px;
    height: 80px;
}

/* Homepage Business Section */

.business-background {
    background-color: white;
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    padding: 3rem 0 1rem;
}

.business-action {
    background-color: #171ACA;
}

@media(min-width: 768px) {
    .business-background {
        padding: 5rem 0;
    }
}

.contact-container {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(./assets/images/contact-us-background.jpg);
}

/* Homepage Header Section */
.header-container {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(./assets/images/homepage-background-small.png);
}

.header-title {
    font-size: 2.3rem;
}

.header-subtitle {
    padding: 0 1.2rem;
}

.header-image {
    width: 320px;
}

.swiper-products {
    position: relative;
}

.swiper-pagination-bullet {
    opacity: 1 !important;
    background-color: #CBCBCB !important;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background-color: #171CCA !important;
}

@media(min-width: 380px) {   
    .header-title {
        font-size: 2.5rem;
    }
    .header-subtitle {
        padding: 0 2.45rem;
    }
}

@media(min-width: 640px) {
    .header-image {
        left: unset !important;
        width: 550px;
    }
    .header-title {
        font-size: 3rem;
    }
}

@media(min-width: 768px) {
    .header-image {
        left: unset !important;
        width: 550px;
    }    
    .header-title {
        font-size: 3rem;
    }
    .header-container {
        background-image: url(./assets/images/homepage-background-medium.png);
    }
   
}

@media (min-width: 1024px) {
    .header-title {
        max-width: 38rem;
        font-size: 3rem;
    }
}

@media(min-width: 1280px) {
    .header-image {
        width: 450px;
    }
    .swiper-products {
        overflow: visible !important;
    }
    .header-container {
        background-image: url(./assets/images/homepage-background.png);
    }
    .header-title {
        font-size: 3.3rem;
        max-width: 38rem !important;
    }
    .contact-container {
        background-image: url(./assets/images/contact-us-background-large.png);
    }
}

@media(min-width: 1440px) {
    .overview-card img {
        width: 70px !important;
        height: 70px !important;
    }
    .products-card img{
        width: 120px;
        height: 120px;
    }
}

@media (min-width: 1560px) {
    .header-title {
        font-size: 3.5rem;
        max-width: 42rem !important;
    }
    .header-image {
        width: 480px;
    }
    .contact-container {
        background-image: url(./assets/images/contact-us-background.jpg);
    }
}

/* Hero Section */
.hero-container {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(./assets/images/product-bg.png);
}

.hero-title {
    text-align: left;
    font-size: 2.7rem;
}

.hero-subtitle {
    padding: 0 0.5rem;
}

.hero-image {
    width: 350px;
}

.contact-title {
    font-family: 'TTNormsProBold' !important;
    font-size: 2.7rem;
}

@media(min-width: 380px) {   
    .hero-title {
        font-size: 2.8rem;
    }
    .hero-subtitle {
        padding: 0 1.5rem;
    }
    .contact-title {
        font-size: 2.8rem;
    }
}

@media(min-width: 640px) {
    .hero-image {
        left: unset !important;
        width: 600px;
    }
  
    .hero-title {
        font-size: 4rem;
    }
}

@media(min-width: 768px) {
    .hero-image {
        left: unset !important;
        width: 550px;
    }    
    .hero-title {
        font-size: 3.7rem;
    }
    .contact-title {
        font-size: 3.7rem;
    }
    .hero-container {
        background-image: url(./assets/images/product-bg-medium.png);
    }
}
@media(min-width: 1024px) {
    .hero-title {
        font-size: 4rem;
    }
    .contact-title {
        font-size: 5rem;
    }
}

@media(min-width: 1280px) {
    
    .hero-image {
        width: 600px;
    }
    .hero-container {
        background-image: url(./assets/images/product-bg-large.png);
    }
    .contact-title {
        font-size: 7.5rem;
    }
}

@media(min-width: 1560px) {
    .hero-title {
        font-size: 5rem;
    }
    .contact-title {
        font-size: 8.5rem;
    }
}


/* Homepage Footer Section */
.footer-container {
    background-color: #171ACA;
    /* border-top-left-radius: 3rem; */
    /* border-top-right-radius: 3rem; */
}

.footer-image {
    width: 500px;
}

@media(min-width: 768px) {
    .footer-image {
        left: unset !important;
        width: 550px;
    }    
}

@media(min-width: 1280px) {
    .footer-image {
        width: 600px;
    }
}

.page-width {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media(min-width: 1536px) {
    .page-width {
        max-width: 1350px;
    }
}

/* MAIN CONTAINER */
.main-container {
    max-width: 100%;
    padding: 0 1.25rem;
    margin-left: auto;
    margin-right: auto;
}

@media(min-width: 640px) {
    .main-container {
        max-width: 100%;
        padding: 0 1.25rem;
        margin-left: auto;
        margin-right: auto;
    }
}
@media(min-width: 768px) {
    .main-container {
        max-width: 688px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

@media(min-width: 1024px) {
    .main-container {
        max-width: 864px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

@media(min-width: 1280px) {
    .main-container {
        max-width: 1140px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

@media(min-width: 1536px) {
    .main-container {
        max-width: 1350px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Swiper Section */
@media(min-width: 1024px) {
    .swiper-section {
        max-width: 864px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

@media(min-width: 1280px) {
    .swiper-section {
        max-width: 1140px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

@media(min-width: 1536px) {
    .swiper-section {
        max-width: 1350px;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
}

.rounded-container {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
}

.statistics-card.swiper-slide {
  display: flex !important;
}

/* Statistics Card */
.statistics-card {
    border-radius: 1.5em;
    background: #f5b0f2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1.5em;
    position: relative;
    height: 400px !important;
    min-width: 216px;
}

.statistics-card header {
    margin-top: 2em;
}

.statistics-card p {
    text-align: center;
}

.statistics-card img {
    max-width: 150px;
    position: absolute;
    top: -10%;
    left: 18%;
    margin-top: -2em;
}

@media(max-width: 1074px){
    .statistics-card img {
        top: -15%;
        left: 16%;
    }

    .statistics-card header {
        font-size: 2rem;
    }

    .swiper-container {
        margin-top: 100px;
    }
}


/* Overview Card */
.overview-card {
    border-radius: 1.5em;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 1.5em;
    position: relative;
}

.overview-card header {
    margin-top: 2em;
}

.overview-card img {
    height: 60px;
    width: 60px;
}


.swiper-wrapper {
    display: grid !important;
}


.bg-dark {
    background: #16162C;
}

.swiper-container {
    padding-bottom: 2rem !important;
}


.swiper-pagination {
    /* bottom: 0 !important; */
    bottom: unset !important;
    margin-top: 16px;
}

.core-header {
    position: sticky;
    top: 0;
    background: white;
    padding: 1em;
    z-index: 40;
}

.core-header picture img {
    width: 150px; 
    height: auto;   
}

.core-header .navigation {
    display: flex;
}

.core-header .menu-main-menu-container .menu {
    display: flex;
}   


.core-header .menu-main-menu-container .menu ul {
    /* temporary hide */
    display: none; 
    position: absolute;
    background: white;
    z-index: 21;
    border-radius: 8px;
    margin-top: 36px;
    overflow: hidden;
    min-width: 150px;
    box-shadow:
    0 -1.8px 2.2px rgba(0, 0, 0, 0.021),
    0 -0.1px 5.3px rgba(0, 0, 0, 0.013),
    0 6.1px 10px rgba(0, 0, 0, 0.012),
    0 18.9px 17.9px rgba(0, 0, 0, 0.023),
    0 42.8px 33.4px rgba(0, 0, 0, 0.053),
    0 100px 80px rgba(0, 0, 0, 0.11)
  ;
}

.core-header .menu-main-menu-container .menu li {
    font-size: 1.25rem;
    line-height: 2rem;
    font-family: 'TTCommonsRegular' !important;
    margin-right: 1.5em;
    margin-top: 8px;
    position: relative; 
} 
.core-header .menu-main-menu-container .menu li a {
    font-size: 1.1rem;
    font-family: 'TTNormsProBold';
} 

.core-header .sub-menu li a {
    font-size: 1.1rem;
    font-family: 'TTNormsProMedium' !important;
} 


@media (min-width: 1024px) {
    .core-header .sub-menu li {
        padding: 4px 2em 4px .75em;
        margin-right: 0 !important;
        margin-top: 0 !important;
        border: none !important;
        transition: background .2s ease-in-out;
    }

    .core-header .sub-menu li:hover {
        background: #E4ECFA;
    }

    .core-header .sub-menu li.active {
        background: #E4ECFA;
    }   

    /* .current-menu-ancestor {
        border-bottom: 3px solid #171ACA;
    } */
}

.core-header .sub-menu li:first-of-type {
    margin-top: 0 !important;
}

.core-header .menu-main-menu-container .menu li.active {
    border-bottom: 3px solid #171ACA;
    z-index: 30;
}

.mobile-navigation {
    position: fixed;
    width: 100vw;
    background: white;
    z-index: 50;
    overflow: auto;
}

.mobile-navigation li {
    font-size: 1.5rem;
    line-height: 2rem;
    padding-top: .5em;
    padding-bottom: .5em;
}

.mobile-navigation li a {
    font-family: 'TTNormsProBold' !important;
}

.mobile-navigation li.active a {
    border-bottom: 3px solid #171ACA;
}

.mobile-navigation li ul {
    padding-left: 1.25em;
}

.mobile-navigation li, .mobile-navigation li:active, .mobile-navigation li:hover {
    background: white !important;
}

.mobile-navigation li ul li {
    font-size: 1em;
}

.mobile-navigation li ul li:last-of-type {
    padding-bottom: 0;
}

.menu-item-has-children  {
    cursor: pointer;
    user-select: none;
}

.mobile-navigation .menu-item-has-children > a  {
    display: flex;
}

.mobile-navigation span.show {
    transform: rotate(-180deg);
}

.mobile-navigation span {
    transition: .3s ease-in transform;
}

.mobile-navigation .menu-item-has-children > a {
    padding-bottom: 0;
}

.mobile-navigation .menu-item-has-children > ul {
    padding-top: .75em;
}

.mobile-navigation .menu-item-has-children > ul li a {
    font-family: 'TTNormsProMedium' !important;
    font-size: .9em;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.super-text-with-image {
    position: relative;
}

.home-partner-accent {
    position: absolute;
    width: 100vw;
    height: 55%;
    background: #E4ECFA;
    bottom: 0;
}

@media (max-width: 1023px) {
    .home-partner-accent {
        height: 75%;
    }    
}


/* .home-partner .super-text-with-image:first-of-type::before {
    content: "";
    position: absolute;
    background: #E4ECFA;
    opacity: .5;
    width: 200vw;
    z-index: -1;
    display: block;
    left: 0;
    margin-left: -50%;
    height: calc(100% + 7em + 7em);
    margin-top: -7em;
    padding-bottom: 7em;
} */

@media (max-width: 1023px) {
    .home-partner {
        overflow: hidden;
    }
/* 
    .home-partner .super-text-with-image:first-of-type::before {
        margin-top: -5em;
        padding-bottom: 10em;
        height: calc(100% + 10em);
    } */
}

/*  Mobile  */
@media (max-width: 1023px) {
    .statistics-card {
        max-width: 250px;
        height: 365px !important;
        width: 100vw;
    }

    .core-header picture img {
        width: 130px;
        height: auto;
    }
    

    .core-header .menu-main-menu-container {
        display: none !important;
    }
}

/*  Large Desktop  */
@media (min-width: 1536px) {
    .statistics-card {
        height: 400px !important;
    }

    .swiper-wrapper {
        transform: unset !important;
    }

    .statistics-card img {
        max-width: 200px;
        margin-top: -4em;
    }

    .statistics-card header {
        margin-top: 0;
    }
}

.hidden {
    display: none;
}

.shown {
    display: block !important;
}

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

#hamburger {
    padding: 0 !important;
    margin-top: 8px !important;
}

.post-featured-image {
    height: 250px !important;
    object-fit: cover;
}
@media(min-width: 768px) {
    .post-featured-image {
        height: 200px !important;
    }
}

@media(min-width: 1560px) {
    .post-featured-image {
        height: 300px !important;
    }
}

/* Blocks / Components ==================================================================================================================================================================================================================================================================================================================================================================================== */

.super-text-with-image img {
    max-width: 60%;
    width: 100%;
}   

@media(max-width: 768px) {
    .super-text-with-image img {
        max-width: 100%;
    }
}
/*  Mobile  */
@media (max-width: 1023px) {
    .super-text-with-image img {
        order: 1;
        -webkit-order: 1;
    }

    .super-text-with-image > div {
        order: 2;
        -webkit-order: 2;
    }
}

/* Animtions ==================================================================================================================================================================================================================================================================================================================================================================================== */

.fade-in{-webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both}
.fade-in-bottom{-webkit-animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both};
.fade-out-top{-webkit-animation:fade-out-top .7s cubic-bezier(.25,.46,.45,.94) both;animation:fade-out-top .7s cubic-bezier(.25,.46,.45,.94) both};
.slide-out-top{-webkit-animation:slide-out-top .5s cubic-bezier(.55,.085,.68,.53) both;animation:slide-out-top .5s cubic-bezier(.55,.085,.68,.53) both};
.slide-in-top{-webkit-animation:slide-in-top .5s cubic-bezier(.785,.135,.15,.86) both;animation:slide-in-top .5s cubic-bezier(.785,.135,.15,.86) both};

@-webkit-keyframes fade-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}}@keyframes fade-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}};
@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes slide-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}@keyframes slide-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}};
@-webkit-keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}};