body, html {
  background-image: url('bg.jpg');
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}



.background {

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 76vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section {
  width: 500px; /* Zmadho width sipas preferencave */
  height: 200px; /* Zmadho height sipas preferencave */
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease-in-out, border 0.3s ease-in-out;
  border: 2px solid;
  border-radius: 30px; /* Shto border radius per te formuar nje forme drejtkendore me kant te rrumbulluar */
}


#section1{
  background-image: url('1.jpg');
  background-repeat: no-repeat;
  animation: moveFromRight 0.8s ease-in-out;

}
#section2{
  background-image: url('2.jpg');
  background-repeat: no-repeat;
  animation: moveFromLeft 0.8s ease-in-out;

}
#section3{
  background-image: url('3.jpg');
  background-repeat: no-repeat;
  animation:  moveFromLeft 0.8s ease-in-out;

}

#section4{
  background-image: url('4.jpg');
  background-repeat: no-repeat;
  animation: moveFromRight 0.8s ease-in-out;

}

@keyframes moveFromRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
    border-color: #000;
  }
}

@keyframes moveFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
    border-color: #000;
  }
}



#section2 {
  transition: transform 0.6s ease, border-color 0.6s ease; /* Shtoni tranzicionin për transform dhe border-color */
}

#section2:hover {
  transform: scale(1.4);
  border-color: #0004ff;
  transition-delay: 0.2s; /* Vonesa e animacionit pas hover */
  box-shadow: 0 0 40px rgb(21, 5, 249); /* Efekti rreth rrotullues */
}

#section1 {
  transition: transform 0.6s ease, border-color 0.6s ease; /* Shtoni tranzicionin për transform dhe border-color */
}

#section1:hover {
  transform: scale(1.4);
  border-color: #0004ff;
  transition-delay: 0.2s; /* Vonesa e animacionit pas hover */
  box-shadow: 0 0 40px rgb(21, 5, 249); /* Efekti rreth rrotullues */
}

#section3 {
  transition: transform 0.6s ease, border-color 0.6s ease; /* Shtoni tranzicionin për transform dhe border-color */
}

#section3:hover {
  transform: scale(1.4);
  border-color: #0004ff;
  transition-delay: 0.2s; /* Vonesa e animacionit pas hover */
  box-shadow: 0 0 40px rgb(21, 5, 249); /* Efekti rreth rrotullues */
}

#section4 {
  transition: transform 0.6s ease, border-color 0.6s ease; /* Shtoni tranzicionin për transform dhe border-color */
}

#section4:hover {
  transform: scale(1.4);
  border-color: #0004ff;
  transition-delay: 0.2s; /* Vonesa e animacionit pas hover */
  box-shadow: 0 0 40px rgb(21, 5, 249); /* Efekti rreth rrotullues */
}

.main-title {

  font-family: 'cursive'; /* Përdorimi i një fonti specifik (zgjidhni një font që ju pëlqen) */


  color: #ffffff; /* Zgjidhni ngjyrën që dëshironi */
  font-size: 100px; /* Zgjidhni madhësinë e shkrimit */
  text-align: center;
  margin-top: 10px; /* Zgjidhni vlerën e lartësisë së margjinit sipas preferencave tuaja */
  margin-bottom: 0px;
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInUp 1s ease-out 0.5s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}





.section a {
  text-decoration: none;
  color: black;
}

/* Styles for mobile */
@media (max-width: 599px) {

  .main-title {

    font-family: 'cursive'; /* Përdorimi i një fonti specifik (zgjidhni një font që ju pëlqen) */
  
  
    color: #ffffff; /* Zgjidhni ngjyrën që dëshironi */
    font-size: 60px; /* Zgjidhni madhësinë e shkrimit */
    text-align: center;
    margin-top: 10px; /* Zgjidhni vlerën e lartësisë së margjinit sipas preferencave tuaja */
    margin-bottom: 0px;
    opacity: 0;
    transform: translateY(-20px);
    animation: fadeInUp 1s ease-out 0.5s forwards;
  }

  .background {
   
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 46vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
  }

  .section {
    margin-bottom: 10px;
    width: 350px; /* Zmadho width sipas preferencave */
    height: 150px; /* Zmadho height sipas preferencave */
    background-color: white;
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease-in-out, border 0.3s ease-in-out;
    border: 2px solid;
    border-radius: 30px; /* Shto border radius per te formuar nje forme drejtkendore me kant te rrumbulluar */
  }

  #section1{
    background-image: url('mob/1.jpg');
    background-repeat: no;
    animation: moveFromRight 0.8s ease-in-out;
  
  }
  #section2{
    background-image: url('mob/2.jpg');
    animation: moveFromLeft 0.8s ease-in-out;
  
  }
  #section3{
    background-image: url('mob/3.jpg');
    animation: moveFromLeft 0.8s ease-in-out;
  
  }
  
  #section4{
    background-image: url('mob/4.jpg');
    animation: moveFromRight 0.8s ease-in-out;
  
  }
  
}