body::before {
  display: block;
  content: '';
  height: 60px;
}

#map {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

@media (min-width: 768px) {
  .news-input {
    width: 50%;
  }
}



.custom-height-container {
  height: 600px;
}

.carousel-inner img {
  /* Set the desired height for the carousel images */
  height: 600px; /* Adjust the value as needed */
  object-fit: cover; /* Maintain aspect ratio and cover container */
}


.carousel-text {
  position: absolute;
  top: 25%; /* Adjust the top position as needed */
  left: 5%; /* Adjust the left position as needed */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  color: white; /* Text color */
  padding: 5px; /* Adjust padding as needed */
}

.background-text {
  background-color: #FFC0CB; /* Example: Hexadecimal color code for pink */
  color: #000; /* Set text color for contrast */
  padding: 5px; /* Add some padding to the text for spacing */
}

.custom-transparent-bg {
  background-color: rgba(0, 0, 0, 0.5); /* Example: Pink background with 50% opacity */
  padding: 10px;
}

.spin-image {
  display: inline-block;
  animation: spin 50s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(30deg); }
}


   /* Custom CSS for fading out the image */
   .fade-out-image {
    opacity: 1;
    transition: opacity 15s ease-in-out; /* <img src="your-image.jpg" alt="Fading Image" class="fade-out-image">Specify the transition duration and timing function */
}

/* Hover effect to trigger the fade-out animation */
.fade-out-image:hover {
    opacity: -1; /* Reduce opacity to 0 to create the fade-out effect */
}

.parallax-container {
  position: relative;
  background-image: url('background.jpg'); /* Replace with your image path */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 500px; /* Adjust the height as needed */
}

.parallax-content {
  position: relative;
  z-index: 1;
  padding: 100px; /* Adjust the padding as needed */
  text-align: center;
  color: white; /* Text color */
}

/* Custom CSS for setting the background image */


.learn-container {
  background-image: url('img/gcipvid.gif'); /* Replace with your  <div class="container-fluid bck-container"> image path */
  background-size: cover; /* Cover the entire container */
  background-repeat: no-repeat; /* Prevent image repetition */
  min-height: 500px; /* Set the minimum height for the container */
  width: 100%; 
}


.hub-container {
  background-image: url('img/pan.jpeg'); /* Replace with your  <div class="container-fluid bck-container"> image path */
  background-size: cover; /* Cover the entire container */
  background-repeat: no-repeat; /* Prevent image repetition */
  min-height: 500px; /* Set the minimum height for the container */
}

.objective-container {
  background-image: url('img/133.jpg'); /* Replace with your  <div class="container-fluid bck-container"> image path */
  background-size: cover; /* Cover the entire container */
  background-repeat: no-repeat; /* Prevent image repetition */
  min-height: 500px; /* Set the minimum height for the container */
  width: 100%; 
}


.faq-container {
  background-image: url('img/idea.png'); /* Replace with your  <div class="container-fluid bck-container"> image path */
  background-size: cover; /* Cover the entire container */
  background-repeat: no-repeat; /* Prevent image repetition */
  min-height: 500px; /* Set the minimum height for the container */
}

.advert-container {
  background-image: url('img/idea.png'); /* Replace with your  <div class="container-fluid bck-container"> image path */
  background-size: cover; /* Cover the entire container */
  background-repeat: no-repeat; /* Prevent image repetition */
  min-height: 500px; /* Set the minimum height for the container */
}

/* Style for the content inside the container */
.container-content {
  padding: 0px; /* Add padding to the content for spacing */
  color: #ffffff; /* Text color on the background image */
}

/* Custom CSS class to increase image size */
.img-to-grow {
  width: 200px; /* Set the desired width */
  height: auto; /* Automatically adjust the height to maintain aspect ratio */
}



   /* Custom CSS for typewriter effect */
   .typewriter-text {
    overflow: show; /* Hide overflowing text */
    /*border-right: 2px solid #000; Create a blinking cursor */
    white-space: wrap; /* Prevent line breaks */
    margin: 0 auto; /* Center the text */
    letter-spacing: 2px; /* Adjust letter spacing */
    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

/* Typing animation */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* Blinking cursor animation */
@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #000; }
}