@media screen and (max-width: 576px) {
  /* Responsive iframe for video cards */
  .custom-about-body iframe {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .custom-about-body {
    padding: 12px !important;
  }

  .img-thumbnail {
    width: 150px;
  }

  .logo img {
    width: 270px;
  }

  .nama h4 {
    font-size: 20px;
  }

  .nama h5 {
    font-size: 15px;
  }

  .name-card img {
    width: 110px;
    border-radius: 100%;
  }

  .core-card img {
    width: 160px;
    border-radius: 100%;
  }

  .dev-card img {
    width: 250px;
    border-radius: 100%;
  }

  #videoDivisi {
    width: 220px;
  }

  #vid1 {
    width: 400px; 
  }

  .toggleSlide {
    transform: translateX(-85px);
  }

  .initial {
    transform: translateX(-15px);
  }

  .buttonToggle {
    display: inline;
    margin-top: 8px;
    padding: 0px 8px;
  }

  .nav-item-item {
    display: none;
  }

  .offcanvas-body ul {
    list-style-type: none;
  }

  .offcanvas-body a {
    color: black;
  }

  .all-body-cover {
    margin-top: 200px;
  }

  .firstContainer {
    margin-top: -75px;
  }

  .waves {
    margin-top: 150px;
    margin-bottom: 70px;
  }

  .wavesss {
    margin-bottom: -25px;
  }

  .botWaves {
    margin-top: -5px;
  }

  .wavesContact {
    margin-bottom: -5px;
  }

  .subNameHeading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    padding-bottom: 0px;
  }

  .achive {
    margin-top: -350px;
    margin-bottom: 30px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .article-container-firstRow {
    width: 220px;
    height: 180px;
    overflow: hidden;
    position: relative;
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    text-align: center;
    margin: 0px auto;
  }

  .article-container-secondRow {
    width: 220px;
    height: 180px;
    overflow: hidden;
    position: relative;
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    text-align: center;
    margin: 0px auto;
  }

  .article-container-thirdRow {
    width: 220px;
    height: 180px;
    overflow: hidden;
    position: relative;
    font-family: "Sofia Sans Semi Condensed", sans-serif;
    text-align: center;
    margin: 0px auto;
  }

  .article-img-holder-firstRow {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.7s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 25px;
  }

  .article-img-holder-secondRow {
    width: 100%;
    height: 100%;
    transition: all 0.7s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 25px;
  }

  .article-img-holder-thirdRow {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.7s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 30px;
  }

  .article-img2-holder-firstRow {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.7s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 25px;
  }

  .article-img2-holder-secondRow {
    width: 100%;
    height: 100%;
    transition: all 0.7s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 25px;
  }

  .article-img2-holder-thirdRow {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.7s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    font-size: 30px;
  }

  .fourthContainer {
    margin-top: 370px;
    padding-bottom: 20px;
  }

  .fivethContainer {
    margin-top: 0px;
    padding-bottom: 20px;
  }

  .contactMe {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
  }
}