/* =========================================================
   BHARAT SQUARE ULTRA PREMIUM MEGA HEADER CSS
   File: /assets/css/style.css
========================================================= */

/* =========================================================
   RESET
========================================================= */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#F5F7FA;

    color:#111827;

    overflow-x:hidden;
}

/* =========================================================
   ROOT
========================================================= */

:root{

    --primary:#082B5B;
    --secondary:#FF7A00;
    --green:#0FA958;

    --dark:#0D1117;
    --white:#ffffff;

    --text:#111827;
    --light:#6B7280;

    --border:#E5E7EB;

    --shadow:
    0 15px 40px rgba(0,0,0,0.08);

    --radius:24px;
}

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

.container{

    width:95%;
    max-width:1500px;

    margin:auto;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

img{
    max-width:100%;
    display:block;
}

/* =========================================================
   TOPBAR
========================================================= */

.topbar{

    height:46px;

    background:
    linear-gradient(
        90deg,
        #082B5B,
        #0D1117
    );

    color:white;

    display:flex;
    align-items:center;
}

.topbar-wrapper{

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.topbar-left{

    display:flex;
    align-items:center;

    gap:10px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;
}

.live-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#FF3B30;

    box-shadow:
    0 0 15px rgba(255,59,48,0.7);

    animation:pulse 1s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.3);
    }

    100%{
        transform:scale(1);
    }
}

.topbar-center{

    width:60%;
}

.topbar-center marquee{

    font-size:14px;

    opacity:0.9;
}

.topbar-right{

    font-size:13px;

    opacity:0.85;
}

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

.main-header{

    position:sticky;

    top:0;

    width:100%;

    z-index:99999;

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

    backdrop-filter:blur(18px);

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

    transition:0.3s ease;
}

.header-container{

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

    min-height:92px;
}

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

.site-logo{

    display:flex;
    align-items:center;
}

.site-logo img{

    height:64px;

    transition:0.3s ease;
}

.site-logo img:hover{

    transform:scale(1.03);
}

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

.main-navigation ul{

    display:flex;
    align-items:center;

    gap:34px;
}

.main-navigation ul li{

    position:relative;
}

.main-navigation ul li a{

    display:flex;
    align-items:center;

    gap:8px;

    color:#111827;

    font-size:15px;

    font-weight:600;

    transition:0.3s ease;

    position:relative;
}

/* HOVER */

.main-navigation ul li a:hover{

    color:#FF7A00;
}

/* UNDERLINE */

.main-navigation ul li a::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-8px;

    width:0%;
    height:2px;

    background:#FF7A00;

    transition:0.3s ease;
}

.main-navigation ul li a:hover::after{

    width:100%;
}

/* =========================================================
   MEGA MENU
========================================================= */

.mega-menu{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    top:130%;

    width:980px;

    background:white;

    border-radius:30px;

    padding:34px;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:34px;

    opacity:0;
    visibility:hidden;

    transition:0.35s ease;

    box-shadow:
    0 30px 60px rgba(0,0,0,0.12);

    border:
    1px solid rgba(0,0,0,0.04);
}

.mega-parent:hover .mega-menu{

    opacity:1;
    visibility:visible;

    top:115%;
}

/* LEFT */

.mega-left h3{

    font-size:24px;

    margin-bottom:24px;

    font-weight:800;

    color:#082B5B;
}

/* POSTS */

.mega-post{

    display:flex;

    gap:16px;

    margin-bottom:20px;

    transition:0.3s ease;
}

.mega-post:hover{

    transform:translateX(6px);
}

.mega-post img{

    width:120px;
    height:84px;

    object-fit:cover;

    border-radius:16px;
}

.mega-post h4{

    color:#111827;

    font-size:15px;

    line-height:1.6;

    transition:0.3s ease;
}

.mega-post:hover h4{

    color:#FF7A00;
}

/* RIGHT */

.mega-right{

    display:flex;
    align-items:center;
}

.mega-highlight{

    background:
    linear-gradient(
        135deg,
        #082B5B,
        #0D1117
    );

    border-radius:26px;

    padding:36px;

    color:white;

    height:100%;
}

.mega-highlight span{

    display:inline-block;

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

    padding:8px 16px;

    border-radius:50px;

    font-size:12px;

    margin-bottom:20px;
}

.mega-highlight h2{

    font-size:30px;

    line-height:1.3;

    margin-bottom:18px;

    font-weight:800;
}

.mega-highlight p{

    line-height:1.8;

    opacity:0.85;

    margin-bottom:26px;
}

.mega-highlight a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#FF7A00;

    color:white;

    padding:14px 22px;

    border-radius:60px;

    font-weight:700;

    transition:0.3s ease;
}

.mega-highlight a:hover{

    transform:translateY(-3px);
}

/* =========================================================
   ACTION BUTTONS
========================================================= */

.header-actions{

    display:flex;
    align-items:center;

    gap:12px;
}

.search-btn,
.theme-btn,
.mobile-btn{

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:white;

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

    cursor:pointer;

    color:#111827;

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

    transition:0.3s ease;
}

.search-btn:hover,
.theme-btn:hover,
.mobile-btn:hover{

    background:#FF7A00;

    color:white;

    transform:translateY(-3px);
}

/* =========================================================
   SEARCH OVERLAY
========================================================= */

.search-overlay{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,0.72);

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

    opacity:0;
    visibility:hidden;

    transition:0.3s ease;

    z-index:999999;
}

.search-overlay.active{

    opacity:1;
    visibility:visible;
}

.search-box{

    width:92%;
    max-width:860px;
}

.search-box form{

    display:flex;

    background:white;

    border-radius:80px;

    overflow:hidden;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.25);
}

.search-box input{

    flex:1;

    height:74px;

    border:none;

    padding:0 28px;

    font-size:17px;

    outline:none;
}

.search-box button{

    width:180px;

    border:none;

    background:#FF7A00;

    color:white;

    font-size:16px;

    font-weight:700;

    cursor:pointer;
}

/* =========================================================
   TRENDING SEARCH
========================================================= */

.search-trending{

    margin-top:30px;

    background:white;

    border-radius:28px;

    padding:30px;
}

.search-trending h3{

    font-size:22px;

    margin-bottom:24px;

    color:#082B5B;
}

.trending-tags{

    display:flex;
    flex-wrap:wrap;

    gap:14px;
}

.trending-tags a{

    padding:12px 18px;

    border-radius:50px;

    background:#F3F4F6;

    color:#111827;

    font-size:14px;

    transition:0.3s ease;
}

.trending-tags a:hover{

    background:#FF7A00;

    color:white;
}

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

.mobile-btn{

    display:none;
}

/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode{

    background:#0D1117;

    color:white;
}

body.dark-mode .main-header{

    background:
    rgba(13,17,23,0.88);
}

body.dark-mode .mega-menu,
body.dark-mode .search-box form,
body.dark-mode .search-trending{

    background:#111827;
}

body.dark-mode .main-navigation ul li a,
body.dark-mode .mega-post h4,
body.dark-mode .trending-tags a{

    color:white;
}

body.dark-mode .search-box input{

    background:#111827;

    color:white;
}

body.dark-mode .search-btn,
body.dark-mode .theme-btn,
body.dark-mode .mobile-btn{

    background:#1A2230;

    color:white;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1400px){

    .mega-menu{

        width:900px;
    }
}

@media(max-width:1200px){

    .main-navigation{

        display:none;
    }

    .mobile-btn{

        display:flex;
    }
}

@media(max-width:768px){

    .topbar{

        display:none;
    }

    .header-container{

        min-height:76px;
    }

    .site-logo img{

        height:52px;
    }

    .search-btn,
    .theme-btn,
    .mobile-btn{

        width:44px;
        height:44px;
    }

    .search-box form{

        flex-direction:column;

        border-radius:24px;
    }

    .search-box button{

        width:100%;
        height:60px;
    }

    .search-box input{

        width:100%;
    }
}