/* Custom CSS for transparent navbar */
.bglight{background-color:#f9fcff}
.bgyellow{background-color: #d4af36;}
.textyellow{color:#d4af36}
.textdark{color:#172b54}
  
  
.navbar-custom {
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    border-radius: 10px; /* Rounded corners */
    margin:.5%; /* Margin around the navbar */
    backdrop-filter: blur(18px); /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari support */
}



     .navbar-nav .nav-link {
        position: relative;
        display: inline-block;
        text-decoration: none;
        color: white; /* Ensure text color matches your design */
        transition: color 0.3s ease; /* Smooth color transition */
      }
    
      .navbar-nav .nav-link:hover {
        color: #f1c40f; /* Optional: Change text color on hover */
      }
    
      .navbar-nav .nav-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px; /* Thickness of the underline */
        background-color: #f1c40f; /* Color of the underline */
        transition: width 0.3s ease; /* Smooth animation */
      }
    
      .navbar-nav .nav-link:hover::before {
        width: 100%; /* Extend the underline on hover */
      }

      /* Initially visible */
      .navbar {
        transition: top 0.3s;
      }
      
      /* When scrolling down, hide the navbar */
      .navbar-hidden {
        top: -100px; /* Adjust as per your navbar height */
      }
      
      /* When scrolling up, show the navbar */
      .navbar-visible {
        top: 0;
      }
      
      


/* Full-screen hero section */
.hero-section {
    height: 100vh; /* Full viewport height */
    background: url(./assts/img/1.jpg) no-repeat center center/cover; /* Placeholder image */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white; /* Text color */
}

.hero-section h1 {
    font-size: 4rem; /* Large heading */
    font-weight: bold;
}

.hero-section p {
    font-size: 1.5rem; /* Subheading */
    margin-top: 20px;
}

/*hero text animation*/
@keyframes scaleUp {
    0%, 100% { transform: scale(.9); }
    50% { transform: scale(1); }
}

.atms {
    display: inline-block;
    font-size: 2.5rem;
    font-weight: bold;
    animation: scaleUp 4s infinite ease-in-out;
}


/* about us section*/
.custom-translate {
    top:40%;
    left:50% 
  }
  @keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
.bouncing-image {
    animation: bounce 1s infinite;
}

.aul{list-style: none;}
.aul>li{padding:2%}



/* footer start*/
ul {
    list-style-type: none; /* Removes the bullet points */
    padding: 0; /* Optional: Removes default left padding */
    margin: 0; /* Optional: Removes default top and bottom margin */
  }
  
  ul a{text-decoration: none;
  color:#fff}
  
  .footer h5 {
    font-weight: bold;
  }
  
  .footer a {
    color: #f8f9fa;
    transition: color 0.3s ease;
  }
  
  .footer a:hover {
    color: #f8d15d;
  }
  .hov:hover{color:red}

  /*pastor mess start*/
  .pastormess{
   background:url(./assts/img/6.jpg) no-repeat center center/cover;
  
   background-size: cover;  /* Ensures the image covers the div */
            background-position: center;
            background-attachment: fixed; /* Optional: Parallax effect */
            min-height: 100vh; /* Full viewport height */
          
            
           
  
   
}

@media (max-width: 768px) {
    .pastormess {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction:column;
        text-align: center;
        background-attachment: scroll; /* Disable fixed background on mobile */
        min-height: 70vh; /* Adjust height for small screens */
        padding: 10px;
    }
}

.custom-translatea {
    top:40%;
    right:55% 
  }


  /*Come and join us*/
  .posterbg{
    background:url(./assts/img/2.jpg) no-repeat center center/cover;
   
    background-size: cover;  /* Ensures the image covers the div */
             background-position: center;
             background-attachment: fixed; /* Optional: Parallax effect */
             min-height: 70vh; /* Full viewport height */
             display: flex;
             align-items: center;
             justify-content: center;
             flex-direction:column;
             text-align: center;

 }

 @media (max-width: 768px) {
     .posterbg {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction:column;
         text-align: center;
         background-attachment: scroll; /* Disable fixed background on mobile */
         min-height: 70vh; /* Adjust height for small screens */
         padding: 10px;
     }
 }

 /*join us now*/
 .bg-section {
    background: url(./assts/img/5.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    padding: 20px;
}

/* For mobile screens */
@media (max-width: 768px) {
    .bg-section {
        display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
        height: 70vh; /* Adjust height for smaller screens */
    }
}


/* our team*/
.team-member {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.team-member img {
    width: 100%;
    height: auto;
    display: block;
}

/* Name & Role Always Visible */
.info {
    position: absolute;
    top:100;
    left: 0;
    width: 100%;
    background: #f9fcff; /* Dark background */
    color: rgb(0, 0, 0);
    padding: 10px;
    text-align: center;
    transition: transform 0.5s ease; /* Smooth transition for slide-up */
}

/* Contact Details & Social Icons Initially Hidden */
.contact-details {
    opacity: 0;
    transform: translateY(-10%); /* Start below the visible area */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Hover Effect: Slide Up Contact Details */
.team-member:hover .info {
    transform: translateY(-100%); /* Slide up to reveal contact details */
}
.info {
    transform: translateY(-40%); /* Slide up to reveal contact details */
}

.team-member:hover .contact-details {
    opacity: 1;
    transform: translateY(-50); /* Slide up to final position */
}

.social-icons a {
    color: rgb(0, 0, 0);
    margin: 0 8px;
    font-size: 18px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #fbc02d; /* Change color on hover */
}

/*our ministry*/
.carousel-inner { display: flex; }
.carousel-item { display: flex; justify-content: center; }
.card { margin: 10px; border-radius: 10px; transition: transform 0.3s; }
.card:hover { transform: scale(1.05); }
.card-img-top { height: 200px; object-fit: cover; }
.carousel-control-prev, .carousel-control-next { width: 5%; }
.switch-container { text-align: center; margin-top: 20px; }


.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}
.card-img-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 200px;
    object-fit: cover;
}
.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}
.card-text {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}
.card::after {
    content: "";
    width: 60%;
    height: 4px;
    background-color: #FFD700;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}
.card-footer {
    background: none;
    border-top: none;
    padding: 15px;
    text-align: center;
}
.card-footer a {
    text-decoration: none;
    color: #007bff;
    font-weight: 700;
}
.card-footer a:hover {
    text-decoration: underline;
}
.ministry-icon {
    font-size: 2rem;
    color: #007bff;
    margin-bottom: 15px;
}

.left-button {
    left: 10px;
}
.right-button {
    right: 10px;
}
@media (max-width: 768px) {
    .nav-button {
        font-size: 16px;
        padding: 10px;
    }
    .left-button {
        left: 5px;
    }
    .right-button {
        right: 5px;
    }
}
h4 {
    color: #FFC107;
}
@font-face {
    font-family: myFirstFont;
    src: url(image/ATM\ 723.ttf);
    font-weight: bold;
}