html {
  max-width: 100vw;
  overflow-x: hidden;
}

html, body {
  touch-action: pan-y;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    padding: 0;
    --main-color: rgb(126, 182, 228);
    --span-color: rgb(100, 211, 255);
}

body {
  background: url(../IMG/gplaypattern_@2X.png);
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background-attachment: fixed;
    /* background-color: rgb(243, 243, 243); */
    /* background-color: rgb(255, 255, 255); */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Jura', sans-serif;
  }
  @media (min-width: 360px), (max-width: 767px){
 .line1
  {
    position: absolute;
    background:#757F9A;
    width: 50%;
    height: 2px;
    margin-left: -25%;
    z-index: -1;
  }
  .line2
  {
    position: absolute;
    background: #D7DDE8;
    width: 85%;
    height: 2px;
    margin-top: 1px;
    margin-left: 15%;
    z-index: -1;
    box-sizing: border-box;
  }
  .h2_under-background
  {
    position: absolute;
    background: #ffffff;
    width: 85%;

    height: 47px;
    margin-left: 15%;
    z-index: -1;
    box-sizing: border-box;
  }
  .h2_under-background2
  {
    position: absolute;
    background: #ffffff;
    width: 20%;

    height: 70px;
    margin-left: 0;
    z-index: -2;
    box-sizing: border-box;
  }
    #box
    {
      
      position: absolute;
      top: 100%;
    }
}
  @media (min-width: 768px) {

    .h2_under-background
  {
    position: absolute;
    background: #ffffff;
    width: 85%;

    height: 85px;
    margin-left: 15%;
    z-index: -1;
    box-sizing: border-box;
  }
  .h2_under-background2
  {
    position: absolute;
    background: #ffffff;
    width: 20%;

    height: 90px;
    margin-left: 0;
    z-index: -2;
    box-sizing: border-box;
  }
    /*------------ General section ---------*/
    .line1
    {
        height: 3px;
    }
    .line2
    {
      margin-top: 2px;
        height: 3px;
    }
   #Skills
    {
      position: absolute;
      margin-top: 5%;
    }
    #box
{
  z-index: 12;
  position: absolute;
  top: 95%;
}
    
    #Contact
    {
        position: absolute;
      top: 480%;
    }
  }
  @media (max-width: 830px) and (orientation:landscape)
  {
    #box
{
  position: absolute;
  top: 110%;
}
  }

/* Fix background-attachment:fixed bug on Android WebView/mobile */
@media (max-width: 1024px) {
  body {
    background-attachment: scroll;
  }
}

/* Prevent swiper slides from causing horizontal scroll on mobile */
@media (max-width: 900px) {
  .Carousel,
  .swiper-container,
  .swiper-wrapper {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
}

/* === Wider mobile exception (e.g. Honor 200) ===
   Service cards: force single column on all phones ≤ 900px. */
@media (max-width: 900px) {
  .Service_section {
    width: 100%;
  }
  .service_container {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .service-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .service-wrapper .row {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .service-wrapper .row .service-card {
    max-width: 92vw;
    margin-left: auto;
    margin-right: auto;
  }
  .service-box {
    width: 92vw;
    max-width: 92vw;
  }
}