/* =========================================
   NeoFem Premium Pink Theme
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

    /* MAIN COLORS */
    --primary-pink: #ff4f87;
    --dark-pink: #e63e74;
    --soft-pink: #ffd6e5;
    --light-pink: #fff0f5;
    --extra-light-pink: #fff7fa;

    --white: #ffffff;
    --black: #2b2b2b;
    --gray: #666666;

    /* SHADOW */
    --pink-shadow: 0 10px 30px rgba(255, 79, 135, 0.20);

}

/* =========================================
   GLOBAL
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Poppins', sans-serif;
    background:var(--extra-light-pink);

}

html{

    scroll-behavior:smooth;

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

.custom-navbar{

    background:rgba(255,255,255,0.92);

    backdrop-filter:blur(12px);

    padding:16px 0;

    transition:0.4s ease;

    box-shadow:0 4px 25px rgba(255, 79, 135, 0.08);

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

}

/* LOGO */
.logo-img{

    height:60px;
    object-fit:contain;

}

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

.navbar-nav .nav-link{

    color:var(--black);

    font-size:15px;
    font-weight:500;

    margin-left:18px;

    position:relative;

    transition:0.3s ease;

}

/* HOVER */
.navbar-nav .nav-link:hover{

    color:var(--primary-pink);

}

/* ACTIVE */
.navbar-nav .nav-link.active{

    color:var(--primary-pink);
    font-weight:600;

}

/* UNDERLINE EFFECT */
.navbar-nav .nav-link::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-5px;

    width:0%;
    height:2px;

    background:linear-gradient(
        90deg,
        var(--primary-pink),
        var(--dark-pink)
    );

    transition:0.4s ease;

    border-radius:20px;

}

.navbar-nav .nav-link:hover::after{

    width:100%;

}

/* =========================================
   DROPDOWN
========================================= */

.custom-dropdown{

    border:none;

    border-radius:18px;

    padding:10px;

    background:var(--white);

    box-shadow:var(--pink-shadow);

}

.custom-dropdown .dropdown-item{

    border-radius:12px;

    padding:12px 18px;

    font-size:14px;

    font-weight:500;

    transition:0.3s ease;

}

/* DROPDOWN HOVER */
.custom-dropdown .dropdown-item:hover{

    background:var(--soft-pink);

    color:var(--primary-pink);

    transform:translateX(5px);

}

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

.btn-pink{

    background:linear-gradient(
        135deg,
        var(--primary-pink),
        var(--dark-pink)
    );

    color:var(--white);

    border:none;

    padding:12px 30px;

    border-radius:50px;

    font-size:14px;
    font-weight:600;

    transition:0.4s ease;

    box-shadow:0 8px 25px rgba(255, 79, 135, 0.35);

}

/* BUTTON HOVER */
.btn-pink:hover{

    transform:translateY(-4px);

    color:var(--white);

    box-shadow:0 14px 30px rgba(255, 79, 135, 0.45);

}

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

.navbar-toggler{

    border:none;

}

.navbar-toggler:focus{

    box-shadow:none;

}

/* =========================================
   SCROLL EFFECT
========================================= */

.custom-navbar.scrolled{

    background:rgba(255,255,255,0.97);

    padding:12px 0;

    box-shadow:0 8px 30px rgba(255, 79, 135, 0.12);

}

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

@media(max-width:991px){

    .navbar-nav{

        background:var(--white);

        padding:20px;

        margin-top:20px;

        border-radius:20px;

        box-shadow:var(--pink-shadow);

    }

    .navbar-nav .nav-link{

        margin:12px 0;

    }

    .btn-pink{

        width:100%;

        margin-top:10px;

    }

}