/***SERVICES****/




.services-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 20px; 
  padding: 20px; 
}

.services-card {
    width: 300px;
    height: 400px;
  background-color:#fde9ec;
  border-radius: 8px; 
  padding: 20px; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  text-align: center; 
}
.services-main-card{
    background-color:#fde9ec;
    width: 300px;
    height: 400px;
}

.services-heading{
    font-size: 3rem;
    padding: 2rem;
}
.service-description{
    font-size:1.6rem;
    padding:2rem;
}
.arrow-services{
    font-size: 3rem;
}
.arrow-services {
  font-family: 'Material Symbols Outlined', sans-serif; 
  font-size: 4rem !important; 
  color: #ef233c; 
  transition: transform 0.3s ease, color 0.3s ease; 
  cursor: pointer; 
text-align: center;
width: 300px;
margin: 0 auto !important;

}


.arrow-services:hover {
  color: #ff5733;
  transform: translateX(5px); 
}

.arrow-services {
  margin: 10px;
}

.services-span{
       font-family: 'Cedarville Cursive';
    color: #ef233c;
    font-weight: bolder;
}
.services-img {
  width: 100%;
  height: 200px; 
  object-fit: cover; 
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.services-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px;
  overflow-x: hidden; /* default for desktop */
}

/* Mobile: use horizontal scroll with flex */
@media (max-width: 768px) {
  .services-cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 20px;
    padding: 20px;
    scroll-behavior: smooth;
  }

  .services-card,
  .services-main-card {
    flex: 0 0 80%; /* or 300px for fixed width */
    min-width: 280px;
    max-width: 300px;
  }

  .services-img {
    height: 180px; /* Slightly smaller on mobile */
  }
}




/* *******************SERVUCES***************************** */
    #services
    {
  
        width: 100%;
        min-height:100vh;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         background:none;
    }
    .our-services
  {
    margin-bottom:2.2rem;
    margin-top:1rem;
    padding-top:2.2rem;
  }

    .services-grids {
        display: grid;
        grid-template-columns: repeat(3,1fr); 
        gap: 2rem; 
        row-gap: 5rem;
        padding: 2rem; 
        
        margin-bottom: 14rem;
    }
    
    .service-box {
        padding: 2rem;
        position: relative;
    }
    .service-box-child{
      position: absolute;
      top:10.5rem;
      left: 0;
    }
    
    .service-box-heading {
        font-size:2.2rem;
    }
    
    .service-box-text {
        padding: 2rem;
       
    }
    
    .view-more{
      position: absolute;
      top:35rem;
      left:35%;
    }
    .view-more-text{
      font-size: 1.8rem;
    }
    
    .services-grids > div {
        width: 30rem;
        height:30rem;
     
        border-radius:2.2rem;  
        padding: 2rem;
        text-align: center;
        box-shadow: inset 4px 4px 8px rgba(100, 100, 100, 0.4), inset -4px -4px 8px rgba(200, 200, 200, 0.7);

        /* box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1), -8px -8px 15px rgba(255, 255, 255, 0.7);   */
        transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; 
        opacity: 0.9;
        transform: scale(1);
    }
    
   
    .services-grids > div:hover {
        opacity: 1;
        transform: scale(1.05);
        box-shadow: inset 2px 2px 4px rgba(249, 167, 177, 0.4), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
    }
    
  
    @media (max-width: 768px) {
        .services-grids {
            grid-template-columns: repeat(2, 1fr); 
        }
    }
    
    @media (max-width: 480px) {
        .services-grids {
            grid-template-columns: 1fr; 
        }
    }
    


.service-box-heading{
color: #333;
}
.service-box-text{
  width: 30rem;
  height: auto;
font-size:1.4rem;
letter-spacing: 1px;
line-height: 1.6;
font-weight:600;
color: #333;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
              url(../corporate-car-rental.jpg) no-repeat center center / cover;
  z-index: 0;
}