@font-face {
    font-family: 'myfont';
    src: url('../fonts/HacenTunisia.ttf');
    font-weight: normal;
    font-style: normal;
    
  }
main{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:center;
    margin-bottom: 3vw;
}

.seat{
    width: 30%;
    height: 36vw;
    margin-top: 3vw;
    padding: 1vw;
    box-shadow: 0 0 0.5vw rgba(0,0,0,0.5);
    border:0.1vw solid #000;
    display: flex;
    flex-direction: column;
    justify-self:center;
    align-items: center;
}

form{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-self:center;
    align-items: center;
    padding: 0.5vw;
}
.seat-input{
    width: 100%;
    height: 5vw;
    display: flex;
    justify-content:center;
    flex-direction: column;
    justify-self:center;
    align-items: center;
}


input,select,.section{
    width:100% ;
    height: 4vw;
    font-size: 1.2vw;
  font-family:'myfont';
    padding: 1vw;
    border:0.15vw solid #000;
    border-radius: 2vw;
    margin-top: 0.5vw;
}

.submit{
    font-weight: bold;
    color:#fff;
    background-color: #204289;
    margin-top:2vw;
    margin-bottom:1vw;
}

select{
    font-size: 1.2vw;
}

.divphone{
      width:100% ;
}

#country_code{
        width:30% ;
    height: 4vw;
    font-size: 1vw;
  font-family:'myfont';
    padding: 0.5vw;
    border:0.15vw solid #000;
    border-radius: 2vw;
    margin-top: 0.5vw;
}

#phone_number{
    width:69% ;
}



.seat h1{
    margin-top:2vw;
    margin-bottom:1vw;
    font-size: 2vw;
    color:#204289;
  font-family:'myfont';
}
.seat p{
    width:85% ;
    padding: 1vw;
    margin-bottom:1vw;
    font-size: 1.2vw;
    text-align: justify;
}

.seat img{
    width: 2vw;
    height: 2vw;
}

#name{
    background-image: url('../images/icons/study.gif');
    background-size: 2.2vw,2.2vw;
    background-repeat: no-repeat;
    background-position: 1vw center;
    padding-left: 0;
}

#phone_number{
    background-image: url('../images/icons/smartphone.gif');
    background-size: 2.2vw,2.2vw;
    background-repeat: no-repeat;
    background-position: 1vw center;
    padding-left: 0;
    text-align: right;
}


#phone_error{
    font-size:1vw;
  font-family:'myfont';
}





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

        main{
            margin-bottom: 6vw;
        }
        .seat{
            width: 60%;
            height: 70vw;
            margin-top: 6vw;
            padding: 2vw;

            box-shadow: 0 0 0.7vw rgba(0,0,0,0.5);
            border:0.1vw solid #000;
          
        }
        
        .seat-input{
            width: 100%;
            height: 10vw;
        }
        .seat input,select,.section{
            height: 8vw;
            font-size: 2.5vw;
            padding: 2vw;

            border:0.15vw solid #000;

            border-radius: 4vw;
            margin-top: 1vw;
        }

        
        
        .seat button{
            margin-top:4vw;
            margin-bottom:2vw;
        }
        
        .seat select{
            font-size: 2.5vw;
        }
        
        .seat h1{
            margin-top:4vw;
            margin-bottom:2vw;
            font-size: 4.2vw;
        }

        .seat p{
            width:85% ;
            padding: 2vw;
            margin-bottom:2vw;
            font-size: 2.5vw;
        }
        
        .seat img{
            width: 4vw;
            height: 4vw;
        }
        
        #name{
            background-size: 4.4vw,4.4vw;
            background-position: 2vw center;
            padding-left: 0;
        }
        
        #phone_number{
            background-size: 4.4vw,4.4vw;
            background-position: 2vw center;
            padding-left: 0;
        }



        #country_code{
    border-radius: 4vw;
    margin-top: 1vw;
            height: 8vw;
            font-size: 2.5vw;
            padding: 1vw;
}


#phone_error{
    font-size:2vw;
}



        
        


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

        .seat{
            width: 75%;
            height: 90vw;
            margin-top: 7vw;
            padding: 2.5vw;

            box-shadow: 0 0 0.7vw rgba(0,0,0,0.5);
            border:0.1vw solid #000;
          
        }
        
        .seat-input{
            width: 100%;
            height: 13vw;
        }
        .seat input,select,.section{
            height: 10vw;
            font-size: 3vw;
            padding: 2.5vw;

            border:0.15vw solid #000;

            border-radius: 5vw;
            margin-top: 1.25vw;
        }
        
        .seat button{
            margin-top:5vw;
            margin-bottom:2.5vw;
        }
        
        .seat select{
            font-size: 3vw;
        }
        
        .seat h1{
            margin-top:4vw;
            margin-bottom:2.5vw;
            font-size: 5.5vw;
        }

        .seat p{
            width:85% ;
            padding: 2.5vw;
            margin-bottom:2.5vw;
            font-size: 3vw;
        }
        
        .seat img{
            width: 5vw;
            height: 5vw;
        }
        
        #name{
            background-size: 5.5vw,5.5vw;
            background-position: 2.5vw center;
            padding-left: 0;
        }
        
        #phone_number{
            background-size: 5.5vw,5.5vw;
            background-position: 2.5vw center;
            padding-left: 0;
        }

     #country_code{
    border-radius: 5vw;
    margin-top: 1.5vw;
     height: 10vw;
     font-size: 3vw;
     padding: 1.8vw;
}

#phone_error{
    font-size:3vw;
}


    }