/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;padding-bottom:0;
  background: #001629;
background: -moz-linear-gradient(top, #001629 0%, #000959 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #001629), color-stop(100%, #000959));
background: -webkit-linear-gradient(top, #001629 0%, #000959 100%);
background: -o-linear-gradient(top, #001629 0%, #000959 100%);
background: -ms-linear-gradient(top, #001629 0%, #000959 100%);
background: linear-gradient(to bottom, #001629 0%, #000959 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001629', endColorstr='#000959', GradientType=0 );
}
.white-curve{background: url(../images/engage/banner-curver-bg.png) center bottom no-repeat;background-size: 100%;}
#hero .container {padding-top: 40px;}

#hero h1 {
  margin: 0 0 10px 0;
  font-size: 40px;
  line-height: 56px;    text-transform: uppercase;  color: #fff;
}
.banner-content{text-align: center;}
.banner-content p{color:#a1ccce;font-size: 18px;}

#hero h2 {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 50px;
  font-size: 24px;
}

#hero .btn-get-started {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 11px 28px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px 0 0 0;
  color: #fff;
  background: #47b2e4;
}

#hero .btn-get-started:hover {
  background: #209dd8;
}

#hero .btn-watch-video {
  font-size: 16px;
  display: inline-block;
  padding: 10px 0 8px 40px;
  transition: 0.5s;
  margin: 10px 0 0 25px;
  color: #fff;
  position: relative;
}

#hero .btn-watch-video i {
  color: #fff;
  font-size: 32px;
  position: absolute;
  left: 0;
  top: 7px;
  transition: 0.3s;
}

#hero .btn-watch-video:hover i {
  color: #47b2e4;
}

#hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 991px) {
  #hero {
    text-align: center;
  }
  #hero .animated {
    -webkit-animation: none;
    animation: none;
  }
  #hero .hero-img {
    text-align: center;
  }

}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }
  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

}

@media (max-width: 575px) {


}

@-webkit-keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}




/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about {background:#02848A url(../images/engage/pattern-1.jpg) 0 0 repeat;padding-top:0;    margin-top: -1px;}
.curve-bg{background: url(../images/engage/curve-bg.png) 0 0 no-repeat;background-size: 100%;}
.about .content h2 {
  font-size: 40px;color:#fff;text-transform: uppercase;
}
.about .content p {color:#fff;font-size: 18px;}
.about .content{text-align: center;}

.insurar{    text-align: center;  padding: 30px 0;}
.insurar h2{color: #000;font-size: 32px;text-transform: uppercase;}
.insurar h2 span{font-size:28px;color:#950D0D;}


.brochure .img-holder{max-width: 250px;text-align: center;float:right; margin: 30px 0;}

@media screen and (max-width:600px){
  
.brochure .img-holder {max-width: 300px;float: none;margin: 30px auto;width: 100%;}
.about .content h2 {font-size: 24px;}
.insurar {padding: 0 0 20px;}
.h2, h2 {font-size: 1.5rem;}
.insurar h2 span {font-size: 22px;}
.banner-points{padding-bottom:20px;margin-top: -1px;  background-color: #fff;}
.banner-points p{margin:10px 10px 0 10px;color:#080843;font-weight:bold;}
.banner-points p img{margin-right:10px;}
.curve-bg {background: url(../images/engage/curve-bg-mobile.png) 0 0 no-repeat;}

}

/*--------------------------------------------------------------
# services
--------------------------------------------------------------*/
.services .col-lg-4{padding:0;}
.services .box {
  padding:30px 25px;
  background: #fff;
  height: 100%;
  border-radius: 5px;background: url(../images/engage/seprator.png) right 220px no-repeat;
}
.services .box.Usability{background-image: none;}
.service-img{    width: 130px;
  background: url(../images/engage/Ellipse.png) 0 0 no-repeat;
  background-size: 100%;
  padding: 30px;
  margin: 0 auto;
  text-align: center;}
.Policy-Service .service-img img{    margin-left: -13px; }
.services .service-title{
  margin: 15px 0;text-align: center;
  font-size: 24px;
  color:#E9194B;;
}
.services ul {
  padding: 15px 0;
  list-style: none;
  color: #000;
  text-align: left;
  line-height: 20px;
}

.services ul li {
  padding: 0px 0 15px 30px;
  position: relative;
  font-size: 16px;
}

.services .bx {position: absolute;top:0;left:0;
  background-color:#E9194B;
  color: #fff;
  border-radius: 10px;
}

section#hero {
  padding-top: 0px;
}

@media (max-width: 991px) {
  .services .box {
    max-width: 60%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 767px) {
  .services .box {
    max-width: 80%;
    margin: 0 auto 30px auto;
  }
  .services .row {padding-top: 0px;}
  #hero .container {
    padding-top: 30px;
}
}

@media (max-width: 420px) {
  .services .box {
    max-width: 100%;
    margin: 0 auto;
  }
}




/*    styles for big screens    */
@media screen and (min-width:1400px){
  .section nav.navbar .container1 {max-width: 1280px;}
  .container, .container-lg, .container-md, .container-sm, .container-xl {max-width: 1280px; }
  .banner-img{margin-left: -14%;max-width: 1433px;}

  #hero h1 {font-size:40px;}
  .banner-content p {font-size: 24px;line-height: 34px;}
  .insurar {padding: 50px 0;width: 92%;}
  .insurar h2 {font-size: 40px;line-height:52px;}
  .insurar h2 span {font-size: 38px;}
  .button {font-size: 25px;padding: 10px 50px;}
  .brochure .img-holder {max-width: 58%;}
  .about .content p {font-size: 24px;}
  .section-title h2 {font-size: 40px;}
  .services .box {padding: 20px 25px;}
  .service-img {width: 150px;padding: 40px;}
  .services ul li {font-size: 18px;padding: 0px 0 15px 38px;}
  .section-title h2 {font-size: 40px;}
  }

  @media screen and (min-width:1400px) and (max-width:1600px){
    .insurar {padding: 24px 0;  }
    .insurar h2 {line-height: 45px;}
    .insurar h2 span {font-size: 36px;}
    .button {margin-top: 0px!important;}
  }
  @media screen and (min-width:1020px) and (max-width:1270px){
    section {padding: 40px 0}
    #hero h1, .about .content h2, .section-title h2 {font-size: 32px;}
    .banner-content p, .about .content p {font-size: 16px;}
    #hero .container {padding-top: 20px;}
    .insurar h2 {font-size: 28px;}
    .insurar h2 span {font-size: 24px;}
    .button {margin-top: 0px}  
    .service-img {width: 100px;padding: 30px;}
    .Usability .service-img {padding: 30px 37px;}
    .services .section-title h2{padding: 0; margin: 0;}
  }
  @media screen and (min-width:761px) and (max-width:1000px){
    .about .col-lg-6{width:50%;}
    .insurar {padding: 10px 0;}
    .xemplar_engage .insurar h2 {font-size: 22px!important;}
    .xemplar_engage .insurar h2 span {font-size: 18px!important;}
    .button {font-size: 14px!important;padding: 6px 20px!important; margin-top: 0!important;}
    .xemplar_engage .brochure .img-holder {max-width: 180px!important;margin: 10px auto 20px!important; }
  }