@font-face {
    font-family: 'enfont';
    src: url('fonts/Montserrat.ttf') format('truetype');
    font-style: normal;
  }
  
  @font-face {
    font-family: 'arfont';
    src: url('fonts/Rubik.ttf') format('truetype');
    font-style: normal;
  }

  ::selection {
    color: black;
    background-color: rgba(128, 128, 128, 0.288);
  }

.langbody {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.langbody :lang(en) {
    font-family: "enfont",  sans-serif;
}

.langbody :lang(ar){
    font-family: "arfont", sans-serif;
}

.langdiv {
    text-align: center;
    display: flex;
    flex-direction: column;
    font-weight: 500;
}

.langdiv p {
    font-size: 24px; 
    margin-bottom: 5px;
}

.engtitle {
    margin: 0px;
    padding: 2px;
}

.englang {
    border-bottom: 1px solid black;
    display: block;
    margin: 0;
    padding: 0;
}

.englang button {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.artitle {
    margin: 0px;
    padding: 2px;
}

.arlang {
    border-top: 1px solid black;
    display: block;
    margin: 0;
    padding: 0;

}

.arlang button {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.langbutton button {
    width: 100%;
    padding: 10px;
    border: 0px;
    cursor: pointer;
    font-size: 22px;
}

.eninfo {
    font-family: "enfont", sans-serif;
    font-style: normal;
    margin: 0px;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

.arinfo {
    font-family: "enfont", sans-serif;
    font-style: normal;
    margin: 0px;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    font-family: "arfont", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    direction: rtl;
}

.image-text-container {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

.rounded-image {
    border-radius: 15px;
    margin: 18px;
    width: 100%;
    max-width: 350px;
    height: auto;
}

header {
    text-align: center;
    font-size: xx-large;
    padding: 15px;
}

.navbar {
    background-color: gray;
    height: 15px;
}

p {
    padding: 8px;
    margin: 10px;
    font-size: 16px;
}

.line {
    height: 10px;
    background-color: black;
    margin: auto;
    border: 0px;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.quotes p,
.quotes ul {
  margin: 0px;
}

@media(max-width: 768px) {
    .langbody{
        min-height: 0vh ;
        overflow-y: auto;
    }
    
    .info {
        font-size: 16px;
    }

    .image-text-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .devinfo {
        margin: 15px;
    }
}