/* ==========================================================
   CodeCradle Solutions
   Premium Responsive Navbar
   Production Version
========================================================== */


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

.navbar{

    position:sticky;

    top:0;

    z-index:9999;

    width:100%;

    padding:12px 0;


    background:

    rgba(255,253,248,.88);


    -webkit-backdrop-filter:blur(18px);

    backdrop-filter:blur(18px);


    border-bottom:

    1px solid rgba(11,45,92,.08);


    transition:

    all .35s ease;

}


.navbar.scrolled{


    background:

    rgba(255,255,255,.96);


    box-shadow:

    0 10px 35px rgba(11,45,92,.12);

}


/* ===============================
   CONTAINER
================================ */


.navbar .container{


    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;


}


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


.logo{

    display:flex;

    align-items:center;

    gap:12px;

    color:#0B2D5C;

    text-decoration:none;

    font-size:22px;

    font-weight:800;

    flex-shrink:0;

}


/* ==========================================================
   LOGO IMAGE
========================================================== */

.navbar .logo img{

    width:70px !important;

    height:70px !important;

    object-fit:contain;

    display:block;

    transform-origin:center center;

    cursor:pointer;

    will-change:transform, filter;

    /*
       Do not use transition on transform here.
       Animation handles the rotation.
    */

}


/* ==========================================================
   LOGO HOVER ROTATION
========================================================== */

.navbar .logo img:hover{

    animation-name:CodeCradleLogoRotate;

    animation-duration:.8s;

    animation-timing-function:cubic-bezier(.34,1.56,.64,1);

    animation-iteration-count:1;

    animation-fill-mode:forwards;

    filter:
        drop-shadow(
            0 0 8px
            rgba(37,99,235,.30)
        );

}


/* ==========================================================
   LOGO ROTATION KEYFRAMES
========================================================== */

@keyframes CodeCradleLogoRotate{

    0%{

        transform:
            rotate(0deg)
            scale(1);

    }


    50%{

        transform:
            rotate(180deg)
            scale(1.08);

    }


    100%{

        transform:
            rotate(360deg)
            scale(1);

    }

}


/* ===============================
   NAV LINKS
================================ */


.nav-links{


    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;


}


.nav-links a{


    position:relative;

    color:#1e293b;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.3s;


}


.nav-links a::after{


    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    border-radius:20px;

    background:#E8B24C;

    transition:.3s;


}


.nav-links a:hover,

.nav-links a.active{


    color:#0B2D5C;

}


.nav-links a:hover::after,

.nav-links a.active::after{


    width:100%;

}


/* ===============================
   MOBILE MENU BUTTON
================================ */


.menu-toggle{


    display:none;

    width:45px;

    height:45px;

    border:none;

    background:

    rgba(11,45,92,.08);


    border-radius:50%;

    color:#0B2D5C;

    font-size:22px;

    cursor:pointer;

    transition:.3s;


}


.menu-toggle:hover{


    background:#E8B24C;

    color:white;


}


/* ===============================
   LARGE SCREENS
================================ */


@media(min-width:1400px){


    .nav-links{


        gap:38px;

    }


    .nav-links a{


        font-size:16px;

    }


}


/* ===============================
   TABLETS
================================ */


@media(max-width:1100px){


    .navbar .logo img{


        width:60px !important;

        height:60px !important;


    }


    .logo{


        font-size:19px;

    }


    .nav-links{


        gap:20px;

    }


    .nav-links a{


        font-size:14px;

    }


}


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


@media(max-width:900px){


    .navbar{


        padding:8px 0;

        background:white;


    }


    .navbar .container{


        flex-wrap:wrap;

    }


    .navbar .logo img{


        width:68px !important;

        height:68px !important;


    }


    .logo{


        font-size:18px;

    }


    .menu-toggle{


        display:flex;

        align-items:center;

        justify-content:center;

    }


    .nav-links{


        order:3;

        width:100%;

        margin-top:15px;

        padding:25px;

        gap:22px;

        border-radius:20px;

        background:


        rgba(255,255,255,.95);


        box-shadow:


        0 20px 40px rgba(11,45,92,.12);


        flex-direction:column;

        align-items:flex-start;

        display:none;

        animation:


        menuSlide .35s ease;


    }


    .nav-links.active{


        display:flex;

    }


    @keyframes menuSlide{


        from{


            opacity:0;

            transform:translateY(-15px);


        }


        to{


            opacity:1;

            transform:translateY(0);


        }


    }


    .nav-links a{


        width:100%;

        padding:8px 0;


    }


    .nav-links a::after{


        bottom:0;

    }


}


/* ===============================
   SMALL PHONES
================================ */


@media(max-width:576px){


    /*
       Increased from 75px to 88px
       so the actual CodeCradle logo
       remains clearly visible on phones.
    */

    .navbar .logo img{


        width:88px !important;

        height:88px !important;


    }


    .logo span{


        font-size:15px;

    }


    .menu-toggle{


        width:42px;

        height:42px;

        font-size:20px;


    }


    .nav-links{


        padding:20px;

    }


}


/* ===============================
   EXTRA SMALL DEVICES
================================ */


@media(max-width:360px){


    .logo span{


        display:none;

    }


    /*
       Keep the logo large even on
       very small phones.
    */

    .navbar .logo img{


        width:72px !important;

        height:72px !important;


    }


    .menu-toggle{


        width:40px;

        height:40px;

        font-size:20px;

    }


}