/*****HOME PAGE*****/
.home-splash-screen {
   position: relative;
}

.home-splash-screen .overlay {
   background: linear-gradient(350deg, #ffffff00 50%, var(--secondary) 22%, var(--primary) 100%) repeat;
   padding-top: 50px;
   padding-bottom: 400px;
   color: #fff;
}

.home-splash-screen .splash-content {
   padding-bottom: 80px;
}

.splash-images img {
   border: 15px solid var(--white-offset);
   border-radius: 50%;
}

.home-splash-screen .home-image-1 {
   position: absolute;
   height: 500px;
   width: 500px;
   right: 75px;
   top: 30px;
}

.home-splash-screen .home-image-2,
.home-splash-screen .home-image-3 {
   position: absolute;
}

.home-splash-screen .home-image-2 {
   top: 40%;
   right: 50%;
   height: 300px;
   width: 300px;
}

.home-splash-screen .home-image-3 {
   height: 220px;
   width: 220px;
   top: 55%;
   left: 5%;
}

.home-splash-screen .btn {
   background-color: #fff !important;
   border: 1px solid #fff;
   color: var(--primary);
   padding: 10px 30px;
   font-size: 18px;
   text-transform: uppercase;
   font-weight: bold;
}

@media screen and (max-width: 768px) {
   .home-splash-screen .home-image-1 {
      position: absolute;
      height: 350px;
      width: 350px;
      top: 320px;
      right: 0;
      left: 13px;
   }

   .home-image-2,
   .home-image-3 {
      display: none;
   }

}

.section-about .about-content {
   background-color: var(--light) !important;
}

/* .section-clients {
   background: url('../images/bg-imgs/i-about-bg.jpg')
} */
.section-clients {
   /* background: linear-gradient(to right, var(--primary), var(--secondary)) */
   background: url("../images/bg-imgs/i-about-bg.jpg");
   /* position: relative; */
}

/* .overlay {
   background-color: rgba(248, 247, 216, 0.7);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
} */
.logos-grid {
   display: grid;
   grid-template-columns: repeat(5, 20%);
   justify-content: center;
   align-items: center;
   row-gap: 50px;
   /* padding: 50px 0; */
}

.logos-grid>div {
   display: flex;
   align-items: center;
   justify-content: center;
}

@media screen and (max-width: 768px) {
   .logos-grid {
      grid-template-columns: repeat(3, 30%);
      gap: 18px;
   }
}

.section-products {
   background: linear-gradient(to right, var(--primary), var(--secondary));
}

.product-card {
   position: relative;
}

.product-card img {
   border-radius: 10px;
}

.product-card .product-card-content {
   color: #fff;
   position: absolute;
   top: 40%;
   padding: 05px 20px;
   width: 100%;
   text-align: center;
}

.product-card .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.9);
   ;
   opacity: 0.5;
   pointer-events: none;
   text-align: center;
   border-radius: 10px;
}

.product-card .btn {
   padding: 10px 30px;
   font-weight: bold;
   text-transform: uppercase;
}

/***PRODUCTS PAGE***/
.section-banner {
   background: linear-gradient(var(--primary), var(--secondary));
   color: #fff;
   text-align: center;
}

.section-content {
   background-color: var(--white-offset);
}

.section-banner h1 {
   padding: 50px 0;
}

.products-imgs {
   display: grid;
   grid-template-columns: repeat(4, 22%);
   grid-column-gap: 4%;
   align-items: center;
}

.products-imgs>div {
   display: flex;
   justify-content: center;
   align-items: center;
   border: 2px solid lightgray;
   border-radius: 15px;
   padding: 0px 15px;
   margin-bottom: 40px;
   height: 275px;
}

.products-imgs>div img {
   object-fit: contain !important;
   height: 275px !important;
   mix-blend-mode: multiply;
}

@media (max-width: 768px) {
   .products-imgs {
      display: block !important;
   }
}

.content-heading {
   font-weight: bold;
   text-transform: uppercase;
}

/**MANUFACTURING PROCESS***/
.process-grid {
   display: grid;
   align-items: center;
   justify-content: center;
   gap: 30px;
}
.process-card {
   display: flex;
   align-items: center;
   gap: 20px
}
.process-number {
   background: linear-gradient(var(--green) 40%, var(--primary) 60%);
   background: -webkit-linear-gradient(var(--secondary) 40%, var(--primary) 60%);
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
   font-weight: bold;
   font-size: 90px;
}
.process-icon {
   text-align: center;
   /* width: 350px; */
}
.process-icon h4 {
   margin: 10px 0;
}
.process-img img {
   border-radius: 10px
}
@media screen and (max-width: 768px) {
   .process-number {
      display: none;
   }
   .process-img {
      display: none;
   }
}

.contact-us-content .fa {
   color: var(--primary)
}