:root {
    /* define global variable for underline matching navbar bottom on hover */
    --navbar-height: 80px;
    --text-height: 14px;           /* mobile first 320 to 576 */
    --extra-text-height: 5px;      /* use for body content where needed larger than navbar */
    --bs-navbar-padding-y: 7px !important;
    --purple-magenta: #9B30FF;     /* for navbar and highlited body, purple-magenta */
    --cyan-blue: #1bb0ce;          /* for underline, accented color, cyan-blue */
    --cyan-blue-lighter: #00c3ff;  /* used in u left user name */
    --blk-lime-green: #010000;     /* for general body content color, blk-lime-green */
    --whitish-color: #FAF9F6;      /* background and active navbar on black navbar */
    --toggler-color: #9e56ce;      /* different shade of purple magenta */
    --light-purple: #D8D3F0;       /* hover color light purple */
}

html, body {
  width: 100%;
  height: 100%;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--text-height); /* for mobile */
}

body {
    color: #01000;
    background-color: #FAF9F6;
    min-height: 100vh;
    margin: 0px;
    display: flex;           /* New */
    flex-direction: column;  /* New */
}

/* ============== NEW ================== */

/* Add new class for main content */
.main-content {
    flex: 1 0 auto;         /* Add this to make content expand */
}

/* Add footer styling */
footer {
    flex-shrink: 0;        /* Prevent footer from shrinking */
    width: 100%;
    padding: 1rem 0;
    margin-top: auto;      /* Push footer to bottom */
}
/* ============== END NEW ======================== */

.container, .container-fluid {
    /* one of the many reason for scroll to the end of page problem */
    overflow: visible;
}

.no-wrap {
    white-space: nowrap;  /* used in ul navbar p element */
}

/* start of navbar ================================================= */
/* using image as navbar - not used
.navbar {
    background-image: url("/static/images/banner_1900x527.png");
    background-size: cover;
    background-position: center;
} */

.navbar {
    /* Default height for small devices (xs and sm) */
    height: var(--navbar-height) !important;
    background-color: #000000 !important;   /* to get the black image for this */
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

.navbar-nav .nav-link {
    /* 1vw= 1920 / 100 = 19.2 pixels
    If the viewport width is 1366 pixels (common for laptops): font-size in pixel: 13.66
    If the viewport width is 375 pixels (common for mobile devices): 3.75 */
    font-weight: 500 !important;  /* same as bold in bootstrap, can use bold instead of number */
    font-color: var(--purple-magenta) !important;  /* nav item color on both back and white background */
    color: var(--purple-magenta) !important;
    font-size: var(--text-height) !important;
}

/* Custom CSS to override nav-link p color - using inline version for now
.nav-link.no-wrap {
      color: #00c3ff;
} */

/* navbar hover stuff */
/* for mobile without black banner and underline without space */
.navbar-nav .nav-link.active {
    /* text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); */
    color: var(--purple-magenta) !important;
    font-color: var(--purple-magenta) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--cyan-blue-lighter) !important;
}

/* changing hover/focus colors for the link items */
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
    color: var(--light-purple) !important;
}

.nav-link > a {
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

.navbar-nav .nav-link.active > a {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

/* toggler button */
.navbar-collapse {
    position: absolute !important;
    top: 100% !important;   /* To make sure it appears directly below the navbar */
    right: 0 !important;    /* Align it to the right */
    width: auto !important; /* Keep the width limited to the content */
    /* background-color: red; To keep the dropdown background clear */
}

.navbar-toggler, .navbar-collapse {
    margin-right: 3vw !important;
}

/* collapse button */
.navbar-toggler {
    color: var(--toggler-color);
    /* only changes the border color and not the parallel bars!! */
    border: 0 !important;
}

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

/* button toggler image, when expand/collapse due to display size changes */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28158, 86, 206, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h25M4 17h25M4 27h25'/%3e%3c/svg%3e");
}

/* navbar brand */
#logo {
    width: calc(120px + 5.5vw) !important;
    margin-left: 2.0vw !important;
    margin-right: 2.0vw !important;
}

/* navbar dropdown */
.navbar-nav .dropdown-menu {
  background-color: var(--whitish-color) !important;
  max-width: 300px !important; /* Adjust as per your need */
  right: 0 !important; /* Align the dropdown to the right */
  left: auto !important;
}
.navbar-nav .dropdown-item {
  color: var(--blk-lime-green);
  font-size: calc(var(--text-height) - 2px) !important;
}
/* Change the background color of the active dropdown link */
.navbar-nav .nav-item .dropdown-menu .dropdown-item.active {
    background-color: var(--purple-magenta) !important; /* get rid of blue color */
    /* color: var(--purple-magenta) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--cyan-blue-lighter) !important;
    these changes the rest but did not look good as it was */
}
/* Change the hover color of the dropdown items */
.navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
    background-color: var(--light-purple) !important;
    color: var(--blk-lime-green)
}

/* Optionally, for focus state */
.navbar-nav .nav-item .dropdown-menu .dropdown-item:focus {
    background-color: var(--purple-magenta) !important;
    color: var(--blk-lime-green)
}
/* If you want to target a specific dropdown */
#yourDropdownId .dropdown-item {
    color: #0066cc !important;
}
/* end of navbar ================================================= */

/* alert overlay image in banner */
.banner-image { width: 160vw !important; }
.image-container {
    position: relative;
    display: inline-block;
}
.alert-overlay {
    position: absolute;
    top: 65% !important;;
    left: 50% !important;
    transform: translateX(-50%);
}
.alert-text {
    font-size: calc(var(--text-height) - 2px) !important;
    color: var(--blk-lime-green) !important;
}

/* end of banner and alerts ================================================= */

/* content body */
.key-color { color: var(--cyan-blue-lighter) !important; font-weight: 600 !important;}
.value-color { color: var(--blk-lime-green) !important; font-weight: 400 !important;}
.username-color { color: var(--cyan-blue-lighter) !important; }
.h3header { color: var(--purple-magenta) !important; }

/* for mentor_home_section and connect_calendar_section */
.input-group-text {
    background-color: var(--whitish-color) !important;
    border-left: none;
}
.form-control:read-only {
    background-color: var(--whitish-color) !important;
}
.toggle-password {
    cursor: pointer;
    vertical-align: middle;
    margin-left: 5px;
    border-right: none;
}
.password-field {
    display: inline-block;
    min-width: 100px;
}
/* for service_request.html */
select { color: var(--blk-lime-green); /* Default color for the select box */}
select option:first-child {color: #E5E4E2;}
select option:not(:first-child) {color: var(--blk-lime-green);}
/* This will color the select box itself when an option is selected */
select.has-selection { color: var(--purple-magenta); /* Match this with the .h3header color */}

.custom-skip {
    font-size: calc(var(--text-height) - 2px) !important;
    background-color: var(--purple-magenta) !important;
    color: white;
}
.content-font {
    color: var(--blk-lime-green) !important;
    font-size: var(--text-height) !important;
}
/* used on the forms, alerts, ... */
.sub-font {
    color: var(--blk-lime-green) !important;
    font-size: calc(var(--text-height) - 2px) !important;
}

.header-font {
    font-weight: 500;
    font-style: bold;
    font-size:  calc(var(--text-height) - 2px) !important;
    color: var(--purple-magenta) !important;
}

.custom-submit {
    font-size: calc(var(--text-height) - 2px) !important;
    background-color: var(--purple-magenta) !important;
    color: white;
}
/* cart */
.card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.mentor-name {
    min-height: 3rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--purple-magenta);
    font-size: calc(var(--text-height) + 2px);   /* to make it like normal h5 */
}
.mentor-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.mentor-rate {
    margin-bottom: 0.5rem;
}
.mentor-categories, .mentor-languages {
    min-height: 1.5rem;
    max-height: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0.5rem;
}
.card-footer {
    margin-top: auto;
    background-color: transparent;
    border-top: none;
    padding-top: 1rem;
}

/* end of content ================================================= */
@media (min-width: 0) {
    .table tbody,
    .table th,
    .table td,
    .table tr {
        display: block;
        width: 100%;
    }

    .table tr {
        margin-bottom: 15px;
    }

    .table tr th {
        display: flex;
        flex-direction: column;
        color: var(--cyan-blue-lighter) !important;
        font-size: var(--text-height) !important;
        border-bottom: none;
        padding-bottom: 5px;
    }

    .table tr td {
        display: flex;
        flex-direction: column;
        padding-top: 5px;
        padding-bottom: 8px;
        border-bottom: 1px solid #dee2e6;
        color: var(--blk-lime-green) !important;
        font-size: calc(var(--text-height) - 2px) !important;
    }

    .table tr:last-child td {
        border-bottom: none;
    }
}
    /*
    .table thead {
        display: flex;
        flex-direction: column
        display: none; Hide the header
    } */

    /*
    .table td:before {
        content: attr(data-label);
        font-weight: normal;
        text-transform: capitalize;
        color: var(--cyan-blue-lighter) !important;
    } */

/* Styles for xs devices (mobile and portrait phones, less than 576px) */
@media (max-width: 576px) {
    /* it seems navbar height of 80 is good for all the cases */
    :root { --text-height: 16px !important; }
}

/* Styles for tablet and larger (<= 768px) */
/* do not expand on devices medium (min-width: 768px) and larger, see navbar-expand-md in navbar.html */
@media (max-width: 768px) {
    :root { --text-height: 18px !important; }

    /* navbar dropdown */
    .navbar-nav .dropdown-menu {
      margin-right: 0px !important;
      max-width: 100%; /* Full width on smaller screens */
      right: 0 !important;
      left: 0 !important;
    }
    .navbar-nav .dropdown-menu .dropdown-item {
      font-size: calc(var(--text-height) - 4px) !important;
    }

    /* tables */
    /* For screens smaller than 768px (tablets) */
    .table thead {
        display: none; /* Hide table header */
    }
    .table td {
        display: block; /* Make rows stack vertically */
        width: 100%;
        border: none;
        border-bottom: 1px solid #dee2e6;
    }
    .table td:before {
        content: attr(data-label); /* Show the column name as a label */
        display: block;
        color: var(--cyan-blue-lighter) !important;
    }
}

/* Styles for laptop and larger (>=992) (md) 1vw = 768 / 100 = 7.68 */
@media (min-width: 992px) {
    :root { --text-height: 20px !important; }
    /* remove the decoration from mobile active first .navbar-nav .show > .nav-link */
    .navbar-nav .nav-link.active { text-decoration: none !important; }
    /* now recalculate the underline position */
    .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {

    }
    /* change the active color to white since the banner is black .navbar-nav .show > .nav-link*/
    .navbar-nav .nav-link.active  {
        /* color: var(--whitish-color) !important; */
        /* text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); */
        text-decoration: underline !important;
        text-decoration-color: var(--cyan-blue) !important;
        text-decoration-thickness: 0.2vw !important;
        /* text-underline-offset: calc((var(--navbar-height) - (var(--text-height) + var(--bs-navbar-padding-y) * 2)) / 2) !important; */
        text-underline-offset: calc(
            (var(--navbar-height) -
            (var(--text-height)  + var(--bs-navbar-padding-y))) /
            2
        ) !important;
    }

    /* move navbar item to horizontal position after mobile expanded vertically */
    .navbar-collapse {
        position: relative !important; /* Default Bootstrap behavior */
        top: calc (var(--text-height) + 1em) !important;  /* 1em default p tag on the left menu */
        right: auto !important;
        width: 100% !important; /* Full width for larger screens */
    }
    /* the rest gets from  previous media, 768px */

}

/* Styles for (large desktops, 1200px and up) (lg) */
@media (min-width: 1200px) {
    :root { --text-height: 22px !important; }
}

/* Extra large devices (xl) X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1400px) {
    :root { --text-height: 24px; }
}

/* Extra extra large devices (xxl) */
@media (min-width: 1900px) {
    :root { --text-height: 26px; }
}