.background-Services{
    /* background-image: url(../image/what.png); */
    background: url(../image/what.png) , rgba(8, 8, 8, 0.542);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#HeroServicesPage {
  margin-top: -200px;
  height: 105vh;
  display: flex;
  text-align: center;
  align-items: center;
  color: var(--scound);
  height: 105vh;
}

#HeroServicesPage-Content {
  width: 100%;
  margin-top: 320px;
}
.pageTitle{
  font-size: 56px;
  margin-bottom: 50px;
}
#HeroServicesPage-Content h1 span{
  font-size: 33px;
  color: var(--primum);
}
#HeroServicesPageEndContent {
  height: 33vh;
  align-items: end;
  text-align: center;
  width: 100%;
}
#HeroServicesPageEndContent h5{
  font-size: 16px;
}
.SpeaceBetween-S-Sections{
    margin-top: 160px;
}
.ServiceSection{
    padding-top: 40PX;
}
.Service-titel h3{
    color: var(--primum);
    font-size: 32px;
    font-weight: 900 !important;
    line-height: 20px;
}
.Service-content{
    max-width: 1180px;
}
.Service-content p{
    font-size: 26px;
    color: var(--scound);
}
.Service-Desc{
    max-width: 1350px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.218), rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.044), rgba(255, 255, 255, 0));
    backdrop-filter: blur(2px);
    padding: 25px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    width: 1350px;
    border: solid 1px #6f6f6f;
}
.Service-Desc p{
    font-size: 26px;
    color: var(--scound);
    padding-bottom: 0;
    margin-bottom: 0;
    font-weight: 100 !important;
}
.Service-img{
    margin-top: 30px;
}
.Service-img img{
    object-fit: cover;
    width: 1080px;
    border-radius: 48px;
}

.scoundServices{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-bottom: 50px;
}


/* ================= Responsive Design ================= */

/* Extra Small Devices (phones, <576px) */
@media (max-width: 575.98px) {
  #HeroServicesPage {
    margin-top: -80px;
    height: auto;
    flex-direction: column;
    padding: 20px 10px;
  }
  #HeroServicesPage-Content {
    margin-top: 80px;
  }
  .pageTitle {
    font-size: 26px;
    margin-bottom: 20px;
  }
  #HeroServicesPage-Content h1 span {
    font-size: 18px;
  }
  #HeroServicesPageEndContent h5 {
    font-size: 12px;
  }

  .SpeaceBetween-S-Sections {
    margin-top: 60px;
  }
  .Service-titel h3 {
    font-size: 22px;
    line-height: 28px;
  }
  .Service-content {
    max-width: 100%;
    padding: 0 10px;
  }
  .Service-content p {
    font-size: 16px;
    line-height: 1.6;
  }

  .Service-Desc {
    width: 100%;
    flex-direction: column;
    padding: 15px;
    border-radius: 20px;
  }
  .Service-Desc p {
    font-size: 16px;
    text-align: center;
  }

  .Service-img img {
    width: 100%;
    border-radius: 16px;
  }
}

/* Small Devices (tablets, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .pageTitle { font-size: 32px; }
  #HeroServicesPage-Content h1 span { font-size: 22px; }
  .Service-titel h3 { font-size: 24px; }
  .Service-content p { font-size: 18px; }
  .Service-Desc { width: 100%; padding: 20px; border-radius: 24px; }
  .Service-Desc p { font-size: 18px; }
  .Service-img img { width: 100%; border-radius: 24px; }
}

/* Medium Devices (small laptops, ≥768px and <1024px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .pageTitle { font-size: 40px; }
  #HeroServicesPage-Content h1 span { font-size: 26px; }
  .Service-titel h3 { font-size: 28px; }
  .Service-content { max-width: 90%; }
  .Service-content p { font-size: 20px; }
  .Service-Desc { width: 90%; padding: 25px; border-radius: 30px; }
  .Service-Desc p { font-size: 20px; }
  .Service-img img { width: 90%; border-radius: 32px; }
}

/* Large Devices (desktops, ≥1024px) */
@media (min-width: 1024px) {
  .pageTitle { font-size: 56px; }
  #HeroServicesPage-Content h1 span { font-size: 33px; }
  .Service-titel h3 { font-size: 32px; }
  .Service-content { max-width: 1180px; }
  .Service-content p { font-size: 26px; }
  .Service-Desc { width: 1350px; }
  .Service-Desc p { font-size: 26px; }
  .Service-img img { width: 1080px; border-radius: 48px; }
}