body{padding: 0;margin: 0;font-family: 'Roboto', sans-serif;}
.banner-wrapper{background-image: url("../img/developer-landing/banner-developer.png");background-size: cover;padding: 130px 250px}
.banner{max-width: 1100px;margin: 0 auto}
.banner h1{font-size: 60px;}
.banner h3{font-size: 1.8rem;color: white}
.button-section button{width: 200px;height: 40px;font-size: 1rem;font-weight: 500;float: left;background-color: #1189F6;
border-radius: 5px;border:none;}
.banner span{font-size: 12px;color: white
}
.form-group{margin-bottom: 1.5rem}
.form-wrap{background-color: rgba(20, 53, 68, 0.85);padding: 2rem}
h1{font-weight: 700;color: white;
font-size: 3.8rem;}
.section .banner p{font-weight: 400;
font-size: 25px;color: white;text-transform: inherit;
line-height: 36px;}
.section{width:100%;max-width: 1720px;padding: 0 30px}
.third-section h3{font-weight: 500; font-size: 28px; line-height: 33px; text-transform: uppercase; color: #1189F6; }
.header-wrapper {
    padding: 1.5rem 0;
    background: #0a2c3e;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
}
.error{color: red}
.content-container {
    width: 100%;
    max-width: 1340px;
    padding: 0 1rem;
    margin: 0 auto;
}
.section p, ul li{font-weight: 400; font-size: 20px; line-height: 36px;  color: #143544;}
.core-btn{background: #F8931D;border-radius: 5px;font-weight: 500;padding: 8px 30px;color: #fff;border:1px solid #F8931D;
font-size: 22px;text-transform: uppercase;
line-height: 36px;}
.core-btn:hover{background: transparent;color: #F8931D;text-decoration: none;}
.section h4{font-weight: 500; font-size: 42px; line-height: 52px; text-transform: capitalize;color: #1189F7;}
ul{list-style-position: inside;}
ul li{margin-bottom: 15px}
section.container-fluid{max-width: 100%;background-color: #F8F8F8;padding: 100px 20px}
.speak-box{background: #F8F8F8; box-shadow: 0px 7px 12px rgba(0, 0, 0, 0.08); border-radius: 10px;}
.speak-box p{font-size: 18px}
h6{font-size: 22px; line-height: 28px; text-transform: uppercase; color: #143544;font-weight: 500}
.part-number h2{font-size: 56px;color: #1189F6;font-weight: 700}
.part-number h5{font-size: 24px;color: #143544}
.col-md-3{position: relative;}
.part-number .col-md-3:after{position: absolute;content: '';height: 50%;top: 20%;width: 1px;background-color: #588EA7;right: 0}
.part-number .col-md-3:last-child:after{display: none;}
.section.last-section{background-color: #082431;}
.section.last-section.bg-white{background-color: #fff}
.last-section .row{max-width: 1420px;width: 100%;margin: 1rem auto 0}
.last-section h4{color: white}
.number-wrap{width: 7rem;background-color: rgba(67, 109, 128, 0.57);height: 7rem;font-weight: 700;min-width: 7rem;
font-size: 2.5rem;color: white}
.model-wrap h3{color: white;font-size: 24px;}
.section.img-wrap{background-color: #143544}
.img-wrap .row{max-width: 1720px;margin: 0 auto}
.img-wrap p{font-size: 20px;color: white;line-height: 24px;margin-bottom: 0 !important}
.img-wrap img{margin: 5px 10px}

/* MODEL SECTION */
.model-section{
  padding: 60px 0;
  background: #f4f7f8;
}

.model-container{
  width: 1100px;
  max-width: 100%;
  margin: 3rem auto;
}

.model-box{
  padding: 40px;
  border-radius: 5px;
  background-color: #fff;
  height: 100%;
  position: relative;
}

.ribbon {
  width: 125px;
  height: 125px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 5px 0;
  background-color: #1189F6;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  text-transform: uppercase;
  text-align: center;
 
  font-size: 14px;
  color: #fff;
  font-weight: 900;
}

.ribbon-top-left {
  top: -5px;
  left: -5px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: -5px;
  right: 40px;
}
.ribbon-top-left::after {
  bottom: 40px;
  left: -5px;
}
.ribbon-top-left span {
  /* right: -25px; */
  /* top: 30px; */
  right: 30px;
  top: 20px;
  transform: rotate(-45deg);
  width: 100%;
}

.model-box .title{
 
  font-weight: 500;
  font-size: 2.5rem;
  color: #143544;
  text-align: center;
  margin-bottom: 2rem;
}

.model-box .sub-title{
 
  font-weight: 400;
  font-size: 16px;
  color: #5a5a5a;
  text-align: center;
  margin-bottom:1rem;
}

.model-box .cost{
 
  font-weight: 700;
  color: #1189F6;
  text-align: center;
  margin-bottom: 1rem;
}
.model-box .cost .amount{font-size: 60px;}
.model-box .cost .type{font-size: 60px;}

.model-box .info{
 
  font-weight: 400;
  font-size: 16px;
  color: #5a5a5a;
  text-align: center;
}
/* MODEL SECTION */

.serv-icon{max-width: 78px;}
.last-section.bg-white h4{color: #1189F6}
.bg-white h3{font-weight: 500; font-size: 30px; line-height: 35px; text-transform: capitalize;color: #143544;}
/*.bg-white a{font-weight: 600; font-size: 22px; line-height: 36px; text-transform: capitalize;color: #1189F6;}*/
.bg-white p{margin-bottom: 0 !important}
.carousel-indicators{bottom: -40px;}
.carousel-indicators li{background-color: #181515}

@media (max-width: 1536px) {
  .banner h1{font-size: 56px}
  .section{margin-top:2rem !important;padding: 0 20px}
  h1{font-size: 2.5rem;}
  .form-wrap{padding: 1rem}
  .section .banner p{font-size: 20px;line-height: 30px}
  .banner-wrapper{padding: 100px 180px}
  .third-section h3{font-size: 24px}
  .serv-icon{max-width: 60px;}
  .number-wrap{width: 5rem;height: 5rem;font-size: 2rem;min-width: 5rem}
  .model-wrap h3{font-size: 1rem}
  .section p{font-size: 18px;margin-bottom: 2rem !important}
  ul li{font-size: 18px;line-height: 28px;}
  .section.fourth-section p{margin-bottom: 1rem !important}
  .core-btn{font-size: 20px;padding: 8px 25px;}
  .section h4{font-size: 38px;line-height: 42px;}
  section.container-fluid{padding: 70px 20px}
  h6{font-size: 20px; }
  .part-number h2{font-size: 48px;}
  .part-number h5{font-size: 20px;}
  .model-box .cost .type, .model-box .cost .amount{font-size: 40px}
  .col-md-7 .col-md-4{margin-bottom: 2rem !important}
}

@media (max-width: 1024px) {
  .banner h1{font-size: 48px}
  .col-md-7{flex: 0 0 100%;max-width: 100%}
  .number-wrap{width: 4rem;height: 4rem;font-size: 1.5rem;min-width: 4rem}
  .section .row.mt-5{margin-top: 1.5rem !important}
  .col-md-9{flex: 0 0 100%;max-width: 100%}
  .bg-white h3{ font-size: 24px;line-height: 30px}
}
@media (max-width: 768px) {
  .core-btn{padding: 8px 15px;font-size: 16px}
  }
@media (max-width: 767px) {
  .banner h1{font-size: 40px}
  .section{margin-top:1rem !important;}
  .section.img-wrap{margin-top: 0 !important  }
  .banner h3{font-size: 1.3rem}
  h1{font-size: 1.8rem;}
  ul li{margin-bottom: 10px}
  .form-wrap{padding: 0rem}
  .banner-wrapper{padding: 60px 40px}
  .section.banner-wrapper{margin-top: 2rem !important}
  .third-section h3{font-size: 20px;margin-bottom: 0.5rem !important}
  .section p{font-size: 16px;margin-bottom: 1rem !important}
  .section.fourth-section p{margin-bottom: 0.5rem !important}
  .col-md-7 .col-md-4{margin-bottom: 1rem !important}
  .part-number .col-md-3:after{display: none;}
  .core-btn{font-size: 16px;padding: 8px 10px;}
  .section h4{font-size: 30px;line-height: 40px;}
  section.container-fluid{padding: 40px 20px}
  h6{font-size: 18px; }
  .part-number h2{font-size: 40px;}
  .part-number h5{font-size: 18px;}
  .flex-wrap-medium{flex-wrap: wrap;padding-left: 0 !important}
  .model-box .cost .type, .model-box .cost .amount{font-size: 34px}
}