/* Set a fixed margin for the body */
body {
    margin: 20px; /* Adjust the margin as needed */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* nav --------------------------------------------------------- */
.navbar {
    background-color: black;
    border-radius: 5px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    justify-content: center; /* Center the navigation items horizontally */
    align-items: center; /* Change 'left' to 'center' */
    font-size: 20px;
    margin: 0;
    padding: 0px 0; /* You have 'padding: 10px' above; you may want to remove this line */
    border: 2px solid transparent; /* Add a transparent border */
    transition: border-color 100s; /* Add a transition for border color change */
    margin-bottom: -20px; /* Add negative margin to make space for the welcome message */
}

/* Change the border color on smaller screens */
@media (max-width: 767px) {
    .navbar {
        filter: drop-shadow(#316FF6 0 2px 10px); /* Change border color to light gray */
    }
}

.container {
    margin-right: auto;
    text-align: center;
}

/* nav-togler-icon -------------------------------------------- */
.navbar-toggler {
    width: 20px;
    height: 20px;
    position: relative;
    transition: 0.5s ease-in-out;
}

.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
    border: 0;
}

.navbar-toggler span {
    margin: 0;
    padding: 0;
}

.toggler-icon {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: white;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
}

.middle-bar {
    margin-top: 0;
    /* state when we click ------------------------------------- */
}

.navbar-toggler .top-bar {
    margin-top: 0;
    transform: rotate(135deg);
}

.navbar-toggler .middle-bar {
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
    margin-top: 0;
    transform: rotate(-135deg);
}

/* state when navigator collapsed ------------------------------ */
.navbar-toggler.collapsed .top-bar {
    margin-top: -20px;
    transform: rotate(0deg);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
    filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
    margin-top: 20px;
    transform: rotate(0deg);
}

nav ul li a {
    display: inline-block;
    line-height: 20px;
    margin: 0 5px;
    text-transform: uppercase;
}

nav ul li a:hover {
    color: white;
    text-transform: uppercase;
    border-radius: 5px;
    font-style: initial;
    filter: drop-shadow(0px 0px 5px white);
}

/* Add these CSS styles to your existing code */
nav ul {
    text-align: center; /* Center the text within the navigation list */
}

nav ul li {
    display: inline; /* Display list items inline to center them horizontally */
}

/* Align the 'Contact Us' link with other links */
.navbar-nav .nav-item:last-child {
    margin-right: 0; /* Remove the right margin for the last item (Contact Us) */
}

.navbar .navbar-nav {
    margin-top: 10px; /* Adjust the margin-top as per your desired gap */
}

.navbar-brand {
    margin-right: 10px; /* Adjust the margin-right as per your desired gap */
}

/* Create a gap between logo and navigation items */
/* Adjust the alignment of the dropdown menu */
.dropdown-menu {
    top: 100%; /* Position the dropdown below the parent item */
}

/* Adjust the logo position for mobile devices */
@media (max-width: 767px) {
    .navbar-brand img {
        margin-top: 5px;
        margin-left: 5px;
    }
}

/* Center the welcome message below the navbar with space */
/* Center the welcome message below the navbar with space */
#welcome-message-container {
    text-align: center;
    padding: 10px;
    margin-top: 55px; /* Add margin to create space between the navbar and message */
    position: relative;
}

#welcome-message {
    white-space: nowrap;
    overflow: hidden;
   font-family: 	Courier New; 
    font-size: 24px; /* Adjust the font size as needed */
    color: #000000; /* Change the font color */
    text-decoration: underline; /* Add underline */
    animation: typing 4s steps(30, end) infinite; /* Adjust the steps value */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Keyframes for typing animation */
@keyframes typing {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}


/* cvard details----------------------------------------------- */
.card-text {
    text-align: center;
    font-family: cursive;
}

.card-header {
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center;
}

.card-header img {
    max-width: 40px; /* Adjust the max-width as needed */
    margin-right: 10px; /* Add spacing between the logo and title */
}
/* Define the default button style */
.btn-primary {
    background-color: #007bff; /* Set the default button color */
    color: #fff; /* Set the text color */
    transition: box-shadow 0.3s ease; /* Add a smooth transition for the glow effect */
}

/* Define the hover effect for the button */
.btn-primary:hover {
    box-shadow: 0 0 10px #007bff; /* Add a light blue glow on hover */
}

/* .wrapper {
    flex: 1;
} */

.footer {
    background-color: #333; /* Adjust the background color as needed */
    color: #fff; /* Adjust the text color as needed */
    text-align: center;
    padding: 10px;
}