html, body {width: 100%; height: 100%;}
body {font-family: 'Roboto', sans-serif; font-size: 16px; color: #484848;}

h1, h2, h3, h4, h5, h6 {font-family: 'Roboto', sans-serif; font-weight: 400; color:#000; margin-bottom: 0; width: 100%; line-height: 110%}

a {-webkit-transition: all .35s; transition: all .35s; }
a:hover, a:focus {text-decoration: none;}
p {font-size: 18px; line-height: 145%; color: #666;}


/**** Common CSS ****/
section {padding: 40px 0;}
img {max-width:100%;}
.shaddow {text-shadow: 0px 0px 20px #a4a4a4;}
.container {max-width: 1180px;}
.orange-txt {color:#ff6600;}
.btn {border: 0;}
.btn-secondary {background:#ff6600;}
.btn-secondary:hover {background:#000;}

.navbar-light .navbar-nav .nav-link {font-size: 14px; color: #666; }
.navbar-light .navbar-nav .nav-link:hover {color: #ff6600;}
.navbar-light .navbar-nav li {padding: 0 5px;}
.navbar.bg-light {background: #fff !important;}
.navbar .navbar-nav {padding-top: 45px;}
.navbar .btn {margin-left: 70px; padding: 7px 25px; font-size: 14px;}


.hero {background:#9fcfff url(images/mobile-top-bg.jpg) bottom center no-repeat; background-size: cover; padding:60px 0;}

.hero .left img {padding: 40px 0 20px;}
.hero h2 {font-size: 46px; font-weight: 700; font-family: 'Open Sans', sans-serif;}
.hero p {font-size: 18px; font-family: 'Open Sans', sans-serif; max-width: 370px; padding-top: 15px;}


.feature1 {padding:160px 0 70px;}
.feature1 .col-md-3 {display: grid;}
.graybox {background: #e8e8e8; display: block; padding: 20px 25px 10px;}
.graybox img {margin-top:-90px; border-radius: 50%; background: #fff; padding: 10px;}
.graybox h2 {font-size: 30px; padding: 15px 0; font-weight: 700}
.graybox p {font-size: 13px !important;}

.feature1 .bottom {max-width: 800px; margin: 0 auto; padding-top: 80px;}
.feature1 .bottom h3 {font-size: 30px; font-weight: 700; line-height: 125%;}
.feature1 .bottom p {font-size: 16px; padding: 20px 0 10px; margin: 0}
.feature1 .bottom h4 {font-size: 24px; font-weight: 700;}


.feature2 {background: #dedede; padding: 80px 0;}
.feature2 .container {max-width: 1120px;}
.feature2 .col-md-4 {display: grid}
.whitebox {background: #fff; display: block; padding: 25px 30px; border-radius:5px; box-shadow: 0px 6px 8px #c9c9c9;}
.whitebox h3 {padding: 25px 0 15px; font-size: 18px; font-weight: 700; text-transform: uppercase;}
.whitebox p {font-size: 13px;}


.offers {padding: 60px 0 80px;}
.plans h2 {font-size: 48px;}
.plans h3 {font-size: 30px; padding: 15px 0;}
.plans h3 span {font-weight: 700;}
.plans img {border-radius: 15px}

.sign-up {padding-left:80px;}
.sign-up h2 {font-size: 36px; font-weight: 700; text-transform: uppercase;}
.sign-up h3 {font-size: 24px; font-weight: 500; padding-bottom: 20px;}
.sign-up form {background:#f6741e; padding: 35px 80px; border-radius: 15px;}
.sign-up form h2 {color: #fff; padding-bottom: 20px; text-transform: uppercase; font-size: 30px; font-weight: 500;}
.sign-up form .form-control {height: 45px; border:0;}
.sign-up form .btn-primary {background: #000; text-transform: uppercase; width: 100%; padding: 13px; font-size: 18px;}
.sign-up form .btn-primary:hover {background:#e8e8e8; color:#000;}


.copyright {background: #e5e5e5; padding: 30px 0; font-size: 18px;}
form .form-group span{
    color: black;
    position: absolute;
    margin: -48px 0px 0px 172px;
}



@media only screen and (max-width:768px) {
    
    .navbar-light .navbar-toggler {border-color:#f6741e; border-radius:0;}
    .navbar .btn {margin-left: 0;}
    .navbar .navbar-nav {padding: 15px 0;}
    .navbar-brand {max-width:175px;}
    
    .hero {padding: 40px 0; text-align: center;}
    .hero .left img {width:150px; padding-top: 10px;}
    .hero h2 {font-size: 36px;}
    .hero .right {text-align: center; padding-top: 20px;}
    .hero .right img {width:200px; padding-top: 10px;}
    
    .feature1 {padding: 10px 0 50px;}
    .graybox {margin-top: 90px;}
    .graybox img {width:100px;}
    .graybox h2 {font-size: 24px;}
    .feature1 .bottom {padding-top: 50px;}
    .feature1 .bottom h3 {font-size: 26px;}
    .feature1 .bottom h4 {font-size: 22px;}
    
    .feature2 {padding: 50px 0;}
    .whitebox {margin: 10px 0;}
    .whitebox img {width:90px;}
    
    .offers {padding: 50px 0 60px; text-align: center;}
    .plans h2 {font-size: 30px;}
    .plans h3 {font-size: 24px;}
    
    .sign-up {padding-left: 15px; padding-top: 50px;}
    .sign-up h2 {font-size: 32px;}
    .sign-up h3 {font-size: 22px;}
    .sign-up form h2 {font-size: 25px;}
    .sign-up form {padding: 20px;}
    .sign-up form .form-control {font-size: 13px; height: 35px;}
    .sign-up form .btn-primary {padding: 10px; font-size: 14px;}

    
    .copyright {padding: 15px 0; font-size: 14px;}
    
}