:root {
    --font-heading-size: 3.5rem;
    --font-heading-weight: 700;
    --font-heading-line-height: 1.3;
  
    --font-subheading-size: 1.5rem;
    --font-subheading-weight: 500;
    --font-subheading-line-height: 1.4;

    --font-paragraph-size: 1rem;
    --font-paragraph-weight: 400;
    --font-paragraph-line-height: 1.6;
  }

  #header-placeholder {
    background: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

/* Header CSS Starts Here -------------------------------------------- */

.header {
    width: 100%;
    background-color: white;
    }

    #waraich_infotech_logo {
        max-width: 150px; /* Example, adjust as per your design */
    }
.header-section {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20vh;
    background: transparent;
}

.container {
    width: 80%;
    max-width: 1140px;
}
.waraich_infotech_logo{
    background: transparent;
    display: flex;
    align-items: center;
}

.waraich_infotech_logo img {
    height: 7.5vh;
    background: transparent;
}

.menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 500;
    background: transparent;
    font-size: var(--font-subheading-size);
    font-weight: 400;
    gap: 3vw;
}


.li{
    background: transparent;
    list-style: none;
}
.li a{
    text-decoration: none;
    position: relative;
    font-size: 18px;
}

.li a::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 0;
    height: 2px;
    transition: width 0.3s ease-in-out;
  }

  .li a:hover::after {
    width: 100%;
  }
  
  /* Active page underline */
  .li a.active::after {
    width: 100%;
  }

.menu-mobile{
    display: none;
}

.icon{
    display: none;
}