@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
         :root {
            --primary-yellow: #fdd046;
            --secondary-yellow: #f5bc11;
            --other-yellow: #c4991a;
            --primary-pink: #eb198f;
            --secondary-pink: #f750ae;
            --other-pink: #f49bcd;
            --primary-blue: #185fad;
            --secondary-blue: #3a81cf;
            --other-blue: #7cafe6;
            --white: #fff;
            --text-60: 60px;
        }
        
        @font-face {
            font-family: clearSans-regular;
            src: url(../fonts/ClearSans-Regular.ttf);
            font-family: clearSans-medium;
            src: url(../fonts/ClearSans-Medium.ttf);
            font-family: clearSans-bold;
            src: url(../fonts/ClearSans-Bold.ttf);
        }
        
        * {
            padding: 0;
            margin: 0;
            -webkit-box-sizing: inherit;
            -moz-box-sizing: inherit;
            box-sizing: border-box;
        }
        
        *,
        *:before,
        *:after {
            -webkit-box-sizing: inherit;
            -moz-box-sizing: inherit;
            box-sizing: inherit;
        }
        
        body {
            font-family: clearSans-regular, sans-serif !important;
            line-height: 1.42857143;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: var(--white);
            overflow-x: hidden;
        }
        
        @media screen and (max-width: 992px) {
             :root {
                --text-60: 50px
            }
        }
        
        @media screen and (max-width: 576px) {
             :root {
                --text-60: 45px
            }
        }
        
        @media screen and (max-width: 320px) {
             :root {
                --text-60: 35px
            }
        }
        
        #brand {
            width: 110px;
            height: 60px;
        }
        
        .service-card {
            transition: all 0.4s ease;
        }
        
        nav[class*='home-nav'] .download-btn {
            background: var(--secondary-pink);
            color: var(--white) !important;
            padding: 8px 20px !important;
            transition: .1s all;
        }
        
        nav li a:hover {
            border-bottom: 3px solid var(--primary-blue);
            transform: scale(.98);
            padding-bottom: 0;
            transition: .1s transform ease-in-out;
        }
        
        nav .download-btn:hover {
            background: var(--primary-blue);
            color: var(--white) !important;
            transform: scale(.94);
            transition: .1s transform ease-in-out;
        }
        
        footer a:hover {
            color: var(--primary-pink) !important;
            transition: .3s all;
        }
        
        footer a {
            transition: .3s all;
        }
        
        nav li a {
            text-transform: uppercase;
            font-family: clearSans-bold !important;
            color: var(--primary-pink) !important;
        }
        
        .navbar {
            background: var(--white);
        }
        
        header[class*="home-bg-image"] {
            background-image: url(../images/bg.png);
            background-size: cover;
        }
        
        header .overlay {
            background-color: rgba(0, 0, 0, 0.7);
        }
        
        header .text-hero {
            font-size: var(--text-60);
            font-family: clearSans-bold !important;
        }
        
        header .text-hero-support {
            font-family: clearSans-medium !important;
        }
        
        header .card .fancy-line {
            display: inline-block;
            width: 7em;
            height: 9px;
        }
        
        header .card .card-text {
            color: #555;
            line-height: 1.3;
        }
        
        header .card-title {
            line-height: 1;
        }
        
        #review img {
            width: 220px;
            height: 220px;
        }
        
        .social-icons {
            width: 25px;
            height: 25px;
            margin: 0px 5px;
        }
        
        footer .list-unstyled a,
        footer .contact-us address,
        footer .contact-us p a,
        footer .footer-description {
            color: #bbb;
            text-decoration: none;
        }
        
        footer .footer-description {
            color: #ddd;
            text-decoration: none;
        }
        
        footer :is(address,
        p a,
        .list-unstyled li) {
            margin: 15px 0;
            font-size: 15px;
        }
        
        .carousel img {
            width: 200px;
            height: 300px;
        }
        
        .slider-caption {
            font-size: 28px !important;
        }
        /* LIB EXTENTION */
        
        .font-cs-bold {
            font-family: clearSans-bold !important;
        }
        
        .font-cs-med {
            font-family: clearSans-medium !important;
        }
        
        .font-poppins {
            font-family: "Poppins", sans-serif !important;
        }
        
        .yellow-text {
            color: var(--primary-yellow)
        }
        
        .yellow-deep-text {
            color: var(--other-yellow)
        }
        
        .bg-yellow-dark {
            background-color: var(--secondary-yellow);
        }
        
        .pink-text {
            color: var(--secondary-pink)
        }
        
        .pink-light-text {
            color: var(--other-pink);
        }
        
        .bg-pink-dark {
            background-color: var(--primary-pink) !important;
        }
        
        .blue-text {
            color: var(--secondary-blue)
        }
        
        .blue-light-text {
            color: var(--other-blue);
        }
        
        .bg-blue-dark {
            background-color: var(--primary-blue) !important;
        }
        
        @media screen and (min-width: 992px) {
            nav .text-17 {
                margin-right: 10px;
            }
            header .col-md-5,
            header .col-lg-3 {
                width: 22% !important;
                flex: 0 0 22% !important;
            }
             :root {
                --text-60: 50px
            }
        }
        
        .download {
            width: 140px;
        }
        
        @media screen and (max-width: 768px) {
            .hey-is-for-u {
                width: 300px;
                height: 200px;
            }
        }
        
        @media screen and (min-width: 576px) {
            .mt-5 {
                margin-top: 5em !important;
            }
        }
        
        @media screen and (max-width: 575.98px) {
            header .row {
                justify-content: space-around !important;
            }
            header .container,
            .container {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            footer :is(.col-sm-12,
            .col-sm-11,
            .col-sm-5,
            .col-md-12,
            .col-md-4,
            .col-lg-5,
            .col-lg-4) {
                padding: 0 0 !important;
            }
            .justify-content-betwee>div {
                padding-left: 14px !important;
            }
            .mt-5 {
                margin-top: 15px !important;
            }
            header .col-sm-5 {
                width: 45% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            .hey-is-for-u {
                width: 200px;
                height: 200px;
            }
            #review p {
                padding: 0 3em;
            }
            footer .footer-description,
            .app-info {
                width: 95%;
            }
            header .card-body .card-text {
                font-size: 16px !important;
            }
            .navbar .download-btn,
            .navbar .signup-btn {
                width: 70px;
            }
            .download {
                width: 120px !important;
            }
        }
        
        @media only screen and (max-width: 380px) {
            header .card-body {
                padding: .3rem !important;
            }
            header .card-body .card-text {
                font-size: 15px !important;
            }
        }
        
        @media only screen and (max-width: 374.98px) {
            header .card-body .card-text {
                transform: scale(0);
                transition: .4s all ease-in-out;
                display: none;
            }
        }
        
        .navbar-toggler-icon {
            color: var(--primary-blue) !important;
        }