/*Body of the page*/
body {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* navi Bar background */
.navbar {
   
    background: linear-gradient(135deg, #2adf48, #381dd3);
}

/* Hover effect for navigation links */
a.nav-link:hover {
    color: #0c2ce4;
    text-decoration: rgb(0, 162, 255);
    transform: scale(1.1);
    background-image:linear-gradient(45deg,  #f6fa06, #1add13);
}
 
.navbar a.active {
    color: #ff0000;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-decoration:double;
    background-image:linear-gradient(45deg,#ff0783, #fa650e);
    transition: all,ease-in-out;
}
.navbar-brand{

    font: 1em sans-serif;
} 

a.nav-link {
    color: #0b4bfc;
    font-weight: bold;
}

.navbar a {
    color: rgb(255, 255, 255) !important;
    text-align: start;
}

/*rainbow*/
.rainbow-text {
    font-size: 3em;
    font-weight: bold;
    background: linear-gradient(
      90deg,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet,
      red
    );
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 6s linear infinite;
  }
  
  @keyframes rainbow {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 100%;
    }
  }
 /* Home Section*/
/*Golden Jubilee*/
/* Centering Content */
#gold {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.Golderjubilee{
    position:fixed;
    display: block;
    max-width: 250px;
    height:280px;
    overflow: hidden;
}
 /* General Styling */
 .logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-bottom: 0;
}

.logo {
    max-width: 310px;
    height: auto;
    padding: 20px;
    opacity: 1;
    transform-origin: bottom;
    margin-bottom: 0%;
}

  

.award-section {
    display: block;
    align-items: center;
    flex-direction: column; /* Mobile-first approach */
    text-align: center;
}

.award {
    max-width: 300px;
    margin-bottom: 5px;
    display: block;
}

.awardsp {
    font-size: 14px;
    color: #fcfcfc;
    box-shadow: #ec035d;
}

/* Responsive Adjustments */
@media (min-width: 768px) {
    .logo-container {
        flex-direction: row;
    }

    .award-section {
        flex-direction: row;
        text-align:end ;
    }

    .awardsp {
        font-size: 16px;
        margin-left: 10px;
        text-align:end ;
    }
}

/*Gold animation*/

.ganimation-container {
    position: relative;
    width: 100%; /* Ensure it takes full column width */
    max-width: 200px; /* Adjust the size of the animation */
    height: 200px;
    overflow: hidden;
    background-color: transparent;
}

.ganimation-container .gframe {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url('../images/jubilee.png');
    animation: g-move-zoom-animation 2s infinite;
}

@keyframes g-move-zoom-animation {
    0% {
         
        opacity: 0.15;
    }
    50% {
         
        opacity: 1;
    }
    100% {
        
        opacity: 0.15;
    }
}

.g-text {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.g-text span {
    display: inline-block;
    animation: g-word-animation 2s infinite;
}

.g-text span:nth-child(1) {
    animation-delay: 0s;
}

.g-text span:nth-child(2) {
    animation-delay: 0.2s;
}

.g-text span:nth-child(3) {
    animation-delay: 0.4s;
}

.g-text span:nth-child(4) {
    animation-delay: 0.6s;
}

.g-text span:nth-child(5) {
    animation-delay: 0.8s;
}

.g-text span:nth-child(6) {
    animation-delay: 1s;
}

@keyframes g-word-animation {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}
/*New Award animation*/
.animation-container {
    position: relative;
    width: 200px; /* Set the size of the animation */
    height: 200px;
    overflow: hidden;
    background-color:transparent;
}

.animation-container .frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url('../images/awarde.png');
    animation: move-zoom-animation 6s infinite; /* Adjust the duration as needed */
}

.animation-container .text {
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.animation-container .text span {
    display: inline-block;
    animation: word-fade-animation 1s infinite ease-in-out;
}

.animation-container .text span:nth-child(1) {
    animation-delay: 0s;
}

.animation-container .text span:nth-child(2) {
    animation-delay: 0.3s;
}

.animation-container .text span:nth-child(3) {
    animation-delay: 0.6s;
}

.animation-container .text span:nth-child(4) {
    animation-delay: 0.9s;
}

.animation-container .text span:nth-child(5) {
    animation-delay: 1.2s;
}

.animation-container .text span:nth-child(6) {
    animation-delay: 1.5s;
}

@keyframes word-fade-animation {
    0% {
        opacity: 0.18;
        
    }
    50% {
        opacity: 1;
        
    }
    100% {
        opacity: 0.18;
         
    }
}

@keyframes move-zoom-animation {
    0% {
     
        opacity: 0.18;
    }
    50% {
       
        opacity: 1;
    }
    100% {
       
        opacity: 0.18;
    }
}

.award-text {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    animation: text-animation 2s infinite;
}

@keyframes text-animation {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}




  /*Golden Jubilee*/
  .jub{
    margin-top: 80px;
  }
  .animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #0044ff 0%,
    #eb8806 29%,
    #ff1361 67%,
    #5ceb23 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      font-size: 20px;
      overflow: hidden;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
 

/* Slideshow styles */
#schoolCarousel {
    position: relative;
    z-index: 1095;
    overflow: hidden;
}

/* Carousel items */
.carousel-item img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
}

/* Dynamic height for small devices */
@media (max-width: 768px) {
    .carousel-item img {
        max-height: 400px;
    }
}

@media (max-width: 480px) {
    .carousel-item img {
        max-height: 100px;
    }
}

/* Rounded image styling */
.round-img {
    width: 1200px;
    height: 400px;
    border-radius: 0;
    object-fit: cover;
    margin: 0 auto;
}

#img-rounded-border {
    border: 12px solid rgb(255, 255, 255);
    border-radius: 50px;
    width: 300px;
    height: auto;
}
.stann {
    float: right;
    top: 400px;
    width: 300px;
    display: flex;
    z-index: 15;
}
 
 
.overlay {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    transition: 0.5s ease;
    opacity: 0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
    z-index: 2;
    overflow: hidden;
}

/* logo bottom text animation */
p.logotextcontainer {
    text-shadow: 0 0 7px rgba(255,255,255,.3), 0 0 3px rgba(255,255,255,.3);
}

.logotextcontainer {
    color: #e5e5e5;
    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0;
    height: auto;
    
}

@media (max-width: 992px) {
    .logotextcontainer {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .logotextcontainer {
        font-size: 1.5rem;
    }

    .animation > div > div {
        font-family: 'Poppins', sans-serif;
        padding: 0.25rem 0.75rem;
        height: 2.81rem;
        margin-bottom: 2.81rem;
        display: inline-block;
    }
    }
.animation {
    height: 50px;
    overflow: hidden;
    margin-left: 1rem;
    border-radius: 25px;
}

.animation > div > div {
    padding: 0.25rem 0.75rem;
    height: 3.2rem;
    margin-bottom: 2.81rem;
    display: inline-block;
    border-radius: 25px;
}

.animation div:first-child {
    animation: text-animation 8s infinite;
}

.first div {
    background-image: radial-gradient(#12a86e,#00fd61) ;
}

.second div {
    background-image: radial-gradient(#f56607,#d8cb0e) ;
}

.third div {
    background-image: radial-gradient(#700cb3,#df00fd) ;
}

@keyframes text-animation {
    0% {margin-top: 0;}
    10% {margin-top: 0;}
    20% {margin-top: -4.62rem;}
    30% {margin-top: -4.62rem;}
    40% {margin-top: -10.24rem;}
    60% {margin-top: -10.24rem;}
    70% {margin-top: -4.62rem;}
    80% {margin-top: -4.62rem;}
    90% {margin-top: 0;}
    100% {margin-top: 0;}
}

/* Background color and cartoon images for sections */
#home {
    scroll-margin-top: 80px;
    background-color: #78b5d3;  background: linear-gradient(135deg, #22d35d, #467ee6);/* Light background color */
     /*background-image: url("../images/bg.png"); 
  
    background-image: url("./images/cartoon-home.jpg"); /* Cartoon image */
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center;
    color: #05e610;
    padding: 0px 0;
    display:block;
    height:max-content ;
    z-index: 555;
    margin-bottom: 0px;

}
/*Award Slogon*/

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.award-section {
  position: relative;
  width: 100%;
}

.award {
  display: block;
  margin: 0 auto;
  max-width: 100%; /* Ensures the image resizes to fit the column */
  height: auto; /* Maintains the aspect ratio */
}

.content {
  position: relative;
  text-align: center;
  margin-top: 10px; /* Adds spacing between the image and the text */
  width: 100%;
}

.h2-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2em; /* Adjusted for better fit */
  margin: 0;
}

.h2-layer:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #03a9f4;
}

.h2-layer:nth-child(2) {
  color: #03a9f4;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}
@media  (max-width:786px) {
    .content h2{font-size: 2em; }
}
@media  (max-width:480px) {
    .content h2 {font-size: 2em; }
}


/* FTop Carousel Settings */
.carousel-inner img {
    height: 500px; /* Adjust to your desired height */
    object-fit: cover; /* Ensures the images fill the container */
    width: 100%;
  }

/* nursery left  program */
@keyframes slideFade {
    0% {
        transform: translateX( 100%);
      opacity: 1;
    }
    50% {
        transform: translateX(-50%);
      opacity: 0;
    }
    100% {
      transform: translateX( - 50%);
      opacity: 1;
    }
  }
  
  #nursery {
    animation: slideFade 5s  ;
  }
  #primarys{
    scroll-behavior: smooth;
    animation: leftslideFade 5s;
   }
  @keyframes leftslideFade {
    0% {
        transform: translateX(-100%);
      opacity: 1;
    }
    50% {
        transform: translateX(50%);
      opacity: 0;
    }
    100% {
      transform: translateX(50%);
      opacity: 1;
    }
  }

/* Background color and cartoon images for sections */
#hometit {
    scroll-margin-top: 80px;
    background-color: #78b5d3; /* Light background color */
    background: linear-gradient(135deg, #22d35d, #467ee6);
    /*background-image: url("./images/cartoon-home.jpg"); /* Cartoon image */
    background-size:cover;
    background-repeat:inherit;
    background-position: center;
    color: #05e610;
    padding: 60px 0;
    display:flex;
    height:max-content ;
    z-index: 1000;
}
#sinc h4{
    padding-top: 0px;
    color:#FFC300;
}

#about {
    background: radial-gradient( #22d35d, #467ee6);
   /* background-image: url("./images/cartoon-about.jpg");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: justify;
    color: #ffffff;
    padding:  60px 0;
    max-width:100%; z-index: 1255;
    overflow: hidden;
}
/*Styling  academic test*/
#academic h3 {
    font-family: 'Comic Neue', sans-serif;
    font-size: 2.5rem;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 1rem;
    text-align: justify;
    overflow: none;
}

/* Paragraph Styling */
#academic p {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.125rem;
    color: #ffffff;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 1rem;
}
#academic {
     
    background-image: url("./images/cartoon-academic.png"); 
    background-image: linear-gradient(#36cc10,#087ac5);
    background-size:cover ;
    background-repeat: no-repeat;
    background-position: center;
    color: #ffffff;
    padding: 60px 0;    
    z-index: 665;
   
}
 

#ExtraCurriculam {
    
    background-image: linear-gradient(#0a6dee,#06db22);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: #ecd505;
    padding: 60px 0;
 overflow: hidden;  }


   
      
    #ExtraCurriculam h3 {
        font-family: 'Comic Neue', sans-serif;
        font-size: 2.5rem;
        color: #ffffff;
        font-weight: bold;
        margin-bottom: 1rem;
        text-align: justify;
    }
    
 
.section {
    padding:80px ; /* 0= 80px*/
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Welcome */
#welc {
    -webkit-text-fill-color: #d8f3c2;
    text-decoration-color: #0617ac;
    text-shadow: #0617ac;
    text-shadow: 1em;
}

/* Gallery zoom-in effect */
 

#ga img:hover {
    transform: scale(1.1);
    overscroll-behavior:initial;
    transition:all,ease-in-out;
    transition:3s;
    overflow-inline:visible;
}
#ga {
    transition: all 0.3s ease-in-out;
    background-image: radial-gradient(#0f6be4,#2fdba2);
}

#contact{
    background-image: radial-gradient(#0f6be4 ,#23e63d,#f8be00);

}
#counter{
    background-image: radial-gradient(45deg,#0f6be4 ,#23e63d,#f8be00);
}






#academic {
    font-family: Arial, sans-serif;
    
    color: #ffffff;
}

/* h2, h3e  {
    text-align: center;
    animation: fadeIn 2s ease-in-out;
}

p, li {
    line-height: 1.6;
    color:#ffffff;
} 

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes scaleUp {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes rotateIn {
    from { transform: rotate(-360deg); opacity: 0; }
    to { transform: rotate(0deg); opacity: 1; }
}

@keyframes fadeInUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#overview-nursery {
    animation: slideInLeft 2s ease-in-out;
}

#core-nursery {
    animation: slideInRight 2s ease-in-out;
}

#daily-routine {
    animation: fadeInUp 2s ease-in-out;
}

#overview-primary {
    animation: rotateIn 2s ease-in-out;
}

#core-primary {
    animation: scaleUp 2s ease-in-out;
}

#additional-programs.section.visible {
    animation: slideInLeft 2s ease-in-out;
}

#extracurricular {
    animation: slideInRight 2s ease-in-out;
}

#assessment {
    animation: zoomIn 2s ease-in-out;
}

#teaching-philosophy {
    animation: fadeIn 2s ease-in-out;
}

#parent-involvement {
    animation: fadeInUp 2s ease-in-out;
} 

  Styling list items  
ul {
    padding-left: 20px;
} 

/*Head Section slogan Text Animation*/
.text_box {
    position: relative;
    font-weight: 200;
    font-size: 2em;
    color: rgb(0, 233, 0);
    font-family: 'Charmonman', cursive;
}

.text_box .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.2em;
    padding-right: 0.05em;
    padding-bottom: 0.1em;
    overflow: hidden;
}
.letter{

    scrollbar-base-color: #0617ac;
    
}
.text_box .letter {
    transform-origin: 50% 100%;
    display: inline-block;
    line-height: 1em;
}
.text_box {
    font-size: 24px; /* Default size for larger screens */
    word-wrap: break-word;
}

/* Adjust font size for smaller screens */
@media (max-width: 768px) {
    .text_box {
        font-size: 18px; /* Adjust to smaller size on mobile */
    }
}

@media (max-width: 480px) {
    .text_box {
        font-size: 16px; /* Further reduce size on very small screens */
        line-height: 1.4; /* Improve readability */
    }
}

/*Rose Petal Animation*/
.petal-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 999;
}

.petal {
    position: absolute;
    width: 50px;
    height: auto;
    opacity: 0;
    pointer-events: none;
    animation: fall linear forwards;
}

@keyframes fall {
    0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 1; }
}

 

/* Counter Start**/
.counter-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    max-width: fit-content;
    width: 100%;
    padding: 20px;
}
.counter-card {
    padding: 30px;
    border-radius: 10px ;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s;
    color: white;
}
.counter-card:hover {
    transform: translateY(-5px);
}
.count {
    font-size: 2.5rem;
    color: #ffffff;
}
.label {
    font-size: 1.2rem;
    color: #ffffff;
}
/* Adjust font size for smaller screens */
@media (max-width: 768px) {
    .label {
        font-size: 1.2rem; /* Adjust to smaller size on mobile */
    }
}

@media (max-width: 480px) {
    .label {
        font-size: 0.5rem; /* Further reduce size on very small screens */
    }
}
 

/* Rainbow colors for each card */
.counter-card1 { background-color: #FF5733; 
    border-top-left-radius: 30px ;
    border-bottom-right-radius: 30px;} /* Red */
  .counter-card2 { background-color: #FF8D1A;
    border-top-left-radius: 30px ;
   border-bottom-right-radius: 30px; } /* Orange */
    .counter-card3 { background-color: #FFC300;
        border-top-left-radius: 30px ;
        border-bottom-right-radius: 30px; ; } /* Yellow */
    .counter-card4 { background-color: #4CAF50;
        border-top-left-radius: 30px ;
        border-bottom-right-radius: 30px;} /* Green */
    .counter-card5 { background-color: #3498DB; 
        border-top-left-radius: 30px ;
        border-bottom-right-radius: 30px;} /* Blue */
    .counter-card6 { background-color:  indigo; 
        border-top-left-radius: 30px ;
        border-bottom-right-radius: 30px;} /* Purple */

  /*Tooltip to  card*/

  .tooltip {
    background-image: radial-gradient(#2fbe3b,#0cdbdb); /* Dark background */
    color: #fff; /* Light text */
    border-radius: 5px;
    font-size: 13px;
    padding: 8px;
     
    transition: all,ease-in-out;
    transition-duration: 3s;
}

.tooltip.bs-tooltip-top .tooltip-arrow {
    border-top-color: #cf1212;
}



/*Image Gallery Start*/
/* The Modal (background) */
.gallery {
    transition: all 0.3s ease-in-out;
}

/* Expanded gallery section when modal is open */
.gallery.modal-open {
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    padding-top: 5rem;
}

/* Modal navigation button styles */
.btn-prev,
.btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
}

.btn-prev {
    left: 10px;
}

.btn-next {
    right: 10px;
}

.btn-prev:hover,
.btn-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/*#modalAltText {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff; /* Optional: Change text color  
    background-color: rgba(0, 0, 0, 0.5); /* Optional: Add background for better visibility  
    padding: 5px;
    font-size: 16px;  Optional: Adjust font size e
}*/

/*Gallery ENds*/
 .myImg:hover{  opacity: 0.8; /* Slightly enlarge the image on hover */
overflow: inherit;}
 #adcl{

    color:#750bcc;
 }
 #adcl h5,p{
    color: #fdfff1;
    
 }
 #marg{
    max-width: 100%;
    height: 300px;
    animation: ease-in, .03s ;
    border-top-left-radius: 20% ;
 }
 #margImg{

    height: 300px;
    width: 300px;
 }
 /*contact*/
 .contact-info p {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.5;
  }
   

    /* General Layout Styles Slider Event */
    .caro img.round-img {
        display: block;
        margin: 0 0;
        width: 100%;
        height: 400px;
        border-radius:10px;
        background-color: #f8f9fa; /* Fallback color for missing images */
    }
    /*Slider*/
    .notifications {
        height: 600px;
        overflow-y: auto;
        border: 1px solid #ddd;
        padding: 15px;
    }

    .sticky-header {
        position: sticky;
        top: 0;
        background: #f8f9fa;
        z-index: 2555;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    .slider img {
        border-radius: 25px;
        width: 100%;
        height: 600px;
        object-fit: cover;
    }

    .slider {

        border: 0px solid #ddd;
        border-radius: 25px;
        overflow: hidden;
    }

    .notifications {
        position: sticky;
        top: 0;
        background-image: -moz-radial-gradient(#c403b4,#3b2fec);
        
        padding: 15px;
        border: 1px solid #ddd;
        height: 600px;
        overflow: hidden;
        width: 100px;
        
    }

    .notifications h4 {
        background-color: #007bff;
        color: white;
        padding: 10px;
        text-align: center;
        margin: -15px -15px 15px -15px;
    }

    .marquee-container {
        height: 100%;
        overflow-y: hidden;
        overflow-x:scroll;
        position: relative;
        word-wrap: break-word;
    }

    .marquee {
        color: rgb(1, 31, 18);
        display: block;
        white-space: nowrap;
        animation: marqueeY 10s linear infinite;
        z-index: 2000;
        
    }

    .marquee p {
        color: rgb(1, 31, 18);
        display: block;
        white-space:normal;
        animation: marqueeY 13s linear infinite;
        z-index: 2000;
        width:430px;
         
    }
    .marquee:hover {
        animation-play-state: paused;
    }

    @keyframes marqueeY {
        0% {
            transform: translateY(100%);
        }
        100% {
            transform: translateY(-100%);
        }
    }

    .carousel-caption {
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 5px;
        border-radius: 5px;
        border-top-left-radius: 55px;
        border-bottom-right-radius:55px ;
    }

    .carousel-caption {
        position :absolute;
        align-items: center;
        bottom: 20px;
        left: 50%;
        
        transform: translateX(-20%);
    }
/*Body of the page*/
body {
    scroll-behavior: smooth;
}

/* navi Bar background */
.navbar {
   
    background: linear-gradient(135deg, #2adf48, #381dd3);
}

/* Hover effect for navigation links */
a.nav-link:hover {
    color: #0c2ce4;
    text-decoration: rgb(0, 162, 255);
    transform: scale(1.1);
    background-image:linear-gradient(45deg,  #f6fa06, #1add13);
}
 
.navbar a.active {
    color: #ff0000;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-decoration:double;
    background-image:linear-gradient(45deg,#ff0783, #fa650e);
    transition: all,ease-in-out;
}
.navbar-brand{

    font: 1em sans-serif;
} 

a.nav-link {
    color: #0b4bfc;
    font-weight: bold;
}

.navbar a {
    color: rgb(255, 255, 255) !important;
    text-align: start;
}

/*rainbow*/
.rainbow-text {
    font-size: 3em;
    font-weight: bold;
    background: linear-gradient(
      90deg,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet,
      red
    );
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow 6s linear infinite;
  }
  
  @keyframes rainbow {
    0% {
      background-position: 0%;
    }
    100% {
      background-position: 100%;
    }
  }
 /* Home Section*/
/*Golden Jubilee*/
/* Centering Content */
#gold {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.Golderjubilee{
    position:fixed;
    display: block;
    max-width: 250px;
    height:280px;
    overflow: hidden;
}
 /* General Styling */
 .logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-bottom: 0;
}

.logo {
    max-width: 310px;
    height: auto;
    padding: 20px;
    opacity: 1;
    transform-origin: bottom;
    margin-bottom: 0%;
}

  

.award-section {
    display: block;
    align-items: center;
    flex-direction: column; /* Mobile-first approach */
    text-align: center;
}

.award {
    max-width: 300px;
    margin-bottom: 5px;
    display: block;
}

.awardsp {
    font-size: 14px;
    color: #fcfcfc;
    box-shadow: #ec035d;
}

/* Responsive Adjustments */
@media (min-width: 768px) {
    .logo-container {
        flex-direction: row;
    }

    .award-section {
        flex-direction: row;
        text-align:end ;
    }

    .awardsp {
        font-size: 16px;
        margin-left: 10px;
        text-align:end ;
    }
}

/*Gold animation*/

.ganimation-container {
    position: relative;
    width: 100%; /* Ensure it takes full column width */
    max-width: 200px; /* Adjust the size of the animation */
    height: 200px;
    overflow: hidden;
    background-color: transparent;
}

.ganimation-container .gframe {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url('../images/jubilee.png');
    animation: g-move-zoom-animation 2s infinite;
}

@keyframes g-move-zoom-animation {
    0% {
         
        opacity: 0.15;
    }
    50% {
         
        opacity: 1;
    }
    100% {
        
        opacity: 0.15;
    }
}

.g-text {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.g-text span {
    display: inline-block;
    animation: g-word-animation 2s infinite;
}

.g-text span:nth-child(1) {
    animation-delay: 0s;
}

.g-text span:nth-child(2) {
    animation-delay: 0.2s;
}

.g-text span:nth-child(3) {
    animation-delay: 0.4s;
}

.g-text span:nth-child(4) {
    animation-delay: 0.6s;
}

.g-text span:nth-child(5) {
    animation-delay: 0.8s;
}

.g-text span:nth-child(6) {
    animation-delay: 1s;
}

@keyframes g-word-animation {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}
/*New Award animation*/
.animation-container {
    position: relative;
    width: 200px; /* Set the size of the animation */
    height: 200px;
    overflow: hidden;
    background-color:transparent;
}

.animation-container .frame {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url('../images/awarde.png');
    animation: move-zoom-animation 6s infinite; /* Adjust the duration as needed */
}

.animation-container .text {
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.animation-container .text span {
    display: inline-block;
    animation: word-fade-animation 1s infinite ease-in-out;
}

.animation-container .text span:nth-child(1) {
    animation-delay: 0s;
}

.animation-container .text span:nth-child(2) {
    animation-delay: 0.3s;
}

.animation-container .text span:nth-child(3) {
    animation-delay: 0.6s;
}

.animation-container .text span:nth-child(4) {
    animation-delay: 0.9s;
}

.animation-container .text span:nth-child(5) {
    animation-delay: 1.2s;
}

.animation-container .text span:nth-child(6) {
    animation-delay: 1.5s;
}

@keyframes word-fade-animation {
    0% {
        opacity: 0.18;
        
    }
    50% {
        opacity: 1;
        
    }
    100% {
        opacity: 0.18;
         
    }
}

@keyframes move-zoom-animation {
    0% {
     
        opacity: 0.18;
    }
    50% {
       
        opacity: 1;
    }
    100% {
       
        opacity: 0.18;
    }
}

.award-text {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    animation: text-animation 2s infinite;
}

@keyframes text-animation {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}




  /*Golden Jubilee*/
  .jub{
    margin-top: 80px;
  }
  .animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #0044ff 0%,
    #eb8806 29%,
    #ff1361 67%,
    #5ceb23 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      font-size: 20px;
      overflow: hidden;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
 

/* Slideshow styles */
#schoolCarousel {
    position: relative;
    z-index: 1095;
    overflow: hidden;
}

/* Carousel items */
.carousel-item img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
}

/* Dynamic height for small devices */
@media (max-width: 768px) {
    .carousel-item img {
        max-height: 400px;
    }
}

@media (max-width: 480px) {
    .carousel-item img {
        max-height: 100px;
    }
}

/* Rounded image styling */
.round-img {
    width: 1200px;
    height: 400px;
    border-radius: 0;
    object-fit: cover;
    margin: 0 auto;
}

#img-rounded-border {
    border: 12px solid rgb(255, 255, 255);
    border-radius: 50px;
    width: 300px;
    height: auto;
}
.stann {
    float: right;
    top: 400px;
    width: 300px;
    display: flex;
    z-index: 15;
}
 
 
.overlay {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    transition: 0.5s ease;
    opacity: 0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
    z-index: 2;
    overflow: hidden;
}

/* logo bottom text animation */
p.logotextcontainer {
    text-shadow: 0 0 7px rgba(255,255,255,.3), 0 0 3px rgba(255,255,255,.3);
}

.logotextcontainer {
    color: #e5e5e5;
    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0;
    height: auto;
    
}

@media (max-width: 992px) {
    .logotextcontainer {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .logotextcontainer {
        font-size: 1.5rem;
    }

    .animation > div > div {
        font-family: 'Poppins', sans-serif;
        padding: 0.25rem 0.75rem;
        height: 2.81rem;
        margin-bottom: 2.81rem;
        display: inline-block;
    }
    }
.animation {
    height: 50px;
    overflow: hidden;
    margin-left: 1rem;
    border-radius: 25px;
}

.animation > div > div {
    padding: 0.25rem 0.75rem;
    height: 3.2rem;
    margin-bottom: 2.81rem;
    display: inline-block;
    border-radius: 25px;
}

.animation div:first-child {
    animation: text-animation 8s infinite;
}

.first div {
    background-image: radial-gradient(#12a86e,#00fd61) ;
}

.second div {
    background-image: radial-gradient(#f56607,#d8cb0e) ;
}

.third div {
    background-image: radial-gradient(#700cb3,#df00fd) ;
}

@keyframes text-animation {
    0% {margin-top: 0;}
    10% {margin-top: 0;}
    20% {margin-top: -4.62rem;}
    30% {margin-top: -4.62rem;}
    40% {margin-top: -10.24rem;}
    60% {margin-top: -10.24rem;}
    70% {margin-top: -4.62rem;}
    80% {margin-top: -4.62rem;}
    90% {margin-top: 0;}
    100% {margin-top: 0;}
}

/* Background color and cartoon images for sections */
#home {
    scroll-margin-top: 80px;
    background-color: #78b5d3;  background: linear-gradient(135deg, #22d35d, #467ee6);/* Light background color */
     /*background-image: url("../images/bg.png"); 
  
    background-image: url("./images/cartoon-home.jpg"); /* Cartoon image */
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center;
    color: #05e610;
    padding: 0px 0;
    display:block;
    height:max-content ;
    z-index: 555;
    margin-bottom: 0px;

}
/*Award Slogon*/

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.award-section {
  position: relative;
  width: 100%;
}

.award {
  display: block;
  margin: 0 auto;
  max-width: 100%; /* Ensures the image resizes to fit the column */
  height: auto; /* Maintains the aspect ratio */
}

.content {
  position: relative;
  text-align: center;
  margin-top: 10px; /* Adds spacing between the image and the text */
  width: 100%;
}

.h2-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2em; /* Adjusted for better fit */
  margin: 0;
}

.h2-layer:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #03a9f4;
}

.h2-layer:nth-child(2) {
  color: #03a9f4;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}
@media  (max-width:786px) {
    .content h2{font-size: 2em; }
}
@media  (max-width:480px) {
    .content h2 {font-size: 2em; }
}


/* FTop Carousel Settings */
.carousel-inner img {
    height: 500px; /* Adjust to your desired height */
    object-fit: cover; /* Ensures the images fill the container */
    width: 100%;
  }

/* nursery left  program */
@keyframes slideFade {
    0% {
        transform: translateX( 100%);
      opacity: 1;
    }
    50% {
        transform: translateX(-50%);
      opacity: 0;
    }
    100% {
      transform: translateX( - 50%);
      opacity: 1;
    }
  }
  
  #nursery {
    animation: slideFade 5s  ;
  }
  #primarys{
    scroll-behavior: smooth;
    animation: leftslideFade 5s;
   }
  @keyframes leftslideFade {
    0% {
        transform: translateX(-100%);
      opacity: 1;
    }
    50% {
        transform: translateX(50%);
      opacity: 0;
    }
    100% {
      transform: translateX(50%);
      opacity: 1;
    }
  }

/* Background color and cartoon images for sections */
#hometit {
    scroll-margin-top: 80px;
    background-color: #78b5d3; /* Light background color */
    background: linear-gradient(135deg, #22d35d, #467ee6);
    /*background-image: url("./images/cartoon-home.jpg"); /* Cartoon image */
    background-size:cover;
    background-repeat:inherit;
    background-position: center;
    color: #05e610;
    padding: 60px 0;
    display:flex;
    height:max-content ;
    z-index: 1000;
}
#sinc h4{
    padding-top: 0px;
    color:#FFC300;
}

#about {
    background: radial-gradient( #22d35d, #467ee6);
   /* background-image: url("./images/cartoon-about.jpg");*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: justify;
    color: #ffffff;
    padding:  60px 0;
    max-width:100%; z-index: 1255;
    overflow: hidden;
}
/*Styling  academic test*/
#academic h3 {
    font-family: 'Comic Neue', sans-serif;
    font-size: 2.5rem;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 1rem;
    text-align: justify;
    overflow: none;
}

/* Paragraph Styling */
#academic p {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.125rem;
    color: #ffffff;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 1rem;
}
#academic {
     
    background-image: url("./images/cartoon-academic.png"); 
    background-image: linear-gradient(#36cc10,#087ac5);
    background-size:cover ;
    background-repeat: no-repeat;
    background-position: center;
    color: #ffffff;
    padding: 60px 0;    
    z-index: 665;
   
}
 

#ExtraCurriculam {
    
    background-image: linear-gradient(#0a6dee,#06db22);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: #ecd505;
    padding: 60px 0;
 overflow: hidden;  }


   
      
    #ExtraCurriculam h3 {
        font-family: 'Comic Neue', sans-serif;
        font-size: 2.5rem;
        color: #ffffff;
        font-weight: bold;
        margin-bottom: 1rem;
        text-align: justify;
    }
    
 
.section {
    padding:80px ; /* 0= 80px*/
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Welcome */
#welc {
    -webkit-text-fill-color: #d8f3c2;
    text-decoration-color: #0617ac;
    text-shadow: #0617ac;
    text-shadow: 1em;
}

/* Gallery zoom-in effect */
 

#ga img:hover {
    transform: scale(1.1);
    overscroll-behavior:initial;
    transition:all,ease-in-out;
    transition:3s;
    overflow-inline:visible;
}
#ga {
    transition: all 0.3s ease-in-out;
    background-image: radial-gradient(#0f6be4,#2fdba2);
}

#contact{
    background-image: radial-gradient(#0f6be4 ,#23e63d,#f8be00);

}
#counter{
    background-image: radial-gradient(45deg,#0f6be4 ,#23e63d,#f8be00);
}

footer {
    background: linear-gradient(135deg, #22d35d, #467ee6);
    color: white;
    padding: 20px;
    text-align: center;
}




#academic {
    font-family: Arial, sans-serif;
    
    color: #ffffff;
}

/* h2, h3e  {
    text-align: center;
    animation: fadeIn 2s ease-in-out;
}

p, li {
    line-height: 1.6;
    color:#ffffff;
} 

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes scaleUp {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes rotateIn {
    from { transform: rotate(-360deg); opacity: 0; }
    to { transform: rotate(0deg); opacity: 1; }
}

@keyframes fadeInUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#overview-nursery {
    animation: slideInLeft 2s ease-in-out;
}

#core-nursery {
    animation: slideInRight 2s ease-in-out;
}

#daily-routine {
    animation: fadeInUp 2s ease-in-out;
}

#overview-primary {
    animation: rotateIn 2s ease-in-out;
}

#core-primary {
    animation: scaleUp 2s ease-in-out;
}

#additional-programs.section.visible {
    animation: slideInLeft 2s ease-in-out;
}

#extracurricular {
    animation: slideInRight 2s ease-in-out;
}

#assessment {
    animation: zoomIn 2s ease-in-out;
}

#teaching-philosophy {
    animation: fadeIn 2s ease-in-out;
}

#parent-involvement {
    animation: fadeInUp 2s ease-in-out;
} 

  Styling list items  
ul {
    padding-left: 20px;
} 

/*Head Section slogan Text Animation*/
.text_box {
    position: relative;
    font-weight: 200;
    font-size: 2em;
    color: rgb(0, 233, 0);
    font-family: 'Charmonman', cursive;
}

.text_box .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.2em;
    padding-right: 0.05em;
    padding-bottom: 0.1em;
    overflow: hidden;
}
.letter{

    scrollbar-base-color: #0617ac;
    
}
.text_box .letter {
    transform-origin: 50% 100%;
    display: inline-block;
    line-height: 1em;
}
.text_box {
    font-size: 24px; /* Default size for larger screens */
    word-wrap: break-word;
}

/* Adjust font size for smaller screens */
@media (max-width: 768px) {
    .text_box {
        font-size: 18px; /* Adjust to smaller size on mobile */
    }
}

@media (max-width: 480px) {
    .text_box {
        font-size: 16px; /* Further reduce size on very small screens */
        line-height: 1.4; /* Improve readability */
    }
}

/*Rose Petal Animation*/
.petal-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: 999;
}

.petal {
    position: absolute;
    width: 50px;
    height: auto;
    opacity: 0;
    pointer-events: none;
    animation: fall linear forwards;
}

@keyframes fall {
    0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 1; }
}

 

/* Counter Start**/
.counter-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    max-width: fit-content;
    width: 100%;
    padding: 20px;
}
.counter-card {
    padding: 30px;
    border-radius: 10px ;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s;
    color: white;
}
.counter-card:hover {
    transform: translateY(-5px);
}
.count {
    font-size: 2.5rem;
    color: #ffffff;
}
.label {
    font-size: 1.2rem;
    color: #ffffff;
}
/* Adjust font size for smaller screens */
@media (max-width: 768px) {
    .label {
        font-size: 1.2rem; /* Adjust to smaller size on mobile */
    }
}

@media (max-width: 480px) {
    .label {
        font-size: 0.5rem; /* Further reduce size on very small screens */
    }
}
 

/* Rainbow colors for each card */
.counter-card1 { background-color: #FF5733; 
    border-top-left-radius: 30px ;
    border-bottom-right-radius: 30px;} /* Red */
  .counter-card2 { background-color: #FF8D1A;
    border-top-left-radius: 30px ;
   border-bottom-right-radius: 30px; } /* Orange */
    .counter-card3 { background-color: #FFC300;
        border-top-left-radius: 30px ;
        border-bottom-right-radius: 30px; ; } /* Yellow */
    .counter-card4 { background-color: #4CAF50;
        border-top-left-radius: 30px ;
        border-bottom-right-radius: 30px;} /* Green */
    .counter-card5 { background-color: #3498DB; 
        border-top-left-radius: 30px ;
        border-bottom-right-radius: 30px;} /* Blue */
    .counter-card6 { background-color:  indigo; 
        border-top-left-radius: 30px ;
        border-bottom-right-radius: 30px;} /* Purple */

  /*Tooltip to  card*/

  .tooltip {
    background-image: radial-gradient(#2fbe3b,#0cdbdb); /* Dark background */
    color: #fff; /* Light text */
    border-radius: 5px;
    font-size: 13px;
    padding: 8px;
     
    transition: all,ease-in-out;
    transition-duration: 3s;
}

.tooltip.bs-tooltip-top .tooltip-arrow {
    border-top-color: #cf1212;
}



/*Image Gallery Start*/
/* The Modal (background) */
.gallery {
    transition: all 0.3s ease-in-out;
}

/* Expanded gallery section when modal is open */
.gallery.modal-open {
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    padding-top: 5rem;
}

/* Modal navigation button styles */
.btn-prev,
.btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
}

.btn-prev {
    left: 10px;
}

.btn-next {
    right: 10px;
}

.btn-prev:hover,
.btn-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/*#modalAltText {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff; /* Optional: Change text color  
    background-color: rgba(0, 0, 0, 0.5); /* Optional: Add background for better visibility  
    padding: 5px;
    font-size: 16px;  Optional: Adjust font size e
}*/

/*Gallery ENds*/
 .myImg:hover{  opacity: 0.8; /* Slightly enlarge the image on hover */
overflow: inherit;}
 #adcl{

    color:#750bcc;
 }
 #adcl h5,p{
    color: #fdfff1;
    
 }
 #marg{
    max-width: 100%;
    height: 300px;
    animation: ease-in, .03s ;
    border-top-left-radius: 20% ;
 }
 #margImg{

    height: 300px;
    width: 300px;
 }
 /*contact*/
 .contact-info p {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.5;
  }
   

    /* General Layout Styles Slider Event */
    .caro img.round-img {
        display: block;
        margin: 0 0;
        width: 100%;
        height: 400px;
        border-radius:10px;
        background-color: #f8f9fa; /* Fallback color for missing images */
    }
    /*Slider*/
    .notifications {
        height: 600px;
        overflow-y: auto;
        border: 1px solid #ddd;
        padding: 15px;
    }

    .sticky-header {
        position: sticky;
        top: 0;
        background: #f8f9fa;
        z-index: 2555;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    .slider img {
        border-radius: 25px;
        width: 100%;
        height: 600px;
        object-fit: cover;
    }

    .slider {

        border: 0px solid #ddd;
        border-radius: 25px;
        overflow: hidden;
    }

   .notifications {
    position: sticky;
    top: 0;
    background-image: -moz-radial-gradient(#c403b4, #3b2fec);
    padding: 15px;
    border: 1px solid #ddd;
    height: 600px;
    overflow: hidden;
    width: 100px;
}

.notifications h4 {
    background-color: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
    margin: -15px -15px 15px -15px;
}

.marquee-container {
    height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    position: relative;
    word-wrap: break-word;
}

.marquee {
    color: rgb(1, 31, 18);
    display: block;
    white-space: nowrap;
    animation: marqueeY 10s linear infinite;
    z-index: 2000;
}

.marquee p {
    color: rgb(1, 31, 18);
    display: block;
    white-space: normal;
    animation: marqueeY 13s linear infinite;
    z-index: 2000;
    width: 430px;
}

.marquee:hover {
    animation-play-state: paused;
}

@keyframes marqueeY {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .notifications {
        width: 100%;
        height: auto;
        padding: 10px;
    }

    .notifications h4 {
        font-size: 1rem;
        padding: 8px;
    }

    .marquee-container {
        height: auto;
        overflow-y: scroll;
    }

    .marquee {
        white-space: normal;
        animation: none; /* Disable animation on smaller screens */
    }

    .marquee p {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .notifications {
        padding: 8px;
    }

    .notifications h4{
        font-size: 0.9rem;
        padding: 5px;
    }

    .marquee p {
        font-size: 0.8rem;
    }
}


    .carousel-caption {
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 5px;
        border-radius: 5px;
        border-top-left-radius: 55px;
        border-bottom-right-radius:55px ;
    }

    .carousel-caption {
        position :absolute;
        align-items: center;
        bottom: 20px;
        left: 50%;
        
        transform: translateX(-20%);
    }
    @media (max-width: 768px) {
        .carousel-caption h5 {
            font-size: 1rem;
        }
        .carousel-caption p {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 576px) {
        .carousel-caption h5 {
            font-size: 0.9rem;
        }
        .carousel-caption p {
            font-size: 0.8rem;
        }
    }
    
    
    footer {
    background: linear-gradient(135deg, #22d35d, #467ee6);
    color: white;
    padding: 20px;
    text-align: center;
}