@import url('https://fonts.googleapis.com/css?family=Roboto');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: 'roboto',  sans-serif; 
}

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Banner - TEMPORARILY COMMENTED OUT */
/*
.banner { 
    background: black; 
    text-shadow: .5px 1px 1px gray;
    color:seashell;
    position: fixed;
    top: 0px; 
    left: 0; 
    width: 100%;
    z-index: 100;
}
#banner-content { 
    width: 100%; 
    font-size: clamp(1.5rem, 4vw, 3rem);
    margin: 0 auto; 
    padding: 8px 0;
    text-align: center; 
    height: auto;
    font-weight: bold;
}
*/

/* Banner mobile adjustments */
/*
@media screen and (max-width: 750px) {
    #banner-content {
        font-size: clamp(1.2rem, 4vw, 2rem);
        padding: 10px 0;
    }
}

@media screen and (max-width: 480px) {
    #banner-content {
        font-size: clamp(1rem, 4vw, 1.5rem);
        padding: 8px 0;
    }
}
*/

/* Desktop NavBar */
.navbar{
    position: absolute;
    top: 0px; /* Start at top, over the banner */
    left: 0;
    width: 100%;
    background: transparent; /* Transparent background */
    z-index: 50; /* Below banner but above content */
    transition: all 0.3s ease;
    padding-top: 20px; /* Add padding instead of top offset */
}

.navbar.sticky {
    position: fixed;
    top: 0;
    padding-top: 0; /* Remove padding when sticky */
    background: rgba(0,0,0,0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 110; /* Above banner (100) */
}

/* Navbar CTA Button Styling */
.navbar-cta-container {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    position: fixed;
    left: 50%;
    top: 10px; /* Start position */
    transform: translateX(-50%);
    z-index: 160; /* Above mobile navbar (150) */
}

.navbar-cta-container.show {
    opacity: 1;
    visibility: visible;
    top: 25px; /* Move down to center in navbar */
    transform: translateX(-50%);
}

.navbar-cta-button {
    background: linear-gradient(45deg, #FFD700, #FFA500) !important;
    color: black !important;
    padding: 15px 30px !important; /* Match hero button padding */
    border-radius: 25px !important; /* Match hero button border-radius */
    font-weight: bold !important;
    text-decoration: none !important;
    font-size: 1.2rem !important; /* Match hero button font-size */
    transition: all 0.3s ease !important;
    animation: navbarPulse 2s infinite;
    display: inline-block !important;
    box-shadow: 0 4px 15px rgba(255,215,0,0.3) !important; /* Match hero button shadow */
}

.navbar-cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(255,215,0,0.4) !important;
}

@keyframes navbarPulse {
    0% { box-shadow: 0 2px 8px rgba(255,215,0,0.3); }
    50% { box-shadow: 0 4px 20px rgba(255,215,0,0.6); }
    100% { box-shadow: 0 2px 8px rgba(255,215,0,0.3); }
}

/* Mobile responsive navbar button */
@media screen and (max-width: 750px) {
    .navbar-cta-container {
        top: 15px; /* Position on the mobile navbar */
    }
    
    .navbar-cta-container.show {
        top: 15px; /* Stay on mobile navbar when shown */
    }
    
    .navbar-cta-button {
        padding: 8px 16px !important; /* Smaller to fit on navbar */
        font-size: 0.8rem !important; /* Smaller font to fit */
        white-space: nowrap !important; /* Prevent text wrapping */
    }
}

/* Extra small screens - further reduce button size */
@media screen and (max-width: 480px) {
    .navbar-cta-container {
        top: 12px; /* Slightly higher for small screens */
    }
    
    .navbar-cta-button {
        padding: 6px 12px !important; /* Even smaller for tiny screens */
        font-size: 0.7rem !important; /* Smaller font */
    }
    
    /* Reduce image size in button for small screens */
    .navbar-cta-button img {
        height: 0.8em !important;
        margin-right: 4px !important;
        margin-left: 4px !important;
    }
}

/* Very small screens - ultra compact button */
@media screen and (max-width: 360px) {
    .navbar-cta-button {
        padding: 5px 8px !important;
        font-size: 0.65rem !important;
        border-radius: 20px !important;
    }
    
    .navbar-cta-button img {
        height: 0.7em !important;
        margin-right: 3px !important;
        margin-left: 3px !important;
    }
}

/* Contact page specific styling - solid black background */
body.contact-page .navbar.sticky {
    background: rgba(0, 0, 0, 1);
}

body.contact-page .mobile.sticky {
    background: rgba(0, 0, 0, 1);
}

/* Ensure mobile navbar stays below buttons when sticky */
.mobile.sticky {
    z-index: 10; /* Same as desktop navbar */
}

.navbar.sticky .transition-banner {
    background: rgba(0,0,0,0.1);
}

.brand-logo{
    height: 125px;
    position: absolute;
    top: 10px; /* Adjusted for static navbar */
    left: 20px;
    z-index: 110; /* Above banner (100) */
    transition: all 0.3s ease;
}

/* Move logo down when navbar is sticky */
.navbar.sticky .brand-logo {
    top: 10px; /* Perfect position when sticky */
    height: 100px; /* Slightly smaller when sticky */
    z-index: 110; /* Stay above banner */
}
.nav-items{
    display: flex;
    align-items:center;
}
.nav-items a{
    margin: 0 10px;
}
.nav-items a img{
    width: 30px;
}
.transition-banner{
    height: 50px;
    width:100%;
    display:flex;
    justify-content: center;
    background: transparent;
   
}
.links-container{
    /* margin-left: -70px; */
    width:100%;
    display:flex;
    padding: 20px 5vw 20px 0;
    justify-content:flex-end;
    list-style: none;
}
.link{
    text-transform:uppercase;
    padding: 3px 3px;
    margin: 0 0px;
    text-decoration: none;
    color: white; 
    transition: .6s;
    font-size: x-large;
    border: none;
}
.link:hover{
    color: red;
}
/* --------------- */


.link:hover{
	-webkit-animation-name:colorchange;
	        animation-name:colorchange;
	-webkit-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	
}

@-webkit-keyframes colorchange{
	0%{
		color:yellow;
	}
	25%{
		color:orange;
	}
	50%{
		color:red;
	}
	75%{
		color:black;
	}
}

@keyframes colorchange{
	0%{
		color:yellow;
	}
	25%{
		color:orange;
	}
	50%{
		color:red;
	}
	75%{
		color:black;
	}
}

/* --------------- */
.mobile{
    display:none;
}
/* Mobile NavBar */
@media screen and (max-width: 850px){
    .link{
        font-size: large;
    }
}  
@media screen and (max-width: 750px){
    .navbar{
        display:none;
    }
    .mobile{
        display:flex;
        justify-content: space-between;
        align-items: center;
        background: transparent; /* Transparent background */
        color: white;
        position: fixed; /* Changed to fixed to sit below fixed banner */
        top: 0; /* Position at top of screen, covering banner */
        width: 100%;
        height: 65px; /* Balanced height for logo */
        z-index: 150; /* Above banner to cover it */
        transition: all 0.3s ease;
        padding: 10px 0; /* Better vertical centering */
    }
    
    .mobile.sticky {
        position: fixed;
        top: 0; /* Stay at top */
        height: 65px; /* Maintain height when sticky */
        background: rgba(0,0,0,0.95);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        z-index: 150; /* Above banner */
    }
    .brand-title {
        display: flex;
        align-items: center;
        padding-left: 15px;
        z-index: 151; /* Above mobile navbar */
    }
    .brand-title img{
        position: relative;
        height: 55px; /* Smaller default size */
        z-index: 151; /* Above banner */
        transition: all 0.3s ease;
        display: block;
    }
    
    /* Adjust mobile logo when sticky */
    .mobile.sticky .brand-title img {
        height: 50px; /* Slightly smaller when sticky */
    } 
    /* .mobile-div{
    } */
    .navbar-links{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        border-top: 2px solid #FFD700;
        z-index: 1000;
    }
    .navbar-links ul{
        margin: 0;
        padding: 0;
        display: flex;
    }
    .navbar-links li{
        list-style: none;   
        background: transparent;
    }
    .navbar-links li a{
        text-decoration: none;
        color: white;
        text-shadow: .5px 1px .5px black;
        padding: 1rem;
        display:block;
        transition: .5s ease;
    }
    .navbar-links li a:hover{
        /* Removed black/red transition effect for cleaner hover */
        transition: .5s ease;
    }
    .toggle-btn{
        position:absolute;
        top: 50%; /* Center vertically */
        transform: translateY(-50%); /* Perfect centering */
        right: 1rem;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        z-index: 1001;
        cursor: pointer;
    }
    .toggle-btn .bar{
        height: 3px;
        width: 100%;
        background-color: white;
        border-radius: 10px;
        transition: all 0.3s ease;
    }
    
    /* Transform hamburger to X when active */
    .toggle-btn.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    
    .toggle-btn.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .toggle-btn.active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    .mobile-div{
        position: relative;
        padding-top: 50px;
        flex-direction: column;
        align-items: flex-end;  
    }
   .navbar-links {
        position: fixed;
        top: 0; /* Position at top of screen covering banner */
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.95);
        border-top: 2px solid #FFD700;
        padding-top: 65px; /* Add padding equal to navbar height so content appears below it */
        z-index: 145; /* Below navbar (150) but above overlay */
        transform: scale(1,0);
        transform-origin: top;
        transition: .2s ease;
    }
    .navbar-links ul{
        flex-direction: column;
        align-items: center; /* Center the menu items */
        padding: 20px 0; /* Add vertical padding */
    }
    .navbar-links li{
        list-style: none;   
        background: transparent;
        width: 100%; /* Full width for better tap targets */
        text-align: center; /* Center text */
    }
    .navbar-links li a{
        text-decoration: none;
        color: white;
        text-shadow: .5px 1px .5px black;
        padding: 1.5rem; /* Larger padding for better touch targets */
        display: block;
        transition: .5s ease;
        font-size: 1.2rem; /* Bigger font size */
        font-weight: 500;
    }
    .navbar-links li a:hover{
        color: #FFD700;
        background: rgba(255, 215, 0, 0.1);
        transition: .5s ease;
    }
    .navbar-links.active {
        transform:scale(1,1);  
        transition: .5s ease;
    }
    
    /* Mobile overlay background */
    .mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 40; /* Below navbar-links so buttons are clickable */
        transition: opacity 0.3s ease;
    }
    
    .mobile-overlay.active {
        display: block;
    }
    
    #toggle-btn{
        display: flex;
    }
    #toggle-btn2{
        display: none;
    }
}
/* Even smaller screens - reduce sizes further */
@media screen and (max-width: 480px){
    .mobile{
        height: 58px; /* Smaller height for small screens */
        top: 0; /* Position at top */
    }
    
    .mobile.sticky {
        top: 0; /* Keep at top when sticky */
    }
    
    .navbar-links {
        top: 0; /* Position at top of screen */
        padding-top: 58px; /* Padding equal to navbar height */
    }
    
    .brand-title {
        padding-left: 10px;
    }
    
    .brand-title img{
        height: 45px; /* Smaller logo for small screens */
    }
    
    .mobile.sticky .brand-title img {
        height: 42px;
    }
    
    .toggle-btn{
        width: 25px;
        height: 18px;
    }
    
    .toggle-btn .bar{
        height: 2.5px;
    }
}

/* Extra small screens - minimal overlap */
@media screen and (max-width: 360px){
    .mobile{
        height: 55px;
        top: 0;
    }
    
    .mobile.sticky {
        top: 0; /* Keep at top when sticky */
    }
    
    .navbar-links {
        top: 0; /* Position at top of screen */
        padding-top: 55px; /* Padding equal to navbar height */
    }
    
    .brand-title img{
        height: 40px;
    }
    
    .mobile.sticky .brand-title img {
        height: 38px;
    }
}