@import '/css/nav.css';
@import '/css/footer.css';
@import '/css/sidebar.css';

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Albert Sans';
}

input,
textarea{
  cursor: pointer;
}

::-webkit-scrollbar {
  display: none;
}

body{
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: auto;
  background-color: rgb(95, 95, 95);
  overflow: hidden;
  background-size: 100%;
}

.wrapper{
  margin: 0;
  position: absolute;
  top: 25px; 
  bottom: 40px;
  left: 50px;
  right: 50px;
  overflow-y: auto;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
  box-shadow: 0px 50px 20px -10px #000000c7;
}

#mob{
  display: none;
}

.section-3{
    height: calc(100vh - 65px);
    width: 100%;
    display: flex;
    background-color: rgb(34, 34, 34);
}

.section-container{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: 25vh 5vw;
}

.left{
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
}


.right{
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1.5px solid #ececec;
    align-items: start;
    justify-content: space-between;
    margin-left: 15%;
    padding: 5vh 2vw;
}

.up{
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
}

.down{
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
}

.section-container h2{
    color: #ececec;
    font-family: 'Urbanist';
    font-weight: 500;
    font-size: 2.2vh;
    z-index: 100000;
  }

  .section-container p{
    color: #d6d6d6;
    font-family: 'Quicksand';
    font-weight: 400;
    letter-spacing: 0.1vw;
    font-size: 1.8vh;
    line-height: 3vh;
    z-index: 1000000;
  }

  @media only screen and (max-width: 1080px) {

    #mob{
      display: unset;
    }

    #desk{
      display: none;
    }

    .section-container h2{
      color: #ececec;
      font-family: 'Urbanist';
      font-weight: 500;
      font-size: 2.2vh;
      z-index: 100000;
    }
  
    .section-container p{
      color: #d6d6d6;
      font-family: 'Quicksand';
      font-weight: 400;
      letter-spacing: 0.1vw;
      font-size: 1.8vh;
      line-height: 3vh;
      z-index: 1000000;
    }


    body{
      top: 0;
      left: 0;
      margin: 0;
      width: 100%;
      height: auto;
      background-color: rgb(95, 95, 95);
      overflow: hidden;
      background-size: 100%;
    }
    
    .wrapper{
      margin: 0;
      position: absolute;
      top: 0px; 
      bottom: 10vh;
      left: 0px;
      right: 0px;
      overflow-y: auto;
      overflow: -moz-scrollbars-none;
      scrollbar-width: none;
      box-shadow: 0px 50px 20px -10px #000000c7;
    }

    .section-3{
      height: 100%;
      width: 100%;
      display: flex;
  }

  .section-container{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: 25vh 2vw;
}

.right{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1.5px solid #ececec;
  align-items: start;
  justify-content: space-between;
  margin-left: 15%;
  padding: 5vh 2vw;
}


  }

  @media only screen and (max-width: 1080px) and (orientation: landscape) {
    .section-container h2{
      color: #ececec;
      font-family: 'Urbanist';
      font-weight: 500;
      font-size: 2.2vw;
      z-index: 100000;
    }
  
    .section-container p{
      color: #d6d6d6;
      font-family: 'Quicksand';
      font-weight: 400;
      letter-spacing: 0.1vh;
      font-size: 1.8vw;
      line-height: 3vw;
      z-index: 1000000;
    }
  
  }