body {
    scroll-padding-top: 100px; /* Set this value to the height of your fixed navbar */
}
/* Apply to a main container that wraps all sections, if you have one */
.main-content {
    padding-top: 80px; /* This value should be equal to or greater than the height of your navbar */
}

 .navbar {
    position: fixed;
    width: 100%;
    z-index: 1000; /* High z-index to keep it on top */
    top: 0; /* Align to the top */
}
.navbar-nav .nav-link {
    font-size: 19px; /* Increase font size */
    font-family: 'League Spartan', sans-serif;
    padding: 10px 15px;
    text-align: center;
    color: black; /* Optional: Adjust padding for better spacing */
}

.navbar-brand img {
    padding-left: 15px; /* Left padding for the logo */
}
/* Style for the Apply Now button */
.btn-outline-primary {
    color: white; /* White text color */
    background-image: linear-gradient(45deg, #081797 0%, #081797 100%); /* Gradient background */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
  
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    color: #fff; /* White text color on hover/focus */
    background-image: linear-gradient(45deg, rgb(2, 74, 156) 0%, rgb(10, 75, 145) 100%);
    box-shadow: 0 0 10px #081797; /* Subtle shadow for depth */
}


/* Optional: Add a small right margin to the ion-icon inside the button for spacing */
.btn-outline-primary ion-icon {
    margin-right: 5px;
}
/* Adjust alignment of actions in the navbar */
.navbar .d-flex {
    align-items: center; /* Center alignment vertically */
}

/* Additional adjustment to the Apply Now button for better spacing */
.btn-outline-primary {
    margin-left: auto; /* Pushes the button to the right */
    margin-right: 15px; /* Ensures some space on the right end */
}
.nav-item .btn {
    padding: 0.5rem 1rem; /* Adjust padding to match the height and alignment of other nav links */
    margin-left: 10px; /* Space between Home and Apply Now button */
    line-height: normal; /* Adjust line height to vertically center text if needed */
}


.navbar-nav {
    margin: 0 auto; /* Center align the nav items */
    align-items: center;
}
.nav-item {
    padding: 0 18px; 
    font-weight: 500px;
    color: black;/* Fixed padding between nav items */
}
.navbar-collapse {
    justify-content: center; /* Ensures items stay centered on all views */
}
.apply-button {
    padding: 0.5rem 1rem; /* Padding to match other nav items */
}


/* Ensure the button is centered on smaller screens */
.apply-now-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Float the button to the right on larger screens */
@media (min-width: 992px) {
    .apply-now-container {
        justify-content: flex-end;
        width: auto;
    }
}




/* Remove focus background color from dropdown items */
.navbar .dropdown-menu .dropdown-item:focus, 
.navbar .dropdown-menu .dropdown-item:hover {
    background-color: transparent; /* Makes background transparent on focus */
    color: #0056b3; /* Change this color to suit your design needs */
}

/* Ensure the dropdown remains visible and functional */
.navbar .dropdown-menu {
    border-color: #ccc; /* Optional: change if you have a specific border color in mind */
}



/*modal css*/

#confirm { float: right;  margin-top: 40px; font-size : 12px; }


/*
   HERO CSS
*/ 
.hero {
    background-color: rgba(248, 249, 250, 0.5); /* 50% opacity */
}

.section-title {
    font-size: 3.3rem;
    color: #004085;
    margin-bottom: 20px;
    transition: color 0.3s ease; /* Smooth transition for color changes */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.2); /* Subtle text shadow for depth */
}

.section-title span {
    display: block;
    font-size: 2.5rem;
    color: #007bff;
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth transitions for color and scale */
}

.section-title span:hover {
    color: #009fff; /* Lighter blue on hover */
    transform: scale(1.05); /* Slight increase in size on hover for emphasis */
}

.hero-text {
    color: #495057; /* Maintains the original color for consistency */
    font-size: 1rem; /* Optimal size for readability */
    line-height: 1.8; /* Increased line height for better text flow and readability */
    margin-bottom: 20px; /* Adequate spacing below the paragraph */
    text-align: justify; /* Aligns text edges to both sides for a polished look */
    font-family: 'Roboto', Arial, sans-serif; /* Roboto for a modern, clean appearance, with Arial as a fallback */
    font-weight: 400; /* Standard weight to ensure legibility without heaviness */
}

.button-container {
    display: flex; /* Ensures buttons are laid out in a row */
    justify-content: flex-start; /* Aligns buttons to the start */
    align-items: center; /* Centers buttons vertically */
    width: 100%; /* Full width to ensure container fills its parent */
    flex-wrap: nowrap; /* Prevents buttons from wrapping to the next line */
}

.button-container .btn {
    padding: 12px 18px; /* Adjust padding for a slightly narrower button */
    font-size: 1rem; /* Maintains readable font size */
    border-radius: 0.25rem; /* Keeps the corners slightly rounded */
    background-image: linear-gradient(45deg, hwb(212 3% 33%) 0%, hwb(211 1% 34%) 100%); 
    border: none; /* Removes border unless specifically needed */
    color: #fff; /* Ensures text is white for contrast */
    transition: background-color 0.3s ease; /* Smooth transition for background color change */
    flex: 0 0 auto; /* Ensures that the button does not grow or shrink but keeps its size based on content */
    margin-right: 10px; /* Adds a right margin to separate buttons */
}

#btn-secondary {
    display: inline-block; /* Ensures the element behaves like a button */
    padding: 12px 18px; /* Adds padding */
    font-size: 1rem; /* Sets a readable font size */
    color: #004085; /* Sets text color */
    background-color: #f8f9fa; /* Sets background color */
    border: 2px solid #004085; /* Adds a border */
    border-radius: 0.25rem; /* Rounds corners */
    text-align: center; /* Centers text */
    text-decoration: none; /* Removes underline from links */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
}

#btn-secondary:hover {
    background-color: hsla(210, 13%, 91%, 0.45); /* Changes background on hover */
    color: #004085;
}


.button-container .btn:hover {
    background-image: linear-gradient(45deg, rgb(2, 74, 156) 0%, rgb(10, 75, 145) 100%); /* Darker shade of the button color for hover state */
}

.animation-container {
    width: 100%;
    height: 300px; /* Adjust based on content */
    /* Additional styles for animations */
    background-color: #fff; /* Example background color */
     
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991px) {
    .animation-container {
        display: none; /* Hide the animation container on smaller screens */
    }
}

.animation-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
}

.responsive-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the container without being stretched */
}

/* Media query for small screens */
@media (max-width: 767px) {
    .button-container {
        justify-content: left; /* Center the buttons */
        flex-direction: row; /* Ensure buttons are in a row */
        flex-wrap: nowrap;
    }
    
    .button-container .btn{
        padding: 10px 2px; /* Decrease padding for smaller buttons */
        font-size: 0.875rem; /* Decrease font size for better fit on small screens */
        margin-right: 10px; /* Adjust right margin for spacing between buttons */
        max-width: 150px; /* Ensure buttons have a maximum width */
    }
    #btn-secondary {
        padding: 10px 8px; /* Decrease padding for smaller buttons */
        font-size: 0.875rem; /* Decrease font size for better fit on small screens */
         
        max-width: 150px; /* Ensure buttons have a maximum width */
    }
    
}