/* Navbar Adjustments for Better Spacing and Alignment */

/* Main navigation container */
.navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 80px !important; /* Increased from default to accommodate larger padding */
}

/* Navigation header (logo area) */
.nav-header {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    height: auto !important;
}

/* Logo styling */
.nav-brand {
    padding: 19px 15px 13px 0 !important; /* Increased top padding from 13px to 19px */
    margin-right: 1rem !important;
    display: flex !important;
    align-items: center !important;
}

/* Navigation menus wrapper */
.nav-menus-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 !important;
    margin-left: 20px !important;
    width: 100% !important;
    height: auto !important;
}

/* Main navigation menu */
.nav-menu {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Navigation links */
.nav-menu > li > a {
    padding: 28px 18px 22px 18px !important; /* Increased top padding from 22px to 28px */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Adjust header dark variant links */
.header.header-dark .nav-menu > li > a,
.headerd.header-dark .nav-menu > li > a {
    padding: 21px 18px 15px 18px !important; /* Increased top padding from 15px to 21px */
}

/* Social/action menu (right side) - Force to right */
.nav-menu.nav-menu-social {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
}

/* Adjust social menu links */
.nav-menu.nav-menu-social > li > a {
    padding: 28px 12px 22px 12px !important; /* Increased top padding from 22px to 28px */
    margin: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Navigation buttons */
.nav-menu-social > li > a.btn {
    margin: 24px 8px !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

/* Adjust header last style social links */
.headd-sty-last .nav-menu.nav-menu-social > li > a {
    padding: 8px 16px 2px 16px !important; /* Increased top padding from 2px to 8px */
}

/* Adjust navigation buttons */
.nav-button {
    margin: 24px 15px 18px 15px !important; /* Increased top margin from 18px to 24px */
    padding: 14px 14px 8px 14px !important; /* Increased top padding from 8px to 14px */
}

/* Account dropdown button alignment */
.btn-group.account-drop {
    padding: 28px 15px 22px 15px !important; /* Increased top padding from 22px to 28px */
    display: flex !important;
    align-items: center !important;
}

/* Ensure proper alignment - Force right alignment */
.align-to-right {
    margin-left: auto !important;
    justify-self: flex-end !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
}

/* Additional right alignment enforcement */
.nav-menu-social.align-to-right {
    position: relative !important;
    right: 0 !important;
    float: right !important;
}

/* Portrait navigation adjustments */
.navigation-portrait {
    height: 80px !important; /* Increased from 60px to accommodate larger padding */
    display: flex !important;
    align-items: center !important;
}

/* Mobile responsiveness */
@media (max-width: 991px) {
    .nav-menus-wrapper {
        display: none !important;
    }
    
    /* Full width gradient background for mobile navigation header */
    .nav-header {
        width: calc(100% + 48px) !important;
        justify-content: space-between !important;
        background: linear-gradient(135deg, #ff6b6b, #4ecdc4) !important;
        padding: 8px 0 !important;
        margin: 0 -24px !important;
        box-shadow: 0 3px 15px rgba(255, 107, 107, 0.3) !important;
        transition: all 0.3s ease !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    .nav-header:hover {
        background: linear-gradient(135deg, #4ecdc4, #feca57) !important;
        box-shadow: 0 5px 20px rgba(78, 205, 196, 0.4) !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    /* Reset logo background since header now has the gradient */
    .navigation .nav-brand,
    .navigation-portrait .nav-brand,
    .nav-header .nav-brand {
        background: transparent !important;
        border-radius: 8px !important;
        padding: 4px 8px !important;
        box-shadow: none !important;
        transition: all 0.3s ease !important;
        margin: 0 0 0 24px !important;
        border: none !important;
    }
    
    .navigation .nav-brand:hover,
    .navigation-portrait .nav-brand:hover,
    .nav-header .nav-brand:hover {
        transform: translateY(-1px) scale(1.02) !important;
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        border: none !important;
    }
    
    /* Style the hamburger button to match the gradient theme */
    .hamburger-btn {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        padding: 8px !important;
        margin-right: 24px !important;
        transition: all 0.3s ease !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    .hamburger-btn:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3) !important;
    }
    
    .hamburger-btn .hamburger-line {
        background-color: #fff !important;
    }
    
    .navigation .nav-brand img,
    .navigation-portrait .nav-brand img,
    .nav-header .nav-brand img {
        filter: brightness(1.1) contrast(1.1) !important;
    }
    
    .nav-menu > li > a {
        padding: 24px 18px 18px 18px !important;
    }
    
    .nav-button {
        margin: 20px 15px 14px 15px !important;
        padding: 12px 14px 6px 14px !important;
    }
    
    .navigation {
        min-height: 70px !important;
    }
    
    .navigation-portrait {
        height: 70px !important;
    }
}

@media (max-width: 768px) {
    .nav-menu > li > a {
        padding: 20px 12px !important;
    }
    
    .nav-menu-social > li > a.btn {
        margin: 16px 4px !important;
        padding: 6px 12px !important;
        font-size: 14px !important;
    }
    
    .nav-menu-social > li > a:not(.btn) {
        padding: 20px 8px !important;
        margin: 0 2px !important;
    }
    
    .nav-button {
        margin: 16px 15px 10px 15px !important;
        padding: 10px 14px 4px 14px !important;
    }
    
    .nav-brand {
        padding: 11px 15px 5px 0 !important;
    }
    
    .navigation {
        min-height: 60px !important;
    }
    
    .navigation-portrait {
        height: 60px !important;
    }
}