@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
body {
    font-family:'Poppins', sans-serif;
}
.growth__wrapper {
    background-color: #f6fbf7;
    padding: 10vh 10vw;
    margin: 0 auto;
}
.growth .section-heading {
    text-align: center;
    margin: 0 auto 5rem auto;
    font-family:'Poppins', sans-serif;
    font-weight:600;
    font-size:2.6rem;
}
.growth__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.growth__box .icon {
    width: 9rem;
    height: 9rem;
    background: #daecf9;
    background: -webkit-gradient(linear, left bottom, left top, from(#daecf9), to(#fff));
    background: linear-gradient(0deg, #e7f7ec 0%, #fff 100%);
    border-radius: 50%;
    filter: drop-shadow(0px 30px 20px rgba(194, 239, 208, 1));
    -webkit-filter: drop-shadow(0px 30px 20px rgba(194, 239, 208, 1));
    -moz-filter: drop-shadow(0px 30px 20px rgba(194, 239, 208, 1));
    position: relative;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.growth__box .icon img{
    width: 5rem;
    color: #20C155;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.growth__box .content {
    width: 72%;
    background-color: white;
    position: relative;
    border-radius: 2rem;
    padding: 3.7rem 6.2rem 2.5rem 4rem;
    font-family:'Poppins', sans-serif;
}
.growth__box .content h3 {
    font-family:'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    width: 80%;
}
.growth__box:hover .icon {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
@media (min-width: 768px) {
    .growth .row > div:nth-child(odd) .growth__box .content::before {
        content: "";
        width: 4.8rem;
        height: 2.2rem;
        background: url('https://reseller.markozz.com/assets/images/arrow.png') no-repeat;
        background-size: cover;
        display: block;
        position: absolute;
        left: -3.3rem;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
        -webkit-transform: translateY(-50%) rotate(-90deg);
    }
}
@media (min-width: 991.98px) {
    .growth .row > div:nth-child(even) .growth__box .icon {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }
    .growth .row > div:nth-child(even) .growth__box .content {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
    .growth .row > div:nth-child(even) .growth__box .content::after {
        content: "";
        width: 4.8rem;
        height: 2.2rem;
        background: url('https://reseller.markozz.com/assets/images/arrow.png') no-repeat;
        background-size: cover;
        display: block;
        position: absolute;
        right: -3.3rem;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        -webkit-transform: translateY(-50%) rotate(90deg);
    }
}
.growth .row > div:nth-child(n + 3) {
    margin-top: 3rem;
}
.growth .button__wrapper {
    margin-top: 5rem;
}
.growth .button__wrapper a {
    background: #1369ec;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(19, 105, 236, 0)), color-stop(50%, rgba(255, 177, 107, 0)), color-stop(51%, #1369ec), to(#65bef4));
    background: linear-gradient(0deg, rgba(19, 105, 236, 0) 0%, rgba(255, 177, 107, 0) 50%, #1369ec 51%, #65bef4 100%);
    background-size: 200% 200%;
    background-position: center bottom;
}
.growth .button__wrapper a:hover {
    background-position: center top;
    border: none;
    filter: drop-shadow(0px 10px 20px rgba(33, 120, 237, 0.4));
    -webkit-filter: drop-shadow(0px 10px 20px rgba(33, 120, 237, 0.4));
    -moz-filter: drop-shadow(0px 10px 20px rgba(33, 120, 237, 0.4));
}
@media (min-width: 991.98px) and (max-width: 1200px) {
    .growth__box .content {
        width: 68%;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .growth__wrapper {
        padding: 5rem 2rem;
    }
    .growth__box .content {
        width: 75%;
    }
    .growth .row > div:nth-child(n + 1) {
        margin-top: 5rem;
    }
    .growth .row > div:nth-child(even) .growth__box .content::before {
        content: "";
        width: 4.8rem;
        height: 2.2rem;
        background-size: cover;
        display: block;
        position: absolute;
        left: -3.3rem;
        top: 50%;
        transform: translateY(-50%) rotate(-90deg);
        -webkit-transform: translateY(-50%) rotate(-90deg);
    }
}
.growth__box .content::before, .growth .row > div:nth-child(even) .growth__box .content::before {
    background: url('https://reseller.markozz.com/assets/images/arrow.png') no-repeat;
}
@media (max-width: 768px) {
    .growth__wrapper {
    padding: 5vh 5vw;
}
    .growth .section-heading {
    font-size:1.6rem;
    margin-bottom:3rem;
}
    .growth__box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .growth__box .content {
        width: 100%;
        margin-top: 3rem;
        text-align: left;
        padding:1.6rem;
    }
    .growth__box .content h3 {
        width: 100%;
    }

    .growth__box .content::before {
        content: "";
        width: 4.8rem;
        height: 2.2rem;
        background-size: cover;
        display: block;
        position: absolute;
        top: -1rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
    .growth__box .icon {
        width:7rem;
        height:7rem;
    }
    .growth .row > div:nth-child(n + 2) {
        margin-top: 3rem;
    }
}
a {
    text-decoration:none !important;
}
.navbar {
    background:#29D690;
    padding:10px 120px;
    height:65px;
}
.navbar .header-btn, #why .header-btn{
    background:#FFD800;
    color:#202020;
    border:1px solid transparent;
    height:45px;
    padding: 12px 25px;
    border-radius:12px;
    font-family: 'Poppins', sans-serif;
    font-size:0.9rem;
    letter-spacing:0.3px;
}
.subtitle .header-btn{
    background:#FFD800;
    color:#202020;
    border:1px solid transparent;
    height:60px;
    border-radius:12px;
    font-family: 'Poppins', sans-serif;
    font-size:2rem;
    letter-spacing:0.3px;
    padding:16px 36px;
}
#first-banner .title {
    color:#20C155;
    font-family: 'Poppins', sans-serif;
    font-size:3.4rem;
}
#first-banner .title b {
    font-size:4rem;
}
#first-banner {
    background:transparent linear-gradient(180deg, #EBEBEB 0%, #F5F5F5 64%, #D2D2D2 100%) 0% 0% no-repeat padding-box;
    height:620px;
    width:100%;
    padding:3vh 10vw;
    overflow:hidden !important;
}
#first-banner .text {
    padding:18vh 0vw;
}
#first-banner .title span {
    font-weight:bold;
}
#first-banner .subtitle {
    font-family: 'Poppins', sans-serif;
    font-size:2rem;
    line-height:2.2rem;
    color:#202020;
}
#register {
    padding:10vh 20vw;
}
#register .form-card {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 6px 35px #DBDFE6;
    padding:3vh 2vw;
    border:1px solid transparent;
    border-radius:12px;
}
#register .form-card .title {
    font-family: 'Poppins', sans-serif;
    font-size:1.4rem;
}
#register .form-card .choose-card {
    width:150px;
    height:150px;
    border:1px solid transparent;
    border-radius:12px;
    box-shadow: 0px 13px 30px #0000001A;
    padding:3vh;
    color:#29D590;
}
#register .form-card .choose-card img{
    width:70px;
    height:70px;
}
#register .form-card .choose-card p {
    font-family: 'Poppins', sans-serif;
    font-size:1.4rem;
}
#register .form-card .choose-card.cc1 {
    background:#29D690;
    color:#fff;
}
#register .form-card .image {
    margin-top:3vh;
    border:1px solid transparent;
    border-radius:12px;
}
#register .form-card .image img {
    width:100%;
}
#register .form-card form {
    background:#F5F7FB;
    border:1px solid transparent;
    border-radius:12px;
    padding:4.3vh 3vw;
}
#register .form-card form input {
    height:50px;
    margin-bottom:20px;
    width:100%;
    border:1px solid transparent;
    border-radius:10px;
    padding-left:20px;
    font-family: 'Poppins', sans-serif;
}
#register .form-card form input::placeholder {
    color:#888888;
}
#register .form-card form button {
    margin-top:3.5vh;
    height:50px;
    width:80%;
    background:#FFD800;
    color:#202020;
    font-family: 'Poppins', sans-serif;
    border:1px solid transparent;
    border-radius:10px;
    text-transform:uppercase;
}
#why {
    padding:10vh 10vw;
    background:#F5F7FB;
}
#why .title {
    font-family: 'Poppins', sans-serif;
    font-size:2.4rem;
    color:#202020;
    margin-bottom:3vh;
    width:65%;
    margin-left:auto;
    margin-right:auto;
}
#why .paragraph .title {
    margin-left:0;
}
#why .title span {
    color:#29D690;
    font-family: 'Poppins', sans-serif;
}
#why .vertical-line{
    width:1px;
    background:#707070;
}
#why .paragraph {
    width:460px;
    word-break:normal;
    text-align:left;
}
#why .paragraph .title, #why .number {
    font-family: 'Poppins', sans-serif;
    font-size:1.4rem;
    color:#202020;
}
#why .paragraph .title span {
    font-family: 'Poppins', sans-serif;
    color:#202020;
}
#why .paragraph .subtitle {
    font-family: 'Poppins', sans-serif;
}
.horizontal-line {
    height:1px;
    background:#707070;
    margin:3vh 0vw;
}
#why .note {
    color:#FF5A5A;
    font-family: 'Poppins', sans-serif;
    font-size:1rem;
    font-weight:600;
    text-align:left;
}
footer {
    height:65px;
    padding:20px 0px;
    text-align:center;
    background:#29D690;
}
.success {
  background-color:#29D690;
  margin-bottom:3vh;
  padding:10px 0px;
  font-size:1.2rem;
  height:50px;
  font-family: 'Poppins', sans-serif;
}
.success strong {
  color: #fff;
}
/* hover styles */

.navbar .header-btn:hover, #why .header-btn:hover, #register .form-card form button:hover {
    background:transparent;
    border:1px solid #202020;
}
#register .form-card form input::focus {
    border:1px solid transparent;
    outline:none !important;
}
@media(max-width:800px) {
    .only-pc {
        display:none;
    }
    .navbar {
    padding:10px;
}
#first-banner .title {
    font-size:2rem;
}
#first-banner .title b {
    font-size:2.2rem;
}
#first-banner {
    padding:3vh 3vw;
}
#first-banner .text {
    padding:5vh 0vw;
}
#first-banner img {
    width:100%;
}
#first-banner .subtitle {
    font-size:1.6rem;
    line-height:1.8rem;
}
.subtitle .header-btn{
    background:#FFD800;
    height:50px;
    color:#202020;
    border:1px solid transparent;
    border-radius:12px;
    font-family: 'Poppins', sans-serif;
    font-size:1.6rem;
    letter-spacing:0.3px;
    padding:6px 30px;
}
#register {
    padding:3vh 3vw;
}
#register .image {
    display:none;
}
#register .form-card {
    padding:3vh 3vw;
}
#register .form-card .choose-card {
    width:120px;
    height:120px;
    padding:2vh;
}
#register .form-card .choose-card img{
    width:60px;
    height:60px;
}
#register .form-card form {
    margin-top:3vh;
    padding:3vh 3vw;
}
#register .form-card form button {
    margin-top:3vh;
}
#why {
    padding:3vh 1vw;
    background:#F5F7FB;
}
#why .title, #why .number {
    font-size:1.6rem;
    width:100%;
    line-height:1.4rem;
}
#why .paragraph {
    width:100%;
}
#why .paragraph .title, #why .number {
    font-size:1.2rem;
    margin-bottom:10px;
}
#why .paragraph .subtitle {
    font-size:0.9rem;
}
#why .note {
    font-size:0.9rem;
}
}