/* The variables for this site */
:root {
  --color: #0a0a0a;
  --pink: hsl(322, 100%, 66%);
  --light-pink: hsl(321, 100%, 78%);
  --light-red: hsl(0, 100%, 63%);
  --very-dark-cyan: hsl(192, 100%, 9%);
  --pale-blue: hsl(207, 100%, 98%);
}

*{
    box-sizing: border-box;
    transition: all 0.3s ease;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size:14px !important;
  width:100%;
}

h1,h2,h3,h4,h5,h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

section{
    padding: 2rem 3rem;
}

img{
    max-width: 100%;
}

a{
    text-decoration:none;
}

button:focus, button:hover, a:hover, a:focus{
    cursor:pointer;
}

nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:3rem;
    padding:1rem 1rem;
}



nav img{
    width:120px;

}

.button{
    --btn-color:var(--pink);
    padding:0.3rem 1.3rem;
    border-radius:20px;
    background:none;
    border:1px solid var(--btn-color);
    color:var(--btn-color);
    cursor:pointer;
    font-weight:700;
    
}

nav .button:hover,nav .button:focus{
     --btn-color:var(--light-pink);
}

#hero{
    text-align:center;
}

#hero h1{
    font-size:1.5em
}

#hero p{
    width:90%;
    margin:1.5rem auto;
    
}

section .button, footer .button{
    background:var(--pink);
    color:#fafafa;
    padding:1rem 3rem;
    border-radius:50px;
    display: inline-block;
    margin-top:1.5rem;
    box-shadow:rgba(0,0,0,0.08) 0px 4px 5px 4px
}

section .button:hover,section .button:focus, footer .button:hover, footer .button:focus{
    background:var(--light-pink);
}

#hero img{
    margin-top:6rem;
}

#statistics{
    margin-bottom:0;
    margin-top:5rem;
    text-align:left;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;

}

.statistic{
    display:inline-block;
    margin: 0 auto;
    margin-bottom:4rem;
}

.statistic:nth-child(2){
     margin-bottom:0;
}

.statistic *{
    margin:0;
}

.statistic img{
    width:1.5em;
    height:auto;
}

.statistic h2{
    font-size:4em;
    font-weight:700;
}

.statistic p{
    text-align:center;
    color:var(--very-dark-cyan);
}

.features{
    margin-bottom: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:0;
}

.features .holder{
    display:flex;
    flex-direction:column-reverse;
    text-align:center;
    margin:0;
    gap:5rem !important;
    width:100%;
    padding:2rem;
}

.features{
    position: relative;
    padding:0;
}

.features#grow img.background, .features#users img.background{
    width:100%;
    margin:0;
    margin-bottom:-1px;
}

.features#grow .bg-bottom, .features#users .bg-bottom{
    margin-top:-1px !important;
}

.features#grow .holder, .features#users .holder{
    text-align:center;
    margin:0;
    padding: 3rem 2rem;
    flex-direction:column-reverse;
    background-color: #F6FBFF;
    width:100%;
}

section.cta{
    text-align:center;
    padding:3rem;
    margin-bottom:5rem;
}

section.cta h3{
    font-size:1.5em;
    margin:0;
}

footer{
    display:flex;
    flex-direction: column;
}

footer .background{
    width:100%;
    margin: 0;
    margin-bottom:-1px;
}
footer .wrapper{
    background: #00252E;
    margin:0;
    padding:3rem;
    color:#fff;
    display:flex;
    flex-direction:column-reverse;
}

footer #newsletter{
    margin-bottom:4rem;
    
}

footer #newsletter h5{
    font-size:1.2em;
    font-weight:500;
    text-transform:uppercase;
    margin:0;
}

footer .input-holder{
    flex-wrap:wrap;
    width:100%;
    align-items:flex-end;
    padding:0;
    text-align:right;
}

footer .input-holder input{
    justify-content:center;
    width:100%;
    padding:0.5rem;
    margin-bottom:0;
    margin-top:1.2rem
}

footer .button{
    border-radius:3px;
    margin-top:1.1rem
    
}

footer svg{
    transform:scale(0.5) translateX(-50%);
}

footer a{
    color: #fff;
    font-size:1.4em;
}

footer .social{
    letter-spacing: 8px;
}

footer .contact{
    margin:2rem 0;
}

.background.desktop{
    display:none;
}

@media (min-width: 768px) {
  body {
    font-size: 16px !important;
  }

#hero h1{
    font-size:1.9em
}

    nav{
        padding:2rem 4rem;
    }

    nav img{
        width:150px;
    }

    #hero{
         padding-right:7rem;
         padding-left:7rem;
        
     }

     #hero p{
         width:50%
     }

    .features{
        margin-bottom:0;
    }
    
    #statistics, .features .holder{
        flex-direction: row !important;
        flex-wrap:nowrap;
        align-items:center;
        text-align:left !important;
        padding:6rem !important;
        padding-left:6rem !important;
    }

    #flowing .holder{
       flex-direction: row-reverse !important;
    }

    .statistic{
        margin-bottom:0;
    }
    

    footer .wrapper{
        flex-direction: row;
        gap:15rem;
        padding:2rem 6rem !important;
        padding-bottom:4rem !important;
    }

    footer #newsletter{
        margin-top:1rem;
    }

    .background.mobile{
        display:none
    }
    .background.desktop{
        display:block
    }
}

@media (min-width: 1050px) {
    nav{
        padding:2rem 8rem;
    }

    nav img{
        width:150px;
    }

    #hero{
         padding-right:12rem;
         padding-left:12rem;
        
     }

     #hero p{
         width:50%
     }

    .features{
        margin-bottom:0;
    }
    
    #statistics, .features .holder{
        flex-direction: row !important;
        flex-wrap:nowrap;
        align-items:center;
        text-align:left !important;
        padding:8rem !important;
        padding-left:12rem !important;
        padding-right:20rem !important;
        
    }

    #flowing .holder{
       flex-direction: row-reverse !important;
    }

    .statistic{
        margin-bottom:0;
    }
    

    footer .wrapper{
        flex-direction: row;
        gap:15rem;
        padding:2rem 12rem !important;
        padding-bottom:4rem !important;
    }

    footer #newsletter{
        margin-top:1rem;
    }
}