html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* General Styles */
body {
    margin: 0;
    font-family: Poppins;
}

/* Navbar Customization */
/*.custom-navbar {
    background-color: white;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    display: flex;
    align-items: center;
}

    .navbar-brand .logo {
        height: 60px;
    }

    .navbar-brand .navbar-text h6 {
        margin: 0;
        font-weight: bold;
        font-size: 16px;
    }

    .navbar-brand .navbar-text span {
        font-size: 14px;
        color: gray;
    }*/

/* Navbar Links */
/*.navbar-nav .nav-link {
    color: black;
    font-weight: bold;
    margin-right: 20px;
    font-size:16px;
}

    .navbar-nav .nav-link:hover {
        color: #ffa500;
    }*/

/* Footer */
.sticky-footer {
    background-color: #DAD8D8;
    padding: 20px;
    width: 100%;
}

.footer-section {
    margin: 10px;
}

    .footer-section h5 {
        font-weight: bold;
    }

    .footer-section ul {
        list-style: none;
        padding: 0;
    }

        .footer-section ul li a {
            text-decoration: none;
            color: #333;
        }

            .footer-section ul li a:hover {
                text-decoration: underline;
            }

/*navbar*/
/* Ensure the logo and text are side by side */
.navbar-brand {
    display: flex; /* Make the container flexbox */
    align-items: center; /* Align items vertically in the center */
}

.navbar-text {
    margin-left: 10px; /* Add some space between the logo and text */
}

.logo {
    max-width: 100px;
    height: auto;
}
.navbar-text span{
    font-weight:bold;
}
/* Apply styling for navbar links */
.navbar-nav .nav-item .nav-link {
    color: #000; /* Default text color */
    text-decoration: none; /* Remove underline initially */
    transition: all 0.3s ease; /* Smooth transition for color and underline */
    font-weight: bold;
    font-size: 16px;
    margin-right: 20px;
}

    /* Hover effect */
    .navbar-nav .nav-item .nav-link:hover {
        color: #FF0000; /* Change text color on hover */
        text-decoration: underline; /* Underline the text on hover */
        text-decoration-color: #FF0000; /* Set the underline color to orange */
    }

.header-icons .btn {
    color: white; /* Button text color */
    background-color: #28a745; /* Green button background color */
}

    .header-icons .btn:hover {
        background-color: #218838; /* Darker green on hover */
    }
/* Mobile View Adjustments */
@media (max-width: 767px) {
    /* Make nav-header a flex container to align the button and logo in one line */
    .nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    /* Position menu button to the left and keep it inline with the logo */
    .navbar-toggler {
        order: 0; /* Keep it in its original order */
    }

    /* Logo and text aligned on the left */
    .navbar-brand {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .navbar-text {
        margin-left: 10px; /* Spacing between the logo and the text */
    }

    .logo {
        max-width: 80px; /* Adjust the logo size */
    }

    /* Ensuring the logo and button are aligned on the same line */
    .navbar-brand {
        display: flex;
        align-items: center;
    }

    /* Adjust the styling of navbar links if needed */
    .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

        .navbar-nav .nav-item {
            margin-bottom: 10px;
        }

    /* Stack icons and buttons in a column */
    .header-icons {
        flex-direction: column;
        align-items: flex-start;
    }

        .header-icons i {
            margin-bottom: 10px;
        }

    .btn {
        margin-top: 10px;
        margin-left:-40px;
        margin-left:10px;
    }
}

/*for tab view*/
@media (max-width: 1023px) and (min-width: 768px) {
    /* Make nav-header a flex container to align the button and logo in one line */
    .nav-header {
        display: flex;
      
        align-items: center;
        width: 100%;
    }

    /* Position menu button to the left and keep it inline with the logo */
    .navbar-toggler {
        order: 0; /* Keep it in its original order */
    }

    /* Logo and text aligned on the left */
    .navbar-brand {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left:50px;
    }

    .navbar-text {
        margin-left: 10px; /* Spacing between the logo and the text */
    }

        .navbar-text br {
            display: none; /* Hides the <br> tag */
        }

    .logo {
        max-width: 80px; /* Adjust the logo size */
    }

   

    /* Adjust the styling of navbar links if needed */
    .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

        .navbar-nav .nav-item {
            margin-bottom: 10px;
        }

    /* Stack icons and buttons in a column */
    .header-icons {
        flex-direction: column;
        align-items: flex-start;
    }

        .header-icons i {
            margin-bottom: 10px;
        }

    .btn {
        margin-top: 10px;
    } 
}



/* For mobile views to prioritize z-index */
@media (max-width: 767px) {
    /* Ensure the navbar is positioned on top */
    .custom-navbar {
        position: relative;
        z-index: 1030;
    }
    .rounded-circle{
        margin-left:-40px;
    }
    /* Ensure the toggler menu opens above other content */
    .navbar-collapse {
        position: absolute; /* Positions the collapse above other elements */
        top: 100%; /* Ensures it drops below the navbar */
        z-index: 1050; /* Higher than the navbar itself */
        background-color: white; /* Match navbar background */
        width: 100%; /* Full width for better usability */
    }

    /* Dropdown menu styling */
    .dropdown-menu {
        z-index: 1060; /* Even higher for dropdown menus */
    }

    /* Ensure toggle icon is visible and accessible */
    .navbar-toggler {
        position: relative;
        z-index: 1070; /* Place it above the navbar */
    }
}