@charset "utf-8";
/* CSS Document */

/*
	=========================================================================================================
	CSS for Piggs Peak Town Council Website developed by Onswaziline in June 2017. 
	Contcat info@onswaziline.com for more details.
	
	COLOR CODES FROM LOGO
	......................
	
	DARK GREEN 	#006400

	==========================================================================================================
*/


/*
	====================
	GOOGLE WEBFONTS USED
	====================
*/	

	@import url(https://fonts.googleapis.com/css?family=Muli);
	@import url(https://fonts.googleapis.com/css?family=Patua+One);
	@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
	
	
/*
	==========================
	GENERAL WEB PAGE SETTINGS
	==========================
*/

	
	body{ padding:0; margin:0;  font-family:"Muli"; font-size:16px; color:#444; line-height:1.5em; background:#EAFCE2;}
	
	
	img {border:0;}
	.clearfix{ clear:both;}
		
	a, a:link{ color:#006400;text-decoration: none;}
		a:hover, a:active{ color: #390; text-decoration:underline;}
	
	h1 {font-family:"Patua One"; font-size:1.8em; color: #360; text-transform:uppercase; line-height:1em; font-weight:normal; text-align:left;}
		h2 {font-family:"Patua One"; font-size:1.5em; color: #690; line-height:1em; font-weight:normal;text-align:left;}
			h3 {font-family:"Patua One"; font-size:1.3em; color:#006400;  line-height:1em; font-weight:normal;text-align:left;}

/*
	===============
	LINK BUTTONS
	===============
*/
	
	a.btn.btn-green {padding:10px 20px;	background-color: #006400; color: #FFF; font-size:0.9em; border-radius:0.5em; font-weight:bold; text-decoration:none;}
	a.btn.btn-green:hover {background-color: #690; color: #030; text-decoration:none;}
	
	a.btn.btn-lime {padding:10px 20px;	background-color: #9C0; color: #030; font-size:0.9em; border-radius:0.5em; font-weight:bold; text-decoration:none;}
	a.btn.btn-lime:hover {background-color: #030; color: #FFF; text-decoration:none;}


/*
	=======================================
		SCALE ON HOVER WITH TRANSITION
	=======================================
*/	
						
	.grow { transition: all .2s ease-in-out; }
	.grow:hover { transform: scale(1.1); }


	
	#SliderArea{width:100%; padding:0; margin:-18px auto 0 auto; background:#390;}		
	.SliderArea{ margin:0 auto; width:90%; padding:0 20px;}	


			.Welcome{ width:25%; margin:0 auto; float:left; padding:20px 30px; color:#FFF; line-height:1.3em;}
			.Welcome h2 {color:#FFF; font-size:1.2em;}

			.vision, .mission{ width:100%;}
			
			@media (max-width:1355px) 
				{
					.Welcome{ width:25%; margin:0 auto; float:left; padding:10px; color:#FFF; line-height:1.3em;}
					
				}
			
			@media (max-width:1080px) 
				{
					.mission{ display:none;}					
				}
		/* THE AREA OF THE HOMEPAGE WITH THE SLIDESHOW */

		
			#HomeSlider{ width:70%; margin:20px auto 0 auto; float:right;}
			
			/************************************
				THE SLIDE SHOW ADAPTED FROM 
			
			 * Bootstrap v3.1.1 (http://getbootstrap.com)
			 * Copyright 2011-2014 Twitter, Inc.
			 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
			 */
			
			/*! normalize.css v3.0.0 | MIT License | git.io/normalize 
			**************************************************************/
			
			.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
			@media (min-width:768px){.container{width:750px}}
			@media (min-width:992px){.container{width:970px}}
			@media (min-width:1200px){.container{width:1170px}}
			.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
		
	.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after,.form-horizontal .form-group:before,.form-horizontal .form-group:after,.btn-toolbar:before,.btn-toolbar:after,.btn-group-vertical>.btn-group:before,.btn-group-vertical>.btn-group:after,.nav:before,.nav:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after,.navbar-collapse:before,.navbar-collapse:after,.pager:before,.pager:after,.panel-body:before,.panel-body:after,.modal-footer:before,.modal-footer:after{content:" ";display:table}
			.clearfix:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical>.btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.pager:after,.panel-body:after,.modal-footer:after{clear:both}
		.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;max-width:100%;height:auto}
		.carousel{position:relative}
		.carousel-inner{position:relative;overflow:hidden;width:100%}
		.carousel-inner>.item{display:none;position:relative;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}
		.carousel-inner>.item>img,.carousel-inner>.item>a>img{line-height:1}
		.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}
		.carousel-inner>.active{left:0}
		.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}
		.carousel-inner>.next{left:100%}
		.carousel-inner>.prev{left:-100%}
		.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}
		.carousel-inner>.active.left{left:-100%}
		.carousel-inner>.active.right{left:100%}
		.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;margin-left:-30%;padding-left:0;list-style:none;text-align:center}
		.carousel-indicators li{display:inline-block;width:20px;height:20px;margin:1px;text-indent:-999px; cursor:pointer;background-color: #9C0; border-radius:2em;}
		.carousel-indicators .active{margin:0;width:22px;height:22px;background-color:#390;}
		.carousel-caption{position:absolute;left:15%;right:15%;bottom:20px;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}
		.carousel-caption .btn{text-shadow:none}
		.carousel-caption{display:block; width:50%; margin:0 auto;z-index:10; }
		.carousel-caption h1{color:#FFF; font-size:5em; text-align:center;padding:20px; text-shadow: 1px 1px 1px #404041; display:block; }
		
		
		@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-prev,.carousel-control .icon-next{width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px}
		.carousel-caption{display:block;position:absolute;left:0; bottom:40px;z-index:10;padding: 0;}
		.carousel-indicators{bottom:5px}}
		.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
		.glyphicon-chevron-left:before{content:"\e132"}
		.glyphicon-chevron-right:before{content:"\e133"}
		
		@media screen and (max-width:768px){
		.carousel-indicators{position:absolute;bottom:5px;left:50%;z-index:15;width:60%;margin-left:-30%;padding-left:0;list-style:none;text-align:center}
		
		.carousel-caption{display:block;position:absolute;left:0; bottom:40px;z-index:10;padding: 0;}
		
		.carousel-caption h1{ background: url(../bcg/red.png);  padding:10px; color:#FFF;text-align:center; font-size:1.1em;}
		
		}
		@media screen and (max-width:450px){
		.carousel-caption{display: none;;}
		.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px; cursor:pointer;background-color:#FFC; border-radius:2em;}
		.carousel-indicators .active{margin:0;width:12px;height:12px;background-color:#390;}
		
		}				
	
		
			@media (max-width:680px) 
				{
					.Welcome{ width:90%; margin:0 auto; float: none; padding:20px 5px; color:#FFF; line-height:1.3em; text-align:justify;}
					#HomeSlider{ width:100%; margin:0 auto; float: none;}
				}
		

			
			
	
/*
	===============
	HOME TEXT AREA
	===============
*/

	#HomeTextArea{width:100%; margin:20px auto 0 auto; padding:20px 0; line-height:2em;}		
	.HomeTextArea{width:90%;  margin:0 auto; text-align:justify; padding:0 20px;}
	
		.HomeTextArea h2{ font-size:1.5em; text-align:left;  color:#006400;}
	
	.HomeNews{float:left;width:40%; margin:0 40px 0 0; border:1px solid #BEDFB5; padding:20px; background:#FFF;}
	

		.NewsFlashItem{ width:100%;  padding:5px 0; font-size:0.9em; border-bottom:1px dotted #EEE;}
		.NewsFlashItem2{ width:45%;  padding:5px 0; margin:30px 10px; float:left; font-size:0.9em;}
			.NewsFlashItem-l{ width:25%; float:left;}
				.NewsFlashItem-l img{ width:100%;}
			.NewsFlashItem-r{ width:70%; float:right; margin-top:-15px;}	
	
	.HomeQuickLinks{float:left;width:24%; margin:0 40px 0 0; border:1px solid #BEDFB5; text-align:left; padding:20px; background:#FFF;}
		.HomeQuickLinks li{ list-style:url(../graphics/list.png); margin:0 0 0 -20px;}

	.HomeWeather{float: right;width:22%; margin:0;}
		.HomeWeather img{width:100%; margin:0;}
				
		
			@media (max-width:1330px) 
				{
				
					.HomeNews{float:left;width:40%; margin:0 20px 0 0; border:1px solid #BEDFB5; padding:20px; background:#FFF;}
					.HomeQuickLinks{float:left;width:24%; margin:0 20px 0 0; border:1px solid #BEDFB5; padding:20px; background:#FFF;}
					.HomeWeather{float: right;width:22%; margin:0;}
				
				}

		
			@media (max-width:1020px) 
				{
				
					.HomeNews{float:left;width:40%; margin:0 20px 0 0; border:1px solid #BEDFB5; padding:10px; background:#FFF;}
					.HomeQuickLinks{float:left;width:24%; margin:0 20px 0 0; border:1px solid #BEDFB5; padding:10px; background:#FFF;}
					.HomeWeather{float: right;width:22%; margin:0;}
				
				}

		
			@media (max-width:695px) 
				{
				
					.HomeNews{float: none;width:90%; margin:20px auto; border:1px solid #BEDFB5; padding:20px; background:#FFF;}
					.HomeQuickLinks{float:left;width:50%; margin:0 20px 0 0; border:1px solid #BEDFB5; padding:10px; background:#FFF;}
					.HomeWeather{float:right;width:40%; margin:20px auto;}
				
				}
		
			@media (max-width:490px) 
				{
				
					.HomeNews{float: none;width:90%; margin:20px auto; border:1px solid #BEDFB5; padding:20px; background:#FFF;}
					.HomeQuickLinks{float: none;width:90%; margin:20px auto; border:1px solid #BEDFB5; padding:10px; background:#FFF;}
					.HomeWeather{float: none;width:90%; margin:20px auto;}
				
				}

				.social{
					align-items: center;		
					text-align: center;	
					}

	
/*
	===============
	INTRO TEXT AREA
	===============
*/

	#IntroArea{width:100%; margin:20px auto; padding:0; line-height:1.5em;}		
	.IntroArea{width:90%;  margin:0 auto; text-align:justify; padding:0 20px;}
	
		.IntroArea h2{ font-size:1.5em; font-weight:normal; text-align:center;  color:#6C0;}
		
	.IntroBox{float:left;width:22%; margin:0 40px 0 0; padding-bottom:10px; background:#FFF;}
	.IntroBox2{float:left;width:22%; margin:0; padding-bottom:10px; background:#FFF;}
		.IntroBox img, .IntroBox2 img{width:100%;}	


	@media screen and (max-width:1130px)
		{
			.IntroBox{float:left;width:22%; margin:0 20px 0 0; padding-bottom:10px; background:#FFF;}
		}

	@media screen and (max-width:655px)
		{
			.IntroBox, .IntroBox2{float:left;width:45%; margin:20px 20px 0 0; padding-bottom:10px; background:#FFF;}
				.IntroArea h2{ font-size:1.2em; font-weight:normal; text-align:center;  color:#6C0;}
		}

	@media screen and (max-width:470px)
		{
			.IntroBox, .IntroBox2{float:left;width:40%; margin:20px 20px 0 0; padding-bottom:10px; background:#FFF;}
				.IntroArea h2{ font-size:1.2em; font-weight:normal; text-align:center;  color:#6C0;}
		}

	@media screen and (max-width:350px)
		{
			.IntroBox, .IntroBox2{float: none;width:90%; margin:20px auto 0 auto; padding-bottom:10px; background:#FFF;}
		}

	
/*
	===============
	HOME CONTACT AREA
	===============
*/

	#HomeContact{width:100%; margin:20px auto; padding:20px 0; line-height:1.5em; /*background:#FFF;*/}		
	.HomeContact{width:90%;  margin:0 auto; text-align:justify; padding:0 20px;}

	.TheContacts{float:left;width:50%; margin:0 40px 0 0;}
		.TheContacts img{width:100%; margin:0 auto 10px auto;}
	.TheMap{float: right;width:45%; border:4px solid #FFF;}
		.TheMap iframe{width:100%;}
			

	@media screen and (max-width:1089px)
		{
		
			.TheContacts{float:left;width:50%; margin:0 20px 0 0;}
			.TheMap{float: right;width:45%; border:4px solid #FFF;}
		
		}


	@media screen and (max-width:646px)
		{
		
			.TheContacts{float:left;width:50%; margin:0 20px 0 0;}
			.TheMap{float: right;width:40%; border:4px solid #FFF;}
		
		}

	@media screen and (max-width:450px)
		{
		
			.TheContacts{float: none;width:90%; margin:0 auto 20px auto; text-align:left;}
			.TheMap{float:none;width:90%; border:4px solid #FFF;}
		
		}

	
/*
	===============
	MAIN TEXT AREA
	===============
*/


	#MainTextArea{width:100%; margin:20px auto; padding:0; line-height:1.5em; min-height:350px; text-align:justify;}		
	.MainTextArea{width:90%;  margin:0 auto; text-align:justify; padding:20px;}
	
	.MainTextArea li { list-style:url(../graphics/list.png); line-height:2em;}
	
  	
	/** CONTACT FORM **/
	.ContactForm {width:96%; display:block; margin:20px auto; padding:20px; background:#CCF1AB;}
	.ContactForm2 {width:96%; display:block; margin:20px auto; padding:20px; background: #ACD5A8;}
		.ContactFormLeft {width:45%; display:block; float:left; margin:0 40px 0 auto;}
		.ContactFormRight {width:50%; display:block; float: right; margin:0 auto;}
	
		.field {display: block; width:100% ; margin:20px auto;}
		label {display: block; text-align:left;    width:100%; padding:5px 0; font-weight:bold;	 }
		.input{   padding: 5px;    border: 1px solid #9C0;    width:90%;  }
			.button,.button a{background-color: #9C0; font-weight:bold; font-size:1.5em; color: #000; margin:10px 0;  text-decoration:none; padding:20px; border:none;}
				.button:hover,	.button a:hover{ 	background-color: #090; color: #FFF;}		
		
		/** ERROR AND SUCCESS MESSAGE BOXES **/
		.error{ color:#FFF;  width:90%; padding: 10px;   background: #F00 ; margin:0 auto; line-height:1em;}
			.error p, .successful p { width:100%;}
					.successful{ color:#000; width:90%;   padding: 10px;  background: #9C0; margin:0 auto;}
     


		/* THE BOXES FOR PUBLISHED ITEMS */
		.pbox{ margin:20px 10px; text-align:center; width:28%;}
		/* .pbox{ float:left; margin:20px 10px; text-align:center; width:28%;} */
		.pbox2{ float:left; margin:20px 10px; text-align:center; width:20%;}
			.pbox img, .pbox2 img{ width:100%;  -webkit-box-shadow: 0 8px 6px -6px #000; -moz-box-shadow: 0 8px 6px -6px #000;	        box-shadow: 0 8px 6px -6px #000; margin:10px 0; }
	
			
/*
	===============
	FOOTER AREA
	===============
*/

	#Footer{width:100%; margin:0 auto; padding:10px 0; line-height:1em; background:#FFF; font-size:0.8em;  border-top:1px solid #690;}		
	.Footer{width:90%;  margin:0 auto; text-align:justify; text-align: center; padding:0 20px;}
	
/*
	================
	BACK TO THE TOP
	================
*/

	
	.back-to-top {position: fixed; bottom:0; right: 10px;display: none;}
		a.back-to-top ,	a:visited.back-to-top  {background: #690;  padding:2px; }
			a:hover.back-to-top , a.selected.back-to-top { background: #060;}


.MainTextArea table { width: 100%;font-size: 0.9rem;}
.MainTextArea table thead tr th { color: #FFF; border-right:1px solid #FFF; background: #690; padding: 5px 0 10px;}
.MainTextArea table thead tr th:last-child {border-right:none; }
.MainTextArea table thead tr th { text-align: center;}
.MainTextArea table tbody {border-top: none; border-bottom: none;}
.MainTextArea table tbody tr {background-color:#CCFF99; border-bottom:1px solid #FFF; }
.MainTextArea table tbody tr:nth-child(even) { background-color:#B9FF73;}
.MainTextArea table tbody tr td { text-align: center;  padding: 5px 10px;}
.MainTextArea table tbody tr td { text-align: left; width: 130px;}


		
		
/*
	==================================
		GALLERY PAGE - https://danrnascimento.github.io/simplejscarousel/
	==================================
*/

		.project-page-main {	margin-left: 70px;}
		.carousel-container {	width: 100%;	height: 100vh;	margin: 0 auto;	position: relative;	display: flex;	justify-content: center;	overflow: hidden;}
		.current-image {	width: auto;	height: 100%;}
		.next-list {	list-style-type: none;	margin: 0;	padding: 0;	width: 100%;	height: 100px;	position: absolute;	bottom: 10px;	left: 0;	display: flex;	align-items: center;	overflow: hidden;	transition: all .5s;}
		.next-list li {	display: inline-block;	padding: 0;	margin: 0;	width: 100px;	min-width: 100px;	height: 51px;	margin: 0 5px;	text-align: center;	line-height: 50px;	cursor: pointer;
			transition: all .5s;}
		.next-list li:first-of-type {	padding-left: 15px;}
		.next-list li:last-of-type {	padding-right: 15px;}
		.image-of-list {	width: 100%;	height: 100%;	opacity: 0.5;	box-shadow: 0 0 20px #000;	transition: all .5s;}
		.current-image-list {	opacity: 1;	transition: all .5s;}

		.arrow {	display: flex;	position: absolute;	width: 50px;	height: 100px;	bottom:100px;	flex: 1;	text-align: center;	line-height: 50px;	color:#221E71;	cursor: pointer;	display: flex;	align-items: center;	justify-content: center;	z-index: 2;}

		.arrow-left {	left: 10px;}
		.arrow-right {	right: 10px;}

		 /* * Animations */
		 @keyframes fadeIn {     0% {opacity: 0}     100% {opacity: 1} }

		 @keyframes slideInFromLeft {     0% {     	opacity: 0;     	transform: translateX(-100%);    	}
			 100% {     	opacity: 1;     	transform: translateX(0px);     } }

		 @keyframes slideInFromRight {     0% {     	opacity: 0;     	transform: translateX(100%);    	}
			 100% {     	opacity: 1;     	transform: translateX(0px);     } }

		 .slideInFromLeft { 	animation: slideInFromLeft .5s ease-in-out; }
		 .slideInFromRight { 	animation: slideInFromRight .5s ease-in-out; }
		 .fadeIn { 	animation: fadeIn .5s ease-in-out; }


		 /*
	===============
	blog for latest news 
	===============
*/

.blog{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding-top: 2%;
  }
  .single-blog{
	flex-basis:30%;
	border:1px solid #eee;
	margin-bottom:4%;
  }
  .blog-img{
	position:relative;
	overflow:hidden;
  }
  .blog-img img{
	width:100%;
	transition:.3s;
  }
  .single-blog:hover .blog-img img{
	transform:scale(1.1)
  }
  .blog-img a{
	position:absolute;
	left:0;
	top:0;
	color:#fff;
	text-decoration:none;
	text-transform:capitalize;
	font-size:18px;
	background-color:#690;
	padding:10px 30px;
  }
  
  .blog-content{
	  padding: 15px;
  }
  .blog-content a{
	background-color:#006400;
	color:#fff;
	text-decoration:none;
	padding:10px 20px;
	font-size:16px;
	text-transform:capitalize;
	display:inline-block;
	margin-top:20px;
	position:relative;
	z-index:2;
	overflow:hidden;
  }
  .blog-content a:before{
	position:absolute;
	width:100%;
	height:100%;
	left:-100%;
	top:0;
	background-color:#690;
	content:"";
	transition:.3s;
	z-index:-1;
  }
  .blog-content a:hover:before{
	left:0;
  }
  
  @media screen and (max-width:1200px){
  
  .single-blog{
	  flex-basis:48%;
  }
  .blog{
	display:flex;
	flex-wrap:wrap;
	
	justify-content:space-between;
	
	
  }
  }
  
  @media screen and (max-width:600px){
  
	  .single-blog{
	  flex-basis:99%;
  }
  .blog{
	display:flex;
	flex-wrap:wrap;
	
	justify-content:space-between;
	
  }
  }




  .popup {
	position: absolute;
	background-color: #9C0;
	color: #030;
	display: none;
	opacity: 0;
	color: #fff;
	width: 230px;
	left: 88%;
	transform: translateX(-30%);
	padding: 10px;
	border-radius: 7px;
	animation: fade-in 0.9s ease-in 3s forwards;
	margin-top: -130px;
	z-index: 100000000;
}

.popup a:hover {

	text-decoration: none;
}

.popup a p:hover {
	color: #FFF;
}

.popup:hover {
	background-color: #030;
	color: #FFF;
	text-decoration: none;
}

.hidekyc {
	margin-left: 80%;
	cursor: pointer;
}

.popup.show {
	display: block;
	opacity: 1;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

    .grid-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; /* Space between cards */
        gap: 20px; /* Space between rows and columns */
    }

    .card {
        flex: 1 1 calc(30% - 20px); /* Adjust the width of each card */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
        background-color: white;
        padding: 10px;
        margin: 10px 0; /* Margin on top and bottom */
    }

    .card img {
        max-width: 100%; /* Make image responsive */
        height: auto; /* Maintain aspect ratio */
    }

    @media (max-width: 768px) {
        .card {
            flex: 1 1 calc(45% - 20px); /* Two cards per row on smaller screens */
        }
    }

    @media (max-width: 480px) {
        .card {
            flex: 1 1 100%; /* One card per row on mobile */
        }
    }
   .vacancy-section {
        padding: 40px;
        font-family: 'Segoe UI', Arial, sans-serif;
    }

    .vacancy-list-container {
        margin: 0 auto;
        background: #FFF;
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    .list-header {
        background-color: #690;
        color: #FFF;
        margin: 0;
        padding: 20px;
        text-align: center;
    }

    .vacancy-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 30px;
        border-bottom: 1px solid #eee;
        transition: background 0.2s;
    }

    .vacancy-row:last-child {
        border-bottom: none;
    }

    .vacancy-row:hover {
        background-color: #f0f7f0;
    }

    .role-title {
        margin: 0 0 5px 0;
        color: #006400;
    }

    .role-deadline {
        margin: 0;
        color: #666;
    }

    .role-deadline strong {
        color: #030;
    }

    .doc-button {
        display: inline-flex;
        align-items: center; gap: 8px;
        background-color: #690;
        text-decoration: none;
        padding: 10px 20px;
        border-radius: 4px;
        font-weight: 600;
        transition: transform 0.1s, background 0.3s;
        color: white;
    }

    .doc-button:hover {
        background-color: #006400;
        transform: scale(1.02);
    }

    .icon {
        font-size: 1.1rem;
    }

    @media (max-width: 600px) {
        .vacancy-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
        }

        .doc-button {
            width: 100%;
            justify-content: center;
        }
    }

    .bottom-1 {

        height: 300px;
    }
		 	 
/* 
	===============
	MAIN menu
	=============== */


	
	    :root {
        --council-green: #006400;
        --hover-green: #004d00;
        --global-text: 14px;
    }

.Logo-Container {
    /* Change from absolute to fixed to make it stick */
    position: fixed; 
    top: 0;
    left: 5%;
    /* Ensure it stays above the header and other content */
    z-index: 1010; 
    background: #FFF;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    /* Smooth transition if you decide to add scroll effects later */
    transition: all 0.3s ease;
}

.Logo-Container img {
    width: 180px;
    height: auto;
    display: block;
}
    header#TopArea {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        background: #FFF;
    }

    /* 3. Top Strip (Social Links) */
    .Utility-Top {
        background: #F8F8F8;
        padding: 5px 5%;
        display: flex;
        justify-content: flex-end;
    }

    .social-links {
        display: flex;
        gap: 12px;
    }

    .social-links a img {
        width: 22px;
        height: 22px;
    }

    /* 4. GREEN SLIM NAV BAR */
    .Nav-Bar {
        height: 60px;
        padding: 0 5%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20px;
        background: var(--council-green);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* --- 5. THE MENU (UNIFORM 14px) --- */
    .MainMenu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    .MainMenu>li {
        position: relative;
    }

    .MainMenu>li>a {
        display: block;
        padding: 0 15px;
        line-height: 60px;
        color: #FFF;
        text-decoration: none;
        font-weight: bold;
        font-size: var(--global-text);
        /* 14px */
        text-transform: uppercase;
    }

    .MainMenu>li:hover>a {
        background: var(--hover-green);
    }
	    .Current {
        background: var(--hover-green);
    }


    /* Sub-Menus */
    .sub-menu {
        position: absolute;
        top: 60px;
        left: 0;
        background: var(--council-green);
        min-width: 240px;
        list-style: none;
        padding: 0;
        visibility: hidden;
        opacity: 0;
        transition: 0.2s;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .MainMenu li:hover>.sub-menu {
        visibility: visible;
        opacity: 1;
    }

    .sub-menu li {
        position: relative;
    }

    .sub-menu a {
        display: block;
        padding: 12px 18px;
        color: #FFF;
        text-decoration: none;
        font-weight: bold;
        font-size: var(--global-text);
        text-transform: uppercase;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sub-menu a:hover {
        background: var(--hover-green);
    }

    .sub-menu .sub-menu {
        top: 0;
        left: 100%;
    }

    .form-wrapper-2 {
        display: flex;
        align-items: center;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.1);
        border-radius: 3px;
    }

    .form-wrapper-2 input {
        border: none;
        padding: 6px 10px;
        width: 130px;
        font-size: var(--global-text);
        
        font-style: italic;
        outline: none;
        background: transparent;
        color: #FFF;
    }

    .form-wrapper-2 input::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }

    .form-wrapper-2 button {
        background: #FFF;
        color: var(--council-green);
        border: none;
        padding: 6px 10px;
        cursor: pointer;
        font-size: var(--global-text);
        /* 14px */
        font-weight: bold;
    }

    /* --- 7. THE HAMBURGER --- */
    .mobile-toggle {
        display: none;
        font-size: 24px;
        color: #FFF;
        cursor: pointer;
        padding: 10px;
    }

    /* --- RESPONSIVE LOGIC --- */
    @media (max-width: 950px) {
        .mobile-toggle {
            display: block;
        }

        .MainMenu {
            display: none;
            flex-direction: column;
            position: absolute;
            top: 80px;
            left: 0;
            width: 100%;
            background: var(--council-green);
			
        }

        .MainMenu.active {
            display: flex;
        }

        .MainMenu>li>a {
            line-height: 50px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .sub-menu {
            position: static;
            visibility: visible;
            opacity: 1;
            display: none;
            background: var(--hover-green);
        }

        .MainMenu li:hover .sub-menu {
            display: block;
        }

        .form-wrapper-2 {
            display: none;
        }
    }
		 
/* 
	==============
	new home
	============= */
	:root {
    --council-green: #006400;
    --dark-bg: #111;
    --border-color: #ddd;
}

/* --- THE NEW SHARP THEME --- */
#HomeTextArea { padding: 80px 0; background: #fff;margin-top: -20px; }
.HomeContainer { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 1. News Section (Sharp Style) */
.SectionHeader-Sharp { margin-bottom: 50px; }
.SectionHeader-Sharp h2 { font-size: 32px; text-transform: uppercase; letter-spacing: 2px; }
.SectionHeader-Sharp span { color: var(--council-green); }
.line-accent { width: 100px; height: 8px; background: var(--council-green); margin-top: 10px; }

.NewsStripeGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.NewsBlock { border: 1px solid var(--border-color); display: flex; flex-direction: column; }

.BlockImage { position: relative; height: 250px; border-bottom: 5px solid var(--council-green); }
.BlockImage img { width: 100%; height: 100%; object-fit: cover; }

.date-label { 
    position: absolute; top: 0; right: 0; background: var(--council-green); 
    color: #fff; padding: 10px 15px; font-weight: bold; font-size: 13px; 
}

.BlockContent { padding: 30px; background: #fff; }
.BlockContent h3 { font-size: 18px; color: #111; margin-bottom: 15px; line-height: 1.4; text-transform: uppercase; font-weight: 800; }
.BlockContent p { font-size: 14px; color: #666; margin-bottom: 25px; line-height: 1.6; }

.sharp-btn { 
    display: inline-block; padding: 12px 25px; border: 2px solid var(--council-green); 
    color: var(--council-green); text-decoration: none; font-weight: bold; font-size: 12px; 
    text-transform: uppercase; transition: 0.3s;
}
.sharp-btn:hover { background: var(--council-green); color: #fff; }

/* 2. Utility Grid */
.DualGrid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; margin-top: 60px; }

.SharpBox { border: 1px solid var(--border-color); padding: 0; }
.BoxHeading { background: #f4f4f4; border-bottom: 1px solid var(--border-color); padding: 15px 25px; font-weight: bold; font-size: 14px; text-transform: uppercase; color: var(--council-green); }

.LinkGrid { padding: 25px; }
.LinkGrid a { 
    display: block; padding: 15px 0; border-bottom: 1px solid #eee; 
    text-decoration: none; color: #333; font-size: 14px; transition: 0.2s;
}
.LinkGrid a:hover { color: var(--council-green); padding-left: 10px; }

.btn-highlight { background: var(--council-green); color: #fff !important; padding: 15px !important; text-align: center; margin-top: 15px; }

.ScheduleLink { padding: 25px; border-top: 1px solid var(--border-color); }
.ScheduleLink a { position: relative; display: block; }
.ScheduleLink img { width: 100%; border: 1px solid #ddd; }
.img-label { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.8); color: #fff; padding: 10px; font-size: 12px; text-align: center; }

/* 3. Contact Split */
.ContactSplit { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border-color); }
.AddressPane { padding: 80px 10%; background: #fdfdfd; border-right: 1px solid var(--border-color); }

.CivicStatic img { width: 100%; height: 200px; object-fit: cover; margin: 30px 0; filter: grayscale(1); border: 1px solid #eee; }

.c-row { padding: 12px 0; border-bottom: 1px solid #eee; font-size: 14px; color: #444; }
.c-row strong { color: var(--council-green); margin-right: 10px; width: 80px; display: inline-block; }

.SocialBar-Sharp { display: flex; align-items: center; gap: 30px; margin-top: 40px; }
.wa-sharp { background: #111; color: #fff; padding: 15px 25px; text-decoration: none; font-weight: bold; font-size: 13px; text-transform: uppercase; }
.Socials a { margin-right: 15px; color: #111; font-size: 18px; }

.MapPane-Sharp iframe { width: 100%; height: 100%; border: none; min-height: 500px; }

/* Responsive Adjustments */
@media (max-width: 900px) {
    .NewsStripeGrid, .DualGrid, .ContactSplit { grid-template-columns: 1fr; }
    .AddressPane { padding: 40px 20px; }
}

/* --- NEWS IMAGE POSITIONING --- */
.BlockImage { 
    position: relative; 
    height: 350px; /* Increased height */
    overflow: hidden;
    border-bottom: 5px solid #006400;
}

.BlockImage img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: top center; /* Prioritizes heads/faces */
}

/* --- COLOR RESTORATION --- */
.CivicStatic img, 
.MapPane-Sharp iframe { 
    filter: none !important; /* Removes grayscale */
    border-radius: 0;
}

.MapPane-Sharp iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;
}

/* --- SHARP CORNERS & LAYOUT --- */
.NewsBlock, .SharpBox, .sharp-btn, .wa-sharp, .btn-highlight { 
    border-radius: 0 !important; 
}

.NewsStripeGrid, .DualGrid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 40px; 
}

.SectionHeader-Sharp h2 span { color: #006400; }
.line-accent { width: 80px; height: 6px; background: #006400; margin-top: 10px; margin-bottom: 40px; }

.c-row strong { color: #006400; width: 70px; display: inline-block; }