:root{
    --main-color: #f4f4f4;
    --black-color: rgb(0,0,0);
    --border: 0.1rem solid rgb(44,44,44);
  }
  
  *{
    font-family: 'Titillium Web', sans-serif;   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    transition: 0,4s ease;   
  }
  /*---BASE HTML CODES------*/
  html{
    font-family: 'Titillium Web', sans-serif;      
    scroll-behavior: smooth;
  }
  body{
    background-color: #17325E;
  }
  #home {
    position: relative; /* Parent elemente göre konumlandırma yapabilmek için relative */
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#home .izgara {
  width: 100%;
  height: 100vh;
  object-fit: cover; /* Resmin oranını bozmadan alanı kaplamasını sağlar */
}
.logo_horizon{
  position: absolute; /* Resmin üzerinde konumlandırma */
  top: 6%; 
  left: 6%;
  width: 10rem;
  height: auto;
  padding: 0.5rem;
}
.logo_horizon img {
  width: 100%; /* Ebeveyn divin genişliğine göre ayarlamak isterseniz */
  height: auto; /* Yüksekliği otomatik ayarlanır, oran korunur */
  max-width: 100%; /* Taşmayı engeller */
  object-fit: contain; /* Resim oranını bozar ve divi doldurur */
}
.horizon_edu{
  position: absolute; /* Resmin üzerinde konumlandırma */
  top: 30%; 
  left: 6%;
  width: 34%;
  padding: 0.5rem;
}
.horizon_edu .hor_edu_pict{
  width: 100%; /* Ebeveyn divin genişliğine göre ayarlamak isterseniz */
  height: auto; /* Yüksekliği otomatik ayarlanır, oran korunur */
  max-width: 100%; /* Taşmayı engeller */
  object-fit: contain; /* Resim oranını bozar ve divi doldurur */
}
.picture_school{
  position: absolute; /* Resmin üzerinde konumlandırma */
  top: 9%; 
  right: 7%;
  width: 38%;
  padding: 0.5rem;
}
.picture_school .beyaz_ucgen{
  width: 100%; /* Ebeveyn divin genişliğine göre ayarlamak isterseniz */
  height: auto; /* Yüksekliği otomatik ayarlanır, oran korunur */
  max-width: 100%; /* Taşmayı engeller */
  object-fit: contain; /* Resim oranını bozar ve divi doldurur */
}

.stay_title {
  position: absolute;
  font-family: "Helvetica", "Arial", sans-serif;
  top: 80%;
  left: 6%;
  width: 38rem; /* Genişlik %30 */
  border: 1px solid #f2f2f2; /* 2px kalınlığında, f2f2f2 renkte border */
  border-radius: 50px; /* Kenarları yuvarlama */
  padding: 5px 10px; /* İç boşluk */
  text-align: center; /* Yazıyı ortala */
  font-size: calc(1rem + 1vw); /* Ekran boyutuna göre değişen font büyüklüğü */
  font-weight: 500;
  color: #f2f2f2; /* Yazı rengi */
  box-sizing: border-box; /* Padding'in genişliği etkilememesi için */
}
.cambridge{
  position: absolute; /* Resmin üzerinde konumlandırma */
  top: 90%; 
  right: 7%;
  width: 20%;
  padding: 0.5rem;
  opacity: 0.8;
}
.cambridge .title_cambridge{
  width: 100%; /* Ebeveyn divin genişliğine göre ayarlamak isterseniz */
  height: auto; /* Yüksekliği otomatik ayarlanır, oran korunur */
  max-width: 100%; /* Taşmayı engeller */
  object-fit: contain; /* Resim oranını bozar ve divi doldurur */
}
.bottom1{
  position: absolute;
  font-family: "Helvetica", "Arial", sans-serif;
  top: 90%;
  left: 6%;
  font-size: 0.7rem;
  color: #f2f2f2; /* Yazı rengi */
  opacity: 0.6;
}
.bottom2{
  position: absolute;
  font-family: "Helvetica", "Arial", sans-serif;
  top: 92%;
  left: 6%;
  font-size: 0.7rem;
  color: #f2f2f2; /* Yazı rengi */
  opacity: 0.6;
}
.bottom3{
  position: absolute;
  font-family: "Helvetica", "Arial", sans-serif;
  top: 94%;
  left: 6%;
  font-size: 0.7rem;
  color: #f2f2f2; /* Yazı rengi */
  opacity: 0.6;
}
.login_contanier {
    position: absolute; /* Resmin üzerinde konumlandırma */
    top: 48%; 
    left: 10%;
    background-color: rgba(255, 255, 255, 0.3); /* Arka plana hafif şeffaf beyaz */
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.login_contanier input{
  display: block;
  width: 12rem;
  padding: 0.4rem;
  font-size: 1rem;
  margin: 0.3rem;
  border-radius: 10px;
}
.btn_submit{
  display: inline-block;
  background-color: #BF9707;
  text-align: center;
  width: 4rem;
  font-size: 1rem;
  font-weight: 600;
  color: #f2f2f2;
  padding: 0.4rem;
  margin: 0.3rem;
  border: 2px solid #BF9707;
  transition: all ease-in-out 500ms;
  border-radius: 10px;
}
.btn_submit:hover{
  border: 2px solid #192F59;
  transition: all ease-in-out 500ms;
}


.password_cont {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%); /* Ortalamak için transform kullanıyoruz */
  background-color: rgba(255, 255, 255, 0.3); /* Arka plana hafif şeffaf beyaz */
  padding: 2rem; /* İç boşluğu artırdık */
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  width: 30rem; /* Eni genişlettik */
}
.password_cont .title_password{
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 0.5rem;
  color: #f2f2f2;
}
.password_cont input {
  display: block;
  width: 100%; /* Input genişliği container genişliğine göre ayarlandı */
  padding: 0.8rem; /* Yüksekliği biraz artırdık */
  font-size: 1rem;
  margin: 0.5rem 0; /* Üst ve alt boşluk ekledik */
  border-radius: 10px;
}
.horizon_edu2{
  position: absolute; /* Resmin üzerinde konumlandırma */
  top: 10%; 
  left: 6%;
  width: 34%;
  padding: 0.5rem;
}
.horizon_edu2 .hor_edu_pict{
  width: 100%; /* Ebeveyn divin genişliğine göre ayarlamak isterseniz */
  height: auto; /* Yüksekliği otomatik ayarlanır, oran korunur */
  max-width: 100%; /* Taşmayı engeller */
  object-fit: contain; /* Resim oranını bozar ve divi doldurur */
}
.modal-content {
  border-radius: 10px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2); /* Gölge efekti */
}

.modal-body h5 {
  font-size: 1.5rem; /* Başlık boyutunu büyüttük */
  animation: fadeIn 0.5s ease-in-out; /* Basit bir fade-in animasyonu */
}

.modal-body svg {
  animation: scaleUp 0.5s ease-in-out; /* SVG onay işareti için büyüme animasyonu */
}

@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@keyframes scaleUp {
  from {
      transform: scale(0);
  }
  to {
      transform: scale(1);
  }
}




@media only screen and (max-width: 1048px) {
  .logo_horizon{
    position: absolute; /* Resmin üzerinde konumlandırma */
    top: 6%; 
    left: 10%;
    width: 14%;
    height: auto;
    padding: 0.5rem;
  }
  .horizon_edu{
    position: absolute; /* Resmin üzerinde konumlandırma */
    top: 25%; 
    left: 10%;
    width: 40%;
    padding: 0.5rem;
  }
  .picture_school{
    position: absolute; /* Resmin üzerinde konumlandırma */
    top: 25%; 
    right: 5%;
    width: 42%;
    padding: 0.5rem;
  }
  .login_contanier {
    position: absolute; /* Resmin üzerinde konumlandırma */
    top: 38%; 
    left: 10%;
    background-color: rgba(255, 255, 255, 0.3); /* Arka plana hafif şeffaf beyaz */
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.cambridge{
  position: absolute; /* Resmin üzerinde konumlandırma */
  top: 10%; 
  right: 7%;
  width: 30%;
  padding: 0.5rem;
  opacity: 0.8;
}
  .stay_title {
    top: 80%;
    left: auto;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    font-size: calc(0.7rem + 2vw); /* Küçük ekranlar için fontu biraz daha küçült */
  }
}

@media only screen and (max-width: 780px) {
  .logo_horizon{
    position: absolute; /* Resmin üzerinde konumlandırma */
    top: 6%; 
    left: 10%;
    width: 20%;
    height: auto;
    padding: 0.5rem;
  }
  .horizon_edu{
    position: absolute; /* Resmin üzerinde konumlandırma */
    top: 25%; 
    left: 10%;
    width: 40%;
    padding: 0.5rem;
  }
  .picture_school{
    position: absolute; /* Resmin üzerinde konumlandırma */
    top: 25%; 
    right: 5%;
    width: 42%;
    padding: 0.5rem;
  }
  .login_contanier {
    position: absolute; /* Resmin üzerinde konumlandırma */
    top: 38%; 
    left: 10%;
    background-color: rgba(255, 255, 255, 0.3); /* Arka plana hafif şeffaf beyaz */
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.cambridge{
  position: absolute; /* Resmin üzerinde konumlandırma */
  top: 10%; 
  right: 7%;
  width: 35%;
  padding: 0.5rem;
  opacity: 0.8;
}
  .stay_title {
    top: 80%;
    left: auto;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    font-size: calc(0.7rem + 2vw); /* Küçük ekranlar için fontu biraz daha küçült */
  }
  .bottom1{
    top: 87%;
    left: 3%;
  }
  .bottom2{
    top: 89%;
    left: 3%;
  }
  .bottom3{
    top: 92%;
    left: 3%;
  }
}

@media only screen and (max-width: 540px) {
  #home{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
  }
  .logo_horizon{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 30%;
    margin-top: 0.1rem;
    align-items: center;
  }
  .horizon_edu{
    display: flex;
  flex-direction: row;
  width: 85%;
  align-items: center;
  }
  .picture_school{
    display: none;
  }
  .login_contanier {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 80%;
    background-color: rgba(255, 255, 255, 0.3); /* Arka plana hafif şeffaf beyaz */
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);   
}
.cambridge{
  display: flex;
  flex-direction: row;
  width: 50%;
  align-items: center;
}
  .stay_title { 
    left: auto;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    font-size: calc(0.7rem + 2vw); /* Küçük ekranlar için fontu biraz daha küçült */
  }
  .bottom1{
    display: none;
  }
  .bottom2{
    display: none;
  }
  .bottom3{
    display: none;
  }
  .password_cont {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); /* Ortalamak için transform kullanıyoruz */
    background-color: rgba(255, 255, 255, 0.3); /* Arka plana hafif şeffaf beyaz */
    padding: 2rem; /* İç boşluğu artırdık */
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    width: 90%; /* Eni genişlettik */
  }
}
@media (max-height: 500px) {
  .bottom1{
    display: none;
  }
  .bottom2{
    display: none;
  }
  .bottom3{
    display: none;
  }
  .picture_school{
    width: 35%;
  }
  .horizon_edu{
    display: none;
  }
  .stay_title{
    width: 30%;
    font-size: 0.8rem;
    margin-top: 1rem;
  }
}