.animated-images {
  position: absolute;
  top: 50%;
  left: 70%; /* Center horizontally */
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0; /* Start fully transparent */
  animation-duration: 35s; /* Total duration for one full loop with 7 images */
  animation-iteration-count: infinite; /* Infinite loop */
}

/* Individual Animations for Each Image */
.image1 {
  animation: fadeInOutImage1 35s infinite; /* Image1 animation */
}
.image2 {
  animation: fadeInOutImage2 35s infinite; /* Image2 animation */
}
.image3 {
  animation: fadeInOutImage3 35s infinite; /* Image3 animation */
}
.image4 {
  animation: fadeInOutImage4 35s infinite; /* Image4 animation */
}
.image5 {
  animation: fadeInOutImage5 35s infinite; /* Image5 animation */
}
.image6 {
  animation: fadeInOutImage6 35s infinite; /* Image6 animation */
}
.image7 {
  animation: fadeInOutImage7 35s infinite; /* Image7 animation */
}

/* Keyframes for Image1 */
@keyframes fadeInOutImage1 {
  0% {
    opacity: 0; /* Fully transparent */
  }
  5% {
    opacity: 1; /* Fade in */
  }
  10% {
    opacity: 1; /* Fully visible */
  }
  15% {
    opacity: 0; /* Fade out */
  }
  100% {
    opacity: 0; /* Remain hidden */
  }
}

/* Keyframes for Image2 */
@keyframes fadeInOutImage2 {
  15% {
    opacity: 0; /* Fully transparent */
  }
  20% {
    opacity: 1; /* Fade in */
  }
  25% {
    opacity: 1; /* Fully visible */
  }
  30% {
    opacity: 0; /* Fade out */
  }
  100% {
    opacity: 0; /* Remain hidden */
  }
}

/* Keyframes for Image3 */
@keyframes fadeInOutImage3 {
  30% {
    opacity: 0; /* Fully transparent */
  }
  35% {
    opacity: 1; /* Fade in */
  }
  40% {
    opacity: 1; /* Fully visible */
  }
  45% {
    opacity: 0; /* Fade out */
  }
  100% {
    opacity: 0; /* Remain hidden */
  }
}

/* Keyframes for Image4 */
@keyframes fadeInOutImage4 {
  45% {
    opacity: 0; /* Fully transparent */
  }
  50% {
    opacity: 1; /* Fade in */
  }
  55% {
    opacity: 1; /* Fully visible */
  }
  60% {
    opacity: 0; /* Fade out */
  }
  100% {
    opacity: 0; /* Remain hidden */
  }
}

/* Keyframes for Image5 */
@keyframes fadeInOutImage5 {
  60% {
    opacity: 0; /* Fully transparent */
  }
  65% {
    opacity: 1; /* Fade in */
  }
  70% {
    opacity: 1; /* Fully visible */
  }
  75% {
    opacity: 0; /* Fade out */
  }
  100% {
    opacity: 0; /* Remain hidden */
  }
}

/* Keyframes for Image6 */
@keyframes fadeInOutImage6 {
  75% {
    opacity: 0; /* Fully transparent */
  }
  80% {
    opacity: 1; /* Fade in */
  }
  85% {
    opacity: 1; /* Fully visible */
  }
  90% {
    opacity: 0; /* Fade out */
  }
  100% {
    opacity: 0; /* Remain hidden */
  }
}

/* Keyframes for Image7 */
@keyframes fadeInOutImage7 {
  90% {
    opacity: 0; /* Fully transparent */
  }
  95% {
    opacity: 1; /* Fade in */
  }
  100% {
    opacity: 1; /* Fully visible */
  }
}

/* Media Queries for Responsiveness */
@media screen and (max-width: 768px) {
  .banner-right-con {
    max-width: 300px;
    width: 100%;
    height: auto;
  }

  #banner-right-img {
    height: auto;
  }

  .animated-images {
    top: 50%;
    left: 50%;
    max-width: 80px;
    height: auto;
  }
}

@media screen and (max-width: 480px) {
  .banner-right-con {
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  #banner-right-img {
    width: 100%;
  }

  .animated-images {
    max-width: 50%;
    height: auto;
  }
}

@media screen and (max-width: 991px) {
  #banner-right-img {
    transform: translateX(0) !important;
  }

  .banner-right-con img[alt="banner-right-img"] {
    width: 60%;
  }

  .best-award-con {
    left: 68px;
  }
}

@media only screen and (max-width: 1199px) {
  .best-award-con {
    padding: 14px 20px;
    top: 58%;
  }
}
@media only screen and (max-width: 991px) {
    .best-award-con {
        left: 68px;
    }
}
@media only screen and (max-width: 1199px) {
    .best-award-inner-con img {
        width: 50px;
        height: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .best-award-con {
        padding: 14px 20px;
        top: 58%;
    }
}
@media only screen and (max-width: 991px) {
    .happy-con {
        right: 152px;
        left: auto;
    }
}

.skill-left-con h6 {
    font-weight: 600;
    margin-bottom: 15px;
}

.skill-left-con h2 {
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 11px;
}

.skill-left-con p {
    font-family: 'Lato', sans-serif;
    color: var(--text-color);
    margin-bottom: 15px;
    font-size: 20px;
}

@media only screen and (max-width: 991px) {
    .skill-left-con p {
        font-size: 16px;
    }
}

@media only screen and (max-width: 991px) {
    .skill-left-con {
        margin-bottom: 60px;
        margin-top: 0;
    }
}

@media only screen and (max-width: 991px) {
    .skill-left-con {
        text-align: center;
    }
}
@media only screen and (max-width: 991px) {
    .skill-left-con {
        padding-left: 0;
    }
}

/* Align text to the right for desktop (min-width: 992px) */
@media only screen and (min-width: 992px) {
    .skill-left-con {
        text-align: right !important; /* Force right alignment on desktop */
    }
}

/* Maintain existing responsive styles for mobile (max-width: 991px) */
@media only screen and (max-width: 991px) {
    .skill-left-con {
        text-align: center; /* Center text on mobile */
        margin-bottom: 60px;
        padding-left: 0;
    }

    .skill-left-con p {
        font-size: 16px; /* Adjust font size for readability on smaller screens */
    }
}

/* Parent container for horizontal alignment */
.portfolio-horizontal .portfolio-img-con {
    display: flex;
    flex-wrap: nowrap; /* Ensures elements stay in a single line */
    gap: 20px; /* Adds space between items */
    justify-content: space-between; /* Adjusts horizontal spacing */
    align-items: flex-start; /* Aligns items vertically */
}

/* Each filterDiv styling */
.portfolio-horizontal .filterDiv {
    flex: 1 1 calc(33.33% - 20px); /* Makes each item take 1/3 of the width */
    max-width: 33.33%; /* Prevents them from exceeding a third of the width */
    box-sizing: border-box; /* Includes padding/border in width */
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
    .portfolio-horizontal .portfolio-img-con {
        flex-wrap: wrap; /* Allows wrapping on smaller screens */
        gap: 15px; /* Adjusts spacing */
    }

    .portfolio-horizontal .filterDiv {
        flex: 1 1 100%; /* Each item takes full width */
        max-width: 100%; /* Ensures full width on small screens */
    }
}

.banner-right-coners img[alt="banner-right-img1"]{
    animation: right-mover 1s ease-in-out infinite alternate;
}

.banner-right-coners {
    position: relative;
    width: fit-content;
    margin: 0 auto; /* Center the container horizontally if needed */
}

.banner-right-coners img {
    position: absolute;
    transition: transform 0.3s ease;
}

/* Center image (awards-img1) */
#banner-right-img1 {
    position: relative;
    z-index: 3; /* Keep it above other elements */
    max-width: 100%;
}

/* Left middle image (awards-img2) */
.banner-right-coners img[alt="image1"] {
    left: -245px; /* Adjust to position to the left */
    top: 32%;
    z-index: 2; /* Place it behind awards-img1 */
}

/* Right middle image (awards-img3) */
.banner-right-coners img[alt="image2"] {
    right: -325px; /* Adjust to position to the right */
    top: 36%; /* Partially higher */
    z-index: 3; /* Slightly above */
}

/* bottom-top image (awards-img4) */
.banner-right-coners img[alt="image3"] {
    right: -35px; /* Position to the top-right */
    bottom: 70px; /* Above awards-img1 */
    z-index:3 ; /* Place it behind */
}

/* Position awards-img5 at the top-left corner */
.banner-right-coners img[alt="image4"] {
    position: relative;
    top: -405px; /* Adjust to position above the top of the center image */
    left: -260px; /* Adjust to position to the left of the center image */
    z-index: 3; /* Ensure it appears behind the center image */
}

.banner-right-coners img:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    /* Scale down the entire container */
    .banner-right-coners {
        transform: scale(0.8); /* Scale down the entire div */
        transform-origin: center top; /* Ensure scaling is centered */
        margin-top: 100px; /* Add margin to avoid overlapping with the fixed menu */
    }

    /* Adjust center image (awards-img1) */
    #banner-right-img1 {
        width: 240px; /* Reduce size for mobile */
    }

    /* Adjust left middle image (awards-img2) */
    .banner-right-coners img[alt="image1"] {
        left: -200px; /* Adjust position proportionally */
        top: 35%; /* Adjust position proportionally */
        width: 120px; /* Scale down size */
    }

    /* Adjust right middle image (awards-img3) */
    .banner-right-coners img[alt="image2"] {
        right: -260px; /* Adjust position proportionally */
        top: 38%; /* Adjust position proportionally */
        width: 120px; /* Scale down size */
    }

    /* Adjust bottom image (awards-img4) */
    .banner-right-coners img[alt="image3"] {
        right: -30px; /* Adjust position proportionally */
        bottom: 50px; /* Adjust position proportionally */
        width: 120px; /* Scale down size */
    }

    /* Adjust top-left image (awards-img5) */
    .banner-right-coners img[alt="image4"] {
        top: -320px; /* Adjust position proportionally */
        left: -210px; /* Adjust position proportionally */
        width: 120px; /* Scale down size */
    }
}

/* mobile-view */

@media (max-width: 480px) {
    /* Further scale down for smaller devices */
    .banner-right-coners {
        transform: scale(0.6); /* Further reduce the size */
        transform-origin: center top;
        margin-top: 120px; /* Additional margin for smaller screens */
    }

    /* Adjust center image (awards-img1) */
    #banner-right-img1 {
        width: 350px; /* Further reduce size */
    }

    /* Adjust left middle image (awards-img2) */
    .banner-right-coners img[alt="image1"] {
        left: -140px;
        top: 40%;
        width: 160px; /* Further scale down */
    }

    /* Adjust right middle image (awards-img3) */
    .banner-right-coners img[alt="image2"] {
        right: -135px;
        top: 50%;
        width: 220px; /* Further scale down */
    }

    /* Adjust bottom image (awards-img4) */
    .banner-right-coners img[alt="image3"] {
        right: 43px;
        bottom: 70px;
        width: 250px; /* Further scale down */
    }

    /* Adjust top-left image (awards-img5) */
    .banner-right-coners img[alt="image4"] {
        top: -350px;
        left: -160px;
        width: 200px; /* Further scale down */
    }
}