@font-face {
     font-family: "source-sans-pro";
     src: url("../fonts/SourceSansPro-Regular.otf.woff") format('woff');
     font-weight: 600;
}
 @font-face {
     font-family: "source-sans-pro";
     src: url("../fonts/SourceSansPro-Semibold.otf.woff") format('woff');
     font-weight: 700;
}
 @font-face {
     font-family: "source-sans-pro";
     src: url("../fonts/SourceSansPro-Light.otf.woff") format('woff');
     font-weight: normal;
}
 html, body {
     margin: 0;
     padding: 0;
     height: 100%;
     width: 100%;
}
 a {
     color: inherit;
}
 body {
     background-image: linear-gradient(0deg, #fcf5e8 -20%, #f86d5d 100%);
     font-family: 'source-sans-pro', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
     background-color: #f86d5d;
     display: flex;
     flex-direction: column;
     align-items: center;
    /** justify-content: space-around;
     **/
     min-height: 100%;
}
 h1, h2, h3, h4, h5, h6 {
     color: #fff;
}
 header {
     flex: 1;
     display: flex;
}
 header h1 {
     display: flex;
     height: 100px;
     width: 100px;
     background: url("../images/logo-new.png") no-repeat top left;
     align-self: flex-end;
     background-size: 100px;
     border-radius: 20px;
}
 header h1 span {
     display: none;
}
 main.landing {
    /** flex: 1;
     **/
     width: 100%;
}
 section#mission h2 {
     font-size: 21px;
     display: block;
     line-height: 30px;
     text-align: center;
     font-weight: normal;
}
/** --------------------------------------------------------- **/
 #hero {
     width: 100%;
     height: 1024px;
     background: linear-gradient(0deg, #fcf5e8 -60%, #f86d5d 100%);
     padding-top: 32px;
}
 .container {
     max-width: 1140px;
     margin: 0 auto;
}
 .navbar {
     display: flex;
     justify-content: space-between;
     margin-bottom: 50px;
}
 .logo {
     display: flex;
     align-items: center;
}
 .logo h3 {
     margin: 0px;
     padding: 0px 0px 0px 10px;
}
 .navbar .menu {
     padding: 5px 0px 0px 0px;
}
 .navbar .menu a {
     text-decoration: none;
}
 .navbar .menu a:nth-child(3) {
     border-bottom: none;
     pointer-events: none;
}
 .navbar .menu a:nth-child(3):after {
     content: "|";
     padding: 0px 10px 0px 10px;
}
 .navbar .menu a:not(:last-child) {
     color: #ffffff;
     margin-left: 20px;
     font-size: 14px;
     letter-spacing: 0.5px;
     transition: 0.4s;
     font-weight: 501;
}
 .navbar .menu a:not(:last-child):hover {
     border-bottom: 2px solid #ffffff;
     padding-bottom: 10px;
}
 .navbar .menu .btn-try {
     color: #ffffff;
     margin-left: 20px;
     padding: 10px 25px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50px;
     font-size: 14px;
     transition: 0.2s;
}
 .navbar .menu .btn-try:hover {
     background: #ffffff;
     color: #5240ad;
}
 .hero-box {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 25px;
}
 .hero-box ul {
     padding: 0px;
}
 .hero-box ul li:before {
     content: '\2713';
     display: inline-block;
     color: #ffffff;
     padding: 0 6px 0 0;
}
 .hero-box ul li {
     list-style-type: none;
     font-size: 1em;
     padding: 0px;
}
 .hero-box .hero-details {
     width: 50%;
}
 .hero-box .hero-details .hero-heading {
     font-size: 90px;
     line-height: 106px;
     color: #ffffff;
     font-family: 'Mulish', sans-serif;
}
 .hero-box .hero-details .hero-desc {
     color: #3e2e2e;
     font-size: 18px;
     margin: 30px 0;
}
 .hero-box .hero-details .btn-box {
     margin-top: 60px;
}
 .hero-box .hero-details .cta-btn {
     background: #ffffff;
     padding: 15px 30px;
     margin-right: 30px;
     border-radius: 50px;
     text-decoration: none;
}
 .hero-box .hero-details .cta-btn:hover {
     background: rgba(255, 255, 255, 0.2);
}
 .hero-box .hero-details .demo {
     background: transparent;
     color: #ffffff;
     border: 1px solid #ffffff;
}
 .hero-box .hero-image {
     width: 50%;
}
 .hero-box .hero-image img {
     width: 577px;
}
/** ---------------------------------- **/
/** -- Features **/
 .features {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 20px 0px 20px 0px;
     margin: 0 auto;
     align-items: center;
     background-image: linear-gradient(0deg, #fcf5e8 -120%, #f86d5d 100%)
}
 .features h1 {
     font-size: 3rem;
     color: #fcf5e8;
     text-align: center;
    /* #f9a826;
     */
}
 .features-items {
     display: flex;
     flex-direction: row;
     justify-content: center;
     max-width: 1140px;
}
 .feature-item {
     display: flex;
     flex-direction: column;
     text-align: center;
     margin: 0 0 0 10px;
}
 .features.div {
     padding: 0px 10px 0px 10px;
}
 .features-promo-img {
    /** filter: brightness(0) saturate(100%) invert(74%) sepia(48%) saturate(1629%) hue-rotate(340deg) brightness(101%) contrast(95%);
     **/
     filter: brightness(0) saturate(100%) invert(94%) sepia(9%) saturate(681%) hue-rotate(321deg) brightness(106%) contrast(98%);
     height: 36px;
     width: 36px;
 }

 /** **/

  .clients {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 20px 0px 20px 0px;
     margin: 0 auto;
     align-items: center;
     background-color: #ffffff;

}
 .clients h1 {
     font-size: 3rem;
     color: #f86d5d;
     text-align: center;
    /* #f9a826;
     */
 }



/** ---------------------------------- **/
/** -- Pricing **/
 .pricing {
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
     margin: 0px 0px 0px 0px;
     Background: linear-gradient(0deg, #f86d5d -60%, #fffffe 100%);
}
 .pricing h1 {
     font-size: 3rem;
     color: #f86d5d;
    /* 535151;
     */
}
/** ---------------------------------- **/
 footer {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
    /** margin-bottom: 10px;
     **/
    /** opacity: 0.5;
     **/
    /** transition: opacity 0.2s ease;
     **/
     padding: 25px 0px 25px 0px;
}
 footer p {
     font-weight: 600;
     font-size: 11px;
     margin: 0px;
     text-align: center;
}
 footer:hover {
     opacity: 1;
}
/** for pricing -------------------------------------- **/
 .waves {
     position: relative;
     width: 100%;
     height: 15vh;
     margin-bottom: -7px;
    /*Fix for safari gap*/
     min-height: 100px;
     max-height: 150px;
}
 .content {
     position: relative;
     height: 20vh;
     text-align: center;
     background-color: white;
}
/* Animation */
 .parallax>use {
     animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
 .parallax>use:nth-child(1) {
     animation-delay: -2s;
     animation-duration: 7s;
}
 .parallax>use:nth-child(2) {
     animation-delay: -3s;
     animation-duration: 10s;
}
 .parallax>use:nth-child(3) {
     animation-delay: -4s;
     animation-duration: 13s;
}
 .parallax>use:nth-child(4) {
     animation-delay: -5s;
     animation-duration: 20s;
}
 @keyframes move-forever {
     0% {
         transform: translate3d(-90px, 0, 0);
    }
     100% {
         transform: translate3d(85px, 0, 0);
    }
}
/*Shrinking for mobile*/
 @media (max-width: 768px) {
     .waves {
         height: 40px;
         min-height: 40px;
    }
     .content {
         height: 30vh;
    }
     h1 {
         font-size: 24px;
    }
}
 .zwave {
     padding:15px 0px 60px 0px;
    /* height:100px;
     /\* to illustrate the space for the content *\/ */
    /* background: */
    /* url(https://i.stack.imgur.com/mG3Vb.png) top /100% auto, */
    /* url(https://i.stack.imgur.com/JSEyE.png) bottom/100% auto, */
    /* linear-gradient(#387dff,#387dff) content-box;
     /\* Color between the shapes only on the content and not the padding*\/ */
    /* background-repeat:no-repeat;
     */
}
 .sub {
     background: linear-gradient( 135deg, rgba(163, 168, 240, 1) 0%, rgba(105, 111, 221, 1) 100% );
     display: flex;
     justify-content: flex-start;
     align-items: center;
    /* height: 25px;
     width: 50px;
     */
     height: 1.6rem;
     width: 3.3rem;
     border-radius: 1.6rem;
     padding: 0.3rem;
}
 .circle {
     background-color: #fff;
     height: 1.4rem;
     width: 1.4rem;
     border-radius: 50%;
}
 .checkbox:checked + .sub {
     justify-content: flex-end;
}
 .cards {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
     margin: 50px 0px 50px 0px
}
 .card {
     background: #fff;
     color: hsl(233, 13%, 49%);
     border-radius: 0.8rem;
}
 .cards .card.active {
     background: linear-gradient( 135deg, #f2b3ac 0%, #f86d5d 100% );
     color: #fff;
     display: flex;
     align-items: center;
     transform: scale(1.1);
     z-index: 1;
}
 .card ul {
     margin: 2.6rem 4.6rem 2.6rem 2.6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-around;
}
 .card ul li {
     list-style-type: none;
     display: flex;
     justify-content: center;
     width: 100%;
     padding: 1rem 0;
}
 .card ul li.price {
     font-size: 3rem;
     color: hsl(232, 13%, 33%);
     padding-bottom: 2rem;
}
 .shadow {
     box-shadow: -5px 5px 15px 1px rgba(0, 0, 0, 0.1);
}
 .card.active .price {
     color: #fff;
}
 .btn {
     margin-top: 1rem;
     height: 2.6rem;
     width: 13.3rem;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 4px;
     background: linear-gradient( 135deg, rgba(163, 168, 240, 1) 0%, rgba(105, 111, 221, 1) 100% );
     color: #fff;
     outline: none;
     border: 0;
     font-weight: bold;
}
 .active-btn {
     background: #fff;
     color: hsl(237, 63%, 64%);
}
 .bottom-bar {
     border-bottom: 2px solid hsla(240, 8%, 85%, 0.582);
}
 .card.active .bottom-bar {
     border-bottom: 2px solid hsla(240, 8%, 85%, 0.253);
}
 .pack {
     font-size: 1.1rem;
}
/** ------------------------------------------------------------------ **/
/** Mobile Styles **/

/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
     .navbar {
         margin-left: 10px;
    }
     .navbar .menu {
         display: none;
    }
     #hero {
         height: auto;
         margin: 0px 0px 50px 0px;
    }
     .hero-box {
         display: flex;
         flex-direction: column;
    }
     .hero-box .hero-details {
         width: 90%;
    }
     .hero-box .hero-image {
         display: none;
    }
     .hero-box .hero-details .hero-heading {
         font-size: 50px;
         line-height: 50px;
         color: #ffffff;
         font-family: 'Mulish', sans-serif;
    }
     .waves {
         visibility: hidden;
     }

     .features-items {
	 flex-direction: column;
     }
}
/* Portrait */
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}
/* Landscape */
 @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
 @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
     .navbar {
         margin-left: 10px;
    }
     .navbar .menu {
         display: none;
    }
     #hero {
         height: auto;
         margin: 0px 0px 50px 0px;
    }
     .hero-box {
         display: flex;
         flex-direction: column;
    }
     .hero-box .hero-details {
         width: 90%;
    }
     .hero-box .hero-image {
         display: none;
    }
     .hero-box .hero-details .hero-heading {
         font-size: 50px;
         line-height: 50px;
         color: #ffffff;
         font-family: 'Mulish', sans-serif;
    }
     .waves {
         visibility: hidden;
     }


     .features-items {
	 flex-direction: column;
     }
}
/* Portrait */
 @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}
/* Landscape */
 @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
 @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
     .navbar {
         margin-left: 10px;
    }
     .navbar .menu {
         display: none;
    }
     #hero {
         height: auto;
         margin: 0px 0px 50px 0px;
    }
     .hero-box {
         display: flex;
         flex-direction: column;
    }
     .hero-box .hero-details {
         width: 90%;
    }
     .hero-box .hero-image {
         display: none;
    }
     .hero-box .hero-details .hero-heading {
         font-size: 50px;
         line-height: 50px;
         color: #ffffff;
         font-family: 'Mulish', sans-serif;
    }
     .waves {
         visibility: hidden;
     }


     .features-items {
	 flex-direction: column;
     }
}
/* Portrait */
 @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}
/* Landscape */
 @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
 @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
     .navbar {
         margin-left: 10px;
    }
     .navbar .menu {
         display: none;
    }
     #hero {
         height: auto;
         margin: 0px 0px 50px 0px;
    }
     .hero-box {
         display: flex;
         flex-direction: column;
    }
     .hero-box .hero-details {
         width: 90%;
    }
     .hero-box .hero-image {
         display: none;
    }
     .hero-box .hero-details .hero-heading {
         font-size: 50px;
         line-height: 50px;
         color: #ffffff;
         font-family: 'Mulish', sans-serif;
    }
     .waves {
         visibility: hidden;
     }


     .features-items {
	 flex-direction: column;
     }
}
/* Portrait */
 @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
}
/* Landscape */
 @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
 @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
     .navbar {
         margin-left: 10px;
    }
     .navbar .menu {
         display: none;
    }
     #hero {
         height: auto;
         margin: 0px 0px 50px 0px;
    }
     .hero-box {
         display: flex;
         flex-direction: column;
    }
     .hero-box .hero-details {
         width: 90%;
    }
     .hero-box .hero-image {
         display: none;
    }
     .hero-box .hero-details .hero-heading {
         font-size: 50px;
         line-height: 50px;
         color: #ffffff;
         font-family: 'Mulish', sans-serif;
    }
     .waves {
         visibility: hidden;
     }


     .features-items {
	 flex-direction: column;
     }
}
/* Portrait */
 @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
}
/* Landscape */
 @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
}
/* ------------------------iPhone 13 and iPhone 13 Pro */
/* 2532x1170 pixels at 460ppi */
 @media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
     .navbar {
         margin-left: 10px;
    }
     .navbar .menu {
         display: none;
    }
     #hero {
         height: auto;
         margin: 0px 0px 50px 0px;
    }
     .hero-box {
         display: flex;
         flex-direction: column;
    }
     .hero-box .hero-details {
         width: 90%;
    }
     .hero-box .hero-image {
         display: none;
    }
     .hero-box .hero-details .hero-heading {
         font-size: 50px;
         line-height: 50px;
         color: #ffffff;
         font-family: 'Mulish', sans-serif;
    }
     .waves {
         visibility: hidden;
     }
     .features-items {
	 flex-direction: column;
     }
}
/*---------------------------------*/
 .login-page {
     width: 360px;
     padding: 8% 0 0;
     margin: auto;
}
 .form {
     position: relative;
     z-index: 1;
     background: #FFFFFF;
     max-width: 360px;
     margin: 0 auto 100px;
     padding: 45px;
     text-align: center;
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
 .form input {
     font-family: "Roboto", sans-serif;
     outline: 0;
     background: #f2f2f2;
     width: 100%;
     border: 0;
     margin: 0 0 15px;
     padding: 15px;
     box-sizing: border-box;
     font-size: 14px;
}
 .form button {
     font-family: "Roboto", sans-serif;
     text-transform: uppercase;
     outline: 0;
     background: #d15a2a;
     width: 100%;
     border: 0;
     padding: 15px;
     color: #FFFFFF;
     font-size: 14px;
     -webkit-transition: all 0.3 ease;
     transition: all 0.3 ease;
     cursor: pointer;
}
 .form button:hover,.form button:active,.form button:focus {
     background: #d11a2a;
}
 .form .message {
     margin: 15px 0 0;
     color: #b3b3b3;
     font-size: 12px;
}
 .form .message a {
     color: #d11a2a;
     text-decoration: none;
}
 .form .register-form {
     display: none;
}