.icon-large {
    font-size: 36px; /* Adjust the size as needed */
}




.container {
  overflow: hidden;
  .slider {
    white-space: nowrap;
    animation: slidein 10s linear infinite forwards; /* Default animation duration for larger screens */
    transition: transform 0.5s ease-in-out;
    .logos {
      width: 100%;
      display: inline-block;
      margin: 0px 0;
      .fab {
        width: calc(100% / 5);
        animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
      }
    }
  }
}

/* Keyframes for the continuous loop animation */
@keyframes slidein {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* Keyframes for the logo fade-in animation */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Adjust animation speed for different screen sizes */
/* For mobile devices (max-width: 768px), make the animation faster */
@media (max-width: 768px) {
  .container .slider {
    animation: slidein 5s linear infinite forwards; /* Adjust the duration for mobile */
  }
}

/* For larger screens, keep the default animation duration (20s) */
@media (min-width: 769px) {
  .container .slider {
    animation: slidein 10s linear infinite forwards; /* Default duration for larger screens */
  }
}

.content-padding {
  padding-top: 100px; /* Adjust the top padding to match your navigation bar's height */
  /* You can also adjust padding for other sides as needed, e.g., padding-left, padding-right, padding-bottom */
}



/*--------------------------------------------------------------------------------------------------- */


/* Updated CSS code for Pricing Cards with price color changes */

.card {
  border: 1px solid #ccc; /* Add a 1px solid gray border */
  margin-bottom: 20px;
  transition: transform 0.3s;
  overflow: hidden; /* Add overflow property to hide content overflow during animation */
  box-sizing: border-box; /* Include padding and border in the card's total width */
  padding: 15px; /* Add padding to the cards */
  transform-origin: center bottom; /* Set the transform origin to the center bottom */
  color: black; /* Black text color in the normal state */
  /*border-radius: 0; /* Remove card corner radius */

}

.card:hover {
  transform: scale(1.05) translateY(0); /* Scale and translate the card to prevent cut-off */
  background-color: red; /* Red background color on hover */
  color: white; /* White text color on hover */
  border-color: red; /* Red border color on hover */
}

.card-title {
  color: Black /* Add a color transition for smooth change */
}

.card-subtitle {
  color: Black /* Add a color transition for smooth change */
}

.card-price {
  color: red; /* Light gray price color in the normal state */
}

.btn-primary {
  background-color: red; /* White button background color */
  color: white; /* Black button text color */
  border-color: white; /* White button border color */
}

.card:hover .btn-primary:hover {
  background-color: white; /* Black background color on button hover */
  color: red; /* White text color on button hover */
  font-weight: bold; /* Make the button text bold on hover */
  border-color: white; /* Black button border color on hover */
}

/* Change title, subtitle, and price color in hover state */
.card:hover .card-title,
.card:hover .card-subtitle {
  color: white; /* White text color on hover */
}

.card:hover .card-price {
  color: black; /* Lighter gray price color on hover */
}

.card:hover .btn-primary {
  background-color: white; /* White background color on button hover */
  color: black; /* Black text color on button hover */
  border-color: red; /* Black button border color on hover */
}



/*--------------------------------------------------------------------------------------------------- */




/* CSS for the ribbon with blinking effect */

.ribbon-2 {
  --f: 10px; /* control the folded part */
  --r: 10px; /* control the ribbon shape */
  --t: 10px; /* the top offset */

  position: absolute;
  inset: var(--t) calc(-1 * var(--f)) auto auto;
  padding: 0 20px var(--f) calc(20px + var(--r)); /* Increased padding for right side */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--f)),
    calc(100% - var(--f)) 100%,
    calc(100% - var(--f)) calc(100% - var(--f)),
    0 calc(100% - var(--f)),
    var(--r) calc(50% - var(--f) / 2)
  );
  background: red;
  box-shadow: 0 calc(-1 * var(--f)) 0 inset #0005;
  animation: blink 1s infinite; /* Apply the blinking animation */
  transition: background-color 0.3s; /* Add a smooth transition for background color */
  color: white; /* Set initial text color to white */
}

/* Add hover effect for the card */
.card:hover .ribbon-2 {
  background-color: white; /* Change the background color of the ribbon when the card is hovered */
  color: red; /* Change text color to red on hover */
}

/* Add padding between ribbon label and right-side boundary */
.ribbon-2 .ribbon-label {
  padding-right: 10px; /* Adjust the right padding as needed */
}

@keyframes blink {
  0%, 100% {
    opacity: 0; /* Ribbon is invisible at the start and end of the animation */
  }
  50% {
    opacity: 1; /* Ribbon is visible at the midpoint of the animation */
  }
}



/*--------------------------------------------------------------------------------------------------- */




/* CSS for the Youtube Video 16:9 ratio*/

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100%) */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}







/* Styling gallery section where all images are */
.gallery {
    width: 100%;
    max-width: 1400px; /* Set a maximum width for the gallery */
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Arrange images in 5 columns */
    grid-gap: 20px;
    justify-content: center;
    padding: 0 15px; /* Equal left and right padding to match the header */
    box-sizing: border-box; /* Ensure padding is included in the width */
}

/* Styling Particular Image */
.gallery-img {
    width: 100%;
    max-height: 400px; /* Set a maximum height for the images */
    object-fit: cover; /* Maintain aspect ratio and cover the container */
    cursor: pointer;
    transition: transform 0.2s;
    border: 1px solid #ccc; /* Add a 1px solid gray border */
    box-sizing: border-box; /* Ensure border size is included in image size */
}

/* onHover image will expand a little bit */
.gallery-img:hover {
    transform: scale(1.1);
    cursor: zoom-in;
}

/* This section will be seen when we click on an image */
.image-popup-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

/* close button when we want to close the bigger image */
.close-button {
    position: absolute;
    top: 75px;
    right: 50px;
    font-size: 60px;
    color: #fff;
    cursor: pointer;
}
.close-button:hover {
    color: red;
}

/* when we click on the image it will expand to a bigger size and will be displayed
at the middle of the screen */
#popupImage {
    display: block;
    max-width: 80%;
    max-height: 80%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Making images more responsive for smaller size devices */
@media (max-width: 767px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
        grid-gap: 10px;
    }
}

/* Hide header and footer in the image popup container */
.image-popup-container .popup-header,
.image-popup-container .popup-footer {
    display: none;
}


a:hover {
  cursor: pointer;
}