@import url('https://fonts.googleapis.com/css2?family=Miniver&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
body {
    font-family: 'Poppins';
    font-size: 15px;
    font-weight: 400;
    line-height: 175%;
    letter-spacing: 0;
  
}
.navbar .nav-link {
    color: #1fb3e1;
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    margin-right: 20px; /* Adjust space between links */
  }
  
  h1,h4{
    color:#000000 ;
    font-weight: 600;
  }
  .text {
    color: #1fb3e1;
  }


  



/* Adjust text positioning and scaling for responsiveness */
/* Make images fully responsive */
.carousel-item img {
  height: auto;
  max-height: 600px;
  object-fit: cover;
  width: 100%;
  filter: brightness(50%); /* Lower value = darker image */
}
 /* Slows down the slide transition */
 .carousel-item {
  transition: transform 2s ease-in-out; /* Slows down the transition effect */
}







.hover-effect {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-effect:hover {
  transform: scale(1.1); /* Zoom effect on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */
}
/* Add animation to the container text */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation delay for each element */
h1, p {
  animation-name: fadeInUp;
  animation-duration: 2s;
  animation-fill-mode: both;
}

h1 {
  animation-delay: 1s; /* No delay for the heading */
}

p:nth-of-type(1) {
  animation-delay: 2s; /* 1-second delay for the first paragraph */
}

p:nth-of-type(2) {
  animation-delay: 3s; /* 2-second delay for the second paragraph */
}

p:nth-of-type(3) {
  animation-delay: 4s; /* 3-second delay for the third paragraph */
}











/* Center and scale the text */
.custom-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  /* Semi-transparent background */
  padding: 20px;
  padding-top: 90px;
  border-radius: 10px;
  width: 90%; /* Restrict width to prevent overflow */
  max-width: 800px; /* Ensure consistent sizing */
}

/* Text scaling for responsiveness */
.custom-caption h1 {
  font-size: clamp(1.8rem, 4vw, 3rem); /* Dynamically scale between min and max sizes */
  color: #fff;
  margin-bottom: 10px;
}

.custom-caption p {
  font-size: clamp(1rem, 2.5vw, 1.5rem); /* Dynamically scale between min and max sizes */
  color: #ddd;
  line-height: 1.4;
}

/* Optional: Adjust carousel height for smaller screens */
@media (max-width: 768px) {
  .carousel-item img {
    max-height: 400px;
  }

  .custom-caption {
    padding: 15px;
  }
}


/* External CSS file */
.offer-section-container {
  background:  url('./images/blue-curve-background_53876-113112.webp');
  background-size: cover;
  background-position: center;
  height: 400px;
  padding-top: 150px;
  padding-bottom: 50px;
  margin-top: 150px;
  margin-bottom: 150px;
}


  
  .card {
    background-color:  #A6E7FC;
    margin: 15px;
    border: 3px ; /* Thicker border with custom color */
    border-radius: 10px;      /* Rounded corners for a polished look */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for emphasis */
  }
  
  .card:hover {
    background-color: #1fb3e1; /* Change to your desired hover color */
    color: white; /* Ensure this applies to all text in the card */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
  }

  .card:hover h5, 
  .card:hover p {
    color: white; /* Change text to white on hover */
  }


  .course-section {
    position: relative;
    height: 650px;
    background-image: url('./images/learning.jpg'); /* High-resolution image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 20px;
}

.course-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Darker overlay */
}

.course-section * {
    position: relative; /* Ensures text stays above the overlay */
    z-index: 1;
}



.carousel-wrapper {
    overflow: hidden;

    padding: 10px 0;
    display: flex;
    justify-content: center;
}

.image-carousel {
    display: flex;
    gap: 80px;
    animation: scrollImages 10s linear infinite;
    width: max-content; /* Allows smooth looping */
}

.image-carousel img {
    height: 7rem;
}

@keyframes scrollImages {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

 
/* Variables converted manually */
:root {
  --bgColor: ;
  --dotColor: #bd1c1e;
  --ringColor:  #1fb3e1;
  --ruinIllusion: false;
 
}

/* General Styles */
.animation-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  justify-content: center; /* Centers items */
  gap: 20px; /* Adds space between items */
}

.animation-section {
  overflow: hidden;
  background: var(--bgColor);
  width: 200px; /* Reduced width */
  height: 200px; /* Reduced height */
  border-radius: 50%;
  position: relative;
}

* {
  position: relative;
}

/* Middle Circle */
.middleCircle {
  height: 200px; /* Reduced height */
  width: 200px; /* Reduced width */
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.middleCircle::before {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 2px; /* Adjusted top */
  left: 2px; /* Adjusted left */
  border: solid 15px #bd1c1e; /* Adjusted border */
  border-radius: 50%;
}

.middleCircle::after {
  content: '';
  display: block;
  position: absolute;
  height: 100%; /* Adjusted height */
  width: 100%; /* Adjusted width */
  top: 2px; /* Adjusted top */
  left: 2px; /* Adjusted left */
  border: solid 7px #A6E7FC; /* Adjusted border */
  border-radius: 50%;
  
}

/* Animated Circles */
.backCircle,
.frontCircle {
  height: 200px; /* Reduced height */
  width: 200px; /* Reduced width */
  position: absolute;
  top: 0;
  left: 0;
  animation-name: spin;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.frontCircle {
  animation-delay: 0s;
}

.smallCircle {
  position: absolute;
  width: 30px; /* Reduced width */
  height: 110px; /* Reduced height */
  left: calc(50% - 15px); /* Adjusted left */
  top: -22.5px; /* Adjusted top */
  transform-origin: 50% 100%;
}

.smallCircle::after {
  content: '';
  display: block;
  height: 20px; /* Reduced height */
  width: 20px; /* Reduced width */
  border: solid 5px #1fb3e1; /* Adjusted border */
  background-color: #1fb3e1;
  border-radius: 50%;
  margin: 20px;

}

/* Add animation */

/* Add animation */
.backCircle .smallCircle::after {
  animation: move 1s ease-in-out alternate infinite;
}

.frontCircle .smallCircle::after {
  animation: move 1s ease-in-out alternate infinite, opacity 2s linear infinite;
}

/* Loop converted manually for 12 small circles */
.smallCircle:nth-child(1) { transform: rotate(30deg); }
.smallCircle:nth-child(2) { transform: rotate(60deg); }
.smallCircle:nth-child(3) { transform: rotate(90deg); }
.smallCircle:nth-child(4) { transform: rotate(120deg); }
.smallCircle:nth-child(5) { transform: rotate(150deg); }
.smallCircle:nth-child(6) { transform: rotate(180deg); }
.smallCircle:nth-child(7) { transform: rotate(210deg); }
.smallCircle:nth-child(8) { transform: rotate(240deg); }
.smallCircle:nth-child(9) { transform: rotate(270deg); }
.smallCircle:nth-child(10) { transform: rotate(300deg); }
.smallCircle:nth-child(11) { transform: rotate(330deg); }
.smallCircle:nth-child(12) { transform: rotate(360deg); }

/* Delay Mode manually set */
.smallCircle:nth-child(1)::after { animation-delay: -99.5s; }
.smallCircle:nth-child(2)::after { animation-delay: -99s; }
.smallCircle:nth-child(3)::after { animation-delay: -98.5s; }
.smallCircle:nth-child(4)::after { animation-delay: -98s; }
.smallCircle:nth-child(5)::after { animation-delay: -97.5s; }
.smallCircle:nth-child(6)::after { animation-delay: -97s; }
.smallCircle:nth-child(7)::after { animation-delay: -96.5s; }
.smallCircle:nth-child(8)::after { animation-delay: -96s; }
.smallCircle:nth-child(9)::after { animation-delay: -95.5s; }
.smallCircle:nth-child(10)::after { animation-delay: -95s; }
.smallCircle:nth-child(11)::after { animation-delay: -94.5s; }
.smallCircle:nth-child(12)::after { animation-delay: -94s; }

/* Keyframes */
@keyframes move {
  from {
      transform: translateY(-25px) scale(1.5); /* Adjusted for smaller circles */
  }
  to {
      transform: translateY(25px) scale(1); /* Adjusted for smaller circles */
  }
}

@keyframes opacity {
  0%, 49% {
      opacity: 0;
  }
  50%, 99% {
      opacity: 1;
  }
  100% {
      opacity: 1;
  }
}

@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

@keyframes ruinIllusion {
  0%, 45% {
      opacity: 0%;
  }
  50%, 95% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 /* Adjust size if needed */

  color: rgb(0, 0, 0); /* Adjust color if needed */
  text-align: center;
  z-index: 10; /* Ensures text appears above animations */
  width: 100%;
}

/* Ensure spacing for mobile devices */
@media screen and (max-width: 768px) {
  .animation-section {
    margin-bottom: 30px; /* Adds vertical spacing */
  }
}