/* Service Section Animations */
.service {
  position: relative;
  overflow: hidden;
  padding: 50px 0rem;
  background: linear-gradient(45deg, #0a0a0a, #1a1a1a);
}
#scrollEndBtn {
  display: none;
  opacity: 0;
  /* background-color: rgb(68, 67, 67);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); */
  /* background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(50px); */
  /* position :absolute; */
  bottom: 0;
  left: 0%;
  width: 100%;
  height: 12rem;
  z-index: 100;
  border-radius: 5px;
  cursor: pointer;
  animation: FadeIn 0.2s ease-out forwards;
  margin-top: 2rem;
}
@keyframes FadeIn {
  from {
    opacity: 0;
    scale: 0;
  }
  to{
    opacity: 1;
    scale: 1;
  }
  
}
#scrollEndBtn a{
  text-decoration: none;
  color: hsl(38, 61%, 73%);
  font-size: 3.5rem;
  font-weight: 700;
}

.service .container {
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
  max-width: 90%;
  margin: auto;
  border-radius: var(--radius-md);
  /* height: 90vh; */
  padding: 5rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  overflow: hidden;
  /* border: 2px solid rebeccapurple; */
 
}
::-webkit-scrollbar { width: 5px; }

::-webkit-scrollbar-track { background-color: transparent; }

::-webkit-scrollbar-thumb { background: none; }

.service .section-subtitle,
.service .section-title {
  animation: fadeInDown 0.8s ease forwards;
  opacity: 0;
}
.service-header{
  width: 100%;
  position: sticky;
  top:0px;
  /* backdrop-filter: blur(20px); */
  margin:2rem auto ;
  /* border: 2px solid rebeccapurple; */
  border-bottom-left-radius:10%;
  border-bottom-right-radius:10%;
  z-index: 100;
  /* background-color: rgb(15,15,15); */
}

.service .section-subtitle {
  animation-delay: 0.2s;
}

.service .section-title {
  animation-delay: 0.4s;
}

.service .section-text {
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 0.6s;
  opacity: 0;
}

.service .grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  /* margin-top: 50px; */
  /* padding-top: 50px; */
}

.service-card {
  position: relative;
  /* overflow: hidden; */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* height: 90%; */
}
@media screen and (max-width: 575px)  {
.service .container{
  max-width: 90%;
  /* height: 100vh; */
  padding-bottom: 5rem;
}
.service {
  position: relative;
  overflow: hidden;
  padding: 0px 0rem;
  background: linear-gradient(45deg, #0a0a0a, #1a1a1a);
}
.service .grid-list {
  display: grid
;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 5px !important;
  /* padding-top: 50px; */
}
}


.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.service-card .card-banner {
  position: relative;
  overflow: hidden;
}

.service-card .img-cover {
  transition: transform 0.6s ease;
}

.service-card:hover .img-cover {
  transform: scale(1.1);
}

.service-card .card-content {
  padding: 2px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
}

.service-card .card-title a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.service-card .card-title a:hover {
  color: #eaa023;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.service .shape { display: block; }
.service .shape-1 {
  bottom: 0;
  left: 0;
}

.service .shape-2 {
  top: 0;
  right: 0;
}



.container,
:is(.service, .event) .container {
  width: 100%;
  margin-inline: auto;
  
}