/* npx @tailwindcss/cli -i ./assets/style/style.css -o ./assets/style/output.css --watch */


@import "tailwindcss";

html{
  scroll-behavior: smooth;
}

@layer component{

  h1{
    @apply text-3xl md:text-4xl xl:text-6xl  uppercase font-bold leading-normal
  }
  .large-heading{
    @apply  uppercase  text-2xl md:text-4xl lg:text-[3rem] xl:text-[3.3rem]  text-center
  }
  h2{
    @apply text-2xl  md:text-4xl lg:text-[3rem] xl:text-[3.3rem]  font-bold uppercase
  }
  .imgSliders-heading{
    @apply text-center text-white text-2xl md:text-5xl font-bold uppercase
  }
  h3{
    @apply text-2xl md:text-3xl lg:text-[2rem] xl:text-[2.5rem]  font-bold  
  }
  h4{
  @apply font-semibold text-lg md:text-xl lg:text-2xl

}
  h5{
    @apply mb-3 uppercase text-base
  }
  p{
    @apply text-xl lg:text-[1.2rem]/10 xl:text-[1.5rem]/10
  }
  .slider-img{
    @apply w-full h-full object-cover filter brightness-75
  }
  .newsletter input{
    @apply bg-white flex-1 border placeholder-black border-black px-7 py-3 rounded-none focus:outline-none
  }
  .footer-text{
    @apply text-sm  leading-relaxed
  }
  .footer-link{
    @apply hover:text-[#21B803] underline
  }
  .copyright-text{
    @apply  text-center md:text-end mt-4 md:mt-0  md:mr-20 text-sm 
  }

  .active-link{
    @apply text-[#21B803];
  }
   .mobile-link , .nav-link{
    @apply uppercase   hover:text-[#21B803];
  }
  .button{
    @apply inline-block px-5 mt-2 text-base cursor-pointer py-2 border-2   rounded-full hover:bg-[#21B803] hover:text-white transition
  }
   .btn{
    @apply inline-flex justify-center items-center uppercase cursor-pointer text-lg text-white  bg-[#21B803] rounded-full px-10 py-2.5  hover:bg-green-600 transition duration-300 

}

.five-pillars .pillar{
  @apply  relative  rounded-4xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 cursor-pointer min-h-[400px]
}

.five-pillars .pillar .card-image{
  @apply w-full h-full object-cover
}
.five-pillars .pillar .heading{
  @apply text-white font-bold max-w-[150px] text-xl
}
.leaders .leader-card{
  @apply    max-w-[400px] h-auto

}
.leaders .leader-card img{
  @apply w-full h-auto rounded-4xl
}


.funds .fund-card {
  max-width: 380px;
  height: 350px;
}
.funds .fund-card img {

  @apply h-full w-full bg-cover rounded-3xl
}

.funds .fund-card:hover img{
  transform: scale(1.1);
}
 .ministry-card:hover .card-image {
            transform: scale(1.1);
        }

.funds .fund-card h3{
  @apply text-xl md:text-2xl lg:text-3xl text-white underline max-w-[300px] uppercase
}

.cardText{
  @apply overflow-hidden transition-all duration-1500 ease-in-out max-h-34 lg:max-h-32 space-y-2
}
#menuToggleBtn{
  @apply cursor-pointer

}

}

     
body{
 background-color: #F2F2F2;
  font-family: poppins; 
  overflow-x: hidden;
}
#activeLink {
  color: #21B803; /* Active link color */
  
}
.heading{
    font-family: itc-avant-garde-gothic-pro, sans-serif;
}

    .slide {
      transition: transform 0.5s ease-in-out;
    }
     .icon-svg {
    transition: fill 0.3s ease;
  }

#mainNavbar {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* smoother easing */
}

#mainNavbar.fixed {
  animation: fadeInDown 0.8s ease-out; /* optional fade-in */
}

.space p{
  margin-top: 10px !important;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

   .card-image {
            transition: transform 0.3s ease;
        }
        
        .ministry-card:hover .card-image {
            transform: scale(1.1);
        }


[id] {
  scroll-margin-top: 200px;
}
.map-wrapper {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .map-iframe {
    height: 400px;
  }
}

@media (max-width: 1024px) {
  .map-iframe {
    height: 600px;
  }
}
.white-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #F2F2F2;
  z-index: 10;
  pointer-events: none; /* Optional: allows clicking map under this section */
}

.map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: relative;
  z-index: 1;
}

/* ///////////give page accordian///////////////////// */

.accordion-item {
  border: 2px solid gray;
  border-radius: 20px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-top: 20px;
}

 .dropdown-icon svg{
  margin-left: 10px;
 
}
/* Header styling */
.accordion-header {
  width: 100%;
  
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  font-weight: 500;
  justify-content: start;

  align-items: center;
  padding: 14px 18px;
  text-align: left;
  transition: background-color 0.3s ease;
}

.accordion-header:hover {
  background-color: #f8f8f8;
}

/* Dropdown icon rotation */
.dropdown-icon svg{
  transition: transform 0.3s ease;
}

.accordion-item.active .dropdown-icon svg {
  transform: rotate(180deg);
}

/* Hidden text area */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

/* When opened */
.accordion-item.active .accordion-content {
  min-height: 150px; /* enough for text */
  padding: 10px 18px 18px;
}