/* Custom Styles for NxJob */

/* Body and General Styling */
body {
    font-family: 'Arial', sans-serif;
    background-color: #b5e1f5;
    color: #333;
    margin: 0;
    padding-top: 120px;
}

section {
    scroll-margin-top: 90px; /* Adjust based on your navbar height */
    padding-top: 20px; /* Optional, adds space between title and navbar */
}

/* Navbar Custom Styles */
.navbar {
    border-bottom: 1px solid #0056b3; /* Darker Border at the Bottom */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light Shadow for Depth */
    font-size: 16px;
	color:#0056b3;
	height: 122px;
	position: fixed;
	top: 0; /* Position it at the top */
    width: 100%; /* Full-width navbar */
    z-index: 1050; /* Ensure it stays above other content */
	transition: background-color 0.5s ease-in-out; /* Smooth background change */
    
}

.navbar .navbar-brand {
    font-size: 24px;
    font-weight: bold;
    color: #0056b3;
    text-transform: uppercase;
}

.navbar .navbar-brand img {
    margin-right: 10px; /* Spacing between logo and brand name */
}

.navbar-dark .navbar-nav .nav-link {
    color: #0056b3;
    margin-right: 15px;
    transition: color 0.3s ease-in-out;
    font-size: 18px;
}

.navbar .nav-link:hover {
    color: #55ec6f; /* Hover Color */
}

.card{
    background-color: #b5e1f5;
    border-color: #0056b3;
    border-radius: 5px;
}


.table th{
    font-size: 14px;
}

.table td{
    font-size: 12px;
}

.form-control{
    font-size: 14px;
}


.navbar .btn-outline-light {
    border-radius: 30px; /* Rounded Button */
    padding: 5px 20px; /* Padding inside the button */
    border: 1px solid #ffffff; /* Border Color */
}

.navbar .btn-outline-light:hover {
    background-color: #55ec6f; /* Hover Background */
    color: #0056b3; /* Hover Text Color */
}

.navbar-toggler {
    border: none; /* Remove border from the toggler */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%287, 7, 7, 0.7%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); /* Custom Icon */
}

/* Navbar Links Container */
.navbar-nav {
	list-style: none;
    display: flex; /* Use flexbox for alignment */
    flex-direction: row; /* Align items in a row */
    align-items: center; /* Vertically align items */
    margin-left: auto; /* Push the navbar links to the right */
    margin-right: 10px; /* Small spacing on the right side */
}

/* Navbar Individual Item */
.nav-item {
    margin: 0 10px; /* Horizontal spacing between items */
}

/* Active Link Styling */
.navbar .navbar-nav .nav-item .nav-link.active {
    color: #410cd1; /* Different color for the active link */
}

.navbar-collapse {
    transition: height 0.3s ease !important; /* Ensure a smooth transition */
}

.navbar-collapse.collapse.show {
    height: auto !important; /* Ensure height is properly set when expanded */
}

/* Button Styling for Login */
.btn-outline-light {
	background-color: #6df161;
    color: #ffffff; /* White text color */
    border-color: #ffffff; /* White border */
    border-radius: 30px; /* Rounded corners */
    padding: 8px 20px; /* Padding inside the button */
    font-weight: 500; /* Slightly bold text */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 1px; /* Spacing between letters */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition */
}

/* Button Hover Effect */
.btn-outline-light:hover {
    background-color: #6df161; /* White background */
    color: #007bff; /* Blue text color */
}

/* Margin Left Adjustment for Login Button */
.ml-3 {
    margin-left: 15px; /* Increase spacing between nav links and button */
}

.bg-primary {
    background-color: #b5e1f5 !important;
}


.bg-light {
    background-color: #b5e1f5 !important;
}

.bg-white {
    background-color: #b5e1f5 !important;
}

/* Section Titles */
section h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #0056b3;
    
}

.overflow_table_modal {
    background-color: #ffffff; /* Set a solid background color */
}

.form_background_color{
	background-color: #b5e1f5;	
}

.form-control{
    border-color: #0056b3;
        border-radius: 5px;
}

/* Media Queries for Responsive Design */
@media (max-width: 992px) {
    .navbar {
        border-bottom: 1px solid #0056b3;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        font-size: 14px;
        color: #0056b3;
        height: 100px;
        position: fixed;
        top: 0;
        width: 100%;
        transition: background-color 0.5s ease-in-out;
       
        
    }

    
    /* Navbar toggler styling */
    .navbar-toggler {
        margin-left: auto; /* Push the toggle button to the right */
        border: none; /* Remove the border from the button */
        padding: 3px; /* Add some padding for better spacing */
        background-color: transparent; /* Optional: transparent background */
    }

    /* Styling for the 3-bar icon */
    .navbar-toggler-icon {
        width: 25px;
        height: 2px;
        background-color: white; /* White hamburger lines */
        position: relative;
    }

   /* Pseudo-elements to create the top and bottom bars */
    .navbar-toggler-icon::before, .navbar-toggler-icon::after {
        content: '';
        position: absolute;
        width: 30px; /* Match the width of the middle bar */
        height: 2px; /* Match the height of the middle bar */
        background-color: white; /* Same color as the middle bar */
        left: 0;
    }

    /* Position the top bar */
    .navbar-toggler-icon::before {
        top: -5px; /* Move the top bar above the middle bar */
    }

    /* Position the bottom bar */
    .navbar-toggler-icon::after {
        top: 5px; /* Move the bottom bar below the middle bar */
    }

    /* Navbar collapsible section */
    .navbar-collapse {
        width: 50%; /* Full width on mobile */
        justify-content: flex-end;
        background-color: transparent; /* Background color for the collapse section */
        padding-inline-end: 10px; /* Add padding for breathing room */
        align-items: right;
    }

    /* Navbar navigation links */
    .navbar-nav {
        flex-direction: column; /* Stack items vertically in mobile view */
        justify-content: flex-start; /* Align items to the right */
        width: 50%; /* Full width */
        background-color: #b5e1f5; /* White background for the nav menu */
        border: 1px solid #0056b3; /* Border color */
        border-radius: 5px; /* Smooth the corners */
        padding: 5px 0; /* Padding for the navbar items */
    }

    /* Individual navigation items */
    .navbar-nav .nav-item {
        margin: 10px 15px; /* Add some spacing between menu items */
    }

    /* Navigation link styling */
    .navbar-nav .nav-link {
        color: #0056b3; /* Brand color for the links */
        font-weight: 500; /* Slightly bold text */
        transition: color 0.3s ease-in-out; /* Smooth transition on hover */
        padding: 8px 15px; /* Spacing around each link */
        border-radius: 3px; /* Rounded corners for links */
    }

   

    .btn-outline-light {
        color: #0056b3; /* Brand color */
        border-color: #0056b3; /* Border in brand color */
        border-radius: 30px; /* Rounded corners for the buttons */
        padding: 8px 20px; /* Padding inside the buttons */
        transition: all 0.3s ease-in-out; /* Smooth transition on hover */
        margin: 10px 15px; /* Add spacing between buttons and items */
    }

    .ml-3 {
        margin-left: 0;
    }

    section {
        padding-top: 80px;
        margin-top: -60px;
        width: 100%;
    }

    .form-control {
        width: 100%;
        
    }


    .table-responsive {
        overflow-x: scroll;
    }

    .table {
        width: 100%;
    }
}


/* Hero Section Styling */
.hero-section {
    padding: 50px 0;
    background-color: #e9ecef;
}

.carousel-item img {
    height: 500px;
    object-fit: cover;
}

.carousel-caption h5 {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
}

.carousel-caption p {
    font-size: 18px;
    color: #dddddd;
}

/* Image Container Styling */
.img-container {
    width: 100%; /* Ensures the container takes full width */
    height: auto; /* Adjust height based on image */
    overflow: hidden; /* Hide any overflow */
}


/* Responsive Image Styling */
.img-fluid {
    width: 100%; /* Full width */
    height: auto; /* Adjust height proportionally */
    object-fit: cover; /* Scale the image to cover the container */
}

.font-para{
    font-size: 22px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: justify;
}

/* Services Section Styling */
.services-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
    color: #343a40;
}

.service-card {
    margin-bottom: 30px;
}

.service-card .card-title {
    color: #007bff;
}

.service-card .card-text {
    color: #6c757d;
}

/* Footer Styling */
.footer {
    background-color: #b5e1f5;
    font-size: 16px;
    color: #0056b3;
    padding: 20px 0;
    
    position: fixed; /* Fix the footer position */
    bottom: 0; /* Stick it to the bottom */
    left: 0; /* Align it to the left */
    width: 100%; /* Full width */
    text-align: center; /* Center text alignment */
    z-index: 1000; /* Ensure it stays above other elements */
    border-top: 1px solid #0056b3;
}

.footer p {
    margin: 0;
}

.footer .btn {
    margin: 10px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}


/* Make the table responsive */
.table-responsive {
    overflow-x: auto; /* Enable horizontal scroll for table on smaller devices */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile devices */
}
/* Apply border to all cells in the table */
.table.table-bordered td,
.table.table-bordered th {
    border: 1px solid #007bff !important; /* Enforce border color with !important */
}

/* Apply border to the entire table */
.table.table-bordered {
    border: 1px solid #007bff !important; /* Outer border for the table with !important */
}

/* Ensure border is applied to the last row */
.table.table-bordered tr:last-child td {
    border-bottom: 1px solid #007bff !important; /* Enforce border for the last row */
}

/* Ensure border for the last column */
.table.table-bordered tr td:last-child {
    border-right: 1px solid #007bff !important; /* Enforce border for the last column */
}