.home-slider{
                      max-width:1100px;margin:0 auto
                    }
                    .hamburg {
                      position: absolute;
                      width: 40px;
                      height: auto;
                      padding: .6rem;
                      background-color: var(--base-color);
                      border-radius: 10px;
                      z-index: 80;
                      box-shadow: 0px 0px 12px 1px rgba(255, 196, 0, 0.7);
                    }
                           
                    .ard-sosmed {
                      display: block;
                      pointer-events: auto ;
                      cursor: pointer;
                      position: fixed ;
                      bottom: 12%;
                      left: 10px;
                      font-family: "Times New Roman", sans-serif;
                      z-index: 79;
                    }
                  
                    .ard-sosmed ul {
                      margin: 0;
                      padding: 0;
                    }
                  
                    .ard-sosmed ul li {
                      position: absolute;
                      text-decoration: none;
                      list-style: none;
                      transform: translate(0, 0) rotate(360deg);
                      transition: all .5s ease;
                      opacity: 0;
                    }
                  
                    .ard-sosmed.open ul li:nth-child(1) {
                      transform: translateY(-130px);
                      transition-delay: .36s;
                      opacity: 1;
                    }
                  
                    .ard-sosmed.open ul li:nth-child(2) {
                      transform: translate(0px, -65px);
                      transition-delay: .32s;
                      opacity: 1;
                    }
                  
                    .ard-sosmed.open ul li:nth-child(3) {
                      transform: translate(0px, -195px);
                      transition-delay: .28s;
                      opacity: 1;
                    }
                  
                    .ard-sosmed.open ul li:nth-child(4) {
                      transform: translate(0px, -260px);
                      transition-delay: .24s;
                      opacity: 1;
                    }
                  
                    .ard-sosmed.open ul li:nth-child(5) {
                      transform: translate(0px, -325px);
                      transition-delay: .20s;
                      opacity: 1;
                    }
                  
                    .ard-sosmed.open ul li:nth-child(6) {
                      transform: translate(60px, -65px);
                      transition-delay: .16s;
                      opacity: 1;
                    }
    
        .ard-sosmed.open ul li:nth-child(7) {
                      transform: translate(60px, -130px);
                      transition-delay: .12s;
                      opacity: 1;
                    }
                    
        .ard-sosmed.open ul li:nth-child(8) {
                      transform: translate(60px, -195px);
                      transition-delay: .08s;
                      opacity: 1;
                    }
        
        .ard-sosmed.open ul li:nth-child(9) {
                      transform: translate(60px, -260px);
                      transition-delay: .04s;
                      opacity: 1;
                    }
      .ard-sosmed.open ul li:nth-child(10) {
                      transform: translate(60px, -325px);
                      transition-delay: .04s;
                      opacity: 1;
                    }            
                    .ard-sosmed ul li a img {
                      width: 100%;
                      height: auto;
                    }
                  
                    .ard-sosmed ul li a {
                      display: flex;
                      width: 55px;
                      height: 55px;
                      border: solid 2px var(--base-color);
                      border-radius: 10px;
                      justify-content: center;
                      align-items: center;
                      background-color: #000000;
                    }
                  
                    .bar1,
                    .bar2,
                    .bar3 {
                      width: 80%;
                      height: 5px;
                      background-color: #ffffff;
                      margin: 6px auto;
                      transition: .4s;
                      position: relative;
                      transform: translateY(-1px);
                    }
                  
                    .open .bar1 {
                      transform: translate(0, 10px) rotate(-225deg);
                    }
                  
                    .open .bar2 {
                      opacity: 0;
                      transform: translate(0, -6px) rotate(-225deg);
                    }
                  
                    .open .bar3 {
                      transform: translate(0, -12px) rotate(-315deg);
                    }
                  
                  
                    .ard-sosmed ul li div {
                      position: absolute;
                      transition: all .3s ease;
                      opacity: 0;
                      scale: .1;
                      font-family: "Times New Roman", sans-serif;
                      font-size: large;
                      background: rgba(0, 0, 0, 1);
                      color: #ffffff;
                      text-align: center;
                      text-wrap: nowrap;
                      border: 1px solid var(--base-color);
                      padding: 5px;
                      border-radius: 10px;
                    }
                  
                    .ard-sosmed ul li:hover div {
                      opacity: 1;
                      scale: 1;
                    }
                  
                    .ard-sosmed ul li:nth-child(1) div {
                      transform: translateY(-130px);
                    }
                  
                    .ard-sosmed ul li:nth-child(1):hover div {
                      transform: translate(70px, -40px);
                    }
                  
                    .ard-sosmed ul li:nth-child(2) div {
                      transform: translateY(-130px);
                    }
                  
                    .ard-sosmed ul li:nth-child(2):hover div {
                      transform: translate(70px, -40px);
                    }
                  
                    .ard-sosmed ul li:nth-child(3) div {
                      transform: translateY(-130px);
                    }
                  
                    .ard-sosmed ul li:nth-child(3):hover div {
                      transform: translate(70px, -40px);
                    }
                  
                    .ard-sosmed ul li:nth-child(4) div {
                      transform: translateY(-130px);
                    }
                  
                    .ard-sosmed ul li:nth-child(4):hover div {
                      transform: translate(70px, -40px);
                    }
                  
                    .ard-sosmed ul li:nth-child(5) div {
                      transform: translateY(-130px);
                    }
                  
                    .ard-sosmed ul li:nth-child(5):hover div {
                      transform: translate(70px, -40px);
                    }
                  
                    .ard-sosmed ul li:nth-child(6) div {
                      transform: translateY(-130px);
                    }
                  
                    .ard-sosmed ul li:nth-child(6):hover div {
                      transform: translate(70px, -40px);
                    }
                  
                    .attention {
                      position: relative;
                      -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%);
                      clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%);
                      width: 80px;
                      text-wrap: nowrap;
                      height: 30px;
                      margin-bottom: 5px;
                      left: 15px;
                      background-color: var(--base-color);
                      cursor: default;
                      color: #ffffff;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      padding-bottom: 10px;
                      opacity: 0;
                    }
                  
                    .whore {
                      animation: flicker .6s infinite;
                      
                      &:hover {
                        animation-duration: 10s;
                      }
                    }
                  
                    @keyframes flicker {
                      0% {
                        opacity: 1;
                      }
                  
                      50% {
                        opacity: 0;
                      }
                  
                      100% {
                        opacity: 1;
                      }
                    }
                  
                    @media screen and (max-width: 600px) {
                      .ard-sosmed {
                        bottom: 110px;
                        left:5px;
                      }
                    }