<style>
  /*///////////////////////////////////////////////////////////////////////////////////

 Theme Name: Seo Company
 Description: The Seo Company v1.0
 Author: Diego Velázquez Rabasa - Templune
 Author Personal Website: http://templune.com
 Author Behance Profile: https://www.behance.net/diegovr7
 Author Dribbble Profile: https://dribbble.com/diegovr7
 Author Envato Profile: https://themeforest.net/user/diegovr7
 Version: 1.0

 External Resources:
 Bootstrap 4
 Google Fonts
 Ionic Icons

 *This Html Theme is royalty free for use in personal and commercial projects with
 a couple of restrictions.

 Publications
 You are welcome to republish this Html Theme on condition that you link back to
 https://www.behance.net/gallery/67279127/The-Seo-Company-Free-PSD-Template
 and you should not provide the assets for direct download from your website.

 Prohibitions
 You do not have rights to redistribute, resell, lease, license, sub-license or offer
 this resource to any third party «as is». If you want to use this resource as a part
 of a product intended to be sold via any marketplace, please contact the author
 templune@gmail.com of the freebie to get an extended license.

/////////////////////////////////////////////////////////////////////////////////*/

/* /////////////////////////////

 1. Basic Styles
 2. Navbar
 3. Buttons
 4. Hero
 5. Marketing
 6. Testimonials
 7. Pricing
 8. Call to Action
 9. Footer
 10. Media Queries

   //////////////////////////*/


body,p {
 font-family: 'Raleway', sans-serif;
 font-size: 14px;
 font-weight: 300;
 color: #3a3f52;
}

h1 {
 color: #393939;
  letter-spacing: -0.1px;
 font-family: 'Roboto', sans-serif;

}

h2 {
 color: #393939;
 letter-spacing: -0.1px;
 font-family: 'Roboto', sans-serif;
 font-size: 35px;
 font-weight: 400;
}

h3 {
 color: #393939;
 font: 700 1.75rem/2rem "Raleway", sans-serif;
}

h4 {
 color: #393939;
 font: 700 1.375rem/1.875rem "Raleway", sans-serif;
}

h5 {
 color: #393939;
 font: 700 1.125rem/1.625rem "Raleway", sans-serif;
}

h6 {
 color: #393939;
 font: 700 1rem/1.5rem "Raleway", sans-serif;
}

p {
 margin-right: 2rem;
}
  
ol {
 font-family: 'Roboto', sans-serif;
 color: #393939;
 font-size: 13px;
  }
  
.p-large {
 font-family: 'Roboto', sans-serif;
 font-size: 13px;
}

.p-small {
 font-family: 'Roboto', sans-serif;
}

.p-heading {
 margin-bottom: 3.875rem;
}

.li-space-lg li {
 margin-bottom: 0.25rem;
}

ul {
 list-style-type: none;
 padding-left: 0px;
}

section {
 padding: 100px 0px;
}

#id section {
  padding: 0px 0px!important;
  }

.title-block {
 max-width: 700px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 30px;
 text-align: center;
}

.title-block p {
 font-size: 20px;
 font-weight: 300;
 color: #8da2b5;
 margin-bottom: 0px;
}

.divider {
 padding: 2rem 0 0;
  margin: 2rem 0 0;
  border-top: 1px solid #3c3f45;
}

.divider-light {
 padding: 2rem 0 0;
  margin: 2rem 0 0;
 border-top: 1px solid #edf1f2
}

/* ==============================================
   2. Navbar
===============================================*/

.custom-navbar {
 background-color: #ffffff!important;
 box-shadow: 0 2px 4px 0 rgba(0,0,0,.09);
 height: 70px;
 max-height: 70px;
}

.navbar-toggler {
 font-size: 38px;
 background-color: transparent;
}

.navbar-toggler:focus {
 text-decoration: none;
 outline: none;
}

.navbar-toggler-icon {
 color: #ffffff;
}

.navbar-collapse {
 background-color: #ffffff;
}

.nav-custom-link {
 font-size: 13px;
 font-weight: 400;
 letter-spacing: .05em;
 margin-top: 5px;
 padding-right: 15px;
}

.navbar a {
 color: #53627C !important;
}

.nav-right {
 float: right;
}

/* ==============================================
   3. Buttons
===============================================*/

.btn {
 font-size: 14px;
 font-weight: 400;
 border-radius: 3px!important;
 box-shadow: 0 2px 3px 0 rgba(0,0,0,.05), 0 1px 2px 0 rgba(0,0,0,.08);
}

.btn:hover {
 text-decoration: none;
}

.btn-regular {
 background-color: #015292;
 color: #ffffff;
 padding: 10px 25px;
 letter-spacing: .1em;
 margin-top: 25px;
 display: inline-block;
}

.btn-regular:hover {
 background-color: #FFA100;
 color: #ffffff;
}

.btn-demo {
 color: #ffffff;
 background-color: #015292;
 letter-spacing: .1em;
 padding: 15px 48px;
 display: inline-block;
 width: 100%;
 margin-top: 20px;
}

.btn-demo:hover {
 color: #ffffff;
 background-color: #FFA100;
}

.btn-demo-small {
 font-size: 12px;
 background-color: #015292;
 padding: 1px 4px;
}

.btn-demo-small:hover {
 background-color: #FFA100;
}

.btn-demo-small a {
 color: #ffffff!important;
}

.btn-buy {
 color: #ffffff;
 background-color: #0095f7;
 letter-spacing: .1em;
 padding: 15px 48px;
 display: inline-block;
 width: 100%;
 margin-top: 20px;
}

.btn-buy:hover {
 background-color: #0191f0;
 color: #ffffff;
}

/* ==============================================
   4. Hero
===============================================*/


#hero h1 {
 padding-top: 10px;
 font-size: 55px;
 font-weight: 700;
 line-height: 60px;
}

#hero p {
 font-size: 20px;
  font-weight: 300;
  margin-bottom: 0px;
  padding: 0px;
}

#hero span {
 font-size: 18px;
 font-weight: 600;
  color: #0068a4;
  text-transform: uppercase;
  letter-spacing: .04em;
}



/* ==============================================
   5. Marketing
===============================================*/

#marketing p {
 font-size: 16px;
    font-weight: 400;
    color: #8da2b5;
    margin-bottom: 0px;
    padding: 0px;
}

#marketing span {
 font-size: 16px;
 font-weight: 500;
 color: #0095f7;
 text-transform: uppercase;
 letter-spacing: .04em;
}

.content-box {
 padding: 60px 20px;
}

/* ==============================================
   7. Services
===============================================*/  

#services {
  padding: 30px 20px 100px 20px;
  }

.card-title{
 font-size: 18px;
 font-weight: bold;
 color: #0095f7;
 text-transform: uppercase;
 letter-spacing: .04em;
  }
  
.card-body{
  padding: 20px;
  margin: 0px;
  }
  
.card-text{
   font-size: 16px;
   font-weight: 400;
   color: #8da2b5;
   margin: 0px;
   padding: 0px;
  }
  
  
/* ==============================================
   8. Call to Action
===============================================*/

#call-to-action {
 background-color: #015AA6!important;
}
#call-to-action h2 {
 color: #ffffff;
}
#call-to-action p {
 font-size: 20px;
 font-weight: 300;
 color: #ffffff;
 opacity: .8;
 margin-bottom: 40px;
}
#call-to-action .title-block {
 margin-bottom: 0px;
}
#call-to-action .btn-regular {
 background-color: #ffffff!important;
 color: #0095f7!important;
 padding: 15px 45px;
}
#call-to-action .title-block {
 margin-bottom: 0px;
}
#call-to-action2 {
 background-color: #f1f1f1!important;
}
#call-to-action2 h2 {
 color: #015293;
}  
#call-to-action2 p {
 font-size: 20px;
 font-weight: 300;
 color: #015293;
 opacity: .8;
 margin-bottom: 40px;
}
#call-to-action2 .title-block {
 margin-bottom: 0px;
}
#call-to-action2 .btn-regular {
 background-color: #ffffff!important;
 color: #015293!important;
 padding: 15px 45px;
}
#call-to-action2 .title-block {
 margin-bottom: 0px;
}

/* ==============================================
   9. Footer
===============================================*/

.footer {
 padding-top: 4.625rem;
 padding-bottom: 0.5rem;
 background-color: #f6f8f9;
 font-family: 'Open Sans', sans-serif;
}

.footer p{
  font-size: 16px;
 font-weight: 400;
 color: #8da2b5;
 margin-bottom: 0px;
 padding: 0px;
}
  
.footer .footer-col {
 margin-bottom: 2.25rem;
}

.footer h4 {
 margin-bottom: 1rem;
}

.footer .list-unstyled .fas {
 color: #015292;
 font-size: 0.5rem;
 line-height: 1.375rem;
}

.footer .list-unstyled .media-body {
 margin-left: 0.625rem;
}

.footer .fa-stack {
 margin-bottom: 0.75rem;
 margin-right: 0.5rem;
 padding-right: 10px;
 font-size: 0.75rem;
}

.footer .fa-stack .fa-stack-1x {
 color: #fff;
 transition: all 0.2s ease;
}

.footer .fa-stack .fa-stack-2x {
 color: #015292;
 transition: all 0.2s ease;
}

.footer .fa-stack:hover .fa-stack-1x {
 color: #fff;
}

.footer .fa-stack:hover .fa-stack-2x {
    color: #00a7bd;
}


/*************************/
/*     16. Copyright     */
/*************************/
.copyright {
 padding-top: 1rem;
 padding-bottom: 0.375rem;
 text-align: center;
 font-family:'Open Sans', sans-serif;
}

.copyright .p-small {
 padding-top: 1.375rem;
 opacity: 0.7;
}

/* ==============================================
   9. Media Queries
===============================================*/

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  
 h1 {
 text-align: center!important;
  }

 span{
 text-align: center!important;
  }

 h2 {
  font-size: 34px!important;
  margin-bottom: 20px;
  line-height: 40px!important;
  text-align: center!important;
 }
 .title-block h2, p {
  text-align: center!important;
  padding: 0px 25px;
 }

 #call-to-action h2, p {
  text-align: center!important;
  margin: 0 25px 10px!important;
 }

 #call-to-action {
  background-image: none;
  background-color: #0068a4;
 }
 
 #call-to-action2 h2, p {
  text-align: center!important;
  margin: 0 25px 10px!important;
 }
 #call-to-action2 {
  background-image: none;
  background-color: #f1f1f1;
 }
  
  #hero a{
  text-align: center!important;
  }
  
  #marketing {
  padding-top:0px!important;
  }
 
  #marketing p {
  margin: none!important;
  }
  
  #marketing span {
  text-align: center!important;
  }
  

 footer {
  padding: 60px 25px;
 }
 footer h5 {
  font-size: 18px;
  margin-top: 30px;
 }
 footer h4 {
  text-align: center!important;
  }
  
 .footer-col {
  text-align: center!important;
  }
  
 footer li {
  font-size: 16px;
  margin-bottom: 15px;
 }
 footer p {
  font-size: 16px;
  padding-left: 25px;
 }
 footer i {
  font-size: 30px;
  margin-right: 20px;
 }
 footer small {
  float: center!important;
  margin-top: 20px;
 }
}

@media (max-width: 768px) {
 #hero h1 {
  font-size: 34px!important;
  line-height: 40px!important;
  margin-bottom: 20px;
 }
  
 #hero {
  padding: 100px 25px 0 0;
  text-align: center!important;
 }

 #hero span {
  padding-top: 150px;
  }
  
 #hero p {
  font-size: 20px!important;
 }
 
 #marketing {
  padding-top:0px!important;
 }
 
}

@media (max-width: 991px) {
 .nav-right {
  float: left;
 }
 .nav-custom-link {
  border-bottom: 1px solid #EEE;

 }
 .navbar-nav{
  width: 100%;
 }
 .navbar-nav .nav-link {
  padding: 20px 0;
  text-align: left;
 }

 .btn-demo-small {
  background-color: #ffffff;
  border: 0px;
  padding: 0px;
  box-shadow: none;

 }
 .btn-demo-small:hover {
  background-color: #ffffff;
  border: 0px;
  padding: 0px;
  box-shadow: none;

 }
 .btn-demo-small a {
  color: #53627C!important;
 }
 .nav-custom-link {
  font-size: 13px;
 }

 .icon-mobile {
  font-size: 18px;
  float: right;
 }

 .navbar-collapse {
  border-bottom: 1px solid #efefef;
 }

 .nav-logo-mobile {
  margin: auto;
  padding-right: 50px;
 }

 .nav-logo-desktop {
  display: none;
 }
 
  #hero {
  background-size: 100%!important;
  background-repeat: no-repeat;
  }
  
  #hero img{
  height: auto;
  }
  
  #hero h1{
  font-size: 44px;
  line-height: 44px;
  }
  
  #hero p{
  font-size: 18px;
  line-height: 25px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
 .icon-mobile {
  display: none;
 }
 .nav-logo-mobile {
  display: none;
 }
 
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
 .pricing-box h3 {
  font-size: 17px;
 }
 .pricing-box p {
  font-size: 14px;
 }
 .pricing-box li {
  font-size: 12px;
 }
 .btn-buy {
  font-size: 12px;
  padding: 15px 20px;
 }
 .btn-demo {
  font-size: 12px;
  padding: 15px 20px;
 }
 .profile-picture {
  width: 50px;
  height: 50px;
 }
 .testimonial-box h6 {
  font-size: 14px;
  margin-left: 10px;
 }
 .testimonial-box span {
  font-size: 12px;
 }
 .testimonial-box small {
  font-size: 12px;
  margin-top: 4px;
  margin-left: 10px;
 }

}

.form-group {
 position: relative;
 margin-bottom: 1.25rem;
}

.form-group.has-error.has-danger {
 margin-bottom: 0.625rem;
}

.form-group.has-error.has-danger .help-block.with-errors ul {
 margin-top: 0.375rem;
}

.label-control {
 position: absolute;
 top: 0.87rem;
 left: 1.375rem;
 color: #626262;
 opacity: 1;
 font: 400 0.875rem/1.375rem "Raleway", sans-serif;
 cursor: text;
 transition: all 0.2s ease;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
 .label-control {
  top: 0.9375rem;
 }
}

.form-control-input:focus + .label-control,
.form-control-input.notEmpty + .label-control,
.form-control-textarea:focus + .label-control,
.form-control-textarea.notEmpty + .label-control {
 top: 0.125rem;
 opacity: 1;
 font-size: 0.75rem;
 font-weight: 700;
}

.form-control-input,
.form-control-select {
 display: block; /* needed for proper display of the label in Firefox, IE, Edge */
 width: 100%;
 padding-top: 1.0625rem;
 padding-bottom: 0.0625rem;
 padding-left: 1.3125rem;
 border: 1px solid #c4d8dc;
 border-radius: 0.25rem;
 background-color: #fff;
 color: #626262;
 font: 400 0.875rem/1.875rem "Raleway", sans-serif;
 transition: all 0.2s;
 -webkit-appearance: none; /* removes inner shadow on form inputs on ios safari */
}

.form-control-select {
 padding-top: 0.5rem;
 padding-bottom: 0.5rem;
 height: 3rem;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
 .form-control-input {
  padding-top: 1.25rem;
  padding-bottom: 0.75rem;
  line-height: 1.75rem;
 }

 .form-control-select {
  padding-top: 0.875rem;
  padding-bottom: 0.75rem;
  height: 3.125rem;
  line-height: 2.125rem;
 }
}

select {
    /* you should keep these first rules in place to maintain cross-browser behavior */
    -webkit-appearance: none;
 -moz-appearance: none;
 -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('../images/down-arrow.png');
    background-position: 96% 50%;
    background-repeat: no-repeat;
    outline: none;
}

select::-ms-expand {
    display: none; /* removes the ugly default down arrow on select form field in IE11 */
}

.form-control-textarea {
 display: block; /* used to eliminate a bottom gap difference between Chrome and IE/FF */
 width: 100%;
 height: 8rem; /* used instead of html rows to normalize height between Chrome and IE/FF */
 padding-top: 1.25rem;
 padding-left: 1.3125rem;
 border: 1px solid #c4d8dc;
 border-radius: 0.25rem;
 background-color: #fff;
 color: #626262;
 font: 400 0.875rem/1.75rem "Raleway", sans-serif;
 transition: all 0.2s;
}

.form-control-input:focus,
.form-control-select:focus,
.form-control-textarea:focus {
 border: 1px solid #a1a1a1;
 outline: none; /* Removes blue border on focus */
}

.form-control-input:hover,
.form-control-select:hover,
.form-control-textarea:hover {
 border: 1px solid #a1a1a1;
}

.checkbox {
 font: 400 0.75rem/1.25rem "Raleway", sans-serif;
}

input[type='checkbox'] {
 vertical-align: -15%;
 margin-right: 0.375rem;
}

/* IE10+ hack to raise checkbox field position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
 input[type='checkbox'] {
  vertical-align: -9%;
 }
}

.form-control-submit-button {
 display: inline-block;
 width: 100%;
 height: 3.125rem;
 border: 1px solid #015292;
 border-radius: 1.5rem;
 background-color: #015292;
 color: #fff;
 font: 700 0.75rem/1.75rem "Raleway", sans-serif;
 font-size: 1rem;
 font-weight: 550;
 cursor: pointer;
 transition: all 0.2s;
}

.form-control-submit-button:hover {
 background-color: transparent;
 color: #015292;
}

/* Form Success And Error Message Formatting */
#rmsgSubmit.h3.text-center.tada.animated,
#cmsgSubmit.h3.text-center.tada.animated,
#pmsgSubmit.h3.text-center.tada.animated,
#rmsgSubmit.h3.text-center,
#cmsgSubmit.h3.text-center,
#pmsgSubmit.h3.text-center {
 display: block;
 margin-bottom: 0;
 color: #626262;
 font: 400 1.125rem/1rem "Raleway", sans-serif;
}

.help-block.with-errors .list-unstyled {
 color: #626262;
 font-size: 0.75rem;
 line-height: 1.125rem;
 text-align: left;
}

.help-block.with-errors ul {
 margin-bottom: 0;
}
/* end of form success and error message formatting */

/* Form Success And Error Message Animation - Animate.css */
@-webkit-keyframes tada {
 from {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
 10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 }
 30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 }
 40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 }
 to {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
}

@keyframes tada {
 from {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
 10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 }
 30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 }
 40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 }
 to {
  -webkit-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
 }
}

.tada {
 -webkit-animation-name: tada;
 animation-name: tada;
}

.animated {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
/* end of form success and error message animation - Animate.css */

/***********************/
/*     10. Request     */
/***********************/
.form-1 {
 padding-top: 6.875rem;
 padding-bottom: 6.25rem;
 background-color: #f6f8f9;
}

.form-1 h2 {
 margin-bottom: 1.25rem;
}

.form-1 .list-unstyled {
 margin-top: 1.375rem;
}

.form-1 .list-unstyled .fas {
 color: #015292;
 line-height: 1.375rem;
}

.form-1 .list-unstyled .media-body {
 margin-left: 0.625rem;
}

.form-1 .text-container {
 margin-bottom: 3.5rem;
}

</style>
