body {
  background-color: white;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: lightgray;
}

h1 {
  font-family: Geneva, Georgia, serif;
  font-size: 60px;
  color: black;
}

h3 {
  font-family: Geneva, Georgia, serif; 
  color: #04AA6D;
}
h4 {
  font-family: Geneva, Georgia, serif; 
  color: #04AA6D;
}

/*------------------Header Section----------------*/

.headerAlighn {
	display: inline;
}



/*------------------Mega Menu---------------*/

 /* Navbar container */
.navbar {
  overflow: hidden;
  background-color: white;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* The dropdown container */
.dropdown {
 float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
   
}

/* Add a blue background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: blue;
  color: white;
}


/* Add an active class to highlight the current main menu item */
.dropbtn.active {
  background-color:#04AA6D;
  color: white;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child)/*, .dropdown .dropbtn*/{
    display: none;
  }
  .navbar a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
 .navbar.responsive {float: none;}
  .navbar.responsive {position: relative;}
  .navbar.responsive {
    display: block;
    width: 100%;
    text-align: left;
  }
} 


/*------------------Content Columns----------------*/

/* Create three equal columns that floats next to each other */
.megaColumn {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #333;
  height: 250px;
}

/* Style links inside the columns */
.megaColumn a {
  float: none;
  color: white;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a background color on hover */
.megaColumn a:hover {
  background-color: #555;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
} 

 /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .megaColumn {
    width: 100%;
    height: auto;
  }
} 

/*------------------Top Nav Bar----------------*/

  /* Add a black background color to the top navigation */
.topnav {
  background-color: #04AA6D;
  overflow: hidden;
  display: flex;
  width: 100%;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 17px;
  text-decoration: none;
  font-size: 17px;
  
}

.topnavbtn {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 17px;
  text-decoration: none;
  font-size: 17px;
  background-color: #04AA6D;

}


/* Add an active class to highlight the current page */
.topnavbtn .active {
  background-color:green;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}



/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover {
  background-color: blue;
  color: white;
}



/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child)/*, .dropdown .dropbtn*/{
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
 .topnav.responsive {float: none;}
  .topnav.responsive {position: relative;}
  .topnav.responsive {
    display: block;
    width: 100%;
    text-align: left;
  }
} 


/*------------------Search and menu align----------------*/

.subMenuAlign {
	width: 60%;
	display: block;
}

.searchAlign {
	width: 40%;
	display: block;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .subMenuAlign, .searchAlign {
	width: 100%;
  }
}


/*------------------Search Box----------------*/

/* Style the whole search bar */
div.searchbar {
  float: right;
  width: 100%;
  padding: 10px;

 
}


/* Style the search field */
div.searchbar input[type=text] {
  
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

/* Style the submit button */
div.searchbar button {
  float: left;
  width: 20%;
  
  background: #2196F3;
  color: white;
  font-size: 21px;
  border: 1px solid grey;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
}

div.searchbar button:hover {
  background: #0b7dda;
}

/* Clear floats */
div.searchbar::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  div.searchbar {
    width: 100%;
    height: auto;
  }
} 


/*------------------Alighnment of Asides and Section----------------*/

.column {
  float: left;
  position: relative;
}

/* Left and right column */
.column.leftSide {
  width: 20%;
  padding: 10px;
  color: black;
}
.servicesHDG {
  font-family: Geneva, Georgia, serif; 
  color: white;
  background: #04AA6D;
}

/* Middle column */
.column.middle {  
  width: 70%; 
  padding: 10px;
  color: black;
}

.column.rightSide {
  width: 10%;
 /* width: 160px;*/
 /* height:600px; */ 
  /* float: right; */
  border: 3px solid #73AD21;
  padding: 10px;
  color: black;
 
  float: left;
  position: relative;
  display: inline-block;
  
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.leftSide, .column.middle, .column.rightSide {
	width: 100%;
  }
}


/*-----------------Top Logo-----------------*/

 
/* main logo */
.topLogo {
  float: left;
  display: inline;
  width: 65px;
  height: 45px;
}


/*-------------------HomePage SlideShow----------------*/

* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.slideShowContainer {
  position: relative;
  width: 100%;
 
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.slideShowCursor {
  cursor: pointer;
}

/* Next & previous buttons */
.slideShowPrev,
.slideShowNext {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: -1px -1px 0 #00FF00,  
                1px -1px 0 #00FF00,
               -1px 1px 0 #FF0000,
                1px 1px 0 #FF0000; /* Adjust the pixel values as needed */
}

/* Position the "next button" to the right */
.slideShowNext {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.slideShowPrev:hover,
.slideShowNext:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.slideShowRow:after {
  content: "";
  display: table;
  clear: both;  
}

/* Six columns side by side */
.slideShowColumn {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumbnail images */
.thumbnail {
  opacity: 0.6;
}

.active,
.thumbnail:hover {
  opacity: 1;
}

.slideShowCaption{
	text-transform: capitalize;
}




/*------------------Footer---------------*/
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 35px;
  background-color: red;
  padding:2px 2px; 
  color: white;
  text-align: center;

}



/*------------------news Bar---------------*/

.news {
  float: left;
  position: relative;
  display: inline-block;
  height: 100%;
  
 

}

.news.linksContainer {
 
  width: 15%;
  
  background-image: linear-gradient(to bottom right, black, red);
  color: black;
  text-align: left;
}


.news.headlinesContainer {
  
  width: 80%;
  text-transform: uppercase;
  font-weight: bold;
  white-space: nowrap;  
  overflow: hidden;
  text-overflow: clip;
  padding:3px 2px; 
  background-color: white;  
  color: black;
  text-align: left;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}



 

/* The headlines animation code */
@keyframes headlinesScroll {
  0% {transform: translateX(100%);}
  100% {transform: translateX(-2800px);}
}

/* The headlinens element to apply the animation to */

div.newsScroll{ 
  width: 100%;
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  white-space: nowrap;  
  text-overflow: clip;  
  color: black;
  animation: headlinesScroll 30s infinite linear;
}
	
a.newsItem{ 
  text-decoration: none;
  color: black;
 
}
	
/*	
	Which CSS breakpoints to use?

    For Mobile Devices – 320px — 480px.
    iPads and Tablets – 481px — 768px.
    Laptops and small screen – 769px — 1024px.
    Large screens and Desktops – 1025px — 1200px.
    TV and Extra Large Screens – 1201px and more.
	
	
	
	 Extra small devices (phones, 600px and down)
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) 
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up)
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) 
@media only screen and (min-width: 1200px) {...} 
*/


.ServicesColumn{
	color: black;
}

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

.advert{ 
  
  color: red;
  text-align: center;
  text-shadow: -1px -1px 0 #00FF00,  
                1px -1px 0 #00FF00,
               -1px 1px 0 #FF0000,
                1px 1px 0 #FF0000; /* Adjust the pixel values as needed */
 
}




/*------------------advert animation---------------*/

#animatedText {
  font-size: 13px;
  font-weight: bold;
}

/* Define the animation */
@keyframes textAnimation {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Apply the animation to the element with the 'animate' class */
.animated {

  animation: textAnimation 5s ease-in-out infinite;
  animation-delay: 2s; /* Add a 3-second delay before the animation starts */
}