@font-face {
                font-family: 'myfont';
                src: url('../fonts/HacenTunisia.ttf');
                font-weight: normal;
                font-style: normal;
              }

              body{
                font-family: 'myfont';
              } 
              
              

           


            #image-container {
              width: 100%;
              position: relative;
              background-color:#ffff;
              display:flex;
              justify-content: center;
              align-items: center;
              }

              
        #image-container img {
          width: 100%;
        height: auto;
        }

            
            #prev-btn, #next-btn {
              font-family: 'myfont';
              font-weight: bold;
              color: white;
              cursor: pointer;
              font-size: 1.5vw;
              padding: 1vw;
              height:3.8vw ;
              width: 3.8vw;
                background-color: rgba(0, 0, 0, 0.5);
                border: none;
                border-radius: 50%;
                justify-content: center;
              align-items: center;
            }
            
            #prev-btn {
                position: absolute;
                left: 1vw;
            }
            
            #next-btn {
                position: absolute;
                right: 1vw;
            }
       

              #next-btn:hover {
                background-color: #fff;
                color:#204289;
              }
            #prev-btn:hover {
              background-color: #fff;
              color:#204289;
          }

        #dots-container {
          width: 100%;
          background-color:#ffff;
          display: flex;
          justify-content: center;
          direction: rtl; 
          margin-top: 1vw;
        }
            
         

            .dot {
              width: 0.6vw;
              height:0.6vw;
              border-radius: 50%;
              background-color: #204289;
              border-width: 0px;
              margin: 0 1vw 1vw;
              display: inline-block;
              cursor: pointer;
            }
            .dot.active {
              background-color: #ed213a;}
            
          
            



        .video{
          width: 100%;
          height: auto;
          margin-top: 1vw ;
          margin-bottom: 0.5vw ;
        }

        iframe{
          width: 100%;
          height: 30vw;
        }

          
    /*mesage*/
      .mesage{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-self:center;
        align-items: center;
        margin-bottom: 1vw;
      
      }


      .mesage img{
       margin-right: 7%;
        width:10%;
        height: auto;
      }

      .mesage div{
        width:69%;
        margin-right:auto;
        margin-left:auto;
        background-color: #fff;
        padding: 1vw;
        text-align: center;
      }
       
    

      .mesage h1{
        width:100%;
        padding-bottom: 3vw;
        color: #204289;
        font-family: 'myfont';
        font-size: 2vw;
        text-align: center;
      }

      .mesage span{
        color: #ed213a;
      }
 

      .mesage p{
        width:100%;
        color: #000;
        font-family: 'myfont';
        font-size: 1vw;
        line-height: 1.5;
        margin-bottom: 2vw;
        text-align: justify;
      }


.mastar{
  font-size:1vw ;
}


/* information*/

      .info{
        width:97%;
        display: flex;
        flex-direction: column;
        justify-self:center;
        align-items: center;
       /* border:0.1vw solid #000;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);*/
        margin-top: 1vw;
        margin-right: 1.3vw;
        margin-left: 1.3vw;
      }

      .info_button{
        width:100%;
        height: 13vw;
        display: flex;
        flex-direction: row;
        gap:1px;
      }
        
        
      .info_button button{
        height: 100%;
        flex:1;
        background-color: #f7f7f7;
        color: #204289;
        font-family: 'myfont';
        font-size: 2vw;
        border: 0.2vw solid #fff;
        border-radius: 1vw;
        display: flex;
        flex-direction: column;
        justify-self:center;
        align-items: center;
        padding-top: 1vw;
        margin: 0.1vw;
      }
 

      .info_button button img{
        width: auto;
        height: 60%;
        margin-bottom:1vw;

      }

      .info_text{
        width:100%;
        height: auto;
        padding:1vw ;
        padding-top:1.5vw;
      }


      .info_text p{
        width:100%;
        color: #000;
        font-family: 'myfont';
        font-size: 1vw;
        line-height: 1.7;
        margin-bottom: 1vw;
        text-align: justify;
      }

      .info_button button.active {
        background-color: #204289;
        color: #ffffff;
      }

/*slides*/
      #container,#container2,#container3 {
        position: relative;
        background-color:#ffff;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-items:center;
        align-items: center;
        direction: rtl;
        margin-top: 2vw;
       padding-top: 2vw;
       background-color: #f7f7f7;

      }

   
      #container h1,#container2 h1,#container3 h1,.section_out h1{
        width:100%;
        height: auto;
        color: #204289;
        font-family: 'myfont';
        font-size: 2vw;
        text-align: center;
      }

  
      #container span,#container2 span,#container3 span{
        color: #ed213a;
      }
  
    
  
      .outer-div, .outer-div2, .outer-div3 {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: start;
        overflow: hidden;
      
      }
  
      .inner-div, .inner-div2, .inner-div3 {
        width: 100%;
        height: auto;
        transition: transform 0.5s ease;
        display: flex;
        flex-direction: column;
        align-items:center;
        justify-content:start;
                 flex: 0 0 33.333333%;
         text-align: center;
         margin-top: 1vw;
         padding: 2%;


      }
  
      .inner-div img, .inner-div2 img, .inner-div3 img {
        width: 100%;
        height: auto;
      }
  
      .inner-div h2 ,.inner-div2 h2,.inner-div3 h2 {
        font-size: 1.3vw;
        margin-top: 0.5vw;
        width:100%;
        height: auto;
        color: #204289;
        font-family: 'myfont';
        text-align: center;
        margin-bottom: 1vw;
      }

  
      .inner-div p, .inner-div2 p, .inner-div3 p {
        height: auto;;
        font-size: 1vw;
        margin-top: 0.5vw;
        padding-left: 1.2vw;
        padding-right: 1.2vw;
        width:100%;
        color: #000;
        font-family: 'myfont';
        text-align: justify;
        margin-bottom:2vw;
      }
  
      .inner-div button, .inner-div2 button, .inner-div3 button {
        font-size: 1.3vw;
        width:6vw;
        height: 3vw;
margin-bottom: 1vw;

       background-color: #ffff;
        color:#ed213a;
        border:0.1vw solid #ed213a;
        box-shadow: 0 0 1px rgba(0,0,0,0.5);
        font-family: 'myfont';
        font-size: 1.2vw;
        text-align: center;
      }



  .controls {
    position: absolute;
    top: 40%;
    left: 0.6%;
    right: 0.6%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
}

.controls button {
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 1vw;
    cursor: pointer;
    font-size: 1.5vw;
    color: #204289;
    border-radius: 50%;
    width: 3vw;
    height: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.3);
}

.controls button:hover {
    background-color: #204289;
    color: white;
}

    


 
      /*seat*/
      .seat-out{
        width: 100%;
        height: 20vw;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2vw;

      }
      .seat{
        width: 98%;
        height: 20vw;
        align-items: center;
        border:0.1vw solid #000;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        border-radius: 4px;
        display: flex;
        flex-direction: row;


        background-image: url('../images/seat.gif');
        background-position: center;
        background-size: cover;

      }

      .seat p{
        width: 80%;
        color: #fff;
        font-family: 'myfont';
        font-size: 1.2vw;
      padding-right:4vw ;
      }

      .seat button{
        width: 20%;
        height: 5vw;
        margin-left:2vw ;
        background-color:#ed213a;
        color:#fff;
        border:0.1vw solid #ed213a;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
        border-radius: 1vw;
        font-family: 'myfont';
        font-size: 1.2vw;
        text-align: center;
      }
    span{
        color: #ed213a;
        font-weight:  bold;
      }



      /*sections*/
      #container_section{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1vw;

        
      }
      .section_out{
        width: 98%;
       background-color: #fff;
        padding-top: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

      }

      .section_out h1{
        width:100%;
        color: #204289;
        font-family: 'myfont';
        font-size: 2vw;
        text-align: center;
      }

      .section{
       
        width: 98%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 1vw;
      }


     .section button{
        width:14.28% ;
        height: 13vw;
        background-color:transparent;
        border:0vw;
        border:0.1vw solid #f7f7f7;
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
        border-radius: 0.4vw;
        margin-right: 0.8vw;
        padding: 0.8vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

  
      .section button img{
        width: 50%;
        height: auto;
        margin-bottom: 0.8vw;
        
      }

      .section button span{
        width:100%;
        color: #204289;
        font-family: 'myfont';
        font-size: 1vw;
        text-align: center;
        margin-top: 0.8vw;
      }


/*teacher student*/
#suttea {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

}

      #suttea button , #teacher{
        width: 45vw;
        height: 25vw;
        border:0.1vw solid #fff;
        background-color: transparent;
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
        border-radius: 0.6vw;
        padding: 0.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 1vw 0 1vw;
        margin-top: 2vw;
      }

    
      #suttea button img,#teacher img{
        width:12vw;
        height:12vw;
        border-radius: 50%;
        border: 1px solid #204289;
        
      }
      #suttea button span,#teacher h5{
       color:#204289;
       font-size: 2vw;
       margin-bottom: 1.2vw;
       font-family: 'myfont';
        
      }
   
      #teacher h2,#suttea button h2{
        color: #000;
        font-size: 1.1vw;
        margin-top: 1vw;
        font-family: 'myfont';
         
       }
      #teacher p,#suttea button p{
        color: #000;
        font-size: 1vw;
        margin-top: 0.2vw;
        font-family: 'myfont';
       }
      


    

      /*numbers*/
      #container_number{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2vw;
        padding-bottom: 2vw;
        background-color: #f7f7f7;

      }

      .number_out{
        width: 98%;
        padding-top: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

      }

      .number_out h1{
        width:100%;
        color: #204289;
        font-family: 'myfont';
        font-size: 2vw;
        text-align: center;
      }

      .number{
        width: 98%;
        margin-top: 1vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .num{
        width: 24.5%;
        height: 20vw;
        border:0.1vw solid #fff;
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
        border-radius: 0.6vw;
        margin-right: 1vw;
        padding: 0.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }


      .num img{
        width: auto;
        height: 50%;
        
      }

      .num h1{
        width:100%;
        color: #204289;
        font-family: 'myfont';
        font-size: 1.3vw;
        text-align: center;
        margin-top: 1vw;
      }
      .num span{
        width:100%;
        color: #ed213a;
        font-family: 'myfont';
        font-size: 2vw;
        
        text-align: center;
        margin-top: 1vw;
      }

   
      
    

/*
#fdcf17
#204289
#ed213a
*/




@media screen and (max-width:768px) {
  #image-container {
    width: 100%;
    }


    .dots-container { 
      margin-top: 1.5vw;
    }
    .dot {
      width: 1vw;
      height:1vw;
    }
  .mesage{
    width:100%;
    display: flex;
    flex-direction: column;
    justify-self:center;
    align-items: center;
  
  }

  .mesage img{
  display: none;
  }

  .mesage div{
    width:95%;
    background-color: #fff;
   /* border:0.1vw solid #000;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);*/
    text-align: center;
  }
   


  .mesage h1{
    width:100%;
    padding-bottom: 1.7vw;
    color: #204289;
    font-family: 'myfont';
    font-size: 3vw;
    text-align: center;
  }
  .mesage span{
    color: #ed213a;
  }


  .mesage p{
    width:100%;
    color: #000;
    font-family: 'myfont';
    font-size: 2.5vw;
    line-height: 1.6;
    margin-bottom: 1vw;
    text-align: justify;
  }

  
.mastar{
  font-size:2.5vw ;
}


  .info_button{
    width:100%;
    height: 34vw;
    display: flex;
    flex-wrap: wrap;
  }

  
  .info_button button{
    height: 50%;
    flex-wrap:  100%;
    width: 50%;
    background-color: #f7f7f7;
    color: #204289;
    font-family: 'myfont';
    font-size: 2vw;
    border: 0.2vw solid #fff;
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    justify-self:center;
    align-items: center;
    padding-top: 1vw;
  }

  
  .info_button{
    display: flex;
    flex-direction:column;
    gap:0px;
    height: 42vw;
    flex-wrap: wrap;
    margin:0 2vw 0 2vw ;
    padding: 2vw;
    width:100%;
  }
    
    
  .info_button button{
    flex:1;
    height: 50%;
    flex-wrap:  100%;
    width: 50%;
    font-size: 3.2vw;
    border: 0.2vw solid #fff;
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    justify-self:center;
    align-items: center;
    padding: 1vw;
    background-color: #f7f7f7;
    color: #204289;
    font-family: 'myfont';
    padding-top: 1vw;
    margin: 0.0vw;
  }
    

  .info_text{
    width:100%;
    height: auto;
    padding:2vw ;
    padding-top:1vw;
  }


  .info_text p{
    width:100%;
    color: #000;
    font-family: 'myfont';
    font-size: 2.5vw;
    line-height: 1.7;
    margin-bottom: 1vw;
    text-align: justify;
  }

  .inner-div, .inner-div2, .inner-div3 {
 
       flex: 0 0 50%;
       padding: 3%;
    
  
  }

 
  #container h1,#container2 h1,#container3 h1,.section_out h1{
    font-size: 3vw;
  }

 
  .outer-div, .outer-div2, .outer-div3 {
   
    margin-top: 2vw;
    
  }

  .inner-div img, .inner-div2 img, .inner-div3 img {
    width: 100%;
    height:auto;
  }

  .inner-div h2 ,.inner-div2 h2,.inner-div3 h2 {
    font-size: 3vw;
    margin-bottom: 2vw;
  }


  .inner-div p, .inner-div2 p, .inner-div3 p {
    font-size: 2.5vw;
    padding: 0 2vw 0 2vw;
  }

  .inner-div button, .inner-div2 button, .inner-div3 button {
    font-size: 2vw;
    width:10vw;
    height: 4vw;

  }




  .controls {
    left: 0.8%;
    right: 0.8%;
}

.controls button {
    font-size: 3vw;
    width: 5%;
    height: 5vw;
}



      /*seat*/
      .seat-out{
        width: 100%;
        height: 25vw;
        margin: 3vw 0 3vw 0;

      }
      .seat{
        width: 95%;
        height: 25vw;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
      }

      .seat p{
        width: 100%;
        text-align: center;
        font-size: 3vw;
        line-height: 1.5;
      }

      .seat button{
        width: 40%;
        height: 6vw;
        margin-top:3vw ;
        border-radius: 4px;
        font-size: 2.5vw;
      }

         /*sections*/
         #container_section{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 1vw;
        }

        .section_out{
          width: 98%;
         background-color: #fff;
          padding-top: 1vw;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
  
        .section_out h1{
          width:100%;
          color: #204289;
          font-family: 'myfont';
          font-size: 3vw;
          text-align: center;
        }
  
        .section{ 
          width: 95%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          justify-content: space-between;
        }
  
  
       .section button{
          width:31% ;
          height: 26vw;
          background-color:transparent;
          border:0vw;
          border:0.1vw solid #f7f7f7;
          box-shadow: 0 0 2px rgba(0,0,0,0.5);
          border-radius: 0.4vw;
          margin: 1vw;
          padding: 1vw;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
  
     
  

        .section button span{
          width:100%;
          color: #204289;
          font-family: 'myfont';
          font-size: 2.5vw;
          text-align: center;
          margin-top: 0.8vw;
        }

              /*numbers*/
      #container_number{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2vw;
        padding-bottom: 2vw;
        background-color: #f7f7f7;

      }

      .number_out{
        width: 98%;
        padding-top: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

      }

      .number_out h1{
        width:100%;
        color: #204289;
        font-family: 'myfont';
        font-size: 3vw;
        text-align: center;
      }

      .number{
        width: 98%;
        margin-top: 1vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
      }


      .num{
        width: 46%;
        height: 35vw;
        border:0.1vw solid #fff;
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
        border-radius: 0.6vw;
        padding: 0.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 0;
        margin-bottom: 0;
        margin: 1vw; 
      }
      
      
     
      .num img{
        width: auto;
        height: 65%;
        
      }

      .num h1{
        width:100%;
        color: #204289;
        font-family: 'myfont';
        font-size: 2.5vw;
        text-align: center;
        margin-top: 1vw;
      }
      .num span{
        width:100%;
        color: #ed213a;
        font-family: 'myfont';
        font-size: 2.5vw;
        
        text-align: center;
        margin-top: 1vw;
      }



      
/*teacher student*/
#suttea {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

      #suttea button , #teacher{
        width: 80vw;
        height: 50vw;
        border:0.1vw solid #fff;
        background-color: transparent;
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
        border-radius: 0.6vw;
        padding: 0.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 1vw 0 1vw;
        margin-top: 2vw;
      }

    
      #suttea button img,#teacher img{
        width:30vw;
        height:30vw;
        border-radius: 50%;
        border: 1px solid #204289;
        
      }
      #suttea button span,#teacher h5{
       color:#204289;
       font-size: 3vw;
       margin-bottom: 1.2vw;
       font-family: 'myfont';
        
      }
   
      #teacher h2,#suttea button h2{
        color: #000;
        font-size: 2.5vw;
        margin-top: 1vw;
        font-family: 'myfont';
         
       }
      #teacher p,#suttea button p{
        color: #000;
        font-size: 2.5vw;
        margin-top: 0.2vw;
        font-family: 'myfont';
       }
      

       .video{
        width: 100%;
        height: auto;
        margin-top: 2vw ;
        margin-bottom: 0.5vw ;
      }
  
      iframe{
        width: 100%;
        height: 50vw;
      }

       }

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

  #image-container {
    width: 100%;

    }

    .dots-container { 
      margin-top: 1.5vw;
    }

    .dot {
      width: 1vw;
      height:1vw;
    }

    .video{
      width: 100%;
      height: auto;
      margin-top: 2vw ;
      margin-bottom: 0.5vw ;
    }

    iframe{
      width: 100%;
      height: 50vw;
    }

  .mesage{
    width:100%;
    display: flex;
    flex-direction: column;
    justify-self:center;
    align-items: center;
  }

  .mesage img{
display: none;
  }

  .mesage div{
    width:95%;
    background-color: #fff;
   /* border:0.1vw solid #000;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);*/
    text-align: center;
  
  }
   


  .mesage h1{
    width:100%;
    padding-bottom: 2vw;
    color: #204289;
    font-family: 'myfont';
    font-size: 4vw;
    text-align: center;
  }
  .mesage span{
    color: #ed213a;
  }


  .mesage p{
    width:100%;
    color: #000;
    font-family: 'myfont';
    font-size: 3vw;
    line-height: 1.6;
    margin-bottom: 0.6vw;
    text-align: justify;
  }

  
.mastar{
  font-size:3vw ;
}

  .info_button{
    display: flex;
    flex-direction:column;
    gap:0px;
    height: 42vw;
    flex-wrap: wrap;
    margin:0 2vw 0 2vw ;
    padding: 2vw;
    width:100%;
  }
    
    
  .info_button button{
    flex:1;
    height: 50%;
    flex-wrap:  100%;
    width: 50%;
    font-size: 3.5vw;
    border: 0.2vw solid #fff;
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    justify-self:center;
    align-items: center;
    padding: 1vw;
    background-color: #f7f7f7;
    color: #204289;
    font-family: 'myfont';
    padding-top: 1vw;
    margin: 0.0vw;
  }
    

  .info_text{
    width:100%;
    height: auto;
    padding:2vw ;
    padding-top:1vw;
  }


  .info_text p{
    width:100%;
    color: #000;
    font-family: 'myfont';
    font-size: 3vw;
    line-height: 1.7;
    margin-bottom: 1vw;
    text-align: justify;
  }


  .outer-div, .outer-div2, .outer-div3 {
    margin-top: 0vw;
    
  }

               .inner-div, .inner-div2, .inner-div3 {
                width: 100%;
                   flex: 0 0 100%;
                   padding: 4%;
               
              }
            
              #container,#container2,#container3 {
                padding-top: 2vw;
                
                
            
              }

              

            
              #container h1,#container2 h1,#container3 h1,.section_out h1{
                font-size: 4vw;
              }
            
            
            
              .inner-div img, .inner-div2 img, .inner-div3 img {
                margin-top: 0.5vw;
              }
            
              .inner-div h2 ,.inner-div2 h2,.inner-div3 h2 {
                font-size: 3.5vw;
                margin-bottom: 3vw;
              }
            
            
              .inner-div p, .inner-div2 p, .inner-div3 p {
                padding: 0 7vw 0 7vw;
                font-size: 3vw;
              }
            
              .inner-div button, .inner-div2 button, .inner-div3 button {
                font-size: 2.8vw;
                width:12vw;
                height: 5vw;
              }



              .controls {
                left: 1%;
                right: 1%;
            }
            
            .controls button {
                font-size: 5.5vw;
                width: 7%;
                height: 7vw;
            }

      /*seat*/
      .seat-out{
        width: 100%;
        height: 25vw;
        margin: 3vw 0 3vw 0;
      }
      .seat{
        width: 95%;
        height: 25vw;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
      }

      .seat p{
        width: 100%;
        text-align: center;
        font-size: 3vw;
        line-height: 1.5;
      }

      .seat button{
        width: 40%;
        height: 6vw;
        margin-top:3vw ;
        border-radius: 4px;
        font-size: 2.8vw;
      }


      /*sections*/
      #container_section{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1vw;

        
      }
      .section_out{
        width: 98%;
       background-color: #fff;
        padding-top: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

      }

      .section_out h1{
        width:100%;
        color: #204289;
        font-family: 'myfont';
        font-size: 4vw;
        text-align: center;
      }

      .section{ 
        width: 95%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        justify-content: space-between;
      }


     .section button{
        width:47% ;
        height: 30vw;
        background-color:transparent;
        border:0vw;
        border:0.1vw solid #f7f7f7;
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
        border-radius: 0.4vw;
        margin: 1.2vw;
        padding: 0.8vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .section button:nth-child(even){
        margin-right: 0;
      }

           
    


      .section button span{
        width:100%;
        color: #204289;
        font-family: 'myfont';
        font-size: 3vw;
        text-align: center;
        margin-top: 0.8vw;
      }


      /*numbers*/
      #container_number{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2vw;
        padding-bottom: 2vw;
        background-color: #f7f7f7;

      }

      .number_out{
        width: 100%;
        padding-top: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

      }

      .number_out h1{
        width:100%;
        color: #204289;
        font-family: 'myfont';
        font-size: 4vw;
        text-align: center;
      }

      .number{
        width: 98%;
        margin-top: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
      }


      .num{
        width: 85%;
        height: 40vw;
        border:0.1vw solid #fff;
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
        border-radius: 0.6vw;
        padding: 0.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-right: 0;
        margin-bottom: 0;
        margin: 1vw; 
      }
      
      
     
      .num img{
        width: auto;
        height: 67%;
        
      }

      .num h1{
        width:100%;
        color: #204289;
        font-family: 'myfont';
        font-size: 3vw;
        text-align: center;
        margin-top: 1vw;
      }
      .num span{
        width:100%;
        color: #ed213a;
        font-family: 'myfont';
        font-size: 3vw;
        
        text-align: center;
        margin-top: 1vw;
      }


          
/*teacher student*/
#suttea {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

      #suttea button , #teacher{
        width: 80vw;
        height: 65vw;
        border:0.1vw solid #fff;
        background-color: transparent;
        box-shadow: 0 0 2px rgba(0,0,0,0.5);
        border-radius: 0.6vw;
        padding: 0.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 1vw 0 1vw;
        margin-top: 2vw;
      }

    
      #suttea button img,#teacher img{
        width:40vw;
        height:40vw;
        border-radius: 50%;
        border: 1px solid #204289;
        
      }
      #suttea button span,#teacher h5{
       color:#204289;
       font-size: 4vw;
       margin-bottom: 1.2vw;
       font-family: 'myfont';
        
      }
   
      #teacher h2,#suttea button h2{
        color: #000;
        font-size: 3vw;
        margin-top: 1vw;
        font-family: 'myfont';
         
       }
      #teacher p,#suttea button p{
        color: #000;
        font-size: 3vw;
        margin-top: 0.2vw;
        font-family: 'myfont';
       }
      
    
              }