/* GOUDY OLD STYLE */
@font-face {
    font-family: 'Goudy Old Style';
    src: url('/fonts/Goudy.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  /* ROBOTO */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/* Base styles */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Goudy Old Style', serif;

}
.cart-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: red;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
}


body {
    font-family: 'Goudy Old Style', serif; 
}

.container-fluid {
    margin: 0; /* Remove extra margin */
    padding: 0; /* Keep padding at 0 as per the class 'p-0' */
}

/* Yellow Border sa taas */
.top-border {
    height: 5px;
    background: linear-gradient(to bottom, #FFDE59, #FCB900);
}


/* Navbar container */
.navbar-custom {
    padding: 0.5rem 1rem;
    border-radius: 16px;
    width: 90%;
    margin: 0 auto; /* Center the navbar horizontally */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Align items vertically in the center */
    font-family: 'Goudy Old Style', serif !important;
}

/* USTPH logo and text */
.navbar-ustph {
    display: flex;
    align-items: center;
    font-family: 'Goudy Old Style', serif !important;
    color: #000000;
    line-height: 1.5rem;
    margin-left: 10px;
    text-decoration: none;
}

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

/* Text styling */
.navbar-text, .brand-title, .brand-subtitle {
    font-family: 'Goudy Old Style', serif;

    color: black;
    text-decoration: none;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
}

.brand-title {
    font-size: 0.8rem;
}

.brand-subtitle {
    font-size: 2rem;
}

/* Prevent text underline on hover */
.navbar-text:hover, .navbar-ustph:hover {
    text-decoration: none;
}

#navbarNav {
    font-family: 'Goudy Old Style', serif;
}

.navbar-nav {
    font-family: 'Goudy Old Style', serif;
    display: flex; 
}

/* BLACK NAVBAR */

.nav-item.active .nav-link {
    font-family: 'Goudy Old Style', serif;
    color: #FFD700 !important; /* Force the active link color to be yellow */
}

.sub-navbar-custom {
    font-family: 'Goudy Old Style', serif !important;
    background-color: #000000; 
    padding: 0.5rem 1rem;
    width: 90%;
    margin-left: 60px;
    display: flex; 
    border-radius: 15px;
    align-items: center; /* Align items vertically in the center */
    margin: 0 auto; /* Center the navbar horizontally */
    justify-content: space-between; 
}

.nav-link {
    font-family: 'Goudy Old Style', serif !important;
    padding: 0.5rem 1rem;
    margin-right: 15px;
}

.nav-link:hover {
    transition-duration: 0.6ms;
}

/* Welcome Section */
.welcome-section {
    text-align: left;
    background-color: #ebecf0;
    padding: 15px; 
    border-radius: 15px;
    width: 90%;
    margin: 0 auto; /* Center the navbar horizontally */
    margin-top: 10px;
}

.welcome-title {
    font-family: 'Goudy Old Style', serif !important;
    font-size: 32px;
    margin: 0px 0px 0px 10px;
}

/* MY ACCOUNT BUTTON */

#navbarDropdown {
    color:black;
    font-weight: normal !important;
  }
  
  .dropdown-item {
    font-family: "Goudy Old Style", serif;
  }

.dropdown-toggle {
    font-weight: normal !important;
}

.navbar-nav .nav-link,
.navbar-text,
.navbar-ustph,
.brand-title,
.brand-subtitle {
    font-weight: normal !important;
}



/* Responsive Styles */

/* For devices with a minimum width of 475px */
@media (min-width: 475px) {
    .navbar-logo {
        max-height: 50px;
    }

    .navbar-brand .navbar-text {
        font-size: 14px;
        margin-left: 8px;
    }
}

/* For devices with a minimum width of 640px */
@media (min-width: 640px) {
    .navbar-logo {
        max-height: 55px;
    }

    .navbar-brand .navbar-text {
        font-size: 15px;
        margin-left: 9px;
    }
}

/* For devices with a minimum width of 768px */
@media (min-width: 768px) {
    .navbar-logo {
        max-height: 60px;
    }

    .navbar-brand .navbar-text {
        font-size: 16px;
        margin-left: 10px;
    }
}