/* Google Fonts loaded non-render-blocking in HTML */
:root {
--nav-height: 80px;
--glass-bg: rgba(15, 15, 15, 0.7);
--glass-border: rgba(255, 255, 255, 0.1);
--accent-color: #ff6b00;
/* Orange accent */
--text-main: #ffffff;
--text-dim: rgba(255, 255, 255, 0.7);
--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#navbar {
position: absolute;
top: 35px;
left: 0;
width: 100%;
z-index: 1000;
font-family: 'Outfit', sans-serif;
transition: var(--transition);
}
.nav-wrapper {
max-width: 1400px;
margin: 0 auto;
background: var(--glass-bg);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
border-radius: 24px;
height: var(--nav-height);
display: flex;
align-items: center;
padding: 0 10px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: linear-gradient(135deg, #00000087 0%, rgba(255, 255, 255, 0.02) 100%),
linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 40%), rgba(20, 20, 20, 0.35);
position: relative;
z-index: 1002;
}
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
/* Logo */
.nav-left {
flex: 1;
display: flex;
align-items: center;
}
.brand-logo {
height: 50px;
width: auto;
transition: var(--transition);
}
@media (max-width: 991px) {
.brand-logo {
height: 60px;
}
}
@media (max-width: 576px) {
.brand-logo {
height: 40px;
}
#navbar {
top: 10px;
padding: 0 10px;
}
.nav-wrapper {
border-radius: 15px;
}
}
.logo-link:hover .brand-logo {
transform: scale(1.05);
}
/* Nav Links */
.nav-center {
flex: 0 0 auto;
display: flex;
justify-content: center;
}
.nav-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 2.5rem;
}
.menu-link {
text-decoration: none;
color: var(--text-dim);
font-size: 0.95rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition);
position: relative;
padding: 5px 0;
}
.menu-link:hover,
.menu-link.active {
color: var(--text-main);
}
.menu-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent-color);
transition: var(--transition);
}
.menu-link:hover::after,
.menu-link.active::after {
width: 100%;
}
/* Dropdown Styles */
.has-dropdown {
position: relative;
}
.nav-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(15, 15, 15, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
min-width: 240px;
padding: 15px 0;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
z-index: 1100;
}
.has-dropdown:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(12px);
}
.dropdown-list {
list-style: none;
padding: 0;
margin: 0;
}
.dropdown-list li a {
display: flex;
align-items: center;
padding: 12px 20px;
color: var(--text-dim);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: var(--transition);
white-space: nowrap;
}
.dropdown-list li a:hover {
color: var(--text-main);
background: rgba(255, 107, 0, 0.1);
padding-left: 25px;
}
.dropdown-list li a i {
color: var(--accent-color);
font-size: 1.1rem;
}
.dropdown-divider {
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin: 8px 0;
opacity: 1;
}
/* Right CTA */
.nav-right {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1rem;
}
.cta-button {
text-decoration: none;
background: var(--accent-color);
color: #000;
padding: 10px 24px;
border-radius: 100px;
font-weight: 600;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 8px;
transition: var(--transition);
border: 1px solid transparent;
white-space: nowrap;
}
@media (max-width: 991px) {
.cta-button {
padding: 8px 18px;
font-size: 0.8rem;
}
}
@media (max-width: 576px) {
.cta-button {
display: none;
}
.cta-button span {
display: none;
}
.cta-button i {
margin: 0;
font-size: 1.1rem;
}
.nav-wrapper {
height: 10vh;
}
}
.cta-button:hover {
background: transparent;
border-color: var(--accent-color);
color: var(--accent-color);
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(255, 107, 0, 0.2);
}
.cta-button i {
font-size: 1rem;
transition: var(--transition);
}
.cta-button:hover i {
transform: translateX(4px);
}
/* Mobile Toggle */
.mobile-toggle {
background: transparent;
border: none;
cursor: pointer;
padding: 5px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 1001;
position: relative;
transition: var(--transition);
}
.bar {
display: block;
width: 22px;
height: 2px;
background-color: #ffffff;
border-radius: 4px;
transition: var(--transition);
}
.mobile-toggle.active .bar {
background-color: var(--accent-color);
}
.mobile-toggle.active .bar:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.mobile-toggle.active .bar:nth-child(2) {
opacity: 0;
}
.mobile-toggle.active .bar:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* Mobile Menu */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
rgba(10, 10, 10, 0.85);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
.mobile-menu-content {
width: 90%;
max-width: 400px;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.mobile-menu-content li {
margin: 7px 0;
}
.mobile-nav-menu {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
padding-top: 2rem;
}
.mobile-link {
display: flex;
align-items: center;
gap: 15px;
font-size: 1.2rem;
color: var(--text-main);
text-decoration: none;
padding: 15px 25px;
font-weight: 600;
transition: var(--transition);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
width: 100%;
}
.mobile-link i {
font-size: 1.4rem;
color: var(--accent-color);
opacity: 0.9;
}
.mobile-link:hover {
background: rgba(255, 107, 0, 0.1);
border-color: rgba(255, 107, 0, 0.2);
transform: translateX(5px);
}
.mobile-link-wrapper {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.mobile-has-dropdown .mobile-link {
margin: 0;
}
.mobile-dropdown-toggle {
background: rgba(255, 107, 0, 0.1);
border: 1px solid rgba(255, 107, 0, 0.2);
color: var(--accent-color);
width: 55px;
height: 55px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}
.mobile-dropdown-toggle i {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.mobile-has-dropdown.active .mobile-dropdown-toggle {
background: var(--accent-color);
color: #fff;
}
.mobile-has-dropdown.active .mobile-dropdown-toggle i {
transform: rotate(180deg);
}
.mobile-dropdown-content {
max-height: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(0, 0, 0, 0.2);
border-radius: 12px;
margin-top: -5px;
}
.mobile-has-dropdown.active .mobile-dropdown-content {
max-height: 400px;
margin-bottom: 15px;
padding: 10px 5px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-dropdown-list {
list-style: none;
padding: 0;
margin: 0;
}
.mobile-sub-link {
display: flex;
align-items: center;
padding: 12px 20px;
color: var(--text-dim);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: var(--transition);
border-radius: 8px;
}
.mobile-sub-link i {
color: var(--accent-color);
width: 25px;
}
.mobile-sub-link:hover {
color: var(--text-main);
background: rgba(255, 255, 255, 0.05);
padding-left: 25px;
}
.mobile-menu-footer {
width: 100%;
margin-top: auto;
}
.mobile-social-icon {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-main);
text-decoration: none;
font-size: 1.2rem;
transition: var(--transition);
}
.mobile-social-icon:hover {
background: var(--accent-color);
color: #fff;
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(255, 107, 0, 0.3);
}
.border-white-10 {
border-color: rgba(255, 255, 255, 0.1) !important;
}
.overlay-close-btn {
position: absolute;
top: 25px;
right: 25px;
background: transparent;
border: none;
color: white;
font-size: 3rem;
line-height: 1;
cursor: pointer;
transition: var(--transition);
z-index: 1100;
}
.overlay-close-btn:hover {
color: var(--accent-color);
transform: rotate(90deg);
}
/* ============================
Footer Styles
============================ */
.footer-section {
background: #1a1a1a;
color: var(--text-dim);
padding: 80px 0 30px;
font-family: 'Outfit', sans-serif;
position: relative;
overflow: hidden;
}
/* Background Gradients */
.footer-section::before {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
border-radius: 50%;
z-index: 0;
pointer-events: none;
}
.footer-section::after {
content: '';
position: absolute;
bottom: -50px;
right: -50px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(108, 92, 231, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
border-radius: 50%;
z-index: 0;
pointer-events: none;
}
.footer-top {
position: relative;
z-index: 1;
margin-bottom: 50px;
}
/* Brand Column */
.footer-brand {
padding-right: 20px;
}
.footer-logo {
display: inline-block;
width: 180px;
margin-bottom: 1.5rem;
}
.logo-text .highlight {
color: var(--accent-color);
}
.footer-desc {
color: var(--text-dim);
margin-bottom: 2rem;
line-height: 1.6;
max-width: 320px;
}
/* Social Icons */
.social-links {
display: flex;
gap: 15px;
}
.social-link {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-main);
text-decoration: none;
transition: var(--transition);
}
.social-link:hover {
background: var(--accent-color);
border-color: var(--accent-color);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
color: white;
}
/* Footer Titles */
.footer-title {
color: var(--text-main);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1.5rem;
position: relative;
display: inline-block;
}
.footer-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 2px;
background: var(--accent-color);
border-radius: 2px;
}
/* Links List */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 14px;
}
.footer-links a {
color: var(--text-dim);
text-decoration: none;
transition: var(--transition);
display: inline-block;
font-size: 0.92rem;
line-height: 1.5;
}
.footer-links a:hover {
color: var(--accent-color);
transform: translateX(5px);
}
/* Contact Info */
.contact-info {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.contact-info li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
color: var(--text-dim);
font-size: 0.92rem;
line-height: 1.5;
}
.contact-info i {
color: var(--accent-color);
font-size: 1.1rem;
margin-top: 3px;
}
.contact-info a {
color: var(--text-dim);
text-decoration: none;
transition: var(--transition);
}
.contact-info a:hover {
color: var(--accent-color);
}
/* Map */
.footer-map {
border-radius: 16px;
overflow: hidden;
height: 200px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: var(--transition);
position: relative;
}
.footer-map iframe {
width: 100%;
height: 100%;
filter: invert(90%) hue-rotate(180deg) brightness(90%);
transition: var(--transition);
}
.footer-map:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-color: var(--accent-color);
}
.footer-map:hover iframe {
filter: none;
}
/* Footer Bottom */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 25px;
position: relative;
z-index: 1;
}
.copyright {
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
margin: 0;
}
.copyright a {
color: var(--accent-color);
text-decoration: underline;
transition: var(--transition);
}
.footer-legal a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
margin-left: 20px;
font-size: 0.9rem;
transition: var(--transition);
}
.footer-legal a:hover {
color: var(--accent-color);
}
@media (max-width: 991px) {
.footer-brand {
margin-bottom: 2rem;
}
}
@media (max-width: 768px) {
.footer-section {
padding: 50px 0 30px;
}
.footer-brand {
text-align: center;
margin-bottom: 2rem;
}
.footer-brand .social-links {
justify-content: center;
}
/* Ensure specific sections are left aligned */
.footer-links,
.contact-info,
.footer-title {
text-align: left;
}
.footer-title::after {
left: 0;
transform: none;
}
.footer-map {
margin-top: 20px;
}
.footer-legal {
margin-top: 15px;
}
.footer-legal a {
margin: 0 10px;
}
.contact-info li {
justify-content: flex-start;
}
.contact-info span,
.contact-info a {
font-size: 0.87rem;
word-break: break-word;
/* Handle long addresses */
}
.contact-info {
flex-direction: column;
justify-content: space-between;
}
}
@media (max-width: 562px) {
.contact-info i {
font-size: 0.8rem;
}
}
/* Footer Column Spacing Fix on Mobile */
@media (max-width: 767px) {
/* Allow footer columns to stay side-by-side on mobile if they have col-6 */
.footer-top .col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.footer-top .col-lg-2,
.footer-top .col-lg-3 {
margin-bottom: 30px;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-title {
margin-bottom: 1.2rem;
}
}