html, body{
    overflow-x: hidden;
}

body{
    padding:15px;
}
.container{
    padding:0;
}

h1 {
font-size: 100px;
letter-spacing: -8px;
margin: 0;
font-weight: 600;
line-height: 95px;
text-transform: uppercase;
}

h3 {
font-size: 20px;
margin:0;
padding:0;
opacity:0.5;
color: #4360e0;
letter-spacing: 18px;
line-height: 50px;
text-transform: uppercase;
}

.hero-banner {
    background: url('../assets/img/header-bg.jpg') right bottom no-repeat;
    background-size: contain;
    background-color: #EDECE7;
    padding: 110px 0 100px 0;
    height: auto;
}
.services {
        margin-top:80px;
        margin-bottom:40px;
    }
    .services .icon {
        position:relative;
        width:175px;
        height:175px;
        margin:0 auto;
        text-align:center;
        line-height:180px;
        font-size:56px;
        color:#fff;
        border-radius:50%;
        box-shadow:0 0 0 0 rgba(0,0,0,0.0);
        margin-bottom:40px;
        -webkit-transition:all .3s ease-out;
        transition:all .3s ease-out;
        border: 1px solid #4362e0;
        color: #4346e0;
    }
    .services .item:hover .icon {
        background: #43a1e0;
        border: 1px solid #43b1e0;
    }
    .services .item [class*=fa] {
        -webkit-transition:all .3s ease-out;
        transition:all .3s ease-out;
    }
    .services .item:hover [class*=fa] {
        -webkit-transform:scale(1.2);
        transform:scale(1.2);
        -webkit-transition:all .3s ease-out;
        transition:all .3s ease-out;
        color:#fff;
    }
    .features-wrapper {
        margin:70px 0 0;
    }
    i.respons {
        position:relative;
        width:35px;
        height:35px;
        margin:0 auto;
        line-height:35px;
        text-align:center;
        font-size:15px;
        color:#fff;
        border-radius:50%;
        -webkit-transition:all .3s ease-out;
        transition:all .3s ease-out;
        border:1px solid #CCCCCC;
        color: #CCCCCC;
    }

    ul.social-buttons {
            list-style:none;
            margin:0;
            padding:0;
        }
        ul.social-buttons li {
            display:inline-block;
            margin-right:10px;
        }
        ul.social-buttons li:last-child {
            margin-right:0;
        }
        .social-btn {
            width:40px;
            height:40px;
            background: #43c6e0;
            display:inline-block;
            color:#fff;
            font-size:17px;
            line-height:40px;
            text-align:center;
        }
        .social-btn:hover,.social-btn:focus {
            background: rgba(255, 232, 0, 1);
            color: #439ee0;
        }
      
    .color-bg {
        background:#4387e0;
    }

    .section-padding{
        padding: 30px 20px 50px 20px;
     }
     .intro p {
        /* margin:50px 0 0; */
    }

    h1.arrow {
        font-size: 26px;
        text-transform:uppercase;
        color:#353535;
        letter-spacing: 4px;
        background:url('../img/h1-bg.png') no-repeat center bottom;
        font-weight: bold;
    }
    
    h1.arrow span {
        color: #314ba8;
    }
    .wp1,.wp2,.wp3,.wp4,.wp5,.wp6 {
        /* visibility:hidden; */
    }
    .color-bg h6, .color-bg p {
        color: white;
    }

    @media screen and (max-width: 500px) {
    .column-flex {
    flex: 50%;
    max-width: 50%;
    }
}

@media screen and (min-width: 501px ) and (max-width: 800px) {
    .column-flex {
    flex: 33%;
    max-width: 33%;
    }
}

@media only screen and (max-width: 500px) {
nav {
flex-direction: column;
}
nav ul {
flex-direction: column;
padding-top: 0.5rem;
}
nav li {
padding: 0.5rem 0;
}
nav h1{
text-align: center;
}
} 

      /* Nav Bar */
      .navbar{
        position: sticky;
        top: 0px;
    }
    
    .navbar-brand::first-letter{
        text-transform: uppercase;
        font-weight: 1000;
    }
    
    nav + h1 {
        position: sticky;
    }
    
    
    #mobile-promp{
        display : block;   
        margin : auto;
        display:none;
    }

    /* FOOTER */
    .footer a {
        color:#a1a9b0;
}
.footer {
        background-color:#f3f5f8;
        padding:20px 0 20px;
}
.footer p {
        color: #000000;
        font-size: 24px;
}

/* ==========================================================================
   Responsive overrides for tablets and mobile phones
   ========================================================================== */

@media (max-width: 767.98px) {
    h1 {
        font-size: 60px;
        letter-spacing: -3px;
        line-height: 62px;
    }

    h3 {
        font-size: 14px;
        letter-spacing: 8px;
        line-height: 34px;
    }

    .hero-banner {
        padding: 70px 20px 50px 20px;
        background-size: 220px;
    }

    .section-padding {
        padding: 30px 15px 40px 15px;
    }
}

@media (max-width: 575.98px) {
    h1 {
        font-size: 40px;
        letter-spacing: -2px;
        line-height: 44px;
    }

    h3 {
        font-size: 11px;
        letter-spacing: 4px;
        line-height: 26px;
    }

    .hero-banner {
        padding: 50px 15px 40px 15px;
        background-size: 150px;
    }

    .navbar-brand h2 {
        font-size: 24px;
    }

    .footer p {
        font-size: 18px;
    }
}