/* =========================================
   GOOGLE FONT IMPORT
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* =========================================
   ROOT VARIABLES
========================================= */
:root {
    --nav-bg-color: #090e1a;
    --mint-accent: #00e599;
    --mint-glow-rgba: rgba(0, 229, 153, 0.35);
    --font-primary: 'Plus Jakarta Sans', sans-serif;
}

/* =========================================
   GLOBAL RESET
========================================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================
   HTML + BODY
========================================= */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;

    background-color: #050811;

    font-family: var(--font-primary);
}

/* =========================================
   MAIN NAVBAR
========================================= */
.premium-navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

     background:
    linear-gradient(
        90deg,
        #050811 0%,
        #071126 30%,
        #08152d 50%,
        #071126 70%,
        #050811 100%
    );

    padding: 6px 0 !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

   
    box-shadow:
    0 4px 18px rgba(0,0,0,0.28);

    z-index: 1050;

    overflow: visible !important;
}

/* =========================================
   CONTAINER
========================================= */
.custom-container {

    width: 100%;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding-left: 24px;

    padding-right: 24px;

    position: relative;
}

/* =========================================
   LOGO WRAPPER
========================================= */
.logo-wrapper {

    position: relative;

    display: inline-flex !important;

    align-items: center;

    text-decoration: none;

    z-index: 20;
}

/* =========================================
   LOGO CONTENT
========================================= */
.logo-main-content {

    display: flex;

    align-items: center;

    position: relative;

    z-index: 2;

    animation: layoutFloat 3s ease-in-out infinite;
}

/* =========================================
   LOGO IMAGE
========================================= */
.logo-graphic {

    width: 100px !important;

    height: auto !important;

    object-fit: contain;

    display: block;

    border: none !important;

    box-shadow: none !important;
}

/* =========================================
   GLOW EFFECT
========================================= */
.glow-light {

    position: absolute;

    top: 50%;

    left: 50px;

    transform: translate(-50%, -50%);

    width: 130px;

    height: 130px;

    background:
        radial-gradient(
            circle,
            rgba(0, 229, 153, 0.35) 0%,
            rgba(240, 76, 35, 0.12) 55%,
            transparent 75%
        );

    filter: blur(16px);

    z-index: 1;

    pointer-events: none;

    animation: ambientPulse 4s ease-in-out infinite;
}

/* =========================================
   NAVIGATION
========================================= */
.navigation-menu-list .nav-item {
    position: relative;
}

/* =========================================
   NAV LINKS
========================================= */
.menu-item-link {

    position: relative;

    color: #ffffff !important;

    font-size: 0.98rem;

    font-weight: 500;

    padding: 8px 18px !important;

    transition: 0.3s ease;
}

.menu-item-link:hover,
.menu-item-link.active {
    color: var(--mint-accent) !important;
}

/* =========================================
   UNDERLINE EFFECT
========================================= */
.menu-item-link::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    height: 2px;

    background-color: var(--mint-accent);

    transition: width 0.3s ease;
}

.menu-item-link:hover::after,
.menu-item-link.active::after {
    width: 60%;
}

/* =========================================
   MENU GAP
========================================= */
.menu-space-right {
    margin-right: 25px;
}

/* =========================================
   BUTTON
========================================= */
.btn-action-quote {

    background-color: var(--mint-accent);

    color: #050914 !important;

    font-weight: 600;

    font-size: 0.95rem;

    padding: 11px 30px !important;

    border-radius: 30px;

    border: none;

    box-shadow: 0 4px 20px var(--mint-glow-rgba);

    transition: 0.35s ease;

    white-space: nowrap;
}

.btn-action-quote:hover {

    transform: translateY(-2px);

    background-color: #00ffaa;

    box-shadow: 0 8px 28px rgba(0, 229, 153, 0.5);
}

/* =========================================
   TOGGLER BUTTON
========================================= */
.mobile-toggler-btn {

    border: none !important;

    background: transparent !important;

    padding: 0 !important;

    outline: none !important;

    box-shadow: none !important;

    z-index: 1200;
}

.mobile-toggler-btn:focus {
    box-shadow: none !important;
}

/* =========================================
   TOGGLER ICON
========================================= */
.toggler-icon-box {

    color: #ffffff;

    font-size: 28px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.mobile-toggler-btn:hover .toggler-icon-box {
    color: var(--mint-accent);
}

/* =========================================
   ANIMATIONS
========================================= */
@keyframes layoutFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes ambientPulse {

    0%,100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.12);
    }
}

/* =========================================
   MOBILE VIEW
========================================= */
@media (max-width: 991.98px) {

    /* =========================
       MOBILE NAVBAR
    ========================= */
    .premium-navbar {
        padding: 8px 0 !important;
    }

    /* =========================
       MOBILE LOGO
    ========================= */
    .logo-graphic {
        width: 80px !important;
    }

    /* =========================
       MOBILE GLOW
    ========================= */
    .glow-light {

        width: 100px;

        height: 100px;

        left: 40px;

        filter: blur(12px);
    }

    /* =========================
       MOBILE TOGGLER FIX
    ========================= */
    .navbar-toggler {
        display: block !important;
    }

    /* =========================
       MOBILE MENU
    ========================= */
    .navbar-collapse {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background-color: var(--nav-bg-color);

        padding: 24px;

        border-radius: 0 0 16px 16px;

        border-top: 1px solid rgba(255,255,255,0.05);

        box-shadow: 0 20px 50px rgba(0,0,0,0.8);

        overflow: hidden;
    }

    /* =========================
       MENU ITEMS
    ========================= */
    .navigation-menu-list {
        width: 100%;
    }

    .menu-item-link {

        display: block;

        text-align: center;

        padding: 14px 0 !important;
    }

    .menu-item-link::after {
        display: none;
    }

    .menu-space-right {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* =========================
       FULL WIDTH BUTTON
    ========================= */
    .mobile-w-100 {
        width: 100%;
    }

    .btn-action-quote {

        width: 100%;

        display: block;

        text-align: center;

        padding: 12px 0 !important;

        margin-top: 12px;

        white-space: normal;
    }
}


/* =========================================
   BIG PREMIUM LOGO FIX
========================================= */

/* NAVBAR */
.premium-navbar {

    height: 78px !important;

    padding: 0 !important;

    display: flex;

    align-items: center;

    overflow: visible !important;
}

/* CONTAINER */
.premium-navbar .custom-container {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

/* LOGO AREA */
.logo-wrapper {

    display: flex;

    align-items: center;

    height: 100%;

    overflow: visible;
}

.logo-main-content {

    display: flex;

    align-items: center;

    height: 100%;

    overflow: visible;
}

/* =========================================
   LARGE DESKTOP LOGO
========================================= */
.logo-graphic {

    width: 161px !important;

    height: auto !important;

    object-fit: contain;

    display: block;

    transform: none !important;
}

/* =========================================
   GLOW EFFECT
========================================= */
.glow-light{

    position: absolute;

    top: 50%;
    left: 68px;

    transform: translate(-50%, -50%);

    width: 150px;
    height: 150px;

    background:
    radial-gradient(
        circle,
        rgba(76, 110, 245, 0.55) 0%,
        rgba(76, 110, 245, 0.22) 40%,
        rgba(76, 110, 245, 0.08) 65%,
        transparent 82%
    );

    filter: blur(24px);

    opacity: 1;

    pointer-events: none;

    z-index: 1;
}

/* =========================================
   MOBILE VIEW
========================================= */
@media (max-width: 991.98px) {

    .premium-navbar {

        height: 74px !important;
    }

    .logo-graphic {

        width: 210px !important;
    }

    .glow-light {

        width: 145px;

        height: 145px;

        left: 62px;

        filter: blur(16px);
    }

    .toggler-icon-box {

        font-size: 30px;
    }
}

/* =========================================
   SMALL MOBILE
========================================= */
@media (max-width: 576px) {

    .premium-navbar {

        height: 70px !important;
    }

    .logo-graphic {

        width: 140px !important;
    }

    .glow-light {

        width: 125px;

        height: 125px;

        left: 55px;
    }

    .toggler-icon-box {

        font-size: 28px;
    }
}

/* =========================================
   PREMIUM NAVBAR BACKGROUND
========================================= */

.premium-navbar {

    background:
    linear-gradient(
        90deg,
        #070b14 0%,
        #0d1524 35%,
        #101a2e 50%,
        #0d1524 65%,
        #070b14 100%
    );

    border-bottom: 1px solid rgba(255,255,255,0.06);

    box-shadow:
    0 8px 32px rgba(0,0,0,0.45);

    backdrop-filter: blur(10px);
}

.glow-light{
    opacity: 0.75;
    filter: blur(28px);
}

.logo-graphic{
    width: 165px !important;
}

@media (max-width: 576px){

    .logo-graphic{
        width: 180px !important;
    }
}


/* MOBILE LOGO LEFT FIX */
@media (max-width: 576px) {

    .logo-wrapper {

        position: relative;

        left: -22px;
    }

    .logo-graphic {

        width: 144px !important;
    }
}