@media (min-width:1200px) {
	/* HeaderBottom menu */
	.HeaderMenu ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
	.HeaderMenu ul li a { color: var(--whiteColor); font-size: var(--Font-18); padding: 16px 0px;position: relative;}
	.HeaderMenu ul li a::before{content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 0;background-color: var(--secondaryColor);transition: 0.3s all ease-in-out;}
	.HeaderMenu ul li.hover > a::before {width: 100%;height: 5px;}
	.HeaderMenu ul>li.parent>a:after { content: ""; width: 8px; height: 8px; display: inline-block; margin-left: 8px; border: 2px solid var(--whiteColor); border-top: none; border-right: none; transform: rotate(-45deg); top: -3px; position: relative; }
	.HeaderMenu ul>li ul { margin-top: 0px; padding-left: 0px; position: absolute; top: 100%; left: 0; width: 300px; opacity: 0; visibility: hidden; top: calc(100% + 20px); transition: 0.3s all ease-in-out; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; z-index: 9;}
	.HeaderMenu ul>li ul li:last-child a { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
	.HeaderMenu ul>li.hover > ul { opacity: 1; visibility: visible; top: calc(100% + 0px); }
	.HeaderMenu > ul > li { margin-right: 30px; overflow: hidden; }
	.HeaderMenu>ul>li:hover{overflow: visible;}
	.HeaderMenu>ul>li:last-child { margin-right: 0px; }
	.HeaderMenu ul>li ul li { width: 100%; }
	.HeaderMenu ul>li ul li a { width: 100%; padding: 8px 15px; font-size: var(--Font-16); border-bottom: 1px solid #0f93a2; background-color: var(--primaryColor); }
	.HeaderMenu ul>li ul li:last-child a { border-bottom: 1px solid transparent; }
	.HeaderMenu ul>li ul li>ul { left: 100%; }
	.HeaderMenu > ul> li> ul { left: -5px; }
	.HeaderMenu ul>li ul li.hover > ul { top: 0%; }
	.HeaderMenu ul>li ul li.parent > a:after { content: ""; width: 7px; height: 7px; display: inline-block; margin-left: 8px; border: 2px solid var(--whiteColor); border-bottom: none; border-left: none; transform: rotate(45deg); position: absolute; right: 15px; top: 14px; }
	.parent-trigger { display: none; }
	.primary-nav__button-toggle {display: none;}
	
}

@media (min-width: 1400px) {
    .container { max-width: 1414px; }
}
	
@media (max-width: 1399px) {
	:root {--Font-40:2.2em; --Font-56:3em;}
	.container { max-width: 1200px; }
	.mainBanner h2.bannerTitle{line-height: 58px;}
	.serviceCard{padding: 18px;}
	.mobileAppCard{padding: 44px 38px 0;}
	.mobileAppTitle{font-size: var(--Font-34);line-height: 40px;}
	.complaintInfo .complaintInner{padding: 0 60px;}
	span.complaintLabel{font-size: var(--Font-20);}
	span.complaintNumber{font-size: var(--Font-28);}
	.helpMenu li{margin-bottom: 20px;padding-bottom: 20px;}
}

@media (max-width:1199px) {
 .HeaderBottom { position: absolute; left: 0; top: 100%; width: 100%; display: none; background-color: var(--primaryColor); z-index: 999; }
 header .parent-trigger { 
  line-height: normal; 
  font-size: var(--Font-16); 
  color: var(--whiteColor); 
  width: 40px; 
  height: 40px; 
  background-color: var(--primaryColor); 
  display: flex; 
  flex-direction: column;
  justify-content: center; 
  align-items: center; 
  border-radius: 50%; 
  margin-left: 0px; 
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
 }
 header .parent-trigger span {
  width: 20px;
  height: 2px;
  background-color: var(--whiteColor);
  margin: 2px 0;
  transition: all 0.3s ease;
  border-radius: 1px;
  position: relative;
 }
 header .parent-trigger span::after {
	background: #fff;
	height: 2px;
	width: 100%;
	position: absolute;
	content: "";
	top: -7px;
}
header .parent-trigger span::before {
	background: #fff;
	height: 2px;
	width: 100%;
	position: absolute;
	content: "";
	bottom: -7px;
}
 header .parent-trigger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
 }
 header .parent-trigger.active span:nth-child(2) {
  opacity: 0;
 }
 header .parent-trigger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
 }
 body.menu-open {
  overflow: hidden;
 }
 .HeaderMenu ul li a { padding: 15px 20px; display: block; }
 .HeaderMenu ul li ul li a { padding: 10px 30px; }
 .HeaderMenu ul li ul li ul li a { padding: 10px 45px; }
 .HeaderMenu>ul li ul li ul li ul li a { padding: 10px 60px; }
 .HeaderMenu ul li { position: relative; }
 .HeaderMenu ul li .child-trigger { 
  position: absolute; 
  right: 0px; 
  top: 0px; 
  width: 50px; 
  height: 50px;
  background-color: var(--secondaryColor); 
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
 }
 .HeaderMenu ul li .child-trigger span { 
  width: 8px; 
  height: 8px; 
  display: inline-block; 
  border: 1px solid var(--whiteColor); 
  border-top: none; 
  border-right: none; 
  transform: rotate(-45deg);
  transition: all 0.3s ease;
 }
 .HeaderMenu ul li .child-trigger.active span {
  transform: rotate(135deg);
 }
 .HeaderMenu ul li ul, .HeaderMenu ul li ul li ul { display: none; margin-top: 0px; background: #193693;}
 .HeaderMenu ul li a { border-bottom: 1px solid var(--secondaryColor); color: #fff; display: block; } 
 .primary-nav__button-toggle{display:none;}
}
 
	
@media(max-width:1023px){
	
	.statItem{padding: 0 15px;}
	.logoSection .urbanLogo{padding-right: 15px;margin-right: 15px;}
}
	
@media(max-width:991px){
.aboutMinister {padding-right: 0; margin-bottom: 25px;}
.statsBox{justify-content: center;}
.statItem {	padding: 0 30px; display:block;}
.complaintInfo{flex-wrap: wrap;}	
.complaintInfo .complaintInner:nth-child(1), .complaintInfo .complaintInner:nth-child(2){padding-left:inherit; margin-bottom:25px;}
.complaintInfo .complaintInner{width: 50%}
.complaintInfo .complaintInner:last-child{border-right: 1px solid #C5C5C5;   padding-right: 60px;}
.logoSection {flex-wrap: wrap;justify-content: center !important;}
.logo {margin-bottom: 15px;}
.topStrip .d-flex.align-items-center.gap-4 {justify-content: center;}
.bannerImages img{height:auto;}
.mainBanner h2.bannerTitle, .mainBanner h2.bannerTitle .colorText{font-size:28px; margin-bottom:15px; line-height: 35px;}
.mainBannerContent a.fillBtn, .mainBannerContent a.outLineBtn{padding: 10px 18px;}
.serviceDetailTitleWhite{font-size:20px;}
}


@media(max-width:767px){
	
.aboutMinister {
	padding-right: 0;
}
.helpSection {
	padding: 50px 0 80px;
}
.footerSection .socBox .col-lg-6.col-md-6 {
	margin-bottom: 25px;
	justify-content: center !important;
	display: flex;
}
.mobNone .footerHeading{display:none;}
.mobNone ul{margin-top:0;}

.mainBanner h2.bannerTitle {
    line-height: 40px;
    font-size: 36px;
  }
.complaintInfo{justify-content: center;}  
.complaintInfo .complaintInner {
	padding: 0 40px;
	display: flex;
	border: none;
	margin-bottom: 25px;justify-content: center;
} 
.certificateMobileSection{padding: 50px 0;}
header.stickyHeader{position: static;}
.headerFixedDecrease{margin-top:0;}
.rightLinks{display:none;}
.topStrip{display: flex;   justify-content: center;}
.mainBannerContent {display: none;}
.mobileAppCard{display: block;}
.complaintInfo .complaintInner {width: 100%; padding:0;}
.complaintInfo .complaintInner:nth-child(1), .complaintInfo .complaintInner:nth-child(2) {	padding-left: 0;}
.footerLinks li{float: none;  width: 100%;}
.uwaw {	max-width: initial !important; width: auto !important;}
 .service-row { flex-direction: column; align-items: flex-start; gap: 10px; }
            .service-actions { width: 100%; display: flex; justify-content: space-between; align-items: center; }
}

@media(max-width:639px){
	.aboutSection, .servicesSection, .quickPaySection{padding: 30px 0;}
	.headTitle.text-start, .aboutText {text-align: center !important;}
	.footerBottom{display: block !important}
	.footerBottomLinks{justify-content: center;}
	.footerCopyright{width: 100%;  display: flex !important;}
	.footerCopyright p {text-align: center !important;}
	.region.region--footer-copyright {margin-bottom: 10px;}
	.socialLinks{justify-content: center; margin-bottom: 15px;}
}

@media (max-width:575px){
	.accessibilitySeciton{flex-wrap: wrap; justify-content: center;}
	.container-inline div{width: 100%;}
	.searchBox {width: 100%;}
	.searchBox input{max-width: 100% !important;   width: 100%;}
	.searchBox form input.button--primary{right: 0;  position: absolute; top: 10px;}
	.outLineBtn.outLineBtnWh{margin-bottom: 10px;}
	.updatesTitle{display:none;}
	.statsBox{flex-wrap: wrap; margin-top: 20px; padding: 20px;}
	.statItem{width:50%;margin-bottom: 15px;    padding: 0;}
	.statItem:last-child {border-right: 1px solid #C5C5C5;}
	.footerLogo a.urbanLogo { padding-right: 15px;  margin-right: 15px;	}
	.complaintInfo .complaintInner:last-child{border-right: 0;   padding-right: 0;}
}

@media(max-width:479px){
	header, .mainHeader .logoSection, .mainHeader .logo img{width:auto; height:auto; max-width: 100%;}
	.headTitle{font-size:28px;line-height: 1.4;}
	span.complaintNumber, .videoTitle {font-size: var(--Font-22);}
	.municipalityTitle{line-height: 32px; font-size: var(--Font-22);}
	.footerLogo img {width: auto; height: auto;	max-width: 100%;}
	.footerCopyright{display:block !important}
	.socialHeader, .tutorialHeader, .footerLogo {margin-bottom: 15px;}
	.socialPost {padding: 0;}
	.helpSection, .certificateMobileSection{padding: 30px 0;}
	.complaintInfo{padding: 15px;}
	.statItem:nth-child(2), .statItem:nth-child(4) {border: none;	padding: 0 10px;}
	.municipalityCard{padding: 20px;}
	.municipalitiesSection{padding: 15px 0;}
	.complaintInfo{margin-top:10px;}
	.appDownloadSection{width: 100%;display: flex; justify-content: center;}
	.appDownBox {flex-wrap: wrap;display: flex !important;	width: 100%;}
	.footerSection .appDownBox .footerHeading{display: flex;  width: 100%;  justify-content: center;line-height: 0;    margin-top: 15px;}
	.mobileAppCard {padding: 20px 20px 0;}
	.mobileAppTitle {font-size: var(--Font-22);	line-height: 30px;	margin-bottom: 20px;}
	.appStoreBtn img {height: auto;	width: auto; max-width: 100%;}
	.appStoreButtons{flex-wrap: inherit; margin-bottom:0;}
}