/* Style for the header/navigation bar */
.navbar {
    background-color: transparent !important;
    transition: background-color 0.3s;
}
.navbar.scrolled {
    background-color: white !important;
}
.navbar {
    background-color: #007bff; /* Change this to your desired header background color */
    color: white; /* Change this to your desired header text color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: adds shadow to the navbar */
}

/* Logo styling */
.navbar-brand img {
    max-height: 70px; /* Adjust the logo size */
    padding: 5px 0; /* Add some padding to center it vertically */
    border-radius: 50%;
}

/* Centering the navbar items */
.navbar-nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.header-top-container {
    background-image: url('images/double.jpg'); /* Replace with your image path */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Optional: Fixes the background during scroll */
}

/* Make sure the navbar is transparent to show the background image */
.navbar {
    background-color: transparent !important;
    background: none;
}
/* Navigation link styling */
.navbar-nav .nav-item {
    padding: 0 10px; /* Add space between the nav items */
}

.navbar-nav .nav-link {
    color: white; /* Change this to your desired link color */
    font-weight: bold; /* Bold font weight */
    padding: 15px 10px; /* Increase padding to give more space around the links */
    
    
}

/* Dropdown menu styling */
.dropdown-menu {
    background-color: #ffffff; /* Match the dropdown background with the navbar */
    color: rgb(0, 0, 0); /* Change this to your desired dropdown text color */
}

/* Style the navbar-toggler for small screens */
.navbar-toggler {
    border: none; /* Removes border */
    outline: none; /* Removes outline */
}

/* Collapse navbar on small screens */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: #f8f9fa; /* Ensure the collapsed menu has the same background color */
    }

    .navbar-nav {
        text-align: center; /* Center the navigation items */
    }

    .navbar-nav .nav-item {
        margin-bottom: 0.5rem; /* Add space between the items */
    }

    .navbar-toggler {
        color: white; /* Set the color of the toggler icon */
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); /* Customizes the default Bootstrap hamburger icon color */
    }
}

/* Custom styles for the heading */
.heading1 {
    color: black; /* Make the heading text black */
    font-weight: bold; /* Make the heading text bold */
    margin-bottom: 1rem; /* Add some space below the heading */
}

/* Continue with other styles */




/* Body starts here */




/* Custom styles for About section */
.FirstAbout_1 img {
    max-width: 100%; /* Ensure the image is responsive and doesn't overflow its container */
    height: auto; /* Maintain aspect ratio */
    
}

.FirstAbout_1 p {
    font-size: 1rem; /* Adjust font size as needed */
    line-height: 1.6; /* Adjust line height for readability */
    /* Additional styling for paragraph as needed */
}

@media (max-width: 991px) {
    /* Responsive adjustments for smaller screens */
    .FirstAbout_1 .row {
        flex-direction: column-reverse; /* Stack text above the image on small screens */
    }
}
/* Custom styles for the text container */
.text-background{
    background-color: #f8f9fa; /* Light grey background, you can choose any color */
    border-right: 4px solid green; /* Solid line on the left side with a color accent */
    border-top: 1px solid green;
    border-left: 4px solid green; /* Solid line on the left side with a color accent */
    border-bottom: 1px solid green;
    padding: 20px; /* Space inside the box around the text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 59px; /* Slightly rounded corners for a softer look */
    margin-bottom: 20px; /* Space below the text box */
    
}


/* Custom styles for the text container */
.text-background1 {
    background-color: #f8f9fa; /* Light grey background, you can choose any color */
    border-right: 4px solid green; /* Solid line on the left side with a color accent */
    border-bottom: 1px solid green;
    padding: 20px; /* Space inside the box around the text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 5px; /* Slightly rounded corners for a softer look */
    margin-bottom: 20px; /* Space below the text box */
}
.text-background3 {
    background-color: #f8f9fa; /* Light grey background, you can choose any color */
   
    padding: 12px; /* Space inside the box around the text */
    box-shadow: 4 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 15px; /* Slightly rounded corners for a softer look */
    margin-bottom: 20px; /* Space below the text box */
    padding-top: 1px;
    padding-bottom: 1px;
}
.text-background4 {
    background-color: #f8f9fa; /* Light grey background, you can choose any color */
    border-right: 4px solid green; /* Solid line on the left side with a color accent */
    border-bottom: 1px solid green;
    padding: 20px; /* Space inside the box around the text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border-radius: 5px; /* Slightly rounded corners for a softer look */
    margin-bottom: 20px; /* Space below the text box */
    min-width: 300px; /* Minimum width to encourage a rectangular appearance */
    width: 100; /* Adjusts the width to the content up to the max width of its parent container */
}

hr {
    height: 2px; /* Thickness of the hr */
    border: none; /* Remove the default border */
    background-color: #ffffff; /* Change the color to red */
}

/* Animation */
/* Keyframes for image slide in from the left */
@keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Keyframes for text fade in and up */
  @keyframes fadeInUp {
    0% {
      transform: translateY(20px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Apply animation to the image container */
  .img-container {
      animation: 2s ease-out 0s 1 slideInFromLeft;
      
  }
.img-fluid{
    border-radius: 1%;
}



  /* Apply animation to the text container */
  .text-container {
      animation: 1s ease-out 0s 1 fadeInUp;
  }
  
  .pictureback {
    position:absolute;
    width: 100%;
    height: 50%;
  }





.heading2 {
    position: absolute;
    top: 30%;
    left: 43%;
    font-size: 2.4rem;
    color: #f8f9fa;

    
}
.heading3 {
    position: absolute;
    top: 35%;
    left: 29%;
    font-size: 1.4rem;
    color: #f8f9fa;
    

    
}
.nav-link{
    color: rgb(0, 0, 0) !important;
    
}
.nav-link:hover{
    
    text-decoration: underline;
    text-decoration-color: rgb(0, 0, 0);
    text-decoration-thickness: 4px;

}

.welcome-section {
    text-align: center;
    padding: 50px 20px;
    background: #f4f4f4; /* or any other color that matches your design */
    color: #333; /* dark text color for readability */
}

.welcome-section h1 {
    font-size: 2.5rem; /* large font size for heading */
    margin-bottom: 20px;
    color: #0099ff; /* or any other color that matches your design */
}

.welcome-section p {
    font-size: 1.25rem; /* comfortable reading size for text */
    margin-bottom: 30px;
    line-height: 1.6; /* line height for better readability */
    max-width: 800px; /* to prevent the line from being too long on large screens */
    margin-left: auto; /* center the paragraph */
    margin-right: auto;
}