/* ==========================================================================
   1. VARIABLES & GLOBAL SETTINGS
   ========================================================================== */
:root {
    --primary-gradient: linear-gradient(135deg, #0084a8 0%, #000000 100%);
    --secondary-gradient: linear-gradient(to right, #fca311, #ffb703);
    --primary-dark: #1e3c72;
    --accent: #d4af37; /* Gold */
    --success: #00c851;
    --text-dark: #2c3e50;
    --text-muted: #6c757d;
    --light-bg: #f9fbfd;
    --border-radius: 12px;
    --card-shadow: 0 5px 25px rgba(0,0,0,0.05);
    --hover-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #313437;
    background-color: #fff;
    overflow-x: hidden;
    line-height: 1.6;
}

body.hidden-scroll { overflow: hidden; }

a { text-decoration: none; transition: 0.3s; color: var(--primary-dark); }
a:hover { text-decoration: none; color: #00d2ff; }

p { margin-bottom: 1rem; }
img { max-width: 100%; height: auto; }

/* Bootstrap Overrides */
.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.text-center { text-align: center !important; }

/* ==========================================================================
   PHOTO SELECTION MODAL - TOP POSITION
   ========================================================================== */
#plogin .modal-dialog {
    align-items: flex-start !important; /* Vertical Center hatata hai */
    margin-top: 60px !important;        /* Top se gap deta hai */
    min-height: auto !important;
}

/* Mobile ke liye thoda kam gap */
@media (max-width: 576px) {
    #plogin .modal-dialog {
        margin-top: 20px !important;
    }
}
/* ==========================================================================
   2. HEADER & NAVIGATION (Compact Style)
   ========================================================================== */
/* Navbar Links */
.nav-link-modern {
    color: #444 !important; font-weight: 600; font-size: 15px;
    padding: 8px 8px !important; /* Reduced Padding */
    position: relative; transition: all 0.3s ease;
}
.nav-link-modern i { color: #17a2b8; margin-right: 4px; transition: 0.3s; }
.nav-link-modern:hover { color: #17a2b8 !important; }
.nav-link-modern::after, .nav-link-modern.active::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: 5px; left: 50%;
    background-color: #17a2b8; transition: all 0.3s ease-in-out; transform: translateX(-50%);
}
.nav-link-modern:hover::after, .nav-link-modern.active::after { width: 80%; }

/* Navbar Buttons */
.btn-nav-outline {
    border: 2px solid #17a2b8; color: #17a2b8 !important; font-weight: 600;
    border-radius: 50px; padding: 5px 15px !important; transition: 0.3s; font-size: 14px;
}
.btn-nav-outline:hover { background: #17a2b8; color: #fff !important; }

.btn-nav-primary {
    background: var(--primary-gradient); color: white !important; border: none; font-weight: 600;
    border-radius: 50px; padding: 6px 18px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: 0.3s; font-size: 14px;
}
.btn-nav-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.3); color: #fff !important; }

/* Global Page Headers */
.page-header-bg, .contact-header, .faq-header-bg, .privacy-header-bg, .terms-header-bg, .policy-header-bg, .about-header, .services-header, .blog-header-bg, .shop-intro-bg, .vcard-header-bg {
    background: var(--primary-gradient); padding: 80px 0; color: white; text-align: center; margin-bottom: -40px;
}



/* ==========================================================================
   2. LOADER / PRELOADER (Old GIF Style)
   ========================================================================== */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }

#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /* GIF Image ka path */
    background: url(/assets/img/pre/Preloader_8.gif) center no-repeat #fff;
}

/* ==========================================================================
   9. FOOTER & MEDIA QUERIES
   ========================================================================== */
.footer-dark { padding: 40px 0; color: #f0f9ff; background-color: #282d32; }
.footer-dark h3 { margin-bottom: 12px; font-weight: 700; font-size: 16px; color: #fff; }
.footer-dark ul { padding: 0; list-style: none; line-height: 1.6; font-size: 14px; margin-bottom: 0; }
.footer-dark ul a { color: inherit; text-decoration: none; opacity: 0.6; }
.footer-dark ul a:hover { opacity: 0.8; }
.footer-dark .item.social > a {
    font-size: 16px; width: 30px; height: 30px; line-height: 30px; display: inline-block;
    text-align: center; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); margin: 0 5px; color: #fff; opacity: 0.75;
}

@media (max-width: 768px) {
    .page-header-bg { padding: 50px 0; }
    .split-screen-img { display: none; }
    .login-card, .register-card { margin-top: 0; }
}