/* ============================= */
/* Navbar: white background, black text */
/* ============================= */
@import url("https://fonts.googleapis.com/css?family=Exo:500,600,700|Roboto&display=swap");

html {
  overflow-x: hidden;
}

.custom-navbar {
    background-color: #F9F8F6!important;
    /* white background */
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    z-index: 9999; 
}

/* Vertically center the logo */
.custom-navbar .navbar-brand {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: -12px;
    background-color:transparent;
}

/* Logo size */
.custom-navbar .logo {
    height: 60px;
    /* adjust to fit navbar height */
    width: 250px;
    max-height: 10vh;
    background-color:transparent;
}


/* Space between logo and nav links */
.custom-navbar .navbar-nav {
    margin-left: 10px;
    /* adjust spacing */
}

/* Nav links */
.custom-navbar .navbar-nav .nav-link {
    color: #000000;
    font-weight: 500;
    transition: color 0.3s;
}

/* space between each nav link */
.custom-navbar .navbar-nav .nav-item {
    margin-left: 25px;
}


.custom-navbar .navbar-nav .nav-link:hover {
    color: #333333;
}

/* Right section: phone & button */
.custom-navbar .phone {
    color: #000000;
    font-weight: 500;
    margin-right: 10px;
}

/* Right section: horizontal layout */
.custom-navbar .navbar-right {
    margin-left: 70px;
    /* push to right */
    margin-right: 10px;
    /* spacing from right edge */
    display: flex;
    /* ensure flex */
    align-items: center;
    /* vertical center */
    flex-wrap: nowrap;
    /* prevent wrapping */
    flex-shrink: 1;
}

/* Spacing between phone and button */
.custom-navbar .navbar-right .phone {
    margin-right: 15px;
    /* horizontal gap */
    white-space: nowrap;
    /* prevent breaking onto two lines */
}


.custom-navbar .btn-custom {
    background-color: #000000;
    /* black button */
    color: #FAF9F6;
    /* white-ish text */
    font-weight: 600;
    border-radius: 5px;
    transition: all 0.3s;
}
.custom-navbar .btn-custom:hover {
    background-color: red !important; /* red on hover */
    color: #000000 !important;               /* white text */
}
/* Add red vertical line before the Book Now button */
.custom-navbar .navbar-right {
    position: relative;
}

.custom-navbar .navbar-right .btn-custom {
    position: relative;
    margin-left: 20px;
}

/* The red line */
.custom-navbar .navbar-right .btn-custom::before {
    content: "";
    position: absolute;
    left: -12px;        /* distance from the button */
    top: 50%;
    transform: translateY(-50%);
    width: 2px;         /* thickness */
    height: 20px;       /* length */
    background-color: #FDD000;
}


.custom-navbar .btn-custom:hover {
    background-color: #333333;
    color: #ffffff;
}

.divider {
    width: 1px;          /* thickness of line */
    background-color: #FDD000; /* color */
    height: 50px;         /* height of line, adjust to match content */
}


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

/* Optional custom toggle (3 lines) */
.navbar-toggler {
    border: none;
    background: transparent;
    padding: 10px 15px;
    /* important: expands clickable area */
}

.navbar-toggler-icon-custom {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #000;
    position: relative;
}

.navbar-toggler-icon-custom::before,
.navbar-toggler-icon-custom::after {
    content: '';
    width: 30px;
    height: 3px;
    background-color: #000;
    position: absolute;
    left: 0;
}

.navbar-toggler-icon-custom::before {
    top: -10px;
}

.navbar-toggler-icon-custom::after {
    bottom: -10px;
}

/* Sticky header */
/* Sticky header */
nav.custom-navbar {
    position: fixed;           /* stick to top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;             /* above other content */
    background-color:whitesmoke;  /* optional background */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);     /* optional shadow */
}

/* Push page content down so it doesn't hide under header */
body {
    padding-top: 80px;  
}

/* //convert to toggle button */
/* @media (max-width: 1300px) {
    /* hide menu by default for small screens */
/* .custom-navbar .collapse {
        height: 0;
        overflow: hidden;
        transition: height 0.3s ease;
    }

    /* show menu when Bootstrap adds .show */
/* .custom-navbar .collapse.show {
        height: auto;
    } */

/* show toggle button */
/* .custom-navbar .navbar-toggler {
        display: block;
    } */
/* } */
/* @media (max-width: 1500px) {  
    .custom-navbar .navbar-toggler {
        display: block;
    }
    .custom-navbar .collapse {
        display: none;
    }
    .custom-navbar .collapse.show {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .custom-navbar .navbar-nav {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    .navbar-right {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        justify-content: flex-start;
    }
   
   

} */
/* // corrected  */
/* @media (max-width: 992px) {
   
    .custom-navbar .navbar-toggler {
        display: block;
    }

    .custom-navbar .collapse {
        display: none;
    }

    .custom-navbar .collapse.show {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
   
    .custom-navbar .navbar-collapse.show .navbar-nav {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .custom-navbar .collapse.show .navbar-right {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        justify-content: flex-start;
    }
} */





/* ======================= */
/* Responsive: tablets & below */
/* ======================= */
@media (max-width: 992px) {
    /* Show toggle button */
    .custom-navbar .navbar-toggler {
        display: block;
        margin-top: 10px;
        z-index: 1050;
    }
    .custom-navbar {
        position: sticky;
        top: 0;
    }

    /* Collapse container: stack everything vertically */
    .custom-navbar .collapse {
        display: none;       /* hidden by default */
        flex-direction: column;
        width: 100%;
        padding: 0 15px;     /* small padding inside */
    }

    /* Show when toggle clicked */
    .custom-navbar .collapse.show {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    /* Stack nav items vertically */
    .custom-navbar .navbar-collapse.show .navbar-nav {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-left: 0;
    }

    /* Right section: phone + button */
    .custom-navbar .collapse.show .navbar-right {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;       /* spacing from nav links */
        justify-content: flex-start;
        flex-direction: column; /* stack contact + button */
        align-items: flex-start; 
        flex-wrap: nowrap;
    }

    /* Contact info: stack vertically */
    .custom-navbar .navbar-right .contact-info {
        flex-direction: column;
        text-align: left;
        margin-right: 0;
        margin-bottom: 10px;   /* spacing before button */
        width: 100%;
    }

    /* Button: shrink to fit */
    .custom-navbar .navbar-right .btn-custom {
        width: auto;
        padding: 0.5rem 1rem;
        font-size: 14px;
    }
    .divider {
        width: 100%;        /* full width */
        height: 1px;        /* thickness of horizontal line */
        margin: 10px 0;     /* spacing top/bottom */
    }

    /* Social links inside mobile toggle */
.custom-navbar .collapse.show .horizontal-social {
    display: flex;
    flex-direction: row;       /* keep icons in a row */
    gap: 15px;                 /* space between icons */
    margin-top: 10px;          /* spacing from button */
    width: 100%;
    justify-content: flex-start; /* align left */
    padding-left: 0;            /* remove any absolute positioning */
}

.custom-navbar .collapse.show .horizontal-social ul {
    flex-direction: row;       /* horizontal list of icons */
    gap: 15px;
    margin: 0;
    padding: 0;
    width: auto;
}

}





/* @media (min-width: 769px) and (max-width: 1024px) {
  
    .custom-navbar .navbar-toggler {
        display: block;
    }

   
    .custom-navbar .collapse {
        display: none;
    }

    
    .custom-navbar .collapse.show {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    
    .custom-navbar .navbar-collapse.show .navbar-nav {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    
    .custom-navbar .collapse.show .navbar-right {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        justify-content: flex-start;
    }
} */




/* =================================== */
/* Force vertical collapse for JS-triggered zoom */

/* .custom-navbar.force-collapse .collapse {
    display: none ;  
} */

/* Show nav links vertically when toggle is clicked */
/* .custom-navbar.force-collapse .collapse.show {
    display: flex ;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
} */


/* Stack nav links vertically */
/* .custom-navbar.force-collapse .navbar-nav {
    flex-direction: column ;
    gap: 15px;
    width: 100%;
}

.custom-navbar.force-collapse .navbar-right {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
    justify-content: flex-start;
    flex-direction: row;
    gap: 10px;
}

.custom-navbar.force-collapse .navbar-toggler {
    display: block ;
} */



/* ===================== */
/* Zoom / small viewport toggle */
/* Separate zoom-collapse styling */



/* on hover  */
/* Top-level nav links hover */
.custom-navbar .navbar-nav .nav-link:hover {
    color: red !important; /* force override */
}

/* When hovering the whole dropdown (including its menu),
   keep the main nav link red */
.custom-navbar .nav-item.dropdown:hover > .nav-link {
    color: red !important;
}
/* .custom-navbar .collapse.show {
    display: flex;
} */
.custom-navbar .dropdown-menu {
    position: absolute; /* ensure dropdown appears correctly */
}


/* Parent dropdown */
.nav-item.dropdown {
    position: relative; 
   
}
/* Dropdown container (submenu) */
.nav-item.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    flex-direction: column;
    background-color: red;  /* entire dropdown box red */
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 180px;   /* optional width */
    box-shadow: none;
    border: none;
    z-index: 1000;
}

/* Show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: flex;
}

/* Dropdown links */
.nav-item.dropdown .dropdown-item {
    padding: 10px 20px;
    color: #fff; /* white text on red box by default */
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}


/* Hover effect: dropdown item turns white with black text */
.nav-item.dropdown .dropdown-item:hover {
    background-color: #ffffff;
    color: #000;
}


/* Dropdown items hover */
.nav-item.dropdown > .nav-link {
    color: #000; /* black text */
    background-color: transparent; /* no background change */
    transition: color 0.3s;
}

.nav-item.dropdown > .nav-link:hover {
    color: #333; /* optional hover color for link text */
}



/* Door opening effect */
.page-transition-left,
.page-transition-right {
    position: fixed;
    top: 0;
    height: 100%;
    width: 50%;
    background-color: #757575; /* red curtain */
    z-index: 9999;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s ease-in-out;
}

.page-transition-left {
    left: 0;
}

.page-transition-right {
    right: 0;
}

.page-transition-left.active,
.page-transition-right.active {
    transform: scaleX(1);
}


.navbar-left {
  color: #E5E7EB; /* text */
}

.navbar-left i {
  color: #FDD000 !important; /* icon accent */
  margin-right: 6px;
}
/* Email text + icon */
.contact-info .js-email {
    color: #1F2937 !important; /* dark text for light header */
}

/* Phone text + icon */
.contact-info .phone {
    color: #1F2937 !important;
}

/* Optional: accent color for icons only */
.contact-info i {
    color: #DC2626 !important; /* logo red accent */
    margin-right: 6px;
}
/* Horizontal Social Links */
.horizontal-social {
    position: absolute;   /* position relative to container */
    top: 50%;             /* vertically center if needed */
    right: 30px;             /* align to right edge of container */
    transform: translateY(-50%); /* vertical center correction */
    display: flex;
    align-items: center;
    gap: 5px;
    background: #F9F8F6;  /* optional, matches header */
    padding: 0 10px;
    /* z-index: 10;        */
}

.horizontal-social ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 60px;
}

.horizontal-social ul li a {
    color: #333;
    font-size: 18px;
    transition: 0.3s ease;
}

.horizontal-social ul li a:hover {
    color: red;
}

/* Tablet: 992px – 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
    .custom-navbar .ml-auto.d-flex {
        flex-direction: row;       /* keep horizontal layout */
        align-items: center;       /* center vertically */
    }

    .custom-navbar .horizontal-social {
        position: static;          /* cancel absolute */
        transform: none;
        margin-left: 15px;         /* space after button */
        width: auto;
        justify-content: flex-start;
        display: flex;
        gap: 15px;
    }

    .custom-navbar .horizontal-social ul {
        display: flex;
        flex-direction: row;
        gap: 15px;
        margin: 0;
        padding: 0;
        width: auto;
    }
}
@media (max-width: 992px) {
    /* Stack button, contact info, and social links vertically */
    .custom-navbar .ml-auto.d-flex {
        flex-direction: column;   /* stack children vertically */
        align-items: flex-start;  /* align left */
    }

    /* Social links: below button */
    .custom-navbar .horizontal-social {
        position: static;          /* cancel absolute */
        transform: none;           /* cancel desktop vertical centering */
        margin-top: 10px;          /* spacing below button */
        width: 100%;               /* full width if needed */
        justify-content: flex-start;
        display: flex;             /* icons in a row */
        gap: 15px;
    }

    .custom-navbar .horizontal-social ul {
        display: flex;
        flex-direction: row;       /* horizontal icons */
        gap: 15px;
        margin: 0;
        padding: 0;
        width: auto;               /* shrink to fit */
    }
}


/* Optional: hide social icons on mobile if needed */