/* General Styles */
* {
    margin: 0;
    padding: 0;
	font-family: Arial, sans-serif;
}

body {
    box-sizing: border-box;
    line-height: 1.6;
    font-size: 16px;
}

/* Containers */
.body-container{
    background-color: #e1ffff; /*#ffcc00;*/  /* Colours section for container. Colour not seen if padding removed or container is covered */
    /*padding-left: 1in; */                     
    /*padding-right: 1in;*/
}

/* Header */
.header-container {
    background-color: *#e1ffff;   /* Colours section to the side for header */
    color: white;                /* Colour for org-name*/
    /*padding-left: 1in;*/       /*Padding to ident the header section*/
    /* padding-right: 1in;*/
}

.top-banner {
    background-color: #012851;   /*Dark Blue */ /*#000366; <= Navy Blue*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*border-top-left-radius: 15px;  *//* curve only top-left corner */
    /*border-top-right-radius: 15px; *//* curve only top-right corner */
	padding-left: .2in;
    padding-right: .2in;
    /*border-bottom: 1px solid #ddd;*/  /*Optional*/
}

/* Organization Logo and Name */
.logo-and-name {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.top-banner .logo {
    padding: 10px 0px;
	height: 70px;   /*90px recommeded if coat of arm*/
    margin-right: 15px;
}

.org-name {
	font-size: 1.25em; 
    font-weight: bold;
	/*text-transform: uppercase;*/
}

/* Tagline on the Right */
.top-banner .tagline {
    flex: 1;
    text-align: right;
    font-size: .95em;
    font-weight: bold;
	/*font-style: italic;*/
    color:  #ffcc00;
	/*text-transform: uppercase;*/
}
 
nav {
    background-color: #D9BF5E; /*   DBC160....   #ae0000; <- Turkey Red   Blue => #005599;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
	position: relative;
    z-index: 1000; /* Ensures that the navigation stays on top */
}

/* Hide original menu on mobile */
nav .menu {
    display: flex;
    list-style: none;
    justify-content: space-around;
	flex-grow: 1;
}

nav .menu li {
    position: relative;
	line-height: 135%;

}

nav .menu li a {
    color: black;
    text-decoration: none;
    padding: 10px 10px;    /*padding for Nav and dropdown*/
    display: block;
    margin: 0;       /* Remove any default margin */
}

nav .menu li:hover .dropdown {
    display: block;
}

nav .dropdown {
    display: none;
    position: absolute;
    background-color: #005599; /*Royal Blue Dropdown*/
    list-style: none;
    padding: 0;
}

nav .dropdown li {
    width: 210px;
    border-top: 1px solid #ddd;  /*thin border over nav list item*/
	z-index: 9999; /* Ensure drop-down is in front of all elements */
    margin: 0;     /* Remove any default margin in the dropdown*/

}

nav .dropdown li a {
    color: white;
}

/* Hover effect for submenu items */
nav ul.menu li ul li a:hover {
    background-color: #555;   /*Dark Grey*/
}

/* Nested Submenu Styles */
nav ul.menu li ul li ul {
    background-color: #333;
    display: none;
    position: absolute;
    top: 0;
    left: 100%; /* Position to the right of the parent */
    z-index: 10000;
}

nav ul.menu li ul li:hover > ul {
    display: block;
}

/* Search Icon Styles */

.nav-icon a img {
	display: block;
    height: 27px;
	position: absolute;
    transform: translate(-65%, -16%);
}

/*.centerElements  {
    align-items: center !important;       
    justify-content: center !important;   /* Center image and text horizontally *
    text-decoration: none !important;     /* Remove underline on link text *
}*/



/* Set the width and height of the search box */
search-layout{
    display: inline;

}

.gsc-input {
    width: 200px; /* Adjust width as needed */
    height: 25px !important; /* Adjust height as needed */
    font-size: 12px !important; /* Adjust font size */
	background-color: transparent !important;
	box-sizing: border-box !important;      /* Ensures padding doesn’t affect the height */
	line-height: 80%!important;
  }

/* Set the width and height of the search button */
.gsc-search-button {
    height: 35px !important;/* Adjust height as needed */
    font-size: 12px !important; /* Adjust font size */
  }

/* Additional styling if needed */
.gsc-search-box {
    padding: 0 !important;
	margin: 0 auto !important; /* Center align */
}

/*Important Notice scrolling at top*/
.scrolling-notice {
    /*background-color: #0099cc;*/  /* Light Blue */
    background-color: #D9BF5E75; 
    color: black;
    height: 30px;
    /*padding: 5px 0 0 10px;*/
    text-align: center;
	text-decoration: none;
    /*border-top: 1px solid #ddd;*/
}

/* Main Container */
.main-container {
    background-color: #e1ffff;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);    
    color:black;                  /*Font Color for main container*/
    padding: 15px 20px;

}

/* Content Layout */
.content-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: flex-start;
}

.main-container-home {
    color:black;                  /*Font Color for main container*/
}

/* Left Section: Welcome + Section Highlights (for some pages) */
.left-content {
	justify-content: space-between;
	width: 100%;    /*@100% there is no right content*/
}

/* Welcome Section */
.welcome-section{
    margin-bottom: 0;
}
.welcome-section, .section-highlights {
    margin-bottom: 20px;
}

.welcome-section h1 {
    /*margin-bottom: 10px;*/
    font-family: "Garamond", sans-serif;
	font-size: 90px; 
    line-height: 1.2;
    /*text-align: center;*/
    color: #000052;
    -webkit-text-stroke: 2px white;
}

.welcome-section h1a {
    /*margin-bottom: 10px;*/
    font-family: "Garamond", sans-serif;
    font-size: 90px; 
    line-height: 1;
    /*text-align: center;*/
    color: #000052;
}

.welcome-section p {
    line-height: 1.6;
    color: #000052;
}

/* Section Highlights */
.section-highlights2 {
    justify-content: space-between;
	margin-bottom: 50px; /* Space between each flex container*/	
}
.section-highlights {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-top: 22px;
}

.highlight-item {
    flex: 1;
	background-color: #fff;
	margin: 20px;
    padding: 22px;  
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.highlight-itemBlue {
    flex: 1;
    background-color: #012851;
    color: white;
    margin: 20px;
    padding: 22px;  
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}


.highlight-item2 {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: 1fr;

    background-color: #fff;
    margin: 10px;
    padding: 20px;  
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.highlight-item3 {
    flex: 1;
    background-color: #fff;
    margin: 10px;
    padding: 22px;  
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

.highlight-item p {
    text-decoration: none;
}

.highlight-item a {
    display: inline-block;
    margin-top: 10px;  /*padding before hyperlink*/
    color: #4169E1;  /*<-Royal Blue*/ /*007BFF*/
    text-decoration: none;
}

a {
    display: inline-block;
    color: #4169e1;   /*Royal Blue*/
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

/*Grid Containter*/
.item1 { grid-area: admin1; }
.item2 { grid-area: audit1; }
.item3 { grid-area: development1; }
.item4 { grid-area: inspectorate1; }
.item5 { grid-area: admin2;  }
.item6 { grid-area: audit2;  }
.item7 { grid-area: development2; }
.item8 { grid-area: inspectorate2; }
.myOrderD1 {order: 1;}
.myOrderD2 {order: 2;}
.myOrderD3 {order: 3;}
.myOrderD4 {order: 4;}
.myOrderD5 {order: 5;}
.myOrderD6 {order: 6;}
.myOrderD7 {order: 7;}
.myOrderD8 {order: 8;}
.myOrderD9 {order: 9;}
.myOrderD10 {order: 10;}
.myOrderD11 {order: 11;}
.myOrderD12 {order: 12;}
.myOrderD13 {order: 13;}
.myOrderD14 {order: 14;}
.myOrderD15 {order: 15;}
.myOrderD16 {order: 16;}
.myOrderD17 {order: 17;}
.myOrderD18 {order: 18;}
.myOrderD19 {order: 19;}
.myOrderD20 {order: 20;}

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns by default */
  grid-template-areas:
    'admin1 audit1 development1 inspectorate1'
    'admin2 audit2 development2 inspectorate2';
  gap: 10px; /* Space between grid items */
  padding: 0 10px 0 10px ;

}

/*No colour in background*/
.grid-container-one {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* 1 columns by default */
  gap: 10px; /* Space between grid items */
  padding: 0px 10px 0 32px ;    /* top, right, bottom, and left */
}

.grid-container2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns by default */
  grid-template-areas:
    'one three'
    'two four';
  gap: 0px; /* Space between grid items */
  padding: 0px ;
  margin:0;

}

/*Alternate Colour - White and Blue*/
.grid-container-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns by default */
  gap: 10px; /* Space between grid items */
  padding: 0 10px 0 10px ;    /* top, right, bottom, and left */
}

/* Color every even row */
.grid-container-flow > div:nth-child(odd) {
  background-color: #ffffff; /* white */
}

/* Color every odd row */
.grid-container-flow > div:nth-child(even) {
  background-color: #2196F3; /* blue*/
  padding: 10px;
}

.grid-container-flow a {
    text-decoration: none;
    color: black;
}
.grid-container-flow a {
    color: black;
}

.grid-container-flow a:hover {
    color: white;
}
/* Color every even row */
.grid-container > div:nth-child(odd) {
  background-color: #ffffff; /* white */
}

/* Color every odd row */
.grid-container > div:nth-child(even) {
  background-color: #2196F3; /* blue*/
  padding: 10px;
}

.grid-container img{
  padding: 0px 0  0   0;
  margin: 0;
  vertical-align: text-top;
  width: 100%;
}

.grid-twoColumns {   
  display: grid;
  grid-template-columns: 170px 720px;  
  row-gap: 10px;
  column-gap: 60px;
  background-color: #2196F3;   /*blue background*/
  padding: 10px  30px;
}

.grid-twoColumns > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;
  padding: 6px 12px;
}

.highlight-item p {
    text-decoration: none;
}

/* News Ticker */
.news-ticker {
    width: 25%;
    max-width: 250px;
	background-color: #003366;
    color: white;
    padding: 10px;
    overflow: hidden;
    height: 700px;
}

.news-ticker ul {
    list-style: none;
    padding: 0;
}

.news-ticker ul li {
    padding: 10px 0;
	font-size: .9em;
    line-height: 1.3em;
}

.news-ticker h3 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.2em;
}



/* Footer Styles */

footer {
    background-color: #333;  /*not required as overide by footer-section and footer-bottom*/
    color: white;
    padding: 20px 20px 0px 20px;
    border-top: 10px solid #ffcc00;   /*Thick Yellow line over the footer  FDCE06*/
}

.footer-sections {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    background-color: #333;
    color: white;
}

.footer-col h4 {
    margin-bottom: 10px;
    color: #ffcc00;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    text-decoration: none;
    color: #ccc;
}

.footer-col ul li a:hover {
    color: #ffeb9d;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    color: white;
    background-color: #222;
}

.footer-bottom a {
    color: #ffcc00;
}

.footer-bottom a:hover {
    color: #ffeb9d;
}

/* Basic styles for the slider banner */
.slider-container {
    position: relative;
    width: 80%; /* Define the width of the slider */
    /*max-width: 940px; *//* Set a max-width */
    height: 375px; /* Set the height for the banners */
    margin: auto;
    margin-top: 0px;
    padding: 0px;
    gap:0px;
    line-height: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-image {
    position: absolute;
    width: 100%; /* Ensures the image stretches to the full width of the container */
    height: 100%; /* Ensures the image stretches to the full height of the container */
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease-in-out; /* Smooth fade transition */
}

.slider-image.active {
    opacity: 1;  /* Display only the active image */
}

button {             /* Slider Nagication */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

button.prev {
    left: 10px;
}

button.next {
    right: 10px;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* End of Basic styles for the slider banner*/

/* Scroll-to-Top Button */

.back-to-top {
    text-decoration: none;
    font-size: 14px;
}

.back-to-top-mobile {
    position: fixed;
	background-color: #ffcc00;        /* Yellow background color */
	color: #333 !important; /* Overrides color from parent styles */ /*Text Colour*/
	padding: 10px 6px;                /* Padding to create oval shape */
  	border-radius: 30px;              /* Makes the background oval */
	bottom: 35px;                     /* Position from the bottom of the viewport */
  	right: 20px;                      /* Position from the right of the viewport */
  	text-align: center;               /* Center-align the text */
	z-index: 999; 					  /* Covers all elements */
	font-size: 30px;    /* Adjust font size as needed */
 	font-weight: 900 !important; 
	text-decoration: none;
	display: none;
}

.section-content p {    
	text-align: justify;
	text-justify: inter-word;
	line-height: 1.5;
	max-width: 300px; /* Set a max-width */
}

.miicLogo {
	width: 300px;  
	padding-bottom: 20px;
}

.Yellow_bold {
    font-weight: bold;
	color: #ffeb9d;
}

.hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: #ffcc00; 
    cursor: pointer;
    z-index: 1000;
}

.h-menu {
    position: fixed;
    top: 0;
    right: -250px; /* Hidden by default */
    width: 250px;
    height: 100vh;
    background-color: rgba(173, 216, 230, 0.8);  /*colour and Transparentcy Setting*/
    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
    transition: right 0.4s ease;
    z-index: 999; /* Covers all elements */
    overflow-y: auto;
}

.h-menu ul {
    list-style: none;
    padding: 20px;
    overflow: hidden;
}

.h-menu ul li {
    margin: 15px 0;
}

.h-menu ul li a {
    text-decoration: none;
    color: #333;
    font-size: 15px;
    display: block;
    cursor: pointer;
}

.h-nested-menu {
    display: none; /* Initially hidden */
    margin-left: 20px;
    list-style: none;
}

.h-nested-menu li {
    margin: 10px 0;
}

/*Scrolling Arrow for Hamburger Menu*/
.scroll-arrow {
    text-align: center;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    padding: 10px;
    display: none; /* Hidden initially */
}

.up-arrow {
    position: sticky;
    top: 0;
    background-color: rgba(173, 216, 230, 0.8);
}

.down-arrow {
    position: sticky;
    bottom: 0;
    background-color: rgba(173, 216, 230, 0.8);
}


/* Mobile Styles */
@media (max-width: 768px) {
   	nav .menu {
        flex-direction: column;
        align-items: center;
        display: none; /* Hide menu on mobile */
    }
	
    .back-to-top-mobile {
        display: flex;
		z-index: 1001; 					  /* Covers all elements */
    }
	
    .back-to-top {
        display: none;
    }
	
	.body-container {
        padding-left: 0in;
        padding-right: 0in;
    }
	
	.header-container {
	    padding-left: 0in;
        padding-right: 0in;
	}
	
	.top-banner {
        flex-direction: column;
		align-items: center;
    }

	.section-highlights {
        flex-direction: column;
    }

	.content-container {
        flex-direction: column-reverse;
    }
	
	.footer-sections {
        flex-direction: column;
        text-align: center;  /*gap: 10px;*/
    }
	
	.news-ticker {
       width: 100%;
       max-width: 100%;
       padding-right: 0in;
	   height: 175px;
    }
	.section-content p {
        text-align: justify;
        text-justify: inter-word;
        line-height: 1.5;
        max-width: 100%; /* Allow full width on mobile */
        margin: 0 auto; /* Center the text block */
    }

    .slider-container {
        height: 230px; /* Reduce height on medium screens */
    }

    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
        grid-template-areas:
          'admin1 audit1'
          'admin2 audit2'
          'development1 inspectorate1'
          'development2 inspectorate2';
    }


    .myOrderD1 {order: 1;}
    .myOrderD2 {order: 2;}
    .myOrderD3 {order: 5;}
    .myOrderD4 {order: 3;}
    .myOrderD5 {order: 4;}
    .myOrderD6 {order: 7;}
    .myOrderD7 {order: 6;}
    .myOrderD8 {order: 9;}
    .myOrderD9 {order: 10;}
    .myOrderD10 {order: 8;}
    .myOrderD11 {order: 11;}
    .myOrderD12 {order: 12;}
    .grid-container-flow {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
    }

    /* Hamburger menu */
    .hamburger-menu {
        position: relative;
    }

    .grid-twoColumns {   
      grid-template-columns: 1fr; 
    }

.avatar {
  top: 0px; /* Adjusts the vertical position */
  box-sizing: border-box;
  box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0);
  animation: float 6s ease-in-out infinite;
}

.avatar img{
    width: 250px;
    height: auto; /* Maintain aspect ratio */
    display: block;  /* Avoid extra space below the image */
    max-width: 100%;    /* Prevent the image from exceeding the container's width */
    transition: width 0.3s ease; /* Smooth resizing effect */
}

}

@media (max-width: 480px) {
    .slider-container {
        height: 180px; /* Further reduce height on small screens */
    }

    <!--.grid-container {
        grid-template-columns: 1fr; /* 1 column on very small screens */
        grid-template-areas:
          'admin1'
          'admin2'
          'audit1'
          'audit2'
          'development1'
          'development2'
          'inpectorate1'
          'inspectorate2';
    }

    .myOrderD1 {order: 1;}
    .myOrderD2 {order: 3;}
    .myOrderD3 {order: 5;}
    .myOrderD4 {order: 2;}
    .myOrderD5 {order: 5;}
    .myOrderD6 {order: 6;}
    .myOrderD7 {order: 7;}
    .myOrderD8 {order: 9;}
    .myOrderD9 {order: 11;}
    .myOrderD10 {order: 8;}
    .myOrderD11 {order: 10;}
    .myOrderD12 {order: 12;}
    .grid-container-flow {
    grid-template-columns: 1fr; /* 1 column on very small screens */

    }

    .grid-twoColumns {   
      grid-template-columns: 1fr; 
    }

    .avatar {
    display: none;
    }

}

@media screen and (min-width: 768px) {
  .hamburger-menu {
    display: none;
    }
}

/*Others*/

.my-break {              
  flex-basis: 100%;
  height: 0;
}

.my-bold{
    font-weight: bold;
}

.my-italic{
    font-style: italic;
}

.my-underline {
    text-decoration: underline;
}

.my-center {
	text-align: center;
    justify-content: center; 
    align-items: center;
}
.my-Vcenter {
  vertical-align: middle;
      align-items: center;

}
.my-center-bothways {
    align-items: center;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  box-sizing: border-box;
}

.line-height-adjust {
    line-height: 3;
}

ol.a {
    list-style-type: decimal;
    margin-left: 40px;
}

ul.b {
    list-style-type: circle;
    margin-left: 40px;
}

ul.c {
    padding-left: 32px;
    list-style-type: none;
}
ul.d {
    list-style-type: circle;
}

ul {
    padding-left: 32px;
    /*padding-top-start: 0;*/  /*remove line space at the beginning of <ul>*/
    padding-top: 0px;
    margin-top: 0px;
}

li {
  margin: 8px 0;  /*padding between list*/
  padding-top: 0px;
  margin-top: 0;
}

.flex-container {
    display: flex;
    flex-direction: column; /* Ensures paragraphs stack vertically */
    gap: 8px; /* Optional: Adds space between paragraphs */
    background-color: #fff;
    margin: 10px;    /*side margins*/
    padding: 22px;  
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.flex-container p {
    margin-bottom: 10px; /* between paragraphs */
}

.quickLinks{
    font-weight: bold;
    font-size: 16px;
    margin-left: 32px;
   
}

.quickLinks a {
    text-decoration: none;
    color: black;
}

.quickLinks a:hover {
    color: blue;
}

.container-image {
  position: fixed;
  width: 250px; /* Increased image width */
  height: auto; /* Maintain aspect ratio */
  display: flex;
  flex-direction: column;
  top: 260px; /* Adjusts the vertical position */
  right: 0px; /* Aligns the flex container to the right */  margin: 0; /* Resets any default margin */
  transition: width 0.3s ease; /* Smooth resizing effect */

}

.avatar {
  top: 0px; /* Adjusts the vertical position */
  box-sizing: border-box;
  box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0);
  animation: float 6s ease-in-out infinite;
}

.avatar img{
    width: 250px;
    height: auto; /* Maintain aspect ratio */
    display: block;  /* Avoid extra space below the image */
    max-width: 100%;    /* Prevent the image from exceeding the container's width */
    transition: width 0.3s ease; /* Smooth resizing effect */


}

@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0);
    transform: translatey(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0);
    transform: translatey(0px);
  }
}

.my-privacy-head{
    color: darkblue; 
    font-weight: bold;
   
}

#countdown {
    font-size: 1.2em;
    font-weight: bold;
    color: #d4211c;
}
/*Countdown
#countdown {
    font-size: 2rem;
    color: red;
    background: rgba(5, 5, 5, 0.1);
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    animation: pulse 1.5s infinite;
}*/
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}