/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
  --white-color:                  #ffffff;
  --primary-color:                #00CC99;
  --secondary-color:              #0066CC;
  --section-bg-color:             #f0f8ff;
  --custom-btn-bg-color:          #0066CC;
  --custom-btn-bg-hover-color:    #00CC99;
  --dark-color:                   #000000;
  --p-color:                      #717275;
  --border-color:                 #7fffd4;
  --link-hover-color:             #0066CC;

  --border-radius-large:          100px;
  --border-radius-medium:         20px;
  --border-radius-small:          10px;

  --font-weight-light:            300;
  --font-weight-normal:           400;
  --font-weight-medium:           500;
  --font-weight-semibold:         600;
  --font-weight-bold:             700;
}

/*---------------------------------------
  CAROUSEL        
-----------------------------------------*/
.hero-section {
  background-image: url('../../images/templatemo-wave-banner.jpg'), linear-gradient(#348CD2, #FFFFFF);
  background-repeat: no-repeat;
  background-size: 108% 76%;
  /*background-position: top;*/
  padding-top: 200px;
}

.owl-carousel {
  text-align: center;
}

.owl-carousel-image {
  display: block;
}



/* 3D Spinner */
.owl-carousel .item {
  text-align: center;
  /*padding: 50px;*/
  margin-bottom: 10px;
  opacity: 1.2;
  -webkit-transform: scale3d(0.8, 0.8, 1);
  transform: scale3d(0.8, 0.8, 1);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.owl-carousel .owl-item.active.center .item {
  opacity: 1;
  -webkit-transform: scale3d(1.0, 1.0, 1);
  transform: scale3d(1.0, 1.0, 1);
}

/*.owl-carousel .owl-item .owl-carousel-verified-image {*/
/*  display: inline-block;*/
/*  width: 30px;*/
/*  height: auto;*/
/*  position: relative;*/
/*  right: 5px;*/
/*}*/

/*.verified-image {*/
/*  display: inline-block;*/
/*  width: 20px;*/
/*  height: auto;*/
/*}*/

.owl-carousel .owl-item {
  opacity: 0.35;
}

.owl-carousel .owl-item img {
  /*height: 300px !important;*/
}

.owl-carousel .owl-item.active.center {
  opacity: 1;
}

.owl-carousel-info-wrap {
  border-radius: var(--border-radius-medium);
  position: relative;
  overflow: hidden;
  text-align: left;
}

/*.owl-carousel-info {*/
/*  background-color: var(--section-bg-color);*/
/*  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);*/
/*  position: absolute;*/
/*  bottom: 0;*/
/*  right: 0;*/
/*  left: 0;*/
/*  padding: 30px;*/
/*}*/

/*.badge {*/
/*  background-color: var(--custom-btn-bg-color);*/
/*  font-family: var(--title-font-family);*/
/*  border-radius: var(--border-radius-large);*/
/*  color: var(--white-color);*/
/*  padding-bottom: 5px;*/
/*}*/

/*.owl-carousel-info-wrap .social-share,*/
/*.team-thumb .social-share {*/
/*  position: absolute;*/
/*  right: 0;*/
/*  bottom: 0;*/
/*}*/

/*.owl-carousel-info-wrap .social-icon,*/
/*.team-thumb .social-icon {*/
/*  opacity: 0;*/
/*  transition: all 0.3s ease;*/
/*  transform: translateX(0);*/
/*  padding-right: 20px;*/
/*  padding-left: 20px;*/
/*}*/

/*.owl-carousel .owl-item.active.center .owl-carousel-info-wrap:hover .social-icon,*/
/*.team-thumb:hover .social-icon {*/
/*  transform: translateY(-100%);*/
/*  opacity: 1;*/
/*}*/

/*.owl-carousel-info-wrap .social-icon-item,*/
/*.owl-carousel-info-wrap .social-icon-link,*/
/*.team-thumb .social-icon-item,*/
/*.team-thumb .social-icon-link {*/
/*  display: block;*/
/*  margin-bottom: 10px;*/
/*  margin-left: auto;*/
/*}*/

/*.owl-carousel-info-wrap .social-icon-link {*/
/*  margin-top: 5px;*/
/*  margin-bottom: 5px;*/
/*}*/

.owl-carousel .owl-dots {
  background-color: var(--white-color);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
  /*border-radius: var(--border-radius-large);*/
  display: inline-block;
  margin: 40px auto auto;
  padding: 15px 25px 7px;
}

.owl-theme .owl-nav.disabled+.owl-dots {
  margin-top: 40px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--secondary-color);
}


/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (min-width: 2160px) {
	.hero-section {
	  background-size: 100% 90%;
	  /* T o o p l a t e . c o m   C u s t o m i z e d */
	}
}


@media screen and (max-width: 1240px) {
	.hero-section {
	  background-size: 116%;
	  /* T o o p l a t e . c o m   C u s t o m i z e d */
	}
}

@media screen and (max-width: 991px) {

  .hero-section {
	  background-size: 160% 66%; 
	  /* T o o p l a t e . c o m   C u s t o m i z e d */
	}

  .section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
  }

}

@media screen and (max-width: 540px) {
  .hero-section {
    background-size: 180% 65%;
    /* T o o p l a t e . c o m   C u s t o m i z e d */
  }
}