body {
      font-family: Arial, Helvetica, sans-serif;
      margin: 0;
      background: #f2f2f2;
    }

    /* HEADER */
    .page-header {
      background: linear-gradient(180deg, #162c7a, #1e55d0, #4a8cff);
      padding: 8px 0;
    }

    .header-logo {
      height: 100px;
    }

    .site-title {
      color: #fff;
      font-size: 32px;
      font-weight: bold;
      margin-top: 10px;
    }

    .sub-title {
      color: #ffe600;
      font-size: 28px;
      font-weight: bold;
    }

    .navbar-wrapper {
      background: #398DF6;
    }

    .custom-navbar {
      background: transparent;
      border: none;
      margin: 0;
    }

    .navbar-nav {
      background: #ffffff;
      border-radius: 8px;
      padding: 8px 20px;
      display: flex;
      justify-content: center; /* centers items horizontally */
      align-items: center;     /* centers vertically */
      margin: 0 auto;          /* centers the block itself */
    }

    .navbar-nav > li {
      list-style: none;
      text-align: center;
    }

    .navbar-nav > li > a {
      display: block;
      padding: 6px 10px;
      font-size: 14px;
      font-weight: 600;
      color: #1f3c8f !important;
      text-decoration: none;
      border-radius: 6px;
      white-space: nowrap;
    }

    
    .nav .active {
      background: #138a72;
      border-radius:6px;
    }

    .navbar-nav > .active > a {
      background: #138a72;
      color: #fff !important;
    }

    .navbar-nav > li > a:hover {
      background: #dcdcdc;
      color: #1f3c8f !important;
    }

    /* MOBILE HEADER */

    .mobile-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:8px 12px;
    }

    .mobile-logo{
      height:60px;
    }

    .mobile-title-wrapper{
      flex:1;
      text-align:center;
      padding:0 6px;
    }

    .mobile-menu-btn{
      font-size:28px;
      background:none;
      border:none;
      color:white;
    }

    .footerr {
      background: linear-gradient(to bottom, #000000, #0a0a0a) !important;
      font-size: 0.95rem !important;
    }

    .visitor-count {
      font-size: 1.2rem;
      letter-spacing: 1px;
    }

    .menu-close-btn{
      display:none;
    }

    @media(max-width:768px){

    .site-title{
    font-size:18px;
    }

    .sub-title{
    font-size:14px;
    }


    /* drawer menu */

    #navbar{
    position:fixed;
    top:0;
    right:0;
    width:50%;
    height:auto;
    background:white;
    transition:.35s ease-in-out;
    z-index:9999;
    padding-top:10px;
    padding-bottom:0px;
    }


    /* show drawer */

    #navbar.show{
    right:0;
    }


    /* menu list mobile */

    .navbar-nav{
    margin:0;
    padding:0;
    border-radius:0;
    }

    .navbar-nav li{
    border-bottom:1px solid #ddd;
    text-align:left;
    }

    .navbar-nav li a{
      padding:8px 14px;
      font-size:15px;
      font-weight:600;
      color:#1f3c8f !important;
    }


    /* overlay background */

    .menu-overlay-bg{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:rgba(0,0,0,0.4);
    display:none;
    z-index:9998;
    }

    .menu-overlay-bg.show{
    display:block;
    }

    .menu-close-btn{
      display:block;
      position:absolute;
      top:5px;
      right:15px;
      font-size:20px;
      background:none;
      border:none;
      color:#1f3c8f;
      cursor:pointer;
    }

    }