*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    font-family: "Handlee", cursive;   
    font-weight: 800;
    font-style: normal;
    color: whitesmoke;
}
body{
    background-color: #152089;
}

/*--------nav----------*/
.nav-bar{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 120px;
    background-color: #0C134F;
    box-shadow: -5px -5px 30px 5px #000000;
    position: fixed;
    top: 0;
    z-index: 9000;
}
.nav-left{
    display: flex;
    align-items: center;
    width: 50%;
    height: 120px;
}
.logo-img{
    width: 28%;
    height: 120px;
    position: relative;
}

.brand-name{
    text-align: center;
    font-size: 25px;
    margin-top: -10px;
}
.nav-right{
    display: flex;
    width: 100%;
    height: 120px;
    justify-content: right;
    align-items: center;
}

.dropdown-menu{ 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10%;
    height: 90px;
    margin-right: 30px;
}

.dropdown-btn{
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.popup{
  display: none; /* Oculto por defecto */
  position: absolute;
  bottom: 100%; /* Posiciona el popup encima del texto */
  transform: translateX(-20%); /* Centra el popup horizontalmente */
  background-color: #0C134F;
  top:70px;
  z-index: 1; /* Asegura que el popup esté encima */
  height: 250px;
  width: 300px;
  justify-content: center;
  align-items: center;
  box-shadow: -5px 5px 30px -5px #000000;
}
.dropdown-menu:hover .popup {
  display: flex; /* Muestra el popup al pasar el cursor */
}
.image-text-content{
   display: flex;
   display: block;
   width: 300px;
   height: 250px;
}
.image-text-content p{
    margin-top: 50px;
    text-align: center;
    font-size: 25px;
}
.flag-text-1{
    display: flex;
    align-items: center;
    margin: 40px auto;
}

.flag-text-1 p{
    text-align: center;
    font-size: 25px;
}
.flag{
    margin-left: 20px;
    border-radius: 100%;
    width: 50px;
    height: 50px;
}
.lang-b{
    text-decoration: none;
    margin-left: 30%;
    font-size: 25px;
    color: whitesmoke;
}

.abrir-menu, .cerrar-menu{
    display: none;
}

/*--------main-content----------*/
.main-content{
    display: flex;
    display: block;
    width: 100%;
    height: 700vh; 
    margin-top: 100px;
    position: relative;
}
.content-container{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 600px;
    margin-top: 100px;  
    background-image: url(../Assets/images/studying.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.text-container{
    display: flex;
    margin-top: 90px;
    margin-right: 20px;
    align-items: center;
    width: 50%;
    height: 300px;
    margin-left: auto;
}
.text-container h1{
  font-size: 28px;
  white-space: pre-line;
}
.spanish-text-container{
    display: flex;
    margin-top: 90px;
    margin-right: 40px;
    align-items: center;
    width: 40%;
    height: 50px;
    margin-left: auto;
}
.spanish-text-container h1{
    font-size: 25px;
}

.English-text-container{
    display: flex;
    margin-top: 90px;
    margin-right: 20px;
    align-items: center;
    width: 50%;
    height: 300px;
    margin-left: auto;
}
.English-text-container h1{
  font-size: 28px;
  white-space: pre-line;
  margin-top: -100px;
}
.offers-container{
    display: flex;
    display: block;
    width: 100%;
    height: 900px;
}
.offers-title-container{
    display: flex;
    width: 100%;
    height: 100px;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}
.title-h1{
    text-align: center;
    margin-top: 50px;
   
    
}
.boxes-container{
    display: flex;
    width: 100%;
    height: 400px;
}
.boxes-container2{
    display: flex;
    width: 100%;
    height: 400px;
}
.box-left, .box-center1, .box-center2,  .box-right{
    display: flex;
    display: block;
    width: 350px;
    height: 320px;
    margin-left: 25px;
    margin-right: 20px;
    border-radius: 20px;
}
.box-left h1, .box-center1 h1, .box-center2 h1, .box-right h1{
    color: whitesmoke;
    text-shadow: 15px -5px 30px 5px #000000;
    font-size: 24px;
    text-align: center;
}
.images{
    margin-left: 10%;
    width: 85%;
    height: 50%;
    margin: 20px;
    border-radius: 25px;
}
.box-left p, .box-center1 p, .box-center2 p,  .box-right p{
    font-size: 18px;
    text-align: center;
    text-align: justify;
    letter-spacing: -0.03rem;
}
.team-container{
    display: flex;
    display: block;
    width: 100%;
    height: 500px;
   background-image: url(../Assets/images/editedbgd.png);
    background-repeat: no-repeat;
    background-position: center ;
   background-size: cover;
}
.teams-boxes-container{
    display: flex;
    width: 100%;
    height: 400px;
}
.team-cards{
    display: flex;
    width: 100%;
    height: 400px; 
}
.team-boxes{
   display: flex;
    display: block;
    width: 200px;
    height: 320px;
    border-radius: 20px;
    margin-left: 45px;
}
.team-images{
    margin-left: 25%;
    width: 60%;
    height: 35%;
    margin: 40px;
    border-radius: 100%;
}
.team-boxes h1{
    font-size: 20px;
    text-align: center;
    font-weight: 900;
}
.team-boxes p{
    font-size: 15px;
    text-align: center;
}

.courses-container{
    display: flex;
    display: block;
    width: 100%;
    height: 500px;
}
.courses-container2{
    display: flex;
    display: block;
    width: 100%;
    height: 500px;
}
.courses-title-container{
    display: flex;
    width: 100%;
    height: 100px;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
   
}
.boxes-container{
    display: flex;
    width: 100%;
    height: 400px;
}
.box-left a, .box-center1 a{
    font-size: 18px;
    color: deepskyblue;
    text-decoration: none;
    cursor: pointer;
}
.boxes-container2{
    display: flex;
    width: 100%;
    height: 400px;
}
.boxes-container3{
    display: flex;
    width: 100%;
    height: 400px;
}

.modal-container{
    min-width: 100%;
    min-height: 99.99vh;
   background-color: #0c134fdf;
   border: none;
}

.modal-popup-content{
    position: center;
    display: flex;
    display: block;
    margin-top: 50px;
    width: 100%;
    height: 99.99vh;
    position: fixed;
}
.modal-button{
    background: none;
    border: none;
    text-decoration: none;
    float: right;
    font-size: 25px;
    margin-top: 25px;
    margin-right: 30px;
    color: whitesmoke;
    cursor: pointer;
    outline: none;
}
.modal-levels-title h1{
    text-align: center;
    color: whitesmoke;
}
.modal-levels{
    display: flex;
    margin-top:40px;
    justify-content: space-between;
    width: 100%;
    height: 400px;
}
.level-box-left{
    display: flex;
    display: block;
    width: 30%;
    height: 400px; 
    background-color: #0C134F;
    border-radius: 25px;
    margin-left: 20px;
    margin-right: 20px;
}
.level-box-left h2{
    margin-top: 20px;
    text-align: center;
    color: whitesmoke;
}
.level-box-left p{
    margin-left: 10%;
    white-space: pre-line;
    color: whitesmoke;
}
.buy-button{
    width: 30%;
    height: 40px;
    margin-top: 40px;
    margin-left: 35%;
    background-color: aquamarine;
    border: none;
    border-radius: 25px;
}
.buy-button a{
    font-size: 20px;
    color: rgb(2, 2, 71);
    text-decoration: none;
   font-family: "Handlee", cursive;   
    font-weight: 900;
    font-style: normal;
}

.modal1-container{
    min-width: 35%;
    min-height: 99.99vh;
    background-color: #0c134f;
    border: none;
    margin-left: auto;
    justify-content: center;
}
.modal3-container{
    min-width: 35%;
    min-height: 449px;
   background-color: #0c134f;
    border: none;
    margin-left: auto;
    justify-content: center;
    margin-top: 100px;
}
.modal4-container{
    min-width: 25%;
    min-height: 449px;
   background-color: #0c134f;
    border: none;
    margin-left: auto;
    justify-content: center;
    margin-top: 100px;
}
.modal5-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 99vh;
   background-color: #0c134f;
    border: none;
}
.modal5-popup-content{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 99vh;
}

.modal-nav{
    display: flex;
    display: block;
    width: 33.5%;
    height: 65px;
    background-color: #0c134f;
    position: fixed;
    z-index: 5;
    top: 0;
    margin-top: 100px;
}
.modal4-nav{
    display: flex;
    display: block;
    width: 23.5%;
    height: 65px;
    background-color: #0c134f;
    position: fixed;
    z-index: 5;
    top: 0;
    margin-top: 100px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.modal-button{
    margin-bottom: 10px;
}
.modal-nav h1{
    text-align: center;
    font-size: 20px;
    color: whitesmoke;
    margin-top: 25px;
}
.modal4-nav h1{
    text-align: center;
    font-size: 20px;
    color: whitesmoke;
    margin-top: 25px;
}
hr{
    width: 100%;
    background-color: whitesmoke;
    height: 5px;
}
.modal-content{
    display: flex;
    display: block;
    width: 100%;
    height: 449px;
    border: none;
    margin-top: 60px;
}

.notif-container{
    min-width: 35%;
    min-height: 449px;
   background-color: #0c134f;
    border: none;
    margin-left: auto;
    justify-content: center;
    margin-top: 100px;
}
.note-one{
    display: flex;
    display: block;
    width: 96%;
    height: 100px;
    margin: 10px;
    margin-top: 100px;
    background-color: bisque;
    border-radius: 25px;
    
}
.note-one p{
    margin-left: 20px;
    padding-top: 20px;
}
.notif-delete{
    float: right;
    margin-right: 20px;
    margin-top: -30px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: "Handlee", cursive;   
    font-weight: 800;
    font-style: normal;
    color: whitesmoke;
}
.rules-container{
    min-width: 100%;
    min-height: 99.99vh;
    background-color: #0c134f;
    border: none;
    margin-left: auto;
    justify-content: center;
}
.rules-container h1{
    color: whitesmoke;
    margin-left: 25px;
    margin-top: 25px;
}
.rules-container p{
    color: whitesmoke;
    margin-left: 25px;
    margin-top: 25px;
    white-space: pre-line;
    font-size: 20px;
}
.rules-container a{
    color: deepskyblue;
}
.prefooter-container{
    display: flex;
    width: 100%;
    height: 890px;
    background-color: blueviolet;
}
.campus-main-content{
     display: flex;
    display: block;
    width: 100%;
    height: 99vh; 
    margin-top: 100px;
    position: relative;
}
.campus-content{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 99vh;
    background-color: whitesmoke;
}
.column-left{
    display: flex;
    display: block;
    width: 20%;
    height: 99vh;
    background-color: #0C134F;
    position: relative;
}
.profile-box{
    display: flex;
    display: block;
    width: 100%;
    height: 120px;
    margin-top: 50px;
}
.profile-box h1{
    font-size: 20px;
    text-align: center;
}
.profile-box img{
    width: 25%;
    height: 50px;
    margin-left: 37%;
   border-radius: 100%;
}
.profile-box p{
    font-size: 20px;
    text-align: center;

}
.list-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    margin-top: 10px;
}
.list-text{
    display: flex;
    display: block;
    width: 80%;
    height: 80px;
}
.list-text h1{
    text-align: center;
    font-size: 20px;
}
.p1{
    text-align: center;
    font-size: 18px;
}
.column-center{
    display: flex;
    display: block;
    width: 35%;
    height: 99vh;
    margin-left: 40px;
    background-color: whitesmoke;
    position: relative;
}

.column-center h1{
    text-align: center;
    color: #0C134F;
    margin-top: 35px;
    font-size: 25px;
}
.p-text p{
    color: #0C134F;
    margin-top: 35px;
    white-space: pre-line;
}


.column-right{
    display: none;
    display: flex;
    width: 20%;
    height: 99vh;
    position: relative;
    background-color: bisque;
}
.right-box{
    display: flex;
    display: block;
    width: 200px;
    height: 100px;
    margin-top: 20px;


}
.right-box h1 {
    font-size: 20px;
    text-align: center;
}

.webcam-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 99.99vh;
}
.webcam-content{
    display: flex;
    justify-content: center;
    width: 60%;
    height: 350px;
}
.video-container{
    display: flex;
    width: 100%;
    height: 300px;
}
.bi-camera-video{
    color: whitesmoke;
}
.enrollment-container{
    display: flex;
    display: block;
    width: 100%;
    height: 860px;
    position: relative;
}
.enrollment-text-1{
    display: flex;
    display: block;
    width: 100%;
    height: 100px;
    position: relative;
}
.enrollment-text-1 h1{
    font-size: 30px;
    color: whitesmoke;
    text-align: center;
}
.enrollment-text-1 p{
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
     color: whitesmoke;
}
.courses-options{
    display: flex;
    display: block;
    width: 100%;
    height: 400px;
    white-space: pre-line;
    margin-top: 100px;
    margin-top: 100px;
}
.enrollment-text-2{
    display: flex;
    display: block;
    width: 100%;
    height: 100px;
    position: relative;
}
.enrollment-text-2 p{
    font-size: 20px;
    color: whitesmoke;
    text-align: center;
}
.enrrollment-options-boxes{
    display: flex;
    width: 100%;
    height: 400px;
}
.course-box-1 {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 300px;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
    background-image: url(../Assets/images/usaflagicon.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    line-height: 80px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.course-box-2 {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 300px;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
    background-image: url(../Assets/images/usaflagicon.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    line-height: 80px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.course-box-3{
    display: flex;
    justify-content: center;
    align-items: end;
    width: 300px;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
    background-image: url(../Assets/images/usaflagicon.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    line-height: 80px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.course-box-4 {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 350px;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
    background-image: url(../Assets/images/Flag_of_the_Arab_League.svg.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    line-height: 80px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.course-box-1 a, .course-box-2 a,
.course-box-3 a, .course-box-4 a{
    font-size: 30px;
    width: 100%;
    height: 10px;
    text-align: center;
    padding: 30px auto;
    cursor: pointer;
    text-decoration: none;
    color: whitesmoke;
}
.spanish-course-box-1 {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 300px;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
    background-image: url(../Assets/images/cr.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    line-height: 80px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.spanish-course-box-2 {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 300px;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
    background-image: url(../Assets/images/cr.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    line-height: 80px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.spanish-course-box-3{
    display: flex;
    justify-content: center;
    align-items: end;
    width: 300px;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
   background-image: url(../Assets/images/cr.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    line-height: 80px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.arabic-course-box-4 {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 350px;
    height: 200px;
    margin-left: 20px;
    margin-right: 20px;
    background-image: url(../Assets/images/Flag_of_the_Arab_League.svg.png);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    line-height: 80px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.spanish-course-box-1 a, .spanish-course-box-2 a,
.spanish-course-box-3 a, .arabic-course-box-4 a{
    font-size: 20px;
    width: 100%;
    height: 10px;
    text-align: center;
    padding: 30px auto;
    cursor: pointer;
    text-decoration: none;
    color: whitesmoke;
}

.enrollment-text-3{
    display: flex;
    width: 100%;
    height: 100px;
    position: relative;
    justify-content: center;
    align-items: center;
}
.enrollment-text-3 h1{
    font-size: 23px;
    margin-top: -100px;
    color: whitesmoke;
   
}
/*------forms--------*/

.form-container{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 99.99vh;
    background-image: url(../Assets/images/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.form{
    display: flex;
    display: block;
    width: 35%;
    height: 99.99vhpx;
    border-radius: 25px;
    background-color: purple;
    margin: 20px;
    box-shadow: -4px 5px 25px 20px rgba(0, 0, 0, 0.352);
}
.form h1{
    margin-top: 10px;
    text-align: center;
    font-size: 25px;
   font-family: cursive;
   color: whitesmoke;

}
label{
   font-size: 17px;
   font-family: cursive;
   margin-left: 20px;
   margin: 20px;
   margin-top: 90px;
   color: whitesmoke;
   
}
input{
    width: 90%; 
    border-top: none;
    border-left: none;
    border-right: none;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 20px;
    font-family: cursive;
    background: none;
    color: whitesmoke;
    border-bottom-color: whitesmoke;
}
.avatar{
    width: 30%;
    height: 20%;
    border-radius: 100%;
    background: none;
    margin-left: 30%;
    margin-top: 2px;
}

.form p{
   font-size: 15px;
    color: whitesmoke;
    font-family: cursive; 
   float: right;
   margin-right: 20px;
}
.form a{
    text-decoration: none;
    color: red;
    font-weight: 800;
}
.buttons-container{
    display: flex;
    display: block;
    align-items: center;
    width: 100%;
    height: 100px;

}
.form-button{
    width: 35%;
    height: 35px;
    margin-left: 35%;
    background-color: rgb(190, 11, 235);
    border: none;
    cursor: pointer;
    border-radius: 10px;
    font-size: 20px;
    color: whitesmoke;
    font-family: cursive;
    align-items: center;
    margin-bottom: 20px;
}

.canvas{
    background-color: aliceblue;
}

/*------footer--------*/
.footer{
    display: flex; 
    width: 100%;
    height: 670px;
    background-color: #0b1148;
}
.footer-content{
    display: flex;
    display: block;
    width: 100%;
    height: 300px;
}
.boxes-content{
    display: flex;
    width: 100%;
    height: 300px; 
    justify-content: space-between;
}
.footer-boxes{
    display: flex;
    display: block;
    width: 25%;
    height: 300px;
    margin-left: 20px;
    margin-right: 25px;

}
.footer-boxes h1{
    font-size: 20px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.footer-boxes p{
    white-space: pre-line;
}
.footer-boxes a{
    text-decoration: none;
    color: deepskyblue;
    font-size: 18px;
}
.socialmedia-container{
    display: flex;
    display: block;
    width: 100%;
    height: 150px;
}
.social-text{
    display: flex;
    width: 100%;
    height: 40px;
    justify-content: center;
    align-items: center;
}
.social-text h1{
    font-size: 20px;
}
.socialmedia-images{
    display: flex;
    width: 100%;
    height: 100px;
    justify-content: center;
    align-items: center;
}
.socialmedia-images img{
    width: 40px;
    height: 40px;
    margin-left: 20px;
    margin-right: 20px;

}
.copyrights-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90px;
}
.copyrights-container h1{
    font-size: 18px;
}
.enterprice-container{
    display: flex;
   display: block;
    width: 100%;
    height: 100px;
    margin-top: 20px;
}
.enterprice-container h1{
    padding: 10px;
    text-align: center;
    font-size: 18px;
}
.enterprice-container a{
    text-decoration: none;
    margin-left: 42%;
    color: green;
    font-size: 18px;
}
/*-----------Responsive----------*/
@media all and (max-width:900px) {
  
    .nav-bar{
        display: flex;
        display: block;
        width: 100%;
        height: 200px;
        position: fixed important!;
        top: 0;
        bottom: 0;
        margin: 0;
        z-index: 90000;
    }
     .nav-left{
        display: flex;
        width: 100%;
        height: 200px;
    }
    .logo-img{
        margin-top: 10px;
        width: 150px;
        height: 150px;
    }
    .brand-name{
        width: 100%;
        font-size: 48px;
    } 
    .cerrar-menu{
        display: flex; 
        background: none;
        border: none;
        justify-content: right;
        margin-right: 20px;
        align-items: center;
        height: 100px;
        width: 95%;
        color: whitesmoke;
        font-size: 130px;
        margin-top: 40px;
    }
    
    .nav-right{
        display: flex;
        display: block;
        width: 100%;
        min-height: 2000px; 
        background-color:  #0c134f;
        position: absolute;
        z-index: 9000;
        top: 0;
        left: 0;
        transform: translateX(-900px);
        scroll-behavior: none;
    }
     .nav-right.visible {
        visibility: visible;
        transition: all .40s ease;
        transform: translateX(0%);
        transform: translateY(0%);
    }
   .abrir-menu{
        display: flex; 
        background: none;
        border: none;
        justify-content: center;
        align-items: center;
        width: 20%;
        height: 100px;
        color: whitesmoke;
        font-size: 80px;
    }
    .dropdown-menu{
        display: flex;
        width: 10%;
        height: 90px;
        margin-top: 100px;
        margin-left: 35px;
    } 
    .dropdown-btn{
        width: 150px;
        height: 150px;
        margin: 0;
       
    }
    .popup{
        justify-content: center;
        width: 1000px;
        height: 500px;
        margin-top: -100px;
       transform:  translateX(80px);
    }
    .image-text-content{
        display: flex;
        display: block;
        width: 100%;
        height: 550px;
        margin-left: 35%;
    }
    
    .image-text-content p{
        font-size: 60px;
        margin-bottom: 100px;
    }
    .flag-text-1{
      display: flex;
      width: 100%;
      height: 150px;
      align-items: center;
      margin: 0;
      
    }
    .flag{
        width: 120px;
        height: 120px;
        margin-left: 20px;
        
    }
    .lang-b{
        font-size: 60px;
        margin-top: 100px;
    }
    .main-content{
        display: flex;
        display: block;
        width: 850px;
        height: 1250vh;
        position: relative;
    }
    .content-container{
        display: flex;
        width: 900px;
        height: 1660px;
        margin: 0;
        background-position: center center;
    }
    .spanish-text-container{
        display: flex;
        width: 490px;
        height: 400px;
        margin-top: 250px;
    }
    .spanish-text-container h1{
        font-size: 50px;
         margin-left: 20px;
    }
    .text-container h1{
        font-size: 20px;
    }
    .English-text-container{
        display: flex;
        width: 490px;
        height: 400px;
        margin-top: 250px;
    }
    .English-text-container h1{
        font-size: 45px;
         margin-left: 20px;
    }
    .offers-container{
        display: flex;
        width: 900px;
        height: 400vh;
        display: block;
    }
    .title-h1{
        font-size: 45px;
    }
    .boxes-container{
        display: flex;
        display: block;
        width: 800px;
        height: 340vh;
    }
    .boxes-container2{
        display: flex;
        display: block;
        width: 800px;
        height: 340vh;
        margin-top: 1300px;
    }
    .box-left, .box-center1, .box-center2,  .box-right{
        display: flex;
        display: block;
        width: 100%;
        height: 600px;
        margin: 0;
        margin-top: 50px;
    }
    .box-left h1, .box-center1 h1, .box-center2 h1, .box-right h1{
        font-size: 35px;
    }
    .images{
       margin-left: 20%;
        height: 300px;
        width: 60%;
    }
    .box-left p, .box-center1 p, .box-center2 p,  .box-right p{
        text-align: center;
        font-size: 35px;
        margin-left: 10px;
    }
    .team-container{
        display: flex;
        display: block;
        width: 900px;
        height: 2000px;
        background-position: center center;
    }
    .teams-boxes-container{
        display: flex;
        display: block;
        width: 850px;
        height: 1700px;
    }
    .team-cards{
        display: flex;
        justify-content: center;
        width: 850px;
        height: 400px;
    }
    .team-boxes{
        display: flex;
        display: block;
        width: 850px;
        height: 400px;
        margin: 0;
        margin-bottom: 40px;
    }
    .team-images{
        margin-left: 40%;
        width: 200px;
        height: 200px;
        margin-top: 40px;
       
    }
    .team-boxes h1 {
        font-size: 35px;
    }
 
    .team-boxes p{
        font-size: 30px;

    }
    .courses-container{
        display: flex;
        display: block;
        width: 850px;
        height: 1300px;
    }
    .courses-container2{
        display: flex;
        display: block;
        width: 850px;
        height: 600px;
    }
    .boxes-container{
        display: flex;
        display: block;
        width: 850px;
        height: 1300px;
    }
    .boxes-container p{
        text-align: left;
    }
    .boxes-container3{
        display: flex;
        display: block;
        width: 850px;
        height: 500px;
        margin-top: 100px;
    }
    .box-left a{
        font-size: 30px;
    }
    .box-center1 a{
        font-size: 30px;
    }
    .modal-container{
      position: center;
       width: 850px;
       min-height: 8000px;
      
    }
    .modal-button{
        font-size: 55px;
    }
    .modal-popup-content{
        position: center;
        display: flex;
        display: block;
        width: 850px;
        min-height: 8000px;
       
    }
    .modal-levels-title h1{
        font-size: 45px;
    }

    .modal-levels{
        display: flex;
        display: block;
        width: 850px;
        height: 1800px;
        margin-top: -10px;
    }
    .level-box-left{
        width: 650px;
        margin-left: 12%;
        height: 470px;
    }
    .level-box-left h2{
        font-size: 45px;
    }
    .level-box-left p{
        font-size: 25px;
        margin-top: -20px;
    }
    .enrollment-container{
        display: flex; 
        display: block;
        width: 900px;
        height: 350vh;
        position: relative;
        margin-top: 100px;
    }
    .enrollment-text-1{
        display: flex;
        display: block;
        width: 850px;
        height: 200px;
        position: relative;
    }
    .enrollment-text-1 h1{
        font-size: 40px;
    }
    .enrollment-text-1 p{
        width: 850px;
        margin: 20px;
        font-size: 40px;
        text-align: justify;  
    }
    .enrollment-text-2 p{
        font-size: 40px;
    }
    .courses-options{
        display: flex;
        display: block;
        width: 850px;
        height: 300px;
        margin-top: 100px;
        position: relative;
    }
    .enrrollment-options-boxes{
        display: flex;
        display: block;
        margin: 40px;
        width: 850px;
        height: 300px;
        margin-top: 20px;
    }
    .course-box-1{
        display: flex;
        width: 50%;
        height: 400px;
        margin-left: 200px;
        background-position: center center;
       
    }
    .course-box-2, 
    .course-box-3,.course-box-4{
        display: flex;
        width: 50%;
        height: 400px;
        margin-left: 200px;
        margin-top: 60px;
        background-position: center center;
        
    }
    .course-box-1 a, .course-box-2 a, 
    .course-box-3 a, .course-box-4 a{
        font-size:  40px;
        width: 100%;
        height: 50px;
        padding-top: 200px;
        position: absolute;
       
    }
    .spanish-course-box-1{
        display: flex;
        width: 50%;
        height: 400px;
        margin-left: 200px;
        background-position: center center;
       
    }
    .spanish-course-box-2, 
    .spanish-course-box-3,.arabic-course-box-4{
        display: flex;
        width: 50%;
        height: 400px;
        margin-left: 200px;
        margin-top: 60px;
        background-position: center center;
        
    }
    .spanish-course-box-1 a, .spanish-course-box-2 a, 
    .spanish-course-box-3 a, .arabic-course-box-4 a{
        font-size:  40px;
        width: 100%;
        height: 50px;
        padding-top: 200px;
        position: absolute;
       
    }
    .enrollment-text-3{
        display: flex;
        width: 850px;
        height: 200px;
        position: relative;
        margin-top: 1200px;
    }
    .enrollment-text-3 h1{
        font-size: 55px;
        margin-top: 100px;
        color: whitesmoke;
        text-align: center;
    }

    .footer{
        display: flex; 
        display: block;
        width: 900px;
        height: 2150px;
        position: relative;
    }
    .footer-content{
        display: flex;
        display: block;
        width: 850px;
        height: 1600px;
        justify-content: space-around;
    }
    .boxes-content{
        display: flex;
        display: block;
        width: 850px;
    }
    .footer-boxes{
        display: flex;
        display: block;
        width: 850px;
        height: 400px;
        margin: 0;
    }
    .footer-boxes h1{
        font-size: 45px;
    }
     .footer-boxes p{
        font-size: 35px;
    }
    .footer-boxes a{
        font-size: 35px;
    }
    .socialmedia-container{
        margin-top: 1300px;
    }
    .social-text h1{ 
        font-size: 45px;
    }
    .socialmedia-images{
        margin-top: 60px;
    }
    .socialmedia-images img{
        width: 80px;
        height: 80px;
    }
    .copyrights-container{
        margin-top: 100px;
    }
    .copyrights-container h1{
        font-size: 30px;
    }
    .enterprice-container h1{
        font-size: 35px;
    }
    .enterprice-container a{
        font-size: 40px;
        margin: 0;
        margin-left: 24%;
    }

}