body{
    
    font-family: Arial, sans-serif; 
    position: relative;
    margin-top: 240px;   /* Adjust this value to match the height of your header */
}

#headerSection {
   
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 1000; /* Ensure the header is above other content */
    transition: top 0.3s;
    height: auto;
    
}

#home {
  padding-top: 10px;
}

.img-fluid {
    height: 190px; 
}

.navbar {
    background-color: rgba(0,45,81,255);   
}

#navbarNav a {
    color: white;
}

.carousel-item img { 
    width: 100%;
    height: auto;
    object-fit: contain;   
 }

 .carousel-control-prev-icon,
 .carousel-control-next-icon {
     background-color: rgba(0, 45, 81, 0.8); /* Change to your desired color */
     border-radius: 50%; /* Optional: Makes the arrows circular */
     width: 50px; /* Optional: Adjust size */
     height: 50px; /* Optional: Adjust size */
 }

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: rgba(0, 45, 81, 1); /* Darker color on hover */
}

.btn-primary {
    background-color: rgba(0, 45, 81, 1);
    border-color: rgb(246, 242, 14);
}

.carousel-caption {
    font-weight: bold ;
    color: white; /* Text color */
}

.navbar-nav .nav-link.active {
    color: yellow !important;
    font-weight: bold; 
}

.navbar-nav .nav-link:hover {
    color: yellow !important;
    font-weight: bold;
    
 } 

 .navbar-light .navbar-toggler { 
    border-color: yellow !important; /* Change the border color of the toggler */
    background-color: white !important; /* Change the background color of the toggler */
    margin: 0 auto; /* Center the toggler */ 
}

h2 {
    padding: 30px 0px 50px 0px;
    font-weight: bold;
    color:rgba(0, 45, 81, 1);
    text-shadow: 3px 3px 3px rgb(58, 58, 58);
    text-align: center;
}


.card-img-top {
    object-fit: cover;
    width: 100%; 
    height: 500px;
  }

.card-img, .card-img-top {
    border-top-left-radius: 0% !important;
    border-top-right-radius: 0% !important;
}

.card-header {
    background-color: rgba(0, 45, 81, 1);
    color: white;
    text-align: center;
    font-size: 25px;
    font-family: Sans-serif;
    line-height: 1;
}


.card {
    box-shadow: 0 5px 5px 0 black;
}

.card-title {
    color:rgba(0,45,81,1); 
    font-weight: bold;
}

#aboutus  .card-text {
    font-size: 1.1rem;
    line-height: 1.6; /* Optional: Adjust line height for better readability */
    color: #333; /* Optional: Set a custom text color */
}

#aboutus ul {
    font-size: 1.05rem;
    line-height: 1.6;
}

.shadow-sm{
    box-shadow: 0 1px 2px rgba(0, 45, 81, 1) !important;
}

/* Gallery CSS */
 /* The grid: Four equal columns that floats next to each other */
 #gallery .column {
    float: left;
    width: 25%;
    padding: 10px;
    box-sizing: border-box; /* Ensures padding is included in width */
  }
  
  /* Style the images inside the grid */
  #gallery .column img {
    opacity: 0.8;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);   
  }
  

  #gallery .column img:hover {
    opacity: 1;
  }
  
  /* Clear floats after the columns */
  #gallery .row:after {
    content: "";
    display: table;
    clear: both;
  }

  #gallery img {
    height: 60%;
    width: 100%;
    vertical-align: baseline !important;
}
  
  /* The expanding image container (positioning is needed to position the close button and the text) */
  #imgdisplay .container {
    position: relative;
    display: none;
  }
  
  /* Expanding image text */
  #imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
  }
  
  /* Closable button inside the image */
   .closebtn {
    position: absolute;
    top: -14px;
    right: 18px;
    color: white;
    font-size: 35px;
    cursor: pointer;
  }
  
  .closebtn:hover {
        color: yellow;
  }  

 #imgtext {
    text-align: center;
    font-size: 20px;
    color: white;
    padding: 10px;
    background-color: rgba(0, 45, 81, 0.7); /* Semi-transparent background */
    border-radius: 5px; /* Optional: Rounded corners */
 }

 #expandedImg{
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container */
    display: block; /* Ensures the image is displayed as a block element */
    margin: 0 auto; /* Centers the image horizontally */
    border-radius: 5px; /* Optional: Rounded corners */
    box-shadow:  1px 2px rgb(72, 73, 73);
 }
    /* Gallery ends here */

 .location ul , .emailus ul, .callus ul{
        text-align: center;
        list-style: none;
        line-height: 30px;
        font-weight: bold;
        margin-left: 0% !important;
        padding-inline-start: 0px; 
 }
     
.location a:hover, .emailus a:hover, .callus a:hover {
        color: rgb(17, 255, 0) !important;
     
}
     
.location img:hover, .emailus img:hover, .callus  img:hover {
     
       border: 1px solid yellow !important;
       border-radius: 100%;
       background-color:rgb(17, 255, 0) !important;
       padding: 2px;;
}
     
#footerpad{
    padding: 20px 0 0;
    background-color: rgba(0,45,81,255);
    color: white;
    text-align: center;
    border-radius: 5px;  
}

#footerpad a:hover {
    color: yellow!important;
    text-decoration: none!important;
}

#footeend {
    padding: 10px 0;
    background-color: rgba(0,45,81,255);
    color: white;
    text-align: center;
    border-radius: 5px;
}