.front-image-main-container {
  width: 100%;
  height: max(30vw, 300px);
  position: relative;
  
  display:flex;
  justify-content:center;
  align-items:center;
}

.front-image {
  	object-fit: fill;
    object-position: 50% 50%;
  
    width:max(100%, 600px);
    top: 0;
    left: 0;
	
  position: fixed;
  z-index: -1;
}

.front-image-container {
    width: 80%;
    overflow: hidden;
}

.front-image-text {
    animation: moveInSine 2s ease-in-out;
    color: white;

    font-size: max(6vw, 40px);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    font-weight: 900;
}

.media {
    width: 100%;
    text-align: center;

    display: flex;
    justify-content:space-evenly;
    flex-wrap: wrap;
    gap: 20px;

    margin-bottom:50px
}

.media li {
    list-style: none;
    height: 80px;
}

.media-link {
    height: 50px;
    animation: mediahoverDec 0.2s forwards;
}

.media-link:hover {
    animation: mediahoverInc 0.2s forwards;
}

.inactive {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 0.6;
}


.titleblock {
    padding: 5px;
    text-align: center;
}

ul.flag {
  list-style: none; /* removes default dots */
  padding-left: 0;
}

ul li.flag {
  padding-left: 40px; /* space for the image */
  background-image: url('../../../Images/WebImages/kplogosmall.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 30px 30px; /* adjust to your image's size */
  margin-bottom: 6px;
}

.qoute {
  width:200%; 
  margin-left:-25%;
}

.qoute-ar {
  width:200%; 
  margin-right:-75%;
}

@media screen and (max-width: 991px) {
  .qoute {
    width:100%;
    margin-left:0;
  }
  
  .qoute-ar {
    width:100%;
    margin-left:0;
    margin-right:0;
  }
} 

@keyframes mediahoverInc {
    from {
        height: 50px; 
    }
    to {
        height: 70px;
    }
}

@keyframes mediahoverDec {
    from {
        height: 70px; 
    }
    to {
        height: 50px;
    }
}

@keyframes moveInSine {
    0% {
        opacity: 0;
        transform: translateY(110%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}