/* ==========================================================
   HEADER.CSS
   PART 1
   Root + Reset + Topbar
========================================================== */

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

:root{

    --sf:#FF6700;
    --sf-l:#FF8C35;
    --sf-d:#CC5200;

    --sf-pale:#FFF3EC;

    --gold:#FFC72C;
    --gold-d:#D4A017;

    --cream:#FFFDF8;

    --white:#ffffff;

    --dark:#14100A;
    --dark2:#231708;

    --grey:#6B6157;
    --grey-lt:#F5F0EA;

    --radius:18px;
    --radius-sm:10px;

    --transition:.35s cubic-bezier(.4,0,.2,1);

    --shadow-sm:0 2px 14px rgba(255,103,0,.13);
    --shadow-md:0 8px 36px rgba(255,103,0,.18);
    --shadow-lg:0 24px 70px rgba(255,103,0,.22);

}


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

*,
*:before,
*:after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--cream);
    color:var(--dark);
    overflow-x:hidden;

}

a{

    text-decoration:none;
    color:inherit;

}

img{

    max-width:100%;
    display:block;

}


/* Scrollbar */

::-webkit-scrollbar{

    width:6px;

}

::-webkit-scrollbar-track{

    background:var(--sf-pale);

}

::-webkit-scrollbar-thumb{

    background:var(--sf);
    border-radius:20px;

}


/* ===========================
   TOP BAR
=========================== */

#topbar{

    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:1001;

    height:66px;

    padding:0 4%;

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

    background:#ffffff;

    border-bottom:2px solid #dddddd;

    box-shadow:0 2px 8px rgba(0,0,0,.09);

}


/* ===========================
   LEFT SECTION
=========================== */

.tb-left{

    display:flex;
    align-items:center;
    gap:12px;

}


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

.tb-logo{

    width:52px;
    height:52px;

    flex-shrink:0;

    border-radius:50%;

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

    font-size:1.9rem;

    background:linear-gradient(
        135deg,
        var(--sf),
        var(--gold)
    );

    border:2px solid rgba(255,103,0,.25);

    box-shadow:0 3px 12px rgba(255,103,0,.22);

    transition:var(--transition);

}

.tb-logo:hover{

    transform:scale(1.06) rotate(-4deg);

}


/* ===========================
   TITLE
=========================== */

.tb-text-group{

    display:flex;
    flex-direction:column;

    gap:2px;

}

.tb-name{

    font-size:1rem;

    font-weight:800;

    color:#1a237e;

    line-height:1.2;

    white-space:nowrap;

}

.tb-tagline{

    font-family:'Noto Sans Devanagari',sans-serif;

    font-size:.74rem;

    font-weight:500;

    color:#555;

    white-space:nowrap;

}


/* ===========================
   RIGHT SECTION
=========================== */

.tb-right-col{

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:2px;

}

.tb-helpline-num{

    font-size:1rem;

    font-weight:800;

    color:#1a237e;

}

.tb-regnum{

    font-family:'Noto Sans Devanagari',sans-serif;

    font-size:.68rem;

    color:#c62828;

    text-align:right;

}


/* ===========================
   MOBILE CONTACT
=========================== */

.tb-mob-contact{

    display:none;

    flex-direction:column;

    gap:2px;

    margin-top:2px;

}


/* ===========================
   PAGE START
=========================== */

.page-start{

    padding-top:110px;

}

/* ==========================================================
   HEADER.CSS
   PART 2
   Navbar + Sidebar
========================================================== */


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

#nav{

    position:fixed;

    top:66px;
    left:0;
    right:0;

    z-index:1000;

    height:44px;

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

    padding:0 3%;

    background:linear-gradient(
        90deg,
        var(--sf),
        var(--sf-d),
        #B84700
    );

    box-shadow:0 4px 18px rgba(255,103,0,.35);

    transition:var(--transition);

}

#nav.scrolled{

    box-shadow:0 6px 28px rgba(255,103,0,.45);

}


/*==========================================================
  MOBILE TITLE
==========================================================*/

.nav-title{

    display:none;

    flex:1;

    color:#ffffff;

    font-size:1rem;

    font-weight:600;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


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

.nav-links-wrap{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:space-evenly;

}

.nav-links-wrap a{

    color:#ffffff;

    font-size:.78rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

    padding:6px 8px;

    border-radius:6px;

    transition:var(--transition);

}

.nav-links-wrap a:hover{

    background:rgba(255,255,255,.18);

    transform:translateY(-2px);

}

.nav-links-wrap a.active{

    background:rgba(255,255,255,.22);

}


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

.nav-auth{

    display:flex;

    gap:8px;

    margin-left:5px;

}

.btn-nav-login{

    padding:6px 14px;

    border-radius:50px;

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.45);

    color:#ffffff;

    font-size:.76rem;

    font-weight:700;

    text-transform:uppercase;

    transition:var(--transition);

}

.btn-nav-login:hover{

    background:rgba(255,255,255,.25);

}


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

.btn-nav-register{

    padding:6px 14px;

    border-radius:50px;

    background:#ffffff;

    color:var(--sf);

    font-size:.76rem;

    font-weight:700;

    text-transform:uppercase;

    transition:var(--transition);

    box-shadow:0 3px 12px rgba(0,0,0,.18);

}

.btn-nav-register:hover{

    transform:translateY(-2px);

}


/*==========================================================
  HAMBURGER
==========================================================*/

.hbg{

    display:none;

    flex-direction:column;

    gap:5px;

    padding:10px 12px;

    border-radius:8px;

    cursor:pointer;

    background:rgba(255,255,255,.15);

    border:2px solid rgba(255,255,255,.45);

}

.hbg span{

    width:22px;

    height:2px;

    background:#ffffff;

    border-radius:50px;

    transition:.35s;

}

.hbg.open span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.hbg.open span:nth-child(2){

    opacity:0;

}

.hbg.open span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}


/*==========================================================
  SIDEBAR OVERLAY
==========================================================*/

.sidebar-overlay{

    position:fixed;

    inset:0;

    z-index:1998;

    opacity:0;

    pointer-events:none;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(4px);

    transition:.35s;

}

.sidebar-overlay.show{

    opacity:1;

    pointer-events:auto;

}


/*==========================================================
  SIDEBAR
==========================================================*/

#sidebar{

    position:fixed;

    top:0;

    left:-75vw;

    width:70vw;

    max-width:360px;

    height:100vh;

    background:#ffffff;

    z-index:1999;

    display:flex;

    flex-direction:column;

    overflow-y:auto;

    transition:left .35s;

    box-shadow:6px 0 35px rgba(0,0,0,.25);

}

#sidebar.open{

    left:0;

}


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

.sb-header{

    padding:20px;

    position:relative;

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

}

.sb-logo-row{

    display:flex;

    gap:12px;

    align-items:center;

    margin-bottom:12px;

}

.sb-logo-icon{

    width:46px;

    height:46px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.4rem;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        var(--sf),
        var(--gold)
    );

}

.sb-org-name{

    color:#ffffff;

    font-weight:700;

    font-size:.92rem;

    line-height:1.3;

}

.sb-org-sub{

    color:var(--gold);

    font-size:.66rem;

}

.sb-reg{

    color:rgba(255,255,255,.55);

    font-size:.65rem;

    line-height:1.6;

}


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

.sb-close{

    position:absolute;

    right:15px;

    top:15px;

    width:34px;

    height:34px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    color:#ffffff;

    background:rgba(255,255,255,.10);

    transition:var(--transition);

}

.sb-close:hover{

    background:rgba(255,103,0,.45);

}


/*==========================================================
  SIDEBAR MENU
==========================================================*/

.sb-nav{

    flex:1;

    padding:12px 0;

}

.sb-nav a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:13px 22px;

    font-size:.90rem;

    font-weight:600;

    color:var(--dark);

    border-left:3px solid transparent;

    transition:var(--transition);

}

.sb-nav a:hover,

.sb-nav a.sb-active{

    background:var(--sf-pale);

    color:var(--sf);

    border-left-color:var(--sf);

}

.sb-icon{

    width:34px;

    height:34px;

    border-radius:9px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--grey-lt);

    color:var(--grey);

    transition:var(--transition);

}

.sb-nav a:hover .sb-icon,

.sb-nav a.sb-active .sb-icon{

    background:rgba(255,103,0,.15);

    color:var(--sf);

}

.sb-divider{

    height:1px;

    margin:10px 22px;

    background:var(--grey-lt);

}


/*==========================================================
  SIDEBAR FOOTER
==========================================================*/

.sb-footer{

    padding:20px;

    border-top:1px solid var(--grey-lt);

}

.sb-helpline-row{

    display:flex;

    gap:10px;

    align-items:center;

    padding:10px 14px;

    border-radius:10px;

    background:var(--grey-lt);

}

.sb-helpline-row i{

    color:var(--sf);

}

.sb-helpline-row .hn{

    font-size:.90rem;

    font-weight:700;

    color:var(--sf);

}

.sb-helpline-row .hl{

    font-size:.70rem;

    color:var(--grey);

}


/*==========================================================
  SIDEBAR BUTTONS
==========================================================*/

.sb-auth{

    display:flex;

    gap:10px;

    margin-top:15px;

}

.sb-btn-login{

    flex:1;

    text-align:center;

    padding:10px;

    border-radius:10px;

    border:1px solid var(--sf);

    color:var(--sf);

    font-weight:700;

    transition:var(--transition);

}

.sb-btn-login:hover{

    background:var(--sf);

    color:#ffffff;

}

.sb-btn-reg{

    flex:1;

    text-align:center;

    padding:10px;

    border-radius:10px;

    color:#ffffff;

    font-weight:700;

    background:linear-gradient(
        135deg,
        var(--sf),
        var(--gold)
    );

    transition:var(--transition);

}

.sb-btn-reg:hover{

    transform:translateY(-2px);

}

/* ==========================================================
   HEADER.CSS
   PART 3
   Responsive Design
==========================================================*/


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

@media (max-width:1100px){

    .nav-links-wrap a{

        font-size:.72rem;
        padding:6px 5px;

    }

}


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

@media (max-width:900px){

    /* ---------- TOPBAR ---------- */

    #topbar{

        height:auto;

        padding:10px 3%;

        justify-content:center;

        text-align:center;

    }

    .tb-left{

        flex-direction:row;

        align-items:center;

        gap:10px;

    }

    .tb-text-group{

        align-items:center;

    }

    .tb-logo{

        width:50px;
        height:50px;

        font-size:1.7rem;

    }

    .tb-name{

        font-size:1rem;

        white-space:normal;

        text-align:center;

    }

    .tb-tagline{

        display:block;

        font-size:.78rem;

        white-space:normal;

        text-align:center;

    }

    .tb-right-col{

        display:none;

    }

    .tb-mob-contact{

        display:flex;

    }

    .tb-mob-contact .tb-helpline-num{

        font-size:.92rem;

        text-align:center;

    }

    .tb-mob-contact .tb-regnum{

        font-size:.68rem;

        text-align:center;

    }


    /* ---------- NAVBAR ---------- */

    #nav{

        flex-direction:row-reverse;

    }

    .nav-links-wrap{

        display:none;

    }

    .nav-auth{

        display:none;

    }

    .nav-title{

        display:block;

        text-align:left;

        padding-left:12px;

    }

    .hbg{

        display:flex;

    }

}


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

@media (max-width:767px){

    #topbar{

        height:auto;

        padding:8px 3%;

    }

    .tb-left{

        gap:8px;

    }

    .tb-logo{

        width:46px;
        height:46px;

        font-size:1.5rem;

    }

    .tb-name{

        font-size:.88rem;

    }

    .tb-tagline{

        font-size:.70rem;

        margin-top:2px;

    }

    .tb-mob-contact .tb-helpline-num{

        font-size:.88rem;

    }

    .tb-mob-contact .tb-regnum{

        font-size:.65rem;

    }

    .nav-title{

        font-size:.90rem;

    }

    #sidebar{

        width:80vw;

    }

}


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

@media (max-width:480px){

    #topbar{

        padding:6px 2.5%;

    }

    .tb-left{

        gap:6px;

    }

    .tb-logo{

        width:40px;
        height:40px;

        font-size:1.3rem;

    }

    .tb-name{

        font-size:.76rem;

    }

    .tb-tagline{

        font-size:.62rem;

    }

    .tb-mob-contact .tb-helpline-num{

        font-size:.75rem;

    }

    .tb-mob-contact .tb-regnum{

        font-size:.58rem;

    }

    .nav-title{

        font-size:.78rem;

    }

    #sidebar{

        width:88vw;

    }

}


/*==========================================================
  VERY SMALL DEVICES
==========================================================*/

@media (max-width:360px){

    .tb-name{

        font-size:.70rem;

    }

    .tb-tagline{

        font-size:.58rem;

    }

    .nav-title{

        font-size:.72rem;

    }

    .tb-logo{

        width:36px;
        height:36px;

        font-size:1.1rem;

    }

}


/*==========================================================
  PAGE SPACING
==========================================================*/

.page-start{

    padding-top:110px;

}