.xemplar_stack{background: url(../png/pattern%402x.png) 0 0;    background-size: 100%;}
#main{background: url(../png/header-bg-3.png) top center no-repeat; background-size: 100%;}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {width: 100%;padding-bottom:0;}
#hero .container {padding: 50px 0;position: relative;}
#hero h1 {margin: 0 0 10px 0;font-size: 32px;line-height: 56px;  color: #fff;}

.banner-content-3 p{font-size: 18px;color:#F9D4F7;text-align:left;max-width:68%;}
.hero-img{position: absolute;top: 115px;  right: -12%;width: 72%;}
.stack{margin:325px 0 0px;text-align: center;float: left;width: 58%;}
.stack img{max-width: 86%;margin: 0 auto 30px;}
.stack h2{text-transform: uppercase;color:#000;font-size: 28px;}


#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;}
}

@media (max-width: 768px) {
  #hero h1 {font-size: 28px;line-height: 36px;}  
  #hero h2 {margin-bottom: 10px;}
  .hero-img img{margin-top: 25px;margin-left:0px;}
  .banner-content-3 p {font-size: 16px;text-align: center;}
  .stack {margin:15px auto 40px;float: none;}
  .stack img {max-width: 250px;}
  .banner-content-3 {margin-right: 0px;}
  
  .features h2 {font-size: 24px;}

}


/*--------------------------------------------------------------
# features
--------------------------------------------------------------*/
.features h2{font-size: 32px; text-align: center;margin:20px 0 50px;}
.features .box{background-color: #fff;border-radius: 30px;text-align: center;padding:25px;
 border:1px solid #E8DBEF;margin-bottom:30px; min-height:340px;}
.features .box img{width:120px;margin-bottom:20px;}
.features .box h3{font-size: 18px;font-family: 'Nunito Sans', sans-serif;margin-bottom: 20px;color:#000;}
.features .box p{margin:0 ;color:#666;}
.features .box:hover{box-shadow:4px 6px 20px -10px #9935CB;}

@media (max-width: 768px) {

}


/*--------------------------------------------------------------
# big screen styles
--------------------------------------------------------------*/

@media (min-width:1440px){
  .container, .container-lg, .container-md, .container-sm, .container-xl {max-width: 1280px; }
  #main {background-size: 1920px;}
  #hero h1 {font-size: 35px;}
  .banner-content-3 p {font-size: 24px;}
  .stack {margin: 272px 0 0px;}
  .stack h2 {font-size: 40px;}
  .features h2 {font-size: 40px;}
    .features .box
    .features .box img {
        width: 150px;
    }
  .features .box h3 {font-size: 24px; font-weight:700;}
  .features .box p {font-size: 24px;line-height: 34px;}
}

@media (min-width:1200px) and (max-width:1439px){
  #main {background-size: 1440px;}
  #hero h1 {font-size: 36px;line-height: 46px;}
  .banner-content-3 p {font-size: 20px;max-width: 65%;line-height: 30px;}
  .stack {margin: 170px 0 0px;}
  .stack h2{font-size: 36px;}
  .hero-img {top: 37px; right: -7%; width: 64%;}
  .features .box h3 {font-size: 20px; font-weight:700;}
  .features .box p {font-size: 20px;line-height: 26px;}
  section#features {
    padding-top: 0px;
}
}

@media (min-width:992px) and (max-width:1199px){
  #main {background-size: 1200px;}
  #hero .container { padding: 20px 0;}
  #hero h1 {font-size: 30px;line-height: 40px;}
  .banner-content-3 p{font-size: 18px;line-height:24px;}
  .stack {margin:170px 0 0px;}
  .stack h2{font-size: 30px;}
  .hero-img {top: 30px; right: -6%; width: 64%;}
  .features .box h3 {font-size:16px;margin-bottom: 10px; font-weight:700;}
  .features .box p {font-size: 16px;line-height: 22px;}


}
@media (min-width:768px) and (max-width:991px){
  #main {background-size: 1200px;}
  #hero .container { padding: 20px 0;}
  .xemplar_stack .stack img {
    max-width: 210px !important;
}
section#features {
  padding-top: 30px;
}
.xemplar_stack .stack h2 {
  font-size: 24px !important;
  margin-bottom: 5px !important;
  color: #000 !important;
}
.stack {margin:240px -65px 0px !important;}

  #hero h1 {font-size: 30px;line-height: 40px;}
  .banner-content-3 p{font-size: 18px;line-height:24px;}
  
  .hero-img {
    top: 173px;
    right: 4%;
    width: 50%;
}
  .features .box h3 {font-size:16px;margin-bottom: 10px; font-weight:700;}
  .features .box p {font-size: 16px;line-height: 22px;}


}

@media (max-width:767px) {
  #main{background: url(../png/header-bg-mobile-2.png) 0 -15px no-repeat;background-size: 100%;}

  .hero-img {
    position: absolute;
    top: 195px;
    right: 30px;
    width: 72%;
}
section#hero {
  padding-top: 0px;
  overflow: inherit;
}
.stack {
  position: relative;
  top: 286px;
  overflow: auto;
  width: 100%;
}
section#features {
  margin-top: 260px;
}
.xemplar_stack .stack h2 {
  color: #fff !important;
}





}

@media (max-width:480px) {
  .hero-img {
    position: absolute;
    top: 274px;
    right: 65px;
    width: 72%;
}
.stack {
  top: 460px;
}
.xemplar_stack .stack h2 {
  color: #000 !important;
}
section#features {
  margin-top: 415px;
}




}


@media (max-width:375px) {
  .xemplar_stack #hero h1 {
    font-size: 26px;
    line-height: 32px;
    padding: 0px 35px;
}
.xemplar_stack .banner-content-3 p {
  max-width: 97%;
  margin: 0px auto;
  font-size: 13px;
  line-height: 18px;
}
.hero-img {
  position: absolute;
  top: 240px;
  right: 0;
  width: 100%;
}
.stack {
  top: 372px;
}
.xemplar_stack .stack h2 {
  color: #000 !important;
  font-size: 25px;
  line-height: 36px;
}

section#features .features h2 {
  font-size: 18px !important;
  line-height: 40px;
  margin-bottom: 20px !important;
}
section#features {
  margin-top: 375px;
}
.features .box h3 {
  font-size: 15px;
  font-family: 'Nunito Sans', sans-serif;
  margin-bottom: 15px;
  color: #000;
  font-weight: bold;
  line-height: 22px;
}
.features .box p {
  margin: 0;
  color: #666;
  font-size: 15px;
  line-height: 22px;
  padding: 0px 30px;
}


}

@media (max-width:320px) {
  .xemplar_stack #hero h1 {
    padding: 0px 10px;
}
.hero-img {
  top: 195px;
}
.stack {
  top: 275px;
}
.xemplar_stack .stack h2 {
  color: #000 !important;
  font-size: 22px;
}
section#features {
  margin-top: 300px;
  padding-top: 0px;
}






}