@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700;800&family=Oswald:wght@200;300;400;500;600&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}
#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 1;
}
.logo {
  max-width: 200px;
  padding: 20px 0;
}

.alturaSeroesBox img{max-width: 100%}



.carousel-caption{
left: 0px;
bottom: 0;
background-color: rgb(0 0 0 / 40%);
	padding: 25px 0px;
border-top-right-radius: 35px;
  color: #ffffff;
  width: 45%; text-align: left;

  padding-left: 15% }

.form-area {
  position: absolute;
  right: 0px;
  right: 0px;
  top: 40px;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  padding: 20px;
  border-radius: 10px;
}
.formTitle {
  font-size: 20px;
  color: #000;
  font-family: 'Oswald', sans-serif; padding-bottom: 15px;
}

.form-label {
  margin-bottom: .2rem !important;
}
.section2 {
  padding: 50px 0 0;
}
.title {
  font-size: 45px;
  padding-bottom: 40px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: 'Oswald', sans-serif;
}
.bannertitle{ font-size: 60px;
  padding-bottom: 10px;
  font-weight: 500;
  font-family: 'Oswald', sans-serif; color: #fff;}

.subTitle {
  font-size: 35px;
  padding-bottom: 20px;
  text-transform: uppercase;
  font-weight: 400;
  font-family: 'Oswald', sans-serif;
}
.bannersubTitle{ font-size: 25px;
  padding-bottom: 0px;
  text-transform: uppercase;
  font-weight: 400;
  font-family: 'Oswald', sans-serif;}
.hgroup {
  text-align: center; padding-bottom: 50px;
}

.img-hover-zoom {
  background: #C5D351;
  height: 267px;
  overflow: hidden; border-radius: 10px; box-shadow: 0px 3px 6px #00000029;
}

.img-hover-zoom:hover img {
  transform: scale(1.2); transition: transform .8s ease;
}
.img-hover-zoom img {
  transition: transform .8s ease;
}
.productBox{ padding-bottom: 80px;}
.productBox p {min-height: 171px;}
.paroductName {
  font-size: 28px;
  padding-bottom: 20px;
  text-transform: uppercase;
  font-weight: 400;
  font-family: 'Oswald', sans-serif;
}
.paroductName span {
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
}
.customBtn button, .customBtn a {
  color: #c5d351;
  margin-top: 10px;
  width: 13rem;
  height: auto;
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: #9EA941;
  padding: 0;
  font-size: 17px;
  font-family: 'Oswald', sans-serif;
  border-radius: 50px;
}
.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: #C5D351;
  border-radius: 1.625rem;
}
.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: #000000;
}
.learn-more .circle .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  color: #282936;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0px 0 5px;
}
.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: '';
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #000;
  border-right: 0.125rem solid #000;
  transform: rotate(45deg);
}
.learn-more:hover .circle {
  width: 100%;
}
.learn-more:hover .circle .icon.arrow {
  background: #000;
  transform: translate(1rem, 0);
  right: -100px;
  width: 30px;
}
.features{  padding: 50px 0 0; overflow: hidden;}
.coloroffering {
  background-image: linear-gradient( rgba(0,0,0,0.6), rgba(0,0,0,0.6) ), url(../images/colorBgImg.png);
	    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    color: #fff;     border-top-right-radius: 200px;
    border-bottom-right-radius: 20px;
    float: left; width: 95%; padding-top: 40px; padding-bottom: 30px;
	
}



.alturaSeroes {
  background:rgba(197,211,81,1); padding: 40px 30px;
	    
    color: #000;     border-top-right-radius: 200px;
    border-bottom-right-radius: 20px;
     margin-bottom: 50px;
	
}

.alturaSeroesBox h5{font-size: 18px;
text-align: center;
padding-top: 13px;}

.features figure{ padding: 0px; margin: 0px;}
.featuresName {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 400;
  font-family: 'Oswald', sans-serif;
}
.advantageFlex h5 {
   font-family: 'Oswald', sans-serif;
    font-size: 18px; font-weight: 300;
}
.advantageFlex {
    align-items: center;
    margin: 20px 0;
}

.footer {
  background: #fff;
  padding: 20px 0; color: #000; 
}
.cright {  color:#c5d351; font-size: 13px;
  padding: 10px 0;
}
.flogo {
  text-align: right;
}

.cright a{ color:#c5d351; text-decoration: none;}
@media (min-width: 1200px){
.solutionBlackdiv {
    width: 95%;
}
}

@media (min-width: 1600px) {
  .logo {
    max-width: 220px;
  }
}

@media (max-width: 767px) {
	#header {
  position: static;
  
  width: 100%;
  z-index: 1;
  background: #1b1a18;
}
	
	.form-area {
  position: relative;
  right: 0px;
  right: 0px;
  top: 227px;
  background: #C5D351;
  color: #000;
  padding: 20px 20px 250px 20px;
  border-radius: 10px;
}
	.title {
  font-size: 35px;
		padding-bottom: 5px;}
.paroductName {
	font-size: 22px;}
.subTitle {
	font-size: 19px;}
	.carousel-indicators, .carousel-control-next, .carousel-control-prev{ display: block; height:199px;}
	.carousel-indicators{display: none;}
	.alturaSeroes{border-top-right-radius: 17px; }
	.alturaSeroesBox{ margin-bottom: 30px;}
	.coloroffering{border-top-right-radius: 25px;}
	.advantageFlex {  margin: 5px 0;}
	.cright {  text-align: center;}
	.flogo {  text-align: center;}
	.features {		padding: 0px 0 0;}
	.productBox {  padding-bottom: 40px;}
	.alturaSeroes {		padding: 40px 30px 10px;}
}
