.navbar-nav{column-gap:20px;}

:root{
    --my-color:#ff9e02;
}

body{overflow-x: hidden;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal; background:#f0f0f0;
    
}
  
  h1,h2,h3,h4,h5,h6{font-family: 'Roboto', sans-serif;}

.top-header{background:rgba(255,255,255,0.2) ! important;}
.top-header a{color:white;}
.top-header a:hover{color:var(--my-color);}

.my-btn-outline{ background:transparent; border:1px solid var(--my-color); border-radius:3px; padding:8px 15px; color:white;}

.my-btn-outline:hover{ background-color: var(--my-color); color:rgb(0, 0, 0) !important; transition:1s; }

.navbar{box-shadow: 0px 3px 5px 0px #ff9e0244; z-index: 1111; }

.nav-link{color:white;}
.nav-link:hover{transition:0.8s; color:var(--my-color); }

.carousel-wrap {
    margin: 20px auto;
    padding: 25px;
    width: 100%;
    position: relative;
  }
  
  /* fix blank or flashing items on carousel */
  .owl-carousel .item {
    position: relative;
    z-index: 100; 
    -webkit-backface-visibility: hidden; 
  
  }
  /* .owl-carousel .item img{width:80% !important; height:auto;} */

  
  /* end fix */
  .owl-nav > div {
    margin-top: -26px;
    position: absolute;
    top: 50%;
    color: #cdcbcd;
  }
  
  .owl-nav i {
    font-size: 30px;
    color:var(--black);
  }
  
  .owl-nav .owl-prev {
    left: -30px;
  }
  
  .owl-nav .owl-next {
    right: -30px;
  }

  
.hcolor{color:var(--my-color);}

.text-justify{text-align:justify;}

/**********/

/* [1] The container */
.item img{height:300px;}

.img-hover-zoom {
  height: 200px; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}

footer{background: linear-gradient(rgba(0, 0, 0, 0.924), rgba(0, 0, 0, 0.934)),url(../images/website-banners-1.png) center center fixed no-repeat; background-size: cover; color:white;}

footer{font-size:14px;}
footer h4{text-transform: uppercase;}
footer a{color:white; font-weight:500;}
footer a:hover{color:var(--my-color); }
footer ul li{padding:2px 0;}

.contact-box
{
  border-radius: 30px;
  border-top: 5px solid var(--my-color);
}
 
.my-btn {background:var(--my-color); color:rgb(0, 0, 0); border:1px solid black; border-radius:3px; padding:8px 12px; font-weight:bold; }
.my-btn:hover{background-color:transparent ; border:1px solid var(--my-color); transition:0.5s;}

.banner{background: linear-gradient(rgba(0,0,0,0.9),rgba(0, 0, 0, 0.89)),url("../images/website-banners-3.png")fixed center center no-repeat; background-size: cover; padding:30px 0;}

.card-img-overlay {
  top: 35% !important;
}


  /*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/

/*.services{ background:linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.8)), url('../images/banner1 (2).jpg')center center fixed no-repeat; background-size:cover;}*/

 .services .img {
  border-radius: 8px;
  overflow: hidden;
}

.services .img img {
  transition: 0.6s;
}

.services .details {
  padding: 50px 30px;
  margin: -34px 30px 0 30px;
  transition: all ease-in-out 0.3s;
  /*background: white;*/
  position: relative;
  background: rgba(70, 69, 69, 0.89);
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 0 25px rgba(0,0,0, 0.1);
}

.services .details .icon {
  margin: 0;
  width: 72px;
  height: 72px;
  background: var(--my-color);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: black;
  font-size: 28px;
  transition: ease-in-out 0.3s;
  position: absolute;
  top: -36px;
  left: calc(50% - 36px);
  border: 6px solid black;
}

.services a{text-decoration:none;}

.services .details h3 {
  color: #fff;/*var(--color-default);*/
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.services .details p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover .details h3 {
  color: #fff;
}

.services .service-item:hover .details .icon {
  background: black;
  border: 2px solid var(--my-color);
}

.services .service-item:hover .details .icon i {
  color: var(--my-color);
}

.services .service-item:hover .img img {
  transform: scale(1.2);
}

/*************************/

.about{background:linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8), rgb(181 180 180 / 60%)),  url('../images/website-banners-1.png')center center fixed no-repeat; background-size:cover;}

/******************/

.my-bg{background:rgba(255,255,255,0.2);}

.form-control{background-color:transparent; color:white;}


/*****************/

.accordion {
  --bs-accordion-color: white;
  --bs-accordion-bg: transparent;}
  
  .accordion-button {
  color: white;
  background-color: transparent;
}

.accordion-button:not(.collapsed),
.accordion-button:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
  background-color: transparent;
}
.accordion-button::after {
  width: 11px;
  height: 11px;
  border-radius: 100%;
  background-color: var(--my-color);
  background-image: none !important;
}
.accordion-button.collapsed::after {
  background-color: var(--bs-gray-300);
}

.accordion-button:not(.collapsed) {
  color: var(--my-color);
}

.events .card {
    color: #ffffff;
    background-color: #ffffff40;
}

/***********why box *************/

.why-box {border:4px dotted var(--my-color);}


/************ gallery **********/

.gallery{background:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url('../images/website-banners-1.png')center center fixed no-repeat; background-size:cover;}

.events{background:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url('../images/website-banners-1.png')center center fixed no-repeat; background-size:cover;}

/******************/

.product-box a {color:white; text-decoration:none;}
.product-box a:hover{color: var(--my-color);}

.product-box{background: rgb(100 100 100 / 88%); padding-bottom:10px;}


/*************/

.prod-details .carousel-inner img {
      width: 100%;
      height: 100%;
  }

#custCarousel .carousel-indicators {
    position: static;
    margin-top:20px;
}

#custCarousel .carousel-indicators > li {
  width:100px;
}

 #custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5;
 }

  #custCarousel .carousel-indicators li.active img {
    opacity: 1;
  }

  #custCarousel .carousel-indicators li:hover img {
    opacity: 0.75;
  }

  .prod-details .carousel-item img{

    width:80%;
  }
  
  .product-gallery a{color:white; text-decoration:none;}
  
  .product-gallery a:hover{color:var(--my-color);}
  
  /*  return to top */
#btnreturntotop {
	display: none; 
	position: fixed; 
	bottom: 40px; 
	right: 21px; 
	z-index: 9999; 
	border: none; 
	outline: none; 
	background-color: var(--my-color);
	color: white; 
	cursor: pointer; 
	border-radius: 50%; 
	font-size: 18px;
	height:40px;
	width:40px;
}

.web{background:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.9)) , url('../images/web-banner.jpg')fixed center no-repeat; background-size:cover; padding:30px 0; }