*{margin: 0;padding: 0;box-sizing: border-box;font-family:  "Trirong", serif;letter-spacing: 0.01em;}
.main-container{width: 1300px;margin: auto;}  
/* header and nav bar */
header{background-color: black; display: flex; position: fixed;top: 0;width:1300px;height: 250px; padding: 15px;z-index: 5;}
.logo{flex: 20%;display: flex;justify-content: center;margin: 50px 0 30px;}
.logo img{width: 75px;height: 75px;}
.brand{flex: 10%;color: white;display: flex;align-items: center;justify-content: start; margin-top: -30px;}
.nav-bar{flex: 70%;display: flex;justify-content: space-evenly;align-items: center;margin-top: -32px;}
.nav-bar a{background-color: #025a35;color: white;height: 50px;width: 130px;text-align: center;line-height: 50px;text-decoration: none;font-size: 18px;letter-spacing: 1px;cursor: pointer;}
.nav-bar a:hover{background-color: white; color: #025a35;transition: .5s;}
.line{width: 1145px;height: 1px;background-color: white;position: absolute;top: 180px;margin-left: 90px;}
.overlay
{
    display: none;
}

.sm-bar {display: none;}

/* home section start here */
.main{margin-top: 250px;background-color: #1F2026;}
.main img{width: 1179px;height: 650px;margin: 60px; position: relative;opacity: 75%;}
.main h1{position: absolute;top: 350px;left: 370px; color: white;font-size: 50px; z-index: 1;}
.main h3, .main h1{word-spacing: 2px;}
.main h3{position: absolute;top: 425px;left: 480px; color: white;font-size: 35px; z-index: 1;}
.main p{position: absolute;top: 490px;left: 375px; color: white;font-size: 20px;width: 635px;text-align: center; z-index: 1;}
.main button{position: absolute;top: 585px;left: 580px;background-color: #025a35; color: white;border: none; font-size: 18px;padding: 15px; z-index: 1;border-radius: 30px;}
.main button:hover{background-color: white; color:#025a35;}
.main h5{position: absolute;top: 635px;left: 930px; color: white;font-size: 20px;z-index: 1;width: 200px;text-align: center;}
.main svg{position: absolute;top: 730px;left: 885px;z-index: 1;}

/* slideshow start here */
.mySlides {display: none;}
.slideshow-container {display: flex;max-width: 330px;position: absolute;top: 715px;left: 510px;z-index: 1;}
.mySlides img{width: 100px;height: 100px;margin-left: 10px;}

/* about section start here */
.ab-page{display: flex;background-color: #7C7C72;padding: 50px;}
.ab-page img{width: 600px;height: 500px;}
.ab-content{width: 600px;height: 500px;background-color: white;margin-left: 50px;}
.ab-content h3{font-size: 30px;font-style: italic;text-align: center;margin-top: 50px;}
.ab-content h4{font-size: 25px;font-style: italic;text-align: center;}
.ab-content p{font-size: 20px;font-style: italic;text-align: center;margin: 10px 15px;}
.star{display: flex;margin-top: 20px;}
.star svg{margin-right: 10px;margin-left: 30px;}
.star h5{font-style: italic;font-size: 18px;}
.star3 .default{margin-left: 25px;}
.mob-star{display: none;}

/* course section start here */
.cours-page{background-color: #1F2026;padding: 40px;color: white;text-align: center;}
.cours-page h3{font-size: 30px;}
.cours-page h4{font-size: 25px;}
.cours-page p{font-size: 20px;margin: 5px 0 30px;font-style: italic;text-align: center;}
.img-course{display: flex;justify-content: center;}
.img-course img{width: 350px;height: 260px;}
.img-course .frontend{margin-right: 50px;}

/* team section start here */
.team-page
{
    display: flex;
    flex-direction: column;
}

.team-page h3
{
    height: 35px;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
    margin: 45px 0 5px;
}

.team-page h4
{
    height: 28px;
    text-align: center;
    font-size: 24px;
    line-height: 28px;
}

.team-page p
{
    height: 98px;
    font-style: italic;
    font-size: 20px;
    line-height: 23px;
    text-align: center;
    margin: 15px 0 40px;
}

.team-img
{
    display: flex;
    justify-content: space-evenly;
}

.ti-child img
{
    width: 364px;
    height: 354px;
}

.ti-child h3
{
    margin-top: 5px;
}

/* student page start here */
.student
{
    height: 500px;
    background: #1F2026;
    margin-top: 40px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
}

.student h3
{
    height: 40px;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
    margin-top: 40px;
}

.student h4
{
    height: 30px;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    letter-spacing: 1px;
}

.student p
{
    height: 42px;
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    margin: 15px 0 8px;
    font-style: italic;
}

.student-slider
  {
    height: 250px;
    margin: auto;
    position: relative;
    width: 600px;
    overflow: hidden;
  }

  .sld-track
  {
    display: flex;
    width: calc(200px *10);
    animation: scroll 8s linear infinite;
  }

  .sld-track:hover{animation-play-state: paused;}

  @keyframes scroll {
    0%{transform: translateX(0);}
    100%{transform: translateX(calc(-200px * 5));}
  }

  .slide
  {
    height: 200px;
    width: 200px;
    display: flex;
    align-items: center;
    padding: 15px;
  }

  .slide img
  {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    transition: transform 1s;
  }

  .slide img:hover{transform: translateZ(20px);}

footer
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 229px;
    background: #080808;
    color: #FFFFFF;
}

footer h2
{
    height: 35px;
    font-size: 30px;
    line-height: 35px;
    text-align: center;
}

footer h3
{
    height: 30px;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    margin: 8px 0;
    letter-spacing: 3px;
}

footer p
{
    height: 45px;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
}


/* tab device design */
@media screen and (max-width:768px)
{

    .main-container{width: 768px;margin: auto;}     

/* header and nav bar */
    header{width:768px;height: 180px; padding: 1px;}

    .nav-bar{
        display: none;
    }
    
    .logo{flex: 5%;margin: 30px 30px 30px -230px;}
    .logo img{width: 70px;height: 70px;}
    .brand{flex: 5%;align-items: flex-start; margin: 53px 0 0 -230px;}
    .line{width: 695px;top: 130px;margin-left: 32px;}
    /* only small screen */
    .overlay {
        display: flex;
        height: 0%;
        width: 768px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.9);
        opacity: 99%;
        overflow-y: hidden;
        transition: 0.5s;
      }  
    
    .overlay .closebtn {
        position: absolute;
        top: 25px;
        right: 36px;
        font-size: 40px;
        text-decoration: none;
      }
    
      .overlay-content {
        position: relative;
        top: 10%;
        width: 768px;
        text-align: center;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
      }
    
      .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 30px;
        color: white;
        transition: 0.3s;
      }
    
      .overlay a:hover {
        color: #f1f1f1;
      }
    
      .sm-bar 
      {
          display: flex;
          font-size:30px;
          cursor:pointer; 
          left: 700px;
          top: 40px;
          position: absolute;
          color: white;
      }

/* home section start here */
.main{margin-top: 180px;}
.main img{width: 700px;height: 518px;margin: 34px;}
.main h1{top: 240px;left: 190px;font-size: 30px;}
.main h3{left: 265px;top: 290px;font-size: 22px;}
.main p{left: 160px;top: 335px;font-size: 18px;width: 460px;}
.main button{top: 450px;left: 290px;}
.main h5{top: 530px;left: 180px;width: 400px;}
.main svg{display: none;}

/* slideshow start here */
.slideshow-container {top: 585px;left: 215px;}
.mySlides img{width: 100px;height: 100px;margin-left: 10px;}

/* about section start here */
.ab-page{flex-direction: column; padding: 34px;}
.ab-page img{width: 700px;height: 495px;}
.ab-content{width: 700px;height: 397px;margin:30px 0px 0px;}
.ab-content h3{font-size: 24px;margin-top: 25px;}
.ab-content h4{font-size: 20px;}
.ab-content p{font-size: 18px;margin: 8px 50px;}
.star svg{margin-right: 20px;margin-left: 70px;}
.star h5{font-style: italic;font-size: 18px;}
.star3 .default{margin-left: 65px;}
.mob-star{display: none;}

/* course section start here */
.cours-page{padding: 30px;}
.cours-page h3{font-size: 24px;}
.cours-page h4{font-size: 20px;}
.cours-page p{font-size: 18px;}
.img-course img{width: 295px;height: 195px;}


/* team section start here */
.team-page h3
{
    font-size: 24px;
    margin: 30px 0 5px;
}

.team-page h4
{
    font-size: 20px;
}

.team-page p
{
    font-size: 18px;
    margin: 15px 0 10px;
}

.ti-child img
{
    width: 214px;
    height: 207px;
}

/* student page start here */

.student
{
    height: 400px;
}
.student h3
{
    font-size: 24px;
    margin-top: 30px;
}

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

footer
{
    height: 200px;
}

footer h2
{
    font-size: 24px;
}

footer h3
{
    font-size: 18px;
}

footer p
{
    font-size: 18px;
}
      
}


/* mobile device design */
@media screen and (max-width:320px)
{

    .main-container{width: 320px;margin: auto;}     

/* header and nav bar */
    header{width:320px;height: 130px;}

    .nav-bar{
        display: none;
    }
    
    .logo{margin: 30px 30px 30px -50px;}
    .logo img{width: 50px;height: 50px;}
    .brand{ margin: 45px 0 0 -80px;}
    .line{width: 260px;top: 100px;margin-left: 30px;}
    /* only small screen */
    .overlay {
        width: 320px;
      }  
    
    .overlay .closebtn {
        top: 30px;
        right: 40px;
      }
    
      .overlay-content {
        top: 8%;
        width: 320px;
        margin-top: 25px;
      }
    
      .sm-bar 
      {
          left: 265px;
          top: 30px;
      }

/* home section start here */
.main{margin-top: 127px;height: 500px;}
.main img{width: 320px;height: 500px;margin: 0px;}
.main h1{width: 300px; left: 10px;top: 150px;font-size: 22px;}
.main h3{left: 50px;top: 180px;font-size: 18px;margin-top: 5px;}
.main p{left: 3px;top: 220px;font-size: 18px;width: 315px;line-height: 25px;}
.main button{top: 350px;left: 75px;}
.main h5{top: 430px;left: 8px;font-size: 18px;width: 300px;}
.main svg{display: none;}

/* slideshow start here */
.slideshow-container {top: 490px;left: 23px;}
.mySlides img{width: 80px;height: 80px;margin-left: 8px;}

/* about section start here */
.ab-page{padding: 0px;}
.ab-page img{display: none;}
.ab-content{height: 700px;width: 320px; margin:0px;}
.ab-content h3{font-size: 24px;margin-top: 25px;}
.ab-content h4{font-size: 18px;width: 300px;margin-left: 8px;}
.ab-content p{font-size: 18px;margin: 5px 5px 8px;}
.star{display: none;}
/* just mobile screen  */
.mob-star{display: flex;flex-direction: column;}
.ms-cnt{display: flex;}
.ms-cnt svg{margin: 15px;}
.ms-cnt h5{margin: 15px 0;font-size: 19px;}

/* course section start here */
.cours-page{padding: 12px 12px 30px;}
.cours-page h3{font-size: 24px;}
.cours-page h4{font-size: 20px;}
.cours-page p{font-size: 18px;}
.img-course img{width: 134px;height: 80px;}
.img-course .frontend{margin-right: 15px;}

/* team section start here */
.team-page h3
{
    font-size: 24px;
    margin: 30px 0 5px;
}

.team-page h4
{
    font-size: 20px;
}

.team-page p
{
    font-size: 18px;
    margin: 10px 8px 30px;
}
.team-img{flex-direction: column;align-items: center;margin-top: 20px;}

.ti-child img
{
    width: 150px;
    height: 150px;
}

.ti-child h3, .ti-child h4{margin-top: -5px;}
.ti-child h4{margin-bottom: 10px;}

/* student page start here */
.student
{
    height: 380px;
}
.student h3
{
    font-size: 24px;
    margin-top: 30px;
}

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

.student-slider
  {
    height: 100px;
    width: 300px;
  }

  .sld-track
  {
    width: calc(100px *10);
  }

  @keyframes scroll {
    0%{transform: translateX(0);}
    100%{transform: translateX(calc(-100px * 5));}
  }

  .slide
  {
    height: 100px;
    width: 100px;
    padding: 8px;
  }

  .slide img
  {
    width: 90px;
    height: 90px;
  }

  .slide img:hover{transform: translateZ(20px);}

footer
{
    height: 200px;
}

footer h2
{
    font-size: 24px;
}

footer h3
{
    font-size: 18px;
}

footer p
{
    font-size: 18px;
}
      
}

/* mobile device design */
@media screen and (max-width:375px)
{

    .main-container{width: 375px;margin: auto;}
    
    /* header and nav bar */
    header{width:375px;height: 130px;}

    .nav-bar{
        display: none;
    }
    
    .logo{margin: 25px 30px 30px -80px;}
    .logo img{width: 50px;height: 50px;}
    .brand{ margin: 40px 0 0 -100px;}
    .line{width: 320px;top: 100px;margin-left: 25px;}
    /* only small screen */
    .overlay {
        width: 375px;
      }  
    
    .overlay .closebtn {
        top: 30px;
        right: 40px;
      }
    
      .overlay-content {
        top: 8%;
        width: 375px;
        margin-top: 25px;
      }
    
      .sm-bar 
      {
          left: 320px;
          top: 27px;
      }

/* home section start here */
.main{margin-top: 127px;height: 500px;}
.main img{width: 375px;height: 500px;margin: 0px;}
.main h1{left: 35px;top: 150px;font-size: 22px;}
.main h3{left: 80px;top: 180px;font-size: 18px;margin-top: 5px;}
.main p{left: 25px;top: 220px;font-size: 18px;width: 315px;line-height: 25px;}
.main button{top: 350px;left: 90px;}
.main h5{top: 430px;left: 30px;font-size: 18px;width: 300px;}
.main svg{display: none;}

/* slideshow start here */
.slideshow-container {top: 490px;left: 50px;}
.mySlides img{width: 80px;height: 80px;margin-left: 8px;}

/* about section start here */
.ab-page{padding: 0px;}
.ab-page img{display: none;}
.ab-content{height: 700px;width: 375px; margin:0px;}
.ab-content h3{font-size: 24px;margin-top: 25px;}
.ab-content h4{font-size: 18px;}
.ab-content p{font-size: 18px;margin: 5px 5px 8px;}
.star{display: none;}
/* just mobile screen  */
.mob-star{display: flex;flex-direction: column;}
.ms-cnt{display: flex;}
.ms-cnt svg{margin: 15px 15px 15px 25px;}
.ms-cnt h5{margin: 15px 0;font-size: 19px;}

/* course section start here */
.cours-page{padding: 12px 12px 30px;}
.cours-page h3{font-size: 24px;}
.cours-page h4{font-size: 20px;}
.cours-page p{font-size: 18px;}
.img-course img{width: 134px;height: 80px;}
.img-course .frontend{margin-right: 15px;}


/* team section start here */
.team-page h3
{
    font-size: 24px;
    margin: 30px 0 5px;
}

.team-page h4
{
    font-size: 20px;
}

.team-page p
{
    font-size: 18px;
    margin: 10px 8px 30px;
}
.team-img{flex-direction: column;align-items: center;margin-top: 20px;}

.ti-child img
{
    width: 150px;
    height: 150px;
}

.ti-child h3, .ti-child h4{margin-top: -5px;}
.ti-child h4{margin-bottom: 10px;}

/* student page start here */
.student
{
    height: 380px;
}
.student h3
{
    font-size: 24px;
    margin-top: 30px;
}

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

.student-slider
  {
    height: 100px;
    width: 300px;
  }

  .sld-track
  {
    width: calc(100px *10);
  }

  @keyframes scroll {
    0%{transform: translateX(0);}
    100%{transform: translateX(calc(-100px * 5));}
  }

  .slide
  {
    height: 100px;
    width: 100px;
    padding: 8px;
  }

  .slide img
  {
    width: 90px;
    height: 90px;
  }

  .slide img:hover{transform: translateZ(20px);}

footer
{
    height: 200px;
}

footer h2
{
    font-size: 24px;
}

footer h3
{
    font-size: 18px;
}

footer p
{
    font-size: 18px;
}
}