@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
body {
  font-family: "Quicksand", sans-serif ;
  font-optical-sizing: auto;
  font-weight:normal;
  font-style: normal;
}

.h-28{
    height: 3rem;
    width: 14.35rem;
}
.fs-1 {
    font-size: 4.5rem !important;
}
.fs-2{
    font-size: 1.25rem !important;
}
.fs-3{
    font-size: 0.875rem !important;
}
.fs-4{
    font-size: 1.4rem !important;
}
.fs-5{
    font-size: 0.875rem !important;
}
.fs-6{
    font-size: 1.5rem !important;
}
.fs-7{
    font-size: 2.25rem !important;
}
.bg-1 {
    background-color: rgb(255 255 255 / 0.1);
}

.bg-2 {
    background-color: rgb(72 72 72 / var(--tw-bg-opacity, 1));
}
.bg-3{
    background: #000;
}
.color-1{
    color: #E5E7EB;
}
.color-2{
    color:#868686;
}
.color-3{
    color: #000;
}
.color-4{
    color: #fff;
}
.w-30{
    width: 30px;
}

/* home page start */
#hero-banner .hero_banner {
    position: relative;
    background: url('../images/home/hero-banner.webp');
    height: calc(100vh - 54px);
    background-size: cover;
    background-position: center;
}

#hero-banner .hero_banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); 
    z-index: 1;
}
.section-title{
	font-size:1.5rem !important;
	color:rgba(25, 171, 34) !important;	
}

.banner-title {	 
	padding:0px 5px 0px 5px !important;
	font-size:4.5rem !important;
	font-weight:bold !important;
	color:rgba(25, 171, 34) !important;	
}

.banner-sub-title {
	font-size:2rem !important;
	color: #fff !important;
	padding:0px 5px 0px 5px !important;
}


.inner-banner-title {	 
	padding:0px 5px 0px 5px !important;
	font-size:3.5rem !important;
	font-weight:bold !important;
	color:rgba(25, 171, 34) !important;	
}

.inner-banner-sub-title {
	font-size:1.5rem !important;
	color: #fff !important;
	padding:0px 5px 0px 5px !important;
}


.index-box {
	background-color: rgba(0, 0, 0, 0.4) !important;	
}

#hero-banner .hero_banner .container-fluid,
#hero-banner .hero_banner .row {
    position: relative;
    z-index: 2;
}

#hero-banner .hero_banner .row-height {
    height: calc(100vh - 54px);
}

.navbar-nav .nav-item{
    padding: 0 2px;
} 

#hero-banner .hero_banner .view-product:hover {
    background: #fff;
    color: #000 !important;
    border: none;
}
.number {
  margin-top: -0.12rem;
  padding:0rem;
  font-weight: bold;
  font-size:0.9rem;
  color:rgba(25, 171, 34) !important;	
}

.process-step {
    width: 60px;
    height: 60px;
    border: 2px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin: 0 auto 15px;
}

.process-description {
    color: #6c757d; 
}

.process-container {
    background-color: #f8f9fa;  
    border: 1px solid #ddd;
    margin-top: 30px;
}

#get-started .get_started .get-in-touch:hover{
    background:#000;
    color: #fff;
}
/* home page end */
.nav-link:focus, .nav-link:hover{
    border-bottom: 2px solid #43BF4F !important;
}
 
#hero-banner .hero_banner_product{
    position: relative; 
    height:60vh;
    background-size: cover;
    background-position: center;
	 background-color: rgba(0, 0, 0, 0.2); 
}

#hero-banner .product_banner{    
    background: url('../images/product/product-banner.jpg');  	 
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-size: cover; /* Stretch the image to cover the entire div while maintaining aspect ratio */
    background-position: center; /* Center the image within the div */
}


#hero-banner .about_us{     
	background: url('../images/product/about-us.jpg'); 
	background-size: cover;
    background-position: center;
}

#hero-banner .contact_us_banner{     
	background: url('../images/product/contact-us.jpg');    
	background-size: cover;
    background-position: center;    
}

#hero-banner .food_banner_product{     
	background: url('../images/product/food-ordering-kiosk.jpg');
     /* makes image cover the whole div */
	background-size: cover;
    background-position: center;
}


#hero-banner .visitor_product_banner{     
	background: url('../images/product/visitor-managment.jpg');
     /* makes image cover the whole div */
	background-size: cover;
    background-position: center;
}


#hero-banner .ariex-konnect-banner{     
	background: url('../images/product/ariex-konnect.jpg');
     /* makes image cover the whole div */
	background-size: cover;
    background-position: center;
}


#hero-banner .parcel_banner_product{     
	background: url('../images/product/parcel-delivery-kiosks.jpg');
     /* makes image cover the whole div */
	background-size: cover;
    background-position: center;
}

#hero-banner .ticket_banner_product{     
	background: url('../images/product/ticketing-kiosk.jpg');
     /* makes image cover the whole div */
	background-size: cover;
    background-position: center;
}

#hero-banner .card_banner_product{     
	background: url('../images/product/card-printing-kiosk.jpg');
     /* makes image cover the whole div */
	background-size: cover;
    background-position: center;
}

#hero-banner .cash_banner_product{     
	background: url('../images/product/cash-deposit-kiosk.jpg');
     /* makes image cover the whole div */
	background-size: cover;
    background-position: center;
}


#hero-banner .telecom_banner_product{     
	background: url('../images/product/telcom-kiosk.jpg');
     /* makes image cover the whole div */
	background-size: cover;
    background-position: center;
}



#hero-banner .audit_banner_product{     
	background: url('../images/product/audit-banner.jpg') no-repeat center 0px; 
    background-size: cover; /* makes image cover the whole div */
}

.text-impact{
	text-transform: uppercase;
}
#hero-banner .hero_banner_product::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
 
}

#hero-banner .hero_banner_product .container-fluid,
#hero-banner .hero_banner_product .row {
    position: relative;
    z-index: 2;
}

#hero-banner .hero_banner_product .row-height {
    height:50vh;
}

/* Our Clients Section */
.clients-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px; /* space between logos */
  flex-wrap: wrap; /* allows wrapping on small screens */
}

.client-logo img {
  height: 60px; /* uniform height for all logos */
  width: auto; /* keep aspect ratio */
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.client-logo img:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .clients-logos {
    gap: 30px;
  }
  .client-logo img {
    height: 50px;
  }
}
.btn:hover {
	background-color: #43BF4F !important;
 }
.title-color {
    font-weight: bold;
    color:rgba(25, 171, 34) !important;	
    
}
/* Buttons inline with card row */

.carousel-control-next, .carousel-control-prev {
  width: 5% !important;
}
.custom-prev,
.custom-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgb(79, 170, 40) !important;
  padding: 15px;
  border-radius: 50%;
  z-index: 10;
}

.custom-prev {
  left: 0; /* at left of cards */
  transform: translate(-50%, -50%); /* half outside */
}

.custom-next {
  right: 0; /* at right of cards */
  transform: translate(50%, -50%); /* half outside */
}

.img-product {
  width:550px !important;
  height:320px !important;
} 

.img-home-product {
  width:360px !important;
  height:220px !important;
  border:1px solid #cfcfcf !important;
} 

.img-benefit-category {
  width:300px !important;
  height:180px !important;
}