* {
  box-sizing: border-box;
  font-family: 'Cairo', sans-serif;
  margin: 0;
  padding: 0;
}

@font-face {
font-family: 'GESSTwoLight';
src: url('fonts/GESSTwoLight.woff') format('woff');
font-weight: normal;
font-style: normal;
}

body, html {
min-height: 100vh;
background-color: #F6F6F6 !important;
color: #0A151f;
}

a {
  color: white;
  text-decoration: none;
}

p {
  margin: 10px;
}

h1, h2{
  text-shadow: 2px 2px #ccc;
}

.greeting {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding-top: 20px; 
  padding: 0 60px;
  width: 100%; 
  height: 100vh; 
  background: linear-gradient(90deg, #FDFBF1, #22525644);
}

main {
  padding: 0 20px;
  max-width: 100vw;
  padding-top: 5%;
  margin: 0;
  width: 100%;
  color: #0A151F;    
}

.intro {
  display: flex;
  flex-direction: row;
  width: 92vw;
  min-height: 300px; 
  position: relative;
  flex: 1; 
  gap: 50px;
}

#about {
  scroll-margin-top: 100px !important;
}

.section {
  margin-bottom: 10%;
  position: relative;
  width: 100%;
  flex: 1;
}

.title {
  border-bottom: 2px solid #B7A984;
  height: 50px;
  width: fit-content;
  padding: 0 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 20px;
  color: #225256
}

.introcontent {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: white;
  padding: 40px 20px;
  border-radius: 2vw;
  height: 100%;
  flex: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.courses-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
    position: relative;
  margin-bottom: 5%;
}
 

.course-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #667a7a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 250px;
  text-align: right;
  position: relative;
  padding: 5px;
  margin: 10px;
}

.course-card:hover {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.4);
  transition: all 500ms;
}

.course-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.course-card h3 {
  margin: 15px 10px 5px;
  font-size: 20px;
}

.course-card p {
  padding: 0;
  font-size: 14px;
  color: #555;
}

.price {
  color: white;
  position: absolute;
  top: 35%;
  left: 15px;
  background:rgb(47, 57, 90);
  border-radius: 15px;
  padding: 5px 8px;
}

.more-courses-msg {
  align-self: center;
  font-weight: bold;
  color: #888;
  margin: 10px;
  font-size: 16px;
  white-space: nowrap;
}



.btn {
  width: 20%;
  height: 48px;
  position: absolute;
  display: inline-block;
  left: 5px;
  color: white;
  font-family: 'Cairo', sans-serif;
  border: none;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  background: #B7a984;
  margin: 5px;
  bottom: 0;
  padding: 7px
}

.btn:hover {
  background: #667A7A;
}



.contact{
  display: flex;
  flex-direction: row;
  justify-content: center; 
  align-items:center;
  gap: 50px;
  margin-top: 10px;
}
.info {
   justify-content: center; 
  align-items:center;
}

.stats {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 20px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.st {
  background: white;
  padding: 30px;
  width: 60vw;
  color: black;
  border-radius: 3vw;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  text-align: center;
}

@media (max-width: 768px) {
  .stats {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .st {
    width: 60vw; 
    margin: 10px auto;
    padding: 20px;
    border-radius: 5vw;
  }


.contact{
  display: none
}
.info {
  display:none;
}
.contactm{
  display: flex;
  padding: 60px;
  flex-direction: column;
  justify-content: center; 
  align-items:center;
  gap: 10px;
}
.infom {
  text-align: center;
}
  .intro {
    flex-direction: column;
    padding: 0 10px;
    gap: 0px;
  }

  .introcontent {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
  }

  .btn {
  width: fit-content;
  }
  
  }
  
@media screen and (min-width: 768px){

   .contactm{
  display: none
}
.infom{
  display:none;
}
}

/* icons */
.bxs--left-arrow {
  display: inline-block;
  width: 15px;
  height: 15px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m4.431 12.822l13 9A1 1 0 0 0 19 21V3a1 1 0 0 0-1.569-.823l-13 9a1.003 1.003 0 0 0 0 1.645'/%3E%3C/svg%3E");
  background-color: white;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center 2px;
  mask-position: center 2px;
}

.mdi--about {
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 2px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2'/%3E%3C/svg%3E");
  background-color: #667a7a;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.la--school {
  display: inline-block;
  width: 32px;
  height: 32px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' d='M16 4L3 7v2l13-3l13 3V7zm-6 6c-3.227 0-6.375 1.313-6.375 1.313l-.625.28V27h11.281c.348.598.98 1 1.719 1c.738 0 1.371-.402 1.719-1H29V11.594l-.625-.281S25.227 10 22 10c-2.918 0-5.48.98-6 1.188C15.48 10.98 12.918 10 10 10m0 2c1.934 0 4 .625 5 .969v11.125c-1.113-.367-2.941-.875-5-.875c-2.102 0-3.813.484-5 .875V12.969C5.77 12.69 7.8 12 10 12m12 0c2.2 0 4.23.691 5 .969v11.125c-1.188-.39-2.898-.875-5-.875c-2.059 0-3.887.508-5 .875V12.969c1-.344 3.066-.969 5-.969' stroke-width='1' stroke='%23000'/%3E%3C/svg%3E");
  background-color: #667a7a;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

  .gridicons--stats-down-alt {
  display: inline-block;
  width: 30px;
  height: 30px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 21H3v-2h18zM8 3H4v14h4zm6 3h-4v11h4zm6 4h-4v7h4z'/%3E%3C/svg%3E");
  background-color: #667A7A;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hugeicons--ai-vision-recognition {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23667a7a' fill-rule='evenodd' d='M4.01 13.032c-.17-.29-.3-.53-.39-.71c.09-.18.22-.42.39-.71c.37-.62.94-1.45 1.7-2.28c1.54-1.65 3.86-3.26 7.08-3.26c2.96 0 5.28 1.59 6.9 3.27c.8.83 1.41 1.67 1.82 2.3c.19.28.34.53.44.7c-.09.18-.22.41-.38.69c-.37.62-.94 1.45-1.7 2.28c-1.54 1.65-3.86 3.26-7.08 3.26s-5.54-1.61-7.08-3.26c-.76-.83-1.33-1.66-1.7-2.28m19.47-.41c.09-.21.08-.44-.02-.64v-.02s-.03-.04-.05-.07c-.03-.06-.07-.14-.13-.24c-.12-.2-.29-.49-.51-.83c-.45-.69-1.12-1.6-2-2.52c-1.76-1.82-4.44-3.73-7.98-3.73c-3.78 0-6.46 1.89-8.17 3.74c-.86.92-1.49 1.84-1.9 2.53c-.2.35-.36.64-.46.84c-.05.11-.09.19-.12.25c-.01.03-.02.05-.03.07v.02a.78.78 0 0 0 0 .6v.02c.01.02.02.04.03.07c.03.06.07.14.12.25c.1.2.26.49.46.84c.41.69 1.04 1.61 1.9 2.53c1.71 1.85 4.39 3.74 8.17 3.74s6.46-1.89 8.17-3.74c.86-.92 1.49-1.84 1.9-2.53c.2-.35.36-.64.46-.84c.05-.11.09-.19.12-.25c.01-.03.02-.05.03-.07v-.02zm-9.3-3.34l-.43-.69a1.15 1.15 0 0 0-1.92 0l-.43.69c-.42.66-.99 1.23-1.65 1.65l-.69.43a1.15 1.15 0 0 0 0 1.92l.69.43c.66.42 1.23.99 1.65 1.65l.43.69c.45.69 1.47.69 1.92 0l.43-.69c.42-.66.99-1.23 1.65-1.65l.69-.43c.69-.45.69-1.47 0-1.92l-.69-.43c-.66-.42-1.23-.99-1.65-1.65m-1.52.8l.13-.19l.13.19c.54.85 1.26 1.57 2.11 2.11l.19.13l-.19.13c-.85.54-1.57 1.26-2.11 2.11l-.13.19l-.13-.19a6.85 6.85 0 0 0-2.11-2.11l-.19-.13l.19-.13c.85-.54 1.57-1.26 2.11-2.11' color='%23667a7a' stroke-width='1.7' stroke='%23667a7a'/%3E%3C/svg%3E");
}

.material-symbols--other-admission-rounded {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.25 18.75q.3 0 .525-.225T16 18t-.225-.525t-.525-.225t-.525.225T14.5 18t.225.525t.525.225m2.75 0q.3 0 .525-.225T18.75 18t-.225-.525T18 17.25t-.525.225t-.225.525t.225.525t.525.225m2.75 0q.3 0 .525-.225T21.5 18t-.225-.525t-.525-.225t-.525.225T20 18t.225.525t.525.225M18 23q-2.075 0-3.537-1.463T13 18t1.463-3.537T18 13t3.538 1.463T23 18t-1.463 3.538T18 23M8 9h8q.425 0 .713-.288T17 8t-.288-.712T16 7H8q-.425 0-.712.288T7 8t.288.713T8 9M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v5.45q0 .45-.375.7t-.8.1q-.425-.125-.888-.188T18 11q-.275 0-.513.013t-.487.062q-.225-.05-.5-.062T16 11H8q-.425 0-.712.288T7 12t.288.713T8 13h5.125q-.45.425-.812.925T11.675 15H8q-.425 0-.712.288T7 16t.288.713T8 17h3.075q-.05.25-.062.488T11 18q0 .5.05.95t.175.875t-.125.8t-.675.375z'/%3E%3C/svg%3E");
  background-color: #667A7A;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
            select {
          -webkit-appearance: none;  
          -moz-appearance: none;    
          appearance: none;           
          
          background-color: white;
          color: black;
          border: 1px solid #ccc;
          padding: 5px 10px;
          border-radius: 5px;
        }
        
        .select-wrapper {
          position: relative;
          display: inline-block;
          width: 200px; 
        }
        
        select {
          width: 300px;
          padding: 8px 30px 8px 10px; 
          font-size: 16px;
          border: 1px solid #ccc;
          border-radius: 5px;
          -webkit-appearance: none;  
          -moz-appearance: none;
          appearance: none;
          background-color: white;
          background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200l5%207%205-7z%22%20fill%3D%22%23333%22/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: right 10px center;
          background-size: 10px 7px;
          cursor: pointer;
        }
        
        button {
          -webkit-appearance: none; 
          appearance: none;
          color: white;   
          font-weight: bold ;
          border: none;
          padding: 5px;
          border-radius: 5px;
          font-size: 16px;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }