/* =========================
   HEADER
========================= */

.main-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;

    /* CONSTANT ROYAL BLUE */

    background:rgba(0,0,128,1 ) !important;

    /* REMOVE TRANSPARENCY */

    backdrop-filter:none !important;

    /* CONSTANT SHADOW */

    box-shadow:
    0 4px 20px rgba(0,0,0,0.08);

    transition:none !important;
}

/* =========================
   REMOVE SCROLL COLOR CHANGE
========================= */

.main-header.scrolled{

    /* SAME COLOR */

    background:rgba(255,255,0,1) !important;

    box-shadow:
    0 4px 20px rgba(0,0,0,0.08);

}

/* =========================
   NAVBAR
========================= */

.navbar{
    padding:15px 0;
}

/* =========================
   HEADER LOGO
========================= */

.hero-logo{
    width:70px;
    height:70px;

    border-radius:50%;

    background:#ffffff !important;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    /* PERFECT ROUND SHADOW */

    box-shadow:
    0 0 25px rgba(255,255,0,0.9),
    0 0 50px rgba(255,255,0,0.6),
    0 0 80px rgba(255,255,0,0.35);

    position:relative;
}

/* OPTIONAL SMOOTH HOVER */



/* LOGO IMAGE */

.header-logo-img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:0.4s ease;
}

/* LOGO HOVER */

.hero-logo:hover{

    transform:
    scale(1.06)
    rotate(3deg);

    box-shadow:
    0 12px 28px rgba(255,255,0,1)

}

.hero-logo:hover .header-logo-img{

    transform:scale(1.08);

}

/* =========================
   LOGO TEXT
========================= */

.logo-title{
    color:#fff;
    margin:0;
    font-weight:800;
    font-size:32px;
    line-height:38px;
}

.logo-subtitle{
    color:#fff;
    font-size:15px;
    font-weight:500;
}

/* =========================
   NAVIGATION
========================= */

.nav-link{
    color:rgba(255,255,0,1);

    margin-left:18px;

    position:relative;

    transition:0.4s ease;

    font-size:18px;
    font-weight:600;
}

/* UNDERLINE EFFECT */

.nav-link::after{
    content:'';

    position:absolute;

    left:0;
    bottom:-8px;

    width:0%;
    height:3px;

    background:rgba(255,255,0,1) !important;

    transition:0.4s ease;

    border-radius:20px;
}

/* ACTIVE + HOVER */

.nav-link:hover::after,
.nav-link.active::after{
    width:100%;
}

/* TEXT HOVER */

.nav-link:hover{
    color: rgba(255,255,0,1)  !important;
}

/* =========================
   BUTTON
========================= */

.contact-btn{

    background:rgba(255,255,0,1);

    color:#000;

    padding:13px 32px;

    border-radius:10px;

    text-decoration:none;

    margin-left:28px;

    font-weight:700;

    transition:0.4s ease;

    display:inline-block;

    /* RECTANGLE SHADOW EFFECT */

    box-shadow:
    0 0 15px rgba(255,255,0,0.9),
    0 8px 25px rgba(255,255,0,0.7),
    0 12px 40px rgba(255,255,0,0.45);
}

/* HOVER EFFECT */

.contact-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 0 20px rgba(255,255,0,1),
    0 10px 30px rgba(255,255,0,0.8),
    0 15px 50px rgba(255,255,0,0.5);
}
/* BUTTON HOVER */

.contact-btn:hover{

    background:#fff;

    color:rgba(0,0,128,1 );

    transform:
    translateY(-4px)
    scale(1.03);

    box-shadow:
    0 15px 35px rgba(238, 108, 77, 0.2);

}

/* =========================
   MOBILE TOGGLER
========================= */

.navbar-toggler{

    border:none !important;

    box-shadow:none !important;

    color:#fff !important;

    font-size:28px;
}

/* =========================
   MOBILE NAVIGATION
========================= */

@media(max-width:991px){

    .nav-menu{

        position:fixed;

        top:0;
        right:-100%;

        width:300px;
        height:100vh;

        /* CONSTANT ROYAL BLUE */

        background:rgba(0,0,128,1 );

        padding:35px 25px;

        transition:0.4s ease;

        z-index:9999;

        display:flex;
        flex-direction:column;
        justify-content:flex-start;

        overflow-y:auto;

        box-shadow:
        -5px 0 25px rgba(0,0,0,0.12);
    }

    /* ACTIVE MENU */

    .nav-menu.active{
        right:0;
    }

    /* NAV LINKS */

    .navbar-nav{

        width:100%;

        display:flex;
        flex-direction:column;

        gap:5px;

        padding:0;
        margin:0;
    }

    /* NAV ITEM */

    .nav-item{
        width:100%;
        list-style:none;
    }

    /* MOBILE LINKS */

    .nav-link{

        display:inline-block;

        width:fit-content;

        margin:0;

        padding:14px 0;

        font-size:19px;

        font-weight:600;
    }

    /* UNDERLINE */

    .nav-link::after{
        bottom:5px;
    }

    /* GET QUOTE BUTTON */

    .contact-btn{

        margin-top:35px;

        margin-left:0;

        width:100%;

        text-align:center;

        padding:16px;

        border-radius:12px;

        font-size:18px;
    }

    /* LOGO */

    .hero-logo{
        width:60px;
        height:60px;
    }

    /* TITLE */

    .logo-title{
        font-size:26px;
        line-height:32px;
    }

    .logo-subtitle{
        font-size:14px;
    }

}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:576px){

    .navbar{
        padding:12px 0;
    }

    .hero-logo{
        width:55px;
        height:55px;
    }

    .logo-title{
        font-size:22px;
    }

    .logo-subtitle{
        font-size:13px;
    }

    .nav-menu{
        width:280px;
    }

    .nav-link{
        font-size:18px;
    }

    .contact-btn{
        font-size:17px;
    }

}

/* =========================
   HIDE CLOSE ICON
========================= */

.close-btn{
    display:none !important;
}
/* =========================
   MOBILE PERFECT FIT
========================= */

@media (max-width: 991px){

    .navbar{
        padding:10px 0;
    }

    .hero-logo{
        width:50px;
        height:50px;
        flex-shrink:0;
    }

    .logo-title{
        font-size:20px;
        line-height:22px;
        white-space:nowrap;
        margin-bottom:0;
    }

    .logo-subtitle{
        font-size:11px;
        white-space:nowrap;
    }

    .navbar-brand{
        max-width:75%;
        overflow:hidden;
    }

    .navbar-toggler{
        font-size:24px;
        padding:4px 8px;
    }

    .nav-menu{
        width:280px;
        max-width:80%;
    }
}

/* EXTRA SMALL MOBILE */

@media (max-width:480px){

    .hero-logo{
        width:45px;
        height:45px;
    }

    .logo-title{
        font-size:18px;
        line-height:20px;
    }

    .logo-subtitle{
        font-size:10px;
    }

    .navbar-brand{
        max-width:70%;
    }

    .nav-menu{
        width:260px;
    }
}
html,
body{
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}
@media(max-width:991px){

    body{
        padding-top:85px;
    }

}