.section-hero .wrapper-container1 {
    width: 100%;
    max-width: 100vw;
    display: flex;
    justify-content: center;
    position: relative;          
}

.section-hero .wrapper1 {
    width: 100%;
    max-width: 100vw;
    position: relative;
    height: 83vh;
    /* border: 2px solid yellow; */
    z-index: 0;
}

#section-hero {
    position: relative;
    height: 100vh; 
    width: 100%;
    max-width: 100vw;
    opacity: 1;
    background-image: url('../img/hero.webp');
    background-size: cover;
    background-position-y: top;
    background-position: top center;
    overflow: hidden;
}

#social {
    position: absolute;
    /* display: flex; */
    color: black;
    z-index: 100000!important;
    bottom: 0%;
    left: 17.6vw;
}

#social .social-icon {
    height: 40px;
    margin-right: 1em;
    cursor: pointer;
}

#social .social-icon img {
    width: 100%;
    height: 100%;
}

#social ul {
    display: flex;
    margin: 0;
    padding: 0;
    z-index: 100000!important;
}

#social ul li {
    list-style: none;
    margin: 0 5px;
    height: 50px;
    width: 50px;
    color: #585452;
    border: 2px solid #585452;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    transition: all ease 0.3s;
}

#social ul li:hover {
    color: #000;
    background:  greenyellow;
    cursor: pointer;
}

/* Add media queries for responsiveness */
@media screen and (max-width: 1880px) {
  #social {
    left: 15vw;
  }
}
@media screen and (max-width: 1780px) {
  #social {
    left: 14vw;
  }
}
@media screen and (max-width: 1680px) {
  #social {
    left: 12vw;
  }
}
@media screen and (max-width: 1580px) {
  #social {
    left: 10vw;
  }
}
@media screen and (max-width: 1480px) {
  #social {
    left: 8vw;
  }
}

/* Add media queries for responsiveness */
@media screen and (max-width: 1400px) {
        .wrapper {
            width: 100%; /* Adjust width for tablets */
            /* border: 1px solid green; */
            /* height: 96vh; */
        }
        #social {
          left: 50%;
          transform: translateX(-50%);
        }
}
/* Add media queries for responsiveness */
@media screen and (max-width: 767px) {
        .wrapper {
            width: 90%; /* Adjust width for tablets */
            /* height: 96vh; */
        }
        .pageBg {
    opacity: 1;
    background-image: url('banner7.webp');
    background-size: cover;
    background-position: center;
    }

    #social {
      bottom: 2%;
    }

    #social ul li {
      background: #c3bcb8;
      background: rgba(195,188,184, 0.8);
      height: 36px;
      width: 36px;
    }

  }