:root {
  --primary-color: #4a2c82;
  --secondary-color: #f5c518;
  --background-color: #fef7ff;
  --tertiary-color :#5A3700;
  --second-background-color:#F2ECF4;
  --text-color: #7a757d;

  --font-heading: 'Inter', sans-serif;
  --font-body: 'Public Sans', sans-serif;
  --font-ui: 'Inter', sans-serif;

  --font-family: system-ui, -apple-system, sans-serif;
  --transition: all 0.25s ease;
}

.top_header{
    width:100%;
    height: 40px;
    background-color: var(--primary-color);
    padding-inline: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.th_helpline_no_od a{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    text-decoration: none;
    color: #fff;
}
.th_helpline_no_od a .em_help{
    font-family: var(--font-ui);
    font-size: 1.2rem;
}
.th_helpline_no_od a .material-symbols-outlined{
    font-size: 2.1rem;
}
/* Parent */
.accessibility_od {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  gap: 12px;
}

/* Language section */
.language_div {
  display: flex;
  align-items: center;
}

/* Light divider (between English & Hindi) */
.language_div span + span {
  position: relative;
  margin-left: 10px;
  padding-left: 10px;
}

.language_div span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.4); /* LIGHT */
}

/* Bold divider (before accessibility icon) */
.access_div {
  display: flex;
  align-items: center;
  padding-left: 14px;
  margin-left: 10px;
  position: relative;
}

.access_div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  
  width: 3px;          /* thickness (increase) */
  height: 20px;        /* height (increase) */
  
  background-color: #fff;
  border-radius: 10px; /* curve (rounded edges) */
}

/* Text styling */
.lang_hin,
.lang_eng {
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 1.2rem;
}

.lang_hin:hover,
.lang_eng:hover {
  color: var(--secondary-color);
}

/* Icon */
.material-symbols-outlined {
  font-size: 21px;
  cursor: pointer;
}

.access_div:hover .material-symbols-outlined {
  color: var(--secondary-color);
}

.accessibility_od .skip_to{
    font-family: var(--font-ui);
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
}




/* ========= Base (Mobile First) ========= */
/* default CSS = small phones (S24 etc.) */


/* ========= Small Phones ========= */
/* up to ~480px */
@media (max-width: 480px) {
  /* S24, small Android phones */
  .accessibility_od{
    display: none;
  }
}


/* ========= Large Phones ========= */
/* 481px – 767px */
@media (min-width: 481px) and (max-width: 767px) {
  /* iPhone Pro Max, big phones */
  .accessibility_od{
    display: none;
  }
}


/* ========= Tablets ========= */
/* 768px – 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  /* iPads, tablets */
}


/* ========= Small Laptops ========= */
/* 1025px – 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
  /* small laptops */
}


/* ========= Desktop ========= */
/* 1281px – 1600px */
@media (min-width: 1281px) and (max-width: 1600px) {
  /* normal desktop */
}


/* ========= Large Desktop ========= */
/* 1601px+ */
@media (min-width: 1601px) {
  /* big screens, 2K, 4K */
}



/* Main Header start */


.main_Header{
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0.4rem 2rem;
    border-bottom: 2px solid var(--secondary-color);
    position: sticky;
    top: 0px;
    z-index: 999;

}
.mh_brad_od{
    display: flex;
    height: 100%;
    gap: 1rem;
}
.img_div{
    display: flex;
    height: 100%;
}
.img_div img{
    border-radius: 8px;
}
.name_div{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.name_div span{
    font-family: var(--font-heading);
    color: var(--text-color);
}
.name_div .name_eng{
    font-weight: bold;
    color: var(--primary-color);
}  




/* ========= Base (Mobile First) ========= */
/* default CSS = small phones (S24 etc.) */


/* ========= Small Phones ========= */
/* up to ~480px */
@media (max-width: 480px) {
  /* S24, small Android phones */
  .main_Header {
    height: 60px;
  }
  .name_hing .name_hing_eng{
    display: none;
  }
}


/* ========= Large Phones ========= */
/* 481px – 767px */
@media (min-width: 481px) and (max-width: 767px) {
  /* iPhone Pro Max, big phones */
  .name_hing .name_hing_eng{
    display: none;
  }
}


/* ========= Tablets ========= */
/* 768px – 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  /* iPads, tablets */
  
  .mh_other_div{
    display: none;
  }
}


/* ========= Small Laptops ========= */
/* 1025px – 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
  /* small laptops */
  .mh_other_div{
    display: none;
  }
}


/* ========= Desktop ========= */
/* 1281px – 1600px */
@media (min-width: 1281px) and (max-width: 1600px) {
  /* normal desktop */
  .mh_other_div{
    display: none;
  }
}


/* ========= Large Desktop ========= */
/* 1601px+ */
@media (min-width: 1601px) {
  /* big screens, 2K, 4K */
  .mh_other_div{
    display: none;
  }
}







/* Nav Header start */

.nav_header{
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 9.5rem;
    position: sticky;
    top: 82px;
    z-index: 999;

}
.nh_nav_ul{
    padding: 0px;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0px;
}
.nh_nav_ul li{
    display: flex;
    align-items: center;
    justify-content: center;
}
.nh_nav_ul li a{
    padding: 0.6rem 1.5rem;
    text-decoration: none;
    color: var(--text-color);
    position: relative;
}
.nh_nav_ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;

  width: 0%;
  height: 3px;
  background-color: var(--secondary-color);

  transition: width 0.3s ease;
}
.nh_nav_ul li a:hover::after{
    width: 100%;
}
.nh_nav_ul li a.active{
    font-weight: bold;
    color: var(--primary-color);
}
.nh_nav_ul li a.active::after{
    width: 100%;
}
.nav_link.dropdown a{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-color);
}

/* hide dropdown */
.dropdown_od {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 225px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* show when open */
.dropdown.open .dropdown_od {
  display: block;
}

.dropdown .material-symbols-outlined {
  transition: transform 0.3s ease;
}

.dropdown.open .material-symbols-outlined {
  transform: rotate(180deg);
}

/* dropdown parent */
.dropdown {
  position: relative;
}

/* button reset */
.dropdown_toggle {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.5rem;
  position: relative;
}

.dropdown_toggle.active {
  font-weight: bold;
  color: var(--primary-color);
}

.dropdown_toggle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 0%;
  height: 3px;
  background-color: var(--secondary-color);
  transition: width 0.3s ease;
}

.dropdown_toggle.active::after {
  width: 100%;
}

/* hover open (desktop) */
.dropdown:hover .dropdown_od {
  display: block;
}


/* JS open (mobile / click) */
.dropdown.open .dropdown_od {
  display: block;
}


.dropdown_od a::after {
  display: none;
}

.dropdown_od a.active {
  background-color: var(--secondary-color);
  color: #000;
  font-weight: 500;
}

.drop_ul{
    padding: 0px;
    margin: 0px;
}
.dropdown .drop_li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.8rem 1.2rem;
  width: 100%;
}

.drop_li a:hover {
  background-color: #f5f5f5;
}

.login_buttons{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
}
.login_buttons a{
    text-decoration: none;
    padding: 0.4rem 2rem;
    white-space: nowrap;
    background-color: var(--background-color);
    color: var(--primary-color);
    font-weight: 600;
    border: 1px solid var(--text-color);
}
.login_buttons .official{
    background-color: var(--primary-color);
    color: #fff;
    border: none;
}


/* ========= Base (Mobile First) ========= */
/* default CSS = small phones (S24 etc.) */


/* ========= Small Phones ========= */
/* up to ~480px */
@media (max-width: 480px) {
  /* S24, small Android phones */
  .nav_header{
    display: none;
  }
}


/* ========= Large Phones ========= */
/* 481px – 767px */
@media (min-width: 481px) and (max-width: 767px) {
  /* iPhone Pro Max, big phones */
  .nav_header{
    display: none;
  }
}


/* ========= Tablets ========= */
/* 768px – 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  /* iPads, tablets */
  .nav_header{
    padding-inline: 6.5rem;
  }
}


/* ========= Small Laptops ========= */
/* 1025px – 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
  /* small laptops */
}


/* ========= Desktop ========= */
/* 1281px – 1600px */
@media (min-width: 1281px) and (max-width: 1600px) {
  /* normal desktop */
}


/* ========= Large Desktop ========= */
/* 1601px+ */
@media (min-width: 1601px) {
}



/* Mobile navbar start */



/* ===== NAV ===== */
.nh_nav_ul {
  display: flex;
  list-style: none;
}

.nh_nav_ul a {
  padding: 1rem;
  text-decoration: none;
  color: var(--text);
  position: relative;
}

/* underline animation */
.nh_nav_ul a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:3px;
  background:var(--secondary);
  transition:0.3s;
}

.nh_nav_ul a:hover::after {
  width:100%;
}

/* ===== DROPDOWN ===== */
.dropdown { position: relative; }

.dropdown_od {
  position: absolute;
  top:100%;
  left:0;
  background:#fff;
  display:none;
}

.dropdown:hover .dropdown_od {
  display:block;
}

/* ===== MOBILE MENU ===== */
.overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  opacity:0;
  visibility:hidden;
  transition:0.3s;
}

.overlay.active {
  opacity:1;
  visibility:visible;
}

.ph_menu {
  position:fixed;
  top:var(--header-height);
  left:0;
  width:80%;
  height:calc(100dvh - var(--header-height));
  background:var(--background-color);
  transform:translateX(-100%);
  transition:0.3s;
  z-index: 99;
  padding: 0.4rem;
}

.ph_menu.active {
  transform:translateX(0);
}

/* ===== RESPONSIVE ===== */
#ph_menu_btn { display:none; }

@media (max-width:768px) {
  .nh_nav_ul { display:none; }
  #ph_menu_btn { display:block; }
}

#ph_menu_btn .material-symbols-outlined {
  transition: transform 0.3s ease;
}

#ph_menu_btn.active .material-symbols-outlined {
  transform: rotate(180deg);
}

.ph_menu_ul{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.ph_menu_li{
    list-style-type: none;
    display: flex;
}
.ph_menu_li a{
    padding: 0.4rem 2rem;
    width: 100%;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
    background-color: #ffffff66;
}
.ph_menu_ul .ph_dropdown {
    padding: 0.4rem 2rem;
    width: 100%;
    color: var(--text-color);
    position: relative;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
    background-color: #ffffff66;
    display: flex;
    flex-direction: column;
}

.ph_drop_od {
  display: none;
  
  background: #fff;
  min-width: 180px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  width: 100%;
}

/* show when open */
.ph_dropdown.open .ph_drop_od {
  display: block;
}

.ph_dropdown .material-symbols-outlined {
  transition: transform 0.3s ease;
}

.ph_dropdown.open .material-symbols-outlined {
  transform: rotate(180deg);
}
.ph_toggle{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ph_drop_ul{
    list-style-type: none;
    padding: 0px;
}
.ph_drop_li{
    display: flex;
}

.ph_nav_button{
    position: absolute;
    bottom: 0;
    left: 0;
    right:0;
    margin-bottom: 2rem;
    padding-inline: 1rem;
}
.ph_drop_ul .ph_drop_li a{
    font-weight: normal;
}