index.css

* {
    margin: 0px 0px;
  }

  body {
    font-family: 'Avenir Next LT Pro', sans-serif;
    max-width: 1280px;
    margin: auto;
  }

  @media screen and (min-width: 768px) {
    .navbar-mobile {
      display: none;
    }
    
    .img-mobile {
      display: none;
    }




/* Nav-bar Desktop */
    .navbar-desktop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 64px;
      
      ;
    }
    .navbar-logo {
      display: inline-flex;
      margin: 0px 0px 0px 24px;
    }

    .navbar-logo .logo-text {
      display: inline-flex;
      align-items: center;
    }

    .navbar-logo .logo-text .text-bold{
      font-weight: 700;
    }

    .navbar-desktop .navbar-name {
      display: flex;
      justify-content: space-between;
      margin: 0px 24px 0px 0px;
      column-gap: 16px;
    }




/* Container-1 */
    .container-1 {
      display: flex;
      align-items: center;
      padding: 32px 24px;
      background-color: #d7d7d7;
    }

    .container-1 img {
      width: 60%;
    }

    .banner-text {
      width: 40%;
      margin-left: 24px;
    }

    .banner-text button {
      width: 100%;
      color: white;
      background-color: #4a4a4a;
      border: unset;
      padding: 8px 0px;
    }




/* Container-2 */

    .container-2 {
      display: flex;
    }

    .container-2 .left {
      flex-direction: column;
      padding: 32px 24px;
      background-color: white;
      width: 60%;

    }

    .container-2 .left img {
      width: 100%;
      display: flex;
    }

    .container-2 .left h2 {
      margin-bottom: 24px;
      margin-top: 32px;
    }

    .container-2 .left .container-foot {
      justify-content: end
    }

    .right {
      width: 40%;
      display: flex;
      flex-direction: column;
      margin-top: 32px;
      margin-bottom: 32px;
    }

    .right .orientation-date {
      display: inline-flex;
    }

    .right .our-campus {
      display:inline-flex;
    }

    .right .our-guest {
      display:inline-flex;
      background-color: #d7d7d7;
    } 

    #img-desktop1 {
      width: 35%;
      margin: 0px 16px 16px 16px;
      
    }
    #img-desktop2 {
      width: 35%;
      margin: 16px;
      
    }
    #img-desktop3 {
      width: 35%;
      margin: 16px;
      
    }

    .text-container2-right {
      display: flex;
      width: 65%;
      flex-direction: column;
      justify-content: center;
    }




  /*! Container-3 */

    .container-3 {
      padding: 32px 72px;
      background-color: #d7d7d7;
    }

    .container-3 .start {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 32px;
      font-weight: 700;
    }
  
    .container-3 .learning-content {
      display: flex;
      column-gap: 32px;
      row-gap: 32px;
      flex-wrap: wrap;
    }

    .container-3 .learning-box {
      background-color: #fff;
      width: 30%;
      flex-grow: 1;
    
    }

    .container-3 img {
      width: 100%;
      height: auto;
    }

    .container-3 .learning-box h2 {
      margin: 16px 16px 8px 16px;
    }

    .container-3 .learning-box .course {
      margin: 8px 16px 8px 16px;
    }

    .container-3 .learning-box .course-text {
      margin: 8px 16px 24px 16px;
    }


   /*! Container-4 */
    .container-4 {
      margin: 32px 24px 32px 24px;
      background-color: white;
    }

    .container-4 .thesis {
      text-align: center;
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 32px;
    }

    .container-4 .left {
    
      width: 60%;
    }

    .container-4 .the-box {
      display: flex;
    }

    .container-4 .the-box .left video {
      width: 100%;
    }

    .container-4 .the-box .left h2 {
      margin-top: 24px;
      margin-bottom: 8px;
    }

    .container-4 .the-box .left p {

    } 

    .container-4 .the-box .right {
      display: inline-flex;
      width: 40%;
      margin: 0px 0px 0px 24px;
    }

    .container-4 .the-box .right .text-container-4-right {
      display: inline-flex;
      width: 100%;
      align-items: center;
    }

    #text-container-4-right-top {
      background-color: #d7d7d7;
    }

    .container-4 .the-box .right img {
      width: 35%;
      margin: 16px;
    }

    .container-4 .the-box .right .text-top {

    }

    .container-4 .the-box .right .text-top h2 {

    }

    .container-4 .the-box .right .text-top p {

    }

    .container-4 .the-box .right .text-buttom {

    }

    .container-4 .the-box .right .text-buttom h2 {

    }

    .container-4 .the-box .right .text-buttom p {

    }

    .foot {
      border-top: 1px solid #dae2e2d6;
      background-color: white;
      padding: 16px 24px 38px 24px;
      display: flex;
      justify-content: space-between;
      font-weight: 400;

    }
    .foot .foot-right {
      display: inline-flex;
      column-gap: 16px;
      
    }
  }